/* ═══════════════════════════════════════════════════════════════════════
   Popups in glass — every window that opens over a page (lead details,
   inquiries, campaigns, the data dialogs, confirmations), the menus that
   drop from the top bar, the side panels, the reminder cards and the small
   messages that slide in, all in one style:
     · frosted glass over a softly blurred page
     · the brand colour as a touch, never a fill: a thin line along the top
       edge, the main button, the field you are typing in, the chosen tab
     · everything else neutral, so a popup never turns into a box of colours
   Theme and brand variables only, so it follows Settings → Branding and the
   dark mode. Loaded last on every page (assets/css/glass-ui.css).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --gl-brand: var(--crm-orange, #3AABB8);
  --gl-brand-rgb: var(--crm-orange-rgb, 58, 171, 184);
  --gl-ink: var(--crm-text, #1F2933);
  --gl-muted: var(--crm-text-muted, #5B6875);
  --gl-surface: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .80) 100%);
  --gl-edge: rgba(255, 255, 255, .75);
  --gl-line: rgba(16, 24, 32, .07);
  --gl-field: rgba(255, 255, 255, .72);
  --gl-field-line: rgba(16, 24, 32, .11);
  --gl-soft: rgba(16, 24, 32, .045);
  --gl-shadow: 0 32px 80px -24px rgba(14, 19, 24, .42), 0 2px 8px rgba(14, 19, 24, .06);
  --gl-veil: rgba(14, 19, 24, .34);
}
[data-bs-theme="dark"] {
  --gl-surface: linear-gradient(180deg, rgba(34, 41, 49, .90) 0%, rgba(24, 29, 35, .86) 100%);
  --gl-edge: rgba(255, 255, 255, .08);
  --gl-line: rgba(255, 255, 255, .07);
  --gl-field: rgba(255, 255, 255, .045);
  --gl-field-line: rgba(255, 255, 255, .10);
  --gl-soft: rgba(255, 255, 255, .05);
  --gl-shadow: 0 32px 80px -24px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .25);
  --gl-veil: rgba(6, 9, 12, .55);
}

/* ── the veil behind a popup: the page stays visible, softly blurred ── */
.modal-backdrop.show, .offcanvas-backdrop.show, .crm-dlg-host {
  background-color: var(--gl-veil) !important; opacity: 1 !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.05); backdrop-filter: blur(7px) saturate(1.05);
}
.modal-backdrop.fade:not(.show), .offcanvas-backdrop.fade:not(.show) { opacity: 0 !important; }

/* ── the window ───────────────────────────────────────────────────────── */
[data-bs-theme] .modal-content,
[data-bs-theme] .modal.fade > .modal {
  background:
    linear-gradient(90deg, rgba(var(--gl-brand-rgb), .95) 0%, rgba(var(--gl-brand-rgb), .35) 38%, rgba(var(--gl-brand-rgb), 0) 72%) top / 100% 3px no-repeat,
    var(--gl-surface);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--gl-edge);
  border-radius: 20px;
  box-shadow: var(--gl-shadow);
  color: var(--gl-ink);
}
[dir="rtl"] .modal-content, [dir="rtl"] .modal.fade > .modal {
  background:
    linear-gradient(270deg, rgba(var(--gl-brand-rgb), .95) 0%, rgba(var(--gl-brand-rgb), .35) 38%, rgba(var(--gl-brand-rgb), 0) 72%) top / 100% 3px no-repeat,
    var(--gl-surface);
}
.modal.show .modal-dialog { transform: none; }
.modal.fade .modal-dialog { transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .22s ease; }
.modal.fade:not(.show) .modal-dialog { transform: translateY(10px) scale(.985); opacity: 0; }

[data-bs-theme] .modal-header,
[data-bs-theme] .modal.fade > .modal > .modal-header {
  background: transparent; border-bottom: 1px solid var(--gl-line); padding: 1.15rem 1.5rem 1rem;
}
[data-bs-theme] .modal-footer,
[data-bs-theme] .modal.fade > .modal > .modal-footer {
  background: var(--gl-soft); border-top: 1px solid var(--gl-line); padding: .85rem 1.5rem; gap: .5rem;
  border-radius: 0 0 19px 19px;
}
.modal-body { padding: 1.35rem 1.5rem; }
.modal-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--gl-ink); }
/* a title's own icon takes the brand colour, quietly */
.modal-title > i:first-child:not([class*="text-"]) { color: var(--gl-brand); margin-inline-end: .35rem; }

