/*
 * Dr Morepen Labs brand override — loaded after vendor/css/core.css and css/demo.css.
 * Vuexy's theme is CSS-variable driven (--bs-primary and friends), so overriding these
 * here re-themes buttons, links, active menu state, badges, etc. without touching core.css.
 */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --bs-primary: #f97316;
  --bs-primary-rgb: 249, 115, 22;
  --bs-primary-text-emphasis: #7c2d12;
  --bs-primary-bg-subtle: #ffedd5;
  --bs-primary-border-subtle: #fed7aa;
  --bs-auth-basic-inner-max-width: 380px;
}

.text-primary {
  color: #f97316 !important;
}

.bg-primary {
  background-color: #f97316 !important;
}

.btn-primary {
  border-color: #f97316;
  background-color: #f97316;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  border-color: #ea660c;
  background-color: #ea660c;
}

.app-brand-logo img {
  max-height: 56px;
  max-width: 200px;
  width: auto;
}

/* Sidebar menu icons: orange by default (including parent toggle groups like "Content" —
   they never get a solid background, so a white icon there would be invisible). The exact
   current-page leaf link *does* get Vuexy's solid orange gradient background, so its icon
   switches to white to stay legible against it. */
.menu-icon {
  font-size: 1.25rem;
}

.menu-inner .menu-item .menu-link .menu-icon {
  color: #f97316 !important;
}

.menu-inner .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
  color: var(--bs-menu-active-color, #fff) !important;
}

.authentication-inner .app-brand-logo img {
  max-height: 64px;
  width: auto;
}

/* Hide the scrollbar on horizontally scrollable tab navs (and any .overflow-x-auto
   opt-in) while keeping scroll/swipe functionality intact. */
.nav-tabs.overflow-x-auto,
.overflow-x-auto {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / legacy Edge */
}

.nav-tabs.overflow-x-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
  display: none;                /* Chrome / Edge / Safari */
}

/* The bundled flatpickr build ships with no z-index at all on .flatpickr-calendar, so it
   falls back to z-index:auto and can render behind cards/tab-content/sticky navbar
   depending on DOM stacking order. Force it above everything (Bootstrap modals top out
   around 1060, select2 dropdowns around 1056) so the calendar is always fully visible. */
.flatpickr-calendar {
  z-index: 1090 !important;
}

/* Section-card headers (multi-card forms like Leads-create, Ad Integrations): a compact
   colored icon badge + title. Vuexy's default .card-header padding is 1.5rem top+bottom,
   sized for headers with actions/buttons — for a one-line icon+title label that reads as
   too much empty space and makes the card-body below it feel abrupt by comparison. Trim
   just the vertical padding; horizontal stays at the default 1.5rem. */
.section-card-header {
  padding-block: .875rem;
}

/* Vendor core.css sets .layout-navbar .navbar-nav-right{flex-basis:100%} unconditionally,
   relying on the title block shrinking to fake right-alignment. That collides with the
   centered .navbar-page-center column (its flex-grow-1 sibling gets squeezed to 0 width),
   so give the right block its natural content-based size instead. */
.layout-navbar .navbar-nav-right {
  flex-basis: auto;
}

/* Bootstrap's .container-xxl caps the navbar at a fixed max-width and centers it, leaving
   visible empty gutters on wide screens instead of the navbar filling the content area. */
.layout-navbar.navbar-detached.container-xxl {
  max-width: 100%;
}

/* Same story for every Bootstrap container size class in the main content area — core.css
   caps them at a fixed pixel max-width per breakpoint (e.g. 1440px at >=1400px), which leaves
   dead gutters on wide monitors instead of the page content using the full available width. */
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
  max-width: 100%;
}

/* Compact stat pills — a slim inline alternative to full x-stat-card tiles, used on listing
   pages (Leads, Orders) directly under the page header instead of a whole extra row of
   large cards. */
.stat-pill {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .875rem;
  border-radius: .5rem;
  background-color: var(--bs-paper-bg);
  border: 1px solid var(--bs-border-color);
  font-size: .8125rem;
}

.stat-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .375rem;
  font-size: .9rem;
}

/* Rotates the collapse-toggle chevron on any Bootstrap collapse trigger button that has
   this class, based on the trigger's own aria-expanded state (kept in sync by Bootstrap). */
.filters-toggle-chevron {
  transition: transform .15s ease;
}

[aria-expanded="false"] > .filters-toggle-chevron {
  transform: rotate(-90deg);
}

/* Leads table: status badges are user-authored text of very different lengths ("Booked" vs
   "Recollection (Rejected by Phlebo)") — a fixed width keeps the column visually aligned
   instead of every row's badge being a different width. Long outliers ellipsize; the full
   name is still available via the title attribute and the row's quick-view/edit. */
.status-badge-fixed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.5rem;
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-toggle-btn {
  min-width: 8rem;
}

/* Bordered, contained option rows for the leads table's status/owner dropdowns, replacing
   Bootstrap's flush hover-only list items with a searchable, chip-like picker. */
.option-dropdown-menu {
  min-width: 15rem;
  max-width: 17rem;
}

.option-list {
  max-height: 15rem;
  overflow-y: auto;
}

.option-chip {
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  margin-bottom: .25rem;
  padding: .375rem .625rem !important;
}

.option-chip:last-child {
  margin-bottom: 0;
}

.option-chip:hover,
.option-chip.active {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
  color: var(--bs-primary-text-emphasis);
}

