/* ============================================================
   GLOBAL REUSABLE COMPONENTS
   Project-wide, theme-agnostic UI primitives.
   Loaded on every page via layouts/sections/styles.blade.php.
   Prefix: .g-  (global) to avoid clashing with theme classes.
   ============================================================ */

/* ------------------------------------------------------------
   Button (Figma: Button / Primary / Size 44)
   - height: fixed 44px
   - radius: 100px (full pill)
   - icon left, gap 8px
   - padding: left 16px, right 20px (icon-left variant)
   Usage:
     <a class="g-btn g-btn-primary g-btn--icon-left">
       <i class="ti ti-download"></i> Download
     </a>
   ------------------------------------------------------------ */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 100px;
  font-family: 'Inter', 'Public Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.g-btn i,
.g-btn svg {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.g-btn:focus-visible {
  outline: 2px solid rgba(89, 34, 198, 0.45);
  outline-offset: 2px;
}

.g-btn:active {
  transform: scale(0.98);
}

.g-btn:disabled,
.g-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Icon placement → asymmetric padding per spec (L16 / R20) */
.g-btn--icon-left {
  padding-left: 16px;
  padding-right: 20px;
}
.g-btn--icon-right {
  flex-direction: row-reverse;
  padding-left: 20px;
  padding-right: 16px;
}

/* Size variants (default is 44) */
.g-btn--sm {
  height: 36px;
  font-size: 13px;
  padding: 0 16px;
}
.g-btn--lg {
  height: 52px;
  font-size: 15px;
  padding: 0 26px;
}

/* Full-width helper (handy inside cards / mobile) */
.g-btn--block {
  display: flex;
  width: 100%;
}

/* ---- Variants -------------------------------------------------- */

/* Primary — solid black (Figma default) */
.g-btn-primary {
  background: #000000;
  color: #ffffff !important;
}
.g-btn-primary:hover {
  background: #1f1f1f;
  color: #ffffff !important;
}

/* ------------------------------------------------------------
   Download button — self-contained global class
   (Figma: Button / Primary / Default — 113×44 Hug)
   fit-content width · 44px height · radius 100px · padding L16 R20 ·
   gap 8px · #000 bg · shadow 0 4.4 8.8 rgba(0,0,0,.11)
   Single class, no need to combine with anything:
     <button class="btn-download">Download</button>
   .g-btn-download kept as an alias for existing markup.
   ------------------------------------------------------------ */
.btn-download,
.g-btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  height: 44px;
  padding: 0 20px 0 16px;
  border: none;
  border-radius: 999px;
  /* Glassy 3D black pill: sharp top highlight + reflection over a strong dark-to-black gradient */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.28) 26%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #3a3a3a 0%, #0a0a0a 50%, #000000 100%);
  background-color: #000000;
  color: #ffffff !important;
  font-family: 'Inter', 'Public Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;


}
.btn-download:hover,
.g-btn-download:hover {
  filter: brightness(1.12);
  color: #ffffff !important;
  
}
.btn-download:active,
.g-btn-download:active {
  transform: scale(0.98);
}
.btn-download:focus-visible,
.g-btn-download:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.45);
  outline-offset: 2px;
}
.btn-download i,
.btn-download svg,
.g-btn-download i,
.g-btn-download svg {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.btn-download:disabled,
.btn-download.disabled,
.g-btn-download:disabled,
.g-btn-download.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Mobile: full-width download button */
@media (max-width: 480px) {
  .btn-download,
  .g-btn-download {
    width: 100%;
    justify-content: center;
  }
}

/* Violet — brand accent */
.g-btn-violet {
  background: #5922c6;
  color: #ffffff !important;
}
.g-btn-violet:hover {
  background: #4a1ca6;
  color: #ffffff !important;
}

/* Outline — bordered, transparent fill */
.g-btn-outline {
  background: transparent;
  color: #000000 !important;
  box-shadow: inset 0 0 0 1px #d8d8de;
}
.g-btn-outline:hover {
  background: #f5f5f7;
  color: #000000 !important;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .g-btn--block-sm {
    display: flex;
    width: 100%;
  }
}

/* ------------------------------------------------------------
   Waves ripple safeguard
   ------------------------------------------------------------
   The node-waves plugin injects a `.waves-ripple` overlay into buttons on
   click. AJAX submit handlers that capture and later restore the button's
   innerHTML re-bake this ripple, freezing it mid-animation so the button
   looks permanently greyed/disabled — most visibly after a server-side
   (422) validation error. Suppressing the ripple overlay on buttons removes
   that stuck grey everywhere in one place (covers jQuery + fetch handlers).
*/
.btn .waves-ripple {
  display: none !important;
}

