/* ------------------------------------------------------------------
 * LOCAL DEVELOPMENT SHIM -- not the licensed Techzaa "Lahomes" theme.
 *
 * The shipped assets/ folder was empty, so this file recreates the layout
 * rules the markup depends on: .wrapper > .topbar + .main-nav + .page-content,
 * the collapsing sidebar menu, and the topbar dropdowns. Bootstrap 5 (loaded
 * from vendor.min.css) supplies every component class; this only adds the
 * theme-specific structural CSS Bootstrap has no equivalent for.
 *
 * Replace assets/ with the genuine theme files for a pixel-exact match.
 * ------------------------------------------------------------------ */

:root {
  --ct-sidebar-width: 260px;
  --ct-sidebar-width-sm: 70px;
  --ct-topbar-height: 70px;
  --ct-sidebar-bg: #ffffff;
  --ct-sidebar-border: #e9ebec;
  --ct-sidebar-item: #5d7186;
  --ct-sidebar-item-hover: #3e60d5;
  --ct-topbar-bg: #ffffff;
  --ct-body-bg: #f5f6fa;
  --ct-heading: #313a46;
}

[data-bs-theme="dark"] {
  --ct-sidebar-bg: #262d34;
  --ct-sidebar-border: #333c46;
  --ct-sidebar-item: #a5b1bd;
  --ct-topbar-bg: #262d34;
  --ct-body-bg: #1c2127;
  --ct-heading: #e3eaef;
}

html { overflow-x: hidden; }

body {
  background-color: var(--ct-body-bg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  color: #5d7186;
  overflow-x: hidden;
}

[data-bs-theme="dark"] body { color: #a5b1bd; }

/* ---------------- Wrapper ---------------- */
.wrapper { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------------- Topbar ---------------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ct-topbar-height);
  background: var(--ct-topbar-bg);
  border-bottom: 1px solid var(--ct-sidebar-border);
  z-index: 1002;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
}
.topbar > .container-fluid,
.topbar .navbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: .5rem;
}
/* The logo lives inside the topbar on this template; pin it over the sidebar. */
.topbar .logo-box {
  width: var(--ct-sidebar-width);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--ct-topbar-height);
}
.topbar-item { display: flex; align-items: center; }
.topbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 .5rem;
  border: 0;
  background: transparent;
  color: var(--ct-sidebar-item);
  border-radius: .375rem;
}
.topbar-button:hover { background: rgba(62, 96, 213, .08); color: var(--ct-sidebar-item-hover); }
/* Notification / profile dropdowns need a sane width once unstyled. */
.topbar .dropdown-menu { min-width: 280px; }
.topbar .dropdown-menu.dropdown-menu-end { right: 0; left: auto; }

/* App search in the topbar */
.app-search { position: relative; }
.app-search .form-control { padding-left: 2.25rem; min-width: 240px; background-color: var(--ct-body-bg); }
.app-search .search-widget-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ct-sidebar-item);
}

/* ---------------- Sidebar ---------------- */
.main-nav {
  position: fixed;
  top: var(--ct-topbar-height);
  bottom: 0;
  left: 0;
  width: var(--ct-sidebar-width);
  background: var(--ct-sidebar-bg);
  border-right: 1px solid var(--ct-sidebar-border);
  z-index: 1001;
  overflow-y: auto;
  padding-bottom: 2rem;
}
.main-nav .logo-box { display: none; } /* logo is rendered in the topbar */

#navbar-nav, .main-nav .navbar-nav {
  list-style: none;
  padding: .5rem 0 0;
  margin: 0;
  display: block;
}
.main-nav .menu-title {
  padding: 1rem 1.5rem .375rem;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  color: #98a6ad;
}
.main-nav .nav-item { display: block; }
.main-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem 1.5rem;
  color: var(--ct-sidebar-item);
  font-weight: 500;
  text-decoration: none;
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active { color: var(--ct-sidebar-item-hover); }
.main-nav .nav-link .menu-icon,
.main-nav .nav-link iconify-icon { font-size: 1.125rem; flex: 0 0 auto; }