/* the close button: a quiet round button that warms on hover */
.modal .btn-close, .offcanvas .btn-close, .modal.fade > .modal > .modal-header > .modal-close {
  width: 2rem; height: 2rem; padding: 0; border-radius: 999px; opacity: .65;
  background-color: var(--gl-soft); background-size: .7rem; transition: background-color .15s ease, opacity .15s ease;
}
.modal .btn-close:hover, .offcanvas .btn-close:hover, .modal.fade > .modal > .modal-header > .modal-close:hover {
  opacity: 1; background-color: rgba(var(--gl-brand-rgb), .14);
}
.modal .btn-close:focus-visible, .offcanvas .btn-close:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--gl-brand-rgb), .25); }

/* ── inside a popup ───────────────────────────────────────────────────── */
.modal .form-label, .offcanvas .form-label { font-size: .8125rem; font-weight: 500; color: var(--gl-ink); margin-bottom: .35rem; }
.modal .form-control, .modal .form-select, .modal .input-group-text,
.offcanvas .form-control, .offcanvas .form-select {
  background-color: var(--gl-field); border-color: var(--gl-field-line); border-radius: 10px;
}
.modal .input-group > :not(:first-child):not(.dropdown-menu) { border-start-start-radius: 0; border-end-start-radius: 0; }
.modal .input-group > :not(:last-child):not(.dropdown-menu) { border-start-end-radius: 0; border-end-end-radius: 0; }
.modal .form-control:focus, .modal .form-select:focus, .offcanvas .form-control:focus, .offcanvas .form-select:focus {
  background-color: var(--bs-body-bg, #fff); border-color: rgba(var(--gl-brand-rgb), .55); box-shadow: 0 0 0 .2rem rgba(var(--gl-brand-rgb), .14);
}
.modal .form-check-input:checked, .offcanvas .form-check-input:checked { background-color: var(--gl-brand); border-color: var(--gl-brand); }
.modal .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(var(--gl-brand-rgb), .16); border-color: rgba(var(--gl-brand-rgb), .5); }
/* cards and tables inside the glass: lighter glass, no second shadow */
.modal .card { background: rgba(255, 255, 255, .55); border: 1px solid var(--gl-line); box-shadow: none; border-radius: 14px; }
[data-bs-theme="dark"] .modal .card { background: rgba(255, 255, 255, .03); }
.modal .card-header { background: transparent; border-bottom-color: var(--gl-line); }
.modal .table { --bs-table-bg: transparent; }
.modal .table > thead th { color: var(--gl-muted); font-weight: 500; font-size: .78rem; border-bottom-color: var(--gl-line); }
.modal .bg-light, .modal .bg-light-subtle, .modal .bg-body-tertiary { background-color: var(--gl-soft) !important; }
/* tabs and pills: the chosen one carries the brand colour */
.modal .nav-tabs { border-bottom-color: var(--gl-line); }
.modal .nav-tabs .nav-link { color: var(--gl-muted); font-weight: 500; border: 0; background: transparent; }
.modal .nav-tabs .nav-link:hover { color: var(--gl-ink); }
.modal .nav-tabs .nav-link.active { color: var(--gl-ink); background: transparent; box-shadow: inset 0 -2px 0 var(--gl-brand); }
.modal .nav-pills .nav-link { color: var(--gl-muted); border-radius: 999px; font-weight: 500; }
.modal .nav-pills .nav-link.active { background: rgba(var(--gl-brand-rgb), .13); color: var(--gl-ink); }
/* two-way and three-way switches (Sale / Rent, Off Plan / Resale, Data / Performance) */
.modal .pf-seg, .modal .crm-seg { border-color: var(--gl-field-line); border-radius: 10px; background: var(--gl-field); }
.modal .pf-seg .btn, .modal .crm-seg .btn { background: transparent; color: var(--gl-muted); }
.modal .pf-seg .btn:not(:first-of-type), .modal .crm-seg .btn:not(:first-of-type) { border-left-color: var(--gl-field-line); }
.modal .pf-seg .btn-check:checked + .btn, .modal .crm-seg .btn-check:checked + .btn {
  background: rgba(var(--gl-brand-rgb), .13); color: var(--gl-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gl-brand);
}
/* choice tiles (where a campaign runs, and the like) */
.modal .pp-card { background: rgba(255, 255, 255, .5); border-color: var(--gl-line) !important; border-radius: 14px !important; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
[data-bs-theme="dark"] .modal .pp-card { background: rgba(255, 255, 255, .03); }
.modal .pp-card:hover { border-color: rgba(var(--gl-brand-rgb), .55) !important; box-shadow: 0 10px 24px -14px rgba(var(--gl-brand-rgb), .6); transform: translateY(-1px); }
/* buttons: the brand for the one that does it, quiet glass for the rest */
.modal .btn, .offcanvas .btn { border-radius: 10px; }
.modal .btn-light, .modal .btn-secondary, .modal .btn-soft-secondary, .modal .btn-outline-secondary {
  background: var(--gl-soft); border-color: transparent; color: var(--gl-ink); box-shadow: none;
}
.modal .btn-light:hover, .modal .btn-secondary:hover, .modal .btn-soft-secondary:hover, .modal .btn-outline-secondary:hover {
  background: rgba(16, 24, 32, .09); color: var(--gl-ink);
}
[data-bs-theme="dark"] .modal .btn-light:hover, [data-bs-theme="dark"] .modal .btn-secondary:hover,
[data-bs-theme="dark"] .modal .btn-soft-secondary:hover, [data-bs-theme="dark"] .modal .btn-outline-secondary:hover { background: rgba(255, 255, 255, .09); }
.modal .bg-secondary-subtle { background-color: var(--gl-soft) !important; }
.modal .text-secondary { color: var(--gl-muted) !important; }
.modal .spinner-border.text-primary { color: var(--gl-brand) !important; }
.modal hr { border-color: var(--gl-line); opacity: 1; }

/* ── side panels ──────────────────────────────────────────────────────── */
[data-bs-theme] .offcanvas {
  background: var(--gl-surface);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border-color: var(--gl-edge) !important; box-shadow: var(--gl-shadow);
}
.offcanvas-header { border-bottom: 1px solid var(--gl-line); }

/* ── menus that drop from the top bar and from buttons ────────────────── */
[data-bs-theme] .dropdown-menu {
  background: var(--gl-surface);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--gl-edge) !important; border-radius: 14px !important;
  box-shadow: 0 20px 48px -16px rgba(14, 19, 24, .32), 0 1px 3px rgba(14, 19, 24, .06) !important;
}
.dropdown-menu .dropdown-item { border-radius: 8px; }
.dropdown-menu:not(.p-0):not(.py-0) .dropdown-item { margin-inline: .35rem; width: calc(100% - .7rem); }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: rgba(var(--gl-brand-rgb), .09); color: var(--gl-ink); }
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { background: rgba(var(--gl-brand-rgb), .16); color: var(--gl-ink); }
.dropdown-menu .dropdown-divider { border-color: var(--gl-line); }