/* Leads table row actions: solid, color-coded per action (info=quick view, success=full view,
   warning=edit, danger=delete) so they're distinguishable at a glance — Bootstrap's
   btn-warning defaults to dark text for contrast, but this row wants every icon a uniform
   white regardless of variant. */
.action-icon-btn {
  color: #fff !important;
}

/* Quick-view panel Call/WhatsApp buttons: plain icon-only buttons read as a barely-visible dot
   against a colored background — give each a label and split the row 50/50 so they read as
   two clear, equally-weighted actions instead of decoration. */
.quickview-contact-btn {
  flex: 1 1 50%;
  color: #fff !important;
}

/* Leads / orders table: the select checkbox and Actions columns stay pinned to the left edge
   while the rest of the table scrolls horizontally underneath. */
.leads-table .col-select,
.orders-table .col-select {
  width: 2.5rem;
  min-width: 2.5rem;
}

.leads-table .col-actions,
.orders-table .col-actions {
  width: 10.3125rem;
  min-width: 10.3125rem;
}

.leads-table .sticky-col,
.orders-table .sticky-col {
  position: sticky;
  z-index: 2;
  background-color: var(--bs-paper-bg);
}

.leads-table thead .sticky-col,
.orders-table thead .sticky-col {
  z-index: 3;
}

.leads-table.table-hover tbody tr:hover .sticky-col,
.orders-table.table-hover tbody tr:hover .sticky-col {
  background-color: var(--bs-paper-bg);
  background-image: linear-gradient(var(--bs-table-hover-bg), var(--bs-table-hover-bg));
}

/* Page title/breadcrumb, injected into the top navbar strip via @stack('navbar-header') from
   <x-page-header> — see components/page-header.blade.php. Keeps the navbar at its normal
   height regardless of breadcrumb length. Stat-pills and action buttons render in the content
   area instead (a fixed-height, flex-nowrap navbar has no safe room for variable-width content
   competing against the avatar — tried it, it kept breaking one of the two). */
.navbar-page-header {
  min-width: 0;
}

.navbar-page-header .breadcrumb-item + .breadcrumb-item::before {
  padding-inline-end: .25rem;
}

/* Thin, light-orange scrollbars app-wide (native + perfect-scrollbar, used on the sidebar
   menu). Chrome/Edge/Safari via ::-webkit-scrollbar, Firefox via the standard
   scrollbar-width/scrollbar-color properties. */
* {
  scrollbar-width: thin;
  scrollbar-color: #fdba74 transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #fdba74;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #f97316;
}

.ps__thumb-y,
.ps__thumb-x {
  background-color: #fdba74 !important;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y.ps--clicking > .ps__thumb-y,
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x.ps--clicking > .ps__thumb-x {
  background-color: #f97316 !important;
}

/* Lead detail page: Activity Log list scrolls internally past a reasonable height instead
   of pushing the rest of the page down indefinitely for leads with a long history. */
.activity-scroll-list {
  max-height: 32rem;
  overflow-y: auto;
}

/* Leads table remarks modal: previous remarks scroll inside a white panel. */
.lead-remarks-history {
  background-color: #fff;
  max-height: 14rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.lead-remarks-history-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bs-border-color);
  line-height: 1.45;
}

.lead-remarks-history-item:first-child {
  padding-top: 0;
}

.lead-remarks-history-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.lead-remarks-history::-webkit-scrollbar {
  width: 6px;
}

.lead-remarks-history::-webkit-scrollbar-track {
  background: transparent;
}

.lead-remarks-history::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
}

.lead-remarks-history::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.lead-status-cell {
  min-width: 7.5rem;
}

.lead-status-cell .lead-status-loading {
  z-index: 5;
  min-height: 1.75rem;
}

tr.lead-row-processing {
  opacity: 0.92;
}

/* Lead detail page: shimmer placeholders while status/ownership fields load. */
.skeleton-line {
  border-radius: 0.375rem;
  background: linear-gradient(
    90deg,
    rgba(var(--bs-secondary-rgb), 0.08) 25%,
    rgba(var(--bs-secondary-rgb), 0.16) 50%,
    rgba(var(--bs-secondary-rgb), 0.08) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

.skeleton-label {
  height: 0.75rem;
  width: 38%;
  max-width: 8rem;
}

.skeleton-input {
  height: 2.375rem;
  width: 100%;
}

.skeleton-btn {
  height: 2.375rem;
  width: 100%;
  border-radius: 0.375rem;
}

.skeleton-badge {
  height: 1.375rem;
  width: 5rem;
  border-radius: 999px;
}

.skeleton-text {
  height: 0.875rem;
  width: 72%;
}

.skeleton-text-sm {
  height: 0.75rem;
  width: 48%;
}

.skeleton-row {
  height: 3.25rem;
  width: 100%;
  border-radius: 0.5rem;
}

.skeleton-block {
  height: 5.5rem;
  width: 100%;
  border-radius: 0.5rem;
}

.skeleton-total-line {
  height: 0.875rem;
  width: 6rem;
  margin-left: auto;
}

.skeleton-activity-item {
  height: 3.75rem;
  width: 100%;
  border-radius: 0.375rem;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Activity Log filter pills: bordered white "buttons" (not Vuexy's default flush/transparent
   pill look) so the three filters read as a proper full-width segmented control, with the
   active one filled solid orange. */
.activity-filter-pills .nav-link {
  background-color: var(--bs-paper-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

.activity-filter-pills .nav-link.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary);
  color: #fff !important;
}