/*
 * Azyan Hadbah — premium admin theme
 * Identity from https://azyanhadhabah.com/
 *
 * Forest green  #1a2c1d  sidebar / topbar chrome
 * Green mid     #243b2f  elevated / hover surfaces
 * Deep green    #0e2911  overlays / pressed states
 * Gold          #c4a871  accents (site + logo)
 * Cream         #f8f0e0  light contrast on green chrome
 */

:root {
  --khozam-purple: #1a2c1d;
  --khozam-purple-mid: #243b2f;
  --khozam-purple-soft: rgba(248, 240, 224, 0.08);
  --khozam-gold: #c4a871;
  --khozam-gold-hover: #d4b87f;
  --khozam-cream: #f8f0e0;
  --khozam-text: rgba(248, 240, 224, 0.92);
  --khozam-text-muted: rgba(248, 240, 224, 0.62);
  --khozam-border: rgba(196, 168, 113, 0.22);
  --khozam-font: "Thmanyah Sans", sans-serif;
  --khozam-sidebar-width: 230px;
  --khozam-sidebar-collapsed-width: 72px;
  --khozam-header-height: 63px;
  --khozam-leads-sticky-top: 0px;
}

html,
body,
button,
input,
select,
textarea,
label,
p,
div,
a,
li,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.form-control,
.panel-title,
.table,
.nav,
.sidebar,
#header,
.dropdown-menu,
.modal-title,
.badge,
.tox,
.tox *:not(svg):not(rect),
.mce-content-body {
  font-family: var(--khozam-font) !important;
}

body {
  background: var(--khozam-purple) !important;
}

/*
 * System-wide: titles / icons / close on Khozam purple modal headers → white.
 * Covers settings, leads, units, tasks, reminders, excel2csv, and any khozam-* modal.
 */
.modal-header.khozam-modal-header,
.khozam-settings-modal .modal-header,
.khozam-units-modal .modal-header,
.khozam-leads-modal .modal-header,
.khozam-item-modal .modal-header,
.khozam-reminder-modal .modal-header,
.khozam-task-modal .modal-header,
#excel2csv-modal .modal-header,
.modal[class*="khozam-"] .modal-header,
[class*="khozam-"][class*="-modal"] .modal-header {
  color: #fff !important;
}

.modal-header.khozam-modal-header .modal-title,
.modal-header.khozam-modal-header .modal-title *,
.modal-header.khozam-modal-header .close,
.modal-header.khozam-modal-header i,
.khozam-settings-modal .modal-header .modal-title,
.khozam-settings-modal .modal-header .modal-title *,
.khozam-settings-modal .modal-header .close,
.khozam-settings-modal .modal-header i,
.khozam-units-modal .modal-header .modal-title,
.khozam-units-modal .modal-header .modal-title *,
.khozam-units-modal .modal-header .close,
.khozam-units-modal .modal-header i,
.khozam-leads-modal .modal-header .modal-title,
.khozam-leads-modal .modal-header .modal-title *,
.khozam-leads-modal .modal-header .close,
.khozam-leads-modal .modal-header i,
.khozam-item-modal .modal-header .modal-title,
.khozam-item-modal .modal-header .modal-title *,
.khozam-item-modal .modal-header .close,
.khozam-item-modal .modal-header i,
.khozam-reminder-modal .modal-header .modal-title,
.khozam-reminder-modal .modal-header .modal-title *,
.khozam-reminder-modal .modal-header .close,
.khozam-reminder-modal .modal-header i,
.khozam-task-modal .modal-header .modal-title,
.khozam-task-modal .modal-header .modal-title *,
.khozam-task-modal .modal-header .close,
.khozam-task-modal .modal-header i,
#excel2csv-modal .modal-header .modal-title,
#excel2csv-modal .modal-header .modal-title *,
#excel2csv-modal .modal-header .close,
#excel2csv-modal .modal-header i,
.modal[class*="khozam-"] .modal-header .modal-title,
.modal[class*="khozam-"] .modal-header .modal-title *,
.modal[class*="khozam-"] .modal-header .close,
.modal[class*="khozam-"] .modal-header i,
[class*="khozam-"][class*="-modal"] .modal-header .modal-title,
[class*="khozam-"][class*="-modal"] .modal-header .modal-title *,
[class*="khozam-"][class*="-modal"] .modal-header .close,
[class*="khozam-"][class*="-modal"] .modal-header i {
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#wrapper {
  background: #f6f3ef !important;
  padding-top: var(--khozam-header-height) !important;
  min-height: 100vh;
  box-sizing: border-box;
}

body.customers #wrapper {
  padding-top: 0 !important;
}

#wrapper > .content {
  min-height: calc(100vh - var(--khozam-header-height));
}

/* ── Sidebar shell ── */
.sidebar,
#menu.sidebar,
#setup-menu-wrapper.sidebar {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  z-index: 102;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 168, 113, 0.42) transparent;
}

/* Main sidebar: pin logo, scroll only the menu list */
#menu.sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#menu.sidebar > .khozam-sidebar-brand {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  background: var(--khozam-purple);
}

#menu.sidebar > #side-menu {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 168, 113, 0.42) transparent;
}

#menu.sidebar > #side-menu::-webkit-scrollbar {
  width: 6px;
}

#menu.sidebar > #side-menu::-webkit-scrollbar-track {
  background: transparent;
}

#menu.sidebar > #side-menu::-webkit-scrollbar-thumb {
  background: rgba(196, 168, 113, 0.35);
  border-radius: 999px;
}

#menu.sidebar > #side-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(196, 168, 113, 0.52);
}

.sidebar::-webkit-scrollbar,
#menu.sidebar::-webkit-scrollbar,
#setup-menu-wrapper.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track,
#menu.sidebar::-webkit-scrollbar-track,
#setup-menu-wrapper.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb,
#menu.sidebar::-webkit-scrollbar-thumb,
#setup-menu-wrapper.sidebar::-webkit-scrollbar-thumb {
  background: rgba(196, 168, 113, 0.35);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
#menu.sidebar::-webkit-scrollbar-thumb:hover,
#setup-menu-wrapper.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(196, 168, 113, 0.52);
}

[dir="rtl"] .sidebar,
[dir="rtl"] #menu.sidebar,
[dir="rtl"] #setup-menu-wrapper.sidebar {
  left: auto !important;
  right: 0 !important;
}

#setup-menu-wrapper.sidebar {
  z-index: 103;
}

/* Unified chrome: sidebar + top bar share the same brand base */
body.admin .sidebar,
.admin .sidebar,
.sidebar,
#menu.sidebar,
#setup-menu-wrapper.sidebar {
  background: var(--khozam-purple) !important;
  background-color: var(--khozam-purple) !important;
}

.sidebar {
  border-right: 1px solid rgba(0, 0, 0, 0.18) !important;
  box-shadow: 2px 0 12px rgba(26, 44, 29, 0.18);
}

/* Logo strip — same purple as sidebar; logo uses cream + gold (H-Light variant) */
#logo,
.sidebar #logo,
body.admin #logo {
  background: var(--khozam-purple) !important;
  background-color: var(--khozam-purple) !important;
  border-bottom: 1px solid var(--khozam-border) !important;
  min-height: 72px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.khozam-sidebar-logo {
  display: block;
  filter: none;
}

.khozam-sidebar-logo-full {
  max-height: 56px;
  width: auto;
  max-width: 92%;
}

.khozam-sidebar-logo-mini {
  max-height: 40px;
  width: auto;
  max-width: 70%;
}

/* ── Sidebar menu ── */
#side-menu.metis-menu > li > a,
#setup-menu.metis-menu > li > a,
.sidebar .nav > li > a,
.sidebar li a.logo-text {
  color: var(--khozam-text) !important;
  border-radius: 8px;
  margin: 2px 10px;
  padding: 10px 14px !important;
  border-inline-start: 3px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#side-menu.metis-menu > li > a,
#setup-menu.metis-menu > li > a,
.sidebar .nav > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}

#side-menu.metis-menu > li > a .menu-icon,
#setup-menu.metis-menu > li > a .menu-icon,
.sidebar .nav > li > a .menu-icon,
.sidebar li a i.menu-icon {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  width: 18px;
  text-align: center;
  line-height: 1;
  margin: 0 !important;
}

#side-menu.metis-menu > li > a .menu-text,
#side-menu.metis-menu > li > a .sub-menu-text,
#setup-menu.metis-menu > li > a .menu-text,
#setup-menu.metis-menu > li > a .sub-menu-text,
.sidebar .nav > li > a .menu-text,
.sidebar .nav > li > a .sub-menu-text,
.sidebar .nav > li > a .arrow {
  color: inherit !important;
}

/* Keep sidebar labels readable; long names wrap to max 2 lines beside the icon */
#side-menu.metis-menu > li > a .menu-text,
#side-menu.metis-menu > li > a .sub-menu-text,
#setup-menu.metis-menu > li > a .menu-text,
#setup-menu.metis-menu > li > a .sub-menu-text,
.sidebar .nav > li > a .menu-text,
.sidebar .nav > li > a .sub-menu-text {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/*
 * Long sidebar labels (advertising / Google Sheet):
 * keep icon + first text line on one row; wrap extra words under the text only
 */
#side-menu.metis-menu > li.menu-item-advertising_parent > a,
#side-menu.metis-menu > li.menu-item-excel2csv > a,
.sidebar .nav > li.menu-item-advertising_parent > a,
.sidebar .nav > li.menu-item-excel2csv > a {
  flex-wrap: nowrap !important;
  align-items: flex-start;
  min-height: 42px;
}

#side-menu.metis-menu > li.menu-item-advertising_parent > a .menu-icon,
#side-menu.metis-menu > li.menu-item-excel2csv > a .menu-icon,
#side-menu.metis-menu > li.menu-item-advertising_parent > a .arrow,
.sidebar .nav > li.menu-item-advertising_parent > a .menu-icon,
.sidebar .nav > li.menu-item-excel2csv > a .menu-icon,
.sidebar .nav > li.menu-item-advertising_parent > a .arrow {
  margin-top: 3px !important;
  flex-shrink: 0;
}

#side-menu.metis-menu > li.menu-item-advertising_parent > a .menu-text,
#side-menu.metis-menu > li.menu-item-excel2csv > a .menu-text,
.sidebar .nav > li.menu-item-advertising_parent > a .menu-text,
.sidebar .nav > li.menu-item-excel2csv > a .menu-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100%;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25;
  word-break: break-word;
}

/* Appointments — ensure calendar icon shows clearly */
#side-menu.metis-menu > li.menu-item-appointly > a .menu-icon,
.sidebar .nav > li.menu-item-appointly > a .menu-icon {
  font-size: 16px;
}

#side-menu.metis-menu > li > a .arrow,
#setup-menu.metis-menu > li > a .arrow,
.sidebar .nav > li > a .arrow {
  flex-shrink: 0;
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
  float: none !important;
  position: static !important;
}

.sidebar li .nav-second-level > li > a {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.sidebar li a i.menu-icon {
  color: var(--khozam-gold) !important;
  opacity: 0.88;
  transition: color 0.2s ease, opacity 0.2s ease;
}

#side-menu.metis-menu > li > a:hover,
#side-menu.metis-menu > li > a:focus,
#side-menu.metis-menu > li.active > a,
#setup-menu.metis-menu > li > a:hover,
#setup-menu.metis-menu > li > a:focus,
#setup-menu.metis-menu > li.active > a,
.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus,
.sidebar li.active > a {
  color: var(--khozam-cream) !important;
  background: rgba(196, 168, 113, 0.16) !important;
  border-inline-start-color: var(--khozam-gold) !important;
  box-shadow: none !important;
}

#side-menu.metis-menu > li > a:hover .menu-text,
#side-menu.metis-menu > li > a:focus .menu-text,
#side-menu.metis-menu > li.active > a .menu-text,
#side-menu.metis-menu > li > a:hover .sub-menu-text,
#side-menu.metis-menu > li > a:focus .sub-menu-text,
.sidebar .nav > li > a:hover .menu-text,
.sidebar .nav > li > a:focus .menu-text,
.sidebar li.active > a .menu-text {
  color: var(--khozam-cream) !important;
}

#side-menu.metis-menu > li.active > a,
#setup-menu.metis-menu > li.active > a,
.sidebar li.active > a {
  background: rgba(196, 168, 113, 0.22) !important;
  font-weight: 500;
}

#side-menu.metis-menu > li > a:hover .menu-icon,
#side-menu.metis-menu > li > a:focus .menu-icon,
#side-menu.metis-menu > li.active > a .menu-icon,
.sidebar .nav > li > a:hover .menu-icon,
.sidebar .nav > li > a:focus .menu-icon,
.sidebar li.active > a .menu-icon {
  color: var(--khozam-gold-hover) !important;
  opacity: 1;
}

.sidebar li .nav-second-level li a {
  color: var(--khozam-text-muted) !important;
  border-radius: 6px;
  margin: 1px 10px 1px 0;
  border-inline-start: 3px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sidebar li .nav-second-level li a .sub-menu-text,
.sidebar li .nav-second-level li a .menu-icon {
  color: inherit !important;
}

.sidebar li .nav-second-level li.active a {
  color: var(--khozam-purple) !important;
  background: var(--khozam-gold) !important;
  border-inline-start-color: transparent !important;
  border-radius: 6px;
  box-shadow: none;
  font-weight: 500;
}

.sidebar .nav > li .nav-second-level > li:not(.active) > a:hover,
.sidebar .nav > li .nav-second-level > li:not(.active) > a:focus {
  background: rgba(196, 168, 113, 0.12) !important;
  color: var(--khozam-cream) !important;
  border-inline-start-color: rgba(196, 168, 113, 0.55) !important;
}

.sidebar .nav > li .nav-second-level > li:not(.active) > a:hover .sub-menu-text,
.sidebar .nav > li .nav-second-level > li:not(.active) > a:hover .menu-icon {
  color: var(--khozam-cream) !important;
}

.sidebar .arrow {
  color: var(--khozam-text-muted) !important;
}

#side-menu.metis-menu > li > a:hover .arrow,
#side-menu.metis-menu > li.active > a .arrow {
  color: var(--khozam-cream) !important;
}

/* ── Top bar — exact same color as sidebar (beats theme_style / style.css) ── */
body.admin #header,
.admin #header,
#header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: calc(100% - var(--khozam-sidebar-width)) !important;
  min-width: 0;
  height: var(--khozam-header-height) !important;
  margin: 0 0 0 var(--khozam-sidebar-width) !important;
  z-index: 101 !important;
  background: var(--khozam-purple) !important;
  background-color: var(--khozam-purple) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 1px 8px rgba(26, 44, 29, 0.14);
}

[dir="rtl"] #header {
  left: 0 !important;
  right: auto !important;
  margin: 0 var(--khozam-sidebar-width) 0 0 !important;
  width: calc(100% - var(--khozam-sidebar-width)) !important;
}

#header #search_results,
#header .dropdown-menu {
  z-index: 1020;
}

/* Keep desktop topbar on a single 63px row (don't let flex wrap icons below) */
@media (min-width: 769px) {
  #header {
    overflow: visible !important;
  }

  #header > nav,
  #header > nav > .tw-flex {
    height: var(--khozam-header-height);
    min-height: var(--khozam-header-height);
    max-height: var(--khozam-header-height);
    flex-wrap: nowrap !important;
    align-items: stretch;
  }

  #header .navbar-nav.navbar-right {
    flex-wrap: nowrap !important;
    height: var(--khozam-header-height);
  }

  #header .navbar-nav.navbar-right > li {
    height: var(--khozam-header-height);
  }
}

.hide-menu {
  color: var(--khozam-cream) !important;
}

.hide-menu:hover {
  color: var(--khozam-gold) !important;
  opacity: 1;
}

.navbar-nav > li > a {
  color: var(--khozam-text) !important;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav .open > a,
.navbar-nav .open > a:hover,
.navbar-nav .open > a:focus {
  color: var(--khozam-cream) !important;
  background: var(--khozam-purple-soft) !important;
}

#header li > a.active {
  background: rgba(196, 168, 113, 0.14) !important;
  color: var(--khozam-cream) !important;
}

/* Search bar */
#header #search_input {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--khozam-cream) !important;
  border: 1px solid var(--khozam-border) !important;
}

#header #search_input::placeholder {
  color: var(--khozam-text-muted) !important;
}

#header #search_input:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--khozam-gold) !important;
  box-shadow: 0 0 0 2px rgba(196, 168, 113, 0.2) !important;
}

#header #top_search_button button {
  color: var(--khozam-gold) !important;
}

/* Quick-create & icons */
#header .tw-bg-primary-600 {
  background-color: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
}

#header .tw-bg-primary-600 i {
  color: var(--khozam-purple) !important;
}

#header .group-hover\:!tw-bg-primary-700:hover {
  background-color: var(--khozam-gold-hover) !important;
}

#header .icon > a,
#header .icon > a.tw-group {
  color: var(--khozam-cream) !important;
}

#header .icon > a .tw-text-white,
#header .icon > a span.tw-text-white {
  color: var(--khozam-purple) !important;
}

/* Topbar action icons (notifications / timers) */
#header .khozam-topbar-icon {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background: transparent !important;
  color: var(--khozam-gold) !important;
}

#header .khozam-topbar-icon__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1.5px solid rgba(196, 168, 113, 0.55);
  background: linear-gradient(180deg, rgba(196, 168, 113, 0.22) 0%, rgba(196, 168, 113, 0.1) 100%);
  color: var(--khozam-gold);
  box-shadow: inset 0 1px 0 rgba(248, 240, 224, 0.12), 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#header .khozam-topbar-icon:hover .khozam-topbar-icon__btn,
#header .open > .khozam-topbar-icon .khozam-topbar-icon__btn,
#header .open > a.khozam-topbar-icon .khozam-topbar-icon__btn {
  background: rgba(196, 168, 113, 0.24);
  border-color: rgba(196, 168, 113, 0.75);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.16);
  transform: translateY(-1px);
}

#header .khozam-topbar-icon__svg,
#header .khozam-topbar-icon svg,
#header .header-timers .khozam-topbar-icon__svg,
#header .header-notifications .khozam-topbar-icon__svg,
#header .notifications-icon .khozam-topbar-icon__svg {
  width: 18px;
  height: 18px;
  color: var(--khozam-gold) !important;
  stroke: currentColor !important;
}

#header .khozam-topbar-icon__badge,
#header .icon-notifications,
#header .icon-started-timers {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  border: 2px solid var(--khozam-purple);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none !important;
}

#header .header-todo > a,
#header .header-newsfeed > a {
  color: var(--khozam-gold) !important;
}

#header .header-todo svg,
#header .header-newsfeed svg {
  color: var(--khozam-gold) !important;
  stroke: currentColor !important;
}

#header .header-todo .nav-total-todos {
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  border: 2px solid var(--khozam-purple);
  font-weight: 800;
}

/* Profile trigger */
#header .khozam-topbar-profile {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 3px !important;
  margin-inline: 2px;
  border-radius: 999px;
  background: rgba(196, 168, 113, 0.14) !important;
  border: 1px solid rgba(196, 168, 113, 0.48);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

[dir="rtl"] #header .khozam-topbar-profile {
  padding: 3px 3px 3px 10px !important;
}

#header .khozam-topbar-profile:hover,
#header .open > .khozam-topbar-profile,
#header li.open > a.khozam-topbar-profile {
  background: rgba(196, 168, 113, 0.24) !important;
  border-color: rgba(196, 168, 113, 0.85);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.16);
}

#header .khozam-topbar-profile__avatar {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--khozam-gold);
  box-shadow: none;
  background: rgba(248, 240, 224, 0.2);
}

#header .khozam-topbar-profile__avatar img,
#header .khozam-topbar-profile__avatar .staff-profile-image-small {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50% !important;
  margin: 0 !important;
}

#header .khozam-topbar-profile__caret {
  color: var(--khozam-gold);
  font-size: 10px;
  opacity: 0.95;
}

/* Profile dropdown */
#header .header-user-profile {
  position: relative;
}

#header .khozam-topbar-profile-menu {
  min-width: 280px;
  max-width: min(92vw, 320px);
  max-height: min(78vh, 560px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0 8px;
  margin-top: 10px !important;
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  left: auto !important;
  right: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 14px 36px rgba(26, 44, 29, 0.16) !important;
}

[dir="rtl"] #header .khozam-topbar-profile-menu {
  left: 0 !important;
  right: auto !important;
}

#header .khozam-topbar-profile-menu__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, rgba(26, 44, 29, 0.04) 0%, rgba(196, 168, 113, 0.12) 100%);
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

#header .khozam-topbar-profile-menu__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--khozam-gold);
  flex-shrink: 0;
  background: #fff;
}

#header .khozam-topbar-profile-menu__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50% !important;
}

#header .khozam-topbar-profile-menu__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#header .khozam-topbar-profile-menu__meta strong {
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#header .khozam-topbar-profile-menu__meta span {
  color: rgba(26, 44, 29, 0.55);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#header .khozam-topbar-profile-menu > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 11px 14px !important;
  color: var(--khozam-purple) !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

#header .khozam-topbar-profile-menu > li > a i {
  width: 18px;
  text-align: center;
  color: var(--khozam-gold);
  font-size: 13px;
  flex-shrink: 0;
}

#header .khozam-topbar-profile-menu > li > a:hover {
  background: rgba(248, 240, 224, 0.72) !important;
}

#header .khozam-topbar-profile-menu__logout,
#header .khozam-topbar-profile-menu__logout span {
  color: #b42318 !important;
}

#header .khozam-topbar-profile-menu__logout i {
  color: #b42318 !important;
}

#header .khozam-topbar-profile-menu > .divider {
  margin: 6px 0;
  background: rgba(26, 44, 29, 0.08);
}

/* Inline language accordion (legacy — kept for safety) */
#header .khozam-topbar-languages {
  list-style: none;
}

#header .khozam-topbar-languages__details {
  margin: 0;
}

#header .khozam-topbar-languages__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}

#header .khozam-topbar-languages__summary::-webkit-details-marker {
  display: none;
}

#header .khozam-topbar-languages__summary::marker {
  content: "";
}

#header .khozam-topbar-languages__summary:hover {
  background: rgba(248, 240, 224, 0.72);
}

#header .khozam-topbar-languages__summary > i.fa-globe {
  width: 18px;
  text-align: center;
  color: var(--khozam-gold);
  flex-shrink: 0;
}

#header .khozam-topbar-languages__summary > span {
  flex: 1;
}

#header .khozam-topbar-languages__chevron {
  font-size: 10px;
  color: rgba(26, 44, 29, 0.45);
  transition: transform 0.18s ease;
}

#header .khozam-topbar-languages__details[open] .khozam-topbar-languages__chevron {
  transform: rotate(180deg);
}

#header .khozam-topbar-languages__list {
  list-style: none;
  margin: 0 10px 8px;
  padding: 6px;
  max-height: 180px;
  overflow-y: auto;
  border-radius: 10px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

#header .khozam-topbar-languages__list > li > a {
  display: block;
  padding: 8px 10px !important;
  border-radius: 8px;
  color: var(--khozam-purple) !important;
  font-size: 12px;
  font-weight: 600;
}

#header .khozam-topbar-languages__list > li > a:hover {
  background: rgba(196, 168, 113, 0.16) !important;
}

#header .khozam-topbar-languages__list > li.active > a {
  background: rgba(196, 168, 113, 0.22) !important;
  color: var(--khozam-purple) !important;
}

/* EN | AR language toggle in topbar */
#header .header-language-toggle {
  display: flex;
  align-items: center;
  list-style: none;
}

#header .khozam-lang-toggle {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  padding: 3px;
  border-radius: 12px;
  border: 1.5px solid rgba(196, 168, 113, 0.55);
  background: linear-gradient(180deg, rgba(196, 168, 113, 0.18) 0%, rgba(196, 168, 113, 0.08) 100%);
  box-shadow: inset 0 1px 0 rgba(248, 240, 224, 0.12), 0 2px 8px rgba(0, 0, 0, 0.1);
  gap: 2px;
}

#header .khozam-lang-toggle__opt {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 0 10px !important;
  border-radius: 9px;
  color: rgba(196, 168, 113, 0.78) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none !important;
  background: transparent !important;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

#header .khozam-lang-toggle__opt:hover {
  color: var(--khozam-gold) !important;
  background: rgba(196, 168, 113, 0.14) !important;
}

#header .khozam-lang-toggle__opt.is-active {
  color: var(--khozam-purple) !important;
  background: linear-gradient(180deg, #f6e2c8 0%, #c4a871 100%) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
  pointer-events: none;
}

@media (max-width: 767px) {
  #header .header-language-toggle {
    margin-inline-end: 6px;
  }

  #header .khozam-lang-toggle {
    height: 36px;
  }

  #header .khozam-lang-toggle__opt {
    min-width: 32px;
    padding: 0 8px !important;
    font-size: 11px;
  }
}

#header .notifications.dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 14px 36px rgba(26, 44, 29, 0.16) !important;
  overflow: hidden;
}

#header .notifications.dropdown-menu .notification-box {
  border-radius: 10px;
}

#header .notifications.dropdown-menu .unread-notification .notification-box {
  background: rgba(248, 240, 224, 0.45);
}

#header .khozam-topbar-icon,
#header .open > .khozam-topbar-icon,
#header li.open > a.khozam-topbar-icon,
#header .khozam-topbar-profile,
#header li.open > a.khozam-topbar-profile {
  background: transparent !important;
}

#header li.open > a.khozam-topbar-icon {
  background: transparent !important;
}

#header .header-timers.open > a,
#header .header-notifications.open > a,
#header .notifications-wrapper.open > a {
  background: transparent !important;
}

/* Kill dark icon colors inherited from Perfex/Tailwind on purple header */
#header .header-timers .tw-text-neutral-900,
#header .header-notifications .tw-text-neutral-900,
#header .notifications-icon .tw-text-neutral-900,
#header .top-timers .tw-text-neutral-900 {
  color: var(--khozam-gold) !important;
}

#header .header-timers .tw-border-neutral-200\/60,
#header .header-notifications .tw-border-neutral-200\/60,
#header .notifications-icon .sm\:tw-border-neutral-200\/60 {
  border-color: rgba(196, 168, 113, 0.42) !important;
}

#header .navbar-nav.navbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

#header .navbar-nav.navbar-right > li {
  display: inline-flex;
  align-items: center;
}

/* Dropdowns */
#header .dropdown-menu {
  background: #ffffff;
  border: 1px solid #e8e0d8;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.12);
}

#header .dropdown-menu > li > a,
#header .dropdown-menu .dropdown-header {
  color: var(--khozam-purple) !important;
}

#header .dropdown-menu > li > a:hover {
  background: rgba(196, 168, 113, 0.15) !important;
  color: var(--khozam-purple) !important;
}

#header .dropdown-menu .tw-text-neutral-700,
#header .dropdown-menu .tw-text-neutral-400 {
  color: var(--khozam-purple) !important;
}

#header .dropdown-menu i.tw-text-neutral-400 {
  color: var(--khozam-gold) !important;
}

/* Setup menu */
#setup-menu-wrapper .sidebar {
  background: var(--khozam-purple) !important;
}

/* Sticky Setup header: title + close stay visible while scrolling.
   Only flex when open — never override the default display:none. */
#setup-menu-wrapper.sidebar.display-block {
  display: flex !important;
  flex-direction: column;
}

#setup-menu-wrapper #setup-menu {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 0 16px;
}

#setup-menu > li.khozam-setup-menu__header,
#setup-menu > li:first-child.khozam-setup-menu__header {
  position: sticky !important;
  top: 0 !important;
  z-index: 20;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  background: linear-gradient(180deg, #241c17 0%, #1a2c1d 100%) !important;
  border-bottom: 1px solid rgba(196, 168, 113, 0.28);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  color: var(--khozam-cream) !important;
}

.khozam-setup-menu__header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 14px 16px;
}

.khozam-setup-menu__title,
#setup-menu .khozam-setup-menu__title.customizer-heading {
  display: block;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  color: #f8f0e0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: start;
}

.khozam-setup-menu__close.close-customizer,
#setup-menu .khozam-setup-menu__close.close-customizer {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px;
  border: 1px solid rgba(196, 168, 113, 0.35);
  background: rgba(248, 240, 224, 0.1);
  color: #c4a871 !important;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.khozam-setup-menu__close.close-customizer:hover,
.khozam-setup-menu__close.close-customizer:focus,
#setup-menu .khozam-setup-menu__close.close-customizer:hover,
#setup-menu .khozam-setup-menu__close.close-customizer:focus {
  background: rgba(196, 168, 113, 0.22);
  border-color: rgba(196, 168, 113, 0.55);
  color: #f8f0e0 !important;
  text-decoration: none;
}

#setup-menu > li:not(.khozam-setup-menu__header) > a,
#setup-menu li .nav-second-level li a {
  color: var(--khozam-text) !important;
}

#setup-menu li .nav-second-level li.active a {
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
}

@media (max-width: 768px) {
  #setup-menu > li.khozam-setup-menu__header {
    top: 0 !important;
  }

  .khozam-setup-menu__header-bar {
    min-height: 64px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }

  .khozam-setup-menu__title,
  #setup-menu .khozam-setup-menu__title.customizer-heading {
    font-size: 17px !important;
  }
}

/* Mobile */
.mobile-navbar {
  background-color: var(--khozam-purple) !important;
}

.mobile-navbar .navbar-nav > li > a {
  color: var(--khozam-cream) !important;
}

.khozam-sidebar-logo-mini {
  display: none;
}

.khozam-mobile-only {
  display: none !important;
}

#menu.sidebar,
#wrapper,
#header,
.btn-bottom-toolbar {
  transition: margin 0.2s ease, width 0.2s ease;
}

/* Desktop: collapse to icon rail instead of hiding completely */
@media (min-width: 769px) {
  body.hide-sidebar:not(.show-sidebar) #menu.sidebar {
    width: var(--khozam-sidebar-collapsed-width) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.hide-sidebar:not(.show-sidebar) #wrapper {
    margin-left: var(--khozam-sidebar-collapsed-width) !important;
  }

  body.hide-sidebar #header {
    margin-left: var(--khozam-sidebar-collapsed-width) !important;
    width: calc(100% - var(--khozam-sidebar-collapsed-width)) !important;
  }

  body.hide-sidebar .btn-bottom-toolbar {
    margin-left: var(--khozam-sidebar-collapsed-width) !important;
    width: calc(100% - var(--khozam-sidebar-collapsed-width)) !important;
    min-width: calc(100% - var(--khozam-sidebar-collapsed-width)) !important;
  }

  [dir="rtl"] body.hide-sidebar:not(.show-sidebar) #menu.sidebar {
    margin-right: 0 !important;
  }

  [dir="rtl"] body.hide-sidebar:not(.show-sidebar) #wrapper,
  [dir="rtl"] body.hide-sidebar #header {
    margin-left: 0 !important;
    margin-right: var(--khozam-sidebar-collapsed-width) !important;
    width: calc(100% - var(--khozam-sidebar-collapsed-width)) !important;
  }

  [dir="rtl"] body.hide-sidebar .btn-bottom-toolbar {
    margin-left: 0 !important;
    margin-right: var(--khozam-sidebar-collapsed-width) !important;
    width: calc(100% - var(--khozam-sidebar-collapsed-width)) !important;
    min-width: calc(100% - var(--khozam-sidebar-collapsed-width)) !important;
  }

  body.hide-sidebar:not(.show-sidebar) .khozam-sidebar-logo-full {
    display: none !important;
  }

  body.hide-sidebar:not(.show-sidebar) .khozam-sidebar-logo-mini {
    display: block !important;
  }

  body.hide-sidebar:not(.show-sidebar) #logo {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.hide-sidebar:not(.show-sidebar) #side-menu .menu-text,
  body.hide-sidebar:not(.show-sidebar) #side-menu .sub-menu-text,
  body.hide-sidebar:not(.show-sidebar) #side-menu .arrow,
  body.hide-sidebar:not(.show-sidebar) #side-menu .badge,
  body.hide-sidebar:not(.show-sidebar) #side-menu .nav-second-level,
  body.hide-sidebar:not(.show-sidebar) #side-menu .pinned-separator,
  body.hide-sidebar:not(.show-sidebar) #side-menu .pinned_project {
    display: none !important;
  }

  body.hide-sidebar:not(.show-sidebar) #side-menu > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 0 !important;
    margin: 4px 6px !important;
    min-height: 44px;
  }

  body.hide-sidebar:not(.show-sidebar) #side-menu .menu-icon {
    float: none !important;
    margin: 0 !important;
    display: block !important;
    width: auto !important;
    font-size: 18px !important;
  }
}

/* ── Mobile chrome: usable topbar + overlay sidebar ── */
@media (max-width: 768px) {
  :root {
    --khozam-mobile-header-height: 56px;
  }

  body.hide-sidebar:not(.show-sidebar) #menu.sidebar {
    width: min(86vw, var(--khozam-sidebar-width)) !important;
    margin-left: calc(min(86vw, var(--khozam-sidebar-width)) * -1) !important;
  }

  [dir="rtl"] body.hide-sidebar:not(.show-sidebar) #menu.sidebar {
    margin-left: auto !important;
    margin-right: calc(min(86vw, var(--khozam-sidebar-width)) * -1) !important;
  }

  body.page-small.show-sidebar #menu.sidebar,
  body.show-sidebar #menu.sidebar {
    width: min(86vw, var(--khozam-sidebar-width)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 190 !important;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.28);
  }

  [dir="rtl"] body.page-small.show-sidebar #menu.sidebar,
  [dir="rtl"] body.show-sidebar #menu.sidebar {
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.28);
  }

  /* Overlay only — never push page content sideways */
  body.page-small.show-sidebar #wrapper,
  body.show-sidebar #wrapper,
  [dir="rtl"] body.page-small.show-sidebar #wrapper,
  [dir="rtl"] body.show-sidebar #wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  body.show-sidebar #wrapper:after,
  body.page-small.show-sidebar #wrapper:after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(26, 44, 29, 0.55) !important;
    z-index: 180 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  body.show-sidebar,
  body.page-small.show-sidebar {
    overflow: hidden !important;
  }

  #header,
  body.mobile #header,
  body.page-small #header {
    display: flex !important;
    align-items: center;
    gap: 4px;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: calc(var(--khozam-mobile-header-height) + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-inline: 6px 8px !important;
    z-index: 200 !important;
    overflow: visible !important;
  }

  [dir="rtl"] #header,
  [dir="rtl"] body.mobile #header,
  [dir="rtl"] body.page-small #header {
    width: 100% !important;
    margin-right: 0 !important;
  }

  #wrapper {
    padding-top: calc(var(--khozam-mobile-header-height) + env(safe-area-inset-top, 0px)) !important;
  }

  #wrapper > .content {
    min-height: calc(100vh - var(--khozam-mobile-header-height) - env(safe-area-inset-top, 0px));
    min-width: 0 !important;
    padding: 12px 12px 24px !important;
    overflow-x: auto;
  }

  .hide-menu {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px;
    font-size: 18px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .hide-menu:active,
  .hide-menu:focus {
    background: rgba(196, 168, 113, 0.18);
    color: var(--khozam-gold) !important;
    outline: none;
  }

  #header > nav {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: auto !important;
  }

  #header > nav > .tw-flex {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px;
  }

  #header > nav > .tw-flex > .tw-flex {
    min-width: 0;
    flex: 1 1 auto !important;
    align-items: center !important;
  }

  /* Compact search that doesn't crush action icons */
  #header #top_search {
    width: 100%;
    max-width: none;
    margin: 0 !important;
  }

  #header #search_input {
    height: 40px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-inline: 12px 36px !important;
    border-radius: 12px !important;
    font-size: 16px !important; /* prevent iOS zoom */
    line-height: 1.2 !important;
  }

  #header #top_search_button {
    top: 50% !important;
    margin-top: 0 !important;
    transform: translateY(-50%);
    inset-inline-end: 8px;
  }

  #header #top_search_button button {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Old Perfex mobile chevron panel — unused now */
  .mobile-menu {
    display: none !important;
  }

  /* Keep desktop action strip usable on phones */
  #header .navbar-nav.navbar-right,
  #header .khozam-topbar-actions {
    display: flex !important;
    float: none !important;
    align-items: center !important;
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    max-width: none;
  }

  #header .navbar-nav.navbar-right > li {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    height: auto !important;
  }

  #header .navbar-nav.navbar-right > li > a {
    height: auto !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  #header .khozam-desktop-only {
    display: none !important;
  }

  #header .khozam-mobile-only,
  .khozam-topbar-profile-menu .khozam-mobile-only {
    display: list-item !important;
  }

  #header .khozam-topbar-icon__btn {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  #header .header-language-toggle {
    margin: 0 !important;
  }

  #header .khozam-lang-toggle {
    height: 40px;
    padding: 3px;
    border-radius: 11px;
  }

  #header .khozam-lang-toggle__opt {
    min-width: 30px;
    min-height: 34px;
    padding: 0 7px !important;
    font-size: 11px;
  }

  #header .khozam-topbar-profile {
    padding: 2px !important;
    gap: 0;
    margin: 0 !important;
  }

  #header .khozam-topbar-profile__caret {
    display: none;
  }

  #header .khozam-topbar-profile__avatar {
    width: 36px;
    height: 36px;
  }

  /* Profile / notifications / timers dropdowns fit the screen */
  #header .khozam-topbar-profile-menu,
  #header .notifications.dropdown-menu,
  #header .started-timers-top {
    position: fixed !important;
    top: calc(var(--khozam-mobile-header-height) + env(safe-area-inset-top, 0px) + 6px) !important;
    inset-inline: 10px auto !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: min(72vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px !important;
    z-index: 230 !important;
  }

  [dir="rtl"] #header .khozam-topbar-profile-menu,
  [dir="rtl"] #header .notifications.dropdown-menu,
  [dir="rtl"] #header .started-timers-top {
    left: 10px !important;
    right: 10px !important;
  }

  #header .khozam-topbar-profile-menu > li > a,
  #header .khozam-topbar-languages__summary {
    min-height: 48px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 16px !important;
    font-size: 15px;
  }

  #header .khozam-topbar-profile-menu__count {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--khozam-gold);
    color: var(--khozam-purple);
    font-size: 11px;
    font-weight: 800;
  }

  /* Sidebar items easier to tap */
  #menu.sidebar .nav > li > a,
  #setup-menu-wrapper.sidebar .nav > li > a {
    min-height: 48px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Clear fixed header while drawer is open under it */
  #menu.sidebar > .khozam-sidebar-brand {
    margin-top: calc(var(--khozam-mobile-header-height) + env(safe-area-inset-top, 0px)) !important;
  }

  #menu.sidebar #logo {
    padding-top: 8px !important;
    min-height: 64px;
  }

  #menu.sidebar .khozam-sidebar-logo-full {
    max-height: 48px;
  }

  /* Tables / cards: allow horizontal scroll without breaking chrome */
  .table-responsive,
  .panel_s .panel-body,
  .dt-table,
  .dataTables_wrapper {
    max-width: 100%;
  }

  .btn-bottom-toolbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Very small phones: hide language strip, keep profile + alerts */
@media (max-width: 380px) {
  #header .header-language-toggle {
    display: none !important;
  }

  #header .khozam-topbar-icon__btn {
    width: 38px;
    height: 38px;
  }

  #header #search_input {
    padding-inline: 10px 32px !important;
  }
}

/* ── Dashboard: Unit Status Report ── */
.khozam-unit-report {
  border: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
}

.khozam-unit-report__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.25);
}

.khozam-unit-report__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.khozam-unit-report__subtitle {
  margin: 4px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
}

.khozam-unit-report__header-badge {
  min-width: 88px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(196, 168, 113, 0.16);
  border: 1px solid rgba(196, 168, 113, 0.35);
  text-align: center;
}

.khozam-unit-report__header-badge span {
  display: block;
  color: var(--khozam-gold-hover);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.khozam-unit-report__header-badge small {
  display: block;
  margin-top: 4px;
  color: rgba(248, 240, 224, 0.75);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.khozam-unit-report__body {
  padding: 22px 24px 24px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
}

.khozam-unit-report__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

.khozam-unit-report__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
  padding: 18px 16px 16px;
  border-radius: 14px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: #fff;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.khozam-unit-report__card--total {
  background: linear-gradient(180deg, #fff 0%, #fff9f2 100%);
  border-color: rgba(196, 168, 113, 0.35);
}

.khozam-unit-report__card--total::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--khozam-gold), var(--khozam-gold-hover));
}

.khozam-unit-report__card--status {
  color: inherit;
  text-decoration: none !important;
  overflow: hidden;
}

.khozam-unit-report__card--status::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--status-color, var(--khozam-gold));
}

.khozam-unit-report__card--status:hover,
.khozam-unit-report__card--status:focus {
  transform: translateY(-2px);
  border-color: rgba(196, 168, 113, 0.35);
  box-shadow: 0 10px 24px rgba(26, 44, 29, 0.12);
  color: inherit;
}

.khozam-unit-report__status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-color, var(--khozam-gold));
  box-shadow: 0 0 0 4px rgba(196, 168, 113, 0.12);
}

.khozam-unit-report__label {
  color: #5b4f63;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.khozam-unit-report__value {
  color: var(--khozam-purple);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.khozam-unit-report__card--status .khozam-unit-report__value {
  color: var(--status-color, var(--khozam-purple));
}

.khozam-unit-report__hint {
  margin-top: auto;
  color: #8d8494;
  font-size: 11px;
}

.khozam-units-modal .modal-content {
  border: 0;
  border-radius: 14px;
  overflow: visible !important;
  box-shadow: 0 18px 40px rgba(26, 44, 29, 0.18);
}

.khozam-units-modal .modal-header {
  border-radius: 14px 14px 0 0;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.25);
}

.khozam-units-modal .modal-title,
.khozam-units-modal .modal-header .close {
  color: var(--khozam-cream) !important;
  opacity: 1;
  text-shadow: none;
}

.khozam-units-modal .modal-body {
  background: #fbf8f4;
}

.khozam-units-modal .modal-footer {
  background: #fff;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-units-modal__loading {
  padding: 28px 12px;
  color: var(--khozam-purple);
}

.khozam-units-modal__loading p {
  margin-top: 12px;
  margin-bottom: 0;
}

/* ── Dashboard: Leads Call Status Report ── */
.khozam-leads-report {
  border: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
}

.khozam-leads-report__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.25);
}

.khozam-leads-report__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.khozam-leads-report__subtitle {
  margin: 4px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
}

.khozam-leads-report__header-badge {
  min-width: 88px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(196, 168, 113, 0.16);
  border: 1px solid rgba(196, 168, 113, 0.35);
  text-align: center;
}

.khozam-leads-report__header-badge span {
  display: block;
  color: var(--khozam-gold-hover);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.khozam-leads-report__header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.khozam-leads-report__period {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(248, 240, 224, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.khozam-leads-report__period-button {
  position: relative;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(248, 240, 224, 0.72);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.khozam-leads-report__period-button:hover,
.khozam-leads-report__period-button:focus {
  color: #fff;
  outline: 0;
  background: rgba(255, 255, 255, 0.1);
}

.khozam-leads-report__period-button:focus-visible {
  box-shadow: 0 0 0 2px var(--khozam-gold-hover);
}

.khozam-leads-report__period-button:active {
  transform: scale(0.97);
}

.khozam-leads-report__period-button.is-active {
  color: var(--khozam-purple);
  background: linear-gradient(180deg, #f0c795 0%, var(--khozam-gold-hover) 100%);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(196, 168, 113, 0.35);
}

.khozam-leads-report.is-loading .khozam-leads-report__period-button {
  pointer-events: none;
}

.khozam-leads-report.is-loading .khozam-leads-report__period-button.is-active {
  box-shadow: 0 0 0 2px rgba(240, 199, 149, 0.55), 0 2px 8px rgba(196, 168, 113, 0.35);
}

.khozam-leads-report.is-loading .khozam-leads-report__total,
.khozam-leads-report.is-loading [data-status-count],
.khozam-leads-report.is-loading .khozam-funnel__stage-count,
.khozam-leads-report.is-loading .khozam-conversion-rates__pct {
  opacity: 0.45;
}

.khozam-leads-report.is-loading .khozam-leads-report__body {
  position: relative;
}

.khozam-leads-report.is-loading .khozam-leads-report__body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  background-size: 200% 100%;
  animation: khozam-leads-shimmer 1.1s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes khozam-leads-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .khozam-leads-report.is-loading .khozam-leads-report__body::after {
    animation: none;
    background: rgba(255, 255, 255, 0.2);
  }
}


.khozam-leads-report__header-badge small {
  display: block;
  margin-top: 4px;
  color: rgba(248, 240, 224, 0.75);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .khozam-leads-report__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .khozam-leads-report__header-tools {
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .khozam-leads-report__period {
    flex: 1 1 100%;
    justify-content: space-between;
    overflow-x: auto;
  }

  .khozam-leads-report__period-button {
    flex: 1 0 auto;
  }
}


.khozam-leads-report__body {
  padding: 22px 24px 24px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
}

.khozam-leads-report__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.khozam-leads-report__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
  padding: 18px 16px 16px;
  border-radius: 14px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: #fff;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.khozam-leads-report__card--total {
  background: linear-gradient(180deg, #fff 0%, #fff9f2 100%);
  border-color: rgba(196, 168, 113, 0.35);
}

.khozam-leads-report__card--total::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--khozam-gold), var(--khozam-gold-hover));
}

.khozam-leads-report__card--status {
  color: inherit;
  text-decoration: none !important;
  overflow: hidden;
}

.khozam-leads-report__card--status::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--status-color, var(--khozam-gold));
}

.khozam-leads-report__card--status:hover,
.khozam-leads-report__card--status:focus {
  transform: translateY(-2px);
  border-color: rgba(196, 168, 113, 0.35);
  box-shadow: 0 10px 24px rgba(26, 44, 29, 0.12);
  color: inherit;
}

.khozam-leads-report__status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-color, var(--khozam-gold));
  box-shadow: 0 0 0 4px rgba(196, 168, 113, 0.12);
}

.khozam-leads-report__label {
  color: #5b4f63;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.khozam-leads-report__value {
  color: var(--khozam-purple);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.khozam-leads-report__card--status .khozam-leads-report__value {
  color: var(--status-color, var(--khozam-purple));
}

.khozam-leads-report__hint {
  margin-top: auto;
  color: #8d8494;
  font-size: 11px;
}

.khozam-leads-modal .modal-content {
  border: 0;
  border-radius: 14px;
  overflow: visible !important;
  box-shadow: 0 18px 40px rgba(26, 44, 29, 0.18);
}

.khozam-leads-modal .modal-header {
  border-radius: 14px 14px 0 0;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.25);
}

.khozam-leads-modal .modal-title,
.khozam-leads-modal .modal-header .close {
  color: var(--khozam-cream) !important;
  opacity: 1;
  text-shadow: none;
}

.khozam-leads-modal .modal-body {
  background: #fbf8f4;
}

.khozam-leads-modal .modal-footer {
  background: #fff;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-leads-modal__loading {
  padding: 28px 12px;
  color: var(--khozam-purple);
}

.khozam-leads-modal__loading p {
  margin-top: 12px;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .khozam-leads-report__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .khozam-unit-report__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .khozam-unit-report__header-badge {
    width: 100%;
  }

  .khozam-unit-report__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Dashboard: Calendar widget ── */
.khozam-calendar-widget__panel {
  border: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
}

.khozam-calendar-widget__body {
  padding: 18px 18px 20px !important;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
}

.khozam-calendar-filters {
  margin-bottom: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.05);
}

.khozam-calendar-filters .checkbox label {
  color: var(--khozam-purple);
  font-weight: 500;
}

.khozam-calendar-filters .btn-success {
  background: var(--khozam-gold) !important;
  border-color: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
}

.khozam-calendar-filters .btn-default {
  background: #fff;
  border-color: rgba(26, 44, 29, 0.12);
  color: var(--khozam-purple);
}

.khozam-calendar .fc {
  --fc-border-color: rgba(26, 44, 29, 0.1);
  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: rgba(248, 240, 224, 0.35);
  --fc-today-bg-color: rgba(196, 168, 113, 0.16);
  --fc-event-bg-color: var(--khozam-purple);
  --fc-event-border-color: var(--khozam-purple);
  --fc-event-text-color: var(--khozam-cream);
  --fc-button-bg-color: var(--khozam-purple);
  --fc-button-border-color: var(--khozam-purple);
  --fc-button-hover-bg-color: var(--khozam-purple-mid);
  --fc-button-hover-border-color: var(--khozam-purple-mid);
  --fc-button-active-bg-color: #1f0b2a;
  --fc-button-active-border-color: #1f0b2a;
}

.khozam-calendar .fc-toolbar.fc-header-toolbar {
  margin-bottom: 12px !important;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.22);
  gap: 8px;
  min-height: 0;
}

.khozam-calendar .fc-toolbar-title {
  color: var(--khozam-cream) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.khozam-calendar .fc-button {
  border-radius: 8px !important;
  padding: 0.35em 0.7em !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-transform: none !important;
  line-height: 1.2;
}

.khozam-calendar .fc-button-primary:not(:disabled).fc-button-active,
.khozam-calendar .fc-button-primary:not(:disabled):active {
  background: var(--khozam-gold) !important;
  border-color: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
}

.khozam-calendar .fc-button-primary:not(:disabled):hover {
  color: var(--khozam-cream);
}

.khozam-calendar .fc-col-header-cell {
  background: rgba(248, 240, 224, 0.55);
}

.khozam-calendar .fc-col-header-cell-cushion {
  padding: 10px 4px !important;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
}

.khozam-calendar .fc-daygrid-day {
  background: #fff;
  transition: background 0.15s ease;
}

.khozam-calendar .fc-daygrid-day:hover {
  background: rgba(248, 240, 224, 0.22);
}

.khozam-calendar .fc-daygrid-day-number {
  padding: 8px 10px !important;
  color: #6f6475;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
}

.khozam-calendar .fc-day-today .fc-daygrid-day-number {
  color: var(--khozam-purple);
  background: rgba(196, 168, 113, 0.22);
  border-radius: 999px;
  min-width: 28px;
  text-align: center;
}

.khozam-calendar .fc-day-other .fc-daygrid-day-number {
  color: #b4a9b8;
  opacity: 0.85;
}

.khozam-calendar .fc-daygrid-event {
  margin: 4px 6px !important;
  border-radius: 8px !important;
  border: 0 !important;
  padding: 3px 7px !important;
  font-size: 11px !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.12);
}

.khozam-calendar .fc-daygrid-event-dot {
  border-color: var(--khozam-gold) !important;
}

.khozam-calendar .fc-daygrid-more-link {
  color: var(--khozam-purple) !important;
  font-weight: 600;
}

.khozam-calendar .fc-scrollgrid,
.khozam-calendar .fc-scrollgrid table {
  border-radius: 12px;
  overflow: hidden;
}

.khozam-calendar .fc-view-harness {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#utilities_calendar .khozam-calendar .fc-toolbar.fc-header-toolbar,
.calendar-page .fc-toolbar.fc-header-toolbar {
  margin-bottom: 16px !important;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
}

@media (max-width: 768px) {
  .khozam-calendar-widget__body {
    padding: 12px !important;
  }

  .khozam-calendar .fc-toolbar.fc-header-toolbar {
    padding: 12px;
  }

  .khozam-calendar .fc-toolbar-title {
    font-size: 1.05rem !important;
  }

  .khozam-calendar .fc-toolbar-chunk {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ── Dashboard: User data widget (tasks/projects/reminders) ── */
.khozam-user-widget__panel {
  border: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
}

.khozam-user-widget__body {
  padding: 0 !important;
  background: #fbf8f4;
}

.khozam-user-widget__tabs.horizontal-scrollable-tabs,
.khozam-user-widget .horizontal-scrollable-tabs {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "scroll-start tabs scroll-end";
  align-items: end;
  gap: 6px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 0;
  padding: 10px 12px 0;
  margin: 0 !important;
  overflow: hidden;
}

.khozam-user-widget__tabs .arrow-left,
.khozam-user-widget .horizontal-scrollable-tabs .arrow-left {
  grid-area: scroll-start;
}

.khozam-user-widget__tabs .horizontal-tabs,
.khozam-user-widget .horizontal-scrollable-tabs .horizontal-tabs {
  grid-area: tabs;
  flex: 1;
  min-width: 0;
  float: none !important;
}

.khozam-user-widget__tabs .arrow-right,
.khozam-user-widget .horizontal-scrollable-tabs .arrow-right {
  grid-area: scroll-end;
}

[dir="rtl"] .khozam-user-widget__tabs.horizontal-scrollable-tabs,
[dir="rtl"] .khozam-user-widget .horizontal-scrollable-tabs {
  grid-template-areas: "scroll-end tabs scroll-start";
}

.khozam-user-widget__tabs .nav,
.khozam-user-widget .horizontal-scrollable-tabs .nav {
  margin-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.khozam-user-widget .horizontal-scrollable-tabs .scroller {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  float: none !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 1px solid rgba(196, 168, 113, 0.28) !important;
  border-radius: 8px !important;
  background: rgba(248, 240, 224, 0.08) !important;
  color: var(--khozam-cream) !important;
  align-self: end;
}

.khozam-user-widget .horizontal-scrollable-tabs .scroller[style*="display: block"] {
  display: flex !important;
}

.khozam-user-widget .horizontal-scrollable-tabs .scroller:hover {
  color: var(--khozam-gold-hover) !important;
  background: rgba(196, 168, 113, 0.16) !important;
}

.khozam-user-widget .horizontal-scrollable-tabs .arrow-left,
.khozam-user-widget .horizontal-scrollable-tabs .arrow-right {
  float: none !important;
}

.khozam-user-widget .nav-tabs-horizontal {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

[dir="rtl"] .khozam-user-widget .nav-tabs-horizontal {
  justify-content: flex-start;
}

.khozam-user-widget .nav-tabs-horizontal > li {
  float: none !important;
  flex: 0 0 auto;
}

.khozam-user-widget .nav-tabs-horizontal > li > a {
  margin: 0 3px;
  padding: 10px 16px 11px !important;
  border: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: transparent !important;
  color: rgba(248, 240, 224, 0.72) !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.khozam-user-widget .nav-tabs-horizontal > li > a .menu-icon {
  color: var(--khozam-gold) !important;
  opacity: 0.9;
  margin-left: 6px;
}

[dir="ltr"] .khozam-user-widget .nav-tabs-horizontal > li > a .menu-icon {
  margin-left: 0;
  margin-right: 6px;
}

.khozam-user-widget .nav-tabs-horizontal > li > a:hover,
.khozam-user-widget .nav-tabs-horizontal > li > a:focus {
  color: var(--khozam-cream) !important;
  background: rgba(248, 240, 224, 0.08) !important;
}

.khozam-user-widget .nav-tabs-horizontal > li.active > a,
.khozam-user-widget .nav-tabs-horizontal > li.active > a:hover,
.khozam-user-widget .nav-tabs-horizontal > li.active > a:focus {
  color: var(--khozam-purple) !important;
  background: #fbf8f4 !important;
  box-shadow: inset 0 3px 0 var(--khozam-gold);
  margin-bottom: 0;
  padding: 10px 16px 11px !important;
}

.khozam-user-widget .nav-tabs-horizontal > li.active > a .menu-icon {
  color: var(--khozam-gold) !important;
  opacity: 1;
}

.khozam-user-widget .nav-tabs-horizontal .badge {
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  border-radius: 999px;
  font-weight: 700;
  margin-right: 6px;
}

.khozam-user-widget .tab-content {
  padding: 0 16px 18px !important;
  margin-top: 0 !important;
  background: #fbf8f4;
  border-top: 0;
}

.khozam-user-widget .panel-body.home-activity .tab-content {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.khozam-user-widget .home-activity .tab-content {
  height: auto !important;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding-right: 16px !important;
  padding-left: 16px !important;
}

[dir="rtl"] .khozam-user-widget .home-activity .tab-content {
  padding-right: 16px !important;
  padding-left: 16px !important;
}

.khozam-user-widget .tab-pane {
  padding-top: 0;
}

.khozam-user-widget__content-card {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.05);
  padding: 12px 0 0;
}

.khozam-user-widget__view-all {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 0 16px !important;
  margin: 0 0 10px !important;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: var(--khozam-purple) !important;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none !important;
  transition: color 0.18s ease;
}

[dir="rtl"] .khozam-user-widget__view-all {
  float: right;
}

[dir="ltr"] .khozam-user-widget__view-all {
  float: left;
}

.khozam-user-widget__view-all:hover,
.khozam-user-widget__view-all:focus {
  color: var(--khozam-gold-hover) !important;
}

.khozam-user-widget__view-all::after {
  content: "\f060";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--khozam-gold);
  font-size: 11px;
  flex-shrink: 0;
}

[dir="ltr"] .khozam-user-widget__view-all::after {
  content: "\f061";
}

.khozam-user-widget__content-card::after {
  content: "";
  display: block;
  clear: both;
}

.khozam-user-widget .tab-pane > .clearfix {
  display: none;
}

.khozam-user-widget__content-card > ._hidden_inputs,
.khozam-user-widget__content-card > ._filters {
  display: none;
}

.khozam-user-widget__content-card .dataTables_wrapper,
.khozam-user-widget .tab-pane > ._hidden_inputs + .dataTables_wrapper,
.khozam-user-widget .tab-pane > .dataTables_wrapper,
.khozam-user-widget .tab-pane > ._hidden_inputs ~ div .dataTables_wrapper,
.khozam-user-widget .tab-pane > ._filters ~ .dataTables_wrapper {
  margin-top: 0 !important;
}

.khozam-user-widget .dataTables_wrapper {
  background: #fff;
  border: 0;
  border-radius: 0;
  padding: 14px 16px 12px;
  box-shadow: none;
  clear: both;
}

.khozam-user-widget .tab-pane > ._hidden_inputs,
.khozam-user-widget .tab-pane > ._filters {
  display: none;
}

.khozam-user-widget .dataTables_wrapper > .row:first-child {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.khozam-user-widget .dataTables_wrapper .dataTables_length,
.khozam-user-widget .dataTables_wrapper .dt-buttons,
.khozam-user-widget .dataTables_wrapper .dataTables_filter {
  float: none !important;
  margin: 0 !important;
}

.khozam-user-widget .dataTables_wrapper .dataTables_filter {
  margin-inline-start: auto !important;
}

.khozam-user-widget .dataTables_wrapper .dataTables_length label,
.khozam-user-widget .dataTables_wrapper .dataTables_filter label {
  color: #6f6475;
  font-weight: 500;
}

.khozam-user-widget .dataTables_wrapper .dataTables_filter input,
.khozam-user-widget .dataTables_wrapper .dataTables_length select {
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 8px !important;
  background: #fbf8f4 !important;
  color: var(--khozam-purple) !important;
  box-shadow: none !important;
}

.khozam-user-widget .dataTables_wrapper .dataTables_filter input:focus,
.khozam-user-widget .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--khozam-gold) !important;
  outline: none;
}

.khozam-user-widget .dt-buttons .btn,
.khozam-user-widget .btn-default.buttons-collection,
.khozam-user-widget .btn-default.buttons-page-length {
  border-radius: 8px !important;
  border-color: rgba(26, 44, 29, 0.12) !important;
  color: var(--khozam-purple) !important;
  background: #fff !important;
}

.khozam-user-widget .dt-buttons .btn:hover,
.khozam-user-widget .btn-default.buttons-collection:hover,
.khozam-user-widget .btn-default.buttons-page-length:hover {
  background: rgba(196, 168, 113, 0.12) !important;
  border-color: rgba(196, 168, 113, 0.35) !important;
}

.khozam-user-widget table.dataTable thead th {
  background: rgba(248, 240, 224, 0.55) !important;
  color: var(--khozam-purple) !important;
  border-color: rgba(26, 44, 29, 0.08) !important;
  font-weight: 700 !important;
}

.khozam-user-widget table.dataTable tbody td {
  border-color: rgba(26, 44, 29, 0.06) !important;
  color: #4f4658;
  vertical-align: middle !important;
}

.khozam-user-widget table.dataTable tbody tr:hover td {
  background: rgba(248, 240, 224, 0.25) !important;
}

.khozam-user-widget table.dataTable td.dataTables_empty {
  padding: 28px 16px !important;
  color: #8d8494 !important;
  font-size: 14px;
  font-weight: 500;
  text-align: center !important;
  background: rgba(248, 240, 224, 0.18) !important;
}

.khozam-user-widget .activity-feed {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 16px 14px;
}

.khozam-user-widget .activity-feed .feed-item {
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  padding: 10px 0;
}

.khozam-user-widget .activity-feed .feed-item:last-child {
  border-bottom: 0;
}

.khozam-user-widget .activity-feed .date {
  color: var(--khozam-gold);
  font-weight: 600;
}

.khozam-user-widget .activity-feed .text {
  color: #4f4658;
}

@media (max-width: 768px) {
  .khozam-user-widget .nav-tabs-horizontal > li > a {
    padding: 8px 10px !important;
    font-size: 12px;
  }

  .khozam-user-widget .dataTables_wrapper {
    padding: 8px;
  }
}

/* ── Dashboard: Todos widget ── */
.khozam-todos-widget__panel {
  border: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
}

.khozam-todos-widget__body {
  padding: 0 !important;
  background: #fbf8f4;
}

.khozam-todos-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.18);
}

.khozam-todos-widget__title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--khozam-cream);
  font-weight: 700;
  font-size: 15px;
  margin: 0;
}

.khozam-todos-widget__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(248, 240, 224, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-gold);
  font-size: 14px;
}

.khozam-todos-widget__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.khozam-todos-widget__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(196, 168, 113, 0.28);
  background: rgba(248, 240, 224, 0.08);
  color: var(--khozam-cream) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.khozam-todos-widget__action:hover,
.khozam-todos-widget__action:focus {
  background: rgba(248, 240, 224, 0.16);
  border-color: rgba(196, 168, 113, 0.45);
  color: #fff !important;
}

.khozam-todos-widget__action--primary {
  background: var(--khozam-gold);
  border-color: var(--khozam-gold);
  color: var(--khozam-purple) !important;
}

.khozam-todos-widget__action--primary:hover,
.khozam-todos-widget__action--primary:focus {
  background: var(--khozam-gold-hover);
  border-color: var(--khozam-gold-hover);
  color: var(--khozam-purple) !important;
}

.khozam-todos-widget__content {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

.khozam-todos-widget__section {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(26, 44, 29, 0.04);
}

.khozam-todos-widget__section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  background: rgba(248, 240, 224, 0.35);
}

.khozam-todos-widget__section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
  flex-shrink: 0;
}

.khozam-todos-widget__section-badge--pending {
  background: rgba(214, 137, 16, 0.14);
  color: #b8740e;
}

.khozam-todos-widget__section-badge--done {
  background: rgba(61, 154, 95, 0.14);
  color: #2f7a4a;
}

.khozam-todos-widget__section-title {
  margin: 0 !important;
  flex: 1;
  color: var(--khozam-purple) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.khozam-todos-widget__section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--khozam-gold);
  color: var(--khozam-purple);
  font-size: 11px;
  font-weight: 700;
}

.khozam-todos-widget__list {
  margin: 0;
  padding: 8px;
}

.khozam-todos-widget__item {
  list-style: none;
  margin-bottom: 8px;
}

.khozam-todos-widget__item:last-child {
  margin-bottom: 0;
}

.khozam-todos-widget__item-inner {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(26, 44, 29, 0.06);
  background: #fbf8f4;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.khozam-todos-widget__item-inner:hover {
  border-color: rgba(196, 168, 113, 0.35);
  background: #fff;
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.06);
}

.khozam-todos-widget__item--done .khozam-todos-widget__item-inner {
  background: rgba(248, 240, 224, 0.22);
}

.khozam-todos-widget__item-controls {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
  padding-top: 2px;
}

.khozam-todos-widget__item-body {
  flex: 1;
  min-width: 0;
}

.khozam-todos-widget__item-text {
  color: #4f4658;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 8px;
  padding: 0 !important;
}

.khozam-todos-widget__item--done .khozam-todos-widget__item-text {
  color: #8d8494;
}

.khozam-todos-widget__item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.khozam-todos-widget__item-date {
  color: #8d8494 !important;
  font-size: 11px;
  font-weight: 500;
}

.khozam-todos-widget__item-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.khozam-todos-widget__item-inner:hover .khozam-todos-widget__item-actions {
  opacity: 1;
}

.khozam-todos-widget__item-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  background: #fff;
  color: var(--khozam-purple) !important;
  font-size: 11px;
  text-decoration: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.khozam-todos-widget__item-btn:hover {
  background: rgba(196, 168, 113, 0.14);
  border-color: rgba(196, 168, 113, 0.35);
}

.khozam-todos-widget__item-btn--danger:hover {
  background: rgba(192, 57, 43, 0.1);
  border-color: rgba(192, 57, 43, 0.25);
  color: #c0392b !important;
}

.khozam-todos-widget__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  color: #8d8494;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.khozam-todos-widget__empty i {
  font-size: 22px;
  color: rgba(196, 168, 113, 0.75);
}

.khozam-todos-widget .todo-checkbox input:checked + label:after {
  border-color: var(--khozam-gold) !important;
  background: var(--khozam-gold) !important;
}

.khozam-todos-widget .todo-checkbox label {
  border-color: rgba(26, 44, 29, 0.2) !important;
}

.khozam-todos-widget .todo-dragger {
  cursor: grab;
  color: rgba(26, 44, 29, 0.25);
}

.khozam-todos-widget .todo-dragger:hover {
  color: var(--khozam-gold);
}

@media (max-width: 991px) {
  .khozam-todos-widget__content {
    max-height: none;
  }

  .khozam-todos-widget__item-actions {
    opacity: 1;
  }
}

/* Dashboard widget spacing */
.content .row [data-container] > .widget {
  margin-bottom: 20px;
}

/* Dashboard: user_data + todos side-by-side row */
.khozam-dashboard-user-row__main,
.khozam-dashboard-user-row__side {
  display: flex;
  flex-direction: column;
}

.khozam-dashboard-user-row__main > .widget,
.khozam-dashboard-user-row__side > .widget {
  flex: 1 1 auto;
  width: 100%;
  margin-bottom: 0 !important;
}

.khozam-dashboard-user-row__main .khozam-user-widget__panel,
.khozam-dashboard-user-row__side .khozam-todos-widget__panel {
  height: 100%;
}

.khozam-dashboard-user-row__side .khozam-todos-widget__body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.khozam-dashboard-user-row__side .khozam-todos-widget__content {
  flex: 1;
}

@media (max-width: 991px) {
  .khozam-dashboard-user-row__main,
  .khozam-dashboard-user-row__side {
    display: block;
  }

  .khozam-dashboard-user-row__side {
    margin-top: 20px !important;
  }
}

/* ── Dashboard: Stats doughnut widgets (leads + projects) ── */
.khozam-stats-widget__panel {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09) !important;
  background: #fff !important;
}

.khozam-stats-widget__body {
  padding: 0 !important;
  background: #fbf8f4;
}

.khozam-stats-widget__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.18);
}

.khozam-stats-widget__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--khozam-cream);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
  min-width: 0;
  flex: 1;
}

.khozam-stats-widget__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 9px;
  background: rgba(248, 240, 224, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-gold);
  font-size: 13px;
  flex-shrink: 0;
}

.khozam-stats-widget__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.khozam-stats-widget__action {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(196, 168, 113, 0.28);
  background: rgba(248, 240, 224, 0.08);
  color: var(--khozam-cream) !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.khozam-stats-widget__action:hover,
.khozam-stats-widget__action:focus {
  background: rgba(248, 240, 224, 0.16);
  border-color: rgba(196, 168, 113, 0.45);
  color: #fff !important;
}

.khozam-stats-widget__content {
  padding: 14px 14px 16px;
}

.khozam-stats-widget__chart-stage {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.khozam-stats-widget__chart-wrap {
  position: relative;
  width: 100%;
  max-width: 210px;
  height: 175px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 10px rgba(26, 44, 29, 0.04);
}

.khozam-stats-widget__chart-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

.khozam-stats-widget__chart-center strong {
  display: block;
  color: var(--khozam-purple);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.khozam-stats-widget__chart-center span {
  display: block;
  margin-top: 4px;
  color: #8d8494;
  font-size: 11px;
  font-weight: 600;
}

.khozam-stats-widget__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.khozam-stats-widget__legend-link,
.khozam-stats-widget__legend-link--static {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid rgba(26, 44, 29, 0.06);
  background: #fff;
  color: inherit;
  text-decoration: none !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.khozam-stats-widget__legend-link:hover {
  border-color: rgba(196, 168, 113, 0.34);
  background: rgba(248, 240, 224, 0.42);
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.05);
}

.khozam-stats-widget__legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--status-color, #737373);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(26, 44, 29, 0.04);
}

.khozam-stats-widget__legend-name {
  flex: 1;
  min-width: 0;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.khozam-stats-widget__legend-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.72);
  color: var(--khozam-purple);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.khozam-stats-widget__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 170px;
  padding: 20px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed rgba(26, 44, 29, 0.12);
  color: #8d8494;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.khozam-stats-widget__empty i {
  font-size: 24px;
  color: rgba(196, 168, 113, 0.75);
}

@media (max-width: 767px) {
  .khozam-stats-widget__legend {
    grid-template-columns: 1fr;
  }
}

.khozam-leads-timeline__toolbar {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 12px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.06);
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-leads-timeline__period {
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6f6674;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.khozam-leads-timeline__period:hover,
.khozam-leads-timeline__period:focus {
  color: var(--khozam-purple);
  outline: 0;
}

.khozam-leads-timeline__period:focus-visible {
  box-shadow: 0 0 0 2px rgba(196, 168, 113, 0.65);
}

.khozam-leads-timeline__period.is-active {
  background: var(--khozam-purple);
  color: var(--khozam-cream);
  box-shadow: 0 3px 8px rgba(26, 44, 29, 0.16);
}

.khozam-leads-timeline__stage {
  position: relative;
  width: 100%;
  height: 280px;
  padding: 12px 8px 4px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  transition: opacity 0.18s ease;
}

.khozam-leads-timeline.is-loading .khozam-leads-timeline__stage {
  opacity: 0.45;
}

.khozam-leads-timeline__summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  color: #8d8494;
  font-size: 12px;
}

.khozam-leads-timeline__summary strong {
  min-width: 34px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 560px) {
  .khozam-leads-timeline__toolbar {
    display: flex;
    width: 100%;
  }

  .khozam-leads-timeline__period {
    flex: 1;
    padding-inline: 8px;
  }

  .khozam-leads-timeline__stage {
    height: 240px;
  }
}

/* ── Dashboard: Tickets awaiting reply widget ── */
.khozam-tickets-widget__content {
  padding-top: 12px;
}

.khozam-tickets-widget__section {
  padding-bottom: 14px;
}

.khozam-tickets-widget__section:last-child {
  padding-bottom: 0;
}

.khozam-tickets-widget__section + .khozam-tickets-widget__section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-tickets-widget__section-title {
  margin: 0 0 10px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.khozam-tickets-widget__chart-wrap {
  max-width: 190px;
  height: 150px;
}

.khozam-tickets-widget__chart-wrap .khozam-stats-widget__chart-center strong {
  font-size: 21px;
}

.khozam-tickets-widget .khozam-stats-widget__chart-stage {
  margin-bottom: 10px;
}

.khozam-tickets-widget .khozam-stats-widget__content {
  padding-bottom: 14px;
}

/* ── Dashboard: New leads · 30 days widget (matches tickets design) ── */
.khozam-stats-widget__title-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 1px;
  letter-spacing: 0.2px;
}

.khozam-new-leads-widget__content {
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.khozam-new-leads-widget__chart {
  position: relative;
  width: 100%;
  height: 150px;
  padding: 6px 4px 2px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 10px rgba(26, 44, 29, 0.04);
  overflow: hidden;
}

.khozam-new-leads-widget__canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.khozam-new-leads-widget__total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(26, 44, 29, 0.04) 0%, rgba(196, 168, 113, 0.10) 100%);
  border: 1px solid rgba(26, 44, 29, 0.06);
  text-align: center;
}

.khozam-new-leads-widget__total strong {
  font-size: 28px;
  font-weight: 800;
  color: var(--khozam-purple);
  line-height: 1;
}

.khozam-new-leads-widget__total span {
  font-size: 12px;
  font-weight: 700;
  color: #8d8494;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.khozam-new-leads-widget__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.khozam-new-leads-widget__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid rgba(26, 44, 29, 0.06);
  background: #fff;
  min-width: 0;
}

.khozam-new-leads-widget__stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--status-color, #737373);
  box-shadow: 0 0 0 2px rgba(26, 44, 29, 0.04);
  flex-shrink: 0;
}

.khozam-new-leads-widget__stat-label {
  font-size: 9px;
  font-weight: 600;
  color: #8d8494;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.khozam-new-leads-widget__stat-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--khozam-purple);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.1;
}

.khozam-new-leads-widget__stat-value i {
  font-size: 10px;
}

.khozam-new-leads-widget__stat-value.is-up {
  color: #3d9a5f;
}

.khozam-new-leads-widget__stat-value.is-down {
  color: #c0392b;
}

@media (max-width: 767px) {
  .khozam-new-leads-widget__total strong {
    font-size: 24px;
  }
  .khozam-new-leads-widget__chart {
    height: 130px;
  }
}

/* ── Dashboard: Contracts expiring widget ── */
.khozam-contracts-widget__panel {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09) !important;
  background: #fff !important;
}

.khozam-contracts-widget__body {
  padding: 0 !important;
  background: #fbf8f4;
}

.khozam-contracts-widget__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.18);
}

.khozam-contracts-widget__title-wrap {
  min-width: 0;
  flex: 1;
}

.khozam-contracts-widget__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--khozam-cream);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
}

.khozam-contracts-widget__subtitle {
  margin: 6px 0 0 42px;
  color: rgba(248, 240, 224, 0.72);
  font-size: 11px;
  font-weight: 500;
}

[dir="ltr"] .khozam-contracts-widget__subtitle {
  margin-left: 42px;
  margin-right: 0;
}

.khozam-contracts-widget__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 9px;
  background: rgba(248, 240, 224, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-gold);
  font-size: 13px;
  flex-shrink: 0;
}

.khozam-contracts-widget__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.khozam-contracts-widget__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--khozam-gold);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 800;
}

.khozam-contracts-widget__action {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(196, 168, 113, 0.28);
  background: rgba(248, 240, 224, 0.08);
  color: var(--khozam-cream) !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.khozam-contracts-widget__action:hover,
.khozam-contracts-widget__action:focus {
  background: rgba(248, 240, 224, 0.16);
  border-color: rgba(196, 168, 113, 0.45);
  color: #fff !important;
}

.khozam-contracts-widget__content {
  padding: 14px;
}

.khozam-contracts-widget__table-wrap {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 12px;
  overflow: auto;
  max-height: 320px;
  box-shadow: 0 2px 10px rgba(26, 44, 29, 0.04);
}

.khozam-contracts-widget__table {
  margin: 0 !important;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.khozam-contracts-widget__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(248, 240, 224, 0.72) !important;
  color: var(--khozam-purple) !important;
  border-color: rgba(26, 44, 29, 0.08) !important;
  font-size: 12px;
  font-weight: 700 !important;
  white-space: nowrap;
  padding: 11px 12px !important;
}

.khozam-contracts-widget__table tbody td {
  border-color: rgba(26, 44, 29, 0.06) !important;
  color: #4f4658;
  font-size: 12px;
  vertical-align: middle !important;
  padding: 11px 12px !important;
}

.khozam-contracts-widget__table tbody tr:hover td {
  background: rgba(248, 240, 224, 0.28) !important;
}

.khozam-contracts-widget__table a {
  color: var(--khozam-purple) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.khozam-contracts-widget__table a:hover {
  color: var(--khozam-gold-hover) !important;
}

.khozam-contracts-widget__subject a {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.khozam-contracts-widget__end-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.khozam-contracts-widget__days {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.khozam-contracts-widget__days--normal {
  background: rgba(248, 240, 224, 0.85);
  color: var(--khozam-purple);
}

.khozam-contracts-widget__days--warning {
  background: rgba(214, 137, 16, 0.16);
  color: #9a6208;
}

.khozam-contracts-widget__days--urgent {
  background: rgba(192, 57, 43, 0.12);
  color: #a93226;
}

.khozam-contracts-widget__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  padding: 24px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed rgba(26, 44, 29, 0.12);
  color: #8d8494;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.khozam-contracts-widget__empty i {
  font-size: 28px;
  color: #3d9a5f;
}

@media (max-width: 991px) {
  .khozam-contracts-widget__table-wrap {
    max-height: 280px;
  }

  .khozam-contracts-widget__subject a {
    max-width: 140px;
  }
}

/* ── Dashboard: Staff tickets report widget ── */
.khozam-tickets-report-widget__panel {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09) !important;
  background: #fff !important;
}

.khozam-tickets-report-widget__body {
  padding: 0 !important;
  background: #fbf8f4;
}

.khozam-tickets-report-widget__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.18);
}

.khozam-tickets-report-widget__title-wrap {
  min-width: 0;
  flex: 1;
}

.khozam-tickets-report-widget__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--khozam-cream);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
}

.khozam-tickets-report-widget__subtitle {
  margin: 6px 0 0 42px;
  color: rgba(248, 240, 224, 0.72);
  font-size: 11px;
  font-weight: 500;
}

[dir="ltr"] .khozam-tickets-report-widget__subtitle {
  margin-left: 42px;
  margin-right: 0;
}

.khozam-tickets-report-widget__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 9px;
  background: rgba(248, 240, 224, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-gold);
  font-size: 13px;
  flex-shrink: 0;
}

.khozam-tickets-report-widget__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.khozam-tickets-report-widget__period-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(196, 168, 113, 0.28);
  background: rgba(248, 240, 224, 0.08);
  color: var(--khozam-cream) !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.khozam-tickets-report-widget__period-toggle:hover,
.khozam-tickets-report-widget__period-toggle:focus {
  background: rgba(248, 240, 224, 0.16);
  border-color: rgba(196, 168, 113, 0.45);
  color: #fff !important;
}

.khozam-tickets-report-widget__period-menu {
  min-width: 160px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(26, 44, 29, 0.12);
  padding: 6px 0;
}

.khozam-tickets-report-widget__period-menu > li > a {
  padding: 8px 14px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 600;
}

.khozam-tickets-report-widget__period-menu > li > a:hover {
  background: rgba(248, 240, 224, 0.65);
  color: var(--khozam-purple);
}

.khozam-tickets-report-widget__action {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(196, 168, 113, 0.28);
  background: rgba(248, 240, 224, 0.08);
  color: var(--khozam-cream) !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.khozam-tickets-report-widget__action:hover,
.khozam-tickets-report-widget__action:focus {
  background: rgba(248, 240, 224, 0.16);
  border-color: rgba(196, 168, 113, 0.45);
  color: #fff !important;
}

.khozam-tickets-report-widget__content {
  padding: 14px;
}

.khozam-tickets-report-widget__table-host.is-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.khozam-tickets-report-widget__summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.khozam-tickets-report-widget__summary-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.04);
}

.khozam-tickets-report-widget__summary-label {
  color: #8d8494;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

.khozam-tickets-report-widget__summary-value {
  color: var(--khozam-purple);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}

.khozam-tickets-report-widget__summary-card--open .khozam-tickets-report-widget__summary-value {
  color: #9a6208;
}

.khozam-tickets-report-widget__summary-card--closed .khozam-tickets-report-widget__summary-value {
  color: #2f7a4f;
}

.khozam-tickets-report-widget__summary-card--replies .khozam-tickets-report-widget__summary-value {
  color: #8a5a24;
}

.khozam-tickets-report-widget__table-wrap {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 12px;
  overflow: auto;
  box-shadow: 0 2px 10px rgba(26, 44, 29, 0.04);
}

.khozam-tickets-report-widget__table {
  margin: 0 !important;
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
}

.khozam-tickets-report-widget__table thead th {
  background: rgba(248, 240, 224, 0.72) !important;
  color: var(--khozam-purple) !important;
  border-color: rgba(26, 44, 29, 0.08) !important;
  font-size: 12px;
  font-weight: 700 !important;
  white-space: nowrap;
  padding: 11px 12px !important;
  vertical-align: middle !important;
}

.khozam-tickets-report-widget__help {
  color: var(--khozam-gold);
  margin-inline-end: 4px;
}

.khozam-tickets-report-widget__table tbody td {
  border-color: rgba(26, 44, 29, 0.06) !important;
  color: #4f4658;
  font-size: 12px;
  vertical-align: middle !important;
  padding: 10px 12px !important;
}

.khozam-tickets-report-widget__table tbody tr:hover td {
  background: rgba(248, 240, 224, 0.28) !important;
}

.khozam-tickets-report-widget__staff-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--khozam-purple) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.khozam-tickets-report-widget__staff-link:hover {
  color: var(--khozam-gold-hover) !important;
}

.khozam-tickets-report-widget__avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid rgba(196, 168, 113, 0.35);
  flex-shrink: 0;
}

.khozam-tickets-report-widget__metric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.khozam-tickets-report-widget__metric--assigned {
  background: rgba(26, 44, 29, 0.08);
  color: var(--khozam-purple);
}

.khozam-tickets-report-widget__metric--open {
  background: rgba(214, 137, 16, 0.14);
  color: #9a6208;
}

.khozam-tickets-report-widget__metric--closed {
  background: rgba(47, 122, 79, 0.12);
  color: #2f7a4f;
}

.khozam-tickets-report-widget__metric--replies {
  background: rgba(196, 168, 113, 0.18);
  color: #8a5a24;
}

.khozam-tickets-report-widget__metric--time {
  background: rgba(248, 240, 224, 0.85);
  color: #5f5668;
  border-radius: 8px;
  min-width: 0;
  padding: 4px 10px;
  font-weight: 600;
}

.khozam-tickets-report-widget__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  padding: 24px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed rgba(26, 44, 29, 0.12);
  color: #8d8494;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.khozam-tickets-report-widget__empty i {
  font-size: 28px;
  color: #3d9a5f;
}

.khozam-tickets-report-widget .dataTables_wrapper {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px;
  box-shadow: none;
  clear: both;
}

.khozam-tickets-report-widget .dataTables_wrapper > .row:first-child {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.khozam-tickets-report-widget .dataTables_wrapper .dataTables_length,
.khozam-tickets-report-widget .dataTables_wrapper .dt-buttons,
.khozam-tickets-report-widget .dataTables_wrapper .dataTables_filter {
  float: none !important;
  margin: 0 !important;
}

.khozam-tickets-report-widget .dataTables_wrapper .dataTables_filter {
  margin-inline-start: auto !important;
}

.khozam-tickets-report-widget .dataTables_wrapper .dataTables_length label,
.khozam-tickets-report-widget .dataTables_wrapper .dataTables_filter label {
  color: #6f6475;
  font-weight: 500;
}

.khozam-tickets-report-widget .dataTables_wrapper .dataTables_filter input,
.khozam-tickets-report-widget .dataTables_wrapper .dataTables_length select {
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 8px !important;
  background: #fbf8f4 !important;
  color: var(--khozam-purple) !important;
  box-shadow: none !important;
}

.khozam-tickets-report-widget .dataTables_wrapper .dataTables_filter input:focus,
.khozam-tickets-report-widget .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--khozam-gold) !important;
  outline: none;
}

.khozam-tickets-report-widget .dt-buttons .btn,
.khozam-tickets-report-widget .btn-default.buttons-collection,
.khozam-tickets-report-widget .btn-default.buttons-page-length {
  border-radius: 8px !important;
  border-color: rgba(26, 44, 29, 0.12) !important;
  color: var(--khozam-purple) !important;
  background: #fff !important;
}

.khozam-tickets-report-widget table.dataTable td.dataTables_empty {
  padding: 28px 16px !important;
  color: #8d8494 !important;
  font-size: 13px;
  font-weight: 500;
  text-align: center !important;
  background: rgba(248, 240, 224, 0.18) !important;
}

@media (max-width: 1199px) {
  .khozam-tickets-report-widget__summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .khozam-tickets-report-widget__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .khozam-tickets-report-widget__header {
    flex-direction: column;
  }

  .khozam-tickets-report-widget__actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* ── Dashboard: Today appointments widget (Appointly) ── */
.khozam-appointments-widget__panel {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09) !important;
  background: #fff !important;
}

.khozam-appointments-widget__body {
  padding: 0 !important;
  background: #fbf8f4;
}

.khozam-appointments-widget__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.18);
}

.khozam-appointments-widget__title-wrap {
  min-width: 0;
  flex: 1;
}

.khozam-appointments-widget__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--khozam-cream);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
}

.khozam-appointments-widget__subtitle {
  margin: 6px 0 0 42px;
  color: rgba(248, 240, 224, 0.72);
  font-size: 11px;
  font-weight: 500;
}

[dir="ltr"] .khozam-appointments-widget__subtitle {
  margin-left: 42px;
  margin-right: 0;
}

.khozam-appointments-widget__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 9px;
  background: rgba(248, 240, 224, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-gold);
  font-size: 13px;
  flex-shrink: 0;
}

.khozam-appointments-widget__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.khozam-appointments-widget__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--khozam-gold);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 800;
}

.khozam-appointments-widget__action {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(196, 168, 113, 0.28);
  background: rgba(248, 240, 224, 0.08);
  color: var(--khozam-cream) !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.khozam-appointments-widget__action:hover,
.khozam-appointments-widget__action:focus {
  background: rgba(248, 240, 224, 0.16);
  border-color: rgba(196, 168, 113, 0.45);
  color: #fff !important;
}

.khozam-appointments-widget__content {
  padding: 14px;
}

.khozam-appointments-widget__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow: auto;
  padding-inline-end: 2px;
}

.khozam-appointments-widget__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.khozam-appointments-widget__item:hover {
  border-color: rgba(196, 168, 113, 0.35);
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.08);
  transform: translateY(-1px);
}

.khozam-appointments-widget__time {
  flex-shrink: 0;
}

.khozam-appointments-widget__time span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(26, 44, 29, 0.08);
  color: var(--khozam-purple);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.khozam-appointments-widget__details {
  min-width: 0;
  flex: 1;
}

.khozam-appointments-widget__subject {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.khozam-appointments-widget__subject a {
  color: var(--khozam-purple) !important;
  text-decoration: none !important;
}

.khozam-appointments-widget__subject a:hover {
  color: var(--khozam-gold-hover) !important;
}

.khozam-appointments-widget__description {
  margin: 0 0 8px;
  color: #6f6475;
  font-size: 12px;
  line-height: 1.55;
}

.khozam-appointments-widget__meta {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(214, 137, 16, 0.12);
  color: #9a6208;
  font-size: 10px;
  font-weight: 700;
}

.khozam-appointments-widget__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 210px;
  padding: 28px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed rgba(26, 44, 29, 0.12);
  text-align: center;
}

.khozam-appointments-widget__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: rgba(248, 240, 224, 0.85);
  border: 1px solid rgba(196, 168, 113, 0.25);
  color: var(--khozam-gold);
  font-size: 22px;
}

.khozam-appointments-widget__empty strong {
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 700;
}

.khozam-appointments-widget__empty p {
  margin: 0;
  color: #8d8494;
  font-size: 12px;
  font-weight: 500;
}

.khozam-appointments-widget__empty-action {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--khozam-purple);
  color: var(--khozam-cream) !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.18s ease;
}

.khozam-appointments-widget__empty-action:hover,
.khozam-appointments-widget__empty-action:focus {
  background: var(--khozam-purple-mid);
  color: #fff !important;
}

@media (max-width: 767px) {
  .khozam-appointments-widget__item {
    flex-direction: column;
    gap: 8px;
  }

  .khozam-appointments-widget__time span {
    min-width: 0;
  }

  .khozam-appointments-widget__header {
    flex-direction: column;
  }

  .khozam-appointments-widget__actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* ── Shared page toolbar buttons (Leads, Clients, ...) ── */
.khozam-page-toolbar__actions,
.khozam-leads-toolbar__actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}

.khozam-page-toolbar__btn,
.khozam-leads-toolbar__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.08);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  float: none !important;
  margin: 0 !important;
}

.khozam-page-toolbar__btn i,
.khozam-leads-toolbar__btn i {
  font-size: 13px;
  line-height: 1;
}

.khozam-page-toolbar__btn span,
.khozam-leads-toolbar__btn span {
  white-space: nowrap;
}

.khozam-page-toolbar__btn--primary,
.khozam-leads-toolbar__btn--primary {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%) !important;
  border: 1px solid rgba(196, 168, 113, 0.28) !important;
  color: var(--khozam-cream) !important;
}

.khozam-page-toolbar__btn--primary:hover,
.khozam-page-toolbar__btn--primary:focus,
.khozam-page-toolbar__btn--primary:active,
.khozam-leads-toolbar__btn--primary:hover,
.khozam-leads-toolbar__btn--primary:focus,
.khozam-leads-toolbar__btn--primary:active {
  background: linear-gradient(135deg, #241c17 0%, #3a2e28 100%) !important;
  border-color: rgba(196, 168, 113, 0.45) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.16);
  outline: none !important;
}

.khozam-page-toolbar__btn--secondary,
.khozam-leads-toolbar__btn--secondary {
  background: #fff !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  color: var(--khozam-purple) !important;
}

.khozam-page-toolbar__btn--secondary:hover,
.khozam-page-toolbar__btn--secondary:focus,
.khozam-leads-toolbar__btn--secondary:hover,
.khozam-leads-toolbar__btn--secondary:focus {
  background: rgba(248, 240, 224, 0.72) !important;
  border-color: rgba(196, 168, 113, 0.4) !important;
  color: var(--khozam-purple) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.1);
}

.khozam-page-toolbar__btn--google,
.khozam-leads-toolbar__btn--google {
  background: #fff !important;
  border: 1px solid rgba(66, 133, 244, 0.22) !important;
  color: var(--khozam-purple) !important;
}

.khozam-page-toolbar__btn--google i,
.khozam-leads-toolbar__btn--google i {
  color: #4285f4;
}

.khozam-page-toolbar__btn--google:hover,
.khozam-page-toolbar__btn--google:focus,
.khozam-leads-toolbar__btn--google:hover,
.khozam-leads-toolbar__btn--google:focus {
  background: rgba(66, 133, 244, 0.08) !important;
  border-color: rgba(66, 133, 244, 0.35) !important;
  color: var(--khozam-purple) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(66, 133, 244, 0.12);
}

@media (max-width: 767px) {
  .khozam-page-toolbar__actions,
  .khozam-leads-toolbar__actions {
    width: 100%;
  }

  .khozam-page-toolbar__btn,
  .khozam-leads-toolbar__btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .khozam-page-toolbar__btn span,
  .khozam-leads-toolbar__btn span {
    white-space: normal;
    text-align: center;
  }
}

/* ── Units page (الوحدات): hero + toolbar + table ── */
.khozam-units-page__hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-units-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-units-page__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 700;
}

.khozam-units-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.khozam-units-toolbar-panel {
  position: sticky;
  top: var(--khozam-header-height);
  z-index: 25;
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
}

.khozam-units-toolbar-panel__body {
  padding: 14px 16px !important;
  background: #fff !important;
}

.khozam-units-page ._buttons {
  clear: both;
  overflow: hidden;
  margin-bottom: 18px !important;
  position: relative;
  z-index: 2;
}

.khozam-units-page .khozam-page-toolbar__actions {
  float: none !important;
  width: 100%;
}

.khozam-units-page .panel-table-full,
.khozam-units-page .khozam-units-table {
  clear: both;
  margin-top: 0;
}

.khozam-units-page .khozam-units-table .panel_s {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  overflow: hidden;
  margin-bottom: 0 !important;
}

.khozam-units-page .khozam-units-table .panel-body {
  padding: 16px !important;
  background: #fff !important;
}

.khozam-units-page .panel-table-full .dataTables_wrapper .table-responsive,
.khozam-units-page .khozam-units-table .dataTables_wrapper .table-responsive {
  margin-inline: 0 !important;
  padding-inline: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.06);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 44, 29, 0.22) rgba(248, 240, 224, 0.45);
}

.khozam-units-page .khozam-units-table .dataTables_wrapper .table-responsive::-webkit-scrollbar {
  height: 8px;
}

.khozam-units-page .khozam-units-table .dataTables_wrapper .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(26, 44, 29, 0.22);
  border-radius: 999px;
}

.khozam-units-page .panel-table-full .dataTables_wrapper > .row,
.khozam-units-page .khozam-units-table .dataTables_wrapper > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.khozam-units-page .panel-table-full .dataTables_wrapper > .row:first-child,
.khozam-units-page .khozam-units-table .dataTables_wrapper > .row:first-child {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.khozam-units-page .panel-table-full .dataTables_wrapper > .row:nth-child(2),
.khozam-units-page .khozam-units-table .dataTables_wrapper > .row:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px !important;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(248, 240, 224, 0.35);
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-units-page .khozam-units-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.khozam-units-page .khozam-units-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"]:last-child {
  margin-inline-start: auto;
}

.khozam-units-page .panel-table-full .dataTables_wrapper .dataTables_length,
.khozam-units-page .panel-table-full .dataTables_wrapper .dt-buttons,
.khozam-units-page .panel-table-full .dataTables_wrapper .dataTables_filter,
.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_length,
.khozam-units-page .khozam-units-table .dataTables_wrapper .dt-buttons,
.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_filter {
  float: none !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-units-page .panel-table-full .dataTables_wrapper .dataTables_length label,
.khozam-units-page .panel-table-full .dataTables_wrapper .dataTables_filter label,
.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_length label,
.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_filter label {
  color: #6f6475;
  font-weight: 500;
  margin-bottom: 0;
}

.khozam-units-page .panel-table-full .dataTables_wrapper .dataTables_length select,
.khozam-units-page .panel-table-full .dataTables_wrapper .dataTables_filter input,
.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_length select,
.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_filter input {
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 8px !important;
  background: #fbf8f4 !important;
  min-height: 34px;
  color: var(--khozam-purple) !important;
}

.khozam-units-page .panel-table-full .dt-buttons .btn,
.khozam-units-page .panel-table-full .btn-default.buttons-collection,
.khozam-units-page .panel-table-full .btn-default.buttons-page-length,
.khozam-units-page .panel-table-full .btn-dt-reload,
.khozam-units-page .khozam-units-table .dt-buttons .btn,
.khozam-units-page .khozam-units-table .btn-default.buttons-collection,
.khozam-units-page .khozam-units-table .btn-default.buttons-page-length,
.khozam-units-page .khozam-units-table .btn-dt-reload {
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  color: var(--khozam-purple) !important;
  background: #fff !important;
  font-weight: 600;
  box-shadow: none !important;
}

.khozam-units-page .panel-table-full .dt-buttons .btn:hover,
.khozam-units-page .panel-table-full .btn-default.buttons-collection:hover,
.khozam-units-page .panel-table-full .btn-default.buttons-page-length:hover,
.khozam-units-page .panel-table-full .btn-dt-reload:hover,
.khozam-units-page .khozam-units-table .dt-buttons .btn:hover,
.khozam-units-page .khozam-units-table .btn-default.buttons-collection:hover,
.khozam-units-page .khozam-units-table .btn-default.buttons-page-length:hover,
.khozam-units-page .khozam-units-table .btn-dt-reload:hover {
  background: rgba(248, 240, 224, 0.72) !important;
  border-color: rgba(196, 168, 113, 0.35) !important;
  color: var(--khozam-purple) !important;
}

.khozam-units-page .table-invoice-items.dataTable {
  width: max-content !important;
  min-width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
}

.khozam-units-page .panel-table-full .table-invoice-items thead th,
.khozam-units-page .khozam-units-table .table-invoice-items thead th {
  background: rgba(248, 240, 224, 0.72) !important;
  color: var(--khozam-purple) !important;
  border-color: rgba(26, 44, 29, 0.08) !important;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 12px !important;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.45;
}

.khozam-units-page .table-invoice-items.dataTable tbody td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
  color: rgba(26, 44, 29, 0.88);
  border-color: rgba(26, 44, 29, 0.06) !important;
  font-size: 13px;
  line-height: 1.45;
}

.khozam-units-page .table-invoice-items.dataTable tbody tr:hover td {
  background: rgba(248, 240, 224, 0.42) !important;
}

.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_info {
  color: rgba(26, 44, 29, 0.62);
  font-weight: 500;
  padding-top: 12px;
}

.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_paginate {
  padding-top: 8px;
}

.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  min-height: 34px;
  margin-inline: 2px;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
}

.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--khozam-gold) !important;
  border-color: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
}

.khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(248, 240, 224, 0.72) !important;
  border-color: rgba(196, 168, 113, 0.35) !important;
  color: var(--khozam-purple) !important;
}

[dir="rtl"] .khozam-units-page .khozam-units-table .dataTables_wrapper thead > tr > th:first-child,
[dir="rtl"] .khozam-units-page .khozam-units-table .dataTables_wrapper thead > tr > th:last-child {
  border-right: 1px solid rgba(26, 44, 29, 0.08) !important;
  border-left: 1px solid rgba(26, 44, 29, 0.08) !important;
}

[dir="rtl"] .khozam-units-page .table-invoice-items.dataTable thead th:first-child,
[dir="rtl"] .khozam-units-page .table-invoice-items.dataTable tbody td:first-child {
  padding-inline-start: 18px !important;
  padding-inline-end: 12px !important;
}

@media (max-width: 991px) {
  .khozam-units-page .khozam-units-toolbar-panel {
    position: static;
  }
}

@media (max-width: 767px) {
  .khozam-units-page .khozam-units-table .panel-body {
    padding: 12px !important;
  }

  .khozam-units-page .khozam-units-table .dataTables_wrapper .table-responsive {
    padding-inline: 10px 12px;
  }

  .khozam-units-page .khozam-units-table .dataTables_wrapper > .row:nth-child(2) {
    flex-direction: column;
    align-items: stretch;
  }

  .khozam-units-page .khozam-units-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"]:last-child {
    margin-inline-start: 0;
    width: 100% !important;
  }

  .khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_filter {
    width: 100%;
  }

  .khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_filter label {
    width: 100%;
  }

  .khozam-units-page .khozam-units-table .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
  }
}

/* ── Leads list: loading skeleton fallback ── */
#leads_wrapper.table-loading,
.dataTables_wrapper.table-loading {
  position: relative;
  min-height: 220px;
  background: linear-gradient(180deg, rgba(248, 240, 224, 0.35) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-radius: 12px;
}

#leads_wrapper.table-loading table thead th,
#leads_wrapper.table-loading table tbody tr,
.table-loading#leads_wrapper table thead th,
.table-loading#leads_wrapper table tbody tr {
  opacity: 0 !important;
}

#leads_wrapper .dataTables_processing,
#leads_processing {
  z-index: 3;
}

.table-leads.dataTable tbody tr td {
  vertical-align: middle !important;
}

/* ── Leads list table: readability + RTL edge padding ── */
#leads-table .khozam-leads-table {
  border-radius: 12px;
  overflow: visible;
}

#leads-table .khozam-leads-table .dataTables_wrapper .table-responsive {
  margin-inline: 0 !important;
  padding-inline: 14px 18px;
  padding-top: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 44, 29, 0.22) rgba(248, 240, 224, 0.45);
}

#leads-table .khozam-leads-table .table-leads.dataTable tbody tr:first-child td {
  border-top: 0 !important;
}

#leads-table .khozam-leads-table .dataTables_wrapper .table-responsive::-webkit-scrollbar {
  height: 8px;
}

#leads-table .khozam-leads-table .dataTables_wrapper .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(26, 44, 29, 0.22);
  border-radius: 999px;
}

#leads-table .khozam-leads-table .dataTables_wrapper .table-responsive::-webkit-scrollbar-track {
  background: rgba(248, 240, 224, 0.45);
  border-radius: 999px;
}

#leads-table .khozam-leads-table .table-leads.dataTable {
  width: max-content !important;
  min-width: 100%;
  margin-bottom: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th,
#leads-table .khozam-leads-table .table-leads.dataTable tbody td {
  white-space: normal !important;
  line-height: 1.45;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th {
  position: sticky;
  /* Must be 0: sticky is relative to .table-responsive scrollport (overflow-x),
     not the page. A page-header offset here pushes thead over the first body row. */
  top: 0;
  z-index: 5;
  background: #f8f6f3 !important;
  color: var(--khozam-purple) !important;
  border-color: rgba(26, 44, 29, 0.08) !important;
  font-weight: 600;
  font-size: 12.5px;
  box-shadow: 0 1px 0 rgba(26, 44, 29, 0.06);
}

#leads-table .khozam-leads-table.is-head-stuck .table-leads.dataTable thead th {
  background: #f8f6f3 !important;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.1);
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th:nth-child(1),
#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-number,
#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-name {
  z-index: 7;
  background: #f8f6f3 !important;
}

#leads-table .khozam-leads-table.is-head-stuck .table-leads.dataTable thead th:nth-child(1),
#leads-table .khozam-leads-table.is-head-stuck .table-leads.dataTable thead th#th-number,
#leads-table .khozam-leads-table.is-head-stuck .table-leads.dataTable thead th#th-name {
  background: #f8f6f3 !important;
}

#leads-table .khozam-leads-table .table-leads.dataTable tbody td {
  border-color: rgba(26, 44, 29, 0.06) !important;
  color: #3f3348;
  font-size: 13px;
}

#leads-table .khozam-leads-table .table-leads.dataTable tbody tr:hover td {
  background: #fff8ef !important;
}

[dir="rtl"] #leads-table .khozam-leads-table .dataTables_wrapper thead > tr > th:first-child,
[dir="rtl"] #leads-table .khozam-leads-table .dataTables_wrapper thead > tr > th:last-child {
  border-right: 1px solid rgba(26, 44, 29, 0.08) !important;
  border-left: 1px solid rgba(26, 44, 29, 0.08) !important;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th:first-child,
#leads-table .khozam-leads-table .table-leads.dataTable tbody td:first-child {
  min-width: 40px !important;
  width: 40px !important;
  max-width: 40px !important;
  text-align: center;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-number,
#leads-table .khozam-leads-table .table-leads.dataTable tbody td:nth-child(2) {
  min-width: 52px !important;
  width: 52px !important;
  max-width: 52px !important;
  text-align: center;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-name,
#leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody td:nth-child(3),
#leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) tbody td:nth-child(4) {
  min-width: 200px !important;
  width: 220px !important;
  max-width: 280px !important;
  white-space: normal !important;
  vertical-align: top;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-phone {
  min-width: 118px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-email {
  min-width: 150px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-unit {
  min-width: 92px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-unit-status {
  min-width: 108px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-reserved_at,
#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-contracted_at {
  min-width: 112px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-lead-value {
  min-width: 104px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-tags {
  min-width: 108px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-assigned,
#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-call-center-employee {
  min-width: 128px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-status {
  min-width: 108px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-reasons-for-customer-response,
#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-inappropriate-reasons {
  min-width: 138px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-source {
  min-width: 108px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-last-activity,
#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-last-contact,
#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-date-created {
  min-width: 118px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-latest-note {
  min-width: 220px;
  max-width: 360px;
}

#leads-table .khozam-leads-table .table-leads.dataTable thead th#th-calls-count {
  min-width: 92px;
  text-align: center;
}

#leads-table .khozam-leads-table .table-leads.dataTable tbody td:nth-child(1),
#leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody td:nth-child(2),
#leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody td:nth-child(3),
#leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) tbody td:nth-child(3),
#leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) tbody td:nth-child(4) {
  position: sticky;
  z-index: 2;
  background: #ffffff !important;
}

#leads-table .khozam-leads-table .table-leads.dataTable tbody tr:hover td:nth-child(1),
#leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody tr:hover td:nth-child(2),
#leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody tr:hover td:nth-child(3),
#leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) tbody tr:hover td:nth-child(3),
#leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) tbody tr:hover td:nth-child(4) {
  background: #fff8ef !important;
}

[dir="rtl"] #leads-table .khozam-leads-table .table-leads.dataTable thead th:nth-child(1),
[dir="rtl"] #leads-table .khozam-leads-table .table-leads.dataTable tbody td:nth-child(1) {
  right: 0;
  box-shadow: -4px 0 8px rgba(26, 44, 29, 0.06);
}

[dir="rtl"] #leads-table .khozam-leads-table .table-leads.dataTable thead th#th-number,
[dir="rtl"] #leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody td:nth-child(2) {
  right: 40px;
}

[dir="rtl"] #leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) thead th#th-number,
[dir="rtl"] #leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) tbody td:nth-child(3) {
  right: 40px;
}

[dir="rtl"] #leads-table .khozam-leads-table .table-leads.dataTable thead th#th-name,
[dir="rtl"] #leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody td:nth-child(3) {
  right: 92px;
  box-shadow: -6px 0 10px rgba(26, 44, 29, 0.08);
}

[dir="rtl"] #leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) thead th#th-name,
[dir="rtl"] #leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) tbody td:nth-child(4) {
  right: 92px;
  box-shadow: -6px 0 10px rgba(26, 44, 29, 0.08);
}

[dir="ltr"] #leads-table .khozam-leads-table .table-leads.dataTable thead th:nth-child(1),
[dir="ltr"] #leads-table .khozam-leads-table .table-leads.dataTable tbody td:nth-child(1) {
  left: 0;
  box-shadow: 4px 0 8px rgba(26, 44, 29, 0.06);
}

[dir="ltr"] #leads-table .khozam-leads-table .table-leads.dataTable thead th#th-number,
[dir="ltr"] #leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody td:nth-child(2) {
  left: 40px;
}

[dir="ltr"] #leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) thead th#th-number,
[dir="ltr"] #leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) tbody td:nth-child(3) {
  left: 40px;
}

[dir="ltr"] #leads-table .khozam-leads-table .table-leads.dataTable thead th#th-name,
[dir="ltr"] #leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody td:nth-child(3) {
  left: 92px;
  box-shadow: 6px 0 10px rgba(26, 44, 29, 0.08);
}

[dir="ltr"] #leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) thead th#th-name,
[dir="ltr"] #leads-table .khozam-leads-table .table-leads.dataTable:has(#th-consent) tbody td:nth-child(4) {
  left: 92px;
  box-shadow: 6px 0 10px rgba(26, 44, 29, 0.08);
}

@media (max-width: 767px) {
  #leads-table .khozam-leads-table .dataTables_wrapper .table-responsive {
    padding-inline: 10px 12px;
  }
}

/* ── Reminders page (التذكير): top toolbar ── */
.khozam-reminder-toolbar-panel {
  position: sticky;
  top: var(--khozam-header-height);
  z-index: 40;
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  overflow: visible !important;
}

.khozam-reminder-toolbar-panel.panel_s,
.khozam-reminder-page .khozam-reminder-toolbar-panel.panel_s {
  overflow: visible !important;
}

.khozam-reminder-toolbar-panel__body {
  padding: 14px 16px !important;
  background: #fff !important;
  overflow: visible !important;
}

.khozam-reminder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  overflow: visible;
}

.khozam-reminder-toolbar__primary {
  flex: 0 0 auto;
}

.khozam-reminder-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 420px;
  min-width: 0;
  overflow: visible;
}

.khozam-reminder-toolbar__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.khozam-reminder-toolbar__date-field {
  margin: 0 !important;
  min-width: 170px;
  flex: 1 1 170px;
  max-width: 220px;
}

.khozam-reminder-toolbar__date-field .input-group {
  width: 100%;
}

.khozam-reminder-toolbar__date-field .form-control,
.khozam-reminder-toolbar__date-input {
  min-height: 38px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 10px 0 0 10px !important;
  background: #fbf8f4 !important;
  color: var(--khozam-purple) !important;
  box-shadow: none !important;
}

.khozam-reminder-toolbar__date-field .input-group-addon {
  min-height: 38px;
  padding-inline: 12px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-inline-start: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  background: #fff !important;
  color: var(--khozam-gold) !important;
}

.khozam-reminder-toolbar__tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  position: relative;
  z-index: 45;
  overflow: visible;
}

.khozam-reminder-toolbar__filter-group {
  margin: 0 !important;
  position: relative;
  z-index: 46;
}

.khozam-reminder-page ._filter_data.open,
.khozam-reminder-page ._filter_data.open > .dropdown-menu {
  z-index: 1060;
}

.khozam-reminder-page ._filter_data > .dropdown-menu.khozam-reminder-filter-menu {
  min-width: 240px;
  max-width: min(300px, calc(100vw - 24px));
  margin-top: 6px;
  padding: 8px 0;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(26, 44, 29, 0.16);
  background: #fff;
  text-align: start;
  overflow: visible !important;
}

.khozam-reminder-page ._filter_data .khozam-reminder-filter-menu > li > a,
.khozam-reminder-page ._filter_data .khozam-reminder-filter-menu .dropdown-menu > li > a {
  display: block;
  padding: 8px 14px;
  white-space: normal;
  word-break: break-word;
  color: var(--khozam-purple, #1a2c1d);
  line-height: 1.4;
}

.khozam-reminder-page ._filter_data .khozam-reminder-filter-menu > li > a:hover,
.khozam-reminder-page ._filter_data .khozam-reminder-filter-menu .dropdown-menu > li > a:hover,
.khozam-reminder-page ._filter_data .khozam-reminder-filter-menu > li.active > a {
  background: rgba(196, 168, 113, 0.12);
  color: var(--khozam-purple, #1a2c1d);
}

.khozam-reminder-page ._filter_data .dropdown-submenu {
  position: relative;
}

.khozam-reminder-page ._filter_data .dropdown-submenu > .dropdown-menu {
  top: 0;
  min-width: 200px;
  max-width: min(260px, calc(100vw - 24px));
  margin-top: 0;
  padding: 8px 0;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(26, 44, 29, 0.16);
  background: #fff;
  overflow: visible !important;
}

/*
 * Open nested filter menus INWARD so they stay on screen.
 * LTR: filter is on the right → open submenu to the left.
 * RTL: filter is on the left → open submenu to the right.
 */
html[dir="ltr"] .khozam-reminder-page ._filter_data .dropdown-submenu > .dropdown-menu,
html[dir="ltr"] .khozam-reminder-page ._filter_data .dropdown-submenu.pull-left > .dropdown-menu {
  left: auto !important;
  right: 100% !important;
  margin-left: 0;
  margin-right: 2px;
}

html[dir="rtl"] .khozam-reminder-page ._filter_data .dropdown-submenu > .dropdown-menu,
html[dir="rtl"] .khozam-reminder-page ._filter_data .dropdown-submenu.pull-left > .dropdown-menu {
  right: auto !important;
  left: 100% !important;
  margin-right: 0;
  margin-left: 2px;
}

html[dir="ltr"] .khozam-reminder-page ._filter_data .dropdown-submenu > a:after {
  float: left;
  margin-left: -10px;
  margin-right: 0;
  border-width: 5px 5px 5px 0;
  border-right-color: #94a3b8;
  border-left-color: transparent;
}

html[dir="rtl"] .khozam-reminder-page ._filter_data .dropdown-submenu > a:after {
  float: right;
  margin-right: -10px;
  margin-left: 0;
  border-width: 5px 0 5px 5px;
  border-left-color: #94a3b8;
  border-right-color: transparent;
}

.khozam-reminder-toolbar__toggle i {
  font-size: 14px;
}

html[dir="rtl"] .khozam-reminder-toolbar__date-field .form-control,
html[dir="rtl"] .khozam-reminder-toolbar__date-input {
  border-radius: 0 10px 10px 0 !important;
}

html[dir="rtl"] .khozam-reminder-toolbar__date-field .input-group-addon {
  border-radius: 10px 0 0 10px !important;
  border-inline-start: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-inline-end: 0 !important;
}

@media (max-width: 991px) {
  .khozam-reminder-toolbar {
    align-items: stretch;
  }

  .khozam-reminder-toolbar__filters {
    width: 100%;
    justify-content: flex-start;
  }

  .khozam-reminder-toolbar__dates {
    width: 100%;
  }

  .khozam-reminder-toolbar__date-field {
    max-width: none;
  }

  .khozam-reminder-page ._filter_data .dropdown-submenu > .dropdown-menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    float: none;
    width: 100%;
    margin: 4px 0 8px !important;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: rgba(246, 243, 239, 0.9);
  }

  .khozam-reminder-page ._filter_data .dropdown-submenu > a:after {
    display: none;
  }
}

@media (max-width: 575px) {
  .khozam-reminder-toolbar__dates {
    flex-direction: column;
    align-items: stretch;
  }

  .khozam-reminder-toolbar__tools {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ── Reminders page (التذكير): table ── */
.khozam-reminder-page .khozam-reminder-table {
  clear: both;
  margin-top: 0;
}

.khozam-reminder-page .khozam-reminder-table .panel_s {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  overflow: hidden;
  margin-bottom: 0 !important;
}

.khozam-reminder-page .khozam-reminder-table .panel-body {
  padding: 16px !important;
  background: #fff !important;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .table-responsive {
  margin-inline: 0 !important;
  padding-inline: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.06);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 44, 29, 0.22) rgba(248, 240, 224, 0.45);
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .table-responsive::-webkit-scrollbar {
  height: 8px;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(26, 44, 29, 0.22);
  border-radius: 999px;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .table-responsive::-webkit-scrollbar-track {
  background: rgba(248, 240, 224, 0.45);
  border-radius: 999px;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* DataTables dom starts with an empty row — hide it (was causing a blank cream bar) */
.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper > .row:first-child {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper > .row:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px !important;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(248, 240, 224, 0.35);
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"]:last-child {
  margin-inline-start: auto;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_length,
.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dt-buttons,
.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_filter {
  float: none !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_length label,
.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_filter label {
  color: #6f6475;
  font-weight: 500;
  margin-bottom: 0;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_length select,
.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_filter input {
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 8px !important;
  background: #fbf8f4 !important;
  min-height: 34px;
  color: var(--khozam-purple) !important;
}

.khozam-reminder-page .khozam-reminder-table .dt-buttons .btn,
.khozam-reminder-page .khozam-reminder-table .btn-default.buttons-collection,
.khozam-reminder-page .khozam-reminder-table .btn-default.buttons-page-length,
.khozam-reminder-page .khozam-reminder-table .btn-dt-reload {
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  color: var(--khozam-purple) !important;
  background: #fff !important;
  font-weight: 600;
  box-shadow: none !important;
}

.khozam-reminder-page .khozam-reminder-table .dt-buttons .btn:hover,
.khozam-reminder-page .khozam-reminder-table .btn-default.buttons-collection:hover,
.khozam-reminder-page .khozam-reminder-table .btn-default.buttons-page-length:hover,
.khozam-reminder-page .khozam-reminder-table .btn-dt-reload:hover {
  background: rgba(248, 240, 224, 0.72) !important;
  border-color: rgba(196, 168, 113, 0.35) !important;
  color: var(--khozam-purple) !important;
}

.khozam-reminder-page .table-reminder.dataTable {
  width: max-content !important;
  min-width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
}

.khozam-reminder-page .table-reminder.dataTable thead th {
  background: rgba(248, 240, 224, 0.72) !important;
  color: var(--khozam-purple) !important;
  border-color: rgba(26, 44, 29, 0.08) !important;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 12px !important;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.45;
}

.khozam-reminder-page .table-reminder.dataTable thead th:first-child,
.khozam-reminder-page .table-reminder.dataTable tbody td:first-child {
  min-width: 170px;
}

.khozam-reminder-page .table-reminder.dataTable tbody td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
  color: rgba(26, 44, 29, 0.88);
  border-color: rgba(26, 44, 29, 0.06) !important;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
}

.khozam-reminder-page .table-reminder.dataTable tbody tr:hover td {
  background: rgba(248, 240, 224, 0.42) !important;
}

.khozam-reminder-page .table-reminder.dataTable tbody tr.has-row-options td:first-child a {
  color: var(--khozam-purple);
  font-weight: 700;
}

.khozam-reminder-page .table-reminder.dataTable tbody tr.has-row-options td:first-child a:hover {
  color: var(--khozam-gold);
}

.khozam-reminder-page .table-reminder .row-options {
  margin-top: 4px;
  font-size: 12px;
}

.khozam-reminder-page .table-reminder .row-options a {
  color: rgba(26, 44, 29, 0.62);
  font-weight: 600;
}

.khozam-reminder-page .table-reminder .row-options a:hover {
  color: var(--khozam-gold);
}

.khozam-reminder-page .table-reminder .row-options a.text-danger {
  color: #c0392b !important;
}

.khozam-reminder-page .table-reminder .label {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}

.khozam-reminder-page .table-reminder .label-success {
  background: rgba(196, 168, 113, 0.18) !important;
  color: var(--khozam-purple) !important;
  border-color: rgba(196, 168, 113, 0.35) !important;
}

.khozam-reminder-page .table-reminder .label-warning {
  background: rgba(248, 240, 224, 0.9) !important;
  color: #8a5a24 !important;
  border-color: rgba(196, 168, 113, 0.28) !important;
}

.khozam-reminder-page .table-reminder .staff-profile-image-small {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  border: 2px solid rgba(196, 168, 113, 0.28);
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_info {
  color: rgba(26, 44, 29, 0.62);
  font-weight: 500;
  padding-top: 12px;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_paginate {
  padding-top: 8px;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  min-height: 34px;
  margin-inline: 2px;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--khozam-gold) !important;
  border-color: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(248, 240, 224, 0.72) !important;
  border-color: rgba(196, 168, 113, 0.35) !important;
  color: var(--khozam-purple) !important;
}

.khozam-reminder-page .khozam-reminder-table .dataTables_empty {
  padding: 28px 16px !important;
  color: rgba(26, 44, 29, 0.55);
  font-weight: 500;
}

[dir="rtl"] .khozam-reminder-page .khozam-reminder-table .dataTables_wrapper thead > tr > th:first-child,
[dir="rtl"] .khozam-reminder-page .khozam-reminder-table .dataTables_wrapper thead > tr > th:last-child {
  border-right: 1px solid rgba(26, 44, 29, 0.08) !important;
  border-left: 1px solid rgba(26, 44, 29, 0.08) !important;
}

[dir="rtl"] .khozam-reminder-page .table-reminder.dataTable thead th:first-child,
[dir="rtl"] .khozam-reminder-page .table-reminder.dataTable tbody td:first-child {
  padding-inline-start: 18px !important;
  padding-inline-end: 12px !important;
}

[dir="ltr"] .khozam-reminder-page .table-reminder.dataTable thead th:first-child,
[dir="ltr"] .khozam-reminder-page .table-reminder.dataTable tbody td:first-child {
  padding-inline-start: 12px !important;
  padding-inline-end: 18px !important;
}

@media (max-width: 767px) {
  .khozam-reminder-page .khozam-reminder-table .panel-body {
    padding: 12px !important;
  }

  .khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .table-responsive {
    padding-inline: 10px 12px;
  }

  .khozam-reminder-page .khozam-reminder-table .dataTables_wrapper > .row:nth-child(2) {
    flex-direction: column;
    align-items: stretch;
  }

  .khozam-reminder-page .khozam-reminder-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"]:last-child {
    margin-inline-start: 0;
    width: 100% !important;
  }

  .khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_filter {
    width: 100%;
  }

  .khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_filter label {
    width: 100%;
  }

  .khozam-reminder-page .khozam-reminder-table .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
  }

  .khozam-reminder-page .table-reminder.dataTable thead th,
  .khozam-reminder-page .table-reminder.dataTable tbody td {
    padding: 10px 12px !important;
    font-size: 12px;
  }
}

/* ── Sakani Leads import (استيراد سكني) ── */
.khozam-sakani-leads-page .content {
  max-width: 1180px;
  margin-inline: auto;
}

.khozam-sakani-leads__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-sakani-leads__hero-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 420px;
  min-width: 0;
}

.khozam-sakani-leads__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-sakani-leads__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 700;
}

.khozam-sakani-leads__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.55;
  max-width: 640px;
}

.khozam-sakani-leads__template-btn {
  flex-shrink: 0;
}

.khozam-sakani-leads__console,
.khozam-sakani-leads__guide {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09) !important;
  background: #fff !important;
  margin-bottom: 18px;
}

.khozam-sakani-leads__console-body,
.khozam-sakani-leads__guide-body {
  padding: 0 !important;
  background: #fbf8f4;
}

.khozam-sakani-leads__console-header,
.khozam-sakani-leads__guide-header {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.18);
}

.khozam-sakani-leads__console-title,
.khozam-sakani-leads__guide-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--khozam-cream);
  font-size: 14px;
  font-weight: 700;
}

.khozam-sakani-leads__console-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 15px;
}

.khozam-sakani-leads__console-subtitle {
  margin: 8px 0 0 42px;
  color: rgba(248, 240, 224, 0.72);
  font-size: 12px;
  line-height: 1.45;
}

[dir="ltr"] .khozam-sakani-leads__console-subtitle {
  margin-left: 42px;
  margin-right: 0;
}

.khozam-sakani-leads__console-content {
  padding: 16px;
}

.khozam-sakani-leads__upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 190px;
  padding: 28px 20px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 2px dashed rgba(26, 44, 29, 0.14);
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.khozam-sakani-leads__upload-zone:hover,
.khozam-sakani-leads__upload-zone.is-dragover {
  border-color: rgba(196, 168, 113, 0.55);
  background: rgba(248, 240, 224, 0.42);
}

.khozam-sakani-leads__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.khozam-sakani-leads__upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(248, 240, 224, 0.72);
  color: var(--khozam-purple);
  font-size: 24px;
}

.khozam-sakani-leads__upload-text {
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
}

.khozam-sakani-leads__upload-hint {
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
}

.khozam-sakani-leads__file-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-sakani-leads__file-meta > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-purple);
  font-size: 18px;
}

.khozam-sakani-leads__file-meta-copy {
  flex: 1;
  min-width: 0;
}

.khozam-sakani-leads__file-meta-copy strong {
  display: block;
  color: var(--khozam-purple);
  font-size: 13px;
  word-break: break-all;
}

.khozam-sakani-leads__file-meta-copy span {
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
}

.khozam-sakani-leads__file-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(26, 44, 29, 0.06);
  color: var(--khozam-purple);
  transition: background 0.2s ease;
}

.khozam-sakani-leads__file-clear:hover {
  background: rgba(196, 168, 113, 0.22);
}

.khozam-sakani-leads__actions {
  display: flex;
  justify-content: flex-start;
}

.khozam-sakani-leads__submit-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.28);
}

.khozam-sakani-leads__submit-btn:hover,
.khozam-sakani-leads__submit-btn:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
}

.khozam-sakani-leads__guide-body {
  padding: 16px !important;
}

.khozam-sakani-leads__guide-content {
  direction: inherit;
  text-align: start;
}

body[dir="rtl"] .khozam-sakani-leads__guide-content,
html[dir="rtl"] .khozam-sakani-leads__guide-content,
body.rtl .khozam-sakani-leads__guide-content {
  direction: rtl;
  text-align: right;
}

.khozam-sakani-leads__steps {
  margin: 0 0 16px;
  padding: 0;
  padding-inline-start: 1.4rem;
  list-style-position: outside;
  color: rgba(26, 44, 29, 0.82);
  line-height: 1.75;
  font-size: 13px;
}

.khozam-sakani-leads__guide-content .khozam-sakani-leads__steps {
  padding-inline-start: 1.4rem;
  padding-inline-end: 0;
}

.khozam-sakani-leads__steps li + li {
  margin-top: 8px;
}

.khozam-sakani-leads__tips {
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-sakani-leads__tips-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 700;
}

.khozam-sakani-leads__guide-content .khozam-sakani-leads__tips-title {
  justify-content: flex-start;
}

.khozam-sakani-leads__tips-title i {
  color: var(--khozam-gold);
}

.khozam-sakani-leads__tips ul {
  margin: 0;
  padding: 0 1.2rem 0 0;
  list-style-position: outside;
  color: rgba(26, 44, 29, 0.72);
  font-size: 13px;
  line-height: 1.65;
}

.khozam-sakani-leads__guide-content .khozam-sakani-leads__tips ul {
  padding-inline-start: 0;
  padding-inline-end: 1.2rem;
}

.khozam-sakani-leads__tips code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(248, 240, 224, 0.9);
  color: var(--khozam-purple);
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

.khozam-sakani-leads__ltr-inline {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

.khozam-sakani-leads__guide-content strong {
  font-weight: 700;
}

.khozam-sakani-leads__tips--warning {
  margin-top: 12px;
  background: rgba(248, 240, 224, 0.55);
  border-color: rgba(196, 168, 113, 0.28);
}

.khozam-sakani-leads__tips--warning .khozam-sakani-leads__tips-title {
  color: #8a5a24;
}

.khozam-sakani-leads__tips--warning .khozam-sakani-leads__tips-title i {
  color: #b7791f;
}

.khozam-sakani-items-page .khozam-sakani-leads__hero-icon i {
  font-size: 20px;
}

.khozam-sakani-leadsitems-page .khozam-sakani-leads__hero-icon i {
  font-size: 20px;
}

.khozam-sakani-leads__field {
  margin-bottom: 14px;
}

.khozam-sakani-leads__field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
}

.khozam-sakani-leads__select {
  min-height: 42px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
  box-shadow: none !important;
}

.khozam-sakani-leads__field-hint {
  display: block;
  margin-top: 6px;
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  line-height: 1.45;
}

.khozam-sakani-leads__status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.khozam-sakani-leads__status-pill--reserved {
  background: rgba(248, 240, 224, 0.95);
  color: #8a5a24;
  border: 1px solid rgba(196, 168, 113, 0.35);
}

.khozam-sakani-leads__status-pill--contracted {
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  border: 1px solid rgba(196, 168, 113, 0.35);
}

@media (max-width: 991px) {
  .khozam-sakani-leads__hero {
    align-items: stretch;
  }

  .khozam-sakani-leads__template-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .khozam-sakani-leads__upload-zone {
    min-height: 160px;
    padding: 22px 16px;
  }

  .khozam-sakani-leads__actions,
  .khozam-sakani-leads__submit-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Sakani Leads: hero flow chips + hero actions row ── */
.khozam-sakani-leads__hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.khozam-sakani-leads__flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.khozam-sakani-leads__flow-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.14);
  color: var(--khozam-cream);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.khozam-sakani-leads__flow-step i {
  color: var(--khozam-gold);
  font-size: 11px;
}

.khozam-sakani-leads__flow-arrow {
  color: rgba(248, 240, 224, 0.4);
  font-size: 13px;
}

/* ── "What happens after upload" section ── */
.khozam-sakani-leads__after {
  border: 0 !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(26, 44, 29, 0.07) !important;
  background: #fff !important;
  margin-bottom: 18px;
}

.khozam-sakani-leads__after-body {
  padding: 14px 16px !important;
  background: #fbf8f4;
}

.khozam-sakani-leads__after-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 700;
}

.khozam-sakani-leads__after-title i {
  color: var(--khozam-gold);
}

.khozam-sakani-leads__after-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.khozam-sakani-leads__after-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 600;
}

.khozam-sakani-leads__after-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.khozam-sakani-leads__after-chip--match .khozam-sakani-leads__after-dot     { background: #2e7d32; }
.khozam-sakani-leads__after-chip--mismatch .khozam-sakani-leads__after-dot  { background: #c4a871; }
.khozam-sakani-leads__after-chip--notfound .khozam-sakani-leads__after-dot  { background: #c0392b; }

/* ── Numbered step cards (replaces plain <ol>) ── */
.khozam-sakani-leads__steps-cards {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.khozam-sakani-leads__steps-cards li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.07);
  color: rgba(26, 44, 29, 0.82);
  font-size: 13px;
  line-height: 1.55;
}

.khozam-sakani-leads__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-gold);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.khozam-sakani-leads__step-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.6;
}

.khozam-sakani-leads__step-body > i {
  color: var(--khozam-gold);
  margin-top: 3px;
  font-size: 13px;
}

/* ── Test Mode toggle switch ── */
.khozam-sakani-test-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 5px 10px 5px 6px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.12);
  border: 1px solid rgba(248, 240, 224, 0.18);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.khozam-sakani-test-switch:hover {
  background: rgba(248, 240, 224, 0.2);
}

.khozam-sakani-test-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.khozam-sakani-test-switch__track {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-inline-start: 44px;
  min-height: 26px;
  color: var(--khozam-cream);
}

.khozam-sakani-test-switch__thumb {
  position: absolute;
  inset-inline-start: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(248, 240, 224, 0.85);
  transition: transform 0.22s ease, inset-inline-start 0.22s ease, background 0.22s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.khozam-sakani-test-switch__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.khozam-sakani-test-switch__label i {
  color: var(--khozam-gold);
  font-size: 12px;
}

.khozam-sakani-test-switch input:checked + .khozam-sakani-test-switch__track {
  background: rgba(196, 168, 113, 0.28);
}

.khozam-sakani-test-switch input:checked + .khozam-sakani-test-switch__track .khozam-sakani-test-switch__thumb {
  inset-inline-start: auto;
  inset-inline-end: 3px;
  background: var(--khozam-gold);
}

/* ── Test Mode banner (shared upload + results) ── */
.khozam-sakani-test-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff8e8 0%, #fdf3d8 100%);
  border: 1px solid rgba(196, 168, 113, 0.45);
  color: #6b4a16;
  font-size: 13px;
  font-weight: 600;
  animation: sakaniFadeIn 0.25s ease;
}

.khozam-sakani-test-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(196, 168, 113, 0.25);
  color: #8a5a24;
  font-size: 16px;
  flex-shrink: 0;
}

.khozam-sakani-test-banner__text {
  line-height: 1.5;
}

@keyframes sakaniFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── TEST badge on results title ── */
.khozam-sakani-test-badge {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: 10px;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--khozam-gold);
  color: var(--khozam-purple);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ── Floating test-mode pill (results page) ── */
.khozam-sakani-test-pill {
  position: fixed;
  bottom: 18px;
  inset-inline-end: 18px;
  z-index: 1031;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  background: var(--khozam-purple);
  color: var(--khozam-cream);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.khozam-sakani-test-pill > i {
  color: var(--khozam-gold);
}

.khozam-sakani-test-pill__off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(248, 240, 224, 0.16);
  color: var(--khozam-cream);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.khozam-sakani-test-pill__off:hover {
  background: rgba(196, 168, 113, 0.35);
  color: var(--khozam-gold);
}

/* ── Dry-run preview modal ── */
.khozam-sakani-preview-modal {
  border-radius: 16px;
  overflow: hidden;
  border: 0;
}

.khozam-sakani-preview-modal__header {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.25);
  color: var(--khozam-cream);
}

.khozam-sakani-preview-modal__header .modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--khozam-cream);
  font-size: 16px;
  font-weight: 700;
}

.khozam-sakani-preview-modal__header .modal-title > i {
  color: var(--khozam-gold);
}

.khozam-sakani-preview-modal__header .close {
  color: var(--khozam-cream);
  opacity: 0.8;
  text-shadow: none;
}

.khozam-sakani-preview-modal__body {
  padding: 18px 20px;
  background: #fbf8f4;
  max-height: 60vh;
  overflow-y: auto;
}

.khozam-sakani-preview-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-sakani-preview-modal__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8a5a24;
  font-size: 12px;
  font-weight: 600;
}

.khozam-sakani-preview-modal__note i {
  color: var(--khozam-gold);
}

.khozam-sakani-preview__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.khozam-sakani-preview__alert--success { background: #e7f4e8; color: #1b5e20; border: 1px solid #a5d6a7; }
.khozam-sakani-preview__alert--info    { background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9; }
.khozam-sakani-preview__alert--warning { background: #fff8e8; color: #6b4a16; border: 1px solid rgba(196,168,113,0.45); }
.khozam-sakani-preview__alert > i { margin-top: 2px; flex-shrink: 0; }

.khozam-sakani-preview__sub {
  margin: 0 0 10px;
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 700;
}

.khozam-sakani-preview__table {
  margin: 0 0 10px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  font-size: 12.5px;
}

.khozam-sakani-preview__table th {
  background: var(--khozam-purple);
  color: var(--khozam-cream);
  font-weight: 700;
  font-size: 12px;
  border: 0;
  padding: 8px 10px;
}

.khozam-sakani-preview__table td {
  border-color: rgba(26, 44, 29, 0.07);
  padding: 8px 10px;
  vertical-align: middle;
  color: var(--khozam-purple);
}

.khozam-sakani-preview__old {
  color: rgba(26, 44, 29, 0.5);
  text-decoration: line-through;
  word-break: break-word;
}

.khozam-sakani-preview__new {
  color: #1b5e20;
  font-weight: 700;
  word-break: break-word;
}

.khozam-sakani-preview__item {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.07);
}

.khozam-sakani-preview__item--err {
  background: #fdecea;
  border-color: #f5c6cb;
  color: #721c1d;
  font-size: 13px;
}

.khozam-sakani-preview__item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--khozam-purple);
}

.khozam-sakani-preview__item-head .badge {
  font-size: 11px;
}

.khozam-sakani-preview__muted {
  color: rgba(26, 44, 29, 0.5);
  font-size: 12px;
}

.khozam-sakani-preview__mini {
  margin: 0;
  background: #fbf8f4;
  font-size: 12px;
}

.khozam-sakani-preview__mini td {
  padding: 6px 8px;
  border-color: rgba(26, 44, 29, 0.05);
}

.khozam-sakani-preview__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 30px 0;
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 600;
}

.khozam-sakani-preview__loading i {
  color: var(--khozam-gold);
}

@media (max-width: 767px) {
  .khozam-sakani-leads__hero-actions {
    align-items: stretch;
    width: 100%;
  }

  .khozam-sakani-test-switch {
    justify-content: center;
  }

  .khozam-sakani-leads__flow {
    gap: 4px;
  }

  .khozam-sakani-leads__flow-arrow {
    display: none;
  }

  .khozam-sakani-preview-modal__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .khozam-sakani-test-pill {
    bottom: 12px;
    inset-inline-end: 12px;
    font-size: 11px;
  }
}

/* ── Sakani Leads comparison results ── */
.khozam-sakani-results-page .content {
  max-width: 1280px;
}

.khozam-sakani-results__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.khozam-sakani-results__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  background: #fff;
  text-align: start;
  box-shadow: 0 6px 18px rgba(26, 44, 29, 0.06);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.khozam-sakani-results__stat:hover,
.khozam-sakani-results__stat.is-active {
  border-color: rgba(196, 168, 113, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(26, 44, 29, 0.1);
}

.khozam-sakani-results__stat-label {
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  font-weight: 700;
}

.khozam-sakani-results__stat-value {
  color: var(--khozam-purple);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.khozam-sakani-results__stat--match .khozam-sakani-results__stat-value {
  color: #1f7a45;
}

.khozam-sakani-results__stat--mismatch .khozam-sakani-results__stat-value {
  color: #9a6b14;
}

.khozam-sakani-results__stat--not-found .khozam-sakani-results__stat-value {
  color: #b42318;
}

.khozam-sakani-results__panel .khozam-sakani-leads__console-body {
  padding-bottom: 0 !important;
}

.khozam-sakani-results__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-sakani-results__select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.khozam-sakani-results__select-all em {
  font-style: normal;
  color: rgba(26, 44, 29, 0.5);
  font-weight: 500;
}

.khozam-sakani-results__bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-sakani-results__btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 14px !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.khozam-sakani-results__btn--success {
  background: #1f7a45 !important;
  color: #fff !important;
}

.khozam-sakani-results__btn--gold {
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
}

.khozam-sakani-results__btn--warning {
  background: #c9871a !important;
  color: #fff !important;
}

.khozam-sakani-results__btn--ghost {
  background: rgba(26, 44, 29, 0.06) !important;
  color: var(--khozam-purple) !important;
}

.khozam-sakani-results__table-wrap {
  padding: 0 0 8px;
  overflow-x: auto;
  background: #fbf8f4;
}

.khozam-sakani-results__table {
  margin: 0 !important;
  background: transparent;
}

.khozam-sakani-results__table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3eee7 !important;
  color: var(--khozam-purple) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(26, 44, 29, 0.08) !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  padding: 12px 14px !important;
}

.khozam-sakani-results__table > tbody > tr > td {
  border-color: rgba(26, 44, 29, 0.06) !important;
  vertical-align: top !important;
  padding: 14px !important;
  background: #fff;
  font-size: 13px;
}

.khozam-sakani-results__col-check {
  width: 42px;
}

.khozam-sakani-results__col-row {
  width: 48px;
}

.khozam-sakani-results__col-actions {
  width: 140px;
}

.khozam-sakani-results__row--match > td {
  background: rgba(31, 122, 69, 0.05) !important;
}

.khozam-sakani-results__row--mismatch > td {
  background: rgba(201, 135, 26, 0.07) !important;
}

.khozam-sakani-results__row--not-found > td {
  background: rgba(180, 35, 24, 0.05) !important;
}

.khozam-sakani-results__row--selected > td {
  box-shadow: inset 0 0 0 1px rgba(196, 168, 113, 0.55);
}

.khozam-sakani-results__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.khozam-sakani-results__badge--match {
  background: rgba(31, 122, 69, 0.12);
  color: #1f7a45;
}

.khozam-sakani-results__badge--mismatch {
  background: rgba(201, 135, 26, 0.14);
  color: #9a6b14;
}

.khozam-sakani-results__badge--not-found {
  background: rgba(180, 35, 24, 0.1);
  color: #b42318;
}

.khozam-sakani-results__badge--info {
  background: rgba(23, 92, 140, 0.1);
  color: #175c8c;
}

.khozam-sakani-results__row--info > td {
  background: rgba(23, 92, 140, 0.04);
}

.khozam-sakani-results__stat--action .khozam-sakani-results__stat-value {
  color: #9a6b14;
}

.khozam-sakani-results__unit-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
}

.khozam-sakani-results__progress .progress {
  height: 22px;
  margin-bottom: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(26, 44, 29, 0.06);
}

.khozam-sakani-results__progress .progress-bar {
  background: linear-gradient(90deg, #c4862f, #c4a871);
  line-height: 22px;
  font-size: 12px;
  font-weight: 700;
}

.khozam-sakani-results__diffs {
  margin: 10px 0 0;
  padding: 0 1.1rem 0 0;
  list-style: disc;
  color: #8a5a24;
  font-size: 12px;
  line-height: 1.55;
}

.khozam-sakani-results__dl {
  margin: 0;
  display: grid;
  gap: 6px;
}

.khozam-sakani-results__dl > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.khozam-sakani-results__dl dt {
  margin: 0;
  color: rgba(26, 44, 29, 0.5);
  font-size: 11px;
  font-weight: 700;
}

.khozam-sakani-results__dl dd {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 13px;
  word-break: break-word;
}

.khozam-sakani-results__empty-db,
.khozam-sakani-results__empty-row td {
  color: rgba(26, 44, 29, 0.45);
  font-size: 13px;
}

.khozam-sakani-results__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  white-space: normal;
}

.khozam-sakani-results__modal .checkbox {
  min-height: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 0;
}

.khozam-sakani-results__modal .checkbox label {
  cursor: pointer;
  display: block;
  padding: 0;
  min-height: 20px;
  line-height: 20px;
  font-weight: normal;
}

.khozam-sakani-results__modal .checkbox input[type="checkbox"] {
  position: static;
  display: inline-block;
  opacity: 1;
  width: 18px;
  height: 18px;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 0 0 5px;
}

.khozam-sakani-results__badge--invalid {
  background: rgba(26, 44, 29, 0.08);
  color: rgba(26, 44, 29, 0.55);
}

.khozam-sakani-results__row--invalid > td {
  background: rgba(26, 44, 29, 0.03) !important;
}

.khozam-sakani-results__hint {
  margin-top: 8px;
  color: rgba(26, 44, 29, 0.5);
  font-size: 12px;
  line-height: 1.45;
}

.khozam-sakani-results__hint--ok {
  color: #1f7a45;
}

.khozam-sakani-results__bulk-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 500;
  cursor: pointer;
}

.khozam-sakani-items-fields {
  display: grid;
  gap: 4px;
}

.khozam-sakani-items-fields__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

.khozam-sakani-items-fields__row:has(input) {
  grid-template-columns: 18px 96px minmax(0, 1fr);
}

.khozam-sakani-items-fields__row.is-diff {
  background: rgba(201, 135, 26, 0.12);
}

.khozam-sakani-items-fields__label {
  color: rgba(26, 44, 29, 0.5);
  font-size: 11px;
  font-weight: 700;
}

.khozam-sakani-items-fields__value {
  color: var(--khozam-purple);
  font-size: 13px;
  word-break: break-word;
}

.khozam-sakani-items-results-page .khozam-sakani-results__dl > div {
  grid-template-columns: 110px minmax(0, 1fr);
}

@media (max-width: 991px) {
  .khozam-sakani-results__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .khozam-sakani-results__stats {
    grid-template-columns: 1fr 1fr;
  }

  .khozam-sakani-results__toolbar {
    align-items: stretch;
  }

  .khozam-sakani-results__bulk-actions,
  .khozam-sakani-results__bulk-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .khozam-sakani-results__dl > div {
    grid-template-columns: 72px minmax(0, 1fr);
  }
}

/* ── Tasks page (المهام) ── */
/* Flex stack = same hero→toolbar gap in list AND kanban (no sticky / no float gaps) */
.khozam-tasks-page > .content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding-top: 12px !important;
  padding-bottom: 20px !important;
}

.khozam-tasks-page > .content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.khozam-tasks-page__hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  margin: 0 !important;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-tasks-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-tasks-page__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 700;
}

.khozam-tasks-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

/* Never sticky — sticky + kanban height JS was shoving the bar down */
.khozam-tasks-page .khozam-tasks-toolbar-panel,
.khozam-tasks-page.is-kanban .khozam-tasks-toolbar-panel,
.khozam-tasks-page.is-table-view .khozam-tasks-toolbar-panel,
.khozam-tasks-page .khozam-tasks-toolbar-panel.panel_s,
body.kan-ban-body .khozam-tasks-page .khozam-tasks-toolbar-panel.panel_s {
  position: static !important;
  top: auto !important;
  z-index: 5;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
}

.khozam-tasks-toolbar-panel__body {
  padding: 12px 14px !important;
  background: #fff !important;
}

.khozam-tasks-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.khozam-tasks-toolbar__primary,
.khozam-tasks-toolbar__tools {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-tasks-toolbar__tools {
  margin-inline-start: auto;
}

.khozam-tasks-view-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.72);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: #1a2c1d;
  font-size: 12px;
  font-weight: 700;
}
.khozam-tasks-view-badge i { color: #d68910; }

.khozam-tasks-summary {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.06);
}
.khozam-tasks-summary__head {
  margin-bottom: 12px;
}
.khozam-tasks-summary__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: var(--khozam-purple) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.khozam-tasks-summary__title i {
  color: var(--khozam-gold);
}
.khozam-tasks-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.khozam-tasks-summary__chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-inline-start: 4px solid var(--task-status-color, #8a7f78);
}
.khozam-tasks-summary__chip strong {
  font-size: 20px;
  font-weight: 800;
  color: #1a2c1d;
  line-height: 1.1;
}
.khozam-tasks-summary__chip-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--task-status-color, #1a2c1d);
}
.khozam-tasks-summary__chip small {
  font-size: 11px;
  color: #6b6470;
  font-weight: 500;
}

.khozam-tasks-toolbar__tools #vueApp,
.khozam-tasks-toolbar__filters {
  float: none !important;
  margin: 0 !important;
}

.khozam-tasks-toolbar__search {
  min-width: 220px;
}

.khozam-tasks-toolbar__search .form-group,
.khozam-tasks-toolbar__search-input.form-group {
  margin: 0 !important;
}

.khozam-tasks-toolbar__search-input .form-control {
  min-height: 38px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 10px !important;
  background: #fbf8f4 !important;
}

.khozam-tasks-table-panel,
.khozam-tasks-kanban-panel {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  overflow: hidden;
}

.khozam-tasks-table-panel__body,
.khozam-tasks-kanban-panel__body {
  padding: 16px !important;
  background: #fff !important;
}

.khozam-tasks-toolbar__filters,
.khozam-tasks-toolbar__filters#vueApp {
  display: inline-flex;
  align-items: center;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.khozam-tasks-toolbar__filters .btn-group,
.khozam-tasks-toolbar__filters#vueApp .btn-group {
  float: none !important;
  margin: 0 !important;
}

.khozam-tasks-toolbar__filters .btn-default.dropdown-toggle,
.khozam-tasks-toolbar__filters#vueApp .btn-default.dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  min-width: 38px;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.08) !important;
}

.khozam-tasks-toolbar__filters .btn-default.dropdown-toggle.active,
.khozam-tasks-toolbar__filters#vueApp .btn-default.dropdown-toggle.active {
  background: rgba(248, 240, 224, 0.85) !important;
  border-color: rgba(196, 168, 113, 0.45) !important;
}

.khozam-tasks-toolbar__filters .btn-default.dropdown-toggle:hover,
.khozam-tasks-toolbar__filters .btn-default.dropdown-toggle:focus,
.khozam-tasks-toolbar__filters#vueApp .btn-default.dropdown-toggle:hover,
.khozam-tasks-toolbar__filters#vueApp .btn-default.dropdown-toggle:focus {
  background: rgba(248, 240, 224, 0.72) !important;
  border-color: rgba(196, 168, 113, 0.35) !important;
  color: var(--khozam-purple) !important;
}

.khozam-tasks-summary__title {
  color: var(--khozam-purple) !important;
  margin: 0 !important;
}

.khozam-tasks-summary__title svg {
  color: var(--khozam-gold) !important;
}

.khozam-tasks-page .table-tasks.dataTable tbody tr.khozam-task-row:hover td {
  background: rgba(248, 240, 224, 0.42) !important;
}

.khozam-task-empty { color: #b3a9b8; font-weight: 500; }
.khozam-task-id {
  font-weight: 700;
  color: #1a2c1d !important;
  text-decoration: none !important;
}
.khozam-task-name {
  min-width: 180px;
}
.khozam-task-name__timer {
  display: inline-flex;
  margin-inline-end: 6px;
}
.khozam-task-name__link {
  display: inline-block;
  font-weight: 700;
  color: #1a2c1d !important;
  text-decoration: none !important;
  line-height: 1.35;
}
.khozam-task-name__link:hover { color: #d68910 !important; }
.khozam-task-name__related {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #6b6470 !important;
  text-decoration: none !important;
}
.khozam-task-name__related:hover { color: #1a2c1d !important; }
.khozam-task-recurring {
  display: inline-flex;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(42, 111, 151, 0.12);
  color: #2a6f97;
  font-size: 11px;
  font-weight: 700;
}
.khozam-task-name__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 4px;
  opacity: 0.85;
}
.khozam-task-name__actions a {
  font-size: 11px;
  font-weight: 600;
  color: #6b6470;
  text-decoration: none;
}
.khozam-task-name__actions a:hover { color: #1a2c1d; }
.khozam-tasks-page tr:hover .khozam-task-name__actions { opacity: 1; }
.khozam-task-date { font-weight: 600; color: #1a2c1d; }
.khozam-task-date--overdue { color: #c0392b; }
.khozam-task-status {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 700 !important;
}
.khozam-task-priority { font-weight: 700; }

/* Kanban board — never push toolbar; spacing comes from .content gap only */
.khozam-tasks-page .khozam-tasks-summary,
.khozam-tasks-page.is-kanban .khozam-tasks-summary,
.khozam-tasks-page.is-table-view .khozam-tasks-summary {
  margin: 0 !important;
}
.khozam-tasks-page .khozam-tasks-kanban-panel,
.khozam-tasks-page .khozam-tasks-table-panel,
.khozam-tasks-page .khozam-tasks-kanban-panel.panel_s,
.khozam-tasks-page .khozam-tasks-table-panel.panel_s,
body.kan-ban-body .khozam-tasks-page .panel_s {
  margin: 0 !important;
}
.khozam-tasks-kanban-panel__body {
  padding: 12px !important;
  background: #fff !important;
}
.khozam-tasks-kanban-board,
.khozam-tasks-page #kan-ban-tab {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.khozam-tasks-page #kan-ban.khozam-tasks-kanban-board__track,
.khozam-tasks-page #kan-ban {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto;
  overflow-y: visible;
}
.khozam-tasks-page #kan-ban::before,
.khozam-tasks-page #kan-ban::after {
  display: none !important;
  content: none !important;
}
.khozam-tasks-page #kan-ban .kan-ban-col,
.khozam-tasks-page .khozam-tasks-kanban-col {
  float: none !important;
  display: flex !important;
  flex: 0 0 280px;
  width: 280px !important;
  max-width: 280px;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
}
.khozam-tasks-page .khozam-tasks-kanban-col__wrapper {
  width: 100%;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.khozam-tasks-page .khozam-tasks-kanban-col__panel {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: #f8f6f2 !important;
  box-shadow: 0 8px 20px rgba(26, 44, 29, 0.06);
}
.khozam-tasks-page .khozam-tasks-kanban-col__content-wrap,
.khozam-tasks-page.is-kanban .kan-ban-content-wrapper {
  max-height: min(60vh, 560px) !important;
  height: auto !important;
  min-height: 120px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.khozam-tasks-page .khozam-tasks-kanban-col__content,
.khozam-tasks-page.is-kanban .kan-ban-content {
  min-height: 120px !important;
  height: auto !important;
}
.khozam-tasks-page .khozam-tasks-kanban-col__heading.panel-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  order: 0 !important;
  flex: 0 0 auto !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.khozam-tasks-page .khozam-tasks-kanban-col__heading-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.khozam-tasks-page .khozam-tasks-kanban-col__status {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff !important;
}
.khozam-tasks-page .khozam-tasks-kanban-col__status .label,
.khozam-tasks-page .khozam-tasks-kanban-col__status span {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.khozam-tasks-page .khozam-tasks-kanban-col__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.khozam-tasks-page .khozam-tasks-kanban-col__count-label {
  font-size: 11px;
  opacity: 0.85;
  font-weight: 600;
  color: #fff;
}
.khozam-tasks-page .khozam-tasks-kanban-col__content-wrap,
.khozam-tasks-page.is-kanban .kan-ban-content-wrapper {
  order: 1 !important;
  flex: 1 1 auto !important;
  max-height: 58vh !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  word-break: break-word;
}
.khozam-tasks-page .khozam-tasks-kanban-col__content,
.khozam-tasks-page.is-kanban .kan-ban-content {
  background: transparent !important;
  padding: 10px !important;
  min-height: 120px !important;
  height: auto !important;
  max-height: none !important;
}
.khozam-tasks-page .khozam-tasks-kanban-col__list {
  min-height: 80px;
  margin: 0 !important;
  padding: 0 !important;
}
.khozam-tasks-page #kan-ban .panel-body.khozam-task-card__body,
.khozam-tasks-page .khozam-task-card .khozam-task-card__body {
  border-radius: 12px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.06);
  background: #fff !important;
  padding: 12px 14px !important;
  margin: 0 0 10px !important;
}
.khozam-task-card__title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a2c1d !important;
  text-decoration: none !important;
  line-height: 1.4;
}
.khozam-task-card__title:hover { color: #d68910 !important; }
.khozam-task-card__related {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #6b6470 !important;
  text-decoration: none !important;
}
.khozam-task-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.khozam-task-card__counts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b6470;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.khozam-task-card__due {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #6b6470;
}
.khozam-task-card__due.is-overdue { color: #c0392b; }
.khozam-task-card__tags { margin-top: 8px; }
.khozam-task-card.overdue-task .khozam-task-card__body {
  border-color: rgba(192, 57, 43, 0.28) !important;
}
.khozam-tasks-page .khozam-tasks-kanban-col__empty {
  margin: 18px 4px !important;
  padding: 16px 12px;
  border: 1px dashed rgba(26, 44, 29, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  color: #6b6470;
}
.khozam-tasks-page .khozam-tasks-kanban-col__empty i {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
  color: #d68910;
}
.khozam-tasks-page .khozam-tasks-kanban-col__empty h4,
.khozam-tasks-page .khozam-tasks-kanban-col__empty p {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b6470;
}
.khozam-tasks-page .khozam-tasks-kanban-col__load-more {
  margin-top: 4px;
}
.khozam-tasks-page .khozam-tasks-kanban-col__load-more .btn {
  justify-content: center;
  min-height: 36px;
}

@media (max-width: 991px) {
  .khozam-tasks-toolbar-panel { position: static; }
}

@media (max-width: 767px) {
  .khozam-tasks-page__hero { padding: 14px; }
  .khozam-tasks-summary,
  .khozam-tasks-table-panel__body,
  .khozam-tasks-kanban-panel__body {
    padding: 12px !important;
  }
  .khozam-tasks-page #kan-ban .kan-ban-col,
  .khozam-tasks-page .khozam-tasks-kanban-col {
    flex-basis: 260px;
    width: 260px !important;
    max-width: 260px;
  }
}

.khozam-tasks-page .panel-table-full,
.khozam-tasks-page .khozam-tasks-table {
  clear: both;
  margin-top: 0;
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .table-responsive {
  margin-inline: 0 !important;
  padding-inline: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.06);
  overflow-x: auto;
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper > .row:first-child {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper > .row:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px !important;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(248, 240, 224, 0.35);
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"]:last-child {
  margin-inline-start: auto;
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_length,
.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dt-buttons,
.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_filter {
  float: none !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_length label,
.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_filter label {
  color: #6f6475;
  font-weight: 500;
  margin-bottom: 0;
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_length select,
.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_filter input {
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 8px !important;
  background: #fbf8f4 !important;
  min-height: 34px;
  color: var(--khozam-purple) !important;
}

.khozam-tasks-page .khozam-tasks-table .dt-buttons .btn,
.khozam-tasks-page .khozam-tasks-table .btn-default.buttons-collection,
.khozam-tasks-page .khozam-tasks-table .btn-default.buttons-page-length,
.khozam-tasks-page .khozam-tasks-table .btn-dt-reload {
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  color: var(--khozam-purple) !important;
  background: #fff !important;
  font-weight: 600;
  box-shadow: none !important;
}

.khozam-tasks-page .table-tasks.dataTable {
  width: max-content !important;
  min-width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.khozam-tasks-page .table-tasks.dataTable thead th {
  background: rgba(248, 240, 224, 0.72) !important;
  color: var(--khozam-purple) !important;
  border-color: rgba(26, 44, 29, 0.08) !important;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 12px !important;
  vertical-align: middle;
  white-space: nowrap;
}

.khozam-tasks-page .table-tasks.dataTable tbody td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
  color: rgba(26, 44, 29, 0.88);
  border-color: rgba(26, 44, 29, 0.06) !important;
  font-size: 13px;
}

.khozam-tasks-page .table-tasks.dataTable tbody tr:hover td {
  background: rgba(248, 240, 224, 0.42) !important;
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_info {
  color: rgba(26, 44, 29, 0.62);
  font-weight: 500;
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  min-height: 34px;
  margin-inline: 2px;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
}

.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--khozam-gold) !important;
  border-color: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
}

.khozam-tasks-page .khozam-tasks-kanban-panel #kan-ban-tab {
  overflow: visible;
}

.khozam-tasks-page .khozam-tasks-kanban-panel .kan-ban-col {
  border-radius: 14px;
}

[dir="rtl"] .khozam-tasks-page .table-tasks.dataTable thead th:first-child,
[dir="rtl"] .khozam-tasks-page .table-tasks.dataTable tbody td:first-child {
  padding-inline-start: 18px !important;
  padding-inline-end: 12px !important;
}

@media (max-width: 991px) {
  .khozam-tasks-toolbar-panel,
  .khozam-tasks-summary-panel {
    position: static;
  }

  .khozam-tasks-toolbar__tools {
    width: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .khozam-tasks-toolbar__primary,
  .khozam-tasks-toolbar__tools {
    width: 100%;
  }

  .khozam-tasks-toolbar__search {
    width: 100%;
    min-width: 0;
  }

  .khozam-tasks-page .khozam-tasks-table .dataTables_wrapper > .row:nth-child(2) {
    flex-direction: column;
    align-items: stretch;
  }

  .khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_filter {
    width: 100%;
  }

  .khozam-tasks-page .khozam-tasks-table .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
  }
}

/* ── Tickets page (الدعم) ── */
.khozam-tickets-page > .content {
  padding-top: 12px !important;
}

.khozam-tickets-page > .content > #vueApp > .row:first-child {
  margin-top: 0 !important;
}

.khozam-tickets-page__hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-tickets-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-tickets-page__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 700;
}

.khozam-tickets-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.khozam-tickets-toolbar-panel {
  position: sticky;
  top: var(--khozam-header-height);
  z-index: 25;
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  margin-bottom: 16px;
}

.khozam-tickets-page .khozam-tickets-toolbar-panel__body,
.khozam-tickets-page .khozam-tickets-table-panel__body {
  padding: 12px 14px !important;
  background: #fff !important;
  direction: inherit;
  text-align: start;
}

.khozam-tickets-page .khozam-tickets-table-panel__body {
  padding: 16px !important;
}

.khozam-tickets-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.khozam-tickets-toolbar__primary,
.khozam-tickets-toolbar__tools {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-tickets-toolbar__tools {
  margin-inline-start: auto;
}

.khozam-tickets-toolbar__tools app-filters,
.khozam-tickets-toolbar__tools .btn-group {
  float: none !important;
  margin: 0 !important;
}

.khozam-tickets-toolbar__tools app-filters .btn-default.dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  min-width: 38px;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.08) !important;
}

.khozam-tickets-toolbar__tools app-filters .btn-default.dropdown-toggle.active {
  background: rgba(248, 240, 224, 0.85) !important;
  border-color: rgba(196, 168, 113, 0.45) !important;
}

.khozam-tickets-summary {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.06);
}

.khozam-tickets-summary__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.khozam-tickets-summary__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--khozam-purple) !important;
  margin: 0 !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.khozam-tickets-summary__title i,
.khozam-tickets-summary__title svg {
  color: var(--khozam-gold) !important;
}

.khozam-tickets-summary__total {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.72);
  border: 1px solid rgba(196, 168, 113, 0.28);
}

.khozam-tickets-summary__total-label {
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 600;
}

.khozam-tickets-summary__total-value {
  color: var(--khozam-purple);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.khozam-tickets-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.khozam-tickets-summary__chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-inline-start: 4px solid var(--ticket-status-color, var(--khozam-gold));
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.khozam-tickets-summary__chip:hover,
.khozam-tickets-summary__chip:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(26, 44, 29, 0.1);
  border-color: rgba(196, 168, 113, 0.35);
  background: #fff;
}

.khozam-tickets-summary__chip strong {
  font-size: 20px;
  font-weight: 800;
  color: #1a2c1d;
  line-height: 1.1;
}

.khozam-tickets-summary__chip span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ticket-status-color, #1a2c1d);
}

.khozam-tickets-table-panel {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  overflow: hidden;
}

.khozam-tickets-chart {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(248, 240, 224, 0.35);
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-tickets-chart__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--khozam-purple);
  font-size: 16px;
  font-weight: 700;
}

.khozam-tickets-chart__title i {
  color: var(--khozam-gold);
}

.khozam-tickets-chart__canvas-wrap {
  position: relative;
  max-height: 350px;
}

.khozam-ticket-id {
  display: inline-flex;
  align-items: center;
  color: var(--khozam-purple) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.khozam-ticket-subject {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 180px;
}

.khozam-ticket-subject__assignee {
  flex-shrink: 0;
  margin-top: 2px;
}

.khozam-ticket-subject__avatar {
  border-radius: 50% !important;
}

.khozam-ticket-subject__body {
  min-width: 0;
}

.khozam-ticket-subject__link {
  display: inline-block;
  color: var(--khozam-purple) !important;
  font-weight: 700;
  text-decoration: none !important;
  line-height: 1.35;
}

.khozam-ticket-subject__link:hover {
  color: #d68910 !important;
}

.khozam-ticket-subject__actions {
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.khozam-ticket-subject__actions a {
  font-size: 12px;
  margin-inline-end: 10px;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-ticket-subject__actions a:hover {
  color: var(--khozam-purple);
}

.khozam-tickets-page tr:hover .khozam-ticket-subject__actions {
  opacity: 1;
}

.khozam-ticket-contact {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none !important;
  max-width: 220px;
}

.khozam-ticket-contact__name {
  color: var(--khozam-purple) !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
}

.khozam-ticket-contact__company {
  color: rgba(26, 44, 29, 0.55);
  font-size: 11px;
  font-weight: 500;
}

.khozam-ticket-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

.khozam-ticket-priority {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.72);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
}

.khozam-ticket-date {
  color: rgba(26, 44, 29, 0.7);
  font-size: 12px;
  white-space: nowrap;
}

.khozam-ticket-muted,
.khozam-ticket-empty {
  color: rgba(26, 44, 29, 0.35);
}

.khozam-tickets-page .table-tickets.dataTable tbody tr.khozam-ticket-row--unread td {
  font-weight: 600;
  background: rgba(220, 53, 69, 0.04);
}

.khozam-tickets-page .table-tickets.dataTable tbody tr.khozam-ticket-row--unread td:first-child {
  box-shadow: inset 3px 0 0 #dc3545;
}

[dir="rtl"] .khozam-tickets-page .table-tickets.dataTable tbody tr.khozam-ticket-row--unread td:first-child {
  box-shadow: inset -3px 0 0 #dc3545;
}

.khozam-tickets-page .table-tickets.dataTable tbody tr.khozam-ticket-row--unread:hover td {
  background: rgba(220, 53, 69, 0.08) !important;
}

.khozam-tickets-settings-table__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--khozam-purple) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.khozam-tickets-settings-table__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.khozam-tickets-settings-table__meta {
  margin-top: 4px;
  color: rgba(26, 44, 29, 0.58);
  font-size: 12px;
}

.khozam-tickets-settings-table__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.khozam-tickets-settings-table__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  background: #fff;
  color: rgba(26, 44, 29, 0.62);
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.khozam-tickets-settings-table__action:hover,
.khozam-tickets-settings-table__action:focus {
  background: rgba(248, 240, 224, 0.72);
  color: var(--khozam-purple);
  border-color: rgba(196, 168, 113, 0.35);
}

.khozam-tickets-settings-table__action--danger:hover,
.khozam-tickets-settings-table__action--danger:focus {
  background: rgba(220, 53, 69, 0.08);
  color: #b42318;
  border-color: rgba(220, 53, 69, 0.22);
}

.khozam-tickets-empty {
  padding: 28px 16px;
  text-align: center;
  color: rgba(26, 44, 29, 0.58);
}

.khozam-tickets-empty i {
  display: block;
  margin-bottom: 10px;
  font-size: 28px;
  color: var(--khozam-gold);
}

.khozam-tickets-page .panel-table-full,
.khozam-tickets-page .khozam-tickets-table {
  clear: both;
  margin-top: 0;
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .table-responsive {
  margin-inline: 0 !important;
  padding-inline: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.06);
  overflow-x: auto;
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper > .row:first-child {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper > .row:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px !important;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(248, 240, 224, 0.35);
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"]:last-child {
  margin-inline-start: auto;
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_length,
.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dt-buttons,
.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_filter {
  float: none !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_length label,
.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_filter label {
  color: #6f6475;
  font-weight: 500;
  margin-bottom: 0;
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_length select,
.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_filter input {
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 8px !important;
  background: #fbf8f4 !important;
  min-height: 34px;
  color: var(--khozam-purple) !important;
}

.khozam-tickets-page .khozam-tickets-table .dt-buttons .btn,
.khozam-tickets-page .khozam-tickets-table .btn-default.buttons-collection,
.khozam-tickets-page .khozam-tickets-table .btn-default.buttons-page-length,
.khozam-tickets-page .khozam-tickets-table .btn-dt-reload {
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  color: var(--khozam-purple) !important;
  background: #fff !important;
  font-weight: 600;
  box-shadow: none !important;
}

.khozam-tickets-page .table-tickets.dataTable,
.khozam-tickets-page .table-services.dataTable,
.khozam-tickets-page .table-predefined-replies.dataTable,
.khozam-tickets-page .khozam-tickets-settings-table {
  width: max-content !important;
  min-width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.khozam-tickets-page .table-tickets.dataTable thead th,
.khozam-tickets-page .table-services.dataTable thead th,
.khozam-tickets-page .table-predefined-replies.dataTable thead th,
.khozam-tickets-page .khozam-tickets-settings-table thead th {
  background: rgba(248, 240, 224, 0.72) !important;
  color: var(--khozam-purple) !important;
  border-color: rgba(26, 44, 29, 0.08) !important;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 12px !important;
  vertical-align: middle;
  white-space: nowrap;
}

.khozam-tickets-page .table-tickets.dataTable tbody td,
.khozam-tickets-page .table-services.dataTable tbody td,
.khozam-tickets-page .table-predefined-replies.dataTable tbody td,
.khozam-tickets-page .khozam-tickets-settings-table tbody td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
  color: rgba(26, 44, 29, 0.88);
  border-color: rgba(26, 44, 29, 0.06) !important;
  font-size: 13px;
}

.khozam-tickets-page .table-tickets.dataTable tbody tr:hover td,
.khozam-tickets-page .table-services.dataTable tbody tr:hover td,
.khozam-tickets-page .table-predefined-replies.dataTable tbody tr:hover td,
.khozam-tickets-page .khozam-tickets-settings-table tbody tr:hover td {
  background: rgba(248, 240, 224, 0.42) !important;
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_info {
  color: rgba(26, 44, 29, 0.62);
  font-weight: 500;
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  min-height: 34px;
  margin-inline: 2px;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
}

.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--khozam-gold) !important;
  border-color: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
}

[dir="rtl"] .khozam-tickets-page .table-tickets.dataTable thead th:first-child,
[dir="rtl"] .khozam-tickets-page .table-tickets.dataTable tbody td:first-child {
  padding-inline-start: 18px !important;
  padding-inline-end: 12px !important;
}

@media (max-width: 991px) {
  .khozam-tickets-toolbar-panel {
    position: static;
  }

  .khozam-tickets-toolbar__tools {
    width: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .khozam-tickets-page__hero {
    padding: 14px 16px;
  }

  .khozam-tickets-toolbar__primary,
  .khozam-tickets-toolbar__tools {
    width: 100%;
  }

  .khozam-tickets-summary__head {
    align-items: stretch;
  }

  .khozam-tickets-summary__total {
    justify-content: space-between;
    width: 100%;
  }

  .khozam-tickets-summary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .khozam-ticket-subject__actions {
    opacity: 1;
  }

  .khozam-tickets-page .khozam-tickets-table .dataTables_wrapper > .row:nth-child(2) {
    flex-direction: column;
    align-items: stretch;
  }

  .khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_filter {
    width: 100%;
  }

  .khozam-tickets-page .khozam-tickets-table .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
  }
}

/* ── Dashboard options (خيارات لوحة المعلومات) ── */
.khozam-dashboard-options-btn.screen-options-btn {
  position: absolute;
  top: auto;
  right: 38px !important;
  left: auto !important;
  inset-inline: auto;
  z-index: 98;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid rgba(196, 168, 113, 0.45);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(26, 44, 29, 0.98) 0%, #1a2c1d 100%);
  color: var(--khozam-gold) !important;
  box-shadow: 0 8px 18px rgba(26, 44, 29, 0.18);
  cursor: pointer;
  font-family: var(--khozam-font, inherit);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

[dir="rtl"] .khozam-dashboard-options-btn.screen-options-btn,
[dir="rtl"] .screen-options-btn {
  right: 38px !important;
  left: auto !important;
}

.khozam-dashboard-options-btn:hover,
.khozam-dashboard-options-btn.is-open {
  background: linear-gradient(180deg, #243b2f 0%, #1a2c1d 100%);
  border-color: rgba(196, 168, 113, 0.8);
  color: var(--khozam-cream) !important;
  box-shadow: 0 10px 22px rgba(26, 44, 29, 0.24);
}

.khozam-dashboard-options-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(196, 168, 113, 0.16);
  border: 1px solid rgba(196, 168, 113, 0.35);
  color: var(--khozam-gold);
  flex-shrink: 0;
}

.khozam-dashboard-options-btn__icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.khozam-dashboard-options-btn__caret {
  font-size: 10px;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.khozam-dashboard-options-btn.is-open .khozam-dashboard-options-btn__caret {
  transform: rotate(180deg);
}

.khozam-dashboard-options-area.screen-options-area {
  display: none;
  margin: 0;
  padding: 18px 20px 20px;
  background:
    linear-gradient(180deg, rgba(26, 44, 29, 0.045) 0%, transparent 48px),
    linear-gradient(180deg, #ffffff 0%, #f7f4ef 100%);
  border-bottom: 1px solid rgba(26, 44, 29, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(196, 168, 113, 0.28),
    0 10px 28px rgba(26, 44, 29, 0.06);
}

.khozam-dashboard-options {
  max-width: 1180px;
  margin: 0 auto;
}

.khozam-dashboard-options__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a2c1d 0%, #243b2f 100%);
  border: 1px solid rgba(196, 168, 113, 0.28);
  box-shadow: 0 8px 20px rgba(26, 44, 29, 0.14);
}

.khozam-dashboard-options__title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.khozam-dashboard-options__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(248, 240, 224, 0.12);
  border: 1px solid rgba(196, 168, 113, 0.35);
  color: var(--khozam-gold);
  flex-shrink: 0;
}

.khozam-dashboard-options__title-copy h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--khozam-cream);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.khozam-dashboard-options__title-copy h4 i {
  color: rgba(248, 240, 224, 0.55);
  font-size: 13px;
  cursor: help;
}

.khozam-dashboard-options__title-copy p {
  margin: 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.khozam-dashboard-options__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.khozam-dashboard-options__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(196, 168, 113, 0.35);
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-cream) !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.khozam-dashboard-options__action i {
  color: var(--khozam-gold);
  font-size: 12px;
}

.khozam-dashboard-options__action:hover,
.khozam-dashboard-options__action:focus {
  background: rgba(248, 240, 224, 0.22);
  border-color: rgba(196, 168, 113, 0.65);
  color: #fff !important;
  transform: translateY(-1px);
}

.khozam-dashboard-options__action--reset {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(185, 28, 28, 0.22);
  color: #fecaca !important;
}

.khozam-dashboard-options__action--reset i {
  color: #fca5a5;
}

.khozam-dashboard-options__action--reset:hover,
.khozam-dashboard-options__action--reset:focus {
  background: rgba(185, 28, 28, 0.36);
  border-color: rgba(248, 113, 113, 0.7);
  color: #fff !important;
}

.khozam-dashboard-options__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.khozam-dashboard-options__item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  background: #fff;
  box-shadow: 0 3px 10px rgba(26, 44, 29, 0.04);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.khozam-dashboard-options__item:hover {
  border-color: rgba(196, 168, 113, 0.55);
  box-shadow: 0 8px 18px rgba(26, 44, 29, 0.1);
  transform: translateY(-1px);
  background: #fffcf7;
}

.khozam-dashboard-options__item-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.khozam-dashboard-options__item-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 6px;
  border: 1.5px solid rgba(26, 44, 29, 0.28);
  background: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.khozam-dashboard-options__item-check input:hover {
  border-color: rgba(196, 168, 113, 0.8);
}

.khozam-dashboard-options__item-check input:checked {
  border-color: #1a2c1d;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22);
  background-color: #1a2c1d;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c4a871' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l2.8 2.8 6.2-6.2'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #1a2c1d 0%, #243b2f 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px, auto;
}

.khozam-dashboard-options__item-name {
  color: #1a2c1d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.khozam-dashboard-options__item:has(input:checked) {
  background: linear-gradient(135deg, rgba(248, 240, 224, 0.9) 0%, #fff 100%);
  border-color: rgba(196, 168, 113, 0.55);
  box-shadow:
    inset 3px 0 0 var(--khozam-gold),
    0 4px 14px rgba(26, 44, 29, 0.06);
}

[dir="rtl"] .khozam-dashboard-options__item:has(input:checked) {
  box-shadow:
    inset -3px 0 0 var(--khozam-gold),
    0 4px 14px rgba(26, 44, 29, 0.06);
}

.khozam-dashboard-options__item:has(input:not(:checked)) {
  background: #fafaf8;
  border-color: rgba(26, 44, 29, 0.08);
}

.khozam-dashboard-options__item:has(input:not(:checked)) .khozam-dashboard-options__item-name {
  color: rgba(26, 44, 29, 0.52);
  font-weight: 600;
}

/* Fixed Khozam sections (not drag-reorderable; visibility via dashboard options) */
.widget.khozam-dash-section {
  cursor: default;
}

.widget.khozam-dash-section.hide {
  display: none !important;
}

.khozam-calendar-row__side > .widget.khozam-dash-section {
  margin-bottom: 20px;
}

.khozam-calendar-row__side > .widget.khozam-dash-section:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .khozam-dashboard-options-btn.screen-options-btn,
  [dir="rtl"] .khozam-dashboard-options-btn.screen-options-btn,
  [dir="rtl"] .screen-options-btn {
    right: 12px !important;
    left: auto !important;
    padding: 7px 11px;
    font-size: 12px;
  }

  .khozam-dashboard-options-area.screen-options-area {
    padding: 14px 12px 16px;
  }

  .khozam-dashboard-options__head {
    flex-direction: column;
    padding: 14px;
  }

  .khozam-dashboard-options__actions {
    width: 100%;
  }

  .khozam-dashboard-options__action {
    flex: 1 1 auto;
    justify-content: center;
  }

  .khozam-dashboard-options__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Todo page (المهام الشخصية / To Do) ── */
.khozam-todo-page > .content {
  padding-top: 12px !important;
}

.khozam-todo-page__hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-todo-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-todo-page__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 700;
}

.khozam-todo-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.khozam-todo-toolbar-panel {
  position: sticky;
  top: var(--khozam-header-height);
  z-index: 25;
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  margin-bottom: 16px;
}

.khozam-todo-toolbar-panel__body {
  padding: 12px 14px !important;
  background: #fff !important;
}

.khozam-todo-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.khozam-todo-toolbar__primary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-todo-summary {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.06);
}

.khozam-todo-summary__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.khozam-todo-summary__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: var(--khozam-purple) !important;
  font-size: 14px;
  font-weight: 700;
}

.khozam-todo-summary__title i {
  color: var(--khozam-gold);
}

.khozam-todo-summary__total {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.72);
  border: 1px solid rgba(196, 168, 113, 0.28);
}

.khozam-todo-summary__total-label {
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 600;
}

.khozam-todo-summary__total-value {
  color: var(--khozam-purple);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.khozam-todo-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.khozam-todo-summary__chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.08);
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.khozam-todo-summary__chip--pending {
  border-inline-start: 4px solid #d68910;
}

.khozam-todo-summary__chip--finished {
  border-inline-start: 4px solid #2f9e44;
}

.khozam-todo-summary__chip:hover,
.khozam-todo-summary__chip:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(26, 44, 29, 0.1);
  background: #fff;
}

.khozam-todo-summary__chip strong {
  font-size: 20px;
  font-weight: 800;
  color: #1a2c1d;
  line-height: 1.1;
}

.khozam-todo-summary__chip--pending span {
  color: #d68910;
  font-size: 12px;
  font-weight: 700;
}

.khozam-todo-summary__chip--finished span {
  color: #2f9e44;
  font-size: 12px;
  font-weight: 700;
}

.khozam-todo-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.khozam-todo-board {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.06);
  overflow: hidden;
}

.khozam-todo-board__head {
  padding: 14px 16px;
  background: rgba(248, 240, 224, 0.42);
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-todo-board__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.khozam-todo-board__title h4 {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 700;
  flex: 1;
}

.khozam-todo-board__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 13px;
  flex-shrink: 0;
}

.khozam-todo-board__badge--pending {
  background: rgba(214, 137, 16, 0.14);
  color: #d68910;
}

.khozam-todo-board__badge--finished {
  background: rgba(47, 158, 68, 0.14);
  color: #2f9e44;
}

.khozam-todo-board__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.1);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 800;
}

.khozam-todo-board__body {
  padding: 12px;
  min-height: 220px;
}

.khozam-todo-list {
  margin: 0;
  min-height: 40px;
}

.khozam-todo-item {
  margin: 0 0 10px;
  list-style: none;
}

.khozam-todo-item:last-child {
  margin-bottom: 0;
}

.khozam-todo-item__inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.08);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.khozam-todo-item__inner:hover {
  background: #fff;
  border-color: rgba(196, 168, 113, 0.35);
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.08);
}

.khozam-todo-item--done .khozam-todo-item__inner,
.khozam-todo-item:has(.todo-description.line-throught) .khozam-todo-item__inner {
  background: rgba(47, 158, 68, 0.05);
}

.khozam-todo-item__controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}

.khozam-todo-page .todo-dragger {
  width: 10px;
  height: 18px;
  cursor: grab;
  opacity: 0.45;
  background-image: radial-gradient(circle, rgba(26, 44, 29, 0.45) 1.2px, transparent 1.4px);
  background-size: 5px 5px;
  background-position: center;
}

.khozam-todo-page .todo-dragger:hover {
  opacity: 0.85;
}

.khozam-todo-page .todo-checkbox label {
  padding-inline-start: 0 !important;
}

.khozam-todo-page .todo-checkbox input:checked + label:after {
  color: #2f9e44;
}

.khozam-todo-item__body {
  min-width: 0;
  flex: 1;
}

.khozam-todo-item__text {
  color: rgba(26, 44, 29, 0.92);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
}

.khozam-todo-item--done .khozam-todo-item__text,
.khozam-todo-page .todo-description.line-throught {
  color: rgba(26, 44, 29, 0.5);
  text-decoration: line-through;
}

.khozam-todo-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.khozam-todo-item__date {
  color: rgba(26, 44, 29, 0.55);
  font-size: 11px;
  font-weight: 500;
}

.khozam-todo-item__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.khozam-todo-item__inner:hover .khozam-todo-item__actions {
  opacity: 1;
}

.khozam-todo-item__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  background: #fff;
  color: rgba(26, 44, 29, 0.62);
  text-decoration: none !important;
}

.khozam-todo-item__btn:hover,
.khozam-todo-item__btn:focus {
  color: var(--khozam-purple);
  border-color: rgba(196, 168, 113, 0.4);
  background: rgba(248, 240, 224, 0.72);
}

.khozam-todo-item__btn--danger:hover,
.khozam-todo-item__btn--danger:focus {
  color: #b42318;
  border-color: rgba(220, 53, 69, 0.25);
  background: rgba(220, 53, 69, 0.08);
}

.khozam-todo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 16px !important;
  text-align: center;
  color: rgba(26, 44, 29, 0.5);
  font-size: 13px;
  font-weight: 500;
  list-style: none;
}

.khozam-todo-empty i {
  font-size: 22px;
  color: var(--khozam-gold);
}

.khozam-todo-board__footer {
  display: flex;
  justify-content: center;
  padding: 0 12px 14px;
}

.khozam-todo-board__footer .btn.disabled {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 991px) {
  .khozam-todo-toolbar-panel {
    position: static;
  }

  .khozam-todo-boards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .khozam-todo-page__hero {
    padding: 14px 16px;
  }

  .khozam-todo-summary__grid {
    grid-template-columns: 1fr;
  }

  .khozam-todo-item__actions {
    opacity: 1;
  }
}

/* ── Estimate request page (طلب تقدير) ── */
.khozam-estimate-request-page > .content {
  padding-top: 12px !important;
}

.khozam-estimate-request-page > .content > .row:first-child {
  margin-top: 0 !important;
}

.khozam-estimate-request-page__hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-estimate-request-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-estimate-request-page__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 700;
}

.khozam-estimate-request-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.khozam-estimate-request-toolbar-panel {
  position: sticky;
  top: var(--khozam-header-height);
  z-index: 25;
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  margin-bottom: 16px;
}

.khozam-estimate-request-page .khozam-estimate-request-toolbar-panel__body,
.khozam-estimate-request-page .khozam-estimate-request-table-panel__body {
  padding: 12px 14px !important;
  background: #fff !important;
  direction: inherit;
  text-align: start;
}

.khozam-estimate-request-page .khozam-estimate-request-table-panel__body {
  padding: 16px !important;
}

.khozam-estimate-request-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.khozam-estimate-request-toolbar__primary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-estimate-request-summary {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.06);
}

.khozam-estimate-request-summary__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.khozam-estimate-request-summary__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--khozam-purple) !important;
  margin: 0 !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.khozam-estimate-request-summary__title svg,
.khozam-estimate-request-summary__title i {
  color: var(--khozam-gold) !important;
  flex-shrink: 0;
}

.khozam-estimate-request-summary__total {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.72);
  border: 1px solid rgba(196, 168, 113, 0.28);
}

.khozam-estimate-request-summary__total-label {
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 600;
}

.khozam-estimate-request-summary__total-value {
  color: var(--khozam-purple);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.khozam-estimate-request-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.khozam-estimate-request-summary__chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-inline-start: 4px solid var(--er-status-color, var(--khozam-gold));
}

.khozam-estimate-request-summary__chip strong {
  font-size: 20px;
  font-weight: 800;
  color: #1a2c1d;
  line-height: 1.1;
}

.khozam-estimate-request-summary__chip span {
  font-size: 12px;
  font-weight: 700;
  color: var(--er-status-color, #1a2c1d);
}

.khozam-er-id {
  display: inline-flex;
  align-items: center;
  color: var(--khozam-purple) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.khozam-er-email__link {
  color: var(--khozam-purple) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.khozam-er-email__link:hover {
  color: #d68910 !important;
}

.khozam-er-email__actions {
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.khozam-er-email__actions a {
  font-size: 12px;
  margin-inline-end: 10px;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-er-email__actions a:hover {
  color: var(--khozam-purple);
}

.khozam-estimate-request-page tr:hover .khozam-er-email__actions {
  opacity: 1;
}

.khozam-er-assignee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.khozam-er-assignee__avatar {
  border-radius: 50% !important;
}

.khozam-er-assignee__name {
  color: rgba(26, 44, 29, 0.88) !important;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none !important;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khozam-er-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

.khozam-er-date {
  color: rgba(26, 44, 29, 0.7);
  font-size: 12px;
  white-space: nowrap;
}

.khozam-er-empty {
  color: rgba(26, 44, 29, 0.35);
}

.khozam-estimate-request-table-panel {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  overflow: hidden;
}

.khozam-estimate-request-page .panel-table-full,
.khozam-estimate-request-page .khozam-estimate-request-table {
  clear: both;
  margin-top: 0;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .table-responsive {
  margin-inline: 0 !important;
  padding-inline: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.06);
  overflow-x: auto;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper > .row:first-child {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper > .row:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px !important;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(248, 240, 224, 0.35);
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper > .row:nth-child(2) > [class*="col-"]:last-child {
  margin-inline-start: auto;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_length,
.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dt-buttons,
.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_filter {
  float: none !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_length label,
.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_filter label {
  color: #6f6475;
  font-weight: 500;
  margin-bottom: 0;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_length select,
.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_filter input {
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 8px !important;
  background: #fbf8f4 !important;
  min-height: 34px;
  color: var(--khozam-purple) !important;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dt-buttons .btn,
.khozam-estimate-request-page .khozam-estimate-request-table .btn-default.buttons-collection,
.khozam-estimate-request-page .khozam-estimate-request-table .btn-default.buttons-page-length,
.khozam-estimate-request-page .khozam-estimate-request-table .btn-dt-reload {
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  color: var(--khozam-purple) !important;
  background: #fff !important;
  font-weight: 600;
  box-shadow: none !important;
}

.khozam-estimate-request-page .table-estimates_request.dataTable,
.khozam-estimate-request-page .table-estimate-request-forms.dataTable,
.khozam-estimate-request-page .khozam-estimate-request-statuses-table {
  width: max-content !important;
  min-width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.khozam-estimate-request-page .table-estimates_request.dataTable thead th,
.khozam-estimate-request-page .table-estimate-request-forms.dataTable thead th,
.khozam-estimate-request-page .khozam-estimate-request-statuses-table thead th {
  background: rgba(248, 240, 224, 0.72) !important;
  color: var(--khozam-purple) !important;
  border-color: rgba(26, 44, 29, 0.08) !important;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 12px !important;
  vertical-align: middle;
  white-space: nowrap;
}

.khozam-estimate-request-page .table-estimates_request.dataTable tbody td,
.khozam-estimate-request-page .table-estimate-request-forms.dataTable tbody td,
.khozam-estimate-request-page .khozam-estimate-request-statuses-table tbody td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
  color: rgba(26, 44, 29, 0.88);
  border-color: rgba(26, 44, 29, 0.06) !important;
  font-size: 13px;
}

.khozam-estimate-request-page .table-estimates_request.dataTable tbody tr:hover td,
.khozam-estimate-request-page .table-estimate-request-forms.dataTable tbody tr:hover td,
.khozam-estimate-request-page .khozam-estimate-request-statuses-table tbody tr:hover td {
  background: rgba(248, 240, 224, 0.42) !important;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_info {
  color: rgba(26, 44, 29, 0.62);
  font-weight: 500;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  min-height: 34px;
  margin-inline: 2px;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
}

.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--khozam-gold) !important;
  border-color: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
}

.khozam-estimate-request-statuses-table__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--khozam-purple) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.khozam-estimate-request-statuses-table__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.khozam-estimate-request-statuses-table__meta {
  margin-top: 4px;
  color: rgba(26, 44, 29, 0.58);
  font-size: 12px;
}

.khozam-estimate-request-statuses-table__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.khozam-estimate-request-statuses-table__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  background: #fff;
  color: rgba(26, 44, 29, 0.62);
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.khozam-estimate-request-statuses-table__action:hover,
.khozam-estimate-request-statuses-table__action:focus {
  background: rgba(248, 240, 224, 0.72);
  color: var(--khozam-purple);
  border-color: rgba(196, 168, 113, 0.35);
}

.khozam-estimate-request-statuses-table__action--danger:hover,
.khozam-estimate-request-statuses-table__action--danger:focus {
  background: rgba(220, 53, 69, 0.08);
  color: #b42318;
  border-color: rgba(220, 53, 69, 0.22);
}

.khozam-estimate-request-empty {
  padding: 28px 16px;
  text-align: center;
  color: rgba(26, 44, 29, 0.58);
}

.khozam-estimate-request-empty i {
  display: block;
  margin-bottom: 10px;
  font-size: 28px;
  color: var(--khozam-gold);
}

[dir="rtl"] .khozam-estimate-request-page .table-estimates_request.dataTable thead th:first-child,
[dir="rtl"] .khozam-estimate-request-page .table-estimates_request.dataTable tbody td:first-child,
[dir="rtl"] .khozam-estimate-request-page .table-estimate-request-forms.dataTable thead th:first-child,
[dir="rtl"] .khozam-estimate-request-page .table-estimate-request-forms.dataTable tbody td:first-child {
  padding-inline-start: 18px !important;
  padding-inline-end: 12px !important;
}

@media (max-width: 991px) {
  .khozam-estimate-request-toolbar-panel {
    position: static;
  }
}

@media (max-width: 767px) {
  .khozam-estimate-request-page__hero {
    padding: 14px 16px;
  }

  .khozam-estimate-request-toolbar__primary {
    width: 100%;
  }

  .khozam-estimate-request-summary__head {
    align-items: stretch;
  }

  .khozam-estimate-request-summary__total {
    justify-content: space-between;
    width: 100%;
  }

  .khozam-estimate-request-summary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .khozam-er-email__actions {
    opacity: 1;
  }

  .khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper > .row:nth-child(2) {
    flex-direction: column;
    align-items: stretch;
  }

  .khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_filter {
    width: 100%;
  }

  .khozam-estimate-request-page .khozam-estimate-request-table .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
  }
}

/* ── Advertising campaigns report (حملات إعلانية) ── */
.khozam-advertising-page > .content {
  padding-top: 12px !important;
  max-width: 980px;
  margin-inline: auto;
}

.khozam-advertising-panel {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  overflow: hidden;
}

.khozam-advertising-panel__body {
  padding: 18px 20px !important;
  background: #fff !important;
}

.khozam-advertising-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-advertising-page__title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.khozam-advertising-page__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.72);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-advertising-page__title {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 20px;
  font-weight: 700;
}

.khozam-advertising-page__subtitle {
  margin: 4px 0 0;
  color: rgba(26, 44, 29, 0.58);
  font-size: 13px;
}

.khozam-advertising-page__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.55);
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-advertising-page__count-label {
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 600;
}

.khozam-advertising-page__count-value {
  color: var(--khozam-purple);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.khozam-advertising-form__notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(248, 240, 224, 0.55);
  border: 1px solid rgba(196, 168, 113, 0.25);
  color: rgba(26, 44, 29, 0.78);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.khozam-advertising-form__notice i {
  color: var(--khozam-gold);
}

.khozam-advertising-form__notice.is-warning {
  background: rgba(248, 240, 224, 0.85);
  border-color: rgba(196, 168, 113, 0.45);
  color: var(--khozam-purple);
}

.khozam-advertising-form__label {
  display: block;
  margin-bottom: 8px;
  color: rgba(26, 44, 29, 0.78);
  font-size: 13px;
  font-weight: 700;
}

.khozam-advertising-form__control {
  min-height: 40px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 10px !important;
  background: #fbf8f4 !important;
  color: var(--khozam-purple) !important;
  box-shadow: none !important;
}

.khozam-advertising-form__control:focus {
  border-color: rgba(196, 168, 113, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.16) !important;
}

.khozam-advertising-form__date-native {
  min-height: 40px;
  color: var(--khozam-purple);
  color-scheme: light;
  direction: rtl;
  text-align: right;
  width: 100%;
}

.khozam-advertising-form__date-native:focus {
  border-color: rgba(196, 168, 113, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.16) !important;
}

.khozam-advertising-form__date-native::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.72;
}

.khozam-advertising-form__date-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  direction: rtl;
  width: 100%;
  max-width: 520px;
  margin: 0 0 16px;
}

.khozam-advertising-form__date-field {
  min-width: 0;
}

.khozam-advertising-form__date-field .form-group {
  margin-bottom: 0;
}

.khozam-advertising-form__date-row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  direction: rtl;
  margin-left: 0;
  margin-right: 0;
}

.khozam-advertising-form__date-row::before,
.khozam-advertising-form__date-row::after {
  display: none;
}

.khozam-advertising-form__date-row > [class*="col-"] {
  float: none;
}

@media (max-width: 767px) {
  .khozam-advertising-form__date-range {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

@media (min-width: 992px) {
  .khozam-advertising-form__date-row > .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .khozam-advertising-form__date-row > .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.khozam-advertising-form .exclusive-select {
  border-inline-start: 4px solid var(--khozam-gold) !important;
}

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

.khozam-advertising-form__section {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-advertising-form__section-title {
  margin-bottom: 14px;
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 700;
}

.khozam-advertising-form__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

@media (max-width: 767px) {
  .khozam-advertising-page__header {
    align-items: stretch;
  }

  .khozam-advertising-page__count {
    justify-content: space-between;
    width: 100%;
  }

  .khozam-advertising-form__actions {
    justify-content: stretch;
  }

  .khozam-advertising-form__actions .khozam-page-toolbar__btn {
    width: 100%;
  }
}

/* ── Advertising report result (تفاصيل التقرير) ── */
.khozam-advertising-report-page > .content {
  padding-top: 12px !important;
  max-width: 1100px;
  margin-inline: auto;
}

.khozam-advertising-report-panel {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  overflow: hidden;
  background: #fff !important;
}

.khozam-advertising-report {
  background: #fff;
}

.khozam-advertising-report__brand {
  display: flex;
  justify-content: center;
  padding: 24px 24px 8px;
  background: linear-gradient(180deg, rgba(248, 240, 224, 0.55) 0%, #fff 100%);
}

.khozam-advertising-report__logo {
  max-width: 220px;
  max-height: 72px;
  width: auto;
  height: auto;
}

.khozam-advertising-report__header {
  padding: 0 24px 20px;
  background: linear-gradient(180deg, rgba(248, 240, 224, 0.55) 0%, #fff 100%);
  border-bottom: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-advertising-report__header-main {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.22);
}

.khozam-advertising-report__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 20px;
  flex-shrink: 0;
}

.khozam-advertising-report__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.khozam-advertising-report__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.78);
  font-size: 14px;
  font-weight: 500;
}

.khozam-advertising-report__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.khozam-advertising-report__badge--tag {
  background: rgba(196, 168, 113, 0.22);
  color: var(--khozam-gold-hover);
  border: 1px solid rgba(196, 168, 113, 0.35);
}

.khozam-advertising-report__badge--campaign {
  background: rgba(248, 240, 224, 0.16);
  color: var(--khozam-cream);
  border: 1px solid rgba(248, 240, 224, 0.28);
}

.khozam-advertising-report__body {
  padding: 22px 24px 18px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
}

.khozam-advertising-report__section + .khozam-advertising-report__section {
  margin-top: 24px;
}

.khozam-advertising-report__section-title {
  margin: 0 0 14px;
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
  padding-inline-start: 12px;
  border-inline-start: 4px solid var(--khozam-gold);
}

.khozam-advertising-report__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}

.khozam-advertising-report__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 96px;
  padding: 16px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.05);
  overflow: visible;
}

.khozam-advertising-report__card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: rgba(26, 44, 29, 0.12);
}

.khozam-advertising-report__card--accent::before {
  background: linear-gradient(90deg, var(--khozam-gold), var(--khozam-gold-hover));
}

.khozam-advertising-report__card--accent {
  background: linear-gradient(180deg, #fff 0%, rgba(248, 240, 224, 0.35) 100%);
  border-color: rgba(196, 168, 113, 0.28);
}

.khozam-advertising-report__card-label {
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.khozam-advertising-report__card-value {
  color: var(--khozam-purple);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  word-break: break-word;
  overflow: visible;
  white-space: normal;
}

.khozam-advertising-report__card-value--money {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}

@font-face {
  font-family: "Saudi Riyal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../plugins/riyal/riyal.woff2") format("woff2");
}

.khozam-currency {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  max-width: 100%;
}

.khozam-currency__amount {
  font-family: var(--khozam-font, "Thmanyah Sans", sans-serif);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.khozam-currency__symbol {
  font-family: "Saudi Riyal", sans-serif;
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1;
  color: var(--khozam-gold);
  transform: translateY(1px);
}

.khozam-advertising-report__card-value--money .khozam-currency__symbol {
  color: var(--khozam-purple);
  opacity: 0.82;
}

.khozam-advertising-report__footer {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
  text-align: center;
}

.khozam-advertising-report__footer p {
  margin: 0;
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  font-weight: 600;
}

.khozam-advertising-report__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding: 22px 24px 24px;
  background: #fff;
  border-top: 1px solid rgba(196, 168, 113, 0.24);
}

.khozam-advertising-report__actions .khozam-page-toolbar__btn.is-loading {
  opacity: 0.72;
  pointer-events: none;
}

@media (max-width: 767px) {
  .khozam-advertising-report__header,
  .khozam-advertising-report__body,
  .khozam-advertising-report__actions,
  .khozam-advertising-report__brand {
    padding-inline: 16px;
  }

  .khozam-advertising-report__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .khozam-advertising-report__title {
    font-size: 18px;
  }

  .khozam-advertising-report__card-value {
    font-size: 17px;
  }

  .khozam-advertising-report__actions {
    flex-direction: column;
  }

  .khozam-advertising-report__actions .khozam-page-toolbar__btn {
    width: 100%;
  }
}

@media print {
  .khozam-advertising-report__actions {
    display: none !important;
  }

  .khozam-advertising-report-page > .content {
    max-width: none;
  }

  .khozam-advertising-report-panel {
    box-shadow: none !important;
    border: 0 !important;
  }

  .khozam-advertising-report__card {
    box-shadow: none !important;
    border: 1px solid rgba(26, 44, 29, 0.14) !important;
  }
}

/* ── Tag duplicates report (تقرير التكرارات) ── */
.khozam-tag-report-page.khozam-advertising-page > .content {
  max-width: 760px;
}

.khozam-tag-report-page.khozam-advertising-report-page > .content {
  max-width: 1180px;
}

.khozam-tag-report__stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.khozam-tag-report__stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 16px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.05);
}

.khozam-tag-report__stat-card--new {
  border-color: rgba(39, 174, 96, 0.35);
  background: linear-gradient(180deg, #fff 0%, rgba(39, 174, 96, 0.06) 100%);
}

.khozam-tag-report__stat-card--dup-today {
  border-color: rgba(230, 126, 34, 0.35);
  background: linear-gradient(180deg, #fff 0%, rgba(230, 126, 34, 0.06) 100%);
}

.khozam-tag-report__stat-card--dup-total {
  border-color: rgba(217, 83, 79, 0.35);
  background: linear-gradient(180deg, #fff 0%, rgba(217, 83, 79, 0.06) 100%);
}

.khozam-tag-report__stat-title {
  color: rgba(26, 44, 29, 0.72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.khozam-tag-report__stat-card--new .khozam-tag-report__stat-title {
  color: #1e8449;
}

.khozam-tag-report__stat-card--dup-today .khozam-tag-report__stat-title {
  color: #d35400;
}

.khozam-tag-report__stat-card--dup-total .khozam-tag-report__stat-title {
  color: #c0392b;
}

.khozam-tag-report__stat-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.khozam-tag-report__stat-card--new .khozam-tag-report__stat-value {
  color: #27ae60;
}

.khozam-tag-report__stat-card--dup-today .khozam-tag-report__stat-value {
  color: #e67e22;
}

.khozam-tag-report__stat-card--dup-total .khozam-tag-report__stat-value {
  color: #d9534f;
}

.khozam-tag-report__section-title {
  margin: 0 0 14px;
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
  padding-inline-start: 12px;
  border-inline-start: 4px solid var(--khozam-gold);
  line-height: 1.5;
}

.khozam-tag-report__section-title small {
  display: block;
  margin-top: 4px;
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  font-weight: 600;
}

.khozam-tag-report__section-title--new {
  border-inline-start-color: #27ae60;
}

.khozam-tag-report__section-title--dup {
  border-inline-start-color: #d9534f;
}

.khozam-tag-report__table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: #fff;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.05);
}

.khozam-tag-report__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: #fff;
}

.khozam-tag-report__table th,
.khozam-tag-report__table td {
  padding: 12px 10px;
  text-align: center;
  border: 1px solid rgba(26, 44, 29, 0.08);
  font-size: 14px;
  vertical-align: middle;
}

.khozam-tag-report__table thead th {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  font-weight: 700;
  white-space: nowrap;
}

.khozam-tag-report__table tbody tr:nth-child(even):not(.khozam-tag-report__detail-row):not(.khozam-tag-report__total-row) {
  background: rgba(248, 240, 224, 0.22);
}

.khozam-tag-report__table tbody tr:hover:not(.khozam-tag-report__detail-row):not(.khozam-tag-report__total-row) {
  background: rgba(248, 240, 224, 0.42);
}

.khozam-tag-report__total-row {
  background: rgba(26, 44, 29, 0.06) !important;
  font-weight: 800;
}

.khozam-tag-report__col-new {
  color: #27ae60;
  font-weight: 700;
}

.khozam-tag-report__col-dup-today {
  color: #e67e22;
  font-weight: 700;
}

.khozam-tag-report__col-dup-total {
  color: #d9534f;
  font-weight: 700;
}

.khozam-tag-report__col-bold {
  font-weight: 800;
}

.khozam-tag-report__toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  background: rgba(248, 240, 224, 0.55);
  color: var(--khozam-purple);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.khozam-tag-report__toggle-btn:hover {
  background: rgba(196, 168, 113, 0.18);
  border-color: rgba(196, 168, 113, 0.35);
}

.khozam-tag-report__detail-row > td {
  padding: 0 !important;
  border-top: 0;
}

.khozam-tag-report__detail-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.khozam-tag-report__detail-table th,
.khozam-tag-report__detail-table td {
  padding: 8px 10px;
  text-align: center;
  border: 1px solid rgba(26, 44, 29, 0.08);
  font-size: 13px;
}

.khozam-tag-report__detail-table--new thead tr {
  background: rgba(39, 174, 96, 0.16);
}

.khozam-tag-report__detail-table--dup-today thead tr {
  background: rgba(230, 126, 34, 0.18);
}

.khozam-tag-report__detail-table--dup thead tr {
  background: rgba(217, 83, 79, 0.16);
}

.khozam-tag-report__detail-table--new tbody tr {
  background: rgba(39, 174, 96, 0.04);
}

.khozam-tag-report__detail-table--dup-today tbody tr {
  background: rgba(230, 126, 34, 0.05);
}

.khozam-tag-report__detail-table--dup tbody tr {
  background: rgba(217, 83, 79, 0.04);
}

.khozam-tag-report__dup-msg {
  font-size: 12px;
  color: rgba(26, 44, 29, 0.58);
  text-align: right;
}

@media (max-width: 991px) {
  .khozam-tag-report__stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .khozam-tag-report__table th,
  .khozam-tag-report__table td {
    padding: 10px 8px;
    font-size: 12px;
  }

  .khozam-tag-report__toggle-btn {
    display: block;
    margin: 6px auto 0;
  }
}

/* ── Duplicate status report (تقرير حالات العملاء المكررين) ── */
.khozam-dup-status-report-page.khozam-advertising-page > .content {
  max-width: 760px;
  overflow-x: hidden;
}

.khozam-dup-status-report-page.khozam-advertising-report-page > .content {
  max-width: 100%;
  padding-inline: 12px !important;
}

.khozam-dup-status-report__table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: #fff;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.05);
  margin-bottom: 8px;
}

.khozam-dup-status-report__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  margin: 0;
  background: #fff;
}

.khozam-dup-status-report__table th,
.khozam-dup-status-report__table td {
  padding: 11px 10px;
  text-align: center;
  border: 1px solid rgba(26, 44, 29, 0.08);
  font-size: 13px;
  vertical-align: middle;
  white-space: nowrap;
}

.khozam-dup-status-report__table thead th {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  font-weight: 700;
}

.khozam-dup-status-report__source-col {
  min-width: 200px;
  position: sticky;
  left: 0;
  z-index: 12;
  background: #fbf8f4;
}

.khozam-dup-status-report__table thead .khozam-dup-status-report__source-col {
  z-index: 20;
  background: var(--khozam-purple);
}

.khozam-dup-status-report__total-col {
  min-width: 96px;
  position: sticky;
  right: 0;
  z-index: 12;
}

.khozam-dup-status-report__table thead .khozam-dup-status-report__total-col {
  z-index: 20;
  background: var(--khozam-purple-mid);
}

.khozam-dup-status-report__source-name {
  font-weight: 700;
  color: var(--khozam-purple);
  text-align: right;
}

.khozam-dup-status-report__source-name.is-muted {
  color: rgba(26, 44, 29, 0.45);
  font-weight: 500;
}

.khozam-dup-status-report__source-total {
  font-weight: 800;
  color: var(--khozam-purple);
  background: rgba(248, 240, 224, 0.72) !important;
}

.khozam-dup-status-report__source-total.is-muted {
  background: rgba(26, 44, 29, 0.04) !important;
  color: rgba(26, 44, 29, 0.45);
}

.khozam-dup-status-report__zero {
  color: rgba(26, 44, 29, 0.35);
}

.khozam-dup-status-report__non-zero {
  color: var(--khozam-purple);
  font-weight: 800;
  background: rgba(248, 240, 224, 0.35);
}

.khozam-dup-status-report__table tbody tr:nth-child(even) .khozam-dup-status-report__source-col {
  background: #f6f1ea;
}

.khozam-dup-status-report__table tbody tr:hover .khozam-dup-status-report__source-col {
  background: rgba(248, 240, 224, 0.55);
}

.khozam-dup-status-report__total-row .khozam-dup-status-report__total-label,
.khozam-dup-status-report__total-row .khozam-dup-status-report__grand-total {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%) !important;
  color: var(--khozam-cream) !important;
  font-weight: 800;
}

.khozam-dup-status-report__total-row .khozam-dup-status-report__col-total {
  background: rgba(26, 44, 29, 0.06);
  font-weight: 800;
  color: var(--khozam-purple);
}

.khozam-dup-status-report__no-data {
  padding: 28px 18px;
  border-radius: 12px;
  border: 1px dashed rgba(26, 44, 29, 0.14);
  background: rgba(248, 240, 224, 0.35);
  text-align: center;
}

.khozam-dup-status-report__no-data h4 {
  margin: 0;
  color: rgba(26, 44, 29, 0.62);
  font-size: 16px;
  font-weight: 700;
}

.khozam-dup-status-report__actions {
  flex-direction: column;
  align-items: stretch;
}

.khozam-dup-status-report__actions .khozam-page-toolbar__btn {
  width: auto;
}

.khozam-dup-status-report__meta {
  width: 100%;
  margin: 4px 0 0;
  text-align: center;
  color: rgba(26, 44, 29, 0.55);
  font-size: 13px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .khozam-dup-status-report__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .khozam-dup-status-report__meta {
    flex: 1 1 100%;
  }
}

/* ── Marketing sources status report (تقرير حالات المصادر) ── */
.khozam-markiting-report-page {
  direction: rtl;
  font-weight: bold;
  /* Light content bg — avoid green strip under short report pages */
  background: #f6f3ef !important;
  min-height: calc(100vh - var(--khozam-header-height));
}

.khozam-markiting-report-page > .container {
  padding: 20px;
  max-width: 100%;
}

.khozam-markiting-report__filter {
  direction: rtl;
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(26, 44, 29, 0.08);
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-markiting-report__filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.khozam-markiting-report__filter-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 14px;
  color: rgba(26, 44, 29, 0.78);
}

.khozam-markiting-report__date {
  min-width: 160px;
  min-height: 40px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 10px !important;
  background: #fbf8f4 !important;
  color: var(--khozam-purple) !important;
  direction: rtl;
  text-align: right;
}

.khozam-markiting-report__filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.khozam-markiting-report__btn {
  padding: 8px 22px;
  font-weight: 700;
  border-radius: 6px;
}

.khozam-markiting-report-page .btn-primary,
.khozam-markiting-report-page .khozam-markiting-report__btn.btn-primary {
  background-color: var(--khozam-purple);
  border-color: var(--khozam-purple);
  color: var(--khozam-cream);
}

.khozam-markiting-report-page .btn-primary:hover,
.khozam-markiting-report-page .btn-primary:focus,
.khozam-markiting-report-page .khozam-markiting-report__btn.btn-primary:hover,
.khozam-markiting-report-page .khozam-markiting-report__btn.btn-primary:focus {
  background-color: var(--khozam-purple-mid);
  border-color: var(--khozam-purple-mid);
  color: var(--khozam-cream);
}

.khozam-markiting-report__btn--secondary {
  padding: 8px 18px;
  margin-right: 0;
  margin-inline-start: 6px;
  background: rgba(248, 240, 224, 0.72);
  border-color: rgba(26, 44, 29, 0.12);
  color: var(--khozam-purple);
}

.khozam-markiting-report__brand {
  margin-bottom: 8px;
}

.khozam-markiting-report__logo {
  max-width: 180px;
  max-height: 52px;
  width: auto;
  height: auto;
  display: inline-block;
}

.khozam-markiting-report-page .title,
.khozam-markiting-report-page .khozam-markiting-report__title-bar {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  padding: 14px 18px;
  text-align: center;
  font-size: 26px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(26, 44, 29, 0.12);
  border: 1px solid rgba(196, 168, 113, 0.22);
}

.khozam-markiting-report__title-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  direction: rtl;
  text-align: center;
  padding-inline: 130px 18px;
  min-height: 72px;
}

.khozam-markiting-report__title-main {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.khozam-markiting-report__badge {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-gold-hover);
  border: 1px solid rgba(196, 168, 113, 0.35);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.khozam-markiting-report-page .title h2 {
  margin: 0 0 6px;
  color: var(--khozam-cream);
  font-size: 26px;
  font-weight: 700;
}

.khozam-markiting-report-page .title p {
  margin: 0;
  color: rgba(248, 240, 224, 0.82);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .khozam-markiting-report__title-bar {
    padding-inline: 18px;
    padding-bottom: 42px;
    min-height: auto;
  }

  .khozam-markiting-report__badge {
    top: auto;
    bottom: 12px;
    right: 50%;
    transform: translateX(50%);
  }
}

.khozam-markiting-report-page table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(26, 44, 29, 0.1);
  margin-bottom: 25px;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
}

.khozam-markiting-report-page th,
.khozam-markiting-report-page td {
  padding: 12px;
  text-align: center;
  border: 1px solid rgba(26, 44, 29, 0.08);
  font-weight: normal;
  font-size: 15px;
}

.khozam-markiting-report-page thead th {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  font-weight: bold;
}

.khozam-markiting-report-page tbody tr:nth-child(even) {
  background-color: rgba(248, 240, 224, 0.28);
}

.khozam-markiting-report-page tbody tr:hover {
  background-color: rgba(248, 240, 224, 0.48);
}

.khozam-markiting-report-page tr.total-row {
  background-color: rgba(248, 240, 224, 0.62);
  font-weight: bold;
  color: var(--khozam-purple);
}

.khozam-markiting-report-page .footer {
  text-align: center;
  font-size: 13px;
  margin-top: 35px;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-markiting-report-page #exportButton-container {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(196, 168, 113, 0.28);
}

@media print {
  .khozam-markiting-report-page #exportButton-container {
    display: none !important;
  }
}

/* ── Marketing tags report (جودة الحملات الاعلانية) ── */
.khozam-marketing-tags-report-page .tag-cell {
  background-color: rgba(248, 240, 224, 0.72) !important;
  font-weight: 700;
  font-size: 16px;
  color: var(--khozam-purple);
  vertical-align: middle;
}

.khozam-marketing-tags-report-page .source-row {
  background-color: #fff;
}

.khozam-marketing-tags-report-page .source-name {
  color: rgba(26, 44, 29, 0.82);
  text-align: right;
  padding-right: 30px;
}

.khozam-marketing-tags-report-page .tag-info {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  color: rgba(26, 44, 29, 0.55);
  font-weight: 600;
}

/* ── Source quality report form (تقرير جودة حملات بالنسبة للمصدر) ── */
.khozam-source-quality-report-page.khozam-advertising-page > .content {
  max-width: 760px;
}

/* ── Source quality report result — colors only, same layout ── */
.khozam-source-quality-report-page:not(.khozam-advertising-page) {
  direction: rtl;
  font-weight: bold;
  background: var(--khozam-purple) !important;
  min-height: calc(100vh - var(--khozam-header-height));
}

.khozam-source-quality-report-page > .container-fluid {
  padding: 20px;
}

.khozam-source-quality-report__brand {
  margin-bottom: 8px;
}

.khozam-source-quality-report__logo {
  max-width: 180px;
  max-height: 52px;
  width: auto;
  height: auto;
  display: inline-block;
}

.khozam-source-quality-report-page .title,
.khozam-source-quality-report-page .khozam-source-quality-report__title {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  padding: 15px;
  text-align: center;
  font-size: 24px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid rgba(196, 168, 113, 0.22);
  box-shadow: 0 3px 6px rgba(26, 44, 29, 0.12);
}

.khozam-source-quality-report__period {
  font-size: 14px;
  margin-top: 5px;
  color: rgba(248, 240, 224, 0.82);
  font-weight: 600;
}

.khozam-source-quality-report-page table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  background: #fff;
}

.khozam-source-quality-report-page th,
.khozam-source-quality-report-page td {
  border: 1px solid #000;
  padding: 6px;
  font-size: 12px;
  text-align: center;
}

.khozam-source-quality-report-page th {
  vertical-align: top;
}

.khozam-source-quality-report-page .main-title {
  background: #fff;
  font-weight: bold;
  color: var(--khozam-purple);
}

.khozam-source-quality-report-page .arrow {
  font-size: 18px;
  padding: 6px 0;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
}

.khozam-source-quality-report-page .sub-box {
  background: #fff;
  border: 1px solid #000;
  margin: 4px 0;
  padding: 4px;
  font-size: 11px;
  color: rgba(26, 44, 29, 0.82);
}

.khozam-source-quality-report-page .fixed-first-col {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 10;
  border-right: 2px solid #000;
  color: var(--khozam-purple);
  font-weight: 700;
}

.khozam-source-quality-report-page thead th:not(.main-title):not(.arrow):not(.fixed-first-col) {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
}

.khozam-source-quality-report-page .total-row {
  background: rgba(248, 240, 224, 0.72);
  font-weight: bold;
  color: var(--khozam-purple);
}

.khozam-source-quality-report__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: center;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(196, 168, 113, 0.28);
}

.khozam-source-quality-report-page .btn-primary,
.khozam-source-quality-report-page .khozam-source-quality-report__btn.btn-primary {
  background: var(--khozam-purple);
  border-color: var(--khozam-purple);
  color: var(--khozam-cream);
  padding: 10px 25px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
}

.khozam-source-quality-report-page .btn-primary:hover,
.khozam-source-quality-report-page .btn-primary:focus,
.khozam-source-quality-report-page .khozam-source-quality-report__btn.btn-primary:hover,
.khozam-source-quality-report-page .khozam-source-quality-report__btn.btn-primary:focus {
  background: var(--khozam-purple-mid);
  border-color: var(--khozam-purple-mid);
  color: var(--khozam-cream);
}

.khozam-source-quality-report__btn--secondary {
  background: rgba(248, 240, 224, 0.72);
  border-color: rgba(26, 44, 29, 0.12);
  color: var(--khozam-purple);
  padding: 10px 22px;
  font-weight: 700;
  border-radius: 6px;
}

@media print {
  .khozam-source-quality-report-page #exportButtons {
    display: none !important;
  }
}

/* ── Unit status report (حالة الوحدة) ── */
.khozam-unit-status-report-page .container {
  padding: 20px;
}

.khozam-unit-status-report-page .title,
.khozam-unit-status-report-page .khozam-unit-status-report__title {
  margin-bottom: 24px;
}

.khozam-unit-status-report-page .title h2 {
  margin: 0;
}

.khozam-unit-status-report-page .section-title {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  padding: 12px;
  text-align: center;
  font-size: 22px;
  margin: 30px 0 15px;
  border-radius: 6px;
  border: 1px solid rgba(196, 168, 113, 0.22);
  box-shadow: 0 3px 6px rgba(26, 44, 29, 0.1);
}

.khozam-unit-status-report__empty {
  text-align: center;
  padding: 20px;
  margin-bottom: 25px;
  color: rgba(248, 240, 224, 0.72);
  font-weight: 600;
}

.khozam-unit-status-report__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: center;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(196, 168, 113, 0.28);
}

.khozam-unit-status-report-page .btn-primary,
.khozam-unit-status-report-page .khozam-unit-status-report__btn.btn-primary {
  background: var(--khozam-purple);
  border-color: var(--khozam-purple);
  color: var(--khozam-cream);
  font-weight: 700;
  padding: 10px 25px;
  font-size: 16px;
  border-radius: 6px;
}

.khozam-unit-status-report-page .btn-primary:hover,
.khozam-unit-status-report-page .btn-primary:focus,
.khozam-unit-status-report-page .khozam-unit-status-report__btn.btn-primary:hover,
.khozam-unit-status-report-page .khozam-unit-status-report__btn.btn-primary:focus {
  background: var(--khozam-purple-mid);
  border-color: var(--khozam-purple-mid);
  color: var(--khozam-cream);
}

@media print {
  .khozam-unit-status-report-page #exportButton-container {
    display: none !important;
  }
}

/* ── Lead sources / visits report (مصادر العملاء) ── */
.khozam-lead-sources-report-page.khozam-unit-status-report-page .table-responsive {
  margin-bottom: 0;
}

/* ── Reservation progress report (تقدم الحجوزات) ── */
.khozam-reserved-report-page.khozam-markiting-report-page .khozam-reserved-report__form-panel {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(26, 44, 29, 0.1);
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-reserved-report-page .saved-projects {
  margin-top: 0;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(26, 44, 29, 0.1);
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-reserved-report-page .saved-projects h3,
.khozam-reserved-report-page .khozam-reserved-report__section-title {
  color: var(--khozam-purple);
  text-align: center;
  margin-bottom: 20px;
  font-size: 22px;
}

.khozam-reserved-report-page .project-form {
  margin-bottom: 20px;
  padding: 15px;
  border: 2px dashed rgba(26, 44, 29, 0.16);
  border-radius: 8px;
  background: rgba(248, 240, 224, 0.35);
}

.khozam-reserved-report-page input[type="text"],
.khozam-reserved-report-page input[type="number"] {
  width: 90%;
  padding: 8px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 4px;
  font-size: 14px;
  background: #fbf8f4;
  color: var(--khozam-purple);
}

.khozam-reserved-report-page .submit-btn {
  background-color: var(--khozam-purple) !important;
  border: 2px solid var(--khozam-purple-mid) !important;
  color: var(--khozam-cream) !important;
}

.khozam-reserved-report-page .submit-btn:hover {
  background-color: var(--khozam-purple-mid) !important;
}

.khozam-reserved-report-page .khozam-reserved-report__actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(196, 168, 113, 0.28);
}

.khozam-reserved-report-page .chart-container {
  margin: 25px 0;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  min-height: 320px;
}

.khozam-reserved-report-page .khozam-reserved-report__empty {
  text-align: center;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-reserved-report-page .title,
.khozam-reserved-report-page .khozam-reserved-report__title {
  margin-bottom: 24px;
}

.khozam-reserved-report-page .title h1,
.khozam-reserved-report-page .title h2,
.khozam-reserved-report-page .khozam-reserved-report__title h1,
.khozam-reserved-report-page .khozam-reserved-report__title h2 {
  margin: 0;
  font-size: 26px;
}

.khozam-reserved-report-page #messageContainer .alert {
  border-radius: 8px;
}

.khozam-reserved-report-page button {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 6px;
  padding: 10px 25px;
  margin: 10px 5px;
  font-family: "Cairo", sans-serif;
  font-weight: bold;
}

.khozam-reserved-report-page .add-btn {
  background-color: #28a745 !important;
  border: 2px solid #218838 !important;
  color: white !important;
  font-size: 16px;
}

.khozam-reserved-report-page .add-btn:hover {
  background-color: #218838 !important;
  transform: translateY(-2px);
}

.khozam-reserved-report-page .remove-btn {
  background-color: #dc3545 !important;
  border: 2px solid #c82333 !important;
  color: white !important;
  font-size: 14px;
  padding: 8px 15px !important;
  margin: 5px;
}

.khozam-reserved-report-page .remove-btn:hover {
  background-color: #c82333 !important;
  transform: scale(0.98);
}

.khozam-reserved-report-page .update-btn {
  background-color: #007bff !important;
  border: 2px solid #0056b3 !important;
  color: white !important;
  font-size: 14px;
  padding: 8px 15px !important;
  margin: 5px;
}

.khozam-reserved-report-page .update-btn:hover {
  background-color: #0056b3 !important;
  transform: scale(0.98);
}

.khozam-reserved-report-page .save-btn {
  background-color: #28a745 !important;
  border: 2px solid #218838 !important;
  color: white !important;
  font-size: 14px;
  padding: 8px 15px !important;
  margin: 5px;
}

.khozam-reserved-report-page .save-btn:hover {
  background-color: #218838 !important;
  transform: scale(0.98);
}

.khozam-reserved-report-page .stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  background-color: #fff;
}

.khozam-reserved-report-page .stats-table th,
.khozam-reserved-report-page .stats-table td {
  padding: 10px;
  text-align: center;
  border: 1px solid rgba(26, 44, 29, 0.08);
  font-weight: normal;
  font-size: 14px;
}

.khozam-reserved-report-page .stats-table thead th {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  font-weight: bold;
}

.khozam-reserved-report-page .alert {
  padding: 15px;
  margin: 10px 0;
  border-radius: 5px;
  text-align: center;
}

.khozam-reserved-report-page .alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.khozam-reserved-report-page .alert-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ── Contracted Items report (تقرير التعاقد) ── */
.khozam-contracted-items-report-page > .container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: 20px;
}

.khozam-contracted-items-report__brand {
  margin-bottom: 14px;
}

.khozam-contracted-items-report__title {
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: 22px !important;
}

.khozam-contracted-items-report__title h1 {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 26px;
  font-weight: 700;
}

.khozam-contracted-items-report__filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-top: 4px solid var(--khozam-gold);
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(26, 44, 29, 0.12);
}

.khozam-contracted-items-report__filter .khozam-contracted-items-report__field {
  display: block;
  margin: 0;
}

.khozam-contracted-items-report__field .control-label,
.khozam-contracted-items-report__field .col-md-3 {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: right;
}

.khozam-contracted-items-report__field .control-label {
  display: block;
  margin-bottom: 8px;
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 700;
}

.khozam-contracted-items-report__field .form-control {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid rgba(26, 44, 29, 0.14);
  border-radius: 8px;
  background: #fbf8f4;
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 600;
  direction: rtl;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.khozam-contracted-items-report__field .form-control:focus {
  outline: none;
  border-color: var(--khozam-gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(199, 154, 58, 0.2);
}

.khozam-contracted-items-report__info {
  grid-column: 1 / -1;
  float: none;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(199, 154, 58, 0.32);
  border-radius: 8px;
  background: rgba(248, 240, 224, 0.52);
  color: rgba(26, 44, 29, 0.76);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.khozam-contracted-items-report__info p {
  margin: 0;
}

.khozam-contracted-items-report__actions {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
}

.khozam-contracted-items-report__actions .col-md-3 {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.khozam-contracted-items-report-page .khozam-contracted-items-report__submit {
  min-width: 180px;
  padding: 10px 26px;
  border: 1px solid var(--khozam-purple);
  border-radius: 6px;
  background: var(--khozam-purple);
  color: var(--khozam-cream);
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.khozam-contracted-items-report-page .khozam-contracted-items-report__submit:hover,
.khozam-contracted-items-report-page .khozam-contracted-items-report__submit:focus {
  border-color: var(--khozam-purple-mid);
  background: var(--khozam-purple-mid);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(26, 44, 29, 0.24);
}

.khozam-contracted-items-report-page #report-table:empty {
  display: none;
}

.khozam-contracted-items-report__content {
  width: 100%;
  padding: 22px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-top: 4px solid var(--khozam-gold);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(26, 44, 29, 0.12);
}

.khozam-contracted-items-report__header {
  margin-bottom: 24px;
  padding: 22px;
  border: 1px solid rgba(196, 168, 113, 0.24);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  text-align: center;
  box-shadow: 0 4px 12px rgba(26, 44, 29, 0.14);
}

.khozam-contracted-items-report__header .report-title {
  margin: 0 0 10px;
  color: var(--khozam-cream);
  font-size: 28px;
  font-weight: 700;
}

.khozam-contracted-items-report__header .report-period {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(248, 240, 224, 0.2);
  color: rgba(248, 240, 224, 0.86);
  font-size: 16px;
  font-weight: 600;
}

.khozam-contracted-items-report-result-page .table-responsive {
  margin-bottom: 22px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.08);
}

.khozam-contracted-items-report-result-page .khozam-contracted-items-report__table {
  min-width: 1080px;
  margin-bottom: 0;
}

.khozam-contracted-items-report-result-page .khozam-contracted-items-report__table th,
.khozam-contracted-items-report-result-page .khozam-contracted-items-report__table td {
  padding: 10px;
  font-size: 13px;
  vertical-align: middle;
}

.khozam-contracted-items-report-result-page .no-data {
  margin: 20px 0;
  padding: 36px 20px;
  border: 1px dashed rgba(199, 154, 58, 0.5);
  border-radius: 10px;
  background: rgba(248, 240, 224, 0.42);
  color: var(--khozam-purple);
  text-align: center;
}

.khozam-contracted-items-report-result-page .no-data h3 {
  margin-top: 0;
  color: var(--khozam-purple);
}

.khozam-contracted-items-report__footer {
  margin-top: 22px !important;
  padding: 14px 18px;
  border: 1px solid rgba(199, 154, 58, 0.24);
  border-radius: 8px;
  background: rgba(248, 240, 224, 0.35);
  color: rgba(26, 44, 29, 0.66) !important;
  line-height: 1.8;
}

.khozam-contracted-items-report__export {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(199, 154, 58, 0.28);
}

.khozam-contracted-items-report__export-btn {
  min-width: 170px;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.khozam-contracted-items-report__export-btn:hover,
.khozam-contracted-items-report__export-btn:focus {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(26, 44, 29, 0.22);
}

.khozam-contracted-items-report__export-btn--pdf {
  border-color: var(--khozam-purple);
  background: var(--khozam-purple);
  color: var(--khozam-cream);
}

.khozam-contracted-items-report__export-btn--pdf:hover,
.khozam-contracted-items-report__export-btn--pdf:focus {
  border-color: var(--khozam-purple-mid);
  background: var(--khozam-purple-mid);
}

.khozam-contracted-items-report__export-btn--excel {
  border-color: var(--khozam-gold);
  background: var(--khozam-gold);
  color: var(--khozam-purple);
}

.khozam-contracted-items-report__export-btn--excel:hover,
.khozam-contracted-items-report__export-btn--excel:focus {
  border-color: var(--khozam-gold-hover);
  background: var(--khozam-gold-hover);
}

@media (max-width: 767px) {
  .khozam-contracted-items-report-page > .container {
    padding: 14px;
  }

  .khozam-contracted-items-report__title h1,
  .khozam-contracted-items-report__header .report-title {
    font-size: 22px;
  }

  .khozam-contracted-items-report__filter {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 14px;
  }

  .khozam-contracted-items-report__info,
  .khozam-contracted-items-report__actions {
    grid-column: 1;
  }

  .khozam-contracted-items-report-page .khozam-contracted-items-report__submit,
  .khozam-contracted-items-report__export-btn {
    width: 100%;
    margin-inline: 0;
  }

  .khozam-contracted-items-report__content {
    padding: 14px;
  }

  .khozam-contracted-items-report__header {
    padding: 18px 14px;
  }

  .khozam-contracted-items-report__export {
    flex-direction: column;
    align-items: stretch;
  }
}

@media print {
  .khozam-contracted-items-report-page {
    background: #fff !important;
  }

  .khozam-contracted-items-report__content {
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .khozam-contracted-items-report-result-page .no-export,
  .khozam-contracted-items-report-result-page #exportButton-container {
    display: none !important;
  }
}

/* ── Last staff contact report (تقرير آخر تواصل للموظف) ── */
#wrapper.khozam-last-staff-contact-page,
#wrapper.khozam-last-staff-contact-page.khozam-markiting-report-page {
  background: #f6f3ef !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

/* Prevent body chrome green from showing under short report form pages */
body:has(#wrapper.khozam-last-staff-contact-page),
body:has(#wrapper.khozam-markiting-report-page) {
  background: #f6f3ef !important;
}

.khozam-last-staff-contact__staff {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}

.khozam-last-staff-contact__staff-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid rgba(196, 168, 113, 0.35);
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(26, 44, 29, 0.14);
}

.khozam-last-staff-contact__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 24px;
}

.khozam-last-staff-contact__summary-card {
  flex: 1 1 180px;
  max-width: 240px;
  padding: 18px 16px;
  text-align: center;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-top: 3px solid var(--khozam-gold);
  border-radius: 10px;
  background: #fbf8f4;
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.08);
}

.khozam-last-staff-contact__summary-value {
  margin-bottom: 6px;
  color: var(--khozam-purple);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
}

.khozam-last-staff-contact__summary-label {
  color: rgba(26, 44, 29, 0.62);
  font-size: 14px;
  font-weight: 700;
}

.khozam-last-staff-contact__lead-link {
  color: var(--khozam-purple);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.khozam-last-staff-contact__lead-link:hover,
.khozam-last-staff-contact__lead-link:focus {
  color: var(--khozam-gold-hover);
  border-bottom-color: var(--khozam-gold);
}

.khozam-last-staff-contact__calls-count {
  display: inline-block;
  min-width: 32px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(196, 168, 113, 0.22);
  color: var(--khozam-purple);
  font-weight: 800;
}

.khozam-last-staff-contact__back-btn {
  border-color: rgba(26, 44, 29, 0.18);
  background: rgba(248, 240, 224, 0.85);
  color: var(--khozam-purple);
}

.khozam-last-staff-contact__back-btn:hover,
.khozam-last-staff-contact__back-btn:focus {
  border-color: var(--khozam-purple-mid);
  background: var(--khozam-purple-mid);
  color: var(--khozam-cream);
}

@media (max-width: 767px) {
  .khozam-last-staff-contact__summary-card {
    max-width: none;
  }
}

/* ── Reserved and contracted items report (تقرير الحجوزات والعقود) ── */
.khozam-reserved-contracted-items-report-page > .container {
  max-width: 1600px;
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__filter {
  max-width: 1040px;
  margin-bottom: 24px;
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__submit,
.khozam-reserved-contracted-items-report-page .khozam-markiting-report__btn--secondary {
  min-width: 170px;
  margin: 0;
}

.khozam-reserved-contracted-items-report-page .khozam-markiting-report__btn--secondary {
  min-height: 43px;
  padding: 10px 22px;
  border: 1px solid rgba(26, 44, 29, 0.16);
  border-radius: 6px;
  background: rgba(248, 240, 224, 0.72);
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.khozam-reserved-contracted-items-report-page .khozam-markiting-report__btn--secondary:hover,
.khozam-reserved-contracted-items-report-page .khozam-markiting-report__btn--secondary:focus {
  border-color: var(--khozam-gold);
  background: var(--khozam-cream);
  color: var(--khozam-purple);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(26, 44, 29, 0.14);
}

.khozam-reserved-contracted-items-report-page .table-responsive {
  direction: rtl;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 0;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-radius: 8px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table {
  width: 100%;
  min-width: 2100px;
  margin-bottom: 0;
  direction: rtl;
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table th,
.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table td {
  padding: 9px 8px;
  font-size: 12px;
  line-height: 1.55;
  vertical-align: middle;
  white-space: nowrap;
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table th:nth-child(5),
.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table td:nth-child(5),
.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table th:nth-child(8),
.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table td:nth-child(8),
.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table th:nth-child(14),
.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table td:nth-child(14),
.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table th:nth-child(15),
.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table td:nth-child(15),
.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table th:nth-child(16),
.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table td:nth-child(16) {
  min-width: 130px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.khozam-reserved-contracted-items-report-page .status-paid,
.khozam-reserved-contracted-items-report-page .status-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.khozam-reserved-contracted-items-report-page .status-paid {
  border: 1px solid rgba(26, 44, 29, 0.18);
  background: var(--khozam-purple);
  color: var(--khozam-cream);
}

.khozam-reserved-contracted-items-report-page .status-pending {
  border: 1px solid rgba(196, 168, 113, 0.5);
  background: rgba(196, 168, 113, 0.28);
  color: var(--khozam-purple);
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__pagination {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-top: 3px solid var(--khozam-gold);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.08);
}

.khozam-reserved-contracted-items-report-page .pagination {
  direction: ltr;
  margin: 0;
}

.khozam-reserved-contracted-items-report-page .page-link {
  min-width: 38px;
  margin: 0 2px;
  border: 1px solid rgba(26, 44, 29, 0.14);
  background: #fff;
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.khozam-reserved-contracted-items-report-page .page-link:hover,
.khozam-reserved-contracted-items-report-page .page-link:focus {
  border-color: var(--khozam-purple-mid);
  background: var(--khozam-purple-mid);
  color: var(--khozam-cream);
}

.khozam-reserved-contracted-items-report-page .page-item.active .page-link {
  border-color: var(--khozam-purple);
  background: var(--khozam-purple);
  color: var(--khozam-cream);
}

.khozam-reserved-contracted-items-report-page .page-item.disabled .page-link,
.khozam-reserved-contracted-items-report-page .page-link.disabled {
  border-color: rgba(26, 44, 29, 0.08);
  background: #f7f4f1;
  color: rgba(26, 44, 29, 0.38);
  cursor: not-allowed;
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__page-info {
  color: rgba(26, 44, 29, 0.66);
  font-size: 14px;
  font-weight: 600;
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__page-info strong {
  color: var(--khozam-purple);
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__page-size {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__page-size label {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 700;
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__page-size-select {
  display: inline-block !important;
  width: auto;
  min-width: 88px;
  height: 36px;
  margin: 0 !important;
  padding: 5px 28px 5px 10px;
  border: 1px solid rgba(26, 44, 29, 0.16);
  border-radius: 6px;
  background-color: #fbf8f4;
  color: var(--khozam-purple);
  direction: rtl;
  font-weight: 700;
}

.khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__page-size-select:focus {
  border-color: var(--khozam-gold);
  box-shadow: 0 0 0 3px rgba(199, 154, 58, 0.2);
}

@media (max-width: 767px) {
  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__submit,
  .khozam-reserved-contracted-items-report-page .khozam-markiting-report__btn--secondary {
    width: 100%;
    min-width: 0;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table {
    min-width: 1900px;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__pagination {
    padding: 14px 10px;
  }

  .khozam-reserved-contracted-items-report-page .pagination {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__page-size {
    flex-direction: column;
  }
}

@media print {
  .khozam-reserved-contracted-items-report-page > .container {
    max-width: none;
    padding: 0;
  }

  .khozam-reserved-contracted-items-report-page .date-filter,
  .khozam-reserved-contracted-items-report-page .pagination-container,
  .khozam-reserved-contracted-items-report-page .no-export,
  .khozam-reserved-contracted-items-report-page #exportButton-container {
    display: none !important;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__content {
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__brand {
    margin-bottom: 8px;
  }

  .khozam-reserved-contracted-items-report-page .khozam-markiting-report__logo {
    max-width: 120px;
    max-height: 40px;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__header {
    margin-bottom: 10px;
    padding: 10px;
    box-shadow: none;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__header .report-title {
    margin-bottom: 5px;
    font-size: 18px;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__header .report-period {
    padding-top: 5px;
    font-size: 10px;
  }

  .khozam-reserved-contracted-items-report-page .table-responsive {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table th,
  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__table td {
    min-width: 0;
    padding: 2px;
    font-size: 6px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .khozam-reserved-contracted-items-report-page .status-paid,
  .khozam-reserved-contracted-items-report-page .status-pending {
    min-width: 0;
    padding: 2px 3px;
    font-size: 6px;
  }

  .khozam-reserved-contracted-items-report-page .khozam-contracted-items-report__footer {
    margin-top: 10px !important;
    padding: 6px;
    font-size: 8px;
  }
}

/* ── Appointments page (المواعيد) ── */
.khozam-appointments-page > .content {
  padding-top: 12px !important;
}

.khozam-appointments-page > .content > .row:first-child {
  margin-top: 0 !important;
}

/* Today's appointments panel */
.khozam-appointments-today-panel {
  border: 0 !important;
  border-radius: 14px !important;
  background: rgba(248, 240, 224, 0.35) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08) !important;
  overflow: hidden;
}

.khozam-appointments-today-panel__body {
  padding: 16px 18px !important;
}

.khozam-appointments-today__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.khozam-appointments-today__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: var(--khozam-purple) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.khozam-appointments-today__title i {
  color: var(--khozam-gold) !important;
  flex-shrink: 0;
}

[dir="rtl"] .khozam-appointments-today__title {
  flex-direction: row-reverse;
}

.khozam-appointments-today__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(26, 44, 29, 0.08);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
}

.khozam-appointments-today__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.khozam-appointments-today__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 4px 12px rgba(26, 44, 29, 0.06);
  border-inline-start: 3px solid var(--khozam-gold);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.khozam-appointments-today__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 44, 29, 0.12);
}

.khozam-appointments-today__card-title {
  margin: 0 !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.khozam-appointments-today__card-title a {
  color: var(--khozam-purple) !important;
  text-decoration: none !important;
}

.khozam-appointments-today__card-title a:hover {
  color: var(--khozam-gold-hover) !important;
}

.khozam-appointments-today__card-desc {
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  line-height: 1.5;
}

.khozam-appointments-today__card-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--khozam-purple);
}

.khozam-appointments-today__card-time-label {
  color: var(--khozam-gold) !important;
  font-weight: 600;
}

/* Toolbar + table panel */
.khozam-appointments-table-panel {
  border: 1px solid rgba(26, 44, 29, 0.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.06) !important;
  /* Keep visible so toolbar filter/integration dropdowns are not clipped */
  overflow: visible;
}

.khozam-appointments-table-panel__body {
  padding: 16px 18px !important;
  overflow: visible;
}

.khozam-appointments-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 30;
}

.khozam-appointments-toolbar__actions {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  float: none !important;
  width: auto !important;
}

.khozam-appointments-toolbar__actions .dropdown,
.khozam-appointments-create-dropdown {
  display: inline-flex;
  position: relative;
  margin: 0;
  vertical-align: middle;
}

.khozam-appointments-create-dropdown__caret {
  font-size: 11px !important;
  opacity: 0.85;
  margin-inline-start: 2px;
}

.khozam-appointments-create-dropdown__menu {
  min-width: 240px;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 8px !important;
  margin-top: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(26, 44, 29, 0.14) !important;
}

.khozam-appointments-create-dropdown__menu > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  border-radius: 9px;
  color: var(--khozam-purple) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  transition: background 0.16s ease, color 0.16s ease;
}

.khozam-appointments-create-dropdown__menu > li > a i {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(248, 240, 224, 0.9);
  color: var(--khozam-purple);
  font-size: 13px;
}

.khozam-appointments-create-dropdown__menu > li > a:hover,
.khozam-appointments-create-dropdown__menu > li > a:focus {
  background: rgba(248, 240, 224, 0.75) !important;
  color: var(--khozam-purple) !important;
}

.khozam-appointments-toolbar__tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 40;
}

.khozam-appointments-toolbar__tools .btn-group {
  margin: 0 !important;
  position: relative;
}

.khozam-appointments-toolbar__tools .dropdown-menu,
.khozam-appointments-page ._filter_data .dropdown-menu {
  left: auto !important;
  right: 0 !important;
  min-width: 220px;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  max-height: min(360px, 70vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px !important;
  margin-top: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 14px 36px rgba(26, 44, 29, 0.16) !important;
  z-index: 1060 !important;
}

.khozam-appointments-page ._filter_data .dropdown-menu > li > a {
  display: block;
  padding: 9px 12px !important;
  border-radius: 8px;
  color: var(--khozam-purple) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.khozam-appointments-page ._filter_data .dropdown-menu > li.active > a,
.khozam-appointments-page ._filter_data .dropdown-menu > li > a:hover,
.khozam-appointments-page ._filter_data .dropdown-menu > li > a:focus {
  background: rgba(248, 240, 224, 0.85) !important;
  color: var(--khozam-purple) !important;
}

.khozam-appointments-page ._filter_data .dropdown-menu > li.divider {
  margin: 6px 8px;
  background-color: rgba(26, 44, 29, 0.08);
}

.khozam-appointments-page .khozam-appointments-table {
  position: relative;
  z-index: 1;
}

.khozam-appointments-page .khozam-appointments-table .dataTables_wrapper .row:first-child,
.khozam-appointments-page .khozam-appointments-table .dataTables_length,
.khozam-appointments-page .khozam-appointments-table .dataTables_filter,
.khozam-appointments-page .khozam-appointments-table .dt-buttons {
  position: relative;
  z-index: 1;
}

.khozam-appointments-toolbar__divider {
  border-color: rgba(26, 44, 29, 0.08) !important;
  margin-top: 14px;
  margin-bottom: 4px;
}

/* Datatable polish (mirrors estimate-request table styling) */
.khozam-appointments-page .table-appointments.dataTable,
.khozam-appointments-page .table-appointments-history.dataTable,
.khozam-appointments-page .table-callbacks.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.khozam-appointments-page .table-appointments.dataTable thead th,
.khozam-appointments-page .table-appointments-history.dataTable thead th,
.khozam-appointments-page .table-callbacks.dataTable thead th {
  background: rgba(248, 240, 224, 0.5) !important;
  color: var(--khozam-purple) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  border-color: rgba(26, 44, 29, 0.06) !important;
  padding: 12px !important;
  vertical-align: middle !important;
}

.khozam-appointments-page .table-appointments.dataTable tbody td,
.khozam-appointments-page .table-appointments-history.dataTable tbody td,
.khozam-appointments-page .table-callbacks.dataTable tbody td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
  color: rgba(26, 44, 29, 0.88);
  border-color: rgba(26, 44, 29, 0.06) !important;
  font-size: 13px;
}

.khozam-appointments-page .table-appointments.dataTable tbody tr:hover td,
.khozam-appointments-page .table-appointments-history.dataTable tbody tr:hover td,
.khozam-appointments-page .table-callbacks.dataTable tbody tr:hover td {
  background: rgba(248, 240, 224, 0.42) !important;
}

.khozam-appointments-page .khozam-appointments-table .dataTables_wrapper .dataTables_info {
  color: rgba(26, 44, 29, 0.62);
  font-weight: 500;
}

.khozam-appointments-page .khozam-appointments-table .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  min-height: 34px;
  margin-inline: 2px;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
}

.khozam-appointments-page .khozam-appointments-table .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.khozam-appointments-page .khozam-appointments-table .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--khozam-gold) !important;
  border-color: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
}

@media (max-width: 767px) {
  .khozam-appointments-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .khozam-appointments-toolbar .khozam-page-toolbar__actions,
  .khozam-appointments-toolbar__actions,
  .khozam-appointments-toolbar__tools {
    width: 100%;
    float: none !important;
  }

  .khozam-appointments-toolbar__actions {
    flex-wrap: wrap;
  }

  .khozam-appointments-toolbar__actions .khozam-page-toolbar__btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .khozam-appointments-today__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Appointment create modals (staff meeting + contact/lead) ── */
.khozam-appointment-modal {
  font-family: var(--khozam-font);
}

.khozam-appointment-modal .modal-dialog {
  max-width: 780px;
  width: calc(100% - 32px);
  margin: 24px auto;
  overflow: visible;
}

.khozam-appointment-modal .modal-content {
  border: 0;
  border-radius: 16px;
  /* Must stay visible — overflow clips bootstrap-select menus */
  overflow: visible !important;
  box-shadow: 0 20px 60px rgba(26, 44, 29, 0.25);
  background: #fff;
}

.khozam-appointment-modal .modal-content.khozam-select-open {
  overflow: visible !important;
}

.khozam-appointment-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.22);
  border-radius: 16px 16px 0 0;
}

.khozam-appointment-modal__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.khozam-appointment-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(196, 168, 113, 0.22);
  color: var(--khozam-gold);
  font-size: 16px;
}

.khozam-appointment-modal .modal-title {
  margin: 0;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  border: 0;
  background: transparent;
}

.khozam-appointment-modal__subtitle {
  margin: 2px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.khozam-appointment-modal .modal-header .close {
  margin: 0;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 22px;
  font-weight: 400;
  opacity: 0.75;
  text-shadow: none;
  transition: opacity 0.2s ease;
}

.khozam-appointment-modal .modal-header .close:hover {
  opacity: 1;
}

.khozam-appointment-modal .modal-body {
  padding: 18px 20px 8px;
  /* No max-height/overflow clip — attendees dropdown must be able to paint */
  max-height: none;
  overflow: visible !important;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
}

.khozam-appointment-modal .modal-body.khozam-select-open,
.khozam-appointment-modal .khozam-appointment-modal__section.khozam-select-open,
.khozam-appointment-modal .form-group.khozam-select-open,
.khozam-appointment-modal .select-placeholder.khozam-select-open {
  overflow: visible !important;
}

.khozam-appointment-modal__section {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.07);
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.04);
  overflow: visible;
}

.khozam-appointment-modal__sync {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-appointment-modal__sync .checkbox {
  margin: 0 !important;
}

.khozam-appointment-modal__sync .checkbox label {
  color: var(--khozam-purple);
  font-weight: 600;
  font-size: 12px;
}

.khozam-appointment-modal__sync .checkbox label i {
  margin-inline-end: 4px;
  color: var(--khozam-gold);
}

.khozam-appointment-modal__section--last {
  margin-bottom: 10px;
}

.khozam-appointment-modal__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 700;
}

.khozam-appointment-modal__section-title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(248, 240, 224, 0.95);
  color: var(--khozam-purple);
  font-size: 12px;
}

.khozam-appointment-modal__hint {
  margin: 0 0 10px;
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  line-height: 1.5;
}

.khozam-appointment-modal__checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.khozam-appointment-modal__checks .checkbox {
  margin: 0 !important;
}

.khozam-appointment-modal__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(37, 211, 102, 0.1);
  color: #128c7e !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.16s ease;
}

.khozam-appointment-modal__whatsapp:hover,
.khozam-appointment-modal__whatsapp:focus {
  background: rgba(37, 211, 102, 0.18);
  color: #075e54 !important;
}

.khozam-appointment-modal__availability {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(248, 240, 224, 0.55);
  color: rgba(26, 44, 29, 0.72);
  font-size: 12px;
  font-weight: 600;
  float: none !important;
}

.khozam-appointment-modal__row {
  margin-left: -8px;
  margin-right: -8px;
}

.khozam-appointment-modal__row > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}

.khozam-appointment-modal .modal-body .form-group {
  margin-bottom: 12px;
}

.khozam-appointment-modal .modal-body .form-group > label,
.khozam-appointment-modal .modal-body .form-group > .control-label,
.khozam-appointment-modal .modal-body label.control-label {
  display: block;
  margin-bottom: 6px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
}

.khozam-appointment-modal .modal-body .form-control,
.khozam-appointment-modal .modal-body textarea.form-control,
.khozam-appointment-modal .modal-body textarea {
  border-radius: 10px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  box-shadow: none !important;
  min-height: 40px;
  padding: 9px 12px !important;
  color: rgba(26, 44, 29, 0.9);
  background: #fff !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.khozam-appointment-modal .modal-body textarea.form-control,
.khozam-appointment-modal .modal-body textarea {
  min-height: 96px;
  resize: vertical;
}

.khozam-appointment-modal .modal-body .form-control:focus,
.khozam-appointment-modal .modal-body textarea:focus {
  border-color: rgba(196, 168, 113, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.18) !important;
}

.khozam-appointment-modal .modal-body .bootstrap-select > .dropdown-toggle {
  border-radius: 10px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  min-height: 40px;
  padding: 8px 12px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--khozam-purple) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.khozam-appointment-modal .modal-body .bootstrap-select.open > .dropdown-toggle,
.khozam-appointment-modal .modal-body .bootstrap-select > .dropdown-toggle:focus,
.khozam-appointment-modal .modal-body .bootstrap-select > .dropdown-toggle:hover,
.khozam-appointment-modal .modal-body .bootstrap-select > .dropdown-toggle:active,
.khozam-appointment-modal .modal-body .bootstrap-select > .dropdown-toggle:active:focus,
.khozam-appointment-modal .modal-body .bootstrap-select > .dropdown-toggle:active:hover,
.khozam-appointment-modal .modal-body .bootstrap-select.show > .dropdown-toggle {
  background: #fff !important;
  background-image: none !important;
  border-color: rgba(196, 168, 113, 0.55) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.18) !important;
  outline: none !important;
}

/* Keep attendees/list menus visible inside the modal */
.khozam-appointment-modal .bootstrap-select {
  position: relative;
  z-index: 1;
}

.khozam-appointment-modal .bootstrap-select.open {
  z-index: 2000 !important;
}

.khozam-appointment-modal .bootstrap-select.dropup > .dropdown-menu {
  top: 100% !important;
  bottom: auto !important;
  transform: none !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}

/* IMPORTANT: only style the OUTER menu (direct child).
   bootstrap-select also uses ul.dropdown-menu.inner for options —
   styling that with position:absolute collapses the list. */
.khozam-appointment-modal .bootstrap-select > .dropdown-menu {
  z-index: 2001 !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-height: none !important;
  margin-top: 4px !important;
  padding: 6px 0 0 !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 16px 40px rgba(26, 44, 29, 0.22) !important;
  overflow: visible !important;
}

.khozam-appointment-modal .bootstrap-select.open > .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  clip: auto !important;
  height: auto !important;
}

/* When closed, force-hide so no ghost white box remains */
.khozam-appointment-modal .bootstrap-select:not(.open) > .dropdown-menu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.khozam-appointment-modal .bootstrap-select > .dropdown-menu > .inner {
  display: block !important;
  position: static !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Reset nested options list — must NOT inherit outer menu absolute positioning */
.khozam-appointment-modal .bootstrap-select > .dropdown-menu > .inner > ul.dropdown-menu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}

.khozam-appointment-modal .bootstrap-select > .dropdown-menu > .inner > ul.dropdown-menu > li {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  float: none !important;
  height: auto !important;
  min-height: 34px !important;
}

.khozam-appointment-modal .bootstrap-select > .dropdown-menu > .inner > ul.dropdown-menu > li > a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 8px 14px !important;
  color: var(--khozam-purple) !important;
  white-space: normal !important;
}

.khozam-appointment-modal .bootstrap-select .dropdown-menu .bs-searchbox {
  padding: 8px 10px 6px !important;
}

.khozam-appointment-modal .bootstrap-select .dropdown-menu .bs-searchbox .form-control {
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.14) !important;
  min-height: 36px;
}

.khozam-appointment-modal .bootstrap-select .dropdown-menu li a:hover,
.khozam-appointment-modal .bootstrap-select .dropdown-menu li.selected a,
.khozam-appointment-modal .bootstrap-select .dropdown-menu li.active a {
  background: rgba(196, 168, 113, 0.16) !important;
  color: var(--khozam-purple) !important;
}

.khozam-appointment-modal .bootstrap-select .dropdown-menu .bs-actionsbox {
  padding: 6px 10px 8px !important;
  border-bottom: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-appointment-modal .bootstrap-select .dropdown-menu .bs-actionsbox .btn {
  border-radius: 8px !important;
  font-size: 12px;
}

.khozam-appointment-modal .modal-body .input-group-addon {
  border-radius: 0 10px 10px 0 !important;
  border-color: rgba(26, 44, 29, 0.12);
  background: rgba(248, 240, 224, 0.65);
  color: var(--khozam-purple);
}

.khozam-appointment-modal .modal-body hr {
  border-color: rgba(26, 44, 29, 0.08);
  margin: 8px 0 14px;
}

.khozam-appointment-modal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 0 0 16px 16px;
}

.khozam-appointment-modal .modal-footer .btn {
  min-width: 110px;
}

.khozam-appointment-modal .modal-footer .khozam-page-toolbar__btn--primary:hover,
.khozam-appointment-modal .modal-footer .khozam-page-toolbar__btn--primary:focus,
.khozam-appointment-modal .modal-footer .khozam-page-toolbar__btn--primary:active {
  background: linear-gradient(135deg, #241c17 0%, #3a2e28 100%) !important;
  border-color: rgba(196, 168, 113, 0.45) !important;
  color: #fff !important;
  outline: none !important;
}

.khozam-appointment-modal .modal-footer .khozam-page-toolbar__btn--secondary:hover,
.khozam-appointment-modal .modal-footer .khozam-page-toolbar__btn--secondary:focus,
.khozam-appointment-modal .modal-footer .khozam-page-toolbar__btn--secondary:active {
  background: rgba(248, 240, 224, 0.72) !important;
  border-color: rgba(196, 168, 113, 0.4) !important;
  color: var(--khozam-purple) !important;
  outline: none !important;
}

/* Kill leftover Bootstrap purple flash on press/focus inside appointment modals */
.khozam-appointment-modal .btn:active,
.khozam-appointment-modal .btn:focus,
.khozam-appointment-modal .btn:active:focus,
.khozam-appointment-modal .btn.active {
  outline: none !important;
  -webkit-box-shadow: none;
}

.khozam-appointment-modal .btn-primary,
.khozam-appointment-modal .btn-primary:hover,
.khozam-appointment-modal .btn-primary:focus,
.khozam-appointment-modal .btn-primary:active,
.khozam-appointment-modal .btn-primary:active:hover,
.khozam-appointment-modal .btn-primary:active:focus {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%) !important;
  border-color: rgba(196, 168, 113, 0.28) !important;
  color: var(--khozam-cream) !important;
  outline: none !important;
  box-shadow: none !important;
}

.khozam-appointment-modal .btn-primary:hover,
.khozam-appointment-modal .btn-primary:active {
  background: linear-gradient(135deg, #241c17 0%, #3a2e28 100%) !important;
}

@media (max-width: 767px) {
  .khozam-appointment-modal .modal-dialog {
    width: calc(100% - 16px);
    margin: 12px auto;
  }

  .khozam-appointment-modal .modal-body {
    max-height: none;
    overflow: visible !important;
    padding: 14px 12px 6px;
  }

  .khozam-appointment-modal__section {
    padding: 12px;
  }

  .khozam-appointment-modal .modal-footer {
    justify-content: stretch;
  }

  .khozam-appointment-modal .modal-footer .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
}

/* ── Appointments user settings page (الإعدادات الخاصة) ── */
.khozam-appointments-settings-page .panel-body label.control-label {
  color: var(--khozam-purple) !important;
  font-weight: 600;
}

.khozam-appointments-settings-page .form-group {
  margin-bottom: 18px;
}

.khozam-appointments-settings-page hr {
  border-color: rgba(26, 44, 29, 0.08);
  margin-top: 14px;
  margin-bottom: 14px;
}

.khozam-appointments-settings__title {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: var(--khozam-purple) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
}

.khozam-appointments-settings__title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-gold) !important;
  font-size: 16px !important;
  flex-shrink: 0;
}

[dir="rtl"] .khozam-appointments-settings__title {
  flex-direction: row-reverse;
}

.khozam-appointments-settings-page .radio.radio-primary.radio-inline {
  margin-inline-end: 18px;
}

.khozam-appointments-settings-page .radio.radio-primary.radio-inline input[type="radio"]:checked + label {
  color: var(--khozam-purple) !important;
  font-weight: 700;
}

.khozam-appointments-settings-page .pull-right[ data-target="#typesModal"],
.khozam-appointments-settings-page button[data-target="#typesModal"] {
  margin-bottom: 8px;
}

.khozam-appointments-settings-page button[type="submit"] {
  margin-top: 8px;
}

/* ── External appointment form (معلومات النموذج)
   Full styles live in modules/appointly/assets/css/appointments_external_form.css
   Keep body override here so admin brown theme does not paint the public form. ── */
body.khozam-appointments-form-body,
body.appointments-external-form.khozam-appointments-form-body {
  background:
    radial-gradient(1200px 520px at 8% -8%, rgba(196, 168, 113, 0.22), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(26, 44, 29, 0.14), transparent 52%),
    linear-gradient(180deg, #f7f2ec 0%, #efe8df 100%) !important;
  font-family: var(--khozam-font) !important;
}

/* ============================================================
   New leads · 30 days compact chart
   ============================================================ */
.khozam-new-leads {
  margin-top: 20px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: #fff;
  box-shadow: 0 4px 18px rgba(26, 44, 29, 0.04);
  overflow: hidden;
  font-family: var(--khozam-font);
}

.khozam-new-leads__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  background: linear-gradient(180deg, #fff 0%, #fbf8f4 100%);
}

.khozam-new-leads__header-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.khozam-new-leads__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--khozam-purple);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khozam-new-leads__subtitle {
  margin: 1px 0 0;
  font-size: 10px;
  color: #8d8494;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khozam-new-leads__total {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 9px;
  background: rgba(248, 240, 224, 0.7);
  border: 1px solid rgba(196, 168, 113, 0.25);
  flex-shrink: 0;
}

.khozam-new-leads__total strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--khozam-purple);
  line-height: 1.1;
}

.khozam-new-leads__total span {
  margin-top: 1px;
  font-size: 9px;
  font-weight: 600;
  color: #8d8494;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.khozam-new-leads__chart-wrap {
  position: relative;
  height: 130px;
  padding: 10px 12px 4px;
}

.khozam-new-leads__canvas {
  width: 100% !important;
  height: 100% !important;
}

.khozam-new-leads__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  background: rgba(26, 44, 29, 0.06);
  border-top: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-new-leads__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: #fff;
  text-align: center;
  min-width: 0;
}

.khozam-new-leads__stat-label {
  font-size: 9px;
  font-weight: 600;
  color: #8d8494;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
  white-space: nowrap;
}

.khozam-new-leads__stat-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--khozam-purple);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.1;
}

.khozam-new-leads__stat-value i {
  font-size: 10px;
}

.khozam-new-leads__stat-value.is-up {
  color: #3d9a5f;
}

.khozam-new-leads__stat-value.is-down {
  color: #c0392b;
}

@media (max-width: 767px) {
  .khozam-new-leads__title {
    font-size: 12px;
  }

  .khozam-new-leads__subtitle {
    font-size: 9px;
  }

  .khozam-new-leads__chart-wrap {
    height: 110px;
    padding: 8px 10px 4px;
  }
}

/* ── New client form page (عميل جديد) ── */
.khozam-client-form-page .content {
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 28px;
}

.khozam-client-form-page__hero {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-client-form-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: rgba(248, 240, 224, 0.78) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 0.18s ease;
}

.khozam-client-form-page__back:hover,
.khozam-client-form-page__back:focus {
  color: var(--khozam-cream) !important;
}

.khozam-client-form-page__hero-copy {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.khozam-client-form-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-client-form-page__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.khozam-client-form-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.6;
  max-width: 620px;
}

.khozam-client-form-page__panel {
  border-radius: 16px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.08) !important;
  overflow: visible;
  margin-bottom: 0 !important;
}

.khozam-client-form-page__panel-body {
  padding: 0 !important;
  background: #f8f6f2 !important;
}

.khozam-client-form-page__tabs-wrap {
  background: #fff;
  border-bottom: 1px solid rgba(26, 44, 29, 0.08);
  padding: 14px 18px 12px;
  position: relative;
}

.khozam-client-form-page__tabs-wrap.horizontal-scrollable-tabs {
  display: block;
}

.khozam-client-form-page__tabs-wrap .scroller {
  display: none !important;
}

.khozam-client-form-page__tabs-wrap .horizontal-tabs {
  overflow: visible !important;
  width: 100% !important;
  margin: 0 !important;
}

.khozam-client-form-page__tabs {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  margin: 0 !important;
  padding: 6px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  border-radius: 14px !important;
  background: #f8f6f2 !important;
  list-style: none;
  float: none !important;
}

.khozam-client-form-page__tabs > li {
  float: none !important;
  flex: 1 1 160px;
  margin: 0 !important;
  display: flex;
}

.khozam-client-form-page__tabs > li > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  color: rgba(26, 44, 29, 0.62) !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.khozam-client-form-page__tabs > li > a i {
  color: var(--khozam-gold);
  font-size: 14px;
  flex-shrink: 0;
}

.khozam-client-form-page__tabs > li > a:hover,
.khozam-client-form-page__tabs > li > a:focus {
  color: var(--khozam-purple) !important;
  background: rgba(248, 240, 224, 0.75) !important;
  border-color: rgba(196, 168, 113, 0.28) !important;
  text-decoration: none !important;
}

.khozam-client-form-page__tabs > li.active > a,
.khozam-client-form-page__tabs > li.active > a:hover,
.khozam-client-form-page__tabs > li.active > a:focus {
  color: var(--khozam-cream) !important;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid, #243b2f) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.18) !important;
}

.khozam-client-form-page__tabs > li.active > a i {
  color: var(--khozam-gold);
}

.khozam-client-form-page__tab-content {
  padding: 18px;
  margin-top: 0 !important;
}

.khozam-client-form-page .khozam-form-section {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.04);
}

.khozam-client-form-page .khozam-form-section:last-child {
  margin-bottom: 0;
}

.khozam-client-form-page .khozam-form-section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-client-form-page .khozam-form-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.14);
  color: var(--khozam-purple);
  font-size: 15px;
  flex-shrink: 0;
}

.khozam-client-form-page .khozam-form-section-title {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
}

.khozam-client-form-page .khozam-form-section-subtitle {
  margin: 4px 0 0;
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  line-height: 1.5;
}

.khozam-client-form-page .form-group label,
.khozam-client-form-page .control-label {
  color: rgba(26, 44, 29, 0.78);
  font-size: 12px;
  font-weight: 600;
}

.khozam-client-form-page .form-control,
.khozam-client-form-page .bootstrap-select .dropdown-toggle {
  min-height: 42px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.khozam-client-form-page .form-control:focus,
.khozam-client-form-page .bootstrap-select.open .dropdown-toggle,
.khozam-client-form-page .bootstrap-select .dropdown-toggle:focus {
  border-color: rgba(196, 168, 113, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.16) !important;
}

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

.khozam-client-form-page__copy-link-wrap {
  margin-bottom: 14px;
}

.khozam-client-form-page__copy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.72);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-purple) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.khozam-client-form-page__copy-link:hover,
.khozam-client-form-page__copy-link:focus {
  background: rgba(248, 240, 224, 1);
  border-color: rgba(196, 168, 113, 0.45);
}

.khozam-client-form-page__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px !important;
  background: #fff !important;
  border-top: 1px solid rgba(26, 44, 29, 0.08) !important;
}

.khozam-client-form-page__footer .khozam-page-toolbar__btn {
  min-width: 132px;
}

.khozam-client-form-page__cancel {
  margin-inline-end: auto;
}

@media (max-width: 767px) {
  .khozam-client-form-page .content {
    padding-inline: 10px;
  }

  .khozam-client-form-page__hero {
    padding: 16px;
  }

  .khozam-client-form-page__hero-copy {
    flex-direction: column;
    gap: 12px;
  }

  .khozam-client-form-page__title {
    font-size: 18px;
  }

  .khozam-client-form-page__tabs-wrap {
    padding: 12px 10px 10px;
  }

  .khozam-client-form-page__tabs {
    gap: 4px;
    padding: 4px !important;
  }

  .khozam-client-form-page__tabs > li {
    flex: 1 1 100%;
  }

  .khozam-client-form-page__tabs > li > a {
    padding: 11px 12px !important;
    font-size: 12px;
  }

  .khozam-client-form-page__tab-content {
    padding: 12px;
  }

  .khozam-client-form-page .khozam-form-section {
    padding: 14px;
  }

  .khozam-client-form-page__footer {
    justify-content: stretch;
  }

  .khozam-client-form-page__footer .khozam-page-toolbar__btn {
    width: 100%;
    min-width: 0;
  }

  .khozam-client-form-page__cancel {
    margin-inline-end: 0;
  }
}

/* ============================================================
 * Azyan Khozam — Import Customers page
 * Mirrors the khozam-sakani-leads design system: purple hero,
 * cream console + guide split, gold dropzone, gold primary CTA.
 * ============================================================ */

.khozam-import-customers__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-import-customers__hero-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 420px;
  min-width: 0;
}

.khozam-import-customers__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-import-customers__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 700;
}

.khozam-import-customers__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.55;
  max-width: 640px;
}

.khozam-import-customers__sample-btn {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: 1px solid rgba(196, 168, 113, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(248, 240, 224, 0.12) !important;
  color: var(--khozam-cream) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.khozam-import-customers__sample-btn:hover,
.khozam-import-customers__sample-btn:focus {
  background: rgba(196, 168, 113, 0.22) !important;
  border-color: rgba(196, 168, 113, 0.65) !important;
  color: var(--khozam-cream) !important;
  text-decoration: none !important;
}

.khozam-import-customers__sample-btn form {
  display: inline;
  margin: 0;
  padding: 0;
}

.khozam-import-customers__sample-btn form button.btn.btn-success {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(196, 168, 113, 0.42);
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-cream);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.khozam-import-customers__sample-btn form button.btn.btn-success:hover,
.khozam-import-customers__sample-btn form button.btn.btn-success:focus {
  background: rgba(196, 168, 113, 0.22);
  border-color: rgba(196, 168, 113, 0.65);
  color: var(--khozam-cream);
}

.khozam-import-customers__sample-btn form button.btn.btn-success::before {
  content: "\f019";
  font-family: "FontAwesome";
  font-size: 14px;
  margin-inline-end: 6px;
}

.khozam-import-customers__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.khozam-import-customers__back:hover,
.khozam-import-customers__back:focus {
  color: var(--khozam-purple);
  text-decoration: none;
}

.khozam-import-customers__console,
.khozam-import-customers__guide {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09) !important;
  background: #fff !important;
  margin-bottom: 18px;
}

.khozam-import-customers__console-body,
.khozam-import-customers__guide-body {
  padding: 0 !important;
  background: #fbf8f4;
}

.khozam-import-customers__console-header,
.khozam-import-customers__guide-header {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.18);
}

.khozam-import-customers__console-title,
.khozam-import-customers__guide-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--khozam-cream);
  font-size: 14px;
  font-weight: 700;
}

.khozam-import-customers__console-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-gold);
  font-size: 13px;
}

.khozam-import-customers__console-subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.68);
  font-size: 12px;
  line-height: 1.5;
}

.khozam-import-customers__console-content {
  padding: 16px;
}

.khozam-import-customers__upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 170px;
  padding: 24px 20px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 2px dashed rgba(26, 44, 29, 0.14);
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.khozam-import-customers__upload-zone:hover,
.khozam-import-customers__upload-zone.is-dragover {
  border-color: rgba(196, 168, 113, 0.55);
  background: rgba(248, 240, 224, 0.42);
}

.khozam-import-customers__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.khozam-import-customers__upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(248, 240, 224, 0.72);
  color: var(--khozam-purple);
  font-size: 24px;
}

.khozam-import-customers__upload-text {
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
}

.khozam-import-customers__upload-hint {
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
}

.khozam-import-customers__file-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-import-customers__file-meta > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-purple);
  font-size: 18px;
}

.khozam-import-customers__file-meta-copy {
  flex: 1;
  min-width: 0;
}

.khozam-import-customers__file-meta-copy strong {
  display: block;
  color: var(--khozam-purple);
  font-size: 13px;
  word-break: break-all;
}

.khozam-import-customers__file-meta-copy span {
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
}

.khozam-import-customers__file-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(26, 44, 29, 0.06);
  color: var(--khozam-purple);
  cursor: pointer;
  transition: background 0.2s ease;
}

.khozam-import-customers__file-clear:hover {
  background: rgba(196, 168, 113, 0.22);
}

.khozam-import-customers__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 14px;
  color: rgba(26, 44, 29, 0.45);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.khozam-import-customers__divider::before,
.khozam-import-customers__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(26, 44, 29, 0.08);
}

.khozam-import-customers__form-group {
  margin-bottom: 14px;
}

.khozam-import-customers__form-group label {
  display: block;
  margin-bottom: 6px;
  color: rgba(26, 44, 29, 0.78);
  font-size: 12px;
  font-weight: 600;
}

.khozam-import-customers__form-group .form-control,
.khozam-import-customers__form-group .bootstrap-select > .dropdown-toggle {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.khozam-import-customers__form-group .form-control:focus,
.khozam-import-customers__form-group .bootstrap-select > .dropdown-toggle:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

.khozam-import-customers__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-import-customers__submit-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.28);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.khozam-import-customers__submit-btn:hover,
.khozam-import-customers__submit-btn:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 10px 22px rgba(196, 168, 113, 0.4);
}

.khozam-import-customers__submit-btn[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.khozam-import-customers__simulate-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: 1px solid rgba(26, 44, 29, 0.14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.khozam-import-customers__simulate-btn:hover,
.khozam-import-customers__simulate-btn:focus {
  background: rgba(248, 240, 224, 0.5) !important;
  border-color: rgba(196, 168, 113, 0.55) !important;
  color: var(--khozam-purple) !important;
}

.khozam-import-customers__guide-content {
  direction: rtl;
  text-align: right;
  padding: 16px;
}

.khozam-import-customers__steps {
  margin: 0 0 16px;
  padding: 0 1.4rem 0 0;
  list-style-position: outside;
  color: rgba(26, 44, 29, 0.82);
  line-height: 1.75;
  font-size: 13px;
}

.khozam-import-customers__guide-content .khozam-import-customers__steps {
  padding-inline-start: 0;
  padding-inline-end: 1.4rem;
}

.khozam-import-customers__steps li + li {
  margin-top: 8px;
}

.khozam-import-customers__tips {
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-import-customers__tips-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 700;
}

.khozam-import-customers__guide-content .khozam-import-customers__tips-title {
  justify-content: flex-start;
}

.khozam-import-customers__tips-title i {
  color: var(--khozam-gold);
}

.khozam-import-customers__tips ul {
  margin: 0;
  padding: 0 1.2rem 0 0;
  list-style-position: outside;
  color: rgba(26, 44, 29, 0.72);
  font-size: 13px;
  line-height: 1.65;
}

.khozam-import-customers__tips ul li + li {
  margin-top: 6px;
}

.khozam-import-customers__sample-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.khozam-import-customers__sample-table thead th {
  background: var(--khozam-purple);
  color: var(--khozam-cream);
  padding: 10px 12px;
  font-weight: 600;
  border-bottom: 1px solid rgba(196, 168, 113, 0.22);
  white-space: nowrap;
}

.khozam-import-customers__sample-table thead th:first-child {
  border-top-right-radius: 10px;
}

.khozam-import-customers__sample-table thead th:last-child {
  border-top-left-radius: 10px;
}

.khozam-import-customers__sample-table tbody td {
  padding: 8px 12px;
  background: #fff;
  color: rgba(26, 44, 29, 0.72);
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  white-space: nowrap;
}

.khozam-import-customers__sample-table tbody tr:last-child td:first-child {
  border-bottom-right-radius: 10px;
}

.khozam-import-customers__sample-table tbody tr:last-child td:last-child {
  border-bottom-left-radius: 10px;
}

.khozam-import-customers__sample-wrap {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  overflow-x: auto;
}

.khozam-import-customers__sample-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
}

.khozam-import-customers__sample-label i {
  color: var(--khozam-gold);
}

.khozam-import-customers__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(196, 168, 113, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-purple);
  font-size: 12px;
  line-height: 1.55;
}

.khozam-import-customers__notice i {
  color: var(--khozam-gold);
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

.khozam-import-customers__notice strong {
  color: var(--khozam-purple);
}

@media (max-width: 768px) {
  .khozam-import-customers__hero {
    padding: 14px 16px;
  }
  .khozam-import-customers__hero-main {
    flex: 1 1 100%;
  }
  .khozam-import-customers__sample-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
 * Azyan Khozam — Import Leads page
 * Mirrors khozam-sakani-leads + khozam-import-customers design.
 * Separate namespace for safe co-existence with customers page.
 * ============================================================ */

.khozam-import-leads__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-import-leads__hero-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 420px;
  min-width: 0;
}

.khozam-import-leads__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-import-leads__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 700;
}

.khozam-import-leads__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.55;
  max-width: 640px;
}

.khozam-import-leads__sample-btn {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: 1px solid rgba(196, 168, 113, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(248, 240, 224, 0.12) !important;
  color: var(--khozam-cream) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.khozam-import-leads__sample-btn:hover,
.khozam-import-leads__sample-btn:focus {
  background: rgba(196, 168, 113, 0.22) !important;
  border-color: rgba(196, 168, 113, 0.65) !important;
  color: var(--khozam-cream) !important;
  text-decoration: none !important;
}

.khozam-import-leads__sample-btn form {
  display: inline;
  margin: 0;
  padding: 0;
}

.khozam-import-leads__sample-btn form button.btn.btn-success {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(196, 168, 113, 0.42);
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-cream);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.khozam-import-leads__sample-btn form button.btn.btn-success:hover,
.khozam-import-leads__sample-btn form button.btn.btn-success:focus {
  background: rgba(196, 168, 113, 0.22);
  border-color: rgba(196, 168, 113, 0.65);
  color: var(--khozam-cream);
}

.khozam-import-leads__sample-btn form button.btn.btn-success::before {
  content: "\f019";
  font-family: "FontAwesome";
  font-size: 14px;
  margin-inline-end: 6px;
}

.khozam-import-leads__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.khozam-import-leads__back:hover,
.khozam-import-leads__back:focus {
  color: var(--khozam-purple);
  text-decoration: none;
}

.khozam-import-leads__console,
.khozam-import-leads__guide {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09) !important;
  background: #fff !important;
  margin-bottom: 18px;
}

.khozam-import-leads__console-body,
.khozam-import-leads__guide-body {
  padding: 0 !important;
  background: #fbf8f4;
}

.khozam-import-leads__console-header,
.khozam-import-leads__guide-header {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.18);
}

.khozam-import-leads__console-title,
.khozam-import-leads__guide-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--khozam-cream);
  font-size: 14px;
  font-weight: 700;
}

.khozam-import-leads__console-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-gold);
  font-size: 13px;
}

.khozam-import-leads__console-subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.68);
  font-size: 12px;
  line-height: 1.5;
}

.khozam-import-leads__console-content {
  padding: 16px;
}

.khozam-import-leads__upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 170px;
  padding: 24px 20px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 2px dashed rgba(26, 44, 29, 0.14);
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.khozam-import-leads__upload-zone:hover,
.khozam-import-leads__upload-zone.is-dragover {
  border-color: rgba(196, 168, 113, 0.55);
  background: rgba(248, 240, 224, 0.42);
}

.khozam-import-leads__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.khozam-import-leads__upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(248, 240, 224, 0.72);
  color: var(--khozam-purple);
  font-size: 24px;
}

.khozam-import-leads__upload-text {
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
}

.khozam-import-leads__upload-hint {
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
}

.khozam-import-leads__file-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-import-leads__file-meta > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-purple);
  font-size: 18px;
}

.khozam-import-leads__file-meta-copy {
  flex: 1;
  min-width: 0;
}

.khozam-import-leads__file-meta-copy strong {
  display: block;
  color: var(--khozam-purple);
  font-size: 13px;
  word-break: break-all;
}

.khozam-import-leads__file-meta-copy span {
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
}

.khozam-import-leads__file-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(26, 44, 29, 0.06);
  color: var(--khozam-purple);
  cursor: pointer;
  transition: background 0.2s ease;
}

.khozam-import-leads__file-clear:hover {
  background: rgba(196, 168, 113, 0.22);
}

.khozam-import-leads__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 14px;
  color: rgba(26, 44, 29, 0.45);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.khozam-import-leads__divider::before,
.khozam-import-leads__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(26, 44, 29, 0.08);
}

.khozam-import-leads__form-group {
  margin-bottom: 14px;
}

.khozam-import-leads__form-group label {
  display: block;
  margin-bottom: 6px;
  color: rgba(26, 44, 29, 0.78);
  font-size: 12px;
  font-weight: 600;
}

.khozam-import-leads__form-group .form-control,
.khozam-import-leads__form-group .bootstrap-select > .dropdown-toggle {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.khozam-import-leads__form-group .form-control:focus,
.khozam-import-leads__form-group .bootstrap-select > .dropdown-toggle:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

.khozam-import-leads__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-import-leads__submit-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.28);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.khozam-import-leads__submit-btn:hover,
.khozam-import-leads__submit-btn:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 10px 22px rgba(196, 168, 113, 0.4);
}

.khozam-import-leads__submit-btn[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.khozam-import-leads__simulate-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: 1px solid rgba(26, 44, 29, 0.14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.khozam-import-leads__simulate-btn:hover,
.khozam-import-leads__simulate-btn:focus {
  background: rgba(248, 240, 224, 0.5) !important;
  border-color: rgba(196, 168, 113, 0.55) !important;
  color: var(--khozam-purple) !important;
}

.khozam-import-leads__guide-content {
  direction: rtl;
  text-align: right;
  padding: 16px;
}

.khozam-import-leads__steps {
  margin: 0 0 16px;
  padding: 0 1.4rem 0 0;
  list-style-position: outside;
  color: rgba(26, 44, 29, 0.82);
  line-height: 1.75;
  font-size: 13px;
}

.khozam-import-leads__guide-content .khozam-import-leads__steps {
  padding-inline-start: 0;
  padding-inline-end: 1.4rem;
}

.khozam-import-leads__steps li + li {
  margin-top: 8px;
}

.khozam-import-leads__tips {
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-import-leads__tips-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 700;
}

.khozam-import-leads__guide-content .khozam-import-leads__tips-title {
  justify-content: flex-start;
}

.khozam-import-leads__tips-title i {
  color: var(--khozam-gold);
}

.khozam-import-leads__tips ul {
  margin: 0;
  padding: 0 1.2rem 0 0;
  list-style-position: outside;
  color: rgba(26, 44, 29, 0.72);
  font-size: 13px;
  line-height: 1.65;
}

.khozam-import-leads__tips ul li + li {
  margin-top: 6px;
}

.khozam-import-leads__sample-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.khozam-import-leads__sample-table thead th {
  background: var(--khozam-purple);
  color: var(--khozam-cream);
  padding: 10px 12px;
  font-weight: 600;
  border-bottom: 1px solid rgba(196, 168, 113, 0.22);
  white-space: nowrap;
}

.khozam-import-leads__sample-table thead th:first-child {
  border-top-right-radius: 10px;
}

.khozam-import-leads__sample-table thead th:last-child {
  border-top-left-radius: 10px;
}

.khozam-import-leads__sample-table tbody td {
  padding: 8px 12px;
  background: #fff;
  color: rgba(26, 44, 29, 0.72);
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  white-space: nowrap;
}

.khozam-import-leads__sample-table tbody tr:last-child td:first-child {
  border-bottom-right-radius: 10px;
}

.khozam-import-leads__sample-table tbody tr:last-child td:last-child {
  border-bottom-left-radius: 10px;
}

.khozam-import-leads__sample-wrap {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  overflow-x: auto;
}

.khozam-import-leads__sample-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
}

.khozam-import-leads__sample-label i {
  color: var(--khozam-gold);
}

.khozam-import-leads__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(196, 168, 113, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-purple);
  font-size: 12px;
  line-height: 1.55;
}

.khozam-import-leads__notice i {
  color: var(--khozam-gold);
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

.khozam-import-leads__notice strong {
  color: var(--khozam-purple);
}

@media (max-width: 768px) {
  .khozam-import-leads__hero {
    padding: 14px 16px;
  }
  .khozam-import-leads__hero-main {
    flex: 1 1 100%;
  }
  .khozam-import-leads__sample-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
 * Azyan Khozam — Call Logs Overview page
 * Improves the legacy gantt.php overview into the Khozam design.
 * Scoped under .khozam-call-logs-overview-page to avoid leaking.
 * ============================================================ */

.khozam-call-logs-overview-page .widget-wq {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09);
  background: #fff;
  margin-bottom: 18px;
  padding: 0;
}

.khozam-call-logs-overview-page .widget-wq h3,
.khozam-call-logs-overview-page .widget-wq h4 {
  margin: 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid rgba(196, 168, 113, 0.18);
  display: flex;
  align-items: center;
  gap: 10px;
}

.khozam-call-logs-overview-page .widget-wq h3::before,
.khozam-call-logs-overview-page .widget-wq h4::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--khozam-gold);
  box-shadow: 0 0 0 4px rgba(196, 168, 113, 0.18);
}

.khozam-call-logs-overview-page .widget-wq .row.text-center {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 20px 12px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
}

.khozam-call-logs-overview-page .widget-wq .row.text-center > .col-xs-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.khozam-call-logs-overview-page .widget-wq .row.text-center > .col-xs-6:hover {
  background: rgba(248, 240, 224, 0.5);
}

.khozam-call-logs-overview-page .widget-wq .text-primary {
  color: var(--khozam-purple) !important;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.khozam-call-logs-overview-page .widget-wq .text-success {
  color: #2e7d32 !important;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.khozam-call-logs-overview-page .widget-wq .row.text-center > .col-xs-6 > span {
  font-size: 12px;
  color: rgba(26, 44, 29, 0.65);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.khozam-call-logs-overview-page .widget-wq .row.text-center > .col-xs-6:first-child {
  border-inline-end: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-call-logs-overview-page .widget-wq .relative {
  padding: 16px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
}

.khozam-call-logs-overview-page .widget-wq .chart {
  max-width: 100%;
}

.khozam-call-logs-overview-page #call-logs-table {
  margin-bottom: 18px;
}

.khozam-call-logs-overview-page #call-logs-table .col-md-12:first-child {
  display: none;
}

.khozam-call-logs-overview-page #call-logs-table .hr-panel-heading {
  display: none;
}

.khozam-call-logs-overview-page .cl-filter-column {
  width: 100%;
}

.khozam-call-logs-overview-page .cl-filter-column .bootstrap-select {
  width: 100% !important;
}

.khozam-call-logs-overview-page .cl-filter-column .form-group {
  margin-bottom: 0;
}

.khozam-call-logs-overview-page #call-logs-table .col-md-12:last-child {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.05);
  display: flex;
  align-items: center;
  gap: 14px;
}

.khozam-call-logs-overview-page #call-logs-table .col-md-12:last-child::before {
  content: "\f0b0";
  font-family: "FontAwesome";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-purple);
  font-size: 16px;
  flex-shrink: 0;
}

.khozam-call-logs-overview-page #call-logs-table .col-md-12:last-child .cl-filter-column {
  flex: 1;
  min-width: 0;
}

.khozam-call-logs-overview-page .khozam-call-logs-overview__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-call-logs-overview__hero-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 420px;
  min-width: 0;
}

.khozam-call-logs-overview__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-call-logs-overview__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 700;
}

.khozam-call-logs-overview__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.55;
  max-width: 640px;
}

.khozam-call-logs-overview__back {
  flex-shrink: 0;
}

.khozam-call-logs-overview__hero .btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: 1px solid rgba(196, 168, 113, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(248, 240, 224, 0.12) !important;
  color: var(--khozam-cream) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.khozam-call-logs-overview__hero .btn:hover,
.khozam-call-logs-overview__hero .btn:focus {
  background: rgba(196, 168, 113, 0.22) !important;
  border-color: rgba(196, 168, 113, 0.65) !important;
  color: var(--khozam-cream) !important;
  text-decoration: none !important;
}

.khozam-call-logs-overview__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.khozam-call-logs-overview__kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.khozam-call-logs-overview__kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(26, 44, 29, 0.1);
  border-color: rgba(196, 168, 113, 0.3);
}

.khozam-call-logs-overview__kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(248, 240, 224, 0.72);
  color: var(--khozam-purple);
  font-size: 18px;
  flex-shrink: 0;
}

.khozam-call-logs-overview__kpi--inbound .khozam-call-logs-overview__kpi-icon {
  background: rgba(33, 150, 243, 0.12);
  color: #1976d2;
}

.khozam-call-logs-overview__kpi--outbound .khozam-call-logs-overview__kpi-icon {
  background: rgba(46, 125, 50, 0.12);
  color: #2e7d32;
}

.khozam-call-logs-overview__kpi--total .khozam-call-logs-overview__kpi-icon {
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
}

.khozam-call-logs-overview__kpi-body {
  flex: 1;
  min-width: 0;
}

.khozam-call-logs-overview__kpi-label {
  display: block;
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.khozam-call-logs-overview__kpi-value {
  color: var(--khozam-purple);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.khozam-call-logs-overview__staff-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.05);
}

.khozam-call-logs-overview__staff-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-purple);
  font-size: 15px;
  flex-shrink: 0;
}

.khozam-call-logs-overview__staff-bar-label {
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.khozam-call-logs-overview__staff-bar-select {
  flex: 1;
  min-width: 0;
}

.khozam-call-logs-overview__staff-bar-select .bootstrap-select {
  width: 100% !important;
}

.khozam-call-logs-overview__staff-bar-select .form-group {
  margin-bottom: 0;
}

.khozam-call-logs-overview__staff-bar-select .form-control,
.khozam-call-logs-overview__staff-bar-select .bootstrap-select > .dropdown-toggle {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 12px;
  box-shadow: none !important;
}

.khozam-call-logs-overview__staff-bar-select .form-control:focus,
.khozam-call-logs-overview__staff-bar-select .bootstrap-select > .dropdown-toggle:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

.khozam-call-logs-overview__charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.khozam-call-logs-overview__chart-card {
  border: 0;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09);
  background: #fff;
}

.khozam-call-logs-overview__chart-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.18);
}

.khozam-call-logs-overview__chart-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-gold);
  font-size: 13px;
}

.khozam-call-logs-overview__chart-title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 14px;
  font-weight: 700;
}

.khozam-call-logs-overview__chart-body {
  padding: 16px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
}

.khozam-call-logs-overview__chart-canvas-wrap {
  position: relative;
  width: 100%;
}

@media (max-width: 768px) {
  .khozam-call-logs-overview__hero {
    padding: 14px 16px;
  }
  .khozam-call-logs-overview__hero-main {
    flex: 1 1 100%;
  }
  .khozam-call-logs-overview__back {
    width: 100%;
  }
  .khozam-call-logs-overview__back .btn {
    width: 100%;
    justify-content: center;
  }
  .khozam-call-logs-overview__kpis {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * Azyan Khozam — Import Items page (Invoice Items)
 * Mirrors khozam-import-customers / khozam-import-leads.
 * Separate namespace for safe co-existence.
 * ============================================================ */

.khozam-import-items__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-import-items__hero-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 420px;
  min-width: 0;
}

.khozam-import-items__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-import-items__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 700;
}

.khozam-import-items__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.55;
  max-width: 640px;
}

.khozam-import-items__sample-btn {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: 1px solid rgba(196, 168, 113, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(248, 240, 224, 0.12) !important;
  color: var(--khozam-cream) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.khozam-import-items__sample-btn:hover,
.khozam-import-items__sample-btn:focus {
  background: rgba(196, 168, 113, 0.22) !important;
  border-color: rgba(196, 168, 113, 0.65) !important;
  color: var(--khozam-cream) !important;
  text-decoration: none !important;
}

.khozam-import-items__sample-btn form {
  display: inline;
  margin: 0;
  padding: 0;
}

.khozam-import-items__sample-btn form button.btn.btn-success {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(196, 168, 113, 0.42);
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-cream);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.khozam-import-items__sample-btn form button.btn.btn-success:hover,
.khozam-import-items__sample-btn form button.btn.btn-success:focus {
  background: rgba(196, 168, 113, 0.22);
  border-color: rgba(196, 168, 113, 0.65);
  color: var(--khozam-cream);
}

.khozam-import-items__sample-btn form button.btn.btn-success::before {
  content: "\f019";
  font-family: "FontAwesome";
  font-size: 14px;
  margin-inline-end: 6px;
}

.khozam-import-items__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.khozam-import-items__back:hover,
.khozam-import-items__back:focus {
  color: var(--khozam-purple);
  text-decoration: none;
}

.khozam-import-items__console,
.khozam-import-items__guide {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09) !important;
  background: #fff !important;
  margin-bottom: 18px;
}

.khozam-import-items__console-body,
.khozam-import-items__guide-body {
  padding: 0 !important;
  background: #fbf8f4;
}

.khozam-import-items__console-header,
.khozam-import-items__guide-header {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.18);
}

.khozam-import-items__console-title,
.khozam-import-items__guide-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--khozam-cream);
  font-size: 14px;
  font-weight: 700;
}

.khozam-import-items__console-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-gold);
  font-size: 13px;
}

.khozam-import-items__console-subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.68);
  font-size: 12px;
  line-height: 1.5;
}

.khozam-import-items__console-content {
  padding: 16px;
}

.khozam-import-items__upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
  padding: 32px 20px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 2px dashed rgba(26, 44, 29, 0.14);
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.khozam-import-items__upload-zone:hover,
.khozam-import-items__upload-zone.is-dragover {
  border-color: rgba(196, 168, 113, 0.55);
  background: rgba(248, 240, 224, 0.42);
}

.khozam-import-items__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.khozam-import-items__upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(248, 240, 224, 0.72);
  color: var(--khozam-purple);
  font-size: 26px;
}

.khozam-import-items__upload-text {
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
}

.khozam-import-items__upload-hint {
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
}

.khozam-import-items__file-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-import-items__file-meta > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-purple);
  font-size: 18px;
}

.khozam-import-items__file-meta-copy {
  flex: 1;
  min-width: 0;
}

.khozam-import-items__file-meta-copy strong {
  display: block;
  color: var(--khozam-purple);
  font-size: 13px;
  word-break: break-all;
}

.khozam-import-items__file-meta-copy span {
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
}

.khozam-import-items__file-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(26, 44, 29, 0.06);
  color: var(--khozam-purple);
  cursor: pointer;
  transition: background 0.2s ease;
}

.khozam-import-items__file-clear:hover {
  background: rgba(196, 168, 113, 0.22);
}

.khozam-import-items__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-import-items__submit-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.28);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.khozam-import-items__submit-btn:hover,
.khozam-import-items__submit-btn:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 10px 22px rgba(196, 168, 113, 0.4);
}

.khozam-import-items__submit-btn[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.khozam-import-items__simulate-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: 1px solid rgba(26, 44, 29, 0.14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.khozam-import-items__simulate-btn:hover,
.khozam-import-items__simulate-btn:focus {
  background: rgba(248, 240, 224, 0.5) !important;
  border-color: rgba(196, 168, 113, 0.55) !important;
  color: var(--khozam-purple) !important;
}

.khozam-import-items__guide-content {
  direction: rtl;
  text-align: right;
  padding: 16px;
}

.khozam-import-items__steps {
  margin: 0 0 16px;
  padding: 0 1.4rem 0 0;
  list-style-position: outside;
  color: rgba(26, 44, 29, 0.82);
  line-height: 1.75;
  font-size: 13px;
}

.khozam-import-items__guide-content .khozam-import-items__steps {
  padding-inline-start: 0;
  padding-inline-end: 1.4rem;
}

.khozam-import-items__steps li + li {
  margin-top: 8px;
}

.khozam-import-items__tips {
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-import-items__tips-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 700;
}

.khozam-import-items__guide-content .khozam-import-items__tips-title {
  justify-content: flex-start;
}

.khozam-import-items__tips-title i {
  color: var(--khozam-gold);
}

.khozam-import-items__tips ul {
  margin: 0;
  padding: 0 1.2rem 0 0;
  list-style-position: outside;
  color: rgba(26, 44, 29, 0.72);
  font-size: 13px;
  line-height: 1.65;
}

.khozam-import-items__tips ul li + li {
  margin-top: 6px;
}

.khozam-import-items__sample-wrap {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  overflow-x: auto;
}

.khozam-import-items__sample-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
}

.khozam-import-items__sample-label i {
  color: var(--khozam-gold);
}

.khozam-import-items__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(196, 168, 113, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-purple);
  font-size: 12px;
  line-height: 1.55;
}

.khozam-import-items__notice i {
  color: var(--khozam-gold);
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

.khozam-import-items__notice strong {
  color: var(--khozam-purple);
}

.khozam-import-items__feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0 4px;
}

.khozam-import-items__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(248, 240, 224, 0.45);
  border: 1px solid rgba(196, 168, 113, 0.18);
}

.khozam-import-items__feature i {
  color: var(--khozam-gold);
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.khozam-import-items__feature-text {
  color: rgba(26, 44, 29, 0.78);
  font-size: 12px;
  line-height: 1.5;
}

.khozam-import-items__feature-text strong {
  display: block;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
}

@media (max-width: 768px) {
  .khozam-import-items__hero {
    padding: 14px 16px;
  }
  .khozam-import-items__hero-main {
    flex: 1 1 100%;
  }
  .khozam-import-items__sample-btn {
    width: 100%;
    justify-content: center;
  }
  .khozam-import-items__feature-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * Azyan Khozam — Item Groups + Item Phases modals
 * Improve the legacy Bootstrap modals in invoice_items/manage.php
 * to match the Khozam design system (purple hero, gold accents).
 * ============================================================ */

#groups.khozam-item-modal,
#phases.khozam-item-modal {
  font-family: var(--khozam-font);
}

#groups.khozam-item-modal .modal-content,
#phases.khozam-item-modal .modal-content {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(26, 44, 29, 0.25);
  background: #fff;
}

#groups.khozam-item-modal .modal-header,
#phases.khozam-item-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.2);
}

#groups.khozam-item-modal .modal-header::before,
#phases.khozam-item-modal .modal-header::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: var(--khozam-gold);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

#groups.khozam-item-modal .modal-header::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path fill='black' d='M175 389.1c-9.8 16-15 34.3-15 53.1 0 61.9 50.1 112 112 112s112-50.1 112-112c0-18.8-5.2-37.1-15-53.1l-15.4-25.2c-11.4-18.6-30.6-30.8-52.1-30.8H242.4c-21.5 0-40.7 12.2-52.1 30.8L175 389.1zM272 160c-44.2 0-80 35.8-80 80 0 8.8 7.2 16 16 16s16-7.2 16-16c0-26.5 21.5-48 48-48s48 21.5 48 48c0 8.8 7.2 16 16 16s16-7.2 16-16c0-44.2-35.8-80-80-80zM96 96c0 17.7 14.3 32 32 32l192 0c17.7 0 32-14.3 32-32s-14.3-32-32-32H128c-17.7 0-32 14.3-32 32zm32 64H352c70.7 0 128 57.3 128 128s-57.3 128-128 128c-7.4 0-14.6-.6-21.7-1.8 5.5-9.5 9.7-19.9 12.3-30.8 3.1 .4 6.3 .6 9.4 .6 53 0 96-43 96-96s-43-96-96-96H128c-53 0-96 43-96 96 0 19.3 5.7 37.4 15.5 52.5C46.4 252.4 40 230.5 40 208c0-79.5 64.5-144 144-144zm-32 96c-8.8 0-16 7.2-16 16 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-39.8 32.2-72 72-72h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H104c-57.4 0-104 46.6-104 104 0 39.8 32.2 72 72 72s72-32.2 72-72c0-8.8-7.2-16-16-16z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path fill='black' d='M175 389.1c-9.8 16-15 34.3-15 53.1 0 61.9 50.1 112 112 112s112-50.1 112-112c0-18.8-5.2-37.1-15-53.1l-15.4-25.2c-11.4-18.6-30.6-30.8-52.1-30.8H242.4c-21.5 0-40.7 12.2-52.1 30.8L175 389.1zM272 160c-44.2 0-80 35.8-80 80 0 8.8 7.2 16 16 16s16-7.2 16-16c0-26.5 21.5-48 48-48s48 21.5 48 48c0 8.8 7.2 16 16 16s16-7.2 16-16c0-44.2-35.8-80-80-80zM96 96c0 17.7 14.3 32 32 32l192 0c17.7 0 32-14.3 32-32s-14.3-32-32-32H128c-17.7 0-32 14.3-32 32zm32 64H352c70.7 0 128 57.3 128 128s-57.3 128-128 128c-7.4 0-14.6-.6-21.7-1.8 5.5-9.5 9.7-19.9 12.3-30.8 3.1 .4 6.3 .6 9.4 .6 53 0 96-43 96-96s-43-96-96-96H128c-53 0-96 43-96 96 0 19.3 5.7 37.4 15.5 52.5C46.4 252.4 40 230.5 40 208c0-79.5 64.5-144 144-144zm-32 96c-8.8 0-16 7.2-16 16 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-39.8 32.2-72 72-72h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H104c-57.4 0-104 46.6-104 104 0 39.8 32.2 72 72 72s72-32.2 72-72c0-8.8-7.2-16-16-16z'/></svg>");
}

#phases.khozam-item-modal .modal-header::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M184 48l144 0c4.4 0 8 3.6 8 8l0 40-160 0 0-40c0-4.4 3.6-8 8-8zm-56 8l0 40-64 0C28.1 96 0 124.1 0 160l0 96 192 0 0-64c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 64 192 0 0-96c0-35.9-28.1-64-64-64l-64 0 0-40c0-30.9-25.1-56-56-56L184 0c-30.9 0-56 25.1-56 56zM512 288l-192 0 0 32c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32l0-32L0 288 0 416c0 35.9 28.1 64 64 64l384 0c35.9 0 64-28.1 64-64l0-128z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M184 48l144 0c4.4 0 8 3.6 8 8l0 40-160 0 0-40c0-4.4 3.6-8 8-8zm-56 8l0 40-64 0C28.1 96 0 124.1 0 160l0 96 192 0 0-64c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 64 192 0 0-96c0-35.9-28.1-64-64-64l-64 0 0-40c0-30.9-25.1-56-56-56L184 0c-30.9 0-56 25.1-56 56zM512 288l-192 0 0 32c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32l0-32L0 288 0 416c0 35.9 28.1 64 64 64l384 0c35.9 0 64-28.1 64-64l0-128z'/></svg>");
}

#groups.khozam-item-modal .modal-title,
#phases.khozam-item-modal .modal-title {
  margin: 0;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 16px;
  font-weight: 700;
  border: 0;
  background: transparent;
  flex: 1;
}

#groups.khozam-item-modal .modal-header .close,
#phases.khozam-item-modal .modal-header .close {
  margin: 0;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 400;
  opacity: 0.7;
  text-shadow: none;
  transition: opacity 0.2s ease;
}

#groups.khozam-item-modal .modal-header .close:hover,
#phases.khozam-item-modal .modal-header .close:hover {
  opacity: 1;
}

#groups.khozam-item-modal .modal-body,
#phases.khozam-item-modal .modal-body {
  padding: 18px 20px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
}

#groups.khozam-item-modal .modal-body .input-group,
#phases.khozam-item-modal .modal-body .input-group {
  margin-bottom: 14px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

#groups.khozam-item-modal .modal-body .input-group .form-control,
#phases.khozam-item-modal .modal-body .input-group .form-control {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#groups.khozam-item-modal .modal-body .input-group .form-control:focus,
#phases.khozam-item-modal .modal-body .input-group .form-control:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

#groups.khozam-item-modal .modal-body .input-group .input-group-btn,
#phases.khozam-item-modal .modal-body .input-group .input-group-btn {
  display: flex;
  width: auto;
}

#groups.khozam-item-modal #new-item-group-insert,
#phases.khozam-item-modal #new-item-phase-insert {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 10px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#groups.khozam-item-modal #new-item-group-insert:hover,
#phases.khozam-item-modal #new-item-phase-insert:hover,
#groups.khozam-item-modal #new-item-group-insert:focus,
#phases.khozam-item-modal #new-item-phase-insert:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 10px 22px rgba(196, 168, 113, 0.4);
}

#groups.khozam-item-modal .modal-body hr,
#phases.khozam-item-modal .modal-body hr {
  margin: 0 0 14px;
  border: 0;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

#groups.khozam-item-modal .modal-body table,
#phases.khozam-item-modal .modal-body table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

#groups.khozam-item-modal .modal-body table thead th,
#phases.khozam-item-modal .modal-body table thead th {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid rgba(196, 168, 113, 0.22);
  text-align: right;
}

#groups.khozam-item-modal .modal-body table tbody td,
#phases.khozam-item-modal .modal-body table tbody td {
  padding: 10px 14px;
  background: #fff;
  color: var(--khozam-purple);
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  font-size: 13px;
  vertical-align: middle;
  transition: background 0.15s ease;
}

#groups.khozam-item-modal .modal-body table tbody tr:hover td,
#phases.khozam-item-modal .modal-body table tbody tr:hover td {
  background: rgba(248, 240, 224, 0.42);
}

#groups.khozam-item-modal .modal-body table tbody tr:last-child td,
#phases.khozam-item-modal .modal-body table tbody tr:last-child td {
  border-bottom: 0;
}

#groups.khozam-item-modal .modal-body table tbody tr.row-has-options:hover .row-options,
#phases.khozam-item-modal .modal-body table tbody tr.row-has-options:hover .row-options {
  visibility: visible;
  opacity: 1;
}

#groups.khozam-item-modal .modal-body table .row-options,
#phases.khozam-item-modal .modal-body table .row-options {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease;
}

#groups.khozam-item-modal .modal-body table .row-options a,
#phases.khozam-item-modal .modal-body table .row-options a {
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

#groups.khozam-item-modal .modal-body table .row-options a:hover,
#phases.khozam-item-modal .modal-body table .row-options a:hover {
  color: var(--khozam-gold);
  text-decoration: none;
}

#groups.khozam-item-modal .modal-body table .row-options a.text-danger,
#phases.khozam-item-modal .modal-body table .row-options a.text-danger {
  color: #c62828 !important;
}

#groups.khozam-item-modal .modal-body table .row-options a.text-danger:hover,
#phases.khozam-item-modal .modal-body table .row-options a.text-danger:hover {
  color: #8e0000 !important;
}

#groups.khozam-item-modal .modal-body table .group_edit,
#groups.khozam-item-modal .modal-body table .phase_edit,
#phases.khozam-item-modal .modal-body table .group_edit,
#phases.khozam-item-modal .modal-body table .phase_edit {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

#groups.khozam-item-modal .modal-body table .group_edit .form-control,
#groups.khozam-item-modal .modal-body table .phase_edit .form-control,
#phases.khozam-item-modal .modal-body table .group_edit .form-control,
#phases.khozam-item-modal .modal-body table .phase_edit .form-control {
  flex: 1;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(196, 168, 113, 0.45);
  border-radius: 8px;
  background: #fff;
  color: var(--khozam-purple);
  font-size: 13px;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.14) !important;
}

#groups.khozam-item-modal .modal-body table .update-item-group,
#groups.khozam-item-modal .modal-body table .update-item-phase,
#phases.khozam-item-modal .modal-body table .update-item-group,
#phases.khozam-item-modal .modal-body table .update-item-phase {
  display: inline-flex !important;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  transition: background 0.2s ease;
}

#groups.khozam-item-modal .modal-body table .update-item-group:hover,
#groups.khozam-item-modal .modal-body table .update-item-phase:hover,
#phases.khozam-item-modal .modal-body table .update-item-group:hover,
#phases.khozam-item-modal .modal-body table .update-item-phase:hover {
  background: var(--khozam-gold-hover) !important;
}

#groups.khozam-item-modal .modal-footer,
#phases.khozam-item-modal .modal-footer {
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

#groups.khozam-item-modal .modal-footer .btn-default,
#phases.khozam-item-modal .modal-footer .btn-default {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px !important;
  border: 1px solid rgba(26, 44, 29, 0.14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#groups.khozam-item-modal .modal-footer .btn-default:hover,
#phases.khozam-item-modal .modal-footer .btn-default:hover {
  background: rgba(248, 240, 224, 0.5) !important;
  border-color: rgba(196, 168, 113, 0.55) !important;
  color: var(--khozam-purple) !important;
}

#groups.khozam-item-modal .modal-body .row,
#phases.khozam-item-modal .modal-body .row {
  margin: 0;
}

#groups.khozam-item-modal .dataTables_wrapper,
#phases.khozam-item-modal .dataTables_wrapper {
  padding: 0;
}

#groups.khozam-item-modal .dataTables_filter,
#phases.khozam-item-modal .dataTables_filter {
  display: none;
}

#groups.khozam-item-modal .dataTables_info,
#phases.khozam-item-modal .dataTables_info {
  display: none;
}

#groups.khozam-item-modal .dataTables_paginate,
#phases.khozam-item-modal .dataTables_paginate {
  display: none;
}

#groups.khozam-item-modal .dataTables_length,
#phases.khozam-item-modal .dataTables_length {
  display: none;
}

#groups.khozam-item-modal.show,
#phases.khozam-item-modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#groups.khozam-item-modal.show .modal-dialog,
#phases.khozam-item-modal.show .modal-dialog {
  max-width: 640px;
  width: calc(100% - 32px);
  margin: 16px;
}

@media (max-width: 768px) {
  #groups.khozam-item-modal .modal-body table .row-options,
  #phases.khozam-item-modal .modal-body table .row-options {
    visibility: visible;
    opacity: 1;
  }
}

/* ============================================================
 * Azyan Khozam — Edit Items Status modal
 * Improves #items_modal (bulk status change for units).
 * Same Khozam design language as groups/phases modals.
 * ============================================================ */

#items_modal.khozam-item-modal {
  font-family: var(--khozam-font);
}

#items_modal.khozam-item-modal .modal-content {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(26, 44, 29, 0.25);
  background: #fff;
}

#items_modal.khozam-item-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.2);
}

#items_modal.khozam-item-modal .modal-header::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background-color: var(--khozam-gold);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='black' d='M0 80C0 53.5 21.5 32 48 32l96 32 16 0 288 0c26.5 0 48 21.5 48 48l0 96-16 0L448 32l-32 0L144 32 64 32 48 32L48 64l0 64-32 0L16 80 0 80zM32 224l512 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32zm480 96l32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0 0-64zm-32 64l-32 0 0-64 32 0 0 64zM0 416c0-26.5 21.5-48 48-48l96 0 416 0c26.5 0 48 21.5 48 48l0 32c0 26.5-21.5 48-48 48L48 496c-26.5 0-48-21.5-48-48l0-32z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='black' d='M0 80C0 53.5 21.5 32 48 32l96 32 16 0 288 0c26.5 0 48 21.5 48 48l0 96-16 0L448 32l-32 0L144 32 64 32 48 32L48 64l0 64-32 0L16 80 0 80zM32 224l512 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32zm480 96l32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0 0-64zm-32 64l-32 0 0-64 32 0 0 64zM0 416c0-26.5 21.5-48 48-48l96 0 416 0c26.5 0 48 21.5 48 48l0 32c0 26.5-21.5 48-48 48L48 496c-26.5 0-48-21.5-48-48l0-32z'/></svg>");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

#items_modal.khozam-item-modal .modal-title {
  margin: 0;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 16px;
  font-weight: 700;
  border: 0;
  background: transparent;
  flex: 1;
}

#items_modal.khozam-item-modal .modal-header .close {
  margin: 0;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 400;
  opacity: 0.7;
  text-shadow: none;
  transition: opacity 0.2s ease;
}

#items_modal.khozam-item-modal .modal-header .close:hover {
  opacity: 1;
}

#items_modal.khozam-item-modal .modal-body {
  padding: 18px 20px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
}

#items_modal.khozam-item-modal .modal-body .row {
  margin: 0 0 14px;
}

#items_modal.khozam-item-modal .modal-body .form-group {
  margin-bottom: 0;
}

#items_modal.khozam-item-modal .modal-body .form-group label {
  display: block;
  margin-bottom: 6px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
}

#items_modal.khozam-item-modal .modal-body .form-group select,
#items_modal.khozam-item-modal .modal-body .form-group .form-control {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#items_modal.khozam-item-modal .modal-body .form-group select:focus,
#items_modal.khozam-item-modal .modal-body .form-group .form-control:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

#items_modal.khozam-item-modal .modal-body .table-responsive {
  border: 0;
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

#items_modal.khozam-item-modal .modal-body .table-responsive .table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: #fff;
}

#items_modal.khozam-item-modal .modal-body .table-responsive .table thead th {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid rgba(196, 168, 113, 0.22);
  text-align: right;
  vertical-align: middle;
}

#items_modal.khozam-item-modal .modal-body .table-responsive .table thead th:first-child {
  border-top-right-radius: 10px;
}

#items_modal.khozam-item-modal .modal-body .table-responsive .table thead th:last-child {
  border-top-left-radius: 10px;
}

#items_modal.khozam-item-modal .modal-body .table-responsive .table thead th input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--khozam-gold);
  transform: scale(1.1);
}

#items_modal.khozam-item-modal .modal-body .table-responsive .table tbody td {
  padding: 10px 14px;
  background: #fff;
  color: var(--khozam-purple);
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  font-size: 13px;
  vertical-align: middle;
  transition: background 0.15s ease;
}

#items_modal.khozam-item-modal .modal-body .table-responsive .table tbody tr:hover td {
  background: rgba(248, 240, 224, 0.42);
}

#items_modal.khozam-item-modal .modal-body .table-responsive .table tbody tr:last-child td {
  border-bottom: 0;
}

#items_modal.khozam-item-modal .modal-body .table-responsive .table tbody tr:last-child td:first-child {
  border-bottom-right-radius: 10px;
}

#items_modal.khozam-item-modal .modal-body .table-responsive .table tbody tr:last-child td:last-child {
  border-bottom-left-radius: 10px;
}

#items_modal.khozam-item-modal .modal-body .table-responsive .table tbody td input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--khozam-gold);
  transform: scale(1.1);
}

#items_modal.khozam-item-modal .modal-footer {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

#items_modal.khozam-item-modal .modal-footer .btn-default {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px !important;
  border: 1px solid rgba(26, 44, 29, 0.14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#items_modal.khozam-item-modal .modal-footer .btn-default:hover {
  background: rgba(248, 240, 224, 0.5) !important;
  border-color: rgba(196, 168, 113, 0.55) !important;
  color: var(--khozam-purple) !important;
}

#items_modal.khozam-item-modal .modal-footer .btn-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(196, 168, 113, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#items_modal.khozam-item-modal .modal-footer .btn-primary:hover,
#items_modal.khozam-item-modal .modal-footer .btn-primary:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.4);
}

#items_modal.khozam-item-modal .modal-dialog {
  max-width: 720px;
  width: calc(100% - 32px);
  margin: 16px auto;
}

#items_modal.khozam-item-modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  #items_modal.khozam-item-modal .modal-dialog {
    width: 100%;
    margin: 0;
    max-width: 100%;
  }
}

/* ============================================================
 * Azyan Khozam — Sales Item modal (Add/Edit)
 * Improves #sales_item_modal in invoice_items/item.php.
 * Same Khozam design + RTL layout for Arabic content.
 * ============================================================ */

#sales_item_modal.khozam-item-modal {
  font-family: var(--khozam-font);
}

#sales_item_modal.khozam-item-modal .modal-content {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(26, 44, 29, 0.25);
  background: #fff;
}

#sales_item_modal.khozam-item-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.2);
}

#sales_item_modal.khozam-item-modal .modal-header::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background-color: var(--khozam-gold);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/></svg>");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

#sales_item_modal.khozam-item-modal .modal-title {
  margin: 0;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 16px;
  font-weight: 700;
  border: 0;
  background: transparent;
  flex: 1;
}

#sales_item_modal.khozam-item-modal .modal-header .close {
  margin: 0 0 0 auto;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 400;
  opacity: 0.7;
  text-shadow: none;
  transition: opacity 0.2s ease;
}

#sales_item_modal.khozam-item-modal .modal-header .close:hover {
  opacity: 1;
}

#sales_item_modal.khozam-item-modal .modal-body {
  padding: 18px 20px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
  direction: rtl;
  text-align: right;
}

#sales_item_modal.khozam-item-modal .modal-body .row {
  margin: 0;
}

#sales_item_modal.khozam-item-modal .modal-body .col-md-12 {
  padding: 0;
}

#sales_item_modal.khozam-item-modal .modal-body .alert.affect-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(196, 168, 113, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  border-inline-start: 4px solid var(--khozam-gold);
  color: var(--khozam-purple);
  font-size: 12px;
  line-height: 1.55;
}

#sales_item_modal.khozam-item-modal .modal-body .alert.affect-warning::before {
  content: "\f071";
  font-family: "FontAwesome";
  color: var(--khozam-gold);
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

#sales_item_modal.khozam-item-modal .modal-body .form-group {
  margin-bottom: 14px;
}

#sales_item_modal.khozam-item-modal .modal-body .form-group > label,
#sales_item_modal.khozam-item-modal .modal-body .form-group > .control-label {
  display: block;
  margin-bottom: 6px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

#sales_item_modal.khozam-item-modal .modal-body .form-group > .control-label small {
  color: rgba(26, 44, 29, 0.55);
  font-size: 11px;
  font-weight: 600;
}

#sales_item_modal.khozam-item-modal .modal-body .form-control,
#sales_item_modal.khozam-item-modal .modal-body textarea {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#sales_item_modal.khozam-item-modal .modal-body textarea {
  min-height: 80px;
  resize: vertical;
}

#sales_item_modal.khozam-item-modal .modal-body .form-control:focus,
#sales_item_modal.khozam-item-modal .modal-body textarea:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

#sales_item_modal.khozam-item-modal .modal-body input[type="number"].form-control {
  text-align: left;
  direction: ltr;
}

#sales_item_modal.khozam-item-modal .modal-body .clearfix.mbot15 {
  margin: 4px 0 10px;
  height: 1px;
  background: rgba(26, 44, 29, 0.08);
}

#sales_item_modal.khozam-item-modal .modal-body .bootstrap-select {
  width: 100% !important;
}

#sales_item_modal.khozam-item-modal .modal-body .bootstrap-select > .dropdown-toggle {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#sales_item_modal.khozam-item-modal .modal-body .bootstrap-select > .dropdown-toggle:focus,
#sales_item_modal.khozam-item-modal .modal-body .bootstrap-select.open > .dropdown-toggle {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

#sales_item_modal.khozam-item-modal .modal-body .bootstrap-select .filter-option {
  text-align: right;
}

#sales_item_modal.khozam-item-modal #custom_fields_items {
  display: block;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
  border: 1px dashed rgba(26, 44, 29, 0.12);
  direction: rtl;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > .col-md-12,
#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > .col-md-6 {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 12px 14px;
  margin-bottom: 0;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 6px rgba(26, 44, 29, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > .col-md-12:hover,
#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > .col-md-6:hover {
  border-color: rgba(196, 168, 113, 0.35);
  box-shadow: 0 4px 12px rgba(26, 44, 29, 0.08);
  transform: translateY(-1px);
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > .col-md-12:focus-within,
#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > .col-md-6:focus-within {
  border-color: rgba(196, 168, 113, 0.55);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.18);
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"] .form-group {
  margin-bottom: 0;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"] label {
  display: block;
  margin-bottom: 6px;
  color: var(--khozam-purple);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"] .form-control {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-radius: 8px;
  background: #fbf8f4;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 12px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"] .form-control:focus {
  border-color: rgba(196, 168, 113, 0.65);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"] input[type="number"].form-control {
  text-align: left;
  direction: ltr;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"] .bootstrap-select > .dropdown-toggle {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-radius: 8px;
  background: #fbf8f4;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 12px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"] .bootstrap-select.open > .dropdown-toggle,
#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"] .bootstrap-select > .dropdown-toggle:focus {
  border-color: rgba(196, 168, 113, 0.65);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"] .bootstrap-select .filter-option {
  text-align: right;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"] textarea.form-control {
  min-height: 60px;
  resize: vertical;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"] .custom-field-inline-edit-link {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  color: var(--khozam-gold);
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 2;
}

#sales_item_modal.khozam-item-modal #custom_fields_items .row.custom-fields-form-row > [class^="col-"]:hover .custom-field-inline-edit-link {
  opacity: 1;
}

#sales_item_modal.khozam-item-modal .modal-footer {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
  direction: rtl;
}

#sales_item_modal.khozam-item-modal .modal-footer .btn-default {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px !important;
  border: 1px solid rgba(26, 44, 29, 0.14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#sales_item_modal.khozam-item-modal .modal-footer .btn-default:hover {
  background: rgba(248, 240, 224, 0.5) !important;
  border-color: rgba(196, 168, 113, 0.55) !important;
  color: var(--khozam-purple) !important;
}

#sales_item_modal.khozam-item-modal .modal-footer .btn-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(196, 168, 113, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#sales_item_modal.khozam-item-modal .modal-footer .btn-primary:hover,
#sales_item_modal.khozam-item-modal .modal-footer .btn-primary:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.4);
}

#sales_item_modal.khozam-item-modal .modal-dialog {
  max-width: 720px;
  width: calc(100% - 32px);
  margin: 16px auto;
}

#sales_item_modal.khozam-item-modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  #sales_item_modal.khozam-item-modal .modal-dialog {
    width: 100%;
    margin: 0;
    max-width: 100%;
  }
  #sales_item_modal.khozam-item-modal #custom_fields_items {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * Azyan Khozam — Reminder Add/Edit modal
 * Improves #reminderAddModal in reminder module.
 * Same Khozam design + RTL layout.
 * ============================================================ */

#reminderAddModal.khozam-reminder-modal {
  font-family: var(--khozam-font);
}

#reminderAddModal.khozam-reminder-modal .modal-dialog {
  max-width: 640px;
  width: calc(100% - 32px);
  margin: 24px auto;
}

#reminderAddModal.khozam-reminder-modal.show {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 24px 0;
}

#reminderAddModal.khozam-reminder-modal .modal-content {
  border: 0;
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 20px 60px rgba(26, 44, 29, 0.25);
  background: #fff;
}

#reminderAddModal.khozam-reminder-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.2);
  border-radius: 16px 16px 0 0;
}

#reminderAddModal.khozam-reminder-modal .modal-header::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background-color: var(--khozam-gold);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='black' d='M256 0c17 0 32 7 44 19l150 150c12 12 19 27 19 44s-7 32-19 44l-95 95c-3 3-7 5-11 7l-31 13-3 25c-3 16-15 28-31 28-3 0-7-1-10-2l-91-25c-12-3-21-12-26-23l-13-39-26-19c-12-9-19-23-19-37V160c0-17 7-32 19-44l143-143C243 7 257 0 256 0zM159 369c-13 13-18 31-13 49l-72-72c-3-3-7-5-12-5-9 0-16 7-16 16 0 4 2 8 5 12l72 72c-18-5-37 0-50 13-19 19-19 50 0 69s50 19 69 0c13-13 18-31 13-49l72 72c3 3 7 5 12 5 9 0 16-7 16-16 0-4-2-8-5-12l-72-72c18 5 37 0 50-13 19-19 19-50 0-69s-50-19-69 0zM448 384c0-44-19-86-52-117l-33 33c25 25 39 58 39 93 0 36-14 68-39 93s-58 39-93 39-68-14-93-39-39-58-39-93c0-36 14-68 39-93l33-33c-33 31-52 73-52 117 0 91 73 165 165 165s165-74 165-165z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='black' d='M256 0c17 0 32 7 44 19l150 150c12 12 19 27 19 44s-7 32-19 44l-95 95c-3 3-7 5-11 7l-31 13-3 25c-3 16-15 28-31 28-3 0-7-1-10-2l-91-25c-12-3-21-12-26-23l-13-39-26-19c-12-9-19-23-19-37V160c0-17 7-32 19-44l143-143C243 7 257 0 256 0zM159 369c-13 13-18 31-13 49l-72-72c-3-3-7-5-12-5-9 0-16 7-16 16 0 4 2 8 5 12l72 72c-18-5-37 0-50 13-19 19-19 50 0 69s50 19 69 0c13-13 18-31 13-49l72 72c3 3 7 5 12 5 9 0 16-7 16-16 0-4-2-8-5-12l-72-72c18 5 37 0 50-13 19-19 19-50 0-69s-50-19-69 0zM448 384c0-44-19-86-52-117l-33 33c25 25 39 58 39 93 0 36-14 68-39 93s-58 39-93 39-68-14-93-39-39-58-39-93c0-36 14-68 39-93l33-33c-33 31-52 73-52 117 0 91 73 165 165 165s165-74 165-165z'/></svg>");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

#reminderAddModal.khozam-reminder-modal .modal-title {
  margin: 0;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 16px;
  font-weight: 700;
  border: 0;
  background: transparent;
  flex: 1;
}

#reminderAddModal.khozam-reminder-modal .modal-header .close {
  margin: 0;
  margin-inline-start: auto;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 400;
  opacity: 0.7;
  text-shadow: none;
  transition: opacity 0.2s ease;
  float: none;
}

#reminderAddModal.khozam-reminder-modal .modal-header .close:hover {
  opacity: 1;
}

#reminderAddModal.khozam-reminder-modal .modal-body {
  padding: 20px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
  overflow: visible;
}

#reminderAddModal.khozam-reminder-modal .khozam-reminder-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#reminderAddModal.khozam-reminder-modal .khozam-reminder-form__field {
  position: relative;
  min-width: 0;
  overflow: visible;
}

#reminderAddModal.khozam-reminder-modal .modal-body .form-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
  overflow: visible;
  position: relative;
  z-index: 5;
}

#reminderAddModal.khozam-reminder-modal .modal-body .form-row-pair > .khozam-reminder-form__field {
  min-width: 0;
  overflow: visible;
}

#reminderAddModal.khozam-reminder-modal .modal-body .form-row-pair > .khozam-reminder-form__field--customer {
  z-index: 6;
}

#reminderAddModal.khozam-reminder-modal .modal-body .form-group,
#reminderAddModal.khozam-reminder-modal .modal-body .select-placeholder {
  overflow: visible;
}

#reminderAddModal.khozam-reminder-modal .modal-body .alert.affect-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(196, 168, 113, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  border-inline-start: 4px solid var(--khozam-gold);
  color: var(--khozam-purple);
  font-size: 12px;
  line-height: 1.55;
}

#reminderAddModal.khozam-reminder-modal .modal-body .alert.affect-warning::before {
  content: "\f071";
  font-family: "FontAwesome";
  color: var(--khozam-gold);
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

#reminderAddModal.khozam-reminder-modal .modal-body .form-group {
  margin-bottom: 14px;
  position: relative;
}

#reminderAddModal.khozam-reminder-modal .modal-body .form-group label,
#reminderAddModal.khozam-reminder-modal .modal-body .form-group > .control-label {
  display: block;
  position: relative;
  margin-bottom: 6px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  z-index: auto;
}

#reminderAddModal.khozam-reminder-modal .modal-body .form-control,
#reminderAddModal.khozam-reminder-modal .modal-body textarea {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#reminderAddModal.khozam-reminder-modal .modal-body textarea {
  min-height: 96px;
  resize: vertical;
}

#reminderAddModal.khozam-reminder-modal .modal-body .form-control:focus,
#reminderAddModal.khozam-reminder-modal .modal-body textarea:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

/* Date/time input group — keep field + calendar icon as one control */
#reminderAddModal.khozam-reminder-modal .modal-body .input-group.date,
#reminderAddModal.khozam-reminder-modal .modal-body .input-group {
  display: flex;
  width: 100%;
  align-items: stretch;
  position: relative;
}

#reminderAddModal.khozam-reminder-modal .modal-body .input-group .form-control {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

#reminderAddModal.khozam-reminder-modal .modal-body .input-group .input-group-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 42px;
  padding: 0 12px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-inline-start: 0;
  border-radius: 0 10px 10px 0;
  background: rgba(248, 240, 224, 0.7);
  color: var(--khozam-purple);
  font-size: 14px;
}

html[dir="rtl"] #reminderAddModal.khozam-reminder-modal .modal-body .input-group .form-control {
  border-radius: 0 10px 10px 0;
}

html[dir="rtl"] #reminderAddModal.khozam-reminder-modal .modal-body .input-group .input-group-addon {
  border-inline-start: 1px solid rgba(26, 44, 29, 0.12);
  border-inline-end: 0;
  border-radius: 10px 0 0 10px;
}

#reminderAddModal.khozam-reminder-modal .modal-body .bootstrap-select {
  width: 100% !important;
  position: relative;
  z-index: 1;
}

#reminderAddModal.khozam-reminder-modal .modal-body .bootstrap-select > .dropdown-toggle {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#reminderAddModal.khozam-reminder-modal .modal-body .bootstrap-select.open > .dropdown-toggle,
#reminderAddModal.khozam-reminder-modal .modal-body .bootstrap-select.show > .dropdown-toggle {
  border-color: rgba(196, 168, 113, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none !important;
  background: #fff !important;
}

#reminderAddModal.khozam-reminder-modal .modal-body .bootstrap-select .filter-option {
  text-align: start;
}

/* Only style the OUTER menu — never .dropdown-menu.inner (same class name breaks the list) */
#reminderAddModal.khozam-reminder-modal .bootstrap-select.open,
#reminderAddModal.khozam-reminder-modal .bootstrap-select.show {
  z-index: 2000 !important;
}

#reminderAddModal.khozam-reminder-modal .bootstrap-select > .dropdown-menu {
  z-index: 2001 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-height: 260px;
  margin-top: 4px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(26, 44, 29, 0.18);
}

#reminderAddModal.khozam-reminder-modal .bootstrap-select > .dropdown-menu .inner {
  max-height: 220px;
  overflow-y: auto;
}

#reminderAddModal.khozam-reminder-modal .bootstrap-select > .dropdown-menu li a {
  color: var(--khozam-purple);
}

#reminderAddModal.khozam-reminder-modal .bootstrap-select > .dropdown-menu li a:hover,
#reminderAddModal.khozam-reminder-modal .bootstrap-select > .dropdown-menu li.selected a,
#reminderAddModal.khozam-reminder-modal .bootstrap-select > .dropdown-menu li.active a {
  background: rgba(248, 240, 224, 0.75);
  color: var(--khozam-purple);
}

#reminderAddModal.khozam-reminder-modal .khozam-reminder-notify {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 2px 0 4px;
}

#reminderAddModal.khozam-reminder-modal .modal-body .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 0;
  min-height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  transition: border-color 0.18s ease, background 0.18s ease;
  cursor: pointer;
}

#reminderAddModal.khozam-reminder-modal .modal-body .checkbox:hover {
  border-color: rgba(196, 168, 113, 0.4);
  background: rgba(248, 240, 224, 0.45);
}

#reminderAddModal.khozam-reminder-modal .modal-body .checkbox input[type="checkbox"] {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer;
  accent-color: var(--khozam-gold);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

#reminderAddModal.khozam-reminder-modal .modal-body .checkbox label {
  margin: 0;
  padding: 0 !important;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  display: block;
  flex: 1;
  min-width: 0;
}

#reminderAddModal.khozam-reminder-modal .modal-body .checkbox label::before,
#reminderAddModal.khozam-reminder-modal .modal-body .checkbox label::after {
  content: none !important;
  display: none !important;
}

#reminderAddModal.khozam-reminder-modal .modal-body .btn-bottom-toolbar {
  display: none;
}

#reminderAddModal.khozam-reminder-modal .modal-footer {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 0 0 16px 16px;
}

#reminderAddModal.khozam-reminder-modal .modal-footer .btn-default {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px !important;
  border: 1px solid rgba(26, 44, 29, 0.14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#reminderAddModal.khozam-reminder-modal .modal-footer .btn-default:hover {
  background: rgba(248, 240, 224, 0.5) !important;
  border-color: rgba(196, 168, 113, 0.55) !important;
  color: var(--khozam-purple) !important;
}

#reminderAddModal.khozam-reminder-modal .modal-footer .btn-info {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(196, 168, 113, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#reminderAddModal.khozam-reminder-modal .modal-footer .btn-info:hover,
#reminderAddModal.khozam-reminder-modal .modal-footer .btn-info:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.4);
}

@media (max-width: 768px) {
  #reminderAddModal.khozam-reminder-modal .modal-dialog {
    width: calc(100% - 16px);
    margin: 12px auto;
    max-width: 100%;
  }

  #reminderAddModal.khozam-reminder-modal .modal-body {
    padding: 16px;
  }

  #reminderAddModal.khozam-reminder-modal .modal-body .form-row-pair,
  #reminderAddModal.khozam-reminder-modal .khozam-reminder-notify {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * Azyan Khozam — Task Add/Edit modal
 * Improves #_task_modal in admin/tasks/task.php.
 * Same Khozam design + RTL layout.
 * ============================================================ */

#_task_modal.khozam-task-modal {
  font-family: var(--khozam-font);
}

#_task_modal.khozam-task-modal .modal-content {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(26, 44, 29, 0.25);
  background: #fff;
}

#_task_modal.khozam-task-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.2);
}

#_task_modal.khozam-task-modal .modal-header::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background-color: var(--khozam-gold);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M139.4 36.8C149.4 24 165.6 19 180.6 23.1C195.7 27.2 208 39.3 211.1 54.4L234.6 162.9L346.6 110.4C361.2 103.8 377.7 106.6 388.7 117.5C399.8 128.4 402.6 145 396 159.5L343.5 271.5L451.1 294.1C466.2 297.2 478.3 309.5 482.4 324.6C486.5 339.6 481.5 355.8 468.7 365.8L376.5 437.4C400.7 481.4 384 538.6 339.1 562.5C294.2 586.4 237.1 568.7 213.7 523.6L139.4 36.8z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M139.4 36.8C149.4 24 165.6 19 180.6 23.1C195.7 27.2 208 39.3 211.1 54.4L234.6 162.9L346.6 110.4C361.2 103.8 377.7 106.6 388.7 117.5C399.8 128.4 402.6 145 396 159.5L343.5 271.5L451.1 294.1C466.2 297.2 478.3 309.5 482.4 324.6C486.5 339.6 481.5 355.8 468.7 365.8L376.5 437.4C400.7 481.4 384 538.6 339.1 562.5C294.2 586.4 237.1 568.7 213.7 523.6L139.4 36.8z'/></svg>");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

#_task_modal.khozam-task-modal .modal-title {
  margin: 0;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 16px;
  font-weight: 700;
  border: 0;
  background: transparent;
  flex: 1;
}

#_task_modal.khozam-task-modal .modal-header .close {
  margin: 0 0 0 auto;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 400;
  opacity: 0.7;
  text-shadow: none;
  transition: opacity 0.2s ease;
}

#_task_modal.khozam-task-modal .modal-header .close:hover {
  opacity: 1;
}

#_task_modal.khozam-task-modal .modal-body {
  padding: 18px 20px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
  direction: rtl;
  text-align: right;
  max-height: 70vh;
  overflow-y: auto;
}

#_task_modal.khozam-task-modal .modal-body .row {
  margin: 0;
}

#_task_modal.khozam-task-modal .modal-body [class^="col-"] {
  padding: 0 6px;
}

#_task_modal.khozam-task-modal .modal-body .alert.alert-success {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(46, 125, 50, 0.1);
  border: 1px solid rgba(46, 125, 50, 0.28);
  color: #1b5e20;
  font-size: 12px;
  text-align: right;
}

#_task_modal.khozam-task-modal .modal-body .pull-right.task-single-menu {
  float: none;
  margin-bottom: 12px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

#_task_modal.khozam-task-modal .modal-body .pull-right.task-single-menu .trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  color: var(--khozam-purple);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#_task_modal.khozam-task-modal .modal-body .pull-right.task-single-menu .trigger:hover {
  background: rgba(248, 240, 224, 0.5);
  border-color: rgba(196, 168, 113, 0.55);
  color: var(--khozam-purple);
}

#_task_modal.khozam-task-modal .modal-body .checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 4px 4px 4px 0;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  transition: border-color 0.18s ease, background 0.18s ease;
  cursor: pointer;
  vertical-align: middle;
}

#_task_modal.khozam-task-modal .modal-body .checkbox:hover {
  border-color: rgba(196, 168, 113, 0.35);
  background: rgba(248, 240, 224, 0.4);
}

#_task_modal.khozam-task-modal .modal-body .checkbox input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--khozam-gold);
  transform: scale(1.15);
  margin: 0;
  position: static;
}

#_task_modal.khozam-task-modal .modal-body .checkbox label {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline;
  padding: 0;
  min-height: auto;
}

#_task_modal.khozam-task-modal .modal-body .checkbox.checkbox-inline {
  display: inline-flex;
}

#_task_modal.khozam-task-modal .modal-body hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px dashed rgba(26, 44, 29, 0.1);
}

#_task_modal.khozam-task-modal .modal-body .form-group {
  margin-bottom: 14px;
}

#_task_modal.khozam-task-modal .modal-body .form-group > label,
#_task_modal.khozam-task-modal .modal-body .form-group > .control-label,
#_task_modal.khozam-task-modal .modal-body .form-group > label.control-label {
  display: block;
  margin-bottom: 6px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

#_task_modal.khozam-task-modal .modal-body .form-group > label small {
  color: rgba(26, 44, 29, 0.55);
  font-size: 11px;
  font-weight: 600;
  margin-inline-start: 4px;
}

#_task_modal.khozam-task-modal .modal-body .form-group > label i.fa-tag {
  color: var(--khozam-gold);
  margin-inline-end: 4px;
}

#_task_modal.khozam-task-modal .modal-body .form-control,
#_task_modal.khozam-task-modal .modal-body textarea {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#_task_modal.khozam-task-modal .modal-body .form-control[name="name"] {
  min-height: 48px;
  font-size: 14px;
  font-weight: 600;
  border-color: rgba(196, 168, 113, 0.25);
}

#_task_modal.khozam-task-modal .modal-body textarea {
  min-height: 80px;
  resize: vertical;
}

#_task_modal.khozam-task-modal .modal-body .form-control:focus,
#_task_modal.khozam-task-modal .modal-body textarea:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

#_task_modal.khozam-task-modal .modal-body input[type="number"].form-control {
  text-align: left;
  direction: ltr;
}

#_task_modal.khozam-task-modal .modal-body .bootstrap-select {
  width: 100% !important;
}

#_task_modal.khozam-task-modal .modal-body .bootstrap-select > .dropdown-toggle {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#_task_modal.khozam-task-modal .modal-body .bootstrap-select > .dropdown-toggle:focus,
#_task_modal.khozam-task-modal .modal-body .bootstrap-select.open > .dropdown-toggle {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

#_task_modal.khozam-task-modal .modal-body .bootstrap-select .filter-option {
  text-align: right;
}

#_task_modal.khozam-task-modal .modal-body .input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

#_task_modal.khozam-task-modal .modal-body .input-group .form-control {
  flex: 1;
  min-width: 0;
}

#_task_modal.khozam-task-modal .modal-body .input-group .input-group-btn,
#_task_modal.khozam-task-modal .modal-body .input-group .input-group-addon {
  display: flex;
  width: auto;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fbf8f4;
  color: var(--khozam-purple);
}

#_task_modal.khozam-task-modal .modal-body .input-group .input-group-btn .btn,
#_task_modal.khozam-task-modal .modal-body .input-group .input-group-addon .checkbox {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--khozam-purple);
}

#_task_modal.khozam-task-modal .modal-body .input-group .input-group-btn .btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  justify-content: center;
}

#_task_modal.khozam-task-modal .modal-body .input-group .input-group-btn .btn:hover {
  background: rgba(196, 168, 113, 0.32);
}

#_task_modal.khozam-task-modal .modal-body .form-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}

#_task_modal.khozam-task-modal .modal-body .form-row-pair > [class^="col-"] {
  padding: 0;
}

#_task_modal.khozam-task-modal .modal-body p.bold {
  margin: 0 0 8px;
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

#_task_modal.khozam-task-modal .modal-body .popover {
  direction: rtl;
  text-align: right;
  border-radius: 10px;
  border: 0;
  box-shadow: 0 10px 30px rgba(26, 44, 29, 0.2);
}

#_task_modal.khozam-task-modal .modal-body .popover .popover-title {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  border: 0;
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 14px;
}

#_task_modal.khozam-task-modal .modal-body .popover .popover-content {
  padding: 12px 14px;
  font-size: 12px;
}

#_task_modal.khozam-task-modal .modal-body .popover .checkbox {
  display: flex;
  margin: 6px 0;
}

#_task_modal.khozam-task-modal .modal-body #new-task-attachments {
  display: none;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed rgba(26, 44, 29, 0.12);
}

#_task_modal.khozam-task-modal .modal-body #new-task-attachments.show {
  display: block;
}

#_task_modal.khozam-task-modal .modal-body #new-task-attachments .attachments .attachment {
  margin-bottom: 10px;
}

#_task_modal.khozam-task-modal .modal-body .recurring_custom.hide,
#_task_modal.khozam-task-modal .modal-body #cycles_wrapper.hide,
#_task_modal.khozam-task-modal .modal-body .task-hours.hide,
#_task_modal.khozam-task-modal .modal-body .project-details.hide {
  display: none;
}

#_task_modal.khozam-task-modal .modal-footer {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
  direction: rtl;
}

#_task_modal.khozam-task-modal .modal-footer .btn-default {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px !important;
  border: 1px solid rgba(26, 44, 29, 0.14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#_task_modal.khozam-task-modal .modal-footer .btn-default:hover {
  background: rgba(248, 240, 224, 0.5) !important;
  border-color: rgba(196, 168, 113, 0.55) !important;
  color: var(--khozam-purple) !important;
}

#_task_modal.khozam-task-modal .modal-footer .btn-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(196, 168, 113, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#_task_modal.khozam-task-modal .modal-footer .btn-primary:hover,
#_task_modal.khozam-task-modal .modal-footer .btn-primary:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.4);
}

#_task_modal.khozam-task-modal .modal-dialog {
  max-width: 800px;
  width: calc(100% - 32px);
  margin: 16px auto;
}

#_task_modal.khozam-task-modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  #_task_modal.khozam-task-modal .modal-dialog {
    width: 100%;
    margin: 0;
    max-width: 100%;
  }
  #_task_modal.khozam-task-modal .modal-body .form-row-pair {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * Azyan Khozam — Task flag cards
 * Improves the "Public / Billable / Visible to client" checkboxes
 * in #_task_modal.khozam-task-modal. 3-column grid of flag cards
 * with icon + label + hint, replacing loose inline checkboxes.
 * ============================================================ */

#_task_modal.khozam-task-modal .khozam-task-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 18px;
}

#_task_modal.khozam-task-modal .khozam-task-flag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  margin: 0;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.1);
  box-shadow: 0 1px 3px rgba(26, 44, 29, 0.04);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
  min-height: 38px;
  color: rgba(26, 44, 29, 0.7);
  font-size: 13px;
  font-weight: 600;
}

#_task_modal.khozam-task-modal .khozam-task-flag:hover {
  border-color: rgba(196, 168, 113, 0.45);
  background: rgba(248, 240, 224, 0.5);
  color: var(--khozam-purple);
}

#_task_modal.khozam-task-modal .khozam-task-flag:has(input[type="checkbox"]:checked) {
  border-color: var(--khozam-gold);
  background: linear-gradient(135deg, rgba(196, 168, 113, 0.18) 0%, rgba(196, 168, 113, 0.08) 100%);
  color: var(--khozam-purple);
  box-shadow: 0 4px 12px rgba(196, 168, 113, 0.22);
}

#_task_modal.khozam-task-modal .khozam-task-flag input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  margin: 0;
}

#_task_modal.khozam-task-modal .khozam-task-flag__checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #fff;
  border: 1.5px solid rgba(26, 44, 29, 0.2);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  flex-shrink: 0;
  order: 2;
}

#_task_modal.khozam-task-modal .khozam-task-flag__check {
  display: none;
  color: var(--khozam-purple);
  font-size: 11px;
  line-height: 1;
}

#_task_modal.khozam-task-modal .khozam-task-flag:has(input[type="checkbox"]:checked) .khozam-task-flag__checkbox {
  background: var(--khozam-gold);
  border-color: var(--khozam-gold);
  box-shadow: 0 2px 6px rgba(196, 168, 113, 0.32);
  transform: scale(1.05);
}

#_task_modal.khozam-task-modal .khozam-task-flag:has(input[type="checkbox"]:checked) .khozam-task-flag__check {
  display: inline-block;
}

#_task_modal.khozam-task-modal .khozam-task-flag__label {
  display: inline;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  order: 1;
  cursor: pointer;
  user-select: none;
}

#_task_modal.khozam-task-modal .khozam-task-flag.hide {
  display: none;
}

#_task_modal.khozam-task-modal .khozam-task-flag__hint {
  display: none;
}

@media (max-width: 640px) {
  #_task_modal.khozam-task-modal .khozam-task-flags {
    flex-direction: column;
  }
  #_task_modal.khozam-task-modal .khozam-task-flag {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ============================================================
 * Azyan Khozam — Add Ticket page
 * Improves /admin/tickets/add with hero header, RTL form,
 * Khozam-styled inputs, dropzone, submit bar.
 * Wraps content in khozam-add-ticket-page container.
 * ============================================================ */

.khozam-add-ticket-page .tw-flex.tw-items-center.tw-mb-2,
.khozam-add-ticket-page .tw-flex.tw-items-center.tw-mb-2 * {
  display: none !important;
}

.khozam-add-ticket-page .khozam-add-ticket-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
  direction: rtl;
}

.khozam-add-ticket-page .khozam-add-ticket-hero::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background-color: var(--khozam-gold);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M201.1 71.7c-1.3-3.1-4.8-4.6-8-3.4L132.3 92.2c-3.2 1.2-5.3 4.3-5.3 7.6l0 20.7c0 4.4 3.6 8 8 8s8-3.6 8-8l0-15.4l53.5-21.1c3.1-1.3 4.6-4.8 3.4-8L201.1 71.7zM132.3 384.1l60.9 24.1c3.1 1.3 6.7-.3 8-3.4l1.4-4.2c1.3-3.1-.3-6.7-3.4-8L138.3 368.5l0-15.4c0-4.4-3.6-8-8-8s-8 3.6-8 8l0 20.7c0 3.4 2.1 6.4 5.3 7.6l4.7 1.9 .1 .8zM373.7 92.2l-60.9-24.1c-3.1-1.3-6.7 .3-8 3.4l-1.4 4.2c-1.3 3.1 .3 6.7 3.4 8L373.7 135.5l0 15.4c0 4.4 3.6 8 8 8s8-3.6 8-8l0-20.7c0-3.4-2.1-6.4-5.3-7.6l-4.7-1.9-.1-.8zM381.7 353.1c0-4.4-3.6-8-8-8s-8 3.6-8 8l0 15.4-53.5 21.1c-3.1 1.3-4.6 4.8-3.4 8l1.4 4.2c1.3 3.1 4.8 4.6 8 3.4l60.9-24.1c3.2-1.2 5.3-4.3 5.3-7.6l-.1-20.4zM470.2 192.7c-7.3-44.1-29.1-83.5-60.2-114.7-44.4-44.4-105.5-72-173-72s-128.6 27.6-173 72c-31.1 31.1-52.9 70.6-60.2 114.7-2.6 15.6-4 31.6-4 48s1.4 32.4 4 48c7.3 44.1 29.1 83.5 60.2 114.7 44.4 44.4 105.5 72 173 72s128.6-27.6 173-72c31.1-31.1 52.9-70.6 60.2-114.7 2.6-15.6 4-31.6 4-48s-1.4-32.4-4-48zM237 96.5c-21.1 .5-41.4 4.5-60.4 11.3l53.2 21c3.1 1.3 6.7-.3 8-3.4l1.4-4.2c1.3-3.1-.3-6.7-3.4-8L237 113.2l0-16.7zM144.5 308.7c-1.2-3.2-4.2-5.3-7.6-5.3l-4.7 0c-4.4 0-8 3.6-8 8l0 20.7c0 3.4 2.1 6.4 5.3 7.6l60.9 24.1c3.1 1.3 6.7-.3 8-3.4l1.4-4.2c1.3-3.1-.3-6.7-3.4-8L144.5 348l0-39.3zM450.7 240.7c0 16.4-1.4 32.4-4 48-7.3 44.1-29.1 83.5-60.2 114.7-44.4 44.4-105.5 72-173 72s-128.6-27.6-173-72c-31.1-31.1-52.9-70.6-60.2-114.7-2.6-15.6-4-31.6-4-48s1.4-32.4 4-48c7.3-44.1 29.1-83.5-60.2-114.7 44.4-44.4 105.5-72 173-72s128.6 27.6 173 72c31.1 31.1 52.9 70.6 60.2 114.7 2.6 15.6 4 31.6 4 48zM275 415.5c21.1-.5 41.4-4.5 60.4-11.3l-53.2-21c-3.1-1.3-6.7 .3-8 3.4l-1.4 4.2c-1.3 3.1 .3 6.7 3.4 8l53.2 21.1 0-16.7z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M201.1 71.7c-1.3-3.1-4.8-4.6-8-3.4L132.3 92.2c-3.2 1.2-5.3 4.3-5.3 7.6l0 20.7c0 4.4 3.6 8 8 8s8-3.6 8-8l0-15.4l53.5-21.1c3.1-1.3 4.6-4.8 3.4-8L201.1 71.7zM132.3 384.1l60.9 24.1c3.1 1.3 6.7-.3 8-3.4l1.4-4.2c1.3-3.1-.3-6.7-3.4-8L138.3 368.5l0-15.4c0-4.4-3.6-8-8-8s-8 3.6-8 8l0 20.7c0 3.4 2.1 6.4 5.3 7.6l4.7 1.9 .1 .8zM373.7 92.2l-60.9-24.1c-3.1-1.3-6.7 .3-8 3.4l-1.4 4.2c-1.3 3.1 .3 6.7 3.4 8L373.7 135.5l0 15.4c0 4.4 3.6 8 8 8s8-3.6 8-8l0-20.7c0-3.4-2.1-6.4-5.3-7.6l-4.7-1.9-.1-.8zM381.7 353.1c0-4.4-3.6-8-8-8s-8 3.6-8 8l0 15.4-53.5 21.1c-3.1 1.3-4.6 4.8-3.4 8l1.4 4.2c1.3 3.1 4.8 4.6 8 3.4l60.9-24.1c3.2-1.2 5.3-4.3 5.3-7.6l-.1-20.4zM470.2 192.7c-7.3-44.1-29.1-83.5-60.2-114.7-44.4-44.4-105.5-72-173-72s-128.6 27.6-60.2 114.7c-31.1 31.1-52.9 70.6-60.2 114.7-2.6 15.6-4 31.4-4 48s1.4 32.4 4 48c7.3 44.1 29.1 83.5 60.2 114.7 44.4 44.4 105.5 72 173 72s128.6-27.6 173-72c31.1-31.1 52.9-70.6 60.2-114.7 2.6-15.6 4-31.6 4-48s-1.4-32.4-4-48zM237 96.5c-21.1 .5-41.4 4.5-60.4 11.3l53.2 21c3.1 1.3 6.7-.3 8-3.4l1.4-4.2c1.3-3.1-.3-6.7-3.4-8L237 113.2l0-16.7zM144.5 308.7c-1.2-3.2-4.2-5.3-7.6-5.3l-4.7 0c-4.4 0-8 3.6-8 8l0 20.7c0 3.4 2.1 6.4 5.3 7.6l60.9 24.1c3.1 1.3 6.7-.3 8-3.4l1.4-4.2c1.3-3.1-.3-6.7-3.4-8L144.5 348l0-39.3zM450.7 240.7c0 16.4-1.4 32.4-4 48-7.3 44.1-29.1 83.5-60.2 114.7-44.4 44.4-105.5 72-173 72s-128.6-27.6-173-72c-31.1-31.1-52.9-70.6-60.2-114.7-2.6-15.6-4-31.6-4-48s1.4-32.4 4-48c7.3-44.1 29.1-83.5-60.2-114.7 44.4-44.4 105.5-72 173-72s128.6 27.6 60.2 114.7c31.1 31.1 52.1-70.6 60.2 114.7 2.6 15.6 4 31.6 4 48zM275 415.5c21.1-.5 41.4-4.5-60.4-11.3l-53.2-21c-3.1-1.3-6.7 .3-8 3.4l-1.4 4.2c-1.3 3.1 .3 6.7 3.4 8l53.2 21.1 0-16.7z'/></svg>");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

.khozam-add-ticket-page .khozam-add-ticket-hero__title {
  margin: 0;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 18px;
  font-weight: 700;
  flex: 1;
  text-align: right;
}

.khozam-add-ticket-page .khozam-add-ticket-hero__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.khozam-add-ticket-page .khozam-add-ticket-hero__actions a.label,
.khozam-add-ticket-page .khozam-add-ticket-hero__actions .label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  background: rgba(248, 240, 224, 0.16);
  color: var(--khozam-cream);
  border: 1px solid rgba(196, 168, 113, 0.32);
  transition: background 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.khozam-add-ticket-page .khozam-add-ticket-hero__actions a.label:hover,
.khozam-add-ticket-page .khozam-add-ticket-hero__actions a.label:focus {
  background: rgba(196, 168, 113, 0.28);
  border-color: rgba(196, 168, 113, 0.6);
  color: var(--khozam-cream);
  text-decoration: none;
}

.khozam-add-ticket-page .khozam-add-ticket-hero__actions a.label.hide {
  display: none !important;
}

.khozam-add-ticket-page .panel_s {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09) !important;
  background: #fff !important;
  margin-bottom: 18px;
}

.khozam-add-ticket-page .panel-body {
  padding: 18px 20px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
  direction: rtl;
  text-align: right;
}

.khozam-add-ticket-page .panel-body .row {
  margin: 0 -6px;
}

.khozam-add-ticket-page .panel-body [class^="col-"] {
  padding: 0 6px;
  margin-bottom: 12px;
}

.khozam-add-ticket-page .panel-body .form-group {
  margin-bottom: 14px;
}

.khozam-add-ticket-page .panel-body .form-group label,
.khozam-add-ticket-page .panel-body .form-group > .control-label,
.khozam-add-ticket-page .panel-body .form-group > label.control-label {
  display: block;
  margin-bottom: 6px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.khozam-add-ticket-page .panel-body .form-group > label i.fa-tag {
  color: var(--khozam-gold);
  margin-inline-end: 4px;
}

.khozam-add-ticket-page .panel-body .form-control,
.khozam-add-ticket-page .panel-body textarea {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.khozam-add-ticket-page .panel-body .form-control:focus,
.khozam-add-ticket-page .panel-body textarea:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

.khozam-add-ticket-page .panel-body input[name="subject"] {
  min-height: 48px;
  font-size: 14px;
  font-weight: 600;
  border-color: rgba(196, 168, 113, 0.25);
}

.khozam-add-ticket-page .panel-body input[type="email"].form-control {
  direction: ltr;
  text-align: left;
}

.khozam-add-ticket-page .panel-body .bootstrap-select {
  width: 100% !important;
}

.khozam-add-ticket-page .panel-body .bootstrap-select > .dropdown-toggle {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.khozam-add-ticket-page .panel-body .bootstrap-select > .dropdown-toggle:focus,
.khozam-add-ticket-page .panel-body .bootstrap-select.open > .dropdown-toggle {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

.khozam-add-ticket-page .panel-body .bootstrap-select .filter-option {
  text-align: right;
}

.khozam-add-ticket-page .panel-body .input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.khozam-add-ticket-page .panel-body .input-group .form-control {
  flex: 1;
  min-width: 0;
}

.khozam-add-ticket-page .panel-body .input-group .input-group-btn,
.khozam-add-ticket-page .panel-body .input-group .input-group-addon {
  display: flex;
  width: auto;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fbf8f4;
  color: var(--khozam-purple);
}

.khozam-add-ticket-page .panel-body .input-group .input-group-addon i {
  color: var(--khozam-gold);
}

.khozam-add-ticket-page .panel-body .input-group .input-group-btn .btn,
.khozam-add-ticket-page .panel-body .input-group .input-group-btn .btn-default {
  margin: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.khozam-add-ticket-page .panel-body .input-group .input-group-btn .btn:hover {
  background: rgba(196, 168, 113, 0.32);
}

.khozam-add-ticket-page .panel-body .projects-wrapper.hide,
.khozam-add-ticket-page .panel-body .projects-wrapper[style*="display: none"] {
  display: none;
}

.khozam-add-ticket-page .panel-body .projects-wrapper {
  display: block;
}

.khozam-add-ticket-page .panel-body hr.hr-panel-separator {
  margin: 18px 0;
  border: 0;
  border-top: 1px dashed rgba(26, 44, 29, 0.12);
}

.khozam-add-ticket-page .panel-body h4 {
  margin: 0 0 10px;
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

.khozam-add-ticket-page .panel-body .before-ticket-message {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.khozam-add-ticket-page .panel-body .before-ticket-message .col-md-6,
.khozam-add-ticket-page .panel-body .before-ticket-message .col-md-12,
.khozam-add-ticket-page .panel-body .before-ticket-message .visible-xs {
  width: 100%;
  max-width: 100%;
  flex: none;
  margin: 0;
  padding: 0;
}

.khozam-add-ticket-page .panel-body .before-ticket-message .visible-xs {
  display: none;
}

.khozam-add-ticket-page .panel-body .attachments_area {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed rgba(26, 44, 29, 0.12);
}

.khozam-add-ticket-page .panel-body .attachments_area .attachments .attachment .col-md-4,
.khozam-add-ticket-page .panel-body .attachments_area .attachments .attachment [class^="col-"] {
  width: 100%;
  max-width: 100%;
  flex: none;
  margin: 0;
  padding: 0;
}

.khozam-add-ticket-page .panel-body .attachments_area .form-group {
  margin-bottom: 0;
}

.khozam-add-ticket-page .panel-body .attachments_area .input-group-btn .btn {
  background: var(--khozam-gold);
  color: var(--khozam-purple);
  border-radius: 999px;
  width: 38px;
  height: 38px;
}

.khozam-add-ticket-page .panel-body .attachments_area .input-group-btn .btn:hover {
  background: var(--khozam-gold-hover);
}

.khozam-add-ticket-page .btn-bottom-toolbar {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 20px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 4px 12px rgba(26, 44, 29, 0.05);
}

.khozam-add-ticket-page .btn-bottom-toolbar .btn-primary,
.khozam-add-ticket-page .btn-bottom-toolbar button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 10px 22px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(196, 168, 113, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.khozam-add-ticket-page .btn-bottom-toolbar .btn-primary:hover,
.khozam-add-ticket-page .btn-bottom-toolbar .btn-primary:focus,
.khozam-add-ticket-page .btn-bottom-toolbar button[type="submit"]:hover {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.4);
}

.khozam-add-ticket-page .clearfix {
  clear: both;
}

.khozam-add-ticket-page #new_ticket_form .row.custom-fields-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed rgba(26, 44, 29, 0.12);
}

.khozam-add-ticket-page #new_ticket_form .row.custom-fields-form-row .col-md-12,
.khozam-add-ticket-page #new_ticket_form .row.custom-fields-form-row .col-md-6,
.khozam-add-ticket-page #new_ticket_form .row.custom-fields-form-row [class^="col-"] {
  width: 100%;
  max-width: 100%;
  flex: none;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-add-ticket-page #new_ticket_form .row.custom-fields-form-row .form-group {
  margin-bottom: 0;
}

.khozam-add-ticket-page #new_ticket_form .row.custom-fields-form-row label {
  color: var(--khozam-purple);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.khozam-add-ticket-page #new_ticket_form .row.custom-fields-form-row .form-control {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-radius: 8px;
  background: #fbf8f4;
  color: var(--khozam-purple);
  font-size: 12px;
}

@media (max-width: 768px) {
  .khozam-add-ticket-page .panel-body .before-ticket-message {
    grid-template-columns: 1fr;
  }
  .khozam-add-ticket-page #new_ticket_form .row.custom-fields-form-row {
    grid-template-columns: 1fr;
  }
  .khozam-add-ticket-page .tw-flex.tw-items-center.tw-mb-2 {
    padding: 14px 16px;
  }
}

/* ============================================================
 * Azyan Khozam — Tag + Attachment cards
 * Improve the visual design of tags input and attachment
 * dropzone in .khozam-add-ticket-page.
 * ============================================================ */

.khozam-add-ticket-page .khozam-form-card {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 6px rgba(26, 44, 29, 0.04);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.khozam-add-ticket-page .khozam-form-card:focus-within {
  border-color: rgba(196, 168, 113, 0.45);
  box-shadow: 0 4px 14px rgba(196, 168, 113, 0.18);
}

.khozam-add-ticket-page .khozam-form-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(26, 44, 29, 0.05) 0%, rgba(26, 44, 29, 0.02) 100%);
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-add-ticket-page .khozam-form-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  font-size: 11px;
  flex-shrink: 0;
}

.khozam-add-ticket-page .khozam-form-card__label {
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  flex: 1;
  text-align: right;
}

.khozam-add-ticket-page .khozam-form-card__body {
  padding: 8px 12px;
}

.khozam-add-ticket-page .khozam-form-card__body .bootstrap-tagsinput {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none;
}

.khozam-add-ticket-page .khozam-form-card__body .bootstrap-tagsinput input {
  flex: 1;
  min-width: 120px;
  height: 28px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  outline: none;
  text-align: right;
  direction: rtl;
}

.khozam-add-ticket-page .khozam-form-card__body .bootstrap-tagsinput .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(196, 168, 113, 0.18) 0%, rgba(196, 168, 113, 0.08) 100%);
  border: 1px solid rgba(196, 168, 113, 0.32);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: default;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.khozam-add-ticket-page .khozam-form-card__body .bootstrap-tagsinput .tag:hover {
  background: linear-gradient(135deg, rgba(196, 168, 113, 0.32) 0%, rgba(196, 168, 113, 0.18) 100%);
  border-color: rgba(196, 168, 113, 0.55);
}

.khozam-add-ticket-page .khozam-form-card__body .bootstrap-tagsinput .tag [data-role="remove"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-inline-start: 2px;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 44, 29, 0.08);
  color: var(--khozam-purple);
  font-size: 10px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.khozam-add-ticket-page .khozam-form-card__body .bootstrap-tagsinput .tag [data-role="remove"]:hover {
  background: #c62828;
  color: #fff;
}

.khozam-add-ticket-page .khozam-form-card__body .bootstrap-tagsinput .tag [data-role="remove"]::after {
  content: "\f00d";
  font-family: "FontAwesome";
  display: inline-block;
  line-height: 1;
}

.khozam-add-ticket-page .khozam-form-card__body .bootstrap-tagsinput .tag .tag-spacer {
  display: none;
}

.khozam-add-ticket-page .attachments_area {
  margin: 16px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.khozam-add-ticket-page .khozam-attachments {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 6px rgba(26, 44, 29, 0.04);
  overflow: hidden;
}

.khozam-add-ticket-page .khozam-attachments__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(26, 44, 29, 0.05) 0%, rgba(26, 44, 29, 0.02) 100%);
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-add-ticket-page .khozam-attachments__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  font-size: 12px;
  flex-shrink: 0;
}

.khozam-add-ticket-page .khozam-attachments__label {
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 700;
  flex: 1;
  text-align: right;
}

.khozam-add-ticket-page .khozam-attachments__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(196, 168, 113, 0.12);
  color: var(--khozam-purple);
  font-size: 11px;
  font-weight: 600;
}

.khozam-add-ticket-page .khozam-attachments__drop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
  border: 2px dashed rgba(26, 44, 29, 0.16);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.khozam-add-ticket-page .khozam-attachments__drop:hover,
.khozam-add-ticket-page .khozam-attachments__drop.is-dragover {
  border-color: rgba(196, 168, 113, 0.55);
  background: rgba(248, 240, 224, 0.5);
}

.khozam-add-ticket-page .khozam-attachments__drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  font-size: 16px;
  flex-shrink: 0;
}

.khozam-add-ticket-page .khozam-attachments__input.form-control {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 12px;
  box-shadow: none !important;
  direction: ltr;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.khozam-add-ticket-page .khozam-attachments__input.form-control:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

.khozam-add-ticket-page .khozam-attachments__input.form-control::file-selector-button {
  margin-inline-end: 8px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
}

.khozam-add-ticket-page .khozam-attachments__input.form-control::file-selector-button:hover {
  background: rgba(196, 168, 113, 0.32);
}

.khozam-add-ticket-page .khozam-attachments__add.btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--khozam-gold);
  color: var(--khozam-purple);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(196, 168, 113, 0.28);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.khozam-add-ticket-page .khozam-attachments__add.btn:hover,
.khozam-add-ticket-page .khozam-attachments__add.btn:focus {
  background: var(--khozam-gold-hover);
  box-shadow: 0 6px 14px rgba(196, 168, 113, 0.4);
}

.khozam-add-ticket-page .attachments .attachment {
  display: block;
  width: 100%;
}

.khozam-add-ticket-page .attachments .attachment .col-md-12 {
  width: 100%;
  max-width: 100%;
  flex: none;
  margin: 0;
  padding: 0;
}

/* ============================================================
 * Azyan Khozam — Estimate Request detail page
 * Improves /admin/estimate_request/estimate_request.php
 * Same Khozam design + RTL layout.
 * ============================================================ */

.khozam-estimate-request-page .tw-flex.tw-justify-between.tw-text-neutral-700 {
  display: none;
}

.khozam-estimate-request-page .khozam-estimate-request-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
  direction: rtl;
  text-align: right;
}

.khozam-estimate-request-page .khozam-estimate-request-hero::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: var(--khozam-gold);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='black' d='M64 0C28.7 0 0 28.7 0 64L0 416c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-277.5c0-17-6.7-33.3-18.7-45.3L466.7 18.7C454.7 6.7 438.5 0 421.5 0L64 0zM288 312c-13.3 0-24-10.7-24-24s10.7-24 24-24l96 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-96 0zM184 136c0-13.3 10.7-24 24-24l160 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-160 0c-13.3 0-24-10.7-24-24zM96 136c0-13.3 10.7-24 24-24l48 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-48 0c-13.3 0-24-10.7-24-24z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='black' d='M64 0C28.7 0 0 28.7 0 64L0 416c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-277.5c0-17-6.7-33.3-18.7-45.3L466.7 18.7C454.7 6.7 438.5 0 421.5 0L64 0zM288 312c-13.3 0-24-10.7-24-24s10.7-24 24-24l96 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-96 0zM184 136c0-13.3 10.7-24 24-24l160 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-160 0c-13.3 0-24-10.7-24-24zM96 136c0-13.3 10.7-24 24-24l48 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-48 0c-13.3 0-24-10.7-24-24z'/></svg>");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

.khozam-estimate-request-page .khozam-estimate-request-hero__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 200px;
  color: var(--khozam-cream);
}

.khozam-estimate-request-page .khozam-estimate-request-hero__title-main {
  color: var(--khozam-cream);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.khozam-estimate-request-page .khozam-estimate-request-hero__title-sub {
  color: rgba(248, 240, 224, 0.7);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.khozam-estimate-request-page .khozam-estimate-request-hero__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.khozam-estimate-request-page .khozam-estimate-request-hero__actions .btn-group {
  display: inline-flex;
  margin: 0;
}

.khozam-estimate-request-page .khozam-estimate-request-hero__actions .dropdown {
  display: inline-flex;
}

.khozam-estimate-request-page .khozam-estimate-request-hero__actions .btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(196, 168, 113, 0.4) !important;
  background: rgba(248, 240, 224, 0.14) !important;
  color: var(--khozam-cream) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.khozam-estimate-request-page .khozam-estimate-request-hero__actions .btn:hover,
.khozam-estimate-request-page .khozam-estimate-request-hero__actions .btn:focus {
  background: rgba(196, 168, 113, 0.32) !important;
  border-color: rgba(196, 168, 113, 0.7) !important;
  color: var(--khozam-cream) !important;
  text-decoration: none;
}

.khozam-estimate-request-page .khozam-estimate-request-hero__actions .btn-success {
  background: var(--khozam-gold) !important;
  border-color: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 4px 10px rgba(196, 168, 113, 0.32) !important;
}

.khozam-estimate-request-page .khozam-estimate-request-hero__actions .btn-success:hover,
.khozam-estimate-request-page .khozam-estimate-request-hero__actions .btn-success:focus {
  background: var(--khozam-gold-hover) !important;
  border-color: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 6px 14px rgba(196, 168, 113, 0.45) !important;
}

.khozam-estimate-request-page .khozam-estimate-request-hero__actions .btn .caret {
  margin-inline-start: 4px;
  border-top-color: currentColor;
}

.khozam-estimate-request-page .panel_s {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09) !important;
  background: #fff !important;
  margin-bottom: 18px;
}

.khozam-estimate-request-page .panel-body {
  padding: 18px 22px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
  direction: rtl;
  text-align: right;
}

.khozam-estimate-request-page .panel-body #inputTagsWrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 6px rgba(26, 44, 29, 0.04);
  overflow: hidden;
}

.khozam-estimate-request-page .panel-body #inputTagsWrapper > label,
.khozam-estimate-request-page .panel-body #inputTagsWrapper > label.control-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(26, 44, 29, 0.05) 0%, rgba(26, 44, 29, 0.02) 100%);
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}

.khozam-estimate-request-page .panel-body #inputTagsWrapper > label i.fa-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  font-size: 11px;
  padding: 0;
}

.khozam-estimate-request-page .panel-body #inputTagsWrapper .bootstrap-tagsinput {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none;
}

.khozam-estimate-request-page .panel-body #inputTagsWrapper .bootstrap-tagsinput input {
  flex: 1;
  min-width: 120px;
  height: 28px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  outline: none;
  text-align: right;
  direction: rtl;
}

.khozam-estimate-request-page .panel-body #inputTagsWrapper .bootstrap-tagsinput .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(196, 168, 113, 0.18) 0%, rgba(196, 168, 113, 0.08) 100%);
  border: 1px solid rgba(196, 168, 113, 0.32);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: default;
}

.khozam-estimate-request-page .panel-body #inputTagsWrapper .bootstrap-tagsinput .tag [data-role="remove"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 44, 29, 0.08);
  color: var(--khozam-purple);
  font-size: 10px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.khozam-estimate-request-page .panel-body #inputTagsWrapper .bootstrap-tagsinput .tag [data-role="remove"]:hover {
  background: #c62828;
  color: #fff;
}

.khozam-estimate-request-page .panel-body .form-group.no-mbot {
  margin-bottom: 0;
}

.khozam-estimate-request-page .panel-body .form-group {
  margin-bottom: 14px;
}

.khozam-estimate-request-page .panel-body .form-group label,
.khozam-estimate-request-page .panel-body .form-group .control-label {
  display: block;
  margin-bottom: 6px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.khozam-estimate-request-page .panel-body .form-control,
.khozam-estimate-request-page .panel-body textarea {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.khozam-estimate-request-page .panel-body .form-control:focus,
.khozam-estimate-request-page .panel-body textarea:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

.khozam-estimate-request-page .panel-body .bootstrap-select {
  width: 100% !important;
}

.khozam-estimate-request-page .panel-body .bootstrap-select > .dropdown-toggle {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
}

.khozam-estimate-request-page .panel-body .bootstrap-select > .dropdown-toggle:focus,
.khozam-estimate-request-page .panel-body .bootstrap-select.open > .dropdown-toggle {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

.khozam-estimate-request-page .panel-body .bootstrap-select .filter-option {
  text-align: right;
}

.khozam-estimate-request-page .panel-body .input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.khozam-estimate-request-page .panel-body .input-group .form-control {
  flex: 1;
  min-width: 0;
}

.khozam-estimate-request-page .panel-body .input-group .input-group-btn {
  display: flex;
  width: auto;
  align-items: stretch;
}

.khozam-estimate-request-page .panel-body .input-group .input-group-btn .btn {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: var(--khozam-gold);
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(196, 168, 113, 0.32);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.khozam-estimate-request-page .panel-body .input-group .input-group-btn .btn:hover,
.khozam-estimate-request-page .panel-body .input-group .input-group-btn .btn:focus {
  background: var(--khozam-gold-hover);
  color: var(--khozam-purple);
  box-shadow: 0 6px 14px rgba(196, 168, 113, 0.45);
}

.khozam-estimate-request-page .panel-body .khozam-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 0;
}

.khozam-estimate-request-page .panel-body .khozam-meta-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 6px rgba(26, 44, 29, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.khozam-estimate-request-page .panel-body .khozam-meta-card:hover {
  border-color: rgba(196, 168, 113, 0.35);
  box-shadow: 0 4px 12px rgba(26, 44, 29, 0.08);
}

.khozam-estimate-request-page .panel-body .khozam-meta-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-purple);
  font-size: 13px;
  flex-shrink: 0;
}

.khozam-estimate-request-page .panel-body .khozam-meta-card__icon--gold {
  background: rgba(196, 168, 113, 0.22);
  color: var(--khozam-purple);
}

.khozam-estimate-request-page .panel-body .khozam-meta-card__icon--blue {
  background: rgba(25, 118, 210, 0.14);
  color: #1976d2;
}

.khozam-estimate-request-page .panel-body .khozam-meta-card__body {
  flex: 1;
  min-width: 0;
}

.khozam-estimate-request-page .panel-body .khozam-meta-card__label {
  display: block;
  color: rgba(26, 44, 29, 0.62);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.khozam-estimate-request-page .panel-body .khozam-meta-card__value {
  display: block;
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.khozam-estimate-request-page .panel-body .khozam-meta-card__value.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(196, 168, 113, 0.18) 0%, rgba(196, 168, 113, 0.08) 100%);
  border: 1px solid rgba(196, 168, 113, 0.32);
  color: var(--khozam-purple);
  font-size: 12px;
}

.khozam-estimate-request-page .panel-body .khozam-meta-card__value.status-badge::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--khozam-gold);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.18);
}

.khozam-estimate-request-page .panel-body .khozam-submission {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 6px rgba(26, 44, 29, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.khozam-estimate-request-page .panel-body .khozam-submission:hover {
  border-color: rgba(196, 168, 113, 0.35);
  box-shadow: 0 4px 12px rgba(26, 44, 29, 0.08);
}

.khozam-estimate-request-page .panel-body .khozam-submission__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.khozam-estimate-request-page .panel-body .khozam-submission__body {
  flex: 1;
  min-width: 0;
}

.khozam-estimate-request-page .panel-body .khozam-submission__label {
  display: block;
  color: rgba(26, 44, 29, 0.62);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.khozam-estimate-request-page .panel-body .khozam-submission__value {
  display: block;
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

.khozam-estimate-request-page .panel-body hr.mbot5 {
  margin: 12px 0;
  border: 0;
  border-top: 1px dashed rgba(26, 44, 29, 0.1);
}

.khozam-estimate-request-page .panel-body .khozam-attachments-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 10px;
  border-radius: 12px;
  background: rgba(196, 168, 113, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-purple);
  font-size: 12px;
}

.khozam-estimate-request-page .panel-body .khozam-attachments-strip i {
  color: var(--khozam-gold);
  font-size: 14px;
}

.khozam-estimate-request-page .panel-body .khozam-attachments-strip #lead_attachments {
  display: contents;
}

.khozam-estimate-request-page .panel-body .khozam-attachments-strip #lead_attachments .mtop20,
.khozam-estimate-request-page .panel-body .khozam-attachments-strip #lead_attachments .tw-mt-5,
.khozam-estimate-request-page .panel-body .khozam-attachments-strip #lead_attachments [class*="mtop"] {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

.khozam-estimate-request-page .panel-body .khozam-attachments-strip ul,
.khozam-estimate-request-page .panel-body .khozam-attachments-strip ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: contents;
}

.khozam-estimate-request-page .panel-body .khozam-attachments-strip li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(196, 168, 113, 0.22);
}

.khozam-estimate-request-page .panel-body .khozam-attachments-strip li a {
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.khozam-estimate-request-page .panel-body .khozam-attachments-strip li a:hover {
  color: var(--khozam-gold);
  text-decoration: none;
}

@media (max-width: 768px) {
  .khozam-estimate-request-page .khozam-estimate-request-hero {
    padding: 14px 16px;
  }
  .khozam-estimate-request-page .khozam-estimate-request-hero__title-main {
    flex: 1 1 100%;
  }
  .khozam-estimate-request-page .khozam-estimate-request-hero__actions {
    width: 100%;
  }
  .khozam-estimate-request-page .panel-body .khozam-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * Azyan Khozam — Estimate Request Form Builder page
 * Improves /admin/estimate_request/formbuilder.php
 * (new form / edit form). Same Khozam design + RTL layout.
 * ============================================================ */

.khozam-estimate-formbuilder-page .alert.alert-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: rgba(196, 168, 113, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  border-inline-start: 4px solid var(--khozam-gold);
  color: var(--khozam-purple);
  font-size: 12px;
  line-height: 1.55;
}

.khozam-estimate-formbuilder-page .alert.alert-info::before {
  content: "\f05a";
  font-family: "FontAwesome";
  color: var(--khozam-gold);
  font-size: 14px;
}

.khozam-estimate-formbuilder-page .khozam-estimate-formbuilder-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
  direction: rtl;
  text-align: right;
}

.khozam-estimate-formbuilder-page .khozam-estimate-formbuilder-hero::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: var(--khozam-gold);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='black' d='M0 64C0 28.7 28.7 0 64 0L320 0c35.3 0 64 28.7 64 64l0 384c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zm64 64l0 32c0 17.7 14.3 32 32 32l192 0c17.7 0 32-14.3 32-32l0-32c0-17.7-14.3-32-32-32L96 96C78.3 96 64 110.3 64 128zm32 192c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-128 0c-17.7 0-32 14.3-32 32zm0 96c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-128 0c-17.7 0-32 14.3-32 32z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='black' d='M0 64C0 0 28.7 0 64 0L320 0c35.3 0 64 28.7 64 64l0 384c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zm64 64l0 32c0 17.7 14.3 32 32 32l192 0c17.7 0 32-14.3 32-32l0-32c0-17.7-14.3-32-32-32L96 96C78.3 96 64 110.3 64 128zm32 192c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-128 0c-17.7 0-32 14.3-32 32zm0 96c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-128 0c-17.7 0-32 14.3-32 32z'/></svg>");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

.khozam-estimate-formbuilder-page .khozam-estimate-formbuilder-hero__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 200px;
}

.khozam-estimate-formbuilder-page .khozam-estimate-formbuilder-hero__title-main {
  color: var(--khozam-cream);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.khozam-estimate-formbuilder-page .khozam-estimate-formbuilder-hero__title-sub {
  color: rgba(248, 240, 224, 0.7);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.khozam-estimate-formbuilder-page .khozam-estimate-formbuilder-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.14);
  border: 1px solid rgba(196, 168, 113, 0.32);
  color: var(--khozam-cream);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.khozam-estimate-formbuilder-page .khozam-estimate-formbuilder-hero__badge i {
  color: var(--khozam-gold);
  font-size: 10px;
}

/* Tabs styling */
.khozam-estimate-formbuilder-page .horizontal-scrollable-tabs {
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(26, 44, 29, 0.04);
  padding: 4px;
  direction: rtl;
}

.khozam-estimate-formbuilder-page .horizontal-scrollable-tabs .horizontal-tabs {
  padding: 0;
}

.khozam-estimate-formbuilder-page .horizontal-scrollable-tabs ul.nav-tabs-horizontal {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  background: transparent;
  direction: rtl;
}

.khozam-estimate-formbuilder-page .horizontal-scrollable-tabs ul.nav-tabs-horizontal li {
  flex: 1;
  margin: 0;
  float: none;
  display: flex;
}

.khozam-estimate-formbuilder-page .horizontal-scrollable-tabs ul.nav-tabs-horizontal li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 10px 14px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(26, 44, 29, 0.7);
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.khozam-estimate-formbuilder-page .horizontal-scrollable-tabs ul.nav-tabs-horizontal li a:hover {
  background: rgba(248, 240, 224, 0.4);
  color: var(--khozam-purple);
  text-decoration: none;
}

.khozam-estimate-formbuilder-page .horizontal-scrollable-tabs ul.nav-tabs-horizontal li.active a {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  box-shadow: 0 4px 10px rgba(26, 44, 29, 0.18);
}

.khozam-estimate-formbuilder-page .horizontal-scrollable-tabs ul.nav-tabs-horizontal li.active a:hover {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
}

.khozam-estimate-formbuilder-page .horizontal-scrollable-tabs .scroller {
  display: none;
}

.khozam-estimate-formbuilder-page .panel_s {
  border: 0 !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.09) !important;
  background: #fff !important;
  margin-bottom: 18px;
}

.khozam-estimate-formbuilder-page .panel-body {
  padding: 18px 22px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
  direction: rtl;
  text-align: right;
  min-height: 200px;
}

.khozam-estimate-formbuilder-page .panel-body .tab-content {
  background: transparent;
  border: 0;
  padding: 0;
}

.khozam-estimate-formbuilder-page .panel-body .tab-content > .tab-pane {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Form fields styling */
.khozam-estimate-formbuilder-page .tw-mx-auto.tw-max-w-3xl {
  max-width: 800px;
  margin: 0 auto;
}

.khozam-estimate-formbuilder-page .tw-mx-auto.tw-max-w-3xl.-tw-mt-5 {
  margin-top: 0;
}

.khozam-estimate-formbuilder-page .form-group {
  margin-bottom: 14px;
}

.khozam-estimate-formbuilder-page .form-group label,
.khozam-estimate-formbuilder-page .form-group > .control-label {
  display: block;
  margin-bottom: 6px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.khozam-estimate-formbuilder-page .form-group label i.fa-circle-question {
  color: var(--khozam-gold);
  margin-inline-end: 4px;
}

.khozam-estimate-formbuilder-page .form-control,
.khozam-estimate-formbuilder-page textarea {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.khozam-estimate-formbuilder-page .form-control:focus,
.khozam-estimate-formbuilder-page textarea:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

.khozam-estimate-formbuilder-page input[type="url"].form-control {
  direction: ltr;
  text-align: left;
}

.khozam-estimate-formbuilder-page input[type="color"].form-control {
  min-height: 42px;
  padding: 4px;
  cursor: pointer;
}

.khozam-estimate-formbuilder-page textarea.form-control {
  min-height: 80px;
  resize: vertical;
}

.khozam-estimate-formbuilder-page .bootstrap-select {
  width: 100% !important;
}

.khozam-estimate-formbuilder-page .bootstrap-select > .dropdown-toggle {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  text-align: right;
  direction: rtl;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.khozam-estimate-formbuilder-page .bootstrap-select > .dropdown-toggle:focus,
.khozam-estimate-formbuilder-page .bootstrap-select.open > .dropdown-toggle {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

.khozam-estimate-formbuilder-page .bootstrap-select .filter-option {
  text-align: right;
}

.khozam-estimate-formbuilder-page .input-group {
  display: flex;
  gap: 0;
  align-items: stretch;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  direction: ltr;
}

.khozam-estimate-formbuilder-page .input-group .form-control {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  direction: ltr;
  text-align: left;
}

.khozam-estimate-formbuilder-page .input-group .input-group-addon {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-inline-start: 1px solid rgba(26, 44, 29, 0.1);
  border-radius: 0;
  background: #fbf8f4;
  color: rgba(26, 44, 29, 0.6);
  font-size: 12px;
  font-weight: 600;
}

.khozam-estimate-formbuilder-page .row .col-md-6 {
  padding: 0 6px;
  margin-bottom: 12px;
}

.khozam-estimate-formbuilder-page .row .col-md-6 .form-group {
  margin-bottom: 0;
}

/* Radio buttons (khozam cards) */
.khozam-estimate-formbuilder-page .radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 6px 0;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  direction: rtl;
}

.khozam-estimate-formbuilder-page .radio:hover {
  border-color: rgba(196, 168, 113, 0.35);
  background: rgba(248, 240, 224, 0.4);
}

.khozam-estimate-formbuilder-page .radio input[type="radio"] {
  cursor: pointer;
  accent-color: var(--khozam-gold);
  transform: scale(1.15);
  margin: 0;
  position: static;
}

.khozam-estimate-formbuilder-page .radio label {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline;
  padding: 0;
  min-height: auto;
}

.khozam-estimate-formbuilder-page .radio.radio-inline,
.khozam-estimate-formbuilder-page .radio.radio-inline.radio-primary,
.khozam-estimate-formbuilder-page .radio.radio-inline.radio-danger,
.khozam-estimate-formbuilder-page .radio.radio-inline.radio-success {
  display: inline-flex;
  margin-inline-end: 6px;
}

/* Checkboxes (khozam cards) */
.khozam-estimate-formbuilder-page .checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 6px 0;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  direction: rtl;
}

.khozam-estimate-formbuilder-page .checkbox:hover {
  border-color: rgba(196, 168, 113, 0.35);
  background: rgba(248, 240, 224, 0.4);
}

.khozam-estimate-formbuilder-page .checkbox input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--khozam-gold);
  transform: scale(1.15);
  margin: 0;
  position: static;
}

.khozam-estimate-formbuilder-page .checkbox label {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline;
  padding: 0;
  min-height: auto;
}

.khozam-estimate-formbuilder-page .checkbox.checkbox-primary,
.khozam-estimate-formbuilder-page .checkbox.checkbox-inline {
  display: flex;
}

.khozam-estimate-formbuilder-page hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px dashed rgba(26, 44, 29, 0.1);
}

.khozam-estimate-formbuilder-page .bold {
  color: var(--khozam-purple);
  font-weight: 700;
}

.khozam-estimate-formbuilder-page .select-notification-settings.hide {
  display: none;
}

.khozam-estimate-formbuilder-page .btn-bottom-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
  padding: 14px 20px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 4px 12px rgba(26, 44, 29, 0.05);
}

.khozam-estimate-formbuilder-page .btn-bottom-toolbar .btn-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 10px 22px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-family: var(--khozam-font);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(196, 168, 113, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.khozam-estimate-formbuilder-page .btn-bottom-toolbar .btn-primary:hover,
.khozam-estimate-formbuilder-page .btn-bottom-toolbar .btn-primary:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.4);
}

.khozam-estimate-formbuilder-page .khozam-form-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 6px rgba(26, 44, 29, 0.04);
}

.khozam-estimate-formbuilder-page .khozam-form-section__label {
  display: block;
  margin-bottom: 8px;
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
}

.khozam-estimate-formbuilder-page .khozam-form-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.khozam-estimate-formbuilder-page .khozam-form-section__grid .radio,
.khozam-estimate-formbuilder-page .khozam-form-section__grid .checkbox {
  margin: 0;
}

.khozam-estimate-formbuilder-page textarea[name="success_submit_msg"] {
  margin-top: 10px;
}

.khozam-estimate-formbuilder-page input[name="submit_redirect_url"] {
  margin-top: 8px;
}

@media (max-width: 768px) {
  .khozam-estimate-formbuilder-page .khozam-estimate-formbuilder-hero {
    padding: 14px 16px;
  }
  .khozam-estimate-formbuilder-page .khozam-estimate-formbuilder-hero__title {
    flex: 1 1 100%;
  }
  .khozam-estimate-formbuilder-page .horizontal-scrollable-tabs ul.nav-tabs-horizontal {
    flex-wrap: wrap;
  }
  .khozam-estimate-formbuilder-page .horizontal-scrollable-tabs ul.nav-tabs-horizontal li {
    flex: 1 1 calc(50% - 4px);
  }
  .khozam-estimate-formbuilder-page .khozam-form-section__grid {
    grid-template-columns: 1fr;
  }
}

/* Fix: prevent panel_s overflow from clipping bootstrap-select dropdowns */
.khozam-estimate-formbuilder-page .panel_s {
  overflow: visible !important;
}

/* ════════════════════════════════════════
   Sales Pipeline & Today's Activity
   ════════════════════════════════════════ */
.khozam-pipeline-section { background: #fff; border-radius: 12px; overflow: hidden; }
.khozam-pipeline__header {
  background: linear-gradient(135deg, #1a2c1d 0%, #243b2f 100%);
  padding: 18px 24px;
}
.khozam-pipeline__header-text { display: flex; flex-direction: column; }
.khozam-pipeline__title { margin: 0; font-size: 18px; font-weight: 700; color: #f8f0e0; }
.khozam-pipeline__subtitle { margin: 2px 0 0; font-size: 13px; color: rgba(248,240,224,0.7); }
.khozam-pipeline__body { padding: 24px; }

.khozam-funnel { display: flex; flex-direction: column; gap: 16px; }
.khozam-funnel__stage { display: flex; flex-direction: column; gap: 4px; }
.khozam-funnel__stage-label { display: flex; justify-content: space-between; align-items: center; }
.khozam-funnel__stage-name { font-size: 14px; font-weight: 600; color: #333; }
.khozam-funnel__stage-count { font-size: 16px; font-weight: 700; color: #1a2c1d; }
.khozam-funnel__bar-track {
  height: 28px; background: #f2f2f2; border-radius: 6px; overflow: hidden;
}
.khozam-funnel__bar-fill { height: 100%; border-radius: 6px; transition: width 0.6s ease; }
.khozam-funnel__conversion {
  font-size: 12px; font-weight: 600; color: #666; text-align: right; padding-right: 4px;
}
.khozam-funnel__conversion::before { content: '↘ '; }

.khozam-today-activity {
  background: #f9fafb; border-radius: 10px; padding: 18px; margin-bottom: 20px;
}
.khozam-today-activity__title { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: #1a2c1d; }
.khozam-today-activity__date { margin: 0 0 14px; font-size: 12px; color: #888; }
.khozam-today-activity__grid { display: flex; flex-direction: column; gap: 10px; }
.khozam-today-activity__card {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #eee; border-radius: 8px;
  padding: 12px 14px;
  border-left: 4px solid var(--accent);
}
.khozam-today-activity__icon { font-size: 20px; line-height: 1; }
.khozam-today-activity__value { font-size: 22px; font-weight: 800; color: #1a2c1d; min-width: 30px; }
.khozam-today-activity__label { font-size: 13px; color: #666; }

.khozam-conversion-rates {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background:
    linear-gradient(165deg, rgba(248, 240, 224, 0.55) 0%, #fff 42%),
    #fff;
  box-shadow: 0 6px 18px rgba(26, 44, 29, 0.06);
}

.khozam-conversion-rates__head {
  margin-bottom: 2px;
}

.khozam-conversion-rates__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--khozam-purple);
  letter-spacing: -0.01em;
}

.khozam-conversion-rates__subtitle {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-conversion-rates__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.07);
  background: #fff;
  box-shadow: 0 1px 0 rgba(26, 44, 29, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.khozam-conversion-rates__item.is-updated {
  animation: khozam-rate-pulse 0.55s ease;
}

@keyframes khozam-rate-pulse {
  0% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(196, 168, 113, 0); }
  40% { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26, 44, 29, 0.1); border-color: rgba(196, 168, 113, 0.35); }
  100% { transform: translateY(0); box-shadow: 0 1px 0 rgba(26, 44, 29, 0.03); }
}

.khozam-conversion-rates__flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.khozam-conversion-rates__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.06);
  color: rgba(26, 44, 29, 0.72);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.khozam-conversion-rates__chip--to {
  background: rgba(26, 44, 29, 0.04);
  color: var(--rate-color, var(--khozam-purple));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.khozam-conversion-rates__item--teal .khozam-conversion-rates__chip--to {
  background: rgba(32, 201, 151, 0.12);
  color: #0f7a5c;
}

.khozam-conversion-rates__item--green .khozam-conversion-rates__chip--to {
  background: rgba(61, 154, 95, 0.12);
  color: #2a6d42;
}

.khozam-conversion-rates__item--blue .khozam-conversion-rates__chip--to {
  background: rgba(74, 111, 165, 0.12);
  color: #314f7a;
}

.khozam-conversion-rates__arrow {
  display: inline-flex;
  color: rgba(26, 44, 29, 0.35);
}

html[dir="rtl"] .khozam-conversion-rates__arrow {
  transform: scaleX(-1);
}

.khozam-conversion-rates__meter {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.khozam-conversion-rates__pct {
  min-width: 3.4em;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--khozam-purple);
  font-variant-numeric: tabular-nums;
}

.khozam-conversion-rates__bar-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(26, 44, 29, 0.07);
}

.khozam-conversion-rates__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--rate-color, #20c997);
  transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.khozam-conversion-rates__item--teal { --rate-color: #20c997; }
.khozam-conversion-rates__item--green { --rate-color: #3d9a5f; }
.khozam-conversion-rates__item--blue { --rate-color: #4a6fa5; }

@media (max-width: 767px) {
  .khozam-funnel { gap: 12px; }
  .khozam-conversion-rates {
    margin-top: 16px;
  }
  .khozam-conversion-rates__pct {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .khozam-conversion-rates__item.is-updated {
    animation: none;
  }
  .khozam-conversion-rates__bar-fill {
    transition: none;
  }
}

/* ════════════════════════════════════════
   Dashboard Section Cards
   ════════════════════════════════════════ */
.khozam-section-card { border-radius: 10px; overflow: hidden; }
.khozam-section-card__head {
  background: #f8f6f3; border-bottom: 1px solid #eee;
  padding: 14px 18px; display: flex; flex-direction: column;
}
.khozam-section-card__title { margin: 0; font-size: 15px; font-weight: 700; color: #1a2c1d; }
.khozam-section-card__sub { font-size: 12px; color: #888; }

.khozam-table-clean thead th { background: #fafafa; border-bottom: 2px solid #1a2c1d; color: #1a2c1d; font-size: 12px; padding: 10px 12px; }
.khozam-table-clean tbody td { padding: 10px 12px; font-size: 13px; vertical-align: middle; }

/* Revenue */
.khozam-revenue { padding: 6px 0; }
.khozam-revenue__total { text-align: center; padding: 16px 0 20px; border-bottom: 1px solid #f0f0f0; margin-bottom: 18px; }
.khozam-revenue__total-label { display: block; font-size: 13px; color: #888; margin-bottom: 4px; }
.khozam-revenue__total-value { font-size: 28px; font-weight: 800; color: #1a2c1d; }
.khozam-revenue__breakdown { display: flex; flex-direction: column; gap: 16px; }
.khozam-revenue__item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.khozam-revenue__item-label { font-size: 13px; font-weight: 600; color: #444; grid-column: 1; }
.khozam-revenue__item-value { font-size: 18px; font-weight: 700; color: #1a2c1d; grid-column: 2; text-align: right; }
.khozam-revenue__bar-track { grid-column: 1 / -1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.khozam-revenue__item--won .khozam-revenue__bar-fill { background: #3d9a5f; height: 100%; border-radius: 4px; }
.khozam-revenue__item--expected .khozam-revenue__bar-fill { background: #20c997; height: 100%; border-radius: 4px; }
.khozam-revenue__item-pct { font-size: 11px; font-weight: 600; color: #888; grid-column: 2; text-align: right; }

/* Source Breakdown */
.khozam-source-chart { display: flex; flex-direction: column; gap: 14px; }
.khozam-source-chart__item { }
.khozam-source-chart__label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.khozam-source-chart__name { font-size: 13px; font-weight: 600; color: #333; }
.khozam-source-chart__count { font-size: 14px; font-weight: 700; color: #1a2c1d; }
.khozam-source-chart__bar-track { height: 18px; background: #f2f2f2; border-radius: 4px; overflow: hidden; }
.khozam-source-chart__bar-fill { height: 100%; border-radius: 4px; }
.khozam-source-chart__won-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: #888; }
.khozam-source-chart__won-label { font-weight: 500; }
.khozam-source-chart__won-count { font-weight: 700; color: #3d9a5f; }
.khozam-source-chart__won-pct { color: #999; }

/* Staff Performance */
.khozam-staff-perf { display: flex; flex-direction: column; gap: 16px; }
.khozam-staff-perf__item { }
.khozam-staff-perf__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.khozam-staff-perf__name { font-size: 14px; font-weight: 700; color: #1a2c1d; }
.khozam-staff-perf__calls { font-size: 13px; font-weight: 600; color: #666; }
.khozam-staff-perf__bar-track { height: 16px; background: #f2f2f2; border-radius: 4px; overflow: hidden; }
.khozam-staff-perf__bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #d68910, #d4b87f); }
.khozam-staff-perf__meta { font-size: 12px; color: #888; margin-top: 2px; }

/* Recent Activity Feed */
.khozam-activity-feed { max-height: 380px; overflow-y: auto; }
.khozam-activity-feed__item {
  display: flex; gap: 14px; padding: 12px 18px;
  border-bottom: 1px solid #f5f5f5;
}
.khozam-activity-feed__item:last-child { border-bottom: none; }
.khozam-activity-feed__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #c4a871; margin-top: 5px; flex-shrink: 0;
}
.khozam-activity-feed__content { flex: 1; }
.khozam-activity-feed__desc {
  margin: 0; font-size: 13px; color: #444;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.khozam-activity-feed__time { font-size: 11px; color: #aaa; margin-top: 2px; display: inline-block; }

/* Calendar widget inside dashboard */
.khozam-calendar-widget .panel-body { padding: 15px; }
.khozam-calendar-widget #calendar { min-height: 420px; }
.khozam-calendar-widget .calendar_filters { margin-bottom: 12px; }
.khozam-calendar-widget .checkbox { margin: 0 8px 4px 0; }
.khozam-calendar-widget .checkbox label { font-size: 12px; }
.khozam-calendar-widget .fc-toolbar-title { font-size: 16px !important; }
.khozam-calendar-widget .fc-daygrid-day-frame { min-height: 40px; }

.khozam-calendar-row {
  display: flex;
  flex-wrap: wrap;
}

.khozam-calendar-row__main,
.khozam-calendar-row__side {
  display: flex;
  flex-direction: column;
}

.khozam-calendar-row__main > .khozam-calendar-widget {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
}

.khozam-calendar-row__main .khozam-calendar-widget .panel-body {
  flex: 1 1 auto;
}

.khozam-calendar-widget--compact #calendar {
  min-height: 360px;
}

.khozam-calendar-widget--compact .fc-daygrid-day-frame {
  min-height: 34px;
}

.khozam-calendar-widget--compact .fc-toolbar-title {
  font-size: 15px !important;
}

.khozam-calendar-row__side {
  gap: 14px;
}

.khozam-calendar-side-card {
  margin-bottom: 0;
}

.khozam-calendar-row__side .khozam-appt-list {
  max-height: 220px;
}

.khozam-calendar-row__side .khozam-activity-feed {
  max-height: 240px;
}

.khozam-calendar-row__side .khozam-source-chart--compact {
  max-height: 220px;
  overflow-y: auto;
  padding-inline-end: 4px;
}

.khozam-staff-scorecard--side {
  margin-bottom: 0;
  flex: 1 1 auto;
}

.khozam-staff-scorecard--side .panel-body {
  padding: 10px 12px !important;
}

.khozam-staff-scorecard__scroll {
  max-height: 220px;
  overflow: auto;
}

.khozam-staff-scorecard__table {
  margin-bottom: 0;
}

.khozam-staff-scorecard__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 11px !important;
  padding: 7px 8px !important;
  white-space: nowrap;
}

.khozam-staff-scorecard__table tbody td {
  font-size: 12px !important;
  padding: 7px 8px !important;
  white-space: nowrap;
}

.khozam-staff-scorecard__name {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-weight: 600;
  color: #1a2c1d;
}

.khozam-activity-feed--wide {
  max-height: 320px;
  overflow-y: auto;
}

.khozam-revenue--strip {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) 1.4fr;
  gap: 22px 28px;
  align-items: center;
  padding: 4px 0;
}

.khozam-revenue--strip .khozam-revenue__total {
  text-align: start;
  padding: 0;
  margin: 0;
  border-bottom: 0;
  border-inline-end: 1px solid #eee;
  padding-inline-end: 24px;
}

.khozam-revenue--strip .khozam-revenue__breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 991px) {
  .khozam-calendar-row__main {
    margin-bottom: 15px;
  }

  .khozam-calendar-row__side {
    gap: 12px;
  }

  .khozam-calendar-row__side .khozam-source-chart--compact,
  .khozam-staff-scorecard__scroll {
    max-height: 260px;
  }

  .khozam-staff-scorecard__name {
    max-width: 180px;
  }

  .khozam-calendar-widget--compact #calendar {
    min-height: 320px;
  }

  .khozam-revenue--strip {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .khozam-revenue--strip .khozam-revenue__total {
    border-inline-end: 0;
    border-bottom: 1px solid #eee;
    padding: 0 0 16px;
    text-align: center;
  }

  .khozam-revenue--strip .khozam-revenue__breakdown {
    grid-template-columns: 1fr;
  }
}

/* Khozam fix (2026-07-24): Settings page "حفظ الإعدادات" button.
   The Perfex layout places the save button inside a `.btn-bottom-toolbar`
   that's supposed to be `position: fixed; bottom: 0`. With RTL + Khozam
   sidebar layout, the fixed positioning breaks on long pages (SMS has 15+
   triggers, Email has 20+, etc.) — the button sits in the MIDDLE of the
   viewport while scrolling, making it impossible to find when the user
   edits a trigger near the bottom. Re-apply the stock Perfex sticky-bottom
   behavior here, scoped to the settings page form (#settings-form). */
#settings-form .btn-bottom-toolbar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  margin-left: 230px !important;
  margin-right: 0 !important;
  padding: 12px 30px !important;
  background: #fff !important;
  box-shadow: 0 -4px 8px -2px rgba(0, 0, 0, 0.12) !important;
  z-index: 100 !important;
  text-align: left !important;
  border-top: 1px solid #e5e7eb !important;
}
[dir="rtl"] #settings-form .btn-bottom-toolbar {
  margin-left: 0 !important;
  margin-right: 230px !important;
  text-align: right !important;
}
@media (max-width: 768px) {
  #settings-form .btn-bottom-toolbar,
  [dir="rtl"] #settings-form .btn-bottom-toolbar {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Make sure the form's last trigger isn't hidden behind the fixed bar */
#settings-form { padding-bottom: 80px !important; }

/* ── Staff member add/edit page ── */
.khozam-staff-member-page > .container {
  max-width: 1180px;
}

.khozam-staff-member-page__last-active {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  margin-inline-start: 8px;
}

.khozam-staff-member-page__panel {
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-top: 4px solid var(--khozam-gold);
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(26, 44, 29, 0.12);
  overflow: hidden;
}

.khozam-staff-member-page__panel > .panel-body {
  padding: 22px 24px 28px;
}

.khozam-staff-member-page__section {
  margin-bottom: 22px;
  padding: 18px 18px 8px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 10px;
}

.khozam-staff-member-page__section-title {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.1);
  color: #1a2c1d;
  font-size: 15px;
  font-weight: 700;
}

.khozam-staff-member-page__section-title i {
  color: var(--khozam-gold);
  margin-inline-end: 6px;
}

.khozam-staff-member-page .nav-tabs-horizontal > li > a {
  font-weight: 600;
}

.khozam-staff-member-page .form-control,
.khozam-staff-member-page .bootstrap-select > .dropdown-toggle {
  border-radius: 8px;
  border-color: rgba(26, 44, 29, 0.15);
}

.khozam-staff-member-page .form-control:focus,
.khozam-staff-member-page .bootstrap-select > .dropdown-toggle:focus {
  border-color: var(--khozam-gold);
  box-shadow: 0 0 0 3px rgba(214, 137, 16, 0.15);
}

.khozam-staff-member-page .btn-bottom-toolbar .btn-primary {
  background: var(--khozam-gold);
  border-color: var(--khozam-gold);
  border-radius: 8px;
  font-weight: 700;
  min-width: 140px;
}

.khozam-staff-member-page .btn-bottom-toolbar .btn-primary:hover,
.khozam-staff-member-page .btn-bottom-toolbar .btn-primary:focus {
  filter: brightness(0.95);
}

@media (max-width: 767px) {
  .khozam-staff-member-page__section {
    padding: 14px 12px 4px;
  }

  .khozam-staff-member-page__panel > .panel-body {
    padding: 16px 14px 20px;
  }
}

/* ============================================================
 * Azyan Khozam — Shared settings / add-edit modals
 * Used by Call Logs: Type, Direction, Status add/edit widgets
 * ============================================================ */

.khozam-settings-modal {
  font-family: var(--khozam-font);
}

.khozam-settings-modal .modal-content {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(26, 44, 29, 0.25);
  background: #fff;
}

.khozam-settings-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border-bottom: 1px solid rgba(196, 168, 113, 0.2);
}

.khozam-settings-modal .modal-title {
  margin: 0;
  padding: 0;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  background: transparent;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.khozam-settings-modal .modal-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-gold);
  font-size: 14px;
  flex-shrink: 0;
}

.khozam-settings-modal .modal-header .close {
  margin: 0;
  padding: 0;
  color: var(--khozam-cream);
  font-size: 20px;
  font-weight: 400;
  opacity: 0.7;
  text-shadow: none;
  transition: opacity 0.2s ease;
}

.khozam-settings-modal .modal-header .close:hover {
  opacity: 1;
}

.khozam-settings-modal .modal-body {
  padding: 20px 22px;
  background: linear-gradient(180deg, #fbf8f4 0%, #f6f3ef 100%);
}

.khozam-settings-modal .modal-body .form-group label,
.khozam-settings-modal .modal-body .control-label {
  color: var(--khozam-purple);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}

.khozam-settings-modal .modal-body .form-control,
.khozam-settings-modal .modal-body .colorpicker-input,
.khozam-settings-modal .modal-body select.form-control {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--khozam-purple);
  font-family: var(--khozam-font);
  font-size: 13px;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.khozam-settings-modal .modal-body .form-control:focus,
.khozam-settings-modal .modal-body .colorpicker-input:focus,
.khozam-settings-modal .modal-body select.form-control:focus {
  border-color: rgba(196, 168, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22) !important;
  outline: none;
}

.khozam-settings-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-settings-modal .modal-footer .btn-default {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(26, 44, 29, 0.15);
  background: #fff;
  color: var(--khozam-purple);
  font-weight: 600;
}

.khozam-settings-modal .modal-footer .btn-default:hover {
  background: #faf8fc;
  border-color: rgba(26, 44, 29, 0.25);
}

.khozam-settings-modal .modal-footer .btn-primary,
.khozam-settings-modal .modal-footer .btn-info {
  min-height: 40px;
  padding: 8px 22px;
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.28);
}

.khozam-settings-modal .modal-footer .btn-primary:hover,
.khozam-settings-modal .modal-footer .btn-info:hover,
.khozam-settings-modal .modal-footer .btn-primary:focus,
.khozam-settings-modal .modal-footer .btn-info:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 10px 22px rgba(196, 168, 113, 0.4);
}

/* Call logs status modal extras */
.khozam-settings-modal .pills-tabs {
  border: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.khozam-settings-modal .pills-tabs > li {
  float: none;
}

.khozam-settings-modal .pills-tabs > li > a {
  border: 0 !important;
  background: rgba(26, 44, 29, 0.06);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--khozam-purple);
  font-weight: 600;
}

.khozam-settings-modal .pills-tabs > li.active > a,
.khozam-settings-modal .pills-tabs > li > a:hover {
  background: rgba(196, 168, 113, 0.22);
  color: var(--khozam-purple);
}

.khozam-settings-modal .card-tabs {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  overflow: hidden;
}

.khozam-settings-modal .soft-pane {
  padding: 16px;
}

.khozam-settings-modal .footer-inline {
  border-top: 1px solid rgba(26, 44, 29, 0.08);
  background: #fbfbfb;
  padding: 12px 16px;
}

.khozam-settings-modal .segmented {
  display: inline-flex;
  background: rgba(26, 44, 29, 0.05);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(26, 44, 29, 0.1);
}

.khozam-settings-modal .segmented input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.khozam-settings-modal .segmented label {
  padding: 8px 12px;
  margin: 0;
  cursor: pointer;
  color: var(--khozam-purple);
  font-weight: 600;
}

.khozam-settings-modal .segmented input[type="radio"]:checked + label {
  background: rgba(196, 168, 113, 0.25);
}

.khozam-settings-modal .subtle-info {
  border: 1px dashed rgba(196, 168, 113, 0.55);
  background: rgba(196, 168, 113, 0.08);
  color: var(--khozam-purple);
  border-radius: 10px;
}

.khozam-settings-modal .pretty-table thead th {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  color: var(--khozam-cream);
  border-bottom: 0;
  font-weight: 700;
}

.khozam-settings-modal .pretty-table tbody tr:hover {
  background: #faf8fc;
}

.khozam-settings-modal .btn-elevated {
  border: none !important;
  border-radius: 999px !important;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(196, 168, 113, 0.28);
}

.khozam-settings-modal .btn-elevated:hover {
  background: var(--khozam-gold-hover) !important;
}

.khozam-settings-modal .modal-footer .btn-danger,
.khozam-settings-modal .modal-body .btn-danger {
  min-height: 40px;
  padding: 8px 18px;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700;
}

.khozam-settings-modal .modal-footer .btn-secondary,
.khozam-settings-modal .modal-body .btn-secondary {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(26, 44, 29, 0.15);
  background: #fff;
  color: var(--khozam-purple);
  font-weight: 600;
}

.khozam-settings-modal .modal-title h5,
.khozam-settings-modal h5.modal-title {
  margin: 0;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.khozam-settings-modal .alert-info {
  border-radius: 10px;
}

.khozam-settings-modal .progress {
  border-radius: 999px;
  overflow: hidden;
  background: rgba(26, 44, 29, 0.08);
}

.khozam-settings-modal .progress-bar {
  background: linear-gradient(90deg, var(--khozam-gold), var(--khozam-gold-hover));
}

/* ============================================================
 * Khoza tables — force white header text on purple thead
 * DataTables sorting / Bootstrap th rules were overriding cream.
 * ============================================================ */
.khozam-markiting-report-page table thead th,
.khozam-markiting-report-page table.dataTable thead th,
.khozam-markiting-report-page .table > thead > tr > th,
.khozam-markiting-report-page .dataTables_wrapper table thead th,
.khozam-contracted-items-report-page table thead th,
.khozam-contracted-items-report-page table.dataTable thead th,
.khozam-contracted-items-report-page .table > thead > tr > th,
.khozam-contracted-items-report-page .dataTables_wrapper table thead th {
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.khozam-markiting-report-page table thead th a,
.khozam-markiting-report-page table.dataTable thead th a,
.khozam-contracted-items-report-page table thead th a,
.khozam-contracted-items-report-page table.dataTable thead th a,
.khozam-markiting-report-page table thead th.sorting,
.khozam-markiting-report-page table thead th.sorting_asc,
.khozam-markiting-report-page table thead th.sorting_desc,
.khozam-markiting-report-page table thead th.sorting_asc_disabled,
.khozam-markiting-report-page table thead th.sorting_desc_disabled,
.khozam-contracted-items-report-page table thead th.sorting,
.khozam-contracted-items-report-page table thead th.sorting_asc,
.khozam-contracted-items-report-page table thead th.sorting_desc,
.khozam-contracted-items-report-page table thead th.sorting_asc_disabled,
.khozam-contracted-items-report-page table thead th.sorting_desc_disabled {
  color: #ffffff !important;
}

.khozam-markiting-report-page table.dataTable thead .sorting:after,
.khozam-markiting-report-page table.dataTable thead .sorting_asc:after,
.khozam-markiting-report-page table.dataTable thead .sorting_desc:after,
.khozam-contracted-items-report-page table.dataTable thead .sorting:after,
.khozam-contracted-items-report-page table.dataTable thead .sorting_asc:after,
.khozam-contracted-items-report-page table.dataTable thead .sorting_desc:after {
  color: #ffffff !important;
  opacity: 0.85;
}

/* ── Settings page Khoza shell ── */
.khozam-settings-page .khozam-settings-page__nav-title,
.khozam-settings-page .khozam-settings-page__section-title {
  color: var(--khozam-purple) !important;
  font-weight: 700 !important;
}

.khozam-settings-page .navbar-pills-flat > li > a {
  border-radius: 10px;
  color: var(--khozam-purple);
  font-weight: 600;
}

.khozam-settings-page .navbar-pills-flat > li.active > a,
.khozam-settings-page .navbar-pills-flat > li > a:hover {
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
}

.khozam-settings-page .khozam-settings-page__panel {
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-top: 4px solid var(--khozam-gold);
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(26, 44, 29, 0.12);
  overflow: hidden;
}

.khozam-settings-page .khozam-settings-page__save,
.khozam-settings-page .btn-bottom-toolbar .btn-primary {
  background: var(--khozam-gold) !important;
  border-color: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  border-radius: 999px !important;
  font-weight: 700;
}

/* ── Email settings (البريد) ── */
.khozam-email-settings {
  --email-surface: #fffaf4;
  --email-border: rgba(26, 44, 29, 0.1);
  --email-ink: #1a2c1d;
  --email-muted: #6f6258;
}

.khozam-email-settings__status {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--email-border);
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf4 0%, #fff 70%);
  border-inline-start: 4px solid #c9a07a;
}

.khozam-email-settings__status.is-on {
  border-inline-start-color: #2f9e6b;
}

.khozam-email-settings__status.is-off {
  border-inline-start-color: #c9843a;
  background: linear-gradient(135deg, #fff6eb 0%, #fff 75%);
}

.khozam-email-settings__status-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.khozam-email-settings__status-dot {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: #c9843a;
  box-shadow: 0 0 0 4px rgba(201, 132, 58, 0.16);
  flex: 0 0 auto;
}

.khozam-email-settings__status.is-on .khozam-email-settings__status-dot {
  background: #2f9e6b;
  box-shadow: 0 0 0 4px rgba(47, 158, 107, 0.16);
}

.khozam-email-settings__status-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--email-ink);
}

.khozam-email-settings__status-desc {
  margin: 0;
  color: var(--email-muted);
  font-size: 13px;
  line-height: 1.55;
}

.khozam-email-settings__status-toggle .form-group {
  margin-bottom: 0;
}

.khozam-email-settings__status-toggle .control-label {
  display: none;
}

.khozam-email-settings__status-alert {
  margin-top: 0;
}

.khozam-email-settings__tabs .nav-tabs > li > a {
  border-radius: 999px !important;
  font-weight: 600;
  color: var(--email-ink);
}

.khozam-email-settings__tabs .nav-tabs > li.active > a,
.khozam-email-settings__tabs .nav-tabs > li.active > a:focus,
.khozam-email-settings__tabs .nav-tabs > li.active > a:hover {
  background: rgba(196, 168, 113, 0.2) !important;
  color: var(--khozam-purple) !important;
  border-color: transparent !important;
}

.khozam-email-settings__section {
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid var(--email-border);
  border-radius: 12px;
  background: #fff;
}

.khozam-email-settings__section-head {
  margin-bottom: 14px;
}

.khozam-email-settings__section-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--email-ink);
}

.khozam-email-settings__section-sub {
  margin: 0;
  color: var(--email-muted);
  font-size: 12.5px;
}

.khozam-email-settings__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--email-ink);
}

.khozam-email-settings__choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-email-settings__choice {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.khozam-email-settings__choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.khozam-email-settings__choice span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--email-border);
  border-radius: 999px;
  background: #fff;
  color: var(--email-ink);
  font-weight: 600;
  font-size: 13px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.khozam-email-settings__choice input:checked + span {
  background: rgba(196, 168, 113, 0.22);
  border-color: var(--khozam-gold);
  color: var(--khozam-purple);
}

.khozam-email-settings__choice:hover span {
  border-color: rgba(196, 168, 113, 0.55);
}

.khozam-email-settings__choice input:focus-visible + span {
  outline: 2px solid rgba(196, 168, 113, 0.55);
  outline-offset: 2px;
}

.khozam-email-settings__oauth {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px dashed rgba(196, 168, 113, 0.55);
  border-radius: 12px;
  background: var(--email-surface);
}

.khozam-email-settings__oauth-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--email-ink);
}

.khozam-email-settings__redirect {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--email-border);
  font-size: 12.5px;
}

.khozam-email-settings__redirect code {
  direction: ltr;
  unicode-bidi: isolate;
  word-break: break-all;
  color: var(--khozam-purple);
  background: transparent;
}

.khozam-email-settings__section--collapse {
  padding: 0;
  overflow: hidden;
}

.khozam-email-settings__collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  color: var(--email-ink);
  text-decoration: none !important;
}

.khozam-email-settings__collapse-toggle strong {
  display: block;
  font-size: 14px;
}

.khozam-email-settings__collapse-toggle small {
  display: block;
  margin-top: 2px;
}

.khozam-email-settings__collapse-toggle i {
  transition: transform 0.2s ease;
  color: var(--email-muted);
}

.khozam-email-settings__collapse-toggle:not(.collapsed) i {
  transform: rotate(180deg);
}

.khozam-email-settings__collapse-body {
  padding: 0 18px 16px;
  border-top: 1px solid var(--email-border);
}

.khozam-email-settings__test {
  margin-top: 8px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(196, 168, 113, 0.45);
  background: linear-gradient(160deg, rgba(196, 168, 113, 0.14), #fff 55%);
}

.khozam-email-settings__test h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--email-ink);
}

.khozam-email-settings__test-copy {
  margin-bottom: 12px;
}

.khozam-email-settings__test-input .form-control {
  border-radius: 10px 0 0 10px;
  min-height: 42px;
}

.khozam-email-settings__test-input .btn {
  min-height: 42px;
  border-radius: 0 10px 10px 0;
  font-weight: 700;
  padding-inline: 18px;
}

html[dir="rtl"] .khozam-email-settings__test-input .form-control {
  border-radius: 0 10px 10px 0;
}

html[dir="rtl"] .khozam-email-settings__test-input .btn {
  border-radius: 10px 0 0 10px;
}

.khozam-email-settings__empty {
  padding: 18px;
  text-align: center;
  color: var(--email-muted);
  border: 1px dashed var(--email-border);
  border-radius: 10px;
  background: #fafafa;
}

.khozam-email-settings__queue-table > thead > tr > th {
  background: #f7f2ec;
  border-bottom-color: var(--email-border) !important;
  color: var(--email-ink);
  font-weight: 700;
}

@media (max-width: 767px) {
  .khozam-email-settings__status,
  .khozam-email-settings__section,
  .khozam-email-settings__test {
    padding-inline: 14px;
  }

  .khozam-email-settings__test-input {
    display: block;
  }

  .khozam-email-settings__test-input .form-control,
  .khozam-email-settings__test-input .btn,
  html[dir="rtl"] .khozam-email-settings__test-input .form-control,
  html[dir="rtl"] .khozam-email-settings__test-input .btn {
    width: 100%;
    border-radius: 10px !important;
  }

  .khozam-email-settings__test-input .input-group-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
  }

  .khozam-email-settings__test-input .input-group-btn .btn {
    width: 100%;
  }
}

/* ── SMS settings ── */
.khozam-sms-settings {
  --sms-surface: #fffaf4;
  --sms-border: rgba(26, 44, 29, 0.1);
  --sms-ink: #1a2c1d;
  --sms-muted: #6f6258;
}

.khozam-sms-settings__status {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--sms-border);
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf4 0%, #fff 70%);
  border-inline-start: 4px solid #c9a07a;
}

.khozam-sms-settings__status.is-on {
  border-inline-start-color: #2f9e6b;
}

.khozam-sms-settings__status.is-off {
  border-inline-start-color: #c9843a;
  background: linear-gradient(135deg, #fff6eb 0%, #fff 75%);
}

.khozam-sms-settings__status-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.khozam-sms-settings__status-dot {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: #c9843a;
  box-shadow: 0 0 0 4px rgba(201, 132, 58, 0.16);
  flex: 0 0 auto;
}

.khozam-sms-settings__status.is-on .khozam-sms-settings__status-dot {
  background: #2f9e6b;
  box-shadow: 0 0 0 4px rgba(47, 158, 107, 0.16);
}

.khozam-sms-settings__status-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sms-ink);
}

.khozam-sms-settings__status-desc {
  margin: 0;
  color: var(--sms-muted);
  font-size: 13px;
  line-height: 1.55;
}

.khozam-sms-settings__status-toggle .form-group {
  margin-bottom: 0;
}

.khozam-sms-settings__status-toggle .control-label {
  display: none;
}

.khozam-sms-settings__notice {
  border-radius: 10px;
}

.khozam-sms-settings__section {
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid var(--sms-border);
  border-radius: 12px;
  background: #fff;
}

.khozam-sms-settings__section-head {
  margin-bottom: 14px;
}

.khozam-sms-settings__section-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sms-ink);
}

.khozam-sms-settings__section-sub {
  margin: 0;
  color: var(--sms-muted);
  font-size: 12.5px;
}

.khozam-sms-settings__gateways {
  margin-bottom: 0;
}

.khozam-sms-settings__gateway {
  border: 1px solid var(--sms-border) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  overflow: hidden;
  box-shadow: none !important;
}

.khozam-sms-settings__gateway.is-active {
  border-color: rgba(47, 158, 107, 0.45) !important;
}

.khozam-sms-settings__gateway > .panel-heading {
  background: #faf7f3 !important;
  padding: 0 !important;
  border: 0 !important;
}

.khozam-sms-settings__gateway > .panel-heading .panel-title {
  margin: 0;
  font-size: 14px;
}

.khozam-sms-settings__gateway > .panel-heading a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--sms-ink) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.khozam-sms-settings__gateway > .panel-heading a i {
  color: var(--sms-muted);
  transition: transform 0.2s ease;
}

.khozam-sms-settings__gateway > .panel-heading a:not(.collapsed) i {
  transform: rotate(180deg);
}

.khozam-sms-settings__gateway-name .label {
  margin-inline-start: 8px;
  vertical-align: middle;
}

.khozam-sms-settings__gateway .panel-body {
  border-top: 1px solid var(--sms-border);
}

.khozam-sms-settings__active-toggle {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #fafafa;
}

.khozam-sms-settings__active-toggle.is-on {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.35);
}

.khozam-sms-settings__gateway-test {
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
  border: 1px dashed rgba(196, 168, 113, 0.55);
  background: var(--sms-surface);
}

.khozam-sms-settings__gateway-test h5 {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--sms-ink);
}

.khozam-sms-settings__section--collapse {
  padding: 0;
  overflow: hidden;
}

.khozam-sms-settings__collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  color: var(--sms-ink);
  text-decoration: none !important;
}

.khozam-sms-settings__collapse-toggle strong {
  display: block;
  font-size: 14px;
}

.khozam-sms-settings__collapse-toggle small {
  display: block;
  margin-top: 2px;
}

.khozam-sms-settings__collapse-toggle i {
  transition: transform 0.2s ease;
  color: var(--sms-muted);
}

.khozam-sms-settings__collapse-toggle:not(.collapsed) i {
  transform: rotate(180deg);
}

.khozam-sms-settings__collapse-body {
  padding: 0 18px 16px;
  border-top: 1px solid var(--sms-border);
}

.khozam-sms-settings__trigger {
  position: relative;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0ebe4;
}

.khozam-sms-settings__trigger:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.khozam-sms-settings__merge-link {
  float: inline-end;
  margin-bottom: 4px;
}

.khozam-sms-settings__merge-fields {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f7f2ec;
  color: var(--sms-muted);
  font-size: 12px;
  direction: ltr;
  unicode-bidi: isolate;
}

.khozam-sms-settings__test {
  margin-top: 8px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(196, 168, 113, 0.45);
  background: linear-gradient(160deg, rgba(196, 168, 113, 0.14), #fff 55%);
}

.khozam-sms-settings__test h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sms-ink);
}

.khozam-sms-settings__test-copy {
  margin-bottom: 12px;
}

.khozam-sms-settings__test-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.khozam-sms-settings__test-actions .btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  padding-inline: 18px;
}

.khozam-sms-settings__test-hint {
  font-size: 12.5px;
}

#sms_oursms_test_number {
  direction: ltr;
  text-align: left;
}

@media (max-width: 767px) {
  .khozam-sms-settings__status,
  .khozam-sms-settings__section,
  .khozam-sms-settings__test {
    padding-inline: 14px;
  }

  .khozam-sms-settings__test-actions .btn {
    width: 100%;
  }
}

/* ── Cron settings ── */
.khozam-cron-settings {
  --cron-surface: #fffaf4;
  --cron-border: rgba(26, 44, 29, 0.1);
  --cron-ink: #1a2c1d;
  --cron-muted: #6f6258;
}

.khozam-cron-settings__hero {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--cron-border);
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf4 0%, #fff 72%);
  border-inline-start: 4px solid var(--khozam-gold);
}

.khozam-cron-settings__hero-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cron-ink);
}

.khozam-cron-settings__hero-sub {
  margin: 0;
  color: var(--cron-muted);
  font-size: 13px;
  line-height: 1.65;
  max-width: 820px;
}

.khozam-cron-settings__hero-actions .btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  padding-inline: 18px;
}

.khozam-cron-settings__command-box {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(196, 168, 113, 0.45);
  border-radius: 10px;
  background: #fff;
}

.khozam-cron-settings__command-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cron-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.khozam-cron-settings__command-value {
  display: block;
  direction: ltr;
  unicode-bidi: isolate;
  word-break: break-all;
  white-space: normal;
  color: var(--khozam-purple);
  background: transparent;
  font-size: 13px;
  line-height: 1.7;
}

.khozam-cron-settings__command-hint {
  margin: 0;
  color: var(--cron-muted);
  font-size: 12.5px;
}

.khozam-cron-settings__tabs .nav-tabs > li > a {
  border-radius: 999px !important;
  font-weight: 600;
  color: var(--cron-ink);
}

.khozam-cron-settings__tabs .nav-tabs > li.active > a,
.khozam-cron-settings__tabs .nav-tabs > li.active > a:focus,
.khozam-cron-settings__tabs .nav-tabs > li.active > a:hover {
  background: rgba(196, 168, 113, 0.2) !important;
  color: var(--khozam-purple) !important;
  border-color: transparent !important;
}

.khozam-cron-settings__card {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--cron-border);
  border-radius: 12px;
  background: #fff;
}

.khozam-cron-settings__card-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cron-ink);
}

.khozam-cron-settings__card-sub {
  margin: 0 0 14px;
  color: var(--cron-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.khozam-cron-settings__manual-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.khozam-cron-settings__manual-run .btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  padding-inline: 18px;
}

.khozam-cron-settings .tab-pane > .form-group:last-child,
.khozam-cron-settings .tab-pane > .row:last-child,
.khozam-cron-settings__card > .form-group:last-child {
  margin-bottom: 0;
}

.khozam-cron-settings .tab-pane h4.no-mbot,
.khozam-cron-settings .tab-pane h4.font-medium {
  margin-top: 0;
  color: var(--cron-ink);
  font-weight: 700;
}

.khozam-cron-settings .tab-pane .alert {
  border-radius: 10px;
}

.khozam-cron-settings .radio {
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .khozam-cron-settings__hero,
  .khozam-cron-settings__card {
    padding-inline: 14px;
  }

  .khozam-cron-settings__manual-run .btn,
  .khozam-cron-settings__hero-actions .btn {
    width: 100%;
  }
}

/* ════════════════════════════════════════
   Admin dashboard command center
   ════════════════════════════════════════ */
.khozam-dash-alerts {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-radius: 12px;
  padding: 16px 18px 18px;
}
.khozam-dash-alerts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 12px;
}
.khozam-dash-alerts__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1a2c1d;
}
.khozam-dash-alerts__sub {
  font-size: 12px;
  color: #888;
}
.khozam-dash-alerts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.khozam-dash-alerts__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #eee;
  text-decoration: none !important;
  background: #fafafa;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.khozam-dash-alerts__card:hover,
.khozam-dash-alerts__card:focus {
  background: #fff;
  border-color: #c4a871;
}
.khozam-dash-alerts__card--danger { border-inline-start: 4px solid #c0392b; }
.khozam-dash-alerts__card--warning { border-inline-start: 4px solid #d68910; }
.khozam-dash-alerts__card--info { border-inline-start: 4px solid #2a6f97; }
.khozam-dash-alerts__count {
  font-size: 22px;
  font-weight: 800;
  color: #1a2c1d;
  line-height: 1.1;
}
.khozam-dash-alerts__label {
  font-size: 12px;
  color: #555;
  font-weight: 600;
}

.khozam-dash-kpis {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-radius: 12px;
  overflow: hidden;
}
.khozam-dash-kpis__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: linear-gradient(135deg, #1a2c1d 0%, #243b2f 100%);
}
.khozam-dash-kpis__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #f8f0e0;
}
.khozam-dash-kpis__sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: rgba(248, 240, 224, 0.7);
}
.khozam-dash-kpis__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: rgba(248, 240, 224, 0.75);
}
.khozam-dash-kpis__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: #eee;
}
.khozam-dash-kpis__card {
  background: #fff;
  padding: 12px 14px;
  min-height: 92px;
}
.khozam-dash-kpis__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #777;
  margin-bottom: 4px;
}
.khozam-dash-kpis__value {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #1a2c1d;
  line-height: 1.15;
}
.khozam-dash-kpis__hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #888;
}
.khozam-dash-kpis__delta {
  font-style: normal;
  font-weight: 700;
  margin-inline-start: 4px;
}
.khozam-dash-kpis__delta.is-up { color: #3d9a5f; }
.khozam-dash-kpis__delta.is-down { color: #c0392b; }

.khozam-dash-kpis__card--revenue .khozam-dash-kpis__value--won {
  font-size: 18px;
  color: #1f6b3d;
}
.khozam-dash-kpis__stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}
.khozam-dash-kpis__stack > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  line-height: 1.3;
}
.khozam-dash-kpis__stack em {
  font-style: normal;
  color: #888;
  font-weight: 500;
  flex-shrink: 0;
}
.khozam-dash-kpis__stack b {
  font-weight: 700;
  color: #1a2c1d;
  text-align: end;
  word-break: break-word;
}

.khozam-unit-report__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.khozam-unit-report__metric {
  background: #f8f6f3;
  border-radius: 10px;
  padding: 12px 14px;
}
.khozam-unit-report__metric span {
  display: block;
  font-size: 12px;
  color: #777;
  margin-bottom: 4px;
}
.khozam-unit-report__metric strong {
  font-size: 15px;
  color: #1a2c1d;
}
.khozam-unit-report__metric small {
  font-weight: 500;
  color: #888;
}
.khozam-unit-report__groups {
  margin-top: 18px;
}
.khozam-unit-report__groups-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #1a2c1d;
}

.khozam-leads-report__pipeline-row {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #eee;
}

.khozam-appt-list {
  max-height: 380px;
  overflow-y: auto;
  padding-top: 8px !important;
}
.khozam-appt-list__item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f3f3f3;
}
.khozam-appt-list__item:last-child { border-bottom: none; }
.khozam-appt-list__when {
  min-width: 88px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.khozam-appt-list__when strong {
  font-size: 12px;
  color: #1a2c1d;
}
.khozam-appt-list__when span {
  font-size: 11px;
  color: #888;
}
.khozam-appt-list__body {
  flex: 1;
  min-width: 0;
}
.khozam-appt-list__body a {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1a2c1d;
  text-decoration: none;
}
.khozam-appt-list__body a:hover { color: #d68910; }
.khozam-appt-list__body small {
  display: block;
  margin-top: 2px;
  color: #888;
}

.khozam-dash-links {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-radius: 12px;
  padding: 16px 18px 18px;
}
.khozam-dash-links__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #1a2c1d;
}
.khozam-dash-links__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.khozam-dash-links__item {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8f6f3;
  border: 1px solid #eee;
  color: #1a2c1d;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
}
.khozam-dash-links__item:hover,
.khozam-dash-links__item:focus {
  border-color: #c4a871;
  background: #fff;
  color: #1a2c1d;
}

@media (max-width: 1199px) {
  .khozam-dash-kpis__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .khozam-dash-kpis__grid,
  .khozam-unit-report__metrics {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════
   Leads list page — professional table UI
   ════════════════════════════════════════ */
/* Flex stack = same hero→toolbar gap in list AND kanban (no sticky float gaps) */
.khozam-leads-page > .content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding-top: 12px !important;
  padding-bottom: 20px !important;
}
.khozam-leads-page > .content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.khozam-leads-page__hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  margin: 0 !important;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid, #243b2f) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}
.khozam-leads-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold, #c4a871);
  font-size: 22px;
  flex-shrink: 0;
}
.khozam-leads-page__title {
  margin: 0;
  color: var(--khozam-cream, #f8f0e0);
  font-size: 20px;
  font-weight: 700;
}
.khozam-leads-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

/* Never sticky in kanban — sticky + kanban height JS was shoving the bar down.
   List keeps sticky so filters stay visible while scrolling the table. */
.khozam-leads-toolbar-panel,
.khozam-leads-page .khozam-leads-toolbar-panel.panel_s {
  position: sticky;
  top: var(--khozam-header-height, 63px);
  z-index: 25;
  min-height: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  margin: 0 !important;
}
.khozam-leads-page.is-kanban .khozam-leads-toolbar-panel,
.khozam-leads-page.is-kanban .khozam-leads-toolbar-panel.panel_s,
body.kan-ban-body .khozam-leads-page .khozam-leads-toolbar-panel.panel_s {
  position: static !important;
  top: auto !important;
  z-index: 5;
  margin: 0 !important;
}
.khozam-leads-toolbar-panel__body {
  padding: 14px 16px !important;
  background: #fff !important;
}
.khozam-leads-page.is-kanban .khozam-leads-toolbar-panel__body {
  padding: 14px 16px !important;
}
.khozam-leads-page.is-kanban .khozam-leads-toolbar__search .form-group,
.khozam-leads-page.is-kanban .khozam-leads-toolbar__search .input-group,
.khozam-leads-page.is-kanban .khozam-leads-toolbar__search input[name="search"] {
  margin: 0 !important;
  min-width: 220px;
}
.khozam-leads-page.is-kanban .khozam-leads-toolbar__search input[name="search"] {
  min-height: 38px;
  border-radius: 10px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  background: #faf8fc !important;
  box-shadow: none !important;
}
.khozam-leads-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.khozam-leads-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  float: none !important;
}
.khozam-leads-toolbar__search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}
.khozam-leads-toolbar__filters {
  display: inline-flex;
  align-items: center;
}

.khozam-leads-summary {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}
.khozam-leads-summary__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #1a2c1d;
}
.khozam-leads-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.khozam-leads-summary__chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-inline-start: 4px solid var(--chip-color, #8a7f78);
  text-decoration: none !important;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.khozam-leads-summary__chip:hover,
.khozam-leads-summary__chip:focus,
.khozam-leads-summary__chip.is-active {
  background: #fff;
  border-color: rgba(196, 168, 113, 0.45);
}
.khozam-leads-summary__chip-value {
  font-size: 18px;
  font-weight: 800;
  color: #1a2c1d;
  line-height: 1.1;
}
.khozam-leads-summary__chip-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--chip-color, #666);
}
.khozam-leads-summary__chip.is-danger .khozam-leads-summary__chip-label {
  color: #c0392b;
}

.khozam-leads-table-panel {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  overflow: hidden;
}
.khozam-leads-table-panel__body {
  padding: 16px !important;
  background: #fff !important;
}

.khozam-leads-page #leads-table .khozam-leads-table .dataTables_wrapper .table-responsive {
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.06);
  padding-inline: 10px 14px;
}
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable thead th {
  background: #f8f6f3 !important;
  color: #1a2c1d !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(26, 44, 29, 0.1) !important;
  white-space: nowrap;
}
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable tbody td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-size: 13px;
  color: #3a3340;
  border-color: rgba(26, 44, 29, 0.05) !important;
}
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable tbody tr.khozam-lead-row:hover td {
  background: #fff8ef !important;
}
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable thead th:nth-child(1),
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable thead th#th-number,
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable thead th#th-name,
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable tbody td:nth-child(1),
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody td:nth-child(2),
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody td:nth-child(3) {
  background-clip: padding-box;
}
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable tbody td:nth-child(1),
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody td:nth-child(2),
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody td:nth-child(3) {
  background: #ffffff !important;
}
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable tbody tr.khozam-lead-row:hover td:nth-child(1),
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody tr.khozam-lead-row:hover td:nth-child(2),
.khozam-leads-page #leads-table .khozam-leads-table .table-leads.dataTable:not(:has(#th-consent)) tbody tr.khozam-lead-row:hover td:nth-child(3) {
  background: #fff8ef !important;
}

.khozam-lead-name {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.khozam-lead-name__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(26, 44, 29, 0.08);
  color: #1a2c1d;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.khozam-lead-name__body {
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
}
.khozam-lead-name__link {
  display: block;
  max-width: 100%;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: 700;
  color: #1a2c1d !important;
  text-decoration: none !important;
  line-height: 1.35;
}
.khozam-lead-name__link:hover {
  color: #d68910 !important;
}
.khozam-lead-name__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 4px;
  opacity: 0.85;
}
.khozam-lead-name__actions a {
  font-size: 11px;
  font-weight: 600;
  color: #6b6470;
  text-decoration: none;
  padding: 1px 0;
}
.khozam-lead-name__actions a:hover {
  color: #1a2c1d;
}
.khozam-lead-name__actions a.text-danger:hover {
  color: #c0392b;
}
.khozam-leads-page .table-leads tr:hover .khozam-lead-name__actions {
  opacity: 1;
}

.khozam-lead-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1a2c1d !important;
  text-decoration: none !important;
  font-weight: 500;
  max-width: 180px;
}
.khozam-lead-contact i {
  color: #d68910;
  font-size: 11px;
  flex-shrink: 0;
}
.khozam-lead-contact span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.khozam-lead-empty {
  color: #b3a9b8;
  font-weight: 500;
}
.khozam-lead-unit,
.khozam-lead-source,
.khozam-lead-staff,
.khozam-lead-value,
.khozam-lead-date {
  font-weight: 600;
  color: #1a2c1d;
}
.khozam-lead-unit-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #f2f2f2;
  color: #555;
  white-space: nowrap;
}
.khozam-lead-unit-status--available { background: rgba(61, 154, 95, 0.12); color: #2f7a4a; }
.khozam-lead-unit-status--reserved { background: rgba(214, 137, 16, 0.14); color: #a56a0c; }
.khozam-lead-unit-status--contracted { background: rgba(74, 111, 165, 0.14); color: #355582; }
.khozam-lead-unit-status--blocked { background: rgba(192, 57, 43, 0.12); color: #a33226; }
.khozam-lead-unit-status--initially_reservation { background: rgba(184, 148, 31, 0.14); color: #8a6f14; }

.khozam-lead-status {
  display: inline-flex !important;
  align-items: center;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

.khozam-lead-activity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 220px;
}
.khozam-lead-activity__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  color: #444;
}
.khozam-lead-activity__time {
  color: #999;
  font-size: 11px;
}

.khozam-lead-notes {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 220px;
  cursor: help;
}
.khozam-lead-notes__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.08);
  color: #1a2c1d;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.khozam-lead-notes__preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  color: #555;
}

.khozam-lead-calls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #777;
  font-weight: 700;
  font-size: 12px;
}
.khozam-lead-calls.has-calls {
  background: rgba(214, 137, 16, 0.14);
  color: #a56a0c;
}

.khozam-leads-page .dataTables_wrapper .dataTables_info {
  color: rgba(26, 44, 29, 0.62);
  font-weight: 500;
  padding-top: 12px;
}
.khozam-leads-page .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  min-height: 34px;
  margin-inline: 2px;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
  color: #1a2c1d !important;
}
.khozam-leads-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.khozam-leads-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--khozam-gold, #c4a871) !important;
  border-color: var(--khozam-gold, #c4a871) !important;
  color: #1a2c1d !important;
}

@media (max-width: 991px) {
  .khozam-leads-toolbar-panel {
    position: static;
  }
  .khozam-leads-toolbar__search {
    width: 100%;
    margin-inline-start: 0;
  }
}
@media (max-width: 767px) {
  .khozam-leads-page__hero {
    padding: 14px;
  }
  .khozam-leads-table-panel__body {
    padding: 12px !important;
  }
}

/* ════════════════════════════════════════
   Leads Kanban — match Khozam / tasks board
   ════════════════════════════════════════ */
.khozam-leads-page.is-kanban .khozam-leads-page__hero {
  margin: 0 !important;
}
.khozam-leads-page.is-kanban .khozam-leads-kanban-sort {
  margin-top: 0;
  margin-bottom: 10px;
}
/* Never let Perfex kanban JS stretch the page wider than the content column */
.khozam-leads-page.is-kanban .container-fluid,
.khozam-leads-page.is-kanban .leads-kan-ban,
.khozam-leads-page.is-kanban .khozam-leads-kanban-board,
.khozam-leads-page.is-kanban .kan-ban-tab,
.khozam-leads-page.is-kanban .khozam-leads-kanban-panel {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.khozam-leads-kanban-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  color: rgba(26, 44, 29, 0.72);
  font-size: 13px;
}
.khozam-leads-kanban-sort a {
  color: var(--khozam-purple, #1a2c1d);
  font-weight: 600;
}
.khozam-leads-kanban-sort a:hover,
.khozam-leads-kanban-sort a:focus {
  color: var(--khozam-gold, #c4a871);
}
.khozam-leads-kanban-board {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.khozam-leads-page.is-kanban #kan-ban.khozam-leads-kanban-board__track,
.khozam-leads-page.is-kanban #kan-ban {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 4px 2px 16px !important;
  overflow-x: auto;
  overflow-y: visible;
}
.khozam-leads-page.is-kanban #kan-ban::before,
.khozam-leads-page.is-kanban #kan-ban::after {
  display: none !important;
  content: none !important;
}
.khozam-leads-page.is-kanban #kan-ban .kan-ban-col,
.khozam-leads-page.is-kanban .khozam-leads-kanban-col {
  float: none !important;
  display: flex !important;
  flex: 0 0 300px;
  width: 300px !important;
  max-width: 300px;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
}
.khozam-leads-page.is-kanban .khozam-leads-kanban-col__wrapper,
.khozam-leads-page.is-kanban .kan-ban-col-wrapper {
  width: 100%;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.khozam-leads-page.is-kanban .khozam-leads-kanban-col__panel,
.khozam-leads-page.is-kanban .kan-ban-col .panel_s {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: #f8f6f2 !important;
  box-shadow: 0 8px 20px rgba(26, 44, 29, 0.06);
}
.khozam-leads-page.is-kanban .khozam-leads-kanban-col__heading.panel-heading,
.khozam-leads-page.is-kanban .kan-ban-col .panel-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  order: 0 !important;
  flex: 0 0 auto !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.khozam-leads-kanban-col__heading-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.khozam-leads-kanban-col__title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.khozam-leads-kanban-col__status {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff !important;
  white-space: normal;
}
.khozam-leads-kanban-col__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.khozam-leads-kanban-col__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.khozam-leads-kanban-col__value {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.92;
  color: #fff;
}
.khozam-leads-page.is-kanban .khozam-leads-kanban-col__content-wrap,
.khozam-leads-page.is-kanban .kan-ban-content-wrapper {
  order: 1 !important;
  flex: 1 1 auto !important;
  max-height: 62vh !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: transparent !important;
}
.khozam-leads-page.is-kanban .kan-ban-content {
  background: transparent !important;
  padding: 10px !important;
  min-height: 120px !important;
}
.khozam-leads-page.is-kanban .leads-status {
  min-height: 80px;
}
.khozam-leads-page.is-kanban .lead-kan-ban {
  margin: 0 0 10px !important;
}
.khozam-leads-page.is-kanban .khozam-leads-kanban-card,
.khozam-leads-page.is-kanban .lead-kan-ban .panel-body.lead-body {
  border-radius: 12px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.05);
  padding: 12px !important;
}
.khozam-leads-kanban-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 6px;
  margin-inline-end: 8px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.08);
  color: rgba(26, 44, 29, 0.55);
  flex-shrink: 0;
}
.khozam-leads-kanban-card__title {
  color: var(--khozam-purple, #1a2c1d);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
}
.khozam-leads-kanban-card__id {
  display: inline-block;
  margin-inline-start: 4px;
  color: rgba(26, 44, 29, 0.45);
  font-weight: 600;
  font-size: 11px;
}
.khozam-leads-kanban-card__source,
.khozam-leads-kanban-card__value {
  color: rgba(26, 44, 29, 0.7);
}
.khozam-leads-page.is-kanban .kanban-load-more .btn {
  border-radius: 10px !important;
  border-color: rgba(26, 44, 29, 0.12) !important;
  color: var(--khozam-purple, #1a2c1d) !important;
  background: #fff !important;
}
.khozam-leads-page.is-kanban .kanban-empty h4 {
  color: rgba(26, 44, 29, 0.45);
  font-size: 13px;
}
@media (max-width: 991px) {
  .khozam-leads-page.is-kanban #kan-ban .kan-ban-col,
  .khozam-leads-page.is-kanban .khozam-leads-kanban-col {
    flex-basis: 270px;
    width: 270px !important;
    max-width: 270px;
  }
}

/* ════════════════════════════════════════
   Clients section — list / contacts / profile
   ════════════════════════════════════════ */
.khozam-clients-page__hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid, #243b2f) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}
.khozam-clients-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold, #c4a871);
  font-size: 22px;
  flex-shrink: 0;
}
.khozam-clients-page__title {
  margin: 0;
  color: var(--khozam-cream, #f8f0e0);
  font-size: 20px;
  font-weight: 700;
}
.khozam-clients-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.khozam-clients-toolbar-panel {
  position: sticky;
  top: var(--khozam-header-height);
  z-index: 25;
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  margin-bottom: 16px !important;
}
.khozam-clients-toolbar-panel__body {
  padding: 14px 16px !important;
  background: #fff !important;
}
.khozam-clients-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.khozam-clients-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.khozam-clients-toolbar__filters {
  margin-inline-start: auto;
}

.khozam-clients-summary {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.06);
}
.khozam-clients-summary__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #1a2c1d;
}
.khozam-clients-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.khozam-clients-summary__chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-inline-start: 4px solid #8a7f78;
}
.khozam-clients-summary__chip strong {
  font-size: 20px;
  font-weight: 800;
  color: #1a2c1d;
  line-height: 1.1;
}
.khozam-clients-summary__chip span {
  font-size: 12px;
  font-weight: 600;
  color: #666;
}
.khozam-clients-summary__chip--total { border-inline-start-color: #1a2c1d; }
.khozam-clients-summary__chip--success { border-inline-start-color: #3d9a5f; }
.khozam-clients-summary__chip--danger { border-inline-start-color: #c0392b; }
.khozam-clients-summary__chip--info { border-inline-start-color: #2a6f97; }
.khozam-clients-summary__chip--warning { border-inline-start-color: #d68910; }
.khozam-clients-summary__chip--muted { border-inline-start-color: #8a7f78; }

.khozam-clients-table-panel {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  overflow: hidden;
}
.khozam-clients-table-panel__body {
  padding: 16px !important;
  background: #fff !important;
}
.khozam-clients-page .khozam-clients-table .dataTables_wrapper .table-responsive {
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.06);
  padding-inline: 10px 14px;
}
.khozam-clients-page .table-clients.dataTable thead th,
.khozam-clients-page .table-all-contacts.dataTable thead th {
  background: #f8f6f3 !important;
  color: #1a2c1d !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(26, 44, 29, 0.1) !important;
  white-space: nowrap;
}
.khozam-clients-page .table-clients.dataTable tbody td,
.khozam-clients-page .table-all-contacts.dataTable tbody td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-size: 13px;
  color: #3a3340;
  border-color: rgba(26, 44, 29, 0.05) !important;
  vertical-align: middle !important;
}
.khozam-clients-page .table-clients.dataTable tbody tr.khozam-client-row:hover td,
.khozam-clients-page .table-all-contacts.dataTable tbody tr.khozam-client-row:hover td {
  background: rgba(248, 240, 224, 0.35) !important;
}

.khozam-client-id {
  font-weight: 700;
  color: #1a2c1d;
}
.khozam-client-company {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 180px;
}
.khozam-client-company__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(26, 44, 29, 0.08);
  color: #1a2c1d;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.khozam-client-company__avatar--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.khozam-client-company__body { min-width: 0; }
.khozam-client-company__link {
  display: inline-block;
  font-weight: 700;
  color: #1a2c1d !important;
  text-decoration: none !important;
  line-height: 1.3;
}
.khozam-client-company__link:hover { color: #d68910 !important; }
.khozam-client-company__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 4px;
  opacity: 0.85;
}
.khozam-client-company__actions a {
  font-size: 11px;
  font-weight: 600;
  color: #6b6470;
  text-decoration: none;
}
.khozam-client-company__actions a:hover { color: #1a2c1d; }
.khozam-client-company__actions a.text-danger:hover { color: #c0392b; }
.khozam-clients-page tr:hover .khozam-client-company__actions { opacity: 1; }

.khozam-client-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1a2c1d !important;
  text-decoration: none !important;
  font-weight: 500;
  max-width: 220px;
}
.khozam-client-contact i {
  color: #d68910;
  font-size: 11px;
  flex-shrink: 0;
}
.khozam-client-contact span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.khozam-client-empty {
  color: #b3a9b8;
  font-weight: 500;
}
.khozam-client-date { font-weight: 600; color: #1a2c1d; }
.khozam-client-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.khozam-client-group {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(26, 44, 29, 0.08);
  color: #1a2c1d;
  white-space: nowrap;
}

.khozam-clients-page .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  min-height: 34px;
  margin-inline: 2px;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
  color: #1a2c1d !important;
}
.khozam-clients-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.khozam-clients-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--khozam-gold, #c4a871) !important;
  border-color: var(--khozam-gold, #c4a871) !important;
  color: #1a2c1d !important;
}

/* Profile page */
.khozam-clients-profile__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid, #243b2f) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}
.khozam-clients-profile__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(248, 240, 224, 0.8);
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}
.khozam-clients-profile__back:hover { color: #f8f0e0; }
.khozam-clients-profile__identity {
  display: flex;
  align-items: center;
  gap: 14px;
}
.khozam-clients-profile__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold, #c4a871);
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}
.khozam-clients-profile__title {
  margin: 0;
  color: #f8f0e0;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.khozam-clients-profile__id {
  color: rgba(248, 240, 224, 0.65);
  font-size: 14px;
  font-weight: 600;
}
.khozam-clients-profile__meta {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 12px;
}
.khozam-clients-profile__meta a { color: var(--khozam-gold, #c4a871); }
.khozam-clients-profile__actions .dropdown-menu {
  border-radius: 10px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}
.khozam-clients-profile__tabs-card {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.06);
  padding: 10px;
  margin-bottom: 16px;
}
.khozam-clients-tabs {
  margin: 0 !important;
  border: 0 !important;
}
.khozam-clients-tabs > li {
  float: none !important;
  margin: 0 0 4px !important;
}
.khozam-clients-tabs > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  border-radius: 10px !important;
  border: 0 !important;
  padding: 11px 12px !important;
  color: #3a3340 !important;
  font-weight: 600;
  background: transparent !important;
}
.khozam-clients-tabs > li > a .menu-icon {
  width: 18px;
  text-align: center;
  color: #d68910;
}
.khozam-clients-tabs > li > a:hover,
.khozam-clients-tabs > li > a:focus {
  background: rgba(248, 240, 224, 0.55) !important;
  color: #1a2c1d !important;
}
.khozam-clients-tabs > li.active > a,
.khozam-clients-tabs > li.active > a:hover,
.khozam-clients-tabs > li.active > a:focus {
  background: rgba(26, 44, 29, 0.08) !important;
  color: #1a2c1d !important;
  box-shadow: inset 3px 0 0 #d68910;
}
[dir="rtl"] .khozam-clients-tabs > li.active > a,
[dir="rtl"] .khozam-clients-tabs > li.active > a:hover,
[dir="rtl"] .khozam-clients-tabs > li.active > a:focus {
  box-shadow: inset -3px 0 0 #d68910;
}
.khozam-clients-tabs__label { flex: 1; }
.khozam-clients-profile__panel {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  overflow: hidden;
}
.khozam-clients-profile__panel-body {
  padding: 20px !important;
  background: #fff !important;
}
.khozam-clients-profile__footer {
  background: #faf8fc !important;
  border-top: 1px solid rgba(26, 44, 29, 0.08) !important;
  padding: 14px 18px !important;
}

.khozam-contacts-consent-filter {
  min-width: 220px;
}

@media (max-width: 991px) {
  .khozam-clients-toolbar-panel { position: static; }
  .khozam-clients-toolbar__filters {
    width: 100%;
    margin-inline-start: 0;
  }
}
@media (max-width: 767px) {
  .khozam-clients-page__hero,
  .khozam-clients-profile__hero {
    padding: 14px;
  }
  .khozam-clients-table-panel__body,
  .khozam-clients-profile__panel-body {
    padding: 12px !important;
  }
}

/* ════════════════════════════════════════
   Call Logs — list + grid
   ════════════════════════════════════════ */
.khozam-call-logs-page__hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid, #243b2f) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}
.khozam-call-logs-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold, #c4a871);
  font-size: 22px;
  flex-shrink: 0;
}
.khozam-call-logs-page__title {
  margin: 0;
  color: var(--khozam-cream, #f8f0e0);
  font-size: 20px;
  font-weight: 700;
}
.khozam-call-logs-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.khozam-call-logs-toolbar-panel,
.khozam-call-logs-filters-panel,
.khozam-call-logs-table-panel {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.08);
  margin-bottom: 16px !important;
  overflow: hidden;
}
.khozam-call-logs-filters-panel {
  overflow: visible !important;
}
.khozam-call-logs-toolbar-panel {
  position: sticky;
  top: var(--khozam-header-height);
  z-index: 25;
}
.khozam-call-logs-toolbar-panel__body,
.khozam-call-logs-filters-panel__body,
.khozam-call-logs-table-panel__body {
  padding: 14px 16px !important;
  background: #fff !important;
}
.khozam-call-logs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.khozam-call-logs-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.khozam-call-logs-view-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.72);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: #1a2c1d;
  font-size: 12px;
  font-weight: 700;
}
.khozam-call-logs-view-badge i { color: #d68910; }

.khozam-call-logs-filters__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.08);
}
.khozam-call-logs-filters__head-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.khozam-call-logs-filters__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-gold, #c4a871);
  flex-shrink: 0;
}
.khozam-call-logs-filters__title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #1a2c1d;
}
.khozam-call-logs-filters__hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b6470;
  line-height: 1.4;
}
.khozam-call-logs-filters__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.khozam-call-logs-filters .cl-filter-column,
.khozam-call-logs-filters__field {
  margin-bottom: 0;
  min-width: 0;
}
.khozam-call-logs-filters__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 700;
}
.khozam-call-logs-filters__label i {
  color: var(--khozam-gold, #c4a871);
  width: 14px;
  text-align: center;
}
.khozam-call-logs-filters__field .form-group {
  margin: 0 !important;
}
.khozam-call-logs-filters__field .bootstrap-select {
  width: 100% !important;
}
.khozam-call-logs-filters__field .bootstrap-select > .dropdown-toggle,
.khozam-call-logs-filters__field .bootstrap-select > .btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  background: #fbf8f4 !important;
  color: var(--khozam-purple, #1a2c1d) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.khozam-call-logs-filters__field .bootstrap-select > .dropdown-toggle .filter-option {
  display: flex !important;
  align-items: center;
  overflow: hidden;
}
.khozam-call-logs-filters__field .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit !important;
}
.khozam-call-logs-filters__field .bootstrap-select > .dropdown-toggle .bs-caret,
.khozam-call-logs-filters__field .bootstrap-select > .dropdown-toggle .caret {
  color: rgba(26, 44, 29, 0.45) !important;
  margin-inline-start: 8px;
}
.khozam-call-logs-filters__field .bootstrap-select.open > .dropdown-toggle,
.khozam-call-logs-filters__field .bootstrap-select > .dropdown-toggle:hover,
.khozam-call-logs-filters__field .bootstrap-select > .dropdown-toggle:focus,
.khozam-call-logs-filters__field .bootstrap-select > .dropdown-toggle:active {
  background: #fff !important;
  border-color: rgba(196, 168, 113, 0.55) !important;
  color: var(--khozam-purple, #1a2c1d) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.18) !important;
}
/* Selected value (not placeholder) */
.khozam-call-logs-filters__field .bootstrap-select:not(.bs-placeholder) > .dropdown-toggle {
  background: rgba(248, 240, 224, 0.95) !important;
  border-color: rgba(196, 168, 113, 0.45) !important;
  color: var(--khozam-purple, #1a2c1d) !important;
  font-weight: 700 !important;
}
.khozam-call-logs-filters__field .bootstrap-select .dropdown-menu {
  border-radius: 12px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 14px 32px rgba(26, 44, 29, 0.14) !important;
  padding: 6px !important;
  margin-top: 6px !important;
  z-index: 1060 !important;
}
.khozam-call-logs-filters__field .bootstrap-select .dropdown-menu .bs-searchbox {
  padding: 6px 6px 8px !important;
}
.khozam-call-logs-filters__field .bootstrap-select .dropdown-menu .bs-searchbox .form-control {
  min-height: 36px;
  border-radius: 10px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  box-shadow: none !important;
}
.khozam-call-logs-filters__field .bootstrap-select .dropdown-menu li a {
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--khozam-purple, #1a2c1d);
  font-weight: 600;
}
.khozam-call-logs-filters__field .bootstrap-select .dropdown-menu li a:hover,
.khozam-call-logs-filters__field .bootstrap-select .dropdown-menu li.active a,
.khozam-call-logs-filters__field .bootstrap-select .dropdown-menu li.selected a {
  background: rgba(248, 240, 224, 0.9) !important;
  color: var(--khozam-purple, #1a2c1d) !important;
}
.khozam-call-logs-filters__search-wrap {
  max-width: 420px;
}
.khozam-call-logs-search .input-group-addon {
  background: #faf8fc;
  border-color: rgba(26, 44, 29, 0.12);
  color: #d68910;
}
.khozam-call-logs-search .form-control {
  min-height: 42px;
  border-radius: 0 10px 10px 0 !important;
  border-color: rgba(26, 44, 29, 0.12) !important;
}
[dir="rtl"] .khozam-call-logs-search .form-control {
  border-radius: 10px 0 0 10px !important;
}

@media (max-width: 1199px) {
  .khozam-call-logs-filters__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .khozam-call-logs-filters__grid {
    grid-template-columns: 1fr;
  }
}

.khozam-call-logs-page .table-call_logs.dataTable thead th {
  background: #f8f6f3 !important;
  color: #1a2c1d !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(26, 44, 29, 0.1) !important;
  white-space: nowrap;
}
.khozam-call-logs-page .table-call_logs.dataTable tbody td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-size: 13px;
  color: #3a3340;
  border-color: rgba(26, 44, 29, 0.05) !important;
  vertical-align: middle !important;
}
.khozam-call-logs-page .table-call_logs.dataTable tbody tr.khozam-call-log-row:hover td {
  background: rgba(248, 240, 224, 0.35) !important;
}

.khozam-call-log-empty { color: #b3a9b8; font-weight: 500; }
.khozam-call-log-date,
.khozam-call-log-duration { font-weight: 600; color: #1a2c1d; }
.khozam-call-log-purpose__link {
  font-weight: 700;
  color: #1a2c1d !important;
  text-decoration: none !important;
}
.khozam-call-log-purpose__link:hover { color: #d68910 !important; }
.khozam-call-log-purpose__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 4px;
  opacity: 0.85;
}
.khozam-call-log-purpose__actions a {
  font-size: 11px;
  font-weight: 600;
  color: #6b6470;
  text-decoration: none;
}
.khozam-call-log-purpose__actions a:hover { color: #1a2c1d; }
.khozam-call-logs-page tr:hover .khozam-call-log-purpose__actions { opacity: 1; }

.khozam-call-log-staff {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}
.khozam-call-log-staff__avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  float: none !important;
  margin: 0 !important;
}
.khozam-call-log-staff__name {
  font-weight: 600;
  color: #1a2c1d !important;
  line-height: 1.3;
}
.khozam-call-log-contact {
  font-weight: 700;
  color: #1a2c1d !important;
  text-decoration: none !important;
}
.khozam-call-log-contact:hover { color: #d68910 !important; }
.khozam-call-log-contact__company {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #6b6470;
}
.khozam-call-log-type,
.khozam-call-log-status,
.khozam-call-log-pill,
.khozam-call-log-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.khozam-call-log-type--lead { background: rgba(42, 111, 151, 0.12); color: #2a6f97; }
.khozam-call-log-type--customer { background: rgba(26, 44, 29, 0.1); color: #1a2c1d; }
.khozam-call-log-status { background: rgba(196, 168, 113, 0.18); color: #8a5a2b; }
.khozam-call-log-pill--yes,
.khozam-call-log-pill--done { background: rgba(61, 154, 95, 0.14); color: #2f7a49; }
.khozam-call-log-pill--no,
.khozam-call-log-pill--muted { background: rgba(138, 127, 120, 0.14); color: #6b6470; }
.khozam-call-log-pill--important { background: rgba(198, 57, 43, 0.12); color: #c0392b; }
.khozam-call-log-pill--pending { background: rgba(214, 137, 16, 0.14); color: #a66a0d; }
.khozam-call-log-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.khozam-call-log-tag { background: rgba(26, 44, 29, 0.08); color: #1a2c1d; }

/* Grid */
.khozam-call-logs-grid {
  min-height: 280px;
}
.khozam-call-logs-grid__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  color: #6b6470;
  font-weight: 600;
}
.khozam-call-logs-grid__loading i { color: #d68910; }
.khozam-call-logs-grid__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
  color: #6b6470;
  font-size: 13px;
}
.khozam-call-logs-grid__meta strong {
  font-size: 20px;
  font-weight: 800;
  color: #1a2c1d;
}
.khozam-call-logs-grid__cards {
  margin-inline: -8px;
}
.khozam-call-logs-grid__cards > [class*="col-"] {
  padding-inline: 8px;
  margin-bottom: 16px;
}
.khozam-call-logs-card {
  height: 100%;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(26, 44, 29, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.khozam-call-logs-card:hover {
  transform: translateY(-3px);
  border-color: rgba(196, 168, 113, 0.45);
  box-shadow: 0 14px 28px rgba(26, 44, 29, 0.12);
}
.khozam-call-logs-card__banner {
  height: 64px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid, #243b2f) 100%);
}
.khozam-call-logs-card__body {
  position: relative;
  padding: 0 16px 18px;
  text-align: center;
}
.khozam-call-logs-card__avatar {
  display: inline-flex;
  margin-top: -28px;
  margin-bottom: 12px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.14);
  overflow: hidden;
  width: 72px;
  height: 72px;
  background: #faf8fc;
}
.khozam-call-logs-card__photo {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover;
}
.khozam-call-logs-card__name {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.khozam-call-logs-card__name a {
  color: #1a2c1d !important;
  text-decoration: none !important;
}
.khozam-call-logs-card__name a:hover { color: #d68910 !important; }
.khozam-call-logs-card__stat {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.08);
}
.khozam-call-logs-card__stat strong {
  font-size: 22px;
  font-weight: 800;
  color: #1a2c1d;
  line-height: 1;
}
.khozam-call-logs-card__stat span {
  font-size: 11px;
  font-weight: 600;
  color: #6b6470;
}
.khozam-call-logs-grid__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  border: 1px dashed rgba(26, 44, 29, 0.14);
  border-radius: 14px;
  color: #6b6470;
  background: #faf8fc;
}
.khozam-call-logs-grid__empty i {
  font-size: 28px;
  color: #d68910;
}
.khozam-call-logs-grid__pager {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.khozam-call-logs-grid__pagination {
  margin: 0 !important;
  position: static !important;
  top: auto !important;
}
.khozam-call-logs-grid__pagination > li > a,
.khozam-call-logs-grid__pagination > li > span {
  min-width: 34px;
  min-height: 34px;
  margin-inline: 2px;
  border-radius: 8px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  background: #fff !important;
  color: #1a2c1d !important;
}
.khozam-call-logs-grid__pagination > li.active > a,
.khozam-call-logs-grid__pagination > li.active > span {
  background: var(--khozam-gold, #c4a871) !important;
  border-color: var(--khozam-gold, #c4a871) !important;
  color: #1a2c1d !important;
}

/* Keep table/grid content aligned under the same chrome */
.khozam-call-logs-page.is-grid-view .khozam-call-logs-filters-panel,
.khozam-call-logs-page.is-table-view .khozam-call-logs-filters-panel {
  min-height: 0;
}
.khozam-call-logs-page .khozam-call-logs-table-panel__body {
  min-height: 320px;
}

@media (max-width: 991px) {
  .khozam-call-logs-toolbar-panel { position: static; }
  .khozam-call-logs-page.is-grid-view .khozam-call-logs-filters-panel,
  .khozam-call-logs-page.is-table-view .khozam-call-logs-filters-panel {
    min-height: 0;
  }
}
@media (max-width: 767px) {
  .khozam-call-logs-page__hero { padding: 14px; }
  .khozam-call-logs-toolbar-panel__body,
  .khozam-call-logs-filters-panel__body,
  .khozam-call-logs-table-panel__body {
    padding: 12px !important;
  }
}

/* ════════════════════════════════════════
   Call Log form — new / edit
   ════════════════════════════════════════ */
.khozam-call-log-form-page .content {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 28px;
}
.khozam-call-log-form-page__hero {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid, #243b2f) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}
.khozam-call-log-form-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: rgba(248, 240, 224, 0.78) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
}
.khozam-call-log-form-page__back:hover,
.khozam-call-log-form-page__back:focus {
  color: var(--khozam-cream, #f8f0e0) !important;
}
.khozam-call-log-form-page__hero-copy {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.khozam-call-log-form-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold, #c4a871);
  font-size: 22px;
  flex-shrink: 0;
}
.khozam-call-log-form-page__title {
  margin: 0;
  color: var(--khozam-cream, #f8f0e0);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.khozam-call-log-form-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.6;
  max-width: 640px;
}

.khozam-call-log-form__panel {
  border-radius: 16px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.08) !important;
  margin-bottom: 16px !important;
  overflow: hidden;
}
.khozam-call-log-form__panel-body {
  padding: 18px !important;
  background: #f8f6f2 !important;
}
.khozam-call-log-form-page .khozam-form-section {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.04);
}
.khozam-call-log-form-page .khozam-form-section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}
.khozam-call-log-form-page .khozam-form-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.14);
  color: var(--khozam-purple, #1a2c1d);
  font-size: 15px;
  flex-shrink: 0;
}
.khozam-call-log-form-page .khozam-form-section-title {
  margin: 0;
  color: var(--khozam-purple, #1a2c1d);
  font-size: 15px;
  font-weight: 700;
}
.khozam-call-log-form-page .khozam-form-section-subtitle {
  margin: 4px 0 0;
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  line-height: 1.5;
}
.khozam-call-log-form-page .form-group label,
.khozam-call-log-form-page .control-label {
  color: rgba(26, 44, 29, 0.78);
  font-size: 12px;
  font-weight: 600;
}
.khozam-call-log-form-page .form-control,
.khozam-call-log-form-page .bootstrap-select .dropdown-toggle,
.khozam-call-log-form-page #cl-status,
.khozam-call-log-form-page .cl-subcat-select {
  min-height: 42px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.khozam-call-log-form-page .form-control:focus,
.khozam-call-log-form-page .bootstrap-select.open .dropdown-toggle,
.khozam-call-log-form-page #cl-status:focus,
.khozam-call-log-form-page .cl-subcat-select:focus {
  border-color: rgba(196, 168, 113, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.16) !important;
}
.khozam-call-log-form__radios .control-label,
.khozam-call-log-form__radios > span {
  display: block;
  margin-bottom: 8px;
}
.khozam-call-log-form__call-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}
.khozam-call-log-form__call-actions .btn {
  width: 100%;
  justify-content: center;
}
.khozam-page-toolbar__btn--danger {
  background: #c0392b !important;
  border-color: #c0392b !important;
  color: #fff !important;
}
.khozam-page-toolbar__btn--danger:hover,
.khozam-page-toolbar__btn--danger:focus {
  background: #a93226 !important;
  border-color: #a93226 !important;
  color: #fff !important;
}
.khozam-call-log-form__call-message {
  margin: 4px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.08);
  font-weight: 600;
}
.khozam-call-log-form__breadcrumb {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(248, 240, 224, 0.65);
  border: 1px solid rgba(196, 168, 113, 0.28);
}
.khozam-call-log-form__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.06);
}
.khozam-call-log-form__footer .khozam-page-toolbar__btn {
  min-width: 132px;
}
.khozam-call-log-form__footer a.khozam-page-toolbar__btn {
  margin-inline-end: auto;
}
@media (max-width: 767px) {
  .khozam-call-log-form-page__hero { padding: 14px; }
  .khozam-call-log-form__panel-body { padding: 12px !important; }
  .khozam-call-log-form__call-actions { margin-top: 0; }
}

/* ===== Khozam newsfeed (share) ===== */
.khozam-staff-name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 100%;
  vertical-align: middle;
  line-height: 1.25;
}

.khozam-staff-name__primary {
  display: block;
  font-weight: 700;
  color: inherit;
  font-size: 14px;
  word-break: break-word;
}

.khozam-staff-name__secondary {
  display: block;
  font-weight: 500;
  font-size: 11px;
  color: rgba(26, 44, 29, 0.55);
  word-break: break-word;
}

#newsfeed {
  background:
    radial-gradient(1100px 480px at 8% -8%, rgba(196, 168, 113, 0.2), transparent 58%),
    radial-gradient(900px 420px at 100% 0%, rgba(26, 44, 29, 0.12), transparent 52%),
    linear-gradient(180deg, #f6f1ea 0%, #efe9e1 100%) !important;
  padding: 22px 16px 40px !important;
}

#newsfeed .khozam-newsfeed {
  max-width: 720px;
  margin: 0 auto;
}

#newsfeed .khozam-newsfeed__shell {
  position: relative;
}

#newsfeed .khozam-newsfeed__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.22);
  box-shadow: 0 12px 28px rgba(26, 44, 29, 0.16);
}

#newsfeed .khozam-newsfeed__top-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

#newsfeed .khozam-newsfeed__top-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  border: 1px solid rgba(196, 168, 113, 0.35);
  color: var(--khozam-gold);
}

#newsfeed .khozam-newsfeed__top-icon svg {
  width: 22px;
  height: 22px;
}

#newsfeed .khozam-newsfeed__top-copy {
  min-width: 0;
}

#newsfeed .khozam-newsfeed__eyebrow {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--khozam-gold);
}

#newsfeed .khozam-newsfeed__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--khozam-cream);
  line-height: 1.35;
}

#newsfeed .khozam-newsfeed__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative !important;
  top: auto !important;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid rgba(196, 168, 113, 0.35);
  background: rgba(248, 240, 224, 0.1);
  color: var(--khozam-cream) !important;
  box-shadow: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

#newsfeed .khozam-newsfeed__close:hover {
  background: rgba(196, 168, 113, 0.22);
  border-color: rgba(196, 168, 113, 0.7);
  color: var(--khozam-gold) !important;
  transform: none;
}

#newsfeed .khozam-newsfeed__composer.panel_s,
#newsfeed .khozam-newsfeed-post.panel_s {
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.08) !important;
  background: #fff;
}

/* Keep post cards clipped; composer must stay visible for department dropdown */
#newsfeed .khozam-newsfeed-post.panel_s {
  overflow: hidden;
}

#newsfeed .khozam-newsfeed__composer.panel_s {
  overflow: visible !important;
  position: relative;
  z-index: 5;
}

#newsfeed .khozam-newsfeed__composer .panel-body,
#newsfeed .khozam-newsfeed__composer-actions,
#newsfeed .khozam-newsfeed__composer-tools {
  overflow: visible !important;
}

#newsfeed .khozam-newsfeed__composer-tools .bootstrap-select,
#newsfeed .khozam-newsfeed__composer-tools .bootstrap-select.open {
  position: relative;
  z-index: 20;
}

#newsfeed .khozam-newsfeed__composer-tools .bootstrap-select .dropdown-menu {
  z-index: 30;
  max-height: 260px;
}

/* Selectpicker menus appended to body — must sit above Bootstrap modals (~1050) */
.bs-container,
.bootstrap-select.bs-container,
body > .bs-container,
body > .bootstrap-select.bs-container,
body > .bs-container.bootstrap-select {
  z-index: 10050 !important;
  position: absolute !important;
}

.bs-container .dropdown-menu,
.bootstrap-select.bs-container .dropdown-menu,
body > .bs-container .dropdown-menu,
body > .bootstrap-select.bs-container .dropdown-menu,
body > .bs-container.bootstrap-select .dropdown-menu {
  z-index: 10051 !important;
  max-height: 280px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  box-shadow: 0 12px 28px rgba(26, 44, 29, 0.16);
}

/* Filter modal must never clip rule pickers / select menus */
.modal-open .modal.khozam-filters-modal,
.modal-open .modal.filters-modal,
.modal.khozam-filters-modal,
.modal.filters-modal {
  overflow: visible !important;
}

/* System-wide: modal shells must not clip dropdowns / datepickers */
.modal .modal-dialog {
  overflow: visible;
}

.modal.khozam-filters-modal .modal-dialog,
.modal.filters-modal .modal-dialog,
.modal.khozam-leads-modal .modal-dialog,
.modal.khozam-units-modal .modal-dialog,
.modal.khozam-appointment-modal .modal-dialog,
.modal.khozam-item-modal .modal-dialog,
.modal.khozam-reminder-modal .modal-dialog,
.modal.khozam-task-modal .modal-dialog {
  overflow: visible;
}

#newsfeed .khozam-newsfeed__composer .panel-body {
  padding: 18px !important;
}

#newsfeed .khozam-newsfeed__composer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

#newsfeed .khozam-newsfeed__composer-avatar img,
#newsfeed .khozam-newsfeed-post__avatar img {
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid var(--khozam-gold);
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.1);
}

#newsfeed .khozam-newsfeed__composer-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#newsfeed .khozam-newsfeed__composer-name {
  text-decoration: none !important;
  color: var(--khozam-purple) !important;
}

#newsfeed .khozam-newsfeed__composer-name:hover .khozam-staff-name__primary {
  color: var(--khozam-purple-mid);
}

#newsfeed .khozam-newsfeed__composer-hint {
  font-size: 12px;
  color: rgba(26, 44, 29, 0.55);
}

#newsfeed .khozam-newsfeed__textarea {
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  border-radius: 14px !important;
  background: rgba(248, 240, 224, 0.35) !important;
  min-height: 110px;
  padding: 14px 16px !important;
  resize: vertical;
  box-shadow: none !important;
  color: var(--khozam-purple);
}

#newsfeed .khozam-newsfeed__textarea::placeholder {
  color: rgba(26, 44, 29, 0.42);
}

#newsfeed .khozam-newsfeed__textarea:focus {
  border-color: rgba(196, 168, 113, 0.7) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.2) !important;
}

#newsfeed .khozam-newsfeed__composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

#newsfeed .khozam-newsfeed__composer-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

#newsfeed .khozam-newsfeed__attach-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  border-radius: 10px !important;
  border: 1px solid rgba(196, 168, 113, 0.4) !important;
  background: rgba(248, 240, 224, 0.45) !important;
  color: var(--khozam-purple) !important;
  font-weight: 600;
  padding: 8px 12px !important;
  transition: background 0.16s ease, border-color 0.16s ease;
}

#newsfeed .khozam-newsfeed__attach-btn:hover {
  background: rgba(196, 168, 113, 0.2) !important;
  border-color: rgba(196, 168, 113, 0.75) !important;
}

#newsfeed .khozam-newsfeed__attach-btn i {
  color: var(--khozam-gold);
}

#newsfeed .khozam-newsfeed__composer-tools .bootstrap-select {
  max-width: 260px;
  flex: 1;
}

#newsfeed .khozam-newsfeed__composer-tools .bootstrap-select > .btn {
  border-radius: 10px !important;
  border-color: rgba(26, 44, 29, 0.12) !important;
  background: #fff !important;
  color: var(--khozam-purple) !important;
}

#newsfeed .khozam-newsfeed__post-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px !important;
  background: linear-gradient(180deg, var(--khozam-purple-mid) 0%, var(--khozam-purple) 100%) !important;
  border: 1px solid rgba(196, 168, 113, 0.35) !important;
  color: var(--khozam-cream) !important;
  font-weight: 700;
  padding: 9px 18px !important;
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.2);
  transition: background 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

#newsfeed .khozam-newsfeed__post-btn:hover,
#newsfeed .khozam-newsfeed__post-btn:focus {
  background: linear-gradient(180deg, #2d4a39 0%, var(--khozam-purple-mid) 100%) !important;
  border-color: rgba(196, 168, 113, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(26, 44, 29, 0.26);
}

#newsfeed .khozam-newsfeed__post-btn i {
  color: var(--khozam-gold);
  font-size: 12px;
}

#newsfeed .khozam-newsfeed__feed {
  margin-top: 18px;
}

#newsfeed .khozam-newsfeed-post {
  margin-bottom: 16px;
}

#newsfeed .khozam-newsfeed-post > .panel-body {
  padding: 18px !important;
}

#newsfeed .khozam-newsfeed-post.pinned > .panel-body {
  background: linear-gradient(180deg, rgba(248, 240, 224, 0.65) 0%, #fff 70%) !important;
  border: 1px dashed rgba(196, 168, 113, 0.55) !important;
}

#newsfeed .khozam-newsfeed-post__author {
  position: relative;
  padding-inline-end: 48px;
}

#newsfeed .khozam-newsfeed-post__name a {
  text-decoration: none !important;
  color: var(--khozam-purple) !important;
}

#newsfeed .khozam-newsfeed-post__published,
#newsfeed .post-time-ago {
  color: rgba(26, 44, 29, 0.5) !important;
}

#newsfeed .khozam-newsfeed-post .post-time-ago {
  position: static !important;
  display: inline-block;
  margin-inline-start: 8px;
}

#newsfeed .khozam-newsfeed-post .btn-post-options-wrapper {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
}

#newsfeed .khozam-newsfeed-post .dropdown {
  position: static;
  right: auto;
}

#newsfeed .khozam-newsfeed-post__body {
  color: rgba(26, 44, 29, 0.88);
  font-size: 14px;
  line-height: 1.55;
}

#newsfeed .newsfeed_post .panel-footer {
  background: rgba(248, 240, 224, 0.35) !important;
  border-top: 1px solid rgba(26, 44, 29, 0.06) !important;
}

#newsfeed .comment .khozam-staff-name {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-inline-end: 6px;
}

#newsfeed .comment .khozam-staff-name__primary {
  font-size: 13px;
}

#newsfeed .comment .khozam-staff-name__secondary {
  font-size: 11px;
}

#newsfeed .comment .khozam-staff-name__secondary::before {
  content: "·";
  margin-inline-end: 6px;
  opacity: 0.45;
}

#newsfeed .comment-image img {
  border-radius: 10px !important;
}

.khozam-newsfeed-like-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 12px;
}

.khozam-newsfeed-like-row .media-body {
  min-width: 0;
}

@media (max-width: 767px) {
  #newsfeed {
    padding: 14px 12px 28px !important;
  }

  #newsfeed .khozam-newsfeed__top {
    padding: 14px;
  }

  #newsfeed .khozam-newsfeed__top-icon {
    width: 42px;
    height: 42px;
  }

  #newsfeed .khozam-newsfeed__title {
    font-size: 16px;
  }

  #newsfeed .khozam-newsfeed__composer-actions {
    align-items: stretch;
  }

  #newsfeed .khozam-newsfeed__post-btn {
    width: 100%;
  }

  #newsfeed .khozam-newsfeed__composer-tools {
    width: 100%;
  }

  #newsfeed .khozam-newsfeed__composer-tools .bootstrap-select {
    max-width: none;
    width: 100% !important;
  }
}

/* ===== Tasks detailed overview ===== */
.khozam-tasks-overview-page > .content {
  padding-bottom: 28px;
}

.khozam-tasks-overview-page .khozam-tasks-page__hero {
  align-items: center;
}

.khozam-tasks-overview-page__hero-actions {
  margin-inline-start: auto;
  flex-shrink: 0;
}

[dir="rtl"] .khozam-tasks-overview-page__hero-actions .fa-arrow-left {
  transform: scaleX(-1);
}

.khozam-tasks-overview-filters {
  border-radius: 14px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 8px 22px rgba(26, 44, 29, 0.06) !important;
  margin-bottom: 16px;
  overflow: visible !important;
}

.khozam-tasks-overview-filters .panel-body {
  padding: 16px 18px !important;
  overflow: visible !important;
}

.khozam-tasks-overview-filters__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px 14px;
  align-items: end;
}

.khozam-tasks-overview-filters__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(26, 44, 29, 0.62);
}

.khozam-tasks-overview-filters__field .form-group,
.khozam-tasks-overview-filters__field .bootstrap-select {
  margin-bottom: 0 !important;
}

.khozam-tasks-overview-filters__field .bootstrap-select > .dropdown-toggle {
  border-radius: 10px !important;
  border-color: rgba(26, 44, 29, 0.12) !important;
  background: #faf8fc !important;
  min-height: 40px;
}

.khozam-tasks-overview-filters__actions .btn {
  min-height: 40px;
  white-space: nowrap;
}

.khozam-tasks-overview-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.khozam-tasks-overview-stats__card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.05);
  min-width: 0;
}

.khozam-tasks-overview-stats__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-gold);
  font-size: 15px;
}

.khozam-tasks-overview-stats__card--success .khozam-tasks-overview-stats__icon {
  background: rgba(47, 143, 87, 0.12);
  color: #2f8f57;
}

.khozam-tasks-overview-stats__card--danger .khozam-tasks-overview-stats__icon {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
}

.khozam-tasks-overview-stats__copy {
  min-width: 0;
  flex: 1;
}

.khozam-tasks-overview-stats__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 44, 29, 0.55);
  margin-bottom: 4px;
}

.khozam-tasks-overview-stats__value {
  display: inline-block;
  font-size: 24px;
  font-weight: 800;
  color: var(--khozam-purple);
  line-height: 1.1;
}

.khozam-tasks-overview-stats__hint {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.06);
  color: rgba(26, 44, 29, 0.58);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.khozam-tasks-overview-stats__card--success .khozam-tasks-overview-stats__value {
  color: #2f8f57;
}

.khozam-tasks-overview-stats__card--danger .khozam-tasks-overview-stats__value {
  color: #c0392b;
}

.khozam-tasks-overview-empty {
  border-radius: 16px !important;
  border: 1px dashed rgba(26, 44, 29, 0.16) !important;
  box-shadow: none !important;
}

.khozam-tasks-overview-empty .panel-body {
  text-align: center;
  padding: 48px 24px !important;
}

.khozam-tasks-overview-empty__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-gold);
  font-size: 22px;
}

.khozam-tasks-overview-empty h4 {
  margin: 0 0 6px;
  color: var(--khozam-purple);
  font-weight: 800;
}

.khozam-tasks-overview-empty p {
  margin: 0;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-tasks-overview-months {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.khozam-tasks-overview-month {
  border-radius: 16px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 10px 26px rgba(26, 44, 29, 0.07) !important;
  overflow: hidden;
  margin-bottom: 0 !important;
}

.khozam-tasks-overview-month__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #faf7f2 0%, #fff 100%);
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-tasks-overview-month__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--khozam-purple);
}

.khozam-tasks-overview-month__year {
  font-weight: 600;
  color: rgba(26, 44, 29, 0.45);
  margin-inline-start: 6px;
}

.khozam-tasks-overview-month__meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-tasks-overview-month__count {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-purple);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.khozam-tasks-overview-month__body {
  padding: 0 !important;
}

.khozam-tasks-overview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  background: #fff;
}

.khozam-tasks-overview-toolbar__search {
  position: relative;
  flex: 1;
  max-width: 320px;
  margin: 0;
}

.khozam-tasks-overview-toolbar__search > i {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(26, 44, 29, 0.4);
  font-size: 12px;
  pointer-events: none;
}

.khozam-tasks-overview-search {
  height: 38px !important;
  border-radius: 10px !important;
  border-color: rgba(26, 44, 29, 0.12) !important;
  background: #faf8fc !important;
  padding-inline-start: 34px !important;
  box-shadow: none !important;
}

.khozam-tasks-overview-toolbar__count {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.05);
  color: rgba(26, 44, 29, 0.65);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.khozam-tasks-overview-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.khozam-tasks-overview-table {
  margin-bottom: 0 !important;
  width: 100% !important;
  table-layout: fixed;
  border-collapse: collapse;
}

.khozam-tasks-overview-table thead th {
  background: #faf8fc !important;
  border-bottom: 1px solid rgba(26, 44, 29, 0.1) !important;
  border-top: 0 !important;
  color: var(--khozam-purple) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

.khozam-tasks-overview-table tbody td {
  padding: 14px !important;
  vertical-align: middle !important;
  font-size: 13px;
  border-top: 1px solid rgba(26, 44, 29, 0.06) !important;
  word-break: break-word;
}

.khozam-tasks-overview-table tbody tr:hover td {
  background: rgba(250, 247, 242, 0.7);
}

.khozam-tasks-overview-col--task {
  width: 24%;
}

.khozam-tasks-overview-col--dates {
  width: 18%;
}

.khozam-tasks-overview-col--status {
  width: 12%;
}

.khozam-tasks-overview-col--metrics {
  width: 24%;
}

.khozam-tasks-overview-col--timing {
  width: 10%;
}

.khozam-tasks-overview-col--assignees {
  width: 12%;
}

.khozam-tasks-overview-task {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.khozam-tasks-overview-task__name {
  font-weight: 700;
  color: var(--khozam-purple) !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
}

.khozam-tasks-overview-task__name:hover {
  color: #1a0824 !important;
}

.khozam-tasks-overview-task__related {
  font-size: 12px;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-tasks-overview-task__related a {
  color: rgba(26, 44, 29, 0.72) !important;
  font-weight: 600;
}

.khozam-tasks-overview-dates {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.khozam-tasks-overview-dates__start,
.khozam-tasks-overview-dates__due {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: rgba(26, 44, 29, 0.78);
  white-space: nowrap;
}

.khozam-tasks-overview-dates__start i,
.khozam-tasks-overview-dates__due i {
  color: var(--khozam-gold);
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.khozam-tasks-overview-dates__sep {
  display: none;
}

.khozam-tasks-overview-dates__due.is-overdue {
  color: #c0392b;
}

.khozam-tasks-overview-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.khozam-tasks-overview-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f4f1f7;
  color: var(--khozam-purple);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.khozam-tasks-overview-chip i {
  color: var(--khozam-gold);
  font-size: 11px;
}

.khozam-tasks-overview-chip--checklist.is-progress {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
}

.khozam-tasks-overview-chip--checklist.is-progress i {
  color: #c0392b;
}

.khozam-tasks-overview-chip--checklist.is-done {
  background: rgba(47, 143, 87, 0.12);
  color: #2f8f57;
}

.khozam-tasks-overview-chip--checklist.is-done i {
  color: #2f8f57;
}

.khozam-tasks-overview-timing {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.khozam-tasks-overview-timing.is-ontime {
  background: rgba(47, 143, 87, 0.12);
  color: #2f8f57;
}

.khozam-tasks-overview-timing.is-late {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
}

.khozam-tasks-overview-assignees {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.khozam-tasks-overview-assignees .task-user,
.khozam-tasks-overview-assignees .staff-profile-image-small,
.khozam-tasks-overview-assignees img {
  margin: 0 2px !important;
}

.khozam-tasks-overview-no-match {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  color: rgba(26, 44, 29, 0.55);
  font-size: 13px;
}

@media (max-width: 1199px) {
  .khozam-tasks-overview-filters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .khozam-tasks-overview-filters__actions {
    grid-column: 1 / -1;
  }

  .khozam-tasks-overview-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .khozam-tasks-overview-table {
    min-width: 860px;
    table-layout: auto;
  }
}

@media (max-width: 767px) {
  .khozam-tasks-overview-page .khozam-tasks-page__hero {
    flex-wrap: wrap;
  }

  .khozam-tasks-overview-page__hero-actions {
    width: 100%;
    margin-inline-start: 0;
  }

  .khozam-tasks-overview-filters__grid,
  .khozam-tasks-overview-stats {
    grid-template-columns: 1fr;
  }

  .khozam-tasks-overview-month__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .khozam-tasks-overview-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .khozam-tasks-overview-toolbar__search {
    max-width: none;
  }
}

/* ===== My Profile page ===== */
.khozam-myprofile-page > .content {
  padding-bottom: 28px;
}

.khozam-myprofile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.22);
  box-shadow: 0 12px 30px rgba(26, 44, 29, 0.14);
}

.khozam-myprofile-hero__identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.khozam-myprofile-hero__avatar img {
  width: 72px;
  height: 72px;
  border-radius: 18px !important;
  object-fit: cover;
  border: 2px solid rgba(196, 168, 113, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.khozam-myprofile-hero__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.khozam-myprofile-hero__name {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.khozam-myprofile-hero__name .khozam-staff-name__primary {
  color: var(--khozam-cream);
  font-size: 22px;
}

.khozam-myprofile-hero__name .khozam-staff-name__secondary {
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
}

.khozam-myprofile-hero__subtitle,
.khozam-myprofile-hero__meta {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
}

.khozam-myprofile-hero__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.khozam-myprofile-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.khozam-myprofile-badge--admin {
  background: rgba(196, 168, 113, 0.22);
  color: var(--khozam-gold);
}

.khozam-myprofile-badge--inactive {
  background: rgba(192, 57, 43, 0.2);
  color: #ffb4a8;
}

.khozam-myprofile-social {
  display: inline-flex;
  gap: 6px;
}

.khozam-myprofile-social__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(196, 168, 113, 0.35);
  background: rgba(248, 240, 224, 0.08);
  color: var(--khozam-gold) !important;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.khozam-myprofile-social__btn:hover {
  background: rgba(196, 168, 113, 0.22);
  border-color: rgba(196, 168, 113, 0.65);
}

.khozam-myprofile-stats {
  margin-bottom: 16px;
}

.khozam-myprofile-stats .staff_logged_time > dl > div {
  border-radius: 14px !important;
  border-color: rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.05);
  overflow: hidden;
}

.khozam-myprofile-stats .staff_logged_time dt {
  color: rgba(26, 44, 29, 0.58) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.khozam-myprofile-stats .staff_logged_time dd .tw-text-primary-600 {
  color: var(--khozam-purple) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.khozam-myprofile-card {
  border-radius: 16px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 10px 26px rgba(26, 44, 29, 0.07) !important;
  overflow: hidden;
  margin-bottom: 16px;
}

.khozam-myprofile-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #faf7f2 0%, #fff 100%);
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-myprofile-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--khozam-purple);
}

.khozam-myprofile-mark-all {
  font-size: 12px;
  font-weight: 700;
  color: var(--khozam-gold) !important;
  text-decoration: none !important;
}

.khozam-myprofile-mark-all:hover {
  color: #c88945 !important;
}

.khozam-myprofile-card > .panel-body {
  padding: 18px !important;
}

.khozam-myprofile-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.khozam-myprofile-info-list > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.khozam-myprofile-info-list__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-gold);
  flex-shrink: 0;
}

.khozam-myprofile-info-list__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(26, 44, 29, 0.5);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.khozam-myprofile-info-list a,
.khozam-myprofile-info-list span:not(.khozam-myprofile-info-list__label):not(.khozam-myprofile-depts__chip) {
  color: var(--khozam-purple);
  font-weight: 600;
  font-size: 13px;
  word-break: break-word;
}

.khozam-myprofile-depts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.khozam-myprofile-depts__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.08);
  color: var(--khozam-purple) !important;
  font-size: 12px;
  font-weight: 700;
}

.khozam-myprofile-projects {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-myprofile-projects__head h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--khozam-purple);
}

.khozam-myprofile-projects .table thead th {
  background: #faf8fc !important;
  color: var(--khozam-purple) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid rgba(26, 44, 29, 0.1) !important;
}

.khozam-myprofile-notifications__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 560px;
  overflow-y: auto;
  margin-bottom: 14px;
  padding-inline-end: 4px;
}

.khozam-myprofile-notification {
  margin: 0;
}

.khozam-myprofile-notification__box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.06);
  background: #fff;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.khozam-myprofile-notification__box:hover {
  background: #faf8fc;
}

.khozam-myprofile-notification__box.unread-notification {
  background: rgba(248, 240, 224, 0.45);
  border-color: rgba(196, 168, 113, 0.28);
}

.khozam-myprofile-notification__avatar img {
  width: 36px;
  height: 36px;
  border-radius: 10px !important;
  object-fit: cover;
}

.khozam-myprofile-notification__body {
  min-width: 0;
  flex: 1;
  position: relative;
  padding-inline-end: 24px;
}

.khozam-myprofile-notification__body .description {
  font-size: 13px;
  color: rgba(26, 44, 29, 0.88);
  line-height: 1.45;
}

.khozam-myprofile-notification__time {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px !important;
}

.khozam-myprofile-notification__mark {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  color: rgba(26, 44, 29, 0.35) !important;
}

.khozam-myprofile-notifications__loader.disabled {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 991px) {
  .khozam-myprofile-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .khozam-myprofile-hero__actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .khozam-myprofile-hero__avatar img {
    width: 58px;
    height: 58px;
  }

  .khozam-myprofile-hero__name,
  .khozam-myprofile-hero__name .khozam-staff-name__primary {
    font-size: 18px;
  }
}

/* ===== Edit Profile page ===== */
.khozam-edit-profile-page > .content {
  padding-bottom: 28px;
}

.khozam-edit-profile-card {
  overflow: visible !important;
}

.khozam-edit-profile-card > .panel-body {
  overflow: visible !important;
}

.khozam-edit-profile-photo {
  margin-bottom: 18px;
}

.khozam-edit-profile-photo__preview {
  position: relative;
  display: inline-block;
}

.khozam-edit-profile-photo__preview img {
  width: 96px;
  height: 96px;
  border-radius: 18px !important;
  object-fit: cover;
  border: 2px solid rgba(196, 168, 113, 0.45);
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.1);
}

.khozam-edit-profile-photo__remove {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #c0392b !important;
  border: 1px solid rgba(192, 57, 43, 0.25);
  box-shadow: 0 4px 10px rgba(26, 44, 29, 0.12);
}

.khozam-edit-profile-section {
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-edit-profile-section.no-border {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.khozam-edit-profile-section__title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--khozam-purple);
}

.khozam-edit-profile-section__title i {
  margin-inline-start: 6px;
  color: var(--khozam-gold);
}

.khozam-edit-profile-page .form-control,
.khozam-edit-profile-page .bootstrap-select > .dropdown-toggle {
  border-radius: 10px !important;
  border-color: rgba(26, 44, 29, 0.12) !important;
  min-height: 40px;
  box-shadow: none !important;
}

.khozam-edit-profile-page .form-control:focus,
.khozam-edit-profile-page .bootstrap-select.open > .dropdown-toggle,
.khozam-edit-profile-page .bootstrap-select > .dropdown-toggle:focus {
  border-color: rgba(196, 168, 113, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.16) !important;
}

.khozam-edit-profile-page textarea.form-control {
  min-height: 110px;
}

.khozam-edit-profile-card__footer {
  background: #faf8fc !important;
  border-top: 1px solid rgba(26, 44, 29, 0.06) !important;
  padding: 14px 18px !important;
  text-align: end;
}

.khozam-edit-profile-card__footer--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: start;
}

.khozam-edit-profile-password-meta {
  font-size: 12px;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-edit-profile-2fa .radio {
  margin-top: 0;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #faf8fc;
  border: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-edit-profile-2fa .radio label {
  color: var(--khozam-purple);
  font-weight: 600;
}

.khozam-edit-profile-qr {
  text-align: center;
}

.khozam-edit-profile-qr img {
  max-width: 220px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

@media (max-width: 767px) {
  .khozam-edit-profile-card__footer--split {
    flex-direction: column;
    align-items: stretch;
  }

  .khozam-edit-profile-card__footer--split .btn {
    width: 100%;
  }
}

/* ============================================================
   Connection hub (الاتصال) — Meta / Snapchat / TikTok / Google Ads / Bevatel
   ============================================================ */
.khozam-connection-page > .content {
  padding-top: 16px !important;
}

.khozam-connection-page__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.khozam-connection-page__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.28);
  box-shadow: 0 12px 30px rgba(26, 44, 29, 0.16);
}

.khozam-connection-page__hero-copy {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.khozam-connection-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-connection-page__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--khozam-gold);
}

.khozam-connection-page__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
}

.khozam-connection-page__subtitle {
  margin: 8px 0 0;
  max-width: 40rem;
  color: rgba(248, 240, 224, 0.74);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
}

.khozam-connection-page__stats {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.khozam-connection-page__stat {
  min-width: 92px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.24);
  text-align: center;
}

.khozam-connection-page__stat strong {
  display: block;
  color: var(--khozam-cream);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.khozam-connection-page__stat span {
  display: block;
  margin-top: 4px;
  color: rgba(248, 240, 224, 0.7);
  font-size: 11px;
  font-weight: 600;
}

.khozam-connection-page__stat--muted {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(248, 240, 224, 0.12);
}

.khozam-connection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.khozam-connection-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.khozam-connection-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--platform-brand, var(--khozam-gold));
}

[dir="rtl"] .khozam-connection-card::before {
  inset: 0 0 0 auto;
}

.khozam-connection-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(26, 44, 29, 0.1);
  border-color: rgba(196, 168, 113, 0.28);
}

.khozam-connection-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.khozam-connection-card__brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.khozam-connection-card__logo {
  display: inline-flex;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(26, 44, 29, 0.1);
  background: #fff;
}

.khozam-connection-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.khozam-connection-card__name {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.khozam-connection-card__desc {
  margin: 4px 0 0;
  color: rgba(26, 44, 29, 0.58);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.khozam-connection-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.khozam-connection-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.khozam-connection-card__status.is-on {
  color: #1f7a3f;
  background: rgba(31, 122, 63, 0.1);
  border: 1px solid rgba(31, 122, 63, 0.18);
}

.khozam-connection-card__status.is-on .khozam-connection-card__status-dot {
  background: #1f7a3f;
  box-shadow: 0 0 0 3px rgba(31, 122, 63, 0.16);
}

.khozam-connection-card__status.is-off {
  color: #8a3b3b;
  background: rgba(177, 56, 56, 0.08);
  border: 1px solid rgba(177, 56, 56, 0.16);
}

.khozam-connection-card__status.is-off .khozam-connection-card__status-dot {
  background: #b13838;
}

.khozam-connection-card__meta {
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8f6f2;
  border: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-connection-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.khozam-connection-card__meta-row + .khozam-connection-card__meta-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-connection-card__meta-row span {
  color: rgba(26, 44, 29, 0.55);
  font-weight: 600;
}

.khozam-connection-card__meta-row strong {
  color: var(--khozam-purple);
  font-weight: 700;
  text-align: end;
}

.khozam-connection-card__hint {
  margin: 0;
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

.khozam-connection-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.khozam-connection-card__btn {
  flex: 1 1 auto;
  min-width: 0;
}

.khozam-connection-card__btn--full {
  width: 100%;
}

.khozam-connection-modal__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline-end: 28px;
}

.khozam-connection-modal__logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
}

.khozam-connection-modal__platform {
  margin: 2px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 12px;
  font-weight: 500;
}

.khozam-connection-modal__intro {
  margin: 0 0 14px;
  color: rgba(26, 44, 29, 0.65);
  font-size: 13px;
  font-weight: 500;
}

.khozam-connection-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.khozam-connection-method {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(26, 44, 29, 0.1);
  background: #fff;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.khozam-connection-method:hover,
.khozam-connection-method:focus {
  border-color: rgba(196, 168, 113, 0.45);
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.08);
  outline: none;
}

.khozam-connection-method.is-active {
  background: rgba(248, 240, 224, 0.55);
  border-color: rgba(196, 168, 113, 0.55);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.14);
}

.khozam-connection-method__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(26, 44, 29, 0.06);
  color: var(--khozam-purple);
  flex-shrink: 0;
}

.khozam-connection-method.is-active .khozam-connection-method__icon {
  background: var(--khozam-purple);
  color: var(--khozam-cream);
}

.khozam-connection-method__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.khozam-connection-method__copy strong {
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 800;
}

.khozam-connection-method__copy small {
  color: rgba(26, 44, 29, 0.55);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.khozam-connection-optional {
  color: rgba(26, 44, 29, 0.45);
  font-size: 11px;
  font-weight: 500;
}

.khozam-connection-modal__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(26, 44, 29, 0.04);
  border: 1px solid rgba(26, 44, 29, 0.06);
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.khozam-connection-modal__note i {
  color: var(--khozam-gold);
  margin-top: 2px;
}

.khozam-meta-page-picker {
  margin: 4px 0 16px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(8, 102, 255, 0.18);
  background: linear-gradient(180deg, rgba(8, 102, 255, 0.06), rgba(8, 102, 255, 0.02));
}

.khozam-meta-page-picker__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.khozam-meta-page-picker__header strong {
  display: block;
  font-size: 13px;
  color: #1a2c1d;
  margin-bottom: 2px;
}

.khozam-meta-page-picker__header span {
  display: block;
  font-size: 12px;
  color: rgba(26, 44, 29, 0.55);
  line-height: 1.4;
}

.khozam-meta-page-picker__selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(8, 102, 255, 0.22);
  margin-bottom: 10px;
}

.khozam-meta-page-picker__selected.is-empty {
  border-style: dashed;
  border-color: rgba(26, 44, 29, 0.14);
  color: rgba(26, 44, 29, 0.5);
}

.khozam-meta-page-picker__avatar,
.khozam-meta-page-picker__item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(8, 102, 255, 0.12);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0866FF;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
}

.khozam-meta-page-picker__avatar img,
.khozam-meta-page-picker__item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.khozam-meta-page-picker__selected-copy {
  min-width: 0;
  flex: 1;
}

.khozam-meta-page-picker__selected-copy small {
  display: block;
  font-size: 11px;
  color: rgba(26, 44, 29, 0.5);
}

.khozam-meta-page-picker__selected-copy strong {
  display: block;
  font-size: 13px;
  color: #1a2c1d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khozam-meta-page-picker__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-meta-page-picker__widget {
  margin-top: 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  overflow: hidden;
}

.khozam-meta-page-picker__widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  background: rgba(26, 44, 29, 0.02);
}

.khozam-meta-page-picker__widget-head strong {
  font-size: 12px;
  color: #1a2c1d;
}

.khozam-meta-page-picker__search {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
  padding: 10px 12px;
  font-size: 13px;
  outline: none;
}

.khozam-meta-page-picker__list {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
}

.khozam-meta-page-picker__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.khozam-meta-page-picker__item:hover,
.khozam-meta-page-picker__item:focus {
  background: rgba(8, 102, 255, 0.06);
  outline: none;
}

.khozam-meta-page-picker__item.is-active {
  background: rgba(8, 102, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(8, 102, 255, 0.25);
}

.khozam-meta-page-picker__item-copy {
  min-width: 0;
  flex: 1;
}

.khozam-meta-page-picker__item-copy strong {
  display: block;
  font-size: 13px;
  color: #1a2c1d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khozam-meta-page-picker__item-copy small {
  display: block;
  font-size: 11px;
  color: rgba(26, 44, 29, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khozam-meta-page-picker__item-check {
  color: #0866FF;
  opacity: 0;
}

.khozam-meta-page-picker__item.is-active .khozam-meta-page-picker__item-check {
  opacity: 1;
}

.khozam-meta-page-picker__status {
  padding: 18px 14px;
  text-align: center;
  font-size: 12px;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-meta-page-picker__status.is-error {
  color: #b42318;
}

[dir="rtl"] .khozam-meta-page-picker__item {
  text-align: right;
}

@media (max-width: 991px) {
  .khozam-connection-page__hero {
    flex-direction: column;
  }

  .khozam-connection-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .khozam-connection-page__hero {
    padding: 16px;
  }

  .khozam-connection-page__title {
    font-size: 20px;
  }

  .khozam-connection-page__stats {
    width: 100%;
  }

  .khozam-connection-page__stat {
    flex: 1;
  }

  .khozam-connection-methods {
    grid-template-columns: 1fr;
  }

  .khozam-connection-card__top {
    flex-direction: column;
  }
}

/* ============================================================
   Global table action icons — Edit / Delete
   Covers taxes, SMS, currencies, roles, departments, options cols,
   and classic .row-options icon links across admin tables.
   ============================================================ */

#wrapper table td .tw-flex.tw-items-center.tw-space-x-3,
.modal table td .tw-flex.tw-items-center.tw-space-x-3,
#wrapper table td .tw-flex.tw-items-center,
.modal table td .tw-flex.tw-items-center {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px !important;
}

/* Kill Tailwind space-x margins so gap controls spacing (RTL-safe) */
#wrapper table td .tw-flex.tw-items-center.tw-space-x-3 > :not([hidden]) ~ :not([hidden]),
.modal table td .tw-flex.tw-items-center.tw-space-x-3 > :not([hidden]) ~ :not([hidden]),
#wrapper table td .tw-space-x-3 > :not([hidden]) ~ :not([hidden]),
.modal table td .tw-space-x-3 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#wrapper table td a:has(> i.fa-pen-to-square),
#wrapper table td a:has(> i.fa-trash-can),
#wrapper table td a:has(> i.fa-pen),
#wrapper table td a:has(> i.fa-pencil),
#wrapper table td a:has(> i.fa-trash),
#wrapper table td a:has(> i.fa-remove),
.modal table td a:has(> i.fa-pen-to-square),
.modal table td a:has(> i.fa-trash-can),
.modal table td a:has(> i.fa-pen),
.modal table td a:has(> i.fa-pencil),
.modal table td a:has(> i.fa-trash),
.modal table td a:has(> i.fa-remove),
table .row-options a:has(> i.fa-pen-to-square),
table .row-options a:has(> i.fa-trash-can),
table .row-options a:has(> i.fa-pen),
table .row-options a:has(> i.fa-pencil),
table .row-options a:has(> i.fa-trash),
table .row-options a:has(> i.fa-remove) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  background: #f7f4f1 !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 1px 2px rgba(26, 44, 29, 0.04);
  text-decoration: none !important;
  vertical-align: middle;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

#wrapper table td a:has(> i.fa-pen-to-square) > i,
#wrapper table td a:has(> i.fa-trash-can) > i,
#wrapper table td a:has(> i.fa-pen) > i,
#wrapper table td a:has(> i.fa-pencil) > i,
#wrapper table td a:has(> i.fa-trash) > i,
#wrapper table td a:has(> i.fa-remove) > i,
.modal table td a:has(> i.fa-pen-to-square) > i,
.modal table td a:has(> i.fa-trash-can) > i,
.modal table td a:has(> i.fa-pen) > i,
.modal table td a:has(> i.fa-pencil) > i,
.modal table td a:has(> i.fa-trash) > i,
.modal table td a:has(> i.fa-remove) > i,
table .row-options a:has(> i) > i {
  font-size: 14px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
}

/* Edit */
#wrapper table td a:has(> i.fa-pen-to-square):hover,
#wrapper table td a:has(> i.fa-pen-to-square):focus,
#wrapper table td a:has(> i.fa-pen):hover,
#wrapper table td a:has(> i.fa-pen):focus,
#wrapper table td a:has(> i.fa-pencil):hover,
#wrapper table td a:has(> i.fa-pencil):focus,
.modal table td a:has(> i.fa-pen-to-square):hover,
.modal table td a:has(> i.fa-pen-to-square):focus,
.modal table td a:has(> i.fa-pen):hover,
.modal table td a:has(> i.fa-pen):focus,
.modal table td a:has(> i.fa-pencil):hover,
.modal table td a:has(> i.fa-pencil):focus,
table .row-options a:has(> i.fa-pen-to-square):hover,
table .row-options a:has(> i.fa-pen):hover,
table .row-options a:has(> i.fa-pencil):hover {
  background: rgba(196, 168, 113, 0.18) !important;
  border-color: rgba(196, 168, 113, 0.45) !important;
  color: var(--khozam-purple) !important;
  box-shadow: 0 4px 12px rgba(26, 44, 29, 0.1);
  transform: translateY(-1px);
}

/* Delete */
#wrapper table td a:has(> i.fa-trash-can),
#wrapper table td a:has(> i.fa-trash),
#wrapper table td a:has(> i.fa-remove),
#wrapper table td a._delete:has(> i),
.modal table td a:has(> i.fa-trash-can),
.modal table td a:has(> i.fa-trash),
.modal table td a:has(> i.fa-remove),
.modal table td a._delete:has(> i),
table .row-options a:has(> i.fa-trash-can),
table .row-options a:has(> i.fa-trash),
table .row-options a:has(> i.fa-remove),
table .row-options a.text-danger:has(> i) {
  color: #a33226 !important;
  background: rgba(192, 57, 43, 0.06) !important;
  border-color: rgba(192, 57, 43, 0.14) !important;
}

#wrapper table td a:has(> i.fa-trash-can):hover,
#wrapper table td a:has(> i.fa-trash-can):focus,
#wrapper table td a:has(> i.fa-trash):hover,
#wrapper table td a:has(> i.fa-trash):focus,
#wrapper table td a:has(> i.fa-remove):hover,
#wrapper table td a:has(> i.fa-remove):focus,
#wrapper table td a._delete:has(> i):hover,
#wrapper table td a._delete:has(> i):focus,
.modal table td a:has(> i.fa-trash-can):hover,
.modal table td a:has(> i.fa-trash-can):focus,
.modal table td a:has(> i.fa-trash):hover,
.modal table td a:has(> i.fa-trash):focus,
.modal table td a:has(> i.fa-remove):hover,
.modal table td a:has(> i.fa-remove):focus,
.modal table td a._delete:has(> i):hover,
.modal table td a._delete:has(> i):focus,
table .row-options a:has(> i.fa-trash-can):hover,
table .row-options a:has(> i.fa-trash):hover,
table .row-options a:has(> i.fa-remove):hover,
table .row-options a.text-danger:has(> i):hover {
  background: rgba(192, 57, 43, 0.14) !important;
  border-color: rgba(192, 57, 43, 0.35) !important;
  color: #8e2a20 !important;
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.12);
  transform: translateY(-1px);
}

/* Text-style row-options (Edit | Delete words) — keep tidy */
table .row-options {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  color: rgba(26, 44, 29, 0.35);
}

table .row-options a:not(:has(> i)) {
  color: rgba(26, 44, 29, 0.62);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

table .row-options a:not(:has(> i)):hover {
  color: var(--khozam-purple);
}

table .row-options a.text-danger:not(:has(> i)),
table .row-options a._delete:not(:has(> i)) {
  color: #a33226;
}

table .row-options a.text-danger:not(:has(> i)):hover,
table .row-options a._delete:not(:has(> i)):hover {
  color: #8e2a20;
}

@media (prefers-reduced-motion: reduce) {
  #wrapper table td a:has(> i),
  .modal table td a:has(> i),
  table .row-options a:has(> i) {
    transition: none !important;
  }
}

/* ── New / edit invoice form (فاتورة جديدة) ── */
.khozam-invoice-form-page .content {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 96px;
}

.khozam-invoice-form-page__hero {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 70% 120% at 100% 0%, rgba(196, 168, 113, 0.22), transparent 55%),
    linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid, #243b2f) 100%);
  border: 1px solid rgba(196, 168, 113, 0.22);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-invoice-form-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: rgba(248, 240, 224, 0.78) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 0.18s ease;
}

.khozam-invoice-form-page__back:hover,
.khozam-invoice-form-page__back:focus {
  color: var(--khozam-cream) !important;
}

.khozam-invoice-form-page__hero-copy {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.khozam-invoice-form-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-invoice-form-page__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.khozam-invoice-form-page__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.khozam-invoice-form-page__title-row .label,
.khozam-invoice-form-page__title-row .label-default,
.khozam-invoice-form-page__title-row span.label {
  margin: 0 !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  border: 1px solid rgba(248, 240, 224, 0.18);
}

.khozam-invoice-form-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.6;
  max-width: 640px;
}

.khozam-invoice-form-page .khozam-invoice-template.panel_s,
.khozam-invoice-template.panel_s {
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.07) !important;
  background: #fff !important;
}

.khozam-invoice-template .panel-body {
  padding: 20px 22px !important;
  background: #fff;
}

.khozam-invoice-template .hr-panel-separator {
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(26, 44, 29, 0.07) !important;
  background: transparent;
}

.khozam-invoice-section__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-invoice-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(196, 168, 113, 0.14);
  color: var(--khozam-purple);
  font-size: 15px;
  flex-shrink: 0;
}

.khozam-invoice-section__title {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.khozam-invoice-section__subtitle {
  margin: 4px 0 0;
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  line-height: 1.5;
}

.khozam-invoice-form-page .form-group label,
.khozam-invoice-form-page .control-label,
.khozam-invoice-template .form-group label,
.khozam-invoice-template .control-label {
  color: rgba(26, 44, 29, 0.78);
  font-size: 12px;
  font-weight: 600;
}

.khozam-invoice-form-page .form-control,
.khozam-invoice-form-page .bootstrap-select .dropdown-toggle,
.khozam-invoice-template .form-control,
.khozam-invoice-template .bootstrap-select .dropdown-toggle,
.khozam-invoice-template .input-group-addon {
  min-height: 40px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.khozam-invoice-template .input-group .form-control {
  border-radius: 0 10px 10px 0 !important;
}

.khozam-invoice-template .input-group .input-group-addon:first-child {
  border-radius: 10px 0 0 10px !important;
  background: rgba(248, 240, 224, 0.55) !important;
  color: var(--khozam-purple);
  font-weight: 700;
}

[dir="rtl"] .khozam-invoice-template .input-group .form-control {
  border-radius: 10px 0 0 10px !important;
}

[dir="rtl"] .khozam-invoice-template .input-group .input-group-addon:first-child {
  border-radius: 0 10px 10px 0 !important;
}

.khozam-invoice-form-page .form-control:focus,
.khozam-invoice-form-page .bootstrap-select.open .dropdown-toggle,
.khozam-invoice-template .form-control:focus,
.khozam-invoice-template .bootstrap-select.open .dropdown-toggle {
  border-color: rgba(196, 168, 113, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.16) !important;
}

.khozam-invoice-address-card {
  margin-top: 4px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffaf4 0%, #fff 100%);
  border: 1px solid rgba(196, 168, 113, 0.22);
  min-height: 112px;
}

.khozam-invoice-address-card__label {
  margin: 0 0 8px !important;
  color: var(--khozam-purple) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

.khozam-invoice-address-card address {
  margin: 0;
  color: rgba(26, 44, 29, 0.72);
  font-size: 13px;
  line-height: 1.65;
  font-style: normal;
}

.khozam-invoice-template .edit_shipping_billing_info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.14);
  color: var(--khozam-purple) !important;
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease;
}

.khozam-invoice-template .edit_shipping_billing_info:hover,
.khozam-invoice-template .edit_shipping_billing_info:focus {
  background: rgba(196, 168, 113, 0.28);
  color: var(--khozam-purple) !important;
}

.khozam-invoice-section--items .show_quantity_as_wrapper {
  color: rgba(26, 44, 29, 0.62);
  font-size: 12px;
  font-weight: 600;
}

.khozam-invoice-template .invoice-items-table {
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.khozam-invoice-template .invoice-items-table > thead > tr > th {
  background: linear-gradient(180deg, #241c17 0%, #1a2c1d 100%) !important;
  color: #f8f0e0 !important;
  border: 0 !important;
  font-size: 12px;
  font-weight: 700;
  padding: 12px 10px !important;
  white-space: nowrap;
}

.khozam-invoice-template .invoice-items-table > tbody > tr > td {
  border-color: rgba(26, 44, 29, 0.06) !important;
  padding: 10px !important;
  vertical-align: top;
  background: #fff;
}

.khozam-invoice-template .invoice-items-table > tbody > tr.main > td {
  background: rgba(248, 240, 224, 0.35);
}

.khozam-invoice-template .invoice-items-table > tbody > tr.sortable:hover > td {
  background: rgba(248, 240, 224, 0.28);
}

.khozam-invoice-template .invoice-items-table textarea.form-control,
.khozam-invoice-template .invoice-items-table input.form-control {
  min-height: 36px;
  border-radius: 8px !important;
}

.khozam-invoice-template .invoice-items-table .btn-primary {
  background: var(--khozam-purple) !important;
  border-color: var(--khozam-purple) !important;
  border-radius: 10px !important;
  min-width: 38px;
  min-height: 38px;
}

.khozam-invoice-template .invoice-items-table .btn-danger {
  border-radius: 10px !important;
}

.khozam-invoice-totals {
  margin-top: 8px;
  padding: 14px 16px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf4 0%, #fff 100%);
  border: 1px solid rgba(196, 168, 113, 0.24);
  box-shadow: 0 6px 18px rgba(26, 44, 29, 0.05);
}

.khozam-invoice-totals .table {
  margin-bottom: 0;
}

.khozam-invoice-totals .table > tbody > tr > td {
  border-top-color: rgba(26, 44, 29, 0.06) !important;
  padding: 10px 4px !important;
  vertical-align: middle;
}

.khozam-invoice-totals .table > tbody > tr:first-child > td {
  border-top: 0 !important;
}

.khozam-invoice-totals .table > tbody > tr:last-child > td {
  padding-top: 14px !important;
}

.khozam-invoice-totals .table > tbody > tr:last-child .bold,
.khozam-invoice-totals .table > tbody > tr:last-child .total {
  color: var(--khozam-purple) !important;
  font-size: 16px;
  font-weight: 800;
}

.khozam-invoice-form-page .btn-bottom-toolbar.khozam-invoice-form-toolbar,
.khozam-invoice-form-toolbar.btn-bottom-toolbar {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-top: 1px solid rgba(26, 44, 29, 0.08) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 -8px 24px rgba(26, 44, 29, 0.08);
}

.khozam-invoice-form-toolbar .khozam-page-toolbar__btn {
  min-width: 132px;
  margin: 0 !important;
}

.khozam-invoice-form-toolbar .btn-group {
  display: inline-flex;
}

.khozam-invoice-form-toolbar .btn-group > .khozam-page-toolbar__btn--primary {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.khozam-invoice-form-toolbar .khozam-invoice-form-toolbar__caret {
  min-height: 40px;
  padding: 0 12px !important;
  border-radius: 0 10px 10px 0 !important;
  background: var(--khozam-purple) !important;
  border-color: var(--khozam-purple) !important;
  border-left: 1px solid rgba(248, 240, 224, 0.22) !important;
}

[dir="rtl"] .khozam-invoice-form-toolbar .btn-group > .khozam-page-toolbar__btn--primary {
  border-radius: 0 10px 10px 0 !important;
}

[dir="rtl"] .khozam-invoice-form-toolbar .khozam-invoice-form-toolbar__caret {
  border-radius: 10px 0 0 10px !important;
  border-left: 0 !important;
  border-right: 1px solid rgba(248, 240, 224, 0.22) !important;
}

.khozam-invoice-form-page #invoice_top_info .alert-info {
  border-radius: 14px;
  border: 1px solid rgba(196, 168, 113, 0.28);
  background: rgba(248, 240, 224, 0.55);
  color: var(--khozam-purple);
}

@media (max-width: 767px) {
  .khozam-invoice-form-page .content {
    padding-inline: 10px;
  }

  .khozam-invoice-form-page__hero {
    padding: 16px;
  }

  .khozam-invoice-form-page__title {
    font-size: 18px;
  }

  .khozam-invoice-template .panel-body {
    padding: 16px !important;
  }

  .khozam-invoice-form-toolbar .khozam-page-toolbar__btn {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .khozam-invoice-form-page__back,
  .khozam-invoice-template .edit_shipping_billing_info,
  .khozam-invoice-form-page .form-control,
  .khozam-invoice-template .form-control {
    transition: none !important;
  }
}

/* Invoice line items: prioritize multi-sentence description over unit CF columns */
.khozam-invoice-form-page .invoice-items-table thead > tr > th.custom_field,
.khozam-invoice-form-page .invoice-items-table tbody > tr > td.custom_field {
  /* Keep inputs in DOM for save/select-item; hide crowded unit-attribute columns */
  display: none !important;
}

.khozam-invoice-form-page .invoice-items-table thead > tr > th.khozam-invoice-col-item {
  min-width: 160px;
}

.khozam-invoice-form-page .invoice-items-table thead > tr > th.khozam-invoice-col-description {
  min-width: 280px;
  width: 38%;
}

.khozam-invoice-form-page .invoice-items-table .khozam-item-title-input {
  min-height: 72px !important;
  resize: vertical;
  line-height: 1.45;
}

.khozam-invoice-form-page .invoice-items-table .khozam-item-long-description,
.khozam-invoice-form-page .invoice-items-table textarea[name="long_description"],
.khozam-invoice-form-page .invoice-items-table textarea[name*="[long_description]"] {
  min-height: 150px !important;
  resize: vertical;
  line-height: 1.55;
  white-space: pre-wrap;
  font-size: 13px;
}

.khozam-invoice-form-page .invoice-items-table td.khozam-invoice-col-description,
.khozam-invoice-form-page .invoice-items-table td:has(> .khozam-item-long-description),
.khozam-invoice-form-page .invoice-items-table td:has(> textarea[name*="[long_description]"]) {
  min-width: 280px;
}
/* ── Dashboard: Top KPI cards (two rows) + analytics ── */
.khozam-dash-kpis {
  padding: 20px 22px 22px;
  border-radius: 16px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: linear-gradient(180deg, #fff 0%, #fbf8f4 55%, #f6f3ef 100%);
  box-shadow: 0 8px 24px rgba(26, 44, 29, 0.07);
}

.khozam-dash-kpis__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.khozam-dash-kpis__title {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.khozam-dash-kpis__subtitle,
.khozam-dash-analytics__subtitle {
  display: none !important;
}

/* Premium period segmented control */
.khozam-period-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 12px;
  border-radius: 14px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #f7f3ee 100%);
  box-shadow:
    0 1px 2px rgba(26, 44, 29, 0.04),
    0 8px 20px rgba(26, 44, 29, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.khozam-period-switch__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--khozam-gold, #c4a871);
  opacity: 0.95;
  flex-shrink: 0;
}

.khozam-period-switch__track.khozam-leads-report__period,
.khozam-dash-kpis .khozam-leads-report__period {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 0;
  border-radius: 11px;
  background: rgba(26, 44, 29, 0.05);
  box-shadow: inset 0 1px 2px rgba(26, 44, 29, 0.06);
}

.khozam-dash-kpis .khozam-leads-report__period-button,
.khozam-period-switch__btn {
  position: relative;
  z-index: 1;
  padding: 8px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6b6170;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.khozam-dash-kpis .khozam-leads-report__period-button:hover,
.khozam-dash-kpis .khozam-leads-report__period-button:focus,
.khozam-period-switch__btn:hover,
.khozam-period-switch__btn:focus {
  color: var(--khozam-purple);
  outline: 0;
  background: rgba(255, 255, 255, 0.72);
}

.khozam-dash-kpis .khozam-leads-report__period-button:focus-visible,
.khozam-period-switch__btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(196, 168, 113, 0.45);
}

.khozam-dash-kpis .khozam-leads-report__period-button.is-active,
.khozam-period-switch__btn.is-active {
  color: var(--khozam-purple);
  background: linear-gradient(180deg, #fff8ef 0%, #f0c795 48%, var(--khozam-gold, #c4a871) 100%);
  font-weight: 700;
  box-shadow:
    0 2px 8px rgba(196, 168, 113, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.khozam-dash-kpis .khozam-leads-report__period-button:active,
.khozam-period-switch__btn:active {
  transform: scale(0.97);
}

[data-khozam-leads-report].is-loading .khozam-period-switch {
  opacity: 0.72;
  pointer-events: none;
}

@media (max-width: 768px) {
  .khozam-period-switch {
    width: 100%;
    padding: 6px;
    gap: 8px;
  }

  .khozam-period-switch__track.khozam-leads-report__period,
  .khozam-dash-kpis .khozam-leads-report__period {
    flex: 1;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .khozam-dash-kpis .khozam-leads-report__period-button,
  .khozam-period-switch__btn {
    flex: 1 0 auto;
    padding: 8px 11px;
    font-size: 11.5px;
    text-align: center;
  }
}

.khozam-dash-kpis__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.khozam-dash-kpis__leads-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}

.khozam-dash-kpis__row-label {
  color: var(--khozam-purple);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.khozam-dash-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: #fff;
  box-shadow: 0 4px 12px rgba(26, 44, 29, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}

.khozam-dash-kpi--total {
  background: linear-gradient(180deg, #fff 0%, #fff9f2 100%);
  border-color: rgba(196, 168, 113, 0.35);
}

.khozam-dash-kpi--total::before,
.khozam-dash-kpi--clickable::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--khozam-gold), var(--khozam-gold-hover));
}

.khozam-dash-kpi--clickable::before {
  background: var(--kpi-color, var(--khozam-gold));
}

.khozam-dash-kpi--clickable {
  color: inherit;
  text-decoration: none !important;
  cursor: pointer;
}

.khozam-dash-kpi--clickable:hover,
.khozam-dash-kpi--clickable:focus {
  transform: translateY(-2px);
  border-color: rgba(196, 168, 113, 0.35);
  box-shadow: 0 10px 22px rgba(26, 44, 29, 0.1);
  color: inherit;
}

.khozam-dash-kpi__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kpi-color, var(--khozam-gold));
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.12);
}

.khozam-dash-kpi__label {
  color: #5b4f63;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.khozam-dash-kpi__value {
  color: var(--khozam-purple);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.khozam-dash-kpi--clickable .khozam-dash-kpi__value {
  color: var(--kpi-color, var(--khozam-purple));
}

.khozam-dash-kpi__hint {
  margin-top: auto;
  color: #8d8494;
  font-size: 11px;
  line-height: 1.35;
}

.khozam-dash-kpi__delta {
  display: inline-block;
  margin-inline-start: 4px;
  font-weight: 700;
}

.khozam-dash-kpi__delta.is-up {
  color: #3d9a5f;
}

.khozam-dash-kpi__delta.is-down {
  color: #c0392b;
}

.khozam-dash-pulse {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 18px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(26, 44, 29, 0.03);
  border: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-dash-pulse__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 6px 8px;
}

.khozam-dash-pulse__label {
  color: #8d8494;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.khozam-dash-pulse__value {
  color: var(--khozam-purple);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.khozam-dash-pulse__hint {
  color: #8d8494;
  font-size: 10px;
}

.khozam-dash-analytics {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-dash-analytics__header {
  margin-bottom: 14px;
}

.khozam-dash-analytics__title {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
}

.khozam-funnel--full {
  max-width: none;
}

.khozam-dash-analytics__groups {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

[data-khozam-leads-report].is-loading .khozam-leads-report__period-button {
  pointer-events: none;
  opacity: 0.7;
}

[data-khozam-leads-report].is-loading [data-total-leads],
[data-khozam-leads-report].is-loading [data-status-count],
[data-khozam-leads-report].is-loading .khozam-funnel__stage-count {
  opacity: 0.45;
}

@media (max-width: 1199px) {
  .khozam-dash-kpis__row,
  .khozam-dash-pulse {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .khozam-dash-kpis {
    padding: 16px;
  }

  .khozam-dash-kpis__row,
  .khozam-dash-pulse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .khozam-dash-kpis__leads-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .khozam-dash-kpi {
    min-height: 108px;
  }

  .khozam-dash-kpi__value {
    font-size: 22px;
  }
}

/* ============================================================
 * Appointment detail view — lead / contact / external person layout
 * ============================================================ */

.khozam-appointment-view-page > .content {
  padding-top: 12px !important;
  max-width: 1120px;
  margin-inline: auto;
}

.khozam-appointment-view__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--khozam-cream) !important;
  opacity: 0.82;
  font-weight: 600;
  text-decoration: none !important;
}

.khozam-appointment-view__back:hover,
.khozam-appointment-view__back:focus {
  opacity: 1;
  color: var(--khozam-gold) !important;
}

[dir="ltr"] .khozam-appointment-view__back i {
  transform: scaleX(-1);
}

.khozam-appointment-view__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.22);
  box-shadow: 0 12px 32px rgba(26, 44, 29, 0.16);
}

.khozam-appointment-view__hero-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 420px;
  min-width: 0;
}

.khozam-appointment-view__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-appointment-view__hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.khozam-appointment-view__eyebrow {
  color: rgba(248, 240, 224, 0.62);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.khozam-appointment-view__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: var(--khozam-cream);
  font-size: 11px;
  font-weight: 700;
}

.khozam-appointment-view__pill--source {
  background: rgba(196, 168, 113, 0.18);
  color: var(--khozam-gold);
}

.khozam-appointment-view__title {
  margin: 0 0 8px;
  color: var(--khozam-cream);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.khozam-appointment-view__subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 14px;
  font-weight: 600;
}

.khozam-appointment-view__subtitle i {
  color: var(--khozam-gold);
}

.khozam-appointment-view__hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.khozam-appointment-view__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.khozam-appointment-view__status.is-upcoming {
  background: rgba(56, 132, 214, 0.22);
  color: #9fd0ff;
}

.khozam-appointment-view__status.is-pending {
  background: rgba(196, 168, 113, 0.22);
  color: var(--khozam-gold);
}

.khozam-appointment-view__status.is-cancelled,
.khozam-appointment-view__status.is-missed {
  background: rgba(220, 74, 74, 0.22);
  color: #ffb4b4;
}

.khozam-appointment-view__status.is-finished {
  background: rgba(52, 168, 83, 0.22);
  color: #9be7b3;
}

.khozam-appointment-view__approve {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--khozam-gold) !important;
  color: var(--khozam-purple) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.khozam-appointment-view__approve:hover,
.khozam-appointment-view__approve:focus {
  background: var(--khozam-gold-hover) !important;
  color: var(--khozam-purple) !important;
}

.khozam-appointment-view__hero-links {
  display: inline-flex;
  gap: 8px;
}

.khozam-appointment-view__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(248, 240, 224, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.22);
  color: var(--khozam-cream) !important;
  text-decoration: none !important;
}

.khozam-appointment-view__icon-btn:hover,
.khozam-appointment-view__icon-btn:focus {
  background: rgba(196, 168, 113, 0.2);
  color: var(--khozam-gold) !important;
}

.khozam-appointment-view__alert {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.92);
  border: 1px solid rgba(220, 74, 74, 0.22);
  box-shadow: 0 8px 20px rgba(26, 44, 29, 0.08);
}

.khozam-appointment-view__alert-link {
  display: inline-block;
  margin-bottom: 8px;
  color: #b42318 !important;
  font-weight: 700;
}

.khozam-appointment-view__alert-body {
  color: #3d2f27;
  line-height: 1.6;
}

.khozam-appointment-view__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.khozam-appointment-view__grid--person {
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.35fr);
  align-items: start;
}

.khozam-appointment-view__person,
.khozam-appointment-view__details {
  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(248, 240, 224, 0.94) !important;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.1) !important;
  overflow: hidden;
}

.khozam-appointment-view__person .panel-body,
.khozam-appointment-view__details .panel-body {
  padding: 20px !important;
}

.khozam-appointment-view__person-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-appointment-view__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--khozam-purple), var(--khozam-purple-mid));
  color: var(--khozam-gold);
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
}

.khozam-appointment-view__person-label {
  display: block;
  margin-bottom: 4px;
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  font-weight: 700;
}

.khozam-appointment-view__person-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--khozam-purple) !important;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none !important;
  line-height: 1.3;
}

a.khozam-appointment-view__person-name:hover,
a.khozam-appointment-view__person-name:focus {
  color: #5a4030 !important;
}

.khozam-appointment-view__person-name i {
  font-size: 12px;
  color: var(--khozam-gold);
}

.khozam-appointment-view__source-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.06);
  color: var(--khozam-purple);
  font-size: 11px;
  font-weight: 700;
}

.khozam-appointment-view__source-badge--lead_related {
  background: rgba(56, 132, 214, 0.12);
  color: #1f5f9a;
}

.khozam-appointment-view__source-badge--internal {
  background: rgba(52, 168, 83, 0.12);
  color: #1f7a3d;
}

.khozam-appointment-view__source-badge--external {
  background: rgba(196, 168, 113, 0.18);
  color: #8a5a2b;
}

.khozam-appointment-view__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.khozam-appointment-view__facts li {
  display: grid;
  gap: 4px;
}

.khozam-appointment-view__facts span {
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  font-weight: 700;
}

.khozam-appointment-view__facts strong,
.khozam-appointment-view__facts a,
.khozam-appointment-view__facts em {
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  word-break: break-word;
}

.khozam-appointment-view__facts a {
  text-decoration: none !important;
}

.khozam-appointment-view__facts a:hover {
  color: #5a4030;
}

.khozam-appointment-view__contact-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.khozam-appointment-view__contact-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 10px 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  color: var(--khozam-purple) !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.khozam-appointment-view__contact-btn i {
  font-size: 18px;
  color: var(--khozam-gold);
}

.khozam-appointment-view__contact-btn:hover,
.khozam-appointment-view__contact-btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(26, 44, 29, 0.1);
  border-color: rgba(196, 168, 113, 0.45);
}

.khozam-appointment-view__contact-btn--call i {
  color: #2f8f4e;
}

.khozam-appointment-view__contact-btn--wa i {
  color: #25d366;
}

.khozam-appointment-view__section-head {
  margin-bottom: 14px;
}

.khozam-appointment-view__section-head h2 {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 16px;
  font-weight: 800;
}

.khozam-appointment-view__dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.khozam-appointment-view__item {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-appointment-view__item--wide {
  grid-column: 1 / -1;
}

.khozam-appointment-view__item > span {
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  font-weight: 700;
}

.khozam-appointment-view__item > strong,
.khozam-appointment-view__item > a {
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 700;
  word-break: break-word;
}

.khozam-appointment-view__attendees {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-appointment-view__attendee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  color: var(--khozam-purple) !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700;
}

.khozam-appointment-view__attendee img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.khozam-appointment-view__notes {
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.06);
  color: var(--khozam-purple);
  line-height: 1.7;
}

.khozam-appointment-view__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: rgba(248, 240, 224, 0.94);
  border: 1px solid rgba(26, 44, 29, 0.06);
  box-shadow: 0 8px 22px rgba(26, 44, 29, 0.08);
}

.khozam-appointment-view__toolbar-start,
.khozam-appointment-view__toolbar-end {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.khozam-appointment-view__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  border: 0 !important;
}

.khozam-appointment-view__btn--primary {
  background: var(--khozam-purple) !important;
  color: var(--khozam-cream) !important;
}

.khozam-appointment-view__btn--primary:hover,
.khozam-appointment-view__btn--primary:focus {
  background: var(--khozam-purple-mid) !important;
  color: var(--khozam-gold) !important;
}

.khozam-appointment-view__btn--secondary {
  background: #fff !important;
  color: var(--khozam-purple) !important;
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
}

.khozam-appointment-view__btn--secondary:hover,
.khozam-appointment-view__btn--secondary:focus {
  border-color: rgba(196, 168, 113, 0.5) !important;
  color: #5a4030 !important;
}

.khozam-appointment-view__btn--danger {
  background: #b42318 !important;
  color: #fff !important;
}

.khozam-appointment-view__btn--danger:hover,
.khozam-appointment-view__btn--danger:focus {
  background: #912018 !important;
  color: #fff !important;
}

.khozam-appointment-view__feedback {
  margin-bottom: 24px;
}

@media (max-width: 991px) {
  .khozam-appointment-view__grid--person {
    grid-template-columns: 1fr;
  }

  .khozam-appointment-view__hero-aside {
    align-items: flex-start;
    width: 100%;
  }

  .khozam-appointment-view__dl {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .khozam-appointment-view__contact-actions {
    grid-template-columns: 1fr;
  }

  .khozam-appointment-view__title {
    font-size: 20px;
  }

  .khozam-appointment-view__toolbar-end,
  .khozam-appointment-view__toolbar-start {
    width: 100%;
  }

  .khozam-appointment-view__btn {
    width: 100%;
  }
}

.khozam-appointment-view__wa-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.khozam-appointment-view__wa-logo svg {
  display: block;
}

.khozam-appointment-view__contact-btn--wa .khozam-appointment-view__wa-logo {
  width: 28px;
  height: 28px;
}

.khozam-appointment-view__contact-btn--wa .khozam-appointment-view__wa-logo svg {
  width: 28px;
  height: 28px;
}

.khozam-appointment-view__wa-modal-header .modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.khozam-appointment-view__wa-logo--lg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.khozam-appointment-view__wa-send {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #fff !important;
}

.khozam-appointment-view__wa-send:hover,
.khozam-appointment-view__wa-send:focus {
  background: #1ebe57 !important;
  border-color: #1ebe57 !important;
  color: #fff !important;
}

.khozam-import-items__alerts {
  margin-bottom: 12px;
}

.khozam-import-items__alert {
  margin: 0 0 12px;
  border-radius: 12px;
  font-weight: 600;
}

.khozam-import-items__file-input {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* ── SMS modal event picker (الحدث) ── */
.khozam-sms-modal .modal-dialog {
  max-width: 560px;
}

.khozam-sms-event-field {
  margin-bottom: 4px;
}

.khozam-sms-event-field > .control-label {
  display: block;
  margin-bottom: 10px;
  color: #1a2c1d;
  font-weight: 700;
}

.khozam-sms-event-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.khozam-sms-event-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  border-radius: 12px;
  background: #fff;
  color: #1a2c1d;
  text-align: start;
  box-shadow: 0 4px 12px rgba(26, 44, 29, 0.04);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  cursor: pointer;
}

.khozam-sms-event-option:hover,
.khozam-sms-event-option:focus {
  border-color: rgba(196, 168, 113, 0.65);
  background: #fffaf4;
  outline: none;
  box-shadow: 0 8px 18px rgba(26, 44, 29, 0.08);
  transform: translateY(-1px);
}

.khozam-sms-event-option.is-selected {
  border-color: #c4862f;
  background: linear-gradient(180deg, #fff8ef 0%, #f7ebdc 100%);
  box-shadow: 0 0 0 2px rgba(196, 134, 47, 0.18), 0 8px 18px rgba(26, 44, 29, 0.08);
}

.khozam-sms-event-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: rgba(26, 44, 29, 0.06);
  color: #6b5344;
  font-size: 15px;
}

.khozam-sms-event-option.is-selected .khozam-sms-event-option__icon {
  background: rgba(196, 134, 47, 0.18);
  color: #8a5a24;
}

.khozam-sms-event-option__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.khozam-sms-event-field__hint {
  margin: 8px 0 0;
  color: rgba(26, 44, 29, 0.45);
  font-size: 12px;
}

.khozam-sms-event-field.has-selection .khozam-sms-event-field__hint {
  display: none;
}

@media (max-width: 480px) {
  .khozam-sms-event-picker {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Khozam client portal — auth screens + topbar
   ========================================================================== */

body.customers.customers_login,
body.customers.customers_forgot,
body.customers.customers_reset,
body.customers.register {
  min-height: 100vh !important;
  color: #514557 !important;
  background-color: #1a2c1d !important;
  background-image:
    radial-gradient(circle at 12% 12%, rgba(196, 168, 113, 0.24), transparent 32rem),
    radial-gradient(circle at 88% 88%, rgba(248, 240, 224, 0.13), transparent 30rem),
    linear-gradient(135deg, #1d0828 0%, #1a2c1d 48%, #4a2457 100%) !important;
  font-family: "Thmanyah Sans", sans-serif;
}

body.customers.customers_login::before,
body.customers.customers_forgot::before,
body.customers.customers_reset::before,
body.customers.register::before,
body.customers.customers_login::after,
body.customers.customers_forgot::after,
body.customers.customers_reset::after,
body.customers.register::after {
  content: "";
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

body.customers.customers_login::before,
body.customers.customers_forgot::before,
body.customers.customers_reset::before,
body.customers.register::before {
  top: -20rem;
  left: -16rem;
  width: 42rem;
  height: 42rem;
  border: 1px solid rgba(248, 240, 224, 0.13);
  box-shadow: 0 0 0 6rem rgba(248, 240, 224, 0.025);
}

body.customers.customers_login::after,
body.customers.customers_forgot::after,
body.customers.customers_reset::after,
body.customers.register::after {
  right: -12rem;
  bottom: -15rem;
  width: 34rem;
  height: 34rem;
  background: rgba(196, 168, 113, 0.06);
  border: 1px solid rgba(196, 168, 113, 0.16);
}

body.customers.customers_login #wrapper,
body.customers.customers_forgot #wrapper,
body.customers.customers_reset #wrapper,
body.customers.register #wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  float: none !important;
  position: relative !important;
  z-index: 1 !important;
  min-height: 100vh !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.customers.customers_login #content,
body.customers.customers_forgot #content,
body.customers.customers_reset #content,
body.customers.register #content,
body.customers.customers_login #content > .container,
body.customers.customers_forgot #content > .container,
body.customers.customers_reset #content > .container,
body.customers.register #content > .container,
body.customers.customers_login #content > .container > .row,
body.customers.customers_forgot #content > .container > .row,
body.customers.customers_reset #content > .container > .row,
body.customers.register #content > .container > .row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  min-height: 0 !important;
  height: auto !important;
}

body.customers.customers_login #content > .container:first-child,
body.customers.customers_forgot #content > .container:first-child,
body.customers.customers_reset #content > .container:first-child,
body.customers.register #content > .container:first-child {
  display: none;
}

.kz-client-login-shell {
  box-sizing: border-box;
  min-height: 100vh;
  width: 100%;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.kz-client-login-wrapper {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.kz-client-login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
}

.kz-client-login-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  text-decoration: none;
}

.kz-client-login-logo-link:focus-visible {
  outline: 3px solid #c4a871;
  outline-offset: 7px;
}

.kz-client-login-logo-link img {
  width: 270px;
  max-width: 100%;
  height: auto;
  display: block;
}

.kz-client-login-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(196, 168, 113, 0.42);
  background: rgba(248, 240, 224, 0.08);
  color: #f3d7b4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.kz-client-login-card {
  padding: 34px 32px 30px;
  background: #fffdfb;
  border: 1px solid rgba(196, 168, 113, 0.42);
  border-radius: 22px;
  box-shadow: 0 28px 75px rgba(14, 4, 18, 0.38), 0 4px 18px rgba(14, 4, 18, 0.18);
}

.kz-client-login-title {
  color: #1a2c1d;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 26px;
  text-align: center;
}

.kz-client-login-form {
  margin: 0;
}

.kz-client-login-card .form-group {
  margin-bottom: 18px;
}

.kz-client-login-card .control-label {
  display: block;
  margin-bottom: 8px;
  color: #47374d;
  font-weight: 600;
  font-size: 13.5px;
}

.kz-client-login-card .form-control,
.kz-client-login-card .bootstrap-select > .dropdown-toggle {
  width: 100%;
  height: 48px;
  padding: 11px 14px;
  color: #1a2c1d !important;
  font-size: 15px;
  background-color: #fff !important;
  border: 1px solid #d8ceda !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(26, 44, 29, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.kz-client-login-card .form-control::placeholder {
  color: #a89aae;
  opacity: 1;
}

.kz-client-login-card .form-control:hover,
.kz-client-login-card .bootstrap-select > .dropdown-toggle:hover {
  border-color: #b9a9bd !important;
}

.kz-client-login-card .form-control:focus,
.kz-client-login-card .bootstrap-select.open > .dropdown-toggle {
  border-color: #7a4a84 !important;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(196, 168, 113, 0.28) !important;
}

.kz-client-login-card input.form-control:-webkit-autofill,
.kz-client-login-card input.form-control:-webkit-autofill:hover,
.kz-client-login-card input.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #1a2c1d;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  background-color: #fff !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: #1a2c1d;
}

.kz-client-login-card .bootstrap-select .dropdown-toggle .filter-option {
  color: #1a2c1d !important;
}

.kz-client-login-card .bootstrap-select .bs-caret {
  color: #6b5d70;
}

.kz-client-login-recaptcha {
  width: 100%;
  margin-bottom: 18px;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
}

[dir="rtl"] .kz-client-login-recaptcha {
  justify-content: flex-end;
}

.kz-client-login-options {
  margin: 2px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
}

.kz-client-login-options .checkbox {
  margin: 0;
}

.kz-client-login-options .checkbox label {
  margin: 0;
  color: #5d5062;
  cursor: pointer;
  font-weight: 500;
}

.kz-client-login-options .checkbox label::before {
  border-color: #cbbfce;
  border-radius: 5px;
}

.kz-client-login-options .checkbox input[type="checkbox"]:checked + label::before {
  background-color: #1a2c1d;
  border-color: #1a2c1d;
}

.kz-client-login-options .checkbox input[type="checkbox"]:focus + label::before {
  border-color: #7a4a84;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.32);
}

.kz-client-login-forgot {
  flex-shrink: 0;
  color: #6b3975;
  font-weight: 600;
  text-decoration: none;
}

.kz-client-login-forgot:hover,
.kz-client-login-forgot:focus {
  color: #1a2c1d;
  text-decoration: underline;
}

.kz-client-login-submit {
  margin-bottom: 0;
}

.kz-client-login-submit .btn-primary,
.kz-client-login-submit .btn-default {
  min-height: 48px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.kz-client-login-submit .btn-primary {
  color: #fff !important;
  background-color: #1a2c1d !important;
  border-color: #1a2c1d !important;
  box-shadow: 0 10px 24px rgba(26, 44, 29, 0.2);
}

.kz-client-login-submit .btn-primary:hover,
.kz-client-login-submit .btn-primary:focus {
  color: #fff !important;
  background-color: #431b52 !important;
  border-color: #431b52 !important;
  box-shadow: 0 0 0 4px rgba(196, 168, 113, 0.42);
}

.kz-client-login-register {
  margin-top: 10px;
  color: #1a2c1d !important;
  background: #fff !important;
  border: 1px solid #d8ceda !important;
}

.kz-client-login-register:hover,
.kz-client-login-register:focus {
  background: #fff8f0 !important;
  border-color: #c4a871 !important;
}

.kz-client-login-card .alert,
.kz-client-login-card .text-danger {
  margin-bottom: 14px;
  border-radius: 10px;
}

/* Client portal topbar */
body.customers:not(.customers_login):not(.customers_forgot):not(.customers_reset):not(.register) {
  background: #f7f1ea;
}

.kz-client-topbar.navbar.navbar-default.header {
  min-height: 72px;
  margin-bottom: 0;
  border: 0 !important;
  border-bottom: 1px solid rgba(196, 168, 113, 0.22) !important;
  background: linear-gradient(180deg, #241c18 0%, #1a2c1d 100%) !important;
  box-shadow: 0 10px 30px rgba(26, 44, 29, 0.18);
}

.kz-client-topbar__inner.container {
  width: 100%;
  max-width: 1170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  float: none;
}

.kz-client-topbar__header.navbar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  float: none;
  margin: 0;
}

.kz-client-topbar__brand.navbar-brand {
  height: auto;
  padding: 14px 0 !important;
  margin: 0 !important;
}

.kz-client-topbar__brand img {
  height: 34px;
  width: auto;
}

@media (min-width: 768px) {
  .kz-client-topbar .navbar-collapse.collapse {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .kz-client-topbar .navbar-nav.navbar-right {
    float: none !important;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
  }
}

.kz-client-topbar .navbar-nav > li > a {
  color: rgba(248, 240, 224, 0.82) !important;
  line-height: 1.2 !important;
  margin: 0 2px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-weight: 600;
  background: transparent !important;
}

.kz-client-topbar .navbar-nav > li > a:hover,
.kz-client-topbar .navbar-nav > li > a:focus,
.kz-client-topbar .navbar-nav > .active > a,
.kz-client-topbar .navbar-nav > .active > a:hover,
.kz-client-topbar .navbar-nav > .active > a:focus {
  color: #f8f0e0 !important;
  background: rgba(248, 240, 224, 0.08) !important;
}

.kz-client-topbar .navbar-nav > li.customers-nav-item-login > a {
  color: #1a2c1d !important;
  background: #c4a871 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
}

.kz-client-topbar .navbar-nav > li.customers-nav-item-login > a:hover,
.kz-client-topbar .navbar-nav > li.customers-nav-item-login > a:focus {
  color: #1a2c1d !important;
  background: #d4b87f !important;
}

.kz-client-topbar__profile {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.kz-client-topbar__profile img.client-profile-image-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(196, 168, 113, 0.45);
  object-fit: cover;
}

.kz-client-topbar__profile-name {
  color: #f8f0e0;
  font-weight: 600;
}

.kz-client-topbar .dropdown-menu {
  border: 1px solid rgba(196, 168, 113, 0.22);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(26, 44, 29, 0.18);
  padding: 8px;
  margin-top: 10px;
}

.kz-client-topbar .dropdown-menu > li > a {
  border-radius: 10px;
  padding: 10px 12px;
  color: #3a2f35;
  font-weight: 600;
}

.kz-client-topbar .dropdown-menu > li > a:hover,
.kz-client-topbar .dropdown-menu > li > a:focus {
  background: #fff4e8;
  color: #1a2c1d;
}

.kz-client-topbar__toggle {
  border-color: rgba(196, 168, 113, 0.45) !important;
  margin-top: 18px;
}

.kz-client-topbar__toggle .icon-bar {
  background: #f8f0e0 !important;
}

.kz-client-topbar__toggle:hover,
.kz-client-topbar__toggle:focus {
  background: rgba(248, 240, 224, 0.08) !important;
}

body.customers:not(.customers_login):not(.customers_forgot):not(.customers_reset):not(.register) #wrapper {
  background: transparent;
}

body.customers:not(.customers_login):not(.customers_forgot):not(.customers_reset):not(.register) .customer-top-submenu {
  margin: 18px 0 8px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.customers:not(.customers_login):not(.customers_forgot):not(.customers_reset):not(.register) .customer-top-submenu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: #fffdfb;
  color: #3a2f35;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.04);
}

body.customers:not(.customers_login):not(.customers_forgot):not(.customers_reset):not(.register) .customer-top-submenu > li > a:hover {
  border-color: rgba(196, 168, 113, 0.45);
  color: #1a2c1d;
}

body.customers footer.footer {
  background: #1a2c1d !important;
  color: rgba(248, 240, 224, 0.72) !important;
  border-top: 1px solid rgba(196, 168, 113, 0.22);
}

body.customers footer.footer a {
  color: #c4a871;
}

@media screen and (max-width: 767px) {
  .kz-client-topbar .navbar-collapse {
    margin-top: 8px;
    padding: 10px 0 16px;
  }

  .kz-client-topbar .navbar-nav > li > a {
    display: block !important;
    margin: 4px 0 !important;
  }

  .kz-client-topbar__profile-name {
    display: inline;
  }

  .kz-client-login-options {
    flex-direction: column;
    align-items: flex-start;
  }

  .kz-client-login-card {
    padding: 28px 22px;
    border-radius: 20px;
  }

  .kz-client-login-title {
    font-size: 24px;
    margin-bottom: 22px;
  }

  .kz-client-login-logo-link img {
    width: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kz-client-login-card .form-control,
  .kz-client-login-submit .btn-primary,
  .kz-client-login-submit .btn-default {
    transition: none;
  }
}

/* ===== Marketing Dashboard ===== */
.khozam-mkt-dash-page > .content {
  padding-top: 12px !important;
  padding-bottom: 32px;
}

.khozam-mkt-dash {
  width: 100%;
  max-width: none;
  margin: 0;
}

.khozam-mkt-dash__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.28);
  box-shadow: 0 8px 20px rgba(26, 44, 29, 0.12);
}

.khozam-mkt-dash__hero-copy {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  flex: 1 1 220px;
}

.khozam-mkt-dash__hero-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 15px;
  flex-shrink: 0;
}

.khozam-mkt-dash__hero-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  min-width: 0;
}

.khozam-mkt-dash__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--khozam-cream);
}

.khozam-mkt-dash__period-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.28);
  color: rgba(248, 240, 224, 0.82);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.khozam-mkt-dash__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  flex: 1 1 420px;
  justify-content: flex-end;
}

.khozam-mkt-dash__filters label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: rgba(248, 240, 224, 0.7);
}

.khozam-mkt-dash__filters .form-control {
  height: 34px;
  min-width: 132px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(248, 240, 224, 0.18);
  background: rgba(248, 240, 224, 0.1);
  color: var(--khozam-cream);
  box-shadow: none;
  font-size: 12px;
}

.khozam-mkt-dash__filters .form-control:focus {
  border-color: rgba(196, 168, 113, 0.55);
  box-shadow: 0 0 0 2px rgba(196, 168, 113, 0.2);
}

.khozam-mkt-dash__filter-btn,
.khozam-mkt-dash__connect-btn {
  height: 34px;
  padding: 0 12px;
  border-radius: 8px !important;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.khozam-mkt-dash__filter-btn {
  background: var(--khozam-gold) !important;
  border-color: transparent !important;
  color: var(--khozam-purple) !important;
}

.khozam-mkt-dash__filter-btn:hover {
  filter: brightness(1.05);
}

.khozam-mkt-dash__connect-btn {
  background: transparent !important;
  border: 1px solid rgba(248, 240, 224, 0.28) !important;
  color: var(--khozam-cream) !important;
}

.khozam-mkt-dash__connect-btn:hover {
  background: rgba(248, 240, 224, 0.08) !important;
  color: var(--khozam-cream) !important;
}

.khozam-mkt-dash__kpi {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.khozam-mkt-dash__kpi-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 92px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 2px 10px rgba(26, 44, 29, 0.04);
}

.khozam-mkt-dash__kpi-card--wide,
.khozam-mkt-dash__kpi-card--spend {
  grid-column: span 2;
}

.khozam-mkt-dash__kpi-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.khozam-mkt-dash__kpi-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(26, 44, 29, 0.06);
  color: var(--khozam-purple);
  font-size: 12px;
}

.khozam-mkt-dash__kpi-card--leads .khozam-mkt-dash__kpi-icon {
  background: rgba(8, 102, 255, 0.12);
  color: #0866ff;
}

.khozam-mkt-dash__kpi-card--spend .khozam-mkt-dash__kpi-icon {
  background: rgba(196, 168, 113, 0.18);
  color: #b07a3e;
}

.khozam-mkt-dash__kpi-card--cpl .khozam-mkt-dash__kpi-icon {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

.khozam-mkt-dash__kpi-label {
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: rgba(26, 44, 29, 0.55);
  line-height: 1.3;
  min-width: 0;
}

.khozam-mkt-dash__kpi-value {
  display: block;
  margin: 0;
  font-size: clamp(14px, 1.05vw, 20px);
  font-weight: 800;
  color: var(--khozam-purple);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.khozam-mkt-dash__kpi-value--money {
  font-size: clamp(13px, 1vw, 18px);
}

.khozam-mkt-dash__kpi-value--money .khozam-currency {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}

.khozam-mkt-dash__kpi-value--money .khozam-currency__symbol {
  flex-shrink: 0;
  font-size: 0.92em;
  opacity: 0.9;
}

.khozam-mkt-dash__kpi-value--money .khozam-currency__amount {
  min-width: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.khozam-mkt-dash__kpi-card--spend .khozam-mkt-dash__kpi-value--money .khozam-currency__amount {
  font-size: 1.05em;
}

.khozam-mkt-dash__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(196, 168, 113, 0.14), rgba(255, 255, 255, 0.9));
  border: 1px solid rgba(196, 168, 113, 0.35);
}

.khozam-mkt-dash__banner-copy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1 1 320px;
}

.khozam-mkt-dash__banner-copy > i {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--khozam-gold);
  color: var(--khozam-purple);
  flex-shrink: 0;
}

.khozam-mkt-dash__banner-copy strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--khozam-purple);
}

.khozam-mkt-dash__banner-copy p {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(26, 44, 29, 0.62);
  line-height: 1.5;
}

.khozam-mkt-dash__banner-btn {
  background: var(--khozam-purple) !important;
  color: var(--khozam-cream) !important;
  border: 0 !important;
  border-radius: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.khozam-mkt-dash__banner-btn:hover {
  background: var(--khozam-purple-mid) !important;
  color: var(--khozam-cream) !important;
}

.khozam-mkt-dash__section {
  margin-bottom: 24px;
}

.khozam-mkt-dash__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.khozam-mkt-dash__section-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--khozam-purple);
}

.khozam-mkt-dash__section-head p {
  margin: 0;
  font-size: 13px;
  color: rgba(26, 44, 29, 0.58);
}

.khozam-mkt-dash__count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.06);
  font-size: 12px;
  font-weight: 800;
  color: var(--khozam-purple);
}

.khozam-mkt-dash__platforms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.khozam-mkt-dash__platform {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 4px 16px rgba(26, 44, 29, 0.04);
  border-top: 3px solid var(--platform-brand, #c4a871);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.khozam-mkt-dash__platform:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(26, 44, 29, 0.08);
}

.khozam-mkt-dash__platform.is-disconnected {
  background: linear-gradient(180deg, #fff 0%, #faf8f5 100%);
}

.khozam-mkt-dash__platform-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.khozam-mkt-dash__platform-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.khozam-mkt-dash__platform-brand h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--khozam-purple);
}

.khozam-mkt-dash__platform-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7f5f2;
  overflow: hidden;
  flex-shrink: 0;
}

.khozam-mkt-dash__platform-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.khozam-mkt-dash__platform-logo--fallback {
  font-weight: 800;
  color: var(--platform-brand, #2c1f4a);
  background: color-mix(in srgb, var(--platform-brand, #c4a871) 18%, #fff);
}

.khozam-mkt-dash__platform-link {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.06);
  color: var(--khozam-purple);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.khozam-mkt-dash__platform-link:hover {
  background: var(--khozam-gold);
  color: var(--khozam-purple);
  text-decoration: none;
}

.khozam-mkt-dash__conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.khozam-mkt-dash__conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.khozam-mkt-dash__conn.is-on {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

.khozam-mkt-dash__conn.is-off {
  background: rgba(26, 44, 29, 0.08);
  color: rgba(26, 44, 29, 0.55);
}

.khozam-mkt-dash__platform-hero-metric {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--platform-brand, #c4a871) 10%, #fff);
}

.khozam-mkt-dash__platform-hero-metric span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-mkt-dash__platform-hero-metric strong {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--khozam-purple);
}

.khozam-mkt-dash__share {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 72px;
}

.khozam-mkt-dash__share > span {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--khozam-purple);
}

.khozam-mkt-dash__share-track {
  width: 72px;
  height: 6px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.08);
  overflow: hidden;
}

.khozam-mkt-dash__share-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--platform-brand, #c4a871);
  transition: width 0.35s ease;
}

.khozam-mkt-dash__platform-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.khozam-mkt-dash__platform-metrics > div {
  padding: 10px;
  border-radius: 10px;
  background: #faf8f5;
}

.khozam-mkt-dash__platform-metrics span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-mkt-dash__platform-metrics strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--khozam-purple);
  word-break: break-word;
}

.khozam-mkt-dash__table-wrap {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  box-shadow: 0 4px 16px rgba(26, 44, 29, 0.04);
}

.khozam-mkt-dash__table {
  margin: 0;
  width: 100%;
}

.khozam-mkt-dash__table thead th {
  background: #f7f5f2;
  font-weight: 800;
  font-size: 12px;
  color: rgba(26, 44, 29, 0.7);
  white-space: nowrap;
  border-bottom: 1px solid rgba(26, 44, 29, 0.08) !important;
  padding: 14px 16px;
}

.khozam-mkt-dash__table td {
  vertical-align: middle;
  font-size: 13px;
  padding: 14px 16px;
  border-top: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-mkt-dash__table tbody tr:hover td {
  background: rgba(248, 240, 224, 0.35);
}

.khozam-mkt-dash__camp-name {
  color: var(--khozam-purple);
}

.khozam-mkt-dash__source-chip {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.06);
  font-size: 12px;
  font-weight: 700;
  color: var(--khozam-purple);
}

.khozam-mkt-dash__period-cell {
  white-space: nowrap;
  color: rgba(26, 44, 29, 0.7);
}

.khozam-mkt-dash__period-cell span {
  margin: 0 4px;
  color: rgba(26, 44, 29, 0.35);
}

.khozam-mkt-dash__roas {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(26, 44, 29, 0.06);
  font-weight: 800;
}

.khozam-mkt-dash__roas.is-good {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

.khozam-mkt-dash__table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 20px;
  text-align: center;
  color: rgba(26, 44, 29, 0.55);
}

.khozam-mkt-dash__table-empty i {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7f5f2;
  color: var(--khozam-gold);
  font-size: 20px;
}

.khozam-mkt-dash__table-empty p {
  margin: 0;
  font-weight: 600;
}

.khozam-mkt-dash__empty {
  grid-column: 1 / -1;
  padding: 36px;
  text-align: center;
  border-radius: 14px;
  background: #fff;
  border: 1px dashed rgba(26, 44, 29, 0.15);
  color: rgba(26, 44, 29, 0.55);
  font-weight: 600;
}

@media (max-width: 1400px) {
  .khozam-mkt-dash__kpi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .khozam-mkt-dash__kpi-card--spend {
    grid-column: span 2;
  }

  .khozam-mkt-dash__platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .khozam-mkt-dash__hero {
    align-items: stretch;
  }

  .khozam-mkt-dash__filters {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .khozam-mkt-dash__kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .khozam-mkt-dash__kpi-card--spend {
    grid-column: span 2;
  }

  .khozam-mkt-dash__platforms {
    grid-template-columns: 1fr;
  }

  .khozam-mkt-dash__title {
    font-size: 16px;
  }

  .khozam-mkt-dash__platform-hero-metric strong {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .khozam-mkt-dash__platform,
  .khozam-mkt-dash__share-fill {
    transition: none;
  }
}

/* ===== Sales & Customer Service Dashboard — Azyan Hadbah green identity ===== */
.khozam-sales-dash-page {
  --had-green: #1a2c1d;        /* forest green — primary brand */
  --had-green-mid: #243b2f;    /* mid green */
  --had-green-deep: #0e2911;   /* deep green */
  --had-gold: #c4a871;         /* gold accent */
  --had-gold-soft: rgba(196, 168, 113, 0.16);
  --had-cream: #f8f0e0;        /* cream contrast text */
  --had-moss: #3d6b47;         /* mid-tone leaf green */
  --had-sage: #5e8a68;         /* soft sage */
  --had-sage-soft: rgba(94, 138, 104, 0.14);
  --had-surface: #fbfaf6;      /* warm paper surface */
  --had-panel-border: rgba(36, 59, 47, 0.12);
  --had-text: #2a3b2e;
  --had-text-muted: rgba(42, 59, 46, 0.58);
  --had-track: rgba(36, 59, 47, 0.08);
}

.khozam-sales-dash-page > .content {
  padding-top: 12px !important;
  padding-bottom: 32px;
}

.khozam-sales-dash {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ─── Hero ─── */
.khozam-sales-dash__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  margin-bottom: 16px;
  padding: 18px 22px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(94, 138, 104, 0.32) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(196, 168, 113, 0.16) 0%, transparent 55%),
    linear-gradient(135deg, var(--had-green) 0%, var(--had-green-mid) 60%, var(--had-green-deep) 100%);
  border: 1px solid rgba(196, 168, 113, 0.32);
  box-shadow: 0 12px 30px rgba(14, 41, 17, 0.28);
  position: relative;
  overflow: hidden;
}

.khozam-sales-dash__hero::after {
  content: "";
  position: absolute;
  inset: auto -40px -50px auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 240, 224, 0.05), transparent 70%);
  pointer-events: none;
}

.khozam-sales-dash__hero-copy {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
  flex: 1 1 280px;
  position: relative;
  z-index: 1;
}

.khozam-sales-dash__hero-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(248, 240, 224, 0.16), rgba(196, 168, 113, 0.22));
  color: var(--had-gold);
  font-size: 19px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(196, 168, 113, 0.3);
}

.khozam-sales-dash__hero-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  min-width: 0;
}

.khozam-sales-dash__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--had-cream);
  letter-spacing: -0.01em;
}

.khozam-sales-dash__subtitle {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: rgba(248, 240, 224, 0.74);
  line-height: 1.45;
  max-width: 520px;
}

.khozam-sales-dash__period-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(248, 240, 224, 0.1);
  border: 1px solid rgba(196, 168, 113, 0.32);
  color: rgba(248, 240, 224, 0.85);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.khozam-sales-dash__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  flex: 1 1 420px;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

.khozam-sales-dash__filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: rgba(248, 240, 224, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.khozam-sales-dash__filters .form-control {
  height: 36px;
  min-width: 138px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(248, 240, 224, 0.2);
  background: rgba(248, 240, 224, 0.1);
  color: var(--had-cream);
  box-shadow: none;
  font-size: 12px;
}

.khozam-sales-dash__filters .form-control:focus {
  border-color: rgba(196, 168, 113, 0.6);
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.22);
  background: rgba(248, 240, 224, 0.14);
}

.khozam-sales-dash__filter-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--had-gold) 0%, #b4935f 100%) !important;
  border-color: transparent !important;
  color: var(--had-green-deep) !important;
  box-shadow: 0 4px 12px rgba(196, 168, 113, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.khozam-sales-dash__filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(196, 168, 113, 0.4);
  filter: none;
}

/* ─── KPI cards ─── */
.khozam-sales-dash__kpi {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.khozam-sales-dash__kpi-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 108px;
  padding: 15px 16px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--had-panel-border);
  box-shadow: 0 3px 12px rgba(36, 59, 47, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.khozam-sales-dash__kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(36, 59, 47, 0.1);
}

.khozam-sales-dash__kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--had-moss);
}

.khozam-sales-dash__kpi-card--calls::before    { background: var(--had-moss); }
.khozam-sales-dash__kpi-card--leads::before    { background: var(--had-sage); }
.khozam-sales-dash__kpi-card--contracted::before { background: var(--had-green); }
.khozam-sales-dash__kpi-card--reserved::before { background: #b8924a; }
.khozam-sales-dash__kpi-card--revenue::before  { background: var(--had-gold); }
.khozam-sales-dash__kpi-card--tickets::before  { background: #b0552f; }
.khozam-sales-dash__kpi-card--appts::before    { background: var(--had-moss); }

.khozam-sales-dash__kpi-card--wide {
  grid-column: span 2;
}

.khozam-sales-dash__kpi-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.khozam-sales-dash__kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--had-sage-soft);
  color: var(--had-green);
  font-size: 13px;
}

.khozam-sales-dash__kpi-card--calls .khozam-sales-dash__kpi-icon      { background: rgba(61, 107, 71, 0.14); color: var(--had-moss); }
.khozam-sales-dash__kpi-card--leads .khozam-sales-dash__kpi-icon      { background: var(--had-sage-soft); color: var(--had-sage); }
.khozam-sales-dash__kpi-card--contracted .khozam-sales-dash__kpi-icon { background: rgba(26, 44, 29, 0.12); color: var(--had-green); }
.khozam-sales-dash__kpi-card--reserved .khozam-sales-dash__kpi-icon   { background: rgba(184, 146, 74, 0.16); color: #b8924a; }
.khozam-sales-dash__kpi-card--revenue .khozam-sales-dash__kpi-icon    { background: var(--had-gold-soft); color: #a08143; }
.khozam-sales-dash__kpi-card--tickets .khozam-sales-dash__kpi-icon    { background: rgba(176, 85, 47, 0.14); color: #b0552f; }
.khozam-sales-dash__kpi-card--appts .khozam-sales-dash__kpi-icon      { background: rgba(61, 107, 71, 0.14); color: var(--had-moss); }

.khozam-sales-dash__kpi-label {
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: rgba(42, 59, 46, 0.6);
  line-height: 1.3;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.khozam-sales-dash__kpi-value {
  display: block;
  margin: 0;
  font-size: clamp(16px, 1.1vw, 22px);
  font-weight: 800;
  color: var(--had-green);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.khozam-sales-dash__kpi-card--revenue .khozam-sales-dash__kpi-value { color: #8a6d34; }

.khozam-sales-dash__kpi-value--money { font-size: clamp(14px, 1.05vw, 19px); }

.khozam-sales-dash__kpi-foot {
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(42, 59, 46, 0.52);
  line-height: 1.3;
}

.khozam-sales-dash__kpi-foot--warn { color: #b0552f; }
.khozam-sales-dash__kpi-foot--ok   { color: var(--had-moss); }

/* ─── Generic section / panel ─── */
.khozam-sales-dash__section {
  margin-bottom: 18px;
}

.khozam-sales-dash__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.khozam-sales-dash__section-head h2 {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 800;
  color: var(--had-green);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  letter-spacing: -0.01em;
}

.khozam-sales-dash__section-head h2 i {
  color: var(--had-gold);
  font-size: 15px;
}

.khozam-sales-dash__section-head p {
  margin: 0;
  font-size: 12px;
  color: var(--had-text-muted);
}

.khozam-sales-dash__count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--had-sage-soft);
  font-size: 12px;
  font-weight: 800;
  color: var(--had-green);
  border: 1px solid rgba(94, 138, 104, 0.22);
}

.khozam-sales-dash__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.khozam-sales-dash__panel {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--had-panel-border);
  box-shadow: 0 4px 18px rgba(36, 59, 47, 0.05);
}

.khozam-sales-dash__panel-head {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(36, 59, 47, 0.08);
}

.khozam-sales-dash__panel-head h2 {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 800;
  color: var(--had-green);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.khozam-sales-dash__panel-head h2 i {
  color: var(--had-gold);
  font-size: 14px;
}

.khozam-sales-dash__panel-head p {
  margin: 0;
  font-size: 11.5px;
  color: var(--had-text-muted);
}

/* ─── Donut ─── */
.khozam-sales-dash__donut-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
}

.khozam-sales-dash__donut {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: var(--donut-grad, conic-gradient(rgba(36, 59, 47, 0.12) 0% 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 6px 16px rgba(36, 59, 47, 0.1);
}

.khozam-sales-dash__donut-hole {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: inset 0 0 0 1px rgba(36, 59, 47, 0.06);
}

.khozam-sales-dash__donut-hole strong {
  font-size: 24px;
  font-weight: 800;
  color: var(--had-green);
  line-height: 1;
}

.khozam-sales-dash__donut-hole span {
  font-size: 9px;
  font-weight: 700;
  color: var(--had-text-muted);
  text-align: center;
  padding: 0 6px;
}

.khozam-sales-dash__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  flex: 1;
}

.khozam-sales-dash__legend > li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}

.khozam-sales-dash__legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  flex-shrink: 0;
}

.khozam-sales-dash__legend-label {
  flex: 1;
  font-weight: 600;
  color: var(--had-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.khozam-sales-dash__legend > li > strong {
  font-weight: 800;
  color: var(--had-green);
  font-variant-numeric: tabular-nums;
}

.khozam-sales-dash__legend-pct {
  font-size: 11px;
  font-weight: 700;
  color: rgba(42, 59, 46, 0.45);
  min-width: 32px;
  text-align: right;
}

.khozam-sales-dash__legend-meta {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(36, 59, 47, 0.16);
  font-size: 11.5px !important;
  color: var(--had-text-muted) !important;
}

.khozam-sales-dash__legend-meta i {
  color: var(--had-gold);
  width: 16px;
  text-align: center;
}

.khozam-sales-dash__legend-meta strong {
  color: var(--had-green) !important;
  margin-right: 0;
  margin-right: auto;
}

/* ─── Funnel ─── */
.khozam-sales-dash__funnel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}

.khozam-sales-dash__funnel-info {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
}

.khozam-sales-dash__funnel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

.khozam-sales-dash__funnel-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--had-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.khozam-sales-dash__funnel-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--had-green);
  font-variant-numeric: tabular-nums;
}

.khozam-sales-dash__funnel-pct {
  font-size: 11px;
  font-weight: 700;
  color: rgba(42, 59, 46, 0.45);
  min-width: 42px;
  text-align: right;
}

.khozam-sales-dash__funnel-track {
  height: 9px;
  border-radius: 999px;
  background: var(--had-track);
  overflow: hidden;
}

.khozam-sales-dash__funnel-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.4s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ─── Bars (sources) ─── */
.khozam-sales-dash__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.khozam-sales-dash__bar-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.khozam-sales-dash__bar-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--had-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.khozam-sales-dash__bar-info strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--had-green);
  font-variant-numeric: tabular-nums;
}

.khozam-sales-dash__bar-track {
  height: 9px;
  border-radius: 999px;
  background: var(--had-track);
  overflow: hidden;
}

.khozam-sales-dash__bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--had-sage) 0%, var(--had-moss) 60%, var(--had-green) 100%);
  transition: width 0.4s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ─── Customer service grid ─── */
.khozam-sales-dash__cs-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.khozam-sales-dash__cs-block h3 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(42, 59, 46, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.khozam-sales-dash__cs-none {
  margin: 0;
  font-size: 12px;
  color: rgba(42, 59, 46, 0.4);
}

.khozam-sales-dash__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.khozam-sales-dash__chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip, var(--had-moss)) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--chip, var(--had-moss)) 28%, transparent);
}

.khozam-sales-dash__chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--chip, var(--had-moss));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.khozam-sales-dash__chip-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--had-text);
}

/* ─── Leaderboard table ─── */
.khozam-sales-dash__table-wrap {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--had-panel-border);
  box-shadow: 0 4px 18px rgba(36, 59, 47, 0.05);
}

.khozam-sales-dash__table {
  margin: 0;
  width: 100%;
}

.khozam-sales-dash__table thead th {
  background: linear-gradient(180deg, #f0ede4 0%, #ebe7dc 100%);
  font-weight: 800;
  font-size: 11.5px;
  color: var(--had-green);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: 2px solid rgba(36, 59, 47, 0.14) !important;
  padding: 14px 16px;
}

.khozam-sales-dash__table td {
  vertical-align: middle;
  font-size: 13px;
  padding: 13px 16px;
  border-top: 1px solid rgba(36, 59, 47, 0.07);
}

.khozam-sales-dash__table tbody tr:hover td {
  background: rgba(248, 240, 224, 0.4);
}

.khozam-sales-dash__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(36, 59, 47, 0.08);
  color: rgba(42, 59, 46, 0.55);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.khozam-sales-dash__rank--1 { background: linear-gradient(135deg, #d9b865 0%, #b8924a 100%); color: #fff; box-shadow: 0 2px 6px rgba(184, 146, 74, 0.4); }
.khozam-sales-dash__rank--2 { background: linear-gradient(135deg, var(--had-sage) 0%, var(--had-moss) 100%); color: #fff; box-shadow: 0 2px 6px rgba(61, 107, 71, 0.32); }
.khozam-sales-dash__rank--3 { background: linear-gradient(135deg, #8a7758 0%, #6b5b41 100%); color: #fff; }

.khozam-sales-dash__rep-cell {
  display: flex;
  align-items: center;
  gap: 11px;
}

.khozam-sales-dash__rep-cell strong {
  color: var(--had-green);
  font-weight: 700;
}

.khozam-sales-dash__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--had-moss) 0%, var(--had-green) 100%);
  color: var(--had-cream);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(36, 59, 47, 0.22);
}

.khozam-sales-dash__money {
  font-weight: 800;
  color: var(--had-moss);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.khozam-sales-dash__table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 20px;
  text-align: center;
  color: var(--had-text-muted);
}

.khozam-sales-dash__table-empty i {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--had-sage-soft);
  color: var(--had-gold);
  font-size: 20px;
}

.khozam-sales-dash__table-empty p {
  margin: 0;
  font-weight: 600;
}

.khozam-sales-dash__empty {
  padding: 40px;
  text-align: center;
  border-radius: 14px;
  background: var(--had-surface);
  border: 1px dashed rgba(36, 59, 47, 0.2);
  color: var(--had-text-muted);
  font-weight: 600;
}

/* ─── Responsive ─── */
@media (max-width: 1400px) {
  .khozam-sales-dash__kpi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .khozam-sales-dash__kpi-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 1100px) {
  .khozam-sales-dash__grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .khozam-sales-dash__kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .khozam-sales-dash__kpi-card--wide {
    grid-column: span 2;
  }
  .khozam-sales-dash__title {
    font-size: 17px;
  }
  .khozam-sales-dash__donut-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .khozam-sales-dash__kpi-card,
  .khozam-sales-dash__funnel-fill,
  .khozam-sales-dash__bar-fill,
  .khozam-sales-dash__filter-btn {
    transition: none;
  }
}

/* ── Call status + lead sources charts row ── */
.khozam-charts-row {
  display: flex;
  flex-wrap: wrap;
}

.khozam-charts-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.khozam-charts-row > [class*="col-"] > .khozam-call-status,
.khozam-charts-row > [class*="col-"] > .khozam-source-quality {
  flex: 1 1 auto;
  height: 100%;
}

.khozam-call-status,
.khozam-source-quality {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.1);
  border-radius: 12px;
  padding: 16px 18px 18px;
  box-shadow: 0 1px 2px rgba(26, 44, 29, 0.04), 0 8px 24px rgba(26, 44, 29, 0.04);
}

.khozam-call-status.is-loading {
  opacity: 0.72;
  pointer-events: none;
}

.khozam-call-status__toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.khozam-call-status__toolbar-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.khozam-call-status__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #1a2c1d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.khozam-call-status__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
  flex-shrink: 0;
  background: rgba(74, 111, 165, 0.1);
  color: #4a6fa5;
}

.khozam-call-status__today {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.04);
  color: #6b6170;
  font-size: 11px;
  font-weight: 600;
  width: fit-content;
}

.khozam-call-status__today strong {
  color: #1a2c1d;
  font-weight: 800;
}

.khozam-period-switch--compact {
  padding: 4px;
}

.khozam-period-switch--compact .khozam-period-switch__btn {
  padding: 6px 10px;
  font-size: 11px;
}

.khozam-call-status__canvas-wrap {
  position: relative;
  height: 240px;
  max-height: 240px;
}

.khozam-call-status__summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.khozam-call-status__mini-summary {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.khozam-call-status__mini-summary li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(26, 44, 29, 0.03);
}

.khozam-call-status__mini-label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khozam-call-status__mini-summary strong {
  font-size: 13px;
  font-weight: 800;
  color: #1a2c1d;
}

.khozam-call-status__mini-pct {
  font-size: 11px;
  font-weight: 600;
  color: #888;
}

.khozam-call-status__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(26, 44, 29, 0.1);
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.khozam-call-status__total strong {
  font-size: 18px;
  font-weight: 800;
  color: #1a2c1d;
}

/* Source quality panel */
.khozam-source-quality__head {
  margin-bottom: 12px;
}

.khozam-source-quality__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  color: #1a2c1d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.khozam-source-quality__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(26, 44, 29, 0.08);
  color: #1a2c1d;
  font-size: 12px;
}

.khozam-source-quality__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #6b6170;
  max-width: 42ch;
}

.khozam-source-quality__insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.khozam-source-quality__insight {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 10px;
  background: linear-gradient(180deg, #faf8f5 0%, #f3efe8 100%);
  border: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-source-quality__insight--best {
  background: linear-gradient(180deg, #f3faf5 0%, #e8f4ec 100%);
  border-color: rgba(61, 154, 95, 0.18);
}

.khozam-source-quality__insight-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #7a7168;
  margin-bottom: 4px;
}

.khozam-source-quality__insight-value {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #1a2c1d;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khozam-source-quality__insight-note {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #6b6170;
}

.khozam-source-quality__body {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(0, 1.25fr);
  gap: 14px;
  align-items: start;
}

.khozam-source-quality__chart-panel {
  text-align: center;
}

.khozam-source-quality__canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 180px;
  height: 180px;
  margin: 0 auto;
}

.khozam-source-quality__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

.khozam-source-quality__center strong {
  font-size: 20px;
  font-weight: 800;
  color: #1a2c1d;
  line-height: 1.1;
}

.khozam-source-quality__center span {
  font-size: 10px;
  font-weight: 700;
  color: #888;
  margin-top: 2px;
}

.khozam-source-quality__chart-caption {
  margin: 10px 0 0;
  font-size: 11px;
  color: #888;
  font-weight: 500;
  line-height: 1.4;
}

.khozam-source-quality__table-wrap {
  min-width: 0;
}

.khozam-source-quality__table-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(52px, 0.75fr));
  gap: 8px;
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.08);
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #7a7168;
  letter-spacing: 0.01em;
}

.khozam-source-quality__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow: auto;
}

.khozam-source-quality__row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(52px, 0.75fr));
  gap: 8px;
  align-items: center;
  padding: 8px 4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.khozam-source-quality__row:hover {
  background: rgba(26, 44, 29, 0.03);
}

.khozam-source-quality__source {
  display: grid;
  grid-template-columns: 18px 8px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.khozam-source-quality__rank {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(26, 44, 29, 0.06);
  color: #6b6170;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.khozam-source-quality__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.khozam-source-quality__name {
  font-size: 12px;
  font-weight: 700;
  color: #2b2420;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khozam-source-quality__metric-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
}

.khozam-source-quality__metric-top strong {
  font-size: 12px;
  font-weight: 800;
  color: #1a2c1d;
}

.khozam-source-quality__metric-top span {
  font-size: 10px;
  font-weight: 700;
  color: #888;
}

.khozam-source-quality__bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.06);
  overflow: hidden;
}

.khozam-source-quality__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #8a7f78;
}

.khozam-source-quality__bar span.is-strong,
.khozam-source-quality__legend-key i.is-strong {
  background: #3d9a5f;
}

.khozam-source-quality__bar span.is-mid,
.khozam-source-quality__legend-key i.is-mid {
  background: #c48a2a;
}

.khozam-source-quality__bar span.is-low,
.khozam-source-quality__legend-key i.is-low {
  background: #b03a2e;
}

.khozam-source-quality__tone.is-strong { color: #2f7a4a; }
.khozam-source-quality__tone.is-mid { color: #9a6b1c; }
.khozam-source-quality__tone.is-low { color: #8f2f26; }

.khozam-source-quality__legend-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
  font-size: 10px;
  font-weight: 600;
  color: #6b6170;
}

.khozam-source-quality__legend-key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.khozam-source-quality__legend-key i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.khozam-source-quality__empty {
  margin: 40px 0;
  text-align: center;
  color: #888;
  font-size: 13px;
}

@media (max-width: 1199px) {
  .khozam-source-quality__insights {
    grid-template-columns: 1fr;
  }

  .khozam-source-quality__body {
    grid-template-columns: 1fr;
  }

  .khozam-source-quality__canvas-wrap {
    max-width: 160px;
    height: 160px;
  }
}

@media (max-width: 991px) {
  .khozam-charts-row > [class*="col-"] {
    margin-bottom: 15px;
  }

  .khozam-call-status__canvas-wrap {
    height: 220px;
  }
}

@media (max-width: 575px) {
  .khozam-call-status,
  .khozam-source-quality {
    padding: 14px;
  }

  .khozam-call-status__mini-summary {
    grid-template-columns: 1fr;
  }

  .khozam-source-quality__table-head,
  .khozam-source-quality__row {
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(44px, 0.7fr));
    gap: 6px;
  }

  .khozam-source-quality__name {
    font-size: 11px;
  }
}


/* ── Leads / App Filters modal (إنشاء فلتر) ── */
.khozam-leads-toolbar__filters app-filters,
.khozam-filters-trigger {
  display: inline-flex;
  vertical-align: middle;
}

.khozam-filters-trigger__btn,
.khozam-leads-toolbar__filters .btn.dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  min-height: 38px;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  background: #fff !important;
  color: #1a2c1d !important;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(26, 44, 29, 0.04);
}

.khozam-filters-trigger__btn:hover,
.khozam-filters-trigger__btn:focus,
.khozam-leads-toolbar__filters .btn.dropdown-toggle:hover {
  border-color: rgba(26, 44, 29, 0.22) !important;
  background: #faf8f5 !important;
}

.khozam-filters-trigger__btn.active,
.khozam-leads-toolbar__filters .btn.dropdown-toggle.active {
  border-color: rgba(61, 154, 95, 0.35) !important;
  background: linear-gradient(180deg, #f4faf6 0%, #eaf5ee 100%) !important;
  color: #1a2c1d !important;
}

.khozam-filters-trigger__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #1a2c1d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.khozam-filters-menu {
  border: 1px solid rgba(26, 44, 29, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(26, 44, 29, 0.12) !important;
  padding: 8px 0 !important;
  overflow: hidden;
}

.khozam-filters-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 8px;
}

.khozam-filters-menu__action {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 12px !important;
  border-radius: 8px;
  color: #1a2c1d !important;
  font-weight: 700;
  font-size: 13px;
}

.khozam-filters-menu__action:hover {
  background: rgba(26, 44, 29, 0.05) !important;
  text-decoration: none !important;
}

.khozam-filters-menu__action i {
  width: 16px;
  text-align: center;
  color: #6b6170;
}

.khozam-filters-menu__empty {
  padding: 18px 16px;
  text-align: center;
  color: #7a7168;
  font-size: 12px;
  line-height: 1.5;
}

.khozam-filters-menu__item > a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 14px !important;
  font-weight: 600;
  color: #2b2420 !important;
}

.khozam-filters-menu__item.active > a,
.khozam-filters-menu__item > a:hover {
  background: rgba(26, 44, 29, 0.05) !important;
}

.khozam-filters-menu__star {
  color: #c48a2a !important;
}

.khozam-filters-modal .modal-dialog,
.khozam-filters-modal__dialog {
  width: min(760px, 94vw);
  margin: 40px auto;
}

.khozam-filters-modal .modal-content,
.khozam-filters-modal__content {
  border: 0;
  border-radius: 16px;
  /* Never clip selectpicker / dropdown menus */
  overflow: visible !important;
  box-shadow: 0 24px 60px rgba(26, 44, 29, 0.18);
}

.khozam-filters-modal .modal-header,
.khozam-filters-modal__header {
  border: 0;
  border-radius: 16px 16px 0 0;
  padding: 18px 22px 14px;
  background: linear-gradient(135deg, #1a2c1d 0%, #2a4030 100%);
  color: #f8f0e0;
}

.khozam-filters-modal__header-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-inline-end: 28px;
}

.khozam-filters-modal__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(248, 240, 224, 0.12);
  color: #f8f0e0;
  flex-shrink: 0;
}

.khozam-filters-modal .modal-title,
.khozam-filters-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #f8f0e0;
}

.khozam-filters-modal__subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(248, 240, 224, 0.72);
}

.khozam-filters-modal__close {
  color: #f8f0e0 !important;
  opacity: 0.8;
  text-shadow: none;
}

.khozam-filters-modal__close:hover {
  opacity: 1;
}

.khozam-filters-modal .modal-body,
.khozam-filters-modal__body {
  overflow: visible;
  padding: 18px 22px 8px;
  background: #f7f4ef;
}

.khozam-filters-modal__section {
  position: relative;
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(26, 44, 29, 0.03);
  overflow: visible;
}

.khozam-filters-modal__section:has(.khozam-rule-picker__btn.is-open) {
  z-index: 20;
}

.khozam-filters-modal__section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.khozam-filters-modal__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #1a2c1d;
  color: #f8f0e0;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.khozam-filters-modal__section-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 800;
  color: #1a2c1d;
}

.khozam-filters-modal__section-hint {
  margin: 0;
  font-size: 12px;
  color: #6b6170;
  line-height: 1.45;
}

.khozam-filters-modal__add-rule .bootstrap-select > .dropdown-toggle,
.khozam-filters-modal__add-rule .btn.dropdown-toggle {
  border-radius: 10px !important;
  border-color: rgba(26, 44, 29, 0.14) !important;
  min-height: 42px;
  font-weight: 600;
}

.khozam-rule-picker {
  position: relative;
  width: 100%;
  z-index: 5;
}

.khozam-rule-picker__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(26, 44, 29, 0.14);
  background: #c4a871;
  color: #1a2c1d;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  text-align: start;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.khozam-rule-picker__btn:hover,
.khozam-rule-picker__btn:focus,
.khozam-rule-picker__btn.is-open {
  background: #b8985f;
  border-color: rgba(26, 44, 29, 0.22);
  color: #1a2c1d;
  outline: none;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.28);
}

.khozam-rule-picker__btn i {
  font-size: 11px;
  opacity: 0.85;
  transition: transform 0.15s ease;
}

.khozam-rule-picker__btn.is-open i {
  transform: rotate(180deg);
}

.khozam-rule-picker__menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: 100%;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(26, 44, 29, 0.12);
  background: #fff;
  box-shadow: 0 18px 40px rgba(26, 44, 29, 0.22);
  z-index: 30;
}

.khozam-filters-modal__add-rule {
  position: relative;
  z-index: 6;
}

.khozam-rule-picker__search {
  margin-bottom: 8px;
  flex-shrink: 0;
}

.khozam-rule-picker__search .form-control {
  height: 36px;
  border-radius: 8px;
  border-color: rgba(26, 44, 29, 0.14);
  box-shadow: none;
}

.khozam-rule-picker__search .form-control:focus {
  border-color: #c4a871;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.2);
}

.khozam-rule-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.khozam-rule-picker__item {
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #1a2c1d;
  line-height: 1.35;
}

.khozam-rule-picker__item:hover,
.khozam-rule-picker__item:focus {
  background: rgba(26, 44, 29, 0.06);
}

.khozam-rule-picker__empty {
  padding: 16px 12px;
  text-align: center;
  color: #6b6170;
  font-size: 12px;
}

.khozam-filters-modal__match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.khozam-filters-modal__match-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b6170;
}

.khozam-filters-modal__match-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: rgba(26, 44, 29, 0.05);
  gap: 2px;
}

.khozam-filters-modal__match-option {
  margin: 0;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #6b6170;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.khozam-filters-modal__match-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.khozam-filters-modal__match-option.is-active {
  background: #fff;
  color: #1a2c1d;
  box-shadow: 0 1px 3px rgba(26, 44, 29, 0.1);
}

.khozam-filters-modal__rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.khozam-filters-modal__empty-rules {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  border: 1px dashed rgba(26, 44, 29, 0.15);
  border-radius: 10px;
  background: #faf8f5;
  color: #7a7168;
  text-align: center;
}

.khozam-filters-modal__empty-rules i {
  font-size: 22px;
  color: #8a7f78;
}

.khozam-filters-modal__empty-rules p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  max-width: 34ch;
  line-height: 1.5;
}

.khozam-filter-rule__card {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.4fr) 36px;
  gap: 10px;
  align-items: center;
  padding: 12px 12px 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: #faf8f5;
}

.khozam-filter-rule__join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  margin: 0 0 6px 8px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(26, 44, 29, 0.08);
  color: #1a2c1d;
  font-size: 11px;
  font-weight: 800;
}

.khozam-filter-rule__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.khozam-filter-rule__label {
  font-size: 13px;
  font-weight: 800;
  color: #1a2c1d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khozam-filter-rule__operator-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #3d6b8c;
  text-decoration: none !important;
}

.khozam-filter-rule__value {
  min-width: 0;
}

.khozam-filter-rule__value .form-control,
.khozam-filter-rule__value .bootstrap-select > .dropdown-toggle {
  border-radius: 8px !important;
  border-color: rgba(26, 44, 29, 0.14) !important;
  min-height: 36px;
}

.khozam-filter-rule__remove {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(176, 58, 46, 0.08);
  color: #b03a2e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.khozam-filter-rule__remove:hover {
  background: rgba(176, 58, 46, 0.16);
}

.khozam-filters-modal__name label {
  font-weight: 700;
  color: #1a2c1d;
}

.khozam-filters-modal__name .form-control {
  border-radius: 10px;
  border-color: rgba(26, 44, 29, 0.14);
  min-height: 42px;
  box-shadow: none;
}

.khozam-filters-modal__name .form-control:focus {
  border-color: rgba(26, 44, 29, 0.35);
  box-shadow: 0 0 0 3px rgba(26, 44, 29, 0.08);
}

.khozam-filters-modal__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.khozam-filters-modal__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: #faf8f5;
  cursor: pointer;
}

.khozam-filters-modal__option input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.khozam-filters-modal__option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.khozam-filters-modal__option-body strong {
  font-size: 13px;
  font-weight: 800;
  color: #1a2c1d;
}

.khozam-filters-modal__option-body em {
  font-style: normal;
  font-size: 12px;
  color: #6b6170;
  line-height: 1.4;
}

.khozam-filters-modal__option-note {
  display: block;
  margin: -2px 0 0 28px;
  font-size: 11px;
  color: #8f2f26;
  line-height: 1.4;
}

.khozam-filters-modal .modal-footer,
.khozam-filters-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
  background: #fff;
}

.khozam-filters-modal__footer-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.khozam-filters-modal__save-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #1a2c1d;
}

.khozam-filters-modal__apply {
  min-height: 36px;
  border-radius: 9px !important;
  border: 0 !important;
  background: #1a2c1d !important;
  font-weight: 800;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.khozam-filters-modal__apply:hover,
.khozam-filters-modal__apply:focus {
  background: #243b2f !important;
}

.khozam-filters-modal__apply:disabled,
.khozam-filters-modal__apply.tw-pointer-events-none {
  opacity: 0.45;
}

.khozam-filters-modal__delete {
  border-radius: 9px !important;
}

/* Fallback for old markup before JS rebuild */
.filters-modal:not(.khozam-filters-modal) .modal-content {
  border-radius: 16px;
  overflow: visible !important;
  border: 0;
  box-shadow: 0 24px 60px rgba(26, 44, 29, 0.18);
}

.filters-modal:not(.khozam-filters-modal) .modal-header {
  background: linear-gradient(135deg, #1a2c1d 0%, #2a4030 100%);
  border: 0;
  color: #f8f0e0;
}

.filters-modal:not(.khozam-filters-modal) .modal-title,
.filters-modal:not(.khozam-filters-modal) .close {
  color: #f8f0e0;
}

.filters-modal:not(.khozam-filters-modal) .modal-body {
  background: #f7f4ef;
  padding: 20px;
}

.filters-modal:not(.khozam-filters-modal) .modal-body > .tw-px-3 {
  background: #fff;
  border-radius: 12px;
  padding: 16px !important;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.filters-modal:not(.khozam-filters-modal) .modal-footer {
  background: #fff;
  border-top: 1px solid rgba(26, 44, 29, 0.08);
}

@media (max-width: 767px) {
  .khozam-filter-rule__card {
    grid-template-columns: minmax(0, 1fr) 34px;
    grid-template-areas:
      "field remove"
      "value value";
  }

  .khozam-filter-rule__field { grid-area: field; }
  .khozam-filter-rule__value { grid-area: value; }
  .khozam-filter-rule__remove { grid-area: remove; }

  .khozam-filters-modal__footer,
  .khozam-filters-modal__footer-main {
    width: 100%;
  }

  .khozam-filters-modal__footer-main {
    justify-content: stretch;
  }

  .khozam-filters-modal__apply {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================
 * Azyan Khozam — Project create/edit form
 * Mirrors khozam-client-form-page: forest hero, cream sections,
 * gold accents, pill tabs, sticky footer actions.
 * ============================================================ */
.khozam-project-form-page .content {
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 28px;
}

.khozam-project-form-page__hero {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-project-form-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: rgba(248, 240, 224, 0.78) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 0.18s ease;
}

.khozam-project-form-page__back:hover,
.khozam-project-form-page__back:focus {
  color: var(--khozam-cream) !important;
}

.khozam-project-form-page__hero-copy {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.khozam-project-form-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-project-form-page__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.khozam-project-form-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.6;
  max-width: 620px;
}

.khozam-project-form-page__panel {
  border-radius: 16px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.08) !important;
  overflow: visible;
  margin-bottom: 0 !important;
}

.khozam-project-form-page__panel-body {
  padding: 0 !important;
  background: #f8f6f2 !important;
}

.khozam-project-form-page__tabs-wrap {
  background: #fff;
  border-bottom: 1px solid rgba(26, 44, 29, 0.08);
  padding: 14px 18px 12px;
  position: relative;
}

.khozam-project-form-page__tabs-wrap.horizontal-scrollable-tabs {
  display: block;
}

.khozam-project-form-page__tabs-wrap .scroller {
  display: none !important;
}

.khozam-project-form-page__tabs-wrap .horizontal-tabs {
  overflow: visible !important;
  width: 100% !important;
  margin: 0 !important;
}

.khozam-project-form-page__tabs {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  margin: 0 !important;
  padding: 6px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  border-radius: 14px !important;
  background: #f8f6f2 !important;
  list-style: none;
  float: none !important;
}

.khozam-project-form-page__tabs > li {
  float: none !important;
  flex: 1 1 180px;
  margin: 0 !important;
  display: flex;
}

.khozam-project-form-page__tabs > li > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  color: rgba(26, 44, 29, 0.62) !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.khozam-project-form-page__tabs > li > a i {
  color: var(--khozam-gold);
  font-size: 14px;
  flex-shrink: 0;
}

.khozam-project-form-page__tabs > li > a:hover,
.khozam-project-form-page__tabs > li > a:focus {
  color: var(--khozam-purple) !important;
  background: rgba(248, 240, 224, 0.75) !important;
  border-color: rgba(196, 168, 113, 0.28) !important;
  text-decoration: none !important;
}

.khozam-project-form-page__tabs > li.active > a,
.khozam-project-form-page__tabs > li.active > a:hover,
.khozam-project-form-page__tabs > li.active > a:focus {
  color: var(--khozam-cream) !important;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid, #243b2f) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(26, 44, 29, 0.18) !important;
}

.khozam-project-form-page__tabs > li.active > a i {
  color: var(--khozam-gold);
}

.khozam-project-form-page__tab-content {
  padding: 18px;
  margin-top: 0 !important;
}

.khozam-project-form-page .khozam-form-section {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.04);
}

.khozam-project-form-page .khozam-form-section:last-child {
  margin-bottom: 0;
}

.khozam-project-form-page .khozam-form-section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-project-form-page .khozam-form-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.14);
  color: var(--khozam-purple);
  font-size: 15px;
  flex-shrink: 0;
}

.khozam-project-form-page .khozam-form-section-title {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
}

.khozam-project-form-page .khozam-form-section-subtitle {
  margin: 4px 0 0;
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  line-height: 1.5;
  display: block;
}

.khozam-project-form-page .form-group label,
.khozam-project-form-page .control-label,
.khozam-project-form-page .khozam-project-form-page__progress > label,
.khozam-project-form-page p.bold {
  color: rgba(26, 44, 29, 0.78);
  font-size: 12px;
  font-weight: 600;
}

.khozam-project-form-page .form-control,
.khozam-project-form-page .bootstrap-select .dropdown-toggle {
  min-height: 42px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.khozam-project-form-page .form-control:focus,
.khozam-project-form-page .bootstrap-select.open .dropdown-toggle,
.khozam-project-form-page .bootstrap-select .dropdown-toggle:focus {
  border-color: rgba(196, 168, 113, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.16) !important;
}

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

.khozam-project-form-page__progress {
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(248, 240, 224, 0.55);
  border: 1px solid rgba(196, 168, 113, 0.2);
}

.khozam-project-form-page__progress > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  width: 100%;
}

.khozam-project-form-page__progress .label_progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--khozam-purple);
  color: var(--khozam-cream);
  font-size: 12px;
  font-weight: 700;
}

.khozam-project-form-page .project_progress_slider {
  margin: 8px 4px 0;
}

.khozam-project-form-page .project_progress_slider .ui-slider-handle {
  border-radius: 50%;
  border: 2px solid var(--khozam-gold) !important;
  background: #fff !important;
  width: 18px;
  height: 18px;
  top: -7px;
  outline: none;
  box-shadow: 0 2px 8px rgba(26, 44, 29, 0.16);
}

.khozam-project-form-page .project_progress_slider.ui-slider-horizontal {
  height: 6px;
  border: none !important;
  border-radius: 999px;
  background: rgba(26, 44, 29, 0.1) !important;
}

.khozam-project-form-page .project_progress_slider .ui-slider-range {
  background: linear-gradient(90deg, var(--khozam-purple) 0%, var(--khozam-gold) 100%) !important;
  border-radius: 999px;
}

.khozam-project-form-page__settings-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.khozam-project-form-page__setting-item {
  margin: 0 !important;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(26, 44, 29, 0.08);
  background: #faf8f5;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.khozam-project-form-page__setting-item:hover {
  border-color: rgba(196, 168, 113, 0.35);
  background: rgba(248, 240, 224, 0.55);
}

.khozam-project-form-page__setting-item label {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.45;
  color: rgba(26, 44, 29, 0.82) !important;
}

.khozam-project-form-page__notify {
  margin-bottom: 0;
}

.khozam-project-form-page__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px !important;
  background: #fff !important;
  border-top: 1px solid rgba(26, 44, 29, 0.08) !important;
}

.khozam-project-form-page__footer .khozam-page-toolbar__btn {
  min-width: 132px;
}

.khozam-project-form-page__cancel {
  margin-inline-end: auto;
}

.khozam-project-form-page .alert {
  border-radius: 10px;
}

.khozam-project-form-page .hr-panel-separator {
  display: none;
}

@media (max-width: 767px) {
  .khozam-project-form-page .content {
    padding-inline: 10px;
  }

  .khozam-project-form-page__hero {
    padding: 16px;
  }

  .khozam-project-form-page__hero-copy {
    flex-direction: column;
    gap: 12px;
  }

  .khozam-project-form-page__title {
    font-size: 18px;
  }

  .khozam-project-form-page__tabs-wrap {
    padding: 12px 10px 10px;
  }

  .khozam-project-form-page__tabs {
    gap: 4px;
    padding: 4px !important;
  }

  .khozam-project-form-page__tabs > li {
    flex: 1 1 100%;
  }

  .khozam-project-form-page__tabs > li > a {
    padding: 11px 12px !important;
    font-size: 12px;
  }

  .khozam-project-form-page__tab-content {
    padding: 12px;
  }

  .khozam-project-form-page .khozam-form-section {
    padding: 14px;
  }

  .khozam-project-form-page__settings-list {
    grid-template-columns: 1fr;
  }

  .khozam-project-form-page__footer {
    justify-content: stretch;
  }

  .khozam-project-form-page__footer .khozam-page-toolbar__btn {
    width: 100%;
    min-width: 0;
  }

  .khozam-project-form-page__cancel {
    margin-inline-end: 0;
  }
}

/* ============================================================
 * Azyan Khozam — Expense create/edit form
 * Receipt-first flow, sectioned layout, gold dropzone accent.
 * ============================================================ */
.khozam-expense-form-page .content {
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 28px;
}

.khozam-expense-form-page form#expense-form.dropzone {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: 100%;
  display: block;
  float: none;
  clear: both;
}

.khozam-expense-form-page__hero {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--khozam-purple) 0%, var(--khozam-purple-mid) 100%);
  border: 1px solid rgba(196, 168, 113, 0.2);
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.12);
}

.khozam-expense-form-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: rgba(248, 240, 224, 0.78) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 0.18s ease;
}

.khozam-expense-form-page__back:hover,
.khozam-expense-form-page__back:focus {
  color: var(--khozam-cream) !important;
}

.khozam-expense-form-page__hero-copy {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.khozam-expense-form-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 240, 224, 0.12);
  color: var(--khozam-gold);
  font-size: 22px;
  flex-shrink: 0;
}

.khozam-expense-form-page__title {
  margin: 0;
  color: var(--khozam-cream);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.khozam-expense-form-page__subtitle {
  margin: 6px 0 0;
  color: rgba(248, 240, 224, 0.72);
  font-size: 13px;
  line-height: 1.6;
  max-width: 640px;
}

.khozam-expense-form-page__panel {
  border-radius: 16px !important;
  border: 1px solid rgba(26, 44, 29, 0.08) !important;
  box-shadow: 0 10px 28px rgba(26, 44, 29, 0.08) !important;
  overflow: visible;
  margin-bottom: 0 !important;
}

.khozam-expense-form-page__panel-body {
  padding: 18px !important;
  background: #f8f6f2 !important;
}

.khozam-expense-form-page__alert {
  margin: 0 0 16px;
  border-radius: 12px;
}

.khozam-expense-form-page .khozam-form-section {
  background: #fff;
  border: 1px solid rgba(26, 44, 29, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(26, 44, 29, 0.04);
}

.khozam-expense-form-page .khozam-form-section:last-child {
  margin-bottom: 0;
}

.khozam-expense-form-page .khozam-form-section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(26, 44, 29, 0.06);
}

.khozam-expense-form-page .khozam-form-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(196, 168, 113, 0.14);
  color: var(--khozam-purple);
  font-size: 15px;
  flex-shrink: 0;
}

.khozam-expense-form-page .khozam-form-section-title {
  margin: 0;
  color: var(--khozam-purple);
  font-size: 15px;
  font-weight: 700;
}

.khozam-expense-form-page .khozam-form-section-subtitle {
  margin: 4px 0 0;
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  line-height: 1.5;
  display: block;
}

.khozam-expense-form-page .form-group label,
.khozam-expense-form-page .control-label {
  color: rgba(26, 44, 29, 0.78);
  font-size: 12px;
  font-weight: 600;
}

.khozam-expense-form-page .form-control,
.khozam-expense-form-page .bootstrap-select .dropdown-toggle {
  min-height: 42px;
  border: 1px solid rgba(26, 44, 29, 0.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.khozam-expense-form-page .form-control:focus,
.khozam-expense-form-page .bootstrap-select.open .dropdown-toggle,
.khozam-expense-form-page .bootstrap-select .dropdown-toggle:focus {
  border-color: rgba(196, 168, 113, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 113, 0.16) !important;
}

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

.khozam-expense-form-page__label-hint {
  position: relative;
}

.khozam-expense-form-page__label-hint > .fa-circle-question {
  position: absolute;
  inset-inline-end: 0;
  top: 2px;
  z-index: 2;
  color: rgba(26, 44, 29, 0.45);
  cursor: help;
}

.khozam-expense-form-page__dropzone {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 168px;
  margin: 0 !important;
  padding: 28px 20px !important;
  border-radius: 14px !important;
  border: 2px dashed rgba(26, 44, 29, 0.16) !important;
  background: linear-gradient(180deg, #fff 0%, rgba(248, 240, 224, 0.45) 100%) !important;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.khozam-expense-form-page__dropzone:hover,
.khozam-expense-form-page__dropzone.dz-drag-hover {
  border-color: rgba(196, 168, 113, 0.7) !important;
  background: rgba(248, 240, 224, 0.55) !important;
  box-shadow: 0 8px 22px rgba(26, 44, 29, 0.08);
  transform: translateY(-1px);
}

.khozam-expense-form-page__dropzone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(196, 168, 113, 0.16);
  color: var(--khozam-purple);
  font-size: 22px;
}

.khozam-expense-form-page__dropzone-title {
  display: block;
  color: var(--khozam-purple);
  font-size: 14px;
  font-weight: 700;
}

.khozam-expense-form-page__dropzone-hint {
  display: block;
  color: rgba(26, 44, 29, 0.55);
  font-size: 12px;
  line-height: 1.5;
}

.khozam-expense-form-page .dropzone-previews {
  margin-top: 12px;
}

.khozam-expense-form-page__attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(248, 240, 224, 0.55);
  border: 1px solid rgba(196, 168, 113, 0.28);
}

.khozam-expense-form-page__attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--khozam-purple);
  font-weight: 600;
}

.khozam-expense-form-page__attachment-file a {
  color: var(--khozam-purple) !important;
  text-decoration: none !important;
  word-break: break-all;
}

.khozam-expense-form-page__attachment-file a:hover {
  color: var(--khozam-gold-hover, #d4b87f) !important;
}

.khozam-expense-form-page__attachment-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.08);
  flex-shrink: 0;
}

.khozam-expense-form-page__billable {
  margin: 4px 0 0 !important;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(248, 240, 224, 0.45);
  border: 1px solid rgba(196, 168, 113, 0.22);
}

.khozam-expense-form-page__tax-alert {
  border-radius: 12px;
  margin-bottom: 16px;
}

.khozam-expense-form-page__recurring-options {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.khozam-expense-form-page__recurring-options .checkbox {
  margin: 0 !important;
  padding: 12px 14px;
  border-radius: 12px;
  background: #faf8f5;
  border: 1px solid rgba(26, 44, 29, 0.08);
}

.khozam-expense-form-page__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px !important;
  background: #fff !important;
  border-top: 1px solid rgba(26, 44, 29, 0.08) !important;
}

.khozam-expense-form-page__footer .khozam-page-toolbar__btn {
  min-width: 132px;
}

.khozam-expense-form-page__cancel {
  margin-inline-end: auto;
}

.khozam-expense-form-page .input-group-btn .btn {
  min-height: 42px;
  border-radius: 0 10px 10px 0 !important;
  border-color: rgba(26, 44, 29, 0.12) !important;
}

[dir="rtl"] .khozam-expense-form-page .input-group-btn .btn {
  border-radius: 10px 0 0 10px !important;
}

.khozam-expense-form-page .input-group-addon {
  border-radius: 0 10px 10px 0;
  border-color: rgba(26, 44, 29, 0.12);
  background: #faf8f5;
}

[dir="rtl"] .khozam-expense-form-page .input-group-addon {
  border-radius: 10px 0 0 10px;
}

@media (max-width: 767px) {
  .khozam-expense-form-page .content {
    padding-inline: 10px;
  }

  .khozam-expense-form-page__hero {
    padding: 16px;
  }

  .khozam-expense-form-page__hero-copy {
    flex-direction: column;
    gap: 12px;
  }

  .khozam-expense-form-page__title {
    font-size: 18px;
  }

  .khozam-expense-form-page__panel-body {
    padding: 12px !important;
  }

  .khozam-expense-form-page .khozam-form-section {
    padding: 14px;
  }

  .khozam-expense-form-page__footer {
    justify-content: stretch;
  }

  .khozam-expense-form-page__footer .khozam-page-toolbar__btn {
    width: 100%;
    min-width: 0;
  }

  .khozam-expense-form-page__cancel {
    margin-inline-end: 0;
  }
}