/* Collapse arrow: Bootstrap toggles aria-expanded, so drive the caret off it. */
.main-nav .nav-link.menu-arrow { position: relative; padding-right: 2.25rem; }
.main-nav .nav-link.menu-arrow::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: .45rem; height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(-45deg);
  transition: transform .15s ease;
}
.main-nav .nav-link.menu-arrow[aria-expanded="true"]::after {
  transform: translateY(-30%) rotate(45deg);
}

/* Sub-menu */
.main-nav .sub-navbar-nav, .main-nav .nav.sub-navbar-nav {
  list-style: none;
  padding: 0 0 .25rem;
  margin: 0;
  display: block;
}
.main-nav .sub-nav-item { display: block; }
.main-nav .sub-nav-link {
  display: block;
  padding: .4rem 1.5rem .4rem 3.25rem;
  color: var(--ct-sidebar-item);
  font-size: .8125rem;
  text-decoration: none;
}
.main-nav .sub-nav-link:hover,
.main-nav .sub-nav-link.active { color: var(--ct-sidebar-item-hover); }

/* ---------------- Page content ---------------- */
.page-content {
  margin-left: var(--ct-sidebar-width);
  margin-top: var(--ct-topbar-height);
  padding: 1.5rem .75rem 0;
  flex: 1 1 auto;
  min-width: 0;
}
.page-title-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.page-title-box h4 { color: var(--ct-heading); }
.page-title-box .breadcrumb { margin: 0; background: transparent; padding: 0; }

/* Footer sits inside the content column, after .page-content */
.footer {
  margin-left: var(--ct-sidebar-width);
  padding: 1.25rem .75rem;
  color: #98a6ad;
  font-size: .8125rem;
}

/* ---------------- Cards / tables ---------------- */
.card {
  background: var(--ct-topbar-bg);
  border: 1px solid var(--ct-sidebar-border);
  border-radius: .5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 2px rgba(56, 65, 74, .06);
}
.card-header { background: transparent; border-bottom: 1px solid var(--ct-sidebar-border); padding: 1rem 1.25rem; }
.card-body { padding: 1.25rem; }
.card-title { color: var(--ct-heading); font-size: .9375rem; font-weight: 600; margin-bottom: 0; }

/* Grid.js lives inside .card-body; keep wide lead tables scrollable so the
   page itself never scrolls sideways. */
.gridjs-wrapper { overflow-x: auto; }
.gridjs-table { width: 100%; }
.gridjs-td, .gridjs-th { white-space: nowrap; }

/* ---------------- Offcanvas panels ---------------- */
/* Lead detail / re-assign panels are wider than Bootstrap's default.
   Only widen the panel while it is actually shown: a hidden .offcanvas-end is
   parked at translateX(100%), and giving it a width here pushed the document
   scroll width past the viewport, so every page with one scrolled sideways. */
.offcanvas.offcanvas-end.showing,
.offcanvas.offcanvas-end.show { width: 420px; }
@media (max-width: 575.98px) {
  .offcanvas.offcanvas-end.showing,
  .offcanvas.offcanvas-end.show { width: 100%; }
}

/* ---------------- Avatars & logos ---------------- */
.avatar-xs { height: 1.5rem; width: 1.5rem; }
.avatar-sm { height: 3rem; width: 3rem; }
.avatar-md { height: 4.5rem; width: 4.5rem; }
.avatar-lg { height: 6rem; width: 6rem; }
.logo-lg img, .logo-sm img { max-height: 28px; width: auto; }
.logo-light { display: none; }
[data-bs-theme="dark"] .logo-light { display: inline-block; }
[data-bs-theme="dark"] .logo-dark { display: none; }

/* Font-size helpers the markup uses heavily */
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-24 { font-size: 24px !important; }

/* ---------------- Sidebar collapsed / mobile ---------------- */
html[data-sidenav-size="condensed"] .main-nav { width: var(--ct-sidebar-width-sm); }
html[data-sidenav-size="condensed"] .page-content,
html[data-sidenav-size="condensed"] .footer { margin-left: var(--ct-sidebar-width-sm); }
html[data-sidenav-size="condensed"] .main-nav .menu-title,
html[data-sidenav-size="condensed"] .main-nav .nav-link span,
html[data-sidenav-size="condensed"] .main-nav .sub-navbar-nav { display: none; }