/* ── reminder cards that pop in at the corner ─────────────────────────── */
[data-bs-theme] .crm-reminder-pop {
  background: var(--gl-surface);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--gl-edge); border-inline-start: 3px solid var(--gl-brand); border-radius: 14px;
  box-shadow: 0 20px 48px -16px rgba(14, 19, 24, .35);
}
[data-bs-theme] .crm-reminder-pop.is-high { border-inline-start-color: var(--crm-danger, #C0392F); }
.crm-reminder-pop .crp-head i { color: var(--gl-brand); }

/* ── the small messages that slide in (crm-ui.js toast) ───────────────── */
.toastify.crm-toast {
  background: var(--gl-surface) !important; color: var(--gl-ink) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--gl-edge); border-inline-start: 4px solid var(--gl-brand);
  border-radius: 14px !important; box-shadow: 0 20px 48px -16px rgba(14, 19, 24, .38) !important;
  padding: .8rem 1rem .8rem 1.1rem; font-weight: 500; max-width: min(380px, calc(100vw - 2rem));
}
.toastify.crm-toast-success { border-inline-start-color: var(--crm-success, #2A9683); }
.toastify.crm-toast-error   { border-inline-start-color: var(--crm-danger, #C0392F); }
.toastify.crm-toast-warning { border-inline-start-color: var(--crm-warning, #D9822B); }
.toastify.crm-toast-info    { border-inline-start-color: var(--gl-brand); }
.toastify.crm-toast .toast-close { color: var(--gl-muted); opacity: .8; padding: 0 0 0 .75rem; }

/* browsers without glass: solid surfaces, same look otherwise */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-bs-theme="light"] .modal-content, [data-bs-theme="light"] .dropdown-menu, [data-bs-theme="light"] .offcanvas { --gl-surface: #fff; }
  [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .offcanvas { --gl-surface: #1E242B; }
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog { transition: none; }
}
@media (max-width: 575.98px) {
  [data-bs-theme] .modal-content { border-radius: 18px; }
  .modal-header, .modal-body, .modal-footer { padding-inline: 1.1rem; }
}