/* ------------------------------------------------------------
   Phone field with country code
   ------------------------------------------------------------
   Rendered by resources/views/_partials/_forms/phone-field.blade.php as a
   Bootstrap input-group: a fixed-width dialling-code <select> followed by the
   phone <input>. The select must not stretch, and the two controls must read
   as one field, so the seam between them is flattened.
*/
.input-group.phone-input-group {
  flex-wrap: wrap;
  /* The two controls must never split across lines. Because the phone input can
     shrink to 0 (min-width: 0 below) its min-content contribution is 0, so it
     always fits beside the code box and wrapping only ever applies to the
     validation messages below. */
}

/* FormValidation appends its message container as a SIBLING of the input, which
   makes it another flex item in this row. Left alone, two of them took ~200px of
   a 360px row: the phone input was squeezed to ~89px and, on a narrower column,
   pushed onto its own line under the country code — which is what read as the
   phone field "breaking" on smaller screens. Giving them a full-line basis puts
   them where they belong (beneath the field) and hands the row back to the
   input. `.input-group` is included in the selector to outrank the copy of
   custom.css that is linked a second time at the end of the body. */
.input-group.phone-input-group .fv-plugins-message-container {
  flex: 0 0 100%;
  width: 100%;
  order: 99;
}

/* `:not(.select2-hidden-accessible)` is load-bearing. Once Select2 upgrades the
   control, that class is added to the ORIGINAL <select>, which select2.css hides
   with `width: 1px !important`. This rule is two classes deep, so it outranks
   that single-class rule and the hidden select kept `width: auto` — an
   invisible but still hit-testable ~100px strip sitting over the Select2
   container. The first click landed on it instead of the container, which is
   why the dropdown only opened on the second click. */