@media (max-width: 991.98px) {
  .main-nav { transform: translateX(-100%); transition: transform .2s ease; }
  html[data-sidenav-open="true"] .main-nav { transform: translateX(0); }
  .page-content, .footer { margin-left: 0; }
  .topbar .logo-box { width: auto; margin-right: .5rem; }
  .app-search .form-control { min-width: 0; }
}

/* ---------------- Sidebar extras ---------------- */
/* The template's "expand sidebar" button that sits above the menu. It is only
   meaningful in the condensed layout, so hide it in the default one instead of
   letting it float over the content unstyled. */
.button-sm-hover {
  display: none;
  border: 0;
  background: transparent;
  color: var(--ct-sidebar-item);
  padding: .5rem 1.5rem;
}
html[data-sidenav-size="condensed"] .button-sm-hover {
  display: inline-flex;
  align-items: center;
}
.button-sm-hover:hover { color: var(--ct-sidebar-item-hover); }

/* simplebar is not bundled in this shim; make its containers scroll natively
   so the menu and dropdown lists are still reachable. */
[data-simplebar] { overflow-y: auto; }
.main-nav .scrollbar { height: calc(100vh - var(--ct-topbar-height)); }

/* The markup's sidebar/topbar logo blocks are commented out upstream, so give
   the topbar a text brand instead of leaving dead space over the sidebar. */
.topbar .logo-box::before {
  content: "CRM VISTAAR";
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--ct-sidebar-item-hover);
  white-space: nowrap;
}
@media (max-width: 575.98px) { .topbar .logo-box::before { content: "CRM"; } }

/* ---------------- Grid.js in dark mode ---------------- */
/* The Grid.js mermaid theme is light-only, so its table kept a white surface
   under dark text. Re-point its CSS variables (and the row highlight the app
   adds for New leads) at the dark palette. */
[data-bs-theme="dark"] {
  --gridjs-bg-color: #262d34;
  --gridjs-text-color: #a5b1bd;
  --gridjs-border-color: #333c46;
}
[data-bs-theme="dark"] .gridjs-container,
[data-bs-theme="dark"] .gridjs-wrapper,
[data-bs-theme="dark"] .gridjs-table,
[data-bs-theme="dark"] .gridjs-footer,
[data-bs-theme="dark"] .gridjs-head { color: var(--gridjs-text-color); }
[data-bs-theme="dark"] .gridjs-wrapper,
[data-bs-theme="dark"] .gridjs-footer { background-color: var(--gridjs-bg-color); border-color: var(--gridjs-border-color); }
[data-bs-theme="dark"] .gridjs-th,
[data-bs-theme="dark"] .gridjs-td {
  background-color: var(--gridjs-bg-color);
  color: var(--gridjs-text-color);
  border-color: var(--gridjs-border-color);
}
[data-bs-theme="dark"] .gridjs-tr:hover .gridjs-td { background-color: #2e3640; }
[data-bs-theme="dark"] .gridjs-input,
[data-bs-theme="dark"] .gridjs-search-input {
  background-color: #1c2127;
  color: var(--gridjs-text-color);
  border-color: var(--gridjs-border-color);
}
[data-bs-theme="dark"] .gridjs-pagination,
[data-bs-theme="dark"] .gridjs-pagination button {
  color: var(--gridjs-text-color);
  background-color: var(--gridjs-bg-color);
  border-color: var(--gridjs-border-color);
}
/* dashboard-manager.php tints New-lead rows light green via a `tr.lead-new`
   rule marked !important in its own inline <style>. Match that specificity so
   the tint becomes a dark-friendly green instead of a white-on-white row. */
[data-bs-theme="dark"] tr.lead-new > td { background-color: #24352c !important; }
[data-bs-theme="dark"] tr.lead-new:hover > td { background-color: #2c4034 !important; }
[data-bs-theme="dark"] tr.lead-new > td,
[data-bs-theme="dark"] tr.lead-new > td a { color: #d7e3da !important; }