.phone-input-group .phone-code-select:not(.select2-hidden-accessible) {
  /* Same fixed width as the Select2 container below, so the seam sits in the
     same place before and after Select2 upgrades the control. 6rem fits the
     longest label in the list ("+1242") plus the caret column, at every
     breakpoint — no per-device override needed. */
  flex: 0 0 5.25rem;
  /* !important guards against the responsive `.form-select { width: 100% !important }`
     rule in custom.css, which otherwise stretches the code select and breaks the
     select/input onto separate rows at viewports <= 767px. */
  width: 5.25rem !important;
  min-width: 5.25rem;
  max-width: 5.25rem;
  padding-right: 1.75rem;
  background-position: right 0.5rem center;
  /* Flatten the seam. !important beats custom.css's blanket
     `.form-select { border-radius: 24px }`. Applies before Select2 upgrades
     the element, and stays correct if the Select2 script never runs. */
  border-right: 0 !important;
  border-top-left-radius: 24px !important;
  border-bottom-left-radius: 24px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Belt and braces: restore Select2's own hidden sizing on the upgraded select
   and take it out of hit-testing entirely, so no future rule in this file can
   resurrect the click-swallowing strip described above. */
.phone-input-group select.phone-code-select.select2-hidden-accessible {
  width: 1px !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* `flex-basis: 0`, not `auto`. With `auto` the basis comes from the resolved
   width, and the theme resolves .form-control to width:100% — a basis wider than
   the row itself, so the input wrapped under the country code on any narrow
   column. A zero basis makes it take exactly what is left beside the code box.
   `.input-group` in the selector, and !important throughout, because custom.css
   is linked a second time at the end of the body and would otherwise win. */
.input-group.phone-input-group .form-control {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

.phone-input-group .phone-code-select + .form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Keep the invalid outline readable when only one half of the pair fails. */
.phone-input-group .form-select.is-invalid,
.phone-input-group .form-control.is-invalid {
  z-index: 3;
}

/* When the dialling-code select is enhanced to Select2, the plugin replaces the
   <select> with a .select2-container span. These rules make that container behave
   like the original .phone-code-select so the code/phone pair still reads as one
   flattened input-group. */
/* Fixed 6rem, not `auto`, and the same at every breakpoint.
   The label is now the bare dialling code, so the widest entry in the whole list
   is "+1242" — 6rem clears that plus the caret column even on a 320px screen,
   which is why this no longer needs a phone-specific override.
   Fixed rather than content-sized because an auto-width box re-measured itself on
   every selection: switching from "+91" to a 3-4 digit code moved the phone
   input's left edge and the pair stopped lining up with the fields around it. */
.phone-input-group .select2-container {
  flex: 0 0 5.25rem;
  width: 5.25rem !important;
  min-width: 5.25rem;
  max-width: 5.25rem;
}

/* Every declaration here needs !important: custom.css loads first but styles
   Select2 with blanket !important rules — `.select2-selection { border-radius:
   24px; padding: 5px 10px }` and `.select2-selection--single { height: 0% }`.
   The latter resolves to `auto` against the auto-height container, which
   collapses the code box so it no longer lines up with the phone input.
   The container is an input-group flex item and stretches to the row, so
   height: 100% tracks the phone input whatever the theme sets it to. */
.phone-input-group .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  height: 100% !important;
  padding: 0 !important;
  border: 1px solid #d9dee3 !important;
  border-right: 0 !important;
  /* Match the theme's 24px pill radius on the outer edge, square on the seam. */
  border-top-left-radius: 24px !important;
  border-bottom-left-radius: 24px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.phone-input-group .select2-container .select2-selection--single .select2-selection__rendered {
  flex: 1 1 auto;
  min-width: 0; /* let the label ellipsis rather than push into the arrow */
  /* Tight, because the box is only 5.25rem: 10px still reads as aligned with the
     phone input next to it, and leaves the full remainder for the longest label
     in the list ("+1242") before the caret column starts. */
  padding-left: 10px !important;
  padding-right: 2px !important;
  font-size: 16px;
  line-height: normal;
  color: #697a8d;
  white-space: nowrap;
  /* Safety net: if a future code is wider than the box, trim it rather than let
     it spill over the caret. */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Select2 positions the caret absolutely (right: 1px), so it sits on top of the
   label whenever the container is too narrow for both — the container is capped
   at 8rem here, so that is the normal case, not an edge case. The selection is
   display:flex, so making the caret a static-flow flex item reserves its own
   column and the overlap cannot happen at any width. `position: relative` (not
   static) is required: the vendor's inner `b` triangle is absolutely positioned
   and must keep resolving against the arrow, not the selection. */
.phone-input-group .select2-container .select2-selection--single .select2-selection__arrow {
  position: relative !important;
  /* 1.15rem keeps the caret in its own column without stealing width the label
     needs at 4-digit codes; the whole box is the click target anyway. */
  flex: 0 0 1.15rem;
  width: 1.15rem !important;
  height: auto !important; /* beats custom.css's fixed 3.5rem */
  align-self: stretch;
  top: auto !important;
  right: auto !important;
}

/* Keep the input's left edge square so it meets the code select cleanly.
   !important overrides custom.css's `.form-control { border-radius: 24px }`,
   which otherwise re-rounds this edge and splits the pair into two pills. */
.phone-input-group .select2-container + .form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* The code container is deliberately narrow; the dropdown is not, because it
   carries the country names. Sized against the viewport so it stays readable on
   a desktop and never overflows a 320px phone — no breakpoint override needed. */
.select2-dropdown.phone-code-dropdown {
  width: min(22rem, calc(100vw - 2rem)) !important;
  min-width: 0;
  max-width: calc(100vw - 2rem);
}

/* One dropdown row: "+91" then the country name(s) it covers. The code column is
   fixed so the names line up; the names take the rest and ellipsis when a single
   code spans many countries (e.g. +1). */
.phone-code-dropdown .phone-code-option {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.phone-code-dropdown .phone-code-dial {
  flex: 0 0 3.5rem;
  font-weight: 600;
}

.phone-code-dropdown .phone-code-country {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   Lead listing — status colour (ClickUp 86d3x1m68)

   The Lead Details page shows status as a coloured `bg-label-*` badge, but the
   listing renders an editable <select>, which came out plain grey. These tint
   the select with the SAME palette the badge uses, so the two screens read
   consistently. Values copied from the theme's .bg-label-* rules rather than
   re-invented.

   The rules target the raw <select> and, when Select2 upgrades it, the rendered
   Select2 box as well.
--------------------------------------------------------------------------- */
.lead-status-info,
.lead-status-info + .select2-container .select2-selection--single {
  background-color: #d9f8fc !important;
  color: #00cfe8 !important;
}
.lead-status-primary,
.lead-status-primary + .select2-container .select2-selection--single {
  background-color: #eae8fd !important;
  color: #7367f0 !important;
}
.lead-status-warning,
.lead-status-warning + .select2-container .select2-selection--single {
  background-color: #fff1e3 !important;
  color: #ff9f43 !important;
}
.lead-status-secondary,
.lead-status-secondary + .select2-container .select2-selection--single {
  background-color: #f2f2f3 !important;
  color: #a8aaae !important;
}
.lead-status-danger,
.lead-status-danger + .select2-container .select2-selection--single {
  background-color: #fce5e6 !important;
  color: #ea5455 !important;
}
.lead-status-success,
.lead-status-success + .select2-container .select2-selection--single {
  background-color: #dff7e9 !important;
  color: #28c76f !important;
}

/* Select2 paints the label in its own element, so the colour has to reach it. */
.lead-status-select + .select2-container .select2-selection--single .select2-selection__rendered {
  color: inherit !important;
}

/* Onboarded / read-only status badge — sized to match the select2 status
   dropdown shown for every other status, so badge sizes are consistent
   across the Lead list regardless of status (ClickUp 86d3ykfy2). */
.lead-status-badge {
  display: inline-block;
  min-width: 140px;
  padding: 0.42rem 0.75rem;
  font-size: 0.8125rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Lead import guide accordion chevron (ClickUp 86d40bp3p)

   The theme's default accordion chevron is a background-image swapped via
   ::after, which is easy to break with an unrelated CSS change and hard to
   visually verify. Use an explicit chevron icon instead, rotated purely off
   the .collapsed class Bootstrap already toggles on the trigger button, so
   collapsed = right arrow and expanded = down arrow, always in sync.
--------------------------------------------------------------------------- */
#leadImportGuide .accordion-button::after {
  display: none;
}
#leadImportGuide .accordion-guide-chevron {
  margin-left: auto;
  transition: transform 0.2s ease-in-out;
  transform: rotate(0deg);
}
#leadImportGuide .accordion-button:not(.collapsed) .accordion-guide-chevron {
  transform: rotate(90deg);
}

/* ---------------------------------------------------------------------------
   SweetAlert cancel button contrast (ClickUp 86d3x1h5z)

   Confirm dialogs across the portal render Cancel as `btn btn-label-secondary`,
   whose theme colour is #a8aaae on a #f1f1f2 fill — roughly 2.2:1 contrast,
   below the 4.5:1 WCAG minimum. It read as a disabled control, so users were
   unsure it was clickable. Black matches `.btnimp`, the Cancel styling the
   portal's own modals already use.

   Scoped to .swal2-popup so `btn-label-secondary` keeps its muted look wherever
   it is deliberately de-emphasised outside a dialog.
--------------------------------------------------------------------------- */
.swal2-popup .btn-label-secondary,
.swal2-popup .swal2-cancel.btn-label-secondary {
  color: #000000 !important;
}

.swal2-popup .btn-label-secondary:hover {
  color: #000000 !important;
  background: #e4e4e6;
}

/* ---------------------------------------------------------------------------
   SweetAlert buttons that SweetAlert hides must stay hidden

   The vendored SweetAlert build adds `btn` classes to every popup's buttons,
   and core.css gives `.btn` `display: inline-flex !important` — which beats
   the inline `display: none` SweetAlert hides a button with. So
   showConfirmButton/showDenyButton/showCancelButton: false and showLoading()
   could never hide anything: progress popups rendered dead OK / No / Cancel
   buttons. Higher specificity wins between two !important rules.
--------------------------------------------------------------------------- */
.swal2-popup .swal2-actions .btn[style*='display: none'] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Plan details popup — description list (ClickUp 86d3qwgrk)

   Upstream sends the description as newline-separated numbered points
   ("1: 5,000 monthly credits"). Rendered as one pre-line block, a point long
   enough to wrap continued at the left margin, so "2,500 credits" lined up with
   the numbers and looked like item 2 following item 7.

   Each point is now its own row with a hanging indent: the number sits in the
   overhang and every wrapped line aligns under the text, not under the number.
--------------------------------------------------------------------------- */
.plan-desc-list .plan-desc-line {
  padding-left: 2.4em;
  text-indent: -2.4em;
}

.plan-desc-list .plan-desc-line + .plan-desc-line {
  margin-top: 2px;
}

/* Commission breakdown modal — sortable headers (ClickUp 86d36bxny) */
#commissionDetailsModal th.cbd-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.1rem;
}

#commissionDetailsModal th.cbd-sortable::after {
  content: '\2195'; /* up-down arrow — column is sortable but not the active sort */
  position: absolute;
  right: 0.35rem;
  opacity: 0.35;
  font-size: 0.85em;
}

#commissionDetailsModal th.cbd-sort-asc::after {
  content: '\2191';
  opacity: 1;
}

#commissionDetailsModal th.cbd-sort-desc::after {
  content: '\2193';
  opacity: 1;
}