/*
 * Frosted-glass listing pages — the shared "new look" for ALL listing pages.
 * Extracted from the e/customers redesign (reference mockup:
 * docs/mockups/customer-listing-redesign.html; pattern doc:
 * docs/patterns/frosted-listing-pages.md).
 *
 * Everything is scoped to .frosted-listing, which listing/common_listing.html.twig
 * now wraps around every listing page body. Remember: this file is served from
 * the COMPILED asset bundle — run asset-map:compile after editing.
 */

/* ===== colourful backdrop so the frosting has something to blur ===== */
.frosted-listing{
  position:relative;
  height:100%;
  padding:2px;
  /* decorative blobs extend past the edges — clip so the page never scrolls sideways */
  overflow-x:clip;
  background:
    radial-gradient(1100px 620px at 8% -8%, rgba(124,197,255,.42), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(183,155,255,.34), transparent 55%),
    radial-gradient(900px 640px at 50% 120%, rgba(88,226,194,.32), transparent 55%),
    linear-gradient(160deg,#eaf2fb 0%,#e7ecfb 45%,#eafaf4 100%);
}
.frosted-listing::before,
.frosted-listing::after{
  content:"";position:absolute;border-radius:50%;filter:blur(34px);z-index:0;pointer-events:none;
}
.frosted-listing::before{width:300px;height:300px;left:-40px;top:120px;background:radial-gradient(circle,rgba(94,184,255,.5),transparent 70%);}
.frosted-listing::after{width:380px;height:380px;right:-70px;bottom:-30px;background:radial-gradient(circle,rgba(154,123,255,.45),transparent 70%);}
.frosted-listing > .container-fluid{position:relative;z-index:1;background:transparent;}

/* ===== responsiveness: panels never outgrow the viewport =====
   The body grid's items (.head-stack, .modern-card) default to
   min-width:auto — a wide table makes the card as wide as its CONTENT,
   pushing it past the page edge, where .frosted-listing's overflow-x:clip
   silently amputates the rightmost columns (the inner scroller can never
   reach them because the scroller itself is partly off-screen). Pinning
   min-width:0 keeps every panel at the column width so wide content
   scrolls INSIDE .table-container-scroll instead. */
.frosted-listing > .container-fluid,
.frosted-listing .head-stack,
.frosted-listing .modern-card,
.frosted-listing .filter-section-modern,
.frosted-listing .page-head-hero{
  min-width:0;
  max-width:100%;
}

/* ===== shared glass surface ===== */
.frosted-listing .filter-section-modern,
.frosted-listing .modern-card{
  background:rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.65) !important;
  box-shadow:0 10px 30px rgba(17,42,84,.14),0 2px 6px rgba(17,42,84,.08) !important;
  border-radius:20px !important;
}

/* ===== hero header (mockup .page-head) ===== */
.frosted-listing .page-head-hero{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px 24px;margin-bottom:18px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 10px 30px rgba(17,42,84,.14),0 2px 6px rgba(17,42,84,.08);
  border-radius:20px;
}
.frosted-listing .page-head-hero .glyph{
  width:54px;height:54px;border-radius:16px;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;font-size:1.5rem;
  background:linear-gradient(135deg,#2674a6,#112a54);
  box-shadow:0 8px 20px rgba(38,116,166,.4);
  position:relative;overflow:hidden;
}
.frosted-listing .page-head-hero .glyph::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.frosted-listing .page-head-hero:hover .glyph::after{transform:translateX(120%);}
/* !important: sas_base sets global h1{font-size:2vw}/{font-weight:600} with !important */
.frosted-listing .page-head-hero h1{
  font-size:1.4rem !important;font-weight:800 !important;
  margin:0;letter-spacing:-.01em;color:#12233b;
  display:flex;align-items:center;
}
.frosted-listing .page-head-hero .sub{font-size:.82rem;color:#41597a;font-weight:500;margin-top:1px;}
.frosted-listing .page-head-hero .count-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:#112a54;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.65);
  border-radius:99px;padding:3px 11px;margin-left:8px;
}
.frosted-listing .page-head-hero .hero-actions{
  margin-left:auto;display:flex;align-items:center;gap:8px;
}
/* Download CSV in the hero → glass chip (Add Customer keeps the gradient btn-primary) */
.frosted-listing .hero-actions .btn:not(.btn-primary){
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  color:#1d5c86 !important;border-radius:11px !important;font-weight:600 !important;
  box-shadow:0 2px 6px rgba(17,42,84,.1) !important;
}
.frosted-listing .hero-actions .btn:not(.btn-primary):hover{background:rgba(255,255,255,.85) !important;}

/* ===== customer cell (mockup .cust): avatar + name + email · phone ===== */
.frosted-listing .cust{display:flex;align-items:center;gap:11px;}
.frosted-listing .cust .avatar{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem;
  box-shadow:0 4px 10px rgba(17,42,84,.22);border:1px solid rgba(255,255,255,.5);
}
.frosted-listing .a1{background:linear-gradient(135deg,#2674a6,#112a54);}
.frosted-listing .a2{background:linear-gradient(135deg,#8b5cf6,#5b21b6);}
.frosted-listing .a3{background:linear-gradient(135deg,#0ea5a5,#065f5f);}
.frosted-listing .a4{background:linear-gradient(135deg,#f97316,#c2410c);}
.frosted-listing .a5{background:linear-gradient(135deg,#e11d70,#831843);}
.frosted-listing .a6{background:linear-gradient(135deg,#3b82f6,#1e3a8a);}
.frosted-listing .a7{background:linear-gradient(135deg,#16a34a,#14532d);}
.frosted-listing .cust .cust-txt{min-width:0;}
.frosted-listing .cust .nm{
  font-weight:800 !important;font-size:.92rem;line-height:1.15;color:#12233b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;
}
.frosted-listing .cust .em{
  font-size:.76rem;color:#64748b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;
}
.frosted-listing .cust .em a{color:#64748b;text-decoration:none;}
.frosted-listing .cust .em a:hover{color:#12233b;}

/* ===== filter panel → compact single-row toolbar (mockup .toolbar) =====
   flex-wrap:wrap (not nowrap + a viewport breakpoint): the toolbar's width
   follows the CONTENT COLUMN, not the viewport, so a media query can't know
   when the chips run out of room (narrow window, wide menu, split screen).
   With room they sit on one row exactly as before; without it they wrap and
   the toolbar grows taller instead of overflowing the card. */
.frosted-listing .filter-section-modern{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;row-gap:10px;
  padding:12px 16px !important;margin-bottom:18px;
}
/* opt-in (large filter sets, e.g. appointments): let the chips wrap onto
   multiple rows so every filter stays visible — the toolbar grows taller
   instead of overflowing the single row. */
.frosted-listing .filter-section-modern.filters-wrap{
  flex-wrap:wrap;
  row-gap:10px;
  align-items:flex-start;
}
/* flatten the header/content wrappers so fields + button share one flex row
   (!important: the collapsible-filters JS sets inline display on filter-content) */
.frosted-listing .filter-header-wrapper,
.frosted-listing .filter-content,
.frosted-listing .filter-content .row{display:contents !important;}
/* undo bootstrap's .row > * { width:100% } — it stacks the chips vertically */
.frosted-listing .filter-content .row > *{
  width:auto !important;max-width:none !important;flex:0 1 auto;
  padding:0 !important;margin:0 !important;
}
/* mockup toolbar has no "Filters" heading */
.frosted-listing .filter-header-left{display:none;}
/* Reset + Apply always pinned right (margin-left:auto), Apply right-most */
.frosted-listing .filter-header-actions{
  order:2;flex:0 0 auto;display:flex;align-items:center;gap:8px;margin-left:auto;
}
/* icon-only, same size and colors as the Apply button */
.frosted-listing .btn-reset-filters{
  display:inline-grid;place-items:center;width:40px;height:40px;
  border-radius:11px;text-decoration:none;color:#ffffff;
  background-image:linear-gradient(135deg,#2674a6,#112a54);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 20px rgba(38,116,166,.38);
  transition:transform .16s ease, box-shadow .16s ease;
}
.frosted-listing .btn-reset-filters:hover{
  color:#ffffff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(38,116,166,.5);
}
.frosted-listing .btn-reset-filters .bi{font-size:1rem;}
/* compact fields: drop the floating labels */
.frosted-listing .filter-section-modern .form-floating > label{display:none;}
/* select.form-select only — TomSelect copies .form-select onto its wrapper div,
   which must NOT get this glass box (it would double-border inside the chips) */
.frosted-listing .filter-section-modern .form-control,
.frosted-listing .filter-section-modern select.form-select{
  background:rgba(255,255,255,.5) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  border-radius:12px !important;
  height:40px !important;min-height:40px !important;
  padding:8px 12px !important;font-size:.88rem !important;color:#12233b !important;
}
/* restore the select caret (the background shorthand above wipes bootstrap's) */
.frosted-listing .filter-section-modern select.form-select{
  padding-right:32px !important;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%2341597a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/></svg>') !important;
  background-repeat:no-repeat !important;
  background-position:right 10px center !important;
  background-size:12px 12px !important;
}
/* restore the calendar icon on date inputs — app.css puts it on flatpickr
   fields as a background-image, and the same background shorthand wipes it */
.frosted-listing .filter-section-modern input[data-controller~="flatpickr"].form-control,
.frosted-listing .filter-section-modern .date-input-with-icon,
.frosted-listing .filter-section-modern input[type="date"].form-control{
  padding-right:34px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2341597a' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 10px center !important;
  background-size:14px 14px !important;
  cursor:pointer;
}
.frosted-listing .filter-section-modern .form-control::placeholder{color:#64748b;}
/* quick search stretches, magnifier inside — mockup .search */
/* search grows to fill leftover space, pushing the chips + Apply to the right edge;
   its floor is computed from the WIDEST select chip (--opt-ch set in the markup) */
.frosted-listing .filter-content .row > .fcol-search{
  order:1;flex:1 1 300px !important;
  /* min() caps the computed floor at the toolbar's width so the search chip
     can never be the thing that overflows the card in a narrow window */
  min-width:min(calc(var(--opt-ch, 18) * 0.62em + 60px), 100%);
  max-width:100% !important;
}
/* opt-in (.fcol-search-compact, set by the page's filter_fields override):
   the search box stops growing at a readable width instead of eating the
   leftover space. Its 300px flex BASE is what the wrap algorithm measures, so
   an unbounded search is what pushes the chips onto a second row — capping it
   keeps search + chips + Reset/Apply on one line. Placed after the rule above:
   same specificity, later source wins. */
.frosted-listing .filter-content .row > .fcol-search-compact{
  flex:1 1 240px !important;
  min-width:200px;
  max-width:380px !important;
}
/* attention nudge — the search box shakes as the page loads and again every
   10s, so the toolbar keeps reading as searchable. One 10s cycle with the shake
   packed into the first 600ms (0–6%) and 9.4s of rest; CSS rather than a
   Stimulus controller so it restarts by itself on every Turbo render, with no
   connect/disconnect timer to leak.
   Pauses on hover/focus so it never jitters under the cursor mid-type. */
@keyframes fcol-search-nudge{
  0%,6%,100%{transform:translateX(0);}
  1%{transform:translateX(-5px);}
  2%{transform:translateX(5px);}
  3%{transform:translateX(-4px);}
  4%{transform:translateX(4px);}
  5%{transform:translateX(-2px);}
}
.frosted-listing .fcol-search-compact .form-control{
  animation:fcol-search-nudge 10s ease-in-out infinite;
}
.frosted-listing .fcol-search-compact .form-control:hover,
.frosted-listing .fcol-search-compact .form-control:focus{
  animation-play-state:paused;
}
@media (prefers-reduced-motion: reduce){
  .frosted-listing .fcol-search-compact .form-control{animation:none;}
}
.frosted-listing .fcol-search .form-control{
  padding-left:38px !important;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2364748b" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>') !important;
  background-repeat:no-repeat !important;
  background-position:13px center !important;
  background-size:14px !important;
}
/* themed focus ring (mockup .search input:focus, tinted from the org primary) */
.frosted-listing .filter-section-modern .form-control:focus,
.frosted-listing .filter-section-modern .form-select:focus,
.frosted-listing .filter-section-modern .ts-control:focus-within{
  background-color:rgba(255,255,255,.78) !important;
  border-color:color-mix(in srgb, var(--bit-primary,#2674a6) 45%, white) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bit-primary,#2674a6) 16%, transparent) !important;
  outline:none !important;
}
/* ===== labeled filter chips — mockup .fchip: [icon] Title [select ▾] ===== */
.frosted-listing .fcol{
  order:1;flex:0 1 auto;display:inline-flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);
  border-radius:11px;height:40px;
}
/* chip padding must out-rank the .row > * gutter reset (same specificity, later source) */
.frosted-listing .filter-content .row > .fcol{padding:0 2px 0 18px !important;}
.frosted-listing .fcol .flabel{
  display:inline-flex;align-items:center;gap:7px;margin:0;
  font-size:.82rem;font-weight:600;color:#41597a;white-space:nowrap;cursor:pointer;
}
.frosted-listing .fcol .flabel i{font-size:.85rem;opacity:.85;}
/* width scales with the longest option label (--opt-ch set per chip in the markup) */
.frosted-listing .fcol select.form-select{
  min-width:calc(var(--opt-ch, 12) * 0.62em + 44px);
  background-color:transparent !important;
  border:none !important;box-shadow:none !important;border-radius:9px !important;
  width:auto;height:36px !important;min-height:36px !important;
  padding:0 26px 0 7px !important;
  font-size:.82rem !important;font-weight:600 !important;color:#12233b !important;
  background-position:right 8px center !important;
}
/* opt-in (.fcol-tight, set by the page's filter_fields override): the chip is
   pinned to its --opt-ch width instead of growing to the longest option, so a
   30+ char label can't push the toolbar onto a second row. The collapsed value
   ellipsises; the open dropdown still shows it in full. See
   employee/customer/manage_customer_profile_listing.html.twig (optCharCap). */
.frosted-listing .fcol-tight{min-width:0;}
.frosted-listing .fcol-tight select.form-select{
  max-width:calc(var(--opt-ch, 12) * 0.62em + 44px);
  text-overflow:ellipsis;
}
.frosted-listing .fcol:focus-within{
  background:rgba(255,255,255,.78);
  border-color:color-mix(in srgb, var(--bit-primary,#2674a6) 45%, white);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bit-primary,#2674a6) 16%, transparent);
}
.frosted-listing .fcol .form-select:focus{background-color:transparent !important;box-shadow:none !important;border:none !important;}
/* text/date inputs inside a chip (e.g. cancellation list Start/End Date):
   same borderless in-chip treatment as selects — the chip IS the field */
.frosted-listing .fcol .form-control{
  background-color:transparent !important;
  border:none !important;box-shadow:none !important;border-radius:9px !important;
  width:auto;height:36px !important;min-height:36px !important;
  min-width:calc(var(--opt-ch, 12) * 0.62em + 44px);
  padding:0 7px !important;
  font-size:.82rem !important;font-weight:600 !important;color:#12233b !important;
}
.frosted-listing .fcol .form-control:focus{background-color:transparent !important;box-shadow:none !important;border:none !important;}
/* Apply-filters button → mockup "All" chip, gradient from the org primary */
.frosted-listing .filter-header-actions .btn{
  display:inline-flex;align-items:center;gap:7px;
  height:40px;padding:9px 14px !important;border-radius:11px !important;
  font-size:.82rem !important;font-weight:600 !important;letter-spacing:0 !important;
}
.frosted-listing .filter-header-actions .btn::before{
  font-family:"bootstrap-icons";content:"\f3e0";font-size:.85rem;line-height:1;
}
/* rollover: Apply lifts like the mockup Add button */
.frosted-listing .filter-header-actions .btn{
  transition:transform .16s ease, box-shadow .16s ease;
}
.frosted-listing .filter-header-actions .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(38,116,166,.5) !important;
}
/* sheen sweep on Reset + Apply — same effect as the listing action icons */
.frosted-listing .btn-reset-filters,
.frosted-listing .filter-header-actions .btn{
  position:relative;overflow:hidden;
}
.frosted-listing .btn-reset-filters::after,
.frosted-listing .filter-header-actions .btn::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.frosted-listing .btn-reset-filters:hover::after,
.frosted-listing .filter-header-actions .btn:hover::after{transform:translateX(120%);}
@media (prefers-reduced-motion: reduce){
  .frosted-listing .btn-reset-filters::after,
  .frosted-listing .filter-header-actions .btn::after{transition:none;}
}
/* search field brightens on hover, matching the chip hover feel
   (background-color longhand only — the shorthand would wipe the magnifier) */
.frosted-listing .fcol-search .form-control:hover{
  background-color:rgba(255,255,255,.78) !important;
}

/* ===== card header ===== */
.frosted-listing .card-icon-header{
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.5) !important;
  padding:14px 18px !important;
}
.frosted-listing .card-icon-header .icon{
  width:46px !important;height:46px !important;border-radius:14px !important;
  background:linear-gradient(135deg,#2674a6,#112a54) !important;
  color:#fff !important;font-size:1.25rem !important;
  box-shadow:0 8px 18px rgba(38,116,166,.4) !important;
}
.frosted-listing .card-icon-header .title h5{color:#12233b !important;font-weight:800 !important;}
.frosted-listing .card-icon-header .title small{color:#41597a !important;}

/* ===== primary buttons (Add Customer, Apply Filters) =====
   Moved to components/_bit-brand.css — .btn-primary is the brand gradient
   app-wide now, so this scoped copy is redundant. */

/* Download CSV button in header → glass */
.frosted-listing .card-icon-header .ms-auto .btn{
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  color:#1d5c86 !important;border-radius:11px !important;font-weight:600 !important;
  box-shadow:0 2px 6px rgba(17,42,84,.1) !important;
}
.frosted-listing .card-icon-header .ms-auto .btn:hover{background:rgba(255,255,255,.85) !important;}

/* ===== table ===== */
/* solid-enough tint: the header is sticky, so scrolled rows would show
   through a transparent background and look broken */
.frosted-listing .table-modern thead th{
  background:rgba(248,251,254,.97) !important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#41597a !important;border-bottom:1px solid rgba(255,255,255,.6) !important;
  letter-spacing:.06em;
}
.frosted-listing .table-modern thead th a{color:#41597a !important;}
/* fill the card on wide screens (the inline width:auto only sizes to content) */
.frosted-listing .table-modern{min-width:100%;}
.frosted-listing .table-modern tbody td{
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.55) !important;
  color:#12233b !important;
  padding:6px 8px !important;
  /* let cells wrap so the table compresses with the viewport like the mockup */
  white-space:normal !important;
}
.frosted-listing .table-modern.table-striped tbody tr:nth-of-type(odd){
  background-color:rgba(255,255,255,.28) !important;
}
.frosted-listing .table-modern tbody tr:hover,
.frosted-listing .table-modern.table-striped tbody tr:hover{
  background:rgba(255,255,255,.6) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7) !important;
}
/* row-number column */
.frosted-listing .listing-row-number{color:#7488a3 !important;font-weight:600;}

/* ===== frosted action icon buttons ===== */
.frosted-listing .table-modern .table-action-btn{
  width:38px;height:38px;font-size:1rem;
  padding:0 !important;margin:0 3px !important;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.45) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:12px !important;
  box-shadow:0 2px 6px rgba(17,42,84,.1) !important;
  transform:none !important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease !important;
}
.frosted-listing .table-modern .table-action-btn:hover{
  transform:translateY(-3px) !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 8px 18px rgba(17,42,84,.2) !important;
}
/* frosted-glass rollover: a light sheen sweeps across the tile on hover */
.frosted-listing .table-modern .table-action-btn{position:relative;overflow:hidden;}
.frosted-listing .table-modern .table-action-btn::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.frosted-listing .table-modern .table-action-btn:hover::after{transform:translateX(120%);}
@media (prefers-reduced-motion: reduce){
  .frosted-listing .table-modern .table-action-btn::after{transition:none;}
}
/* icon colour per action variant */
/* icon + background colors come from Org → Theme Settings → Listing Icons
   (backgrounds keep 50% translucency so the frosted look survives tinting) */
.frosted-listing .table-action-btn.btn-outline-info,
.frosted-listing .table-action-btn.btn-outline-info i{color:var(--bit-listing-icon-view,#0e7490) !important;}
.frosted-listing .table-modern .table-action-btn.btn-outline-info{
  background:color-mix(in srgb, var(--bit-listing-icon-view-bg,#ffffff) 50%, transparent) !important;}
.frosted-listing .table-action-btn.btn-outline-primary,
.frosted-listing .table-action-btn.btn-outline-primary i{color:var(--bit-listing-icon-edit,#2674a6) !important;}
.frosted-listing .table-modern .table-action-btn.btn-outline-primary{
  background:color-mix(in srgb, var(--bit-listing-icon-edit-bg,#ffffff) 50%, transparent) !important;}
.frosted-listing .table-action-btn.btn-outline-success,
.frosted-listing .table-action-btn.btn-outline-success i{color:var(--bit-listing-icon-sales,#16a34a) !important;}
.frosted-listing .table-modern .table-action-btn.btn-outline-success{
  background:color-mix(in srgb, var(--bit-listing-icon-sales-bg,#ffffff) 50%, transparent) !important;}
.frosted-listing .table-action-btn.btn-outline-secondary,
.frosted-listing .table-action-btn.btn-outline-secondary i{color:var(--bit-listing-icon-bookings,#475569) !important;}
.frosted-listing .table-modern .table-action-btn.btn-outline-secondary{
  background:color-mix(in srgb, var(--bit-listing-icon-bookings-bg,#ffffff) 50%, transparent) !important;}
/* danger (delete) + warning (duplicate) variants — same glass tile, tinted icon */
.frosted-listing .table-action-btn.btn-outline-danger,
.frosted-listing .table-action-btn.btn-outline-danger i{color:#dc3545 !important;}
.frosted-listing .table-modern .table-action-btn.btn-outline-danger{
  background:color-mix(in srgb, #ffffff 50%, transparent) !important;}
.frosted-listing .table-action-btn.btn-warning,
.frosted-listing .table-action-btn.btn-warning i{color:#b45309 !important;}
.frosted-listing .table-modern .table-action-btn.btn-warning{
  background:color-mix(in srgb, #ffffff 50%, transparent) !important;}
/* Switch-to-user → glossy tile from the theme's Switch User colors (shared
   .btn-switch-user class; restated at higher specificity to beat the
   frosted-glass button rules on this page) */
.frosted-listing .table-action-btn.btn-switch-user,
.frosted-listing .table-action-btn.btn-switch-user i{
  color:var(--bit-badge-switch-user-fg,#111827) !important;
}
.frosted-listing .table-modern .table-action-btn.btn-switch-user{
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 48%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--bit-badge-switch-user,#fcd34d) 35%, white),
      var(--bit-badge-switch-user,#fcd34d)) !important;
  border:1px solid rgba(255,255,255,.6) !important;
  box-shadow:0 4px 10px color-mix(in srgb, var(--bit-badge-switch-user,#fcd34d) 45%, transparent),
             inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.frosted-listing .table-modern .table-action-btn.btn-switch-user:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 48%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--bit-badge-switch-user,#fcd34d) 20%, white),
      color-mix(in srgb, var(--bit-badge-switch-user,#fcd34d) 70%, white)) !important;
  box-shadow:0 8px 18px color-mix(in srgb, var(--bit-badge-switch-user,#fcd34d) 55%, transparent),
             inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* ===== fonts — Lexend for everything (icon glyphs keep their own font via ::before) ===== */
.frosted-listing,
.frosted-listing *{
  font-family:'Lexend',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif !important;
}
/* mockup table typography — taller header row like the mockup */
.frosted-listing .table-modern thead th{
  font-size:.68rem !important;font-weight:700 !important;text-transform:uppercase !important;
  padding:18px 12px !important;vertical-align:middle;
}
.frosted-listing .table-modern tbody td{font-size:.85rem !important;}
.frosted-listing .name-contact-formatter{font-size:.92rem !important;}
.frosted-listing .name-contact-formatter > div:first-child{
  font-weight:700 !important;text-transform:none !important;font-size:.92rem !important;line-height:1.15 !important;
}
.frosted-listing .name-contact-formatter a,
.frosted-listing .name-contact-formatter .text-muted{font-size:.76rem !important;color:#64748b !important;}
/* long emails truncate instead of forcing the table wide */
.frosted-listing .name-contact-formatter{max-width:210px !important;}
.frosted-listing .name-contact-formatter a{
  display:inline-block;max-width:185px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom;
}
/* each customer-cell line (name, email, phone, packages) stays on one line, truncating */
.frosted-listing .name-contact-formatter > div{
  white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;max-width:210px;
}
/* action buttons never stack — the cell keeps them on one row */
.frosted-listing .table-modern tbody td:has(.table-action-btn){white-space:nowrap !important;}
.frosted-listing .name-contact-formatter .bi{font-size:.72rem;color:#64748b;}

/* ===== badges → mockup .badge-soft pills ===== */
.frosted-listing .badge:not(.rounded-circle){
  display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem !important;font-weight:700 !important;
  padding:4px 11px !important;border-radius:99px !important;
  border:1px solid transparent;white-space:nowrap;
}
.frosted-listing .badge.bg-success:not(.rounded-circle){
  background:rgba(22,163,74,.14) !important;color:#15803d !important;border-color:rgba(22,163,74,.3) !important;
}
.frosted-listing .badge.bg-primary:not(.rounded-circle),
.frosted-listing .badge.bg-info:not(.rounded-circle){
  background:rgba(37,116,166,.14) !important;color:#1d5c86 !important;border-color:rgba(37,116,166,.3) !important;
}
.frosted-listing .badge.bg-warning:not(.rounded-circle){
  background:rgba(217,119,6,.15) !important;color:#b45309 !important;border-color:rgba(217,119,6,.3) !important;
}
.frosted-listing .badge.bg-secondary:not(.rounded-circle),
.frosted-listing .badge.bg-dark:not(.rounded-circle){
  background:rgba(100,116,139,.14) !important;color:#475569 !important;border-color:rgba(100,116,139,.3) !important;
}
.frosted-listing .badge.bg-danger:not(.rounded-circle){
  background:rgba(220,38,38,.14) !important;color:#b91c1c !important;border-color:rgba(220,38,38,.32) !important;
}
/* account-credit badge (inline lime style from the Billing formatter) → mockup .b-lime,
   two stacked lines: "Credit" then the amount */
.frosted-listing .badge[style*="84cc16"]{
  background:rgba(132,204,22,.2) !important;color:#3f6212 !important;border-color:rgba(132,204,22,.4) !important;
  flex-direction:column;align-items:center;gap:1px;
  line-height:1.2 !important;font-size:.68rem !important;padding:3px 9px !important;
}
.frosted-listing .badge[style*="84cc16"] .credit-line{display:block;white-space:nowrap;}
.frosted-listing .badge[style*="84cc16"] .bi{font-size:.68rem;}
/* REG/Billing checkmarks → disc driven by the org theme's Badge Success colors
   (BadgeSuccess = disc fill, BadgeSuccessFg = check glyph; border derives from Fg) */
.frosted-listing .table-modern .bi-check-circle-fill.text-success{
  display:inline-grid;place-items:center;
  width:26px;height:26px;border-radius:99px;
  background:var(--bit-badge-success,#e6f5d0);
  border:1px solid color-mix(in srgb, var(--bit-badge-success-fg,#3f6212) 30%, transparent);
  color:var(--bit-badge-success-fg,#3f6212) !important;font-size:.85rem !important;
}
.frosted-listing .table-modern .bi-check-circle-fill.text-success::before{content:"\f633";}
/* disabled/negative counterpart → soft red disc with a bold X (bi-x-lg) */
.frosted-listing .table-modern .bi-x-circle-fill.text-danger{
  display:inline-grid;place-items:center;
  width:26px;height:26px;border-radius:99px;
  background:rgba(220,38,38,.14);
  border:1px solid rgba(220,38,38,.32);
  color:#b91c1c !important;font-size:.85rem !important;
}
.frosted-listing .table-modern .bi-x-circle-fill.text-danger::before{content:"\f659";}
/* pending (employment_status_badge "P", any pending question icon) → disc driven
   by the theme's Badge Pending colors (Org Settings → Theme Settings):
   fill = --bit-badge-pending, glyph/border = --bit-badge-pending-fg */
.frosted-listing .table-modern .bi-question-circle-fill.text-warning{
  display:inline-grid;place-items:center;
  width:26px;height:26px;border-radius:99px;
  background:var(--bit-badge-pending,#eab308);
  border:1px solid color-mix(in srgb, var(--bit-badge-pending-fg,#ffffff) 35%, transparent);
  color:var(--bit-badge-pending-fg,#ffffff) !important;font-size:.85rem !important;
}
.frosted-listing .table-modern .bi-question-circle-fill.text-warning::before{content:"\f64e";}
/* unknown / not-set (dash) → soft slate disc */
.frosted-listing .table-modern .bi-dash-circle-fill.text-secondary{
  display:inline-grid;place-items:center;
  width:26px;height:26px;border-radius:99px;
  background:rgba(100,116,139,.14);
  border:1px solid rgba(100,116,139,.3);
  color:#475569 !important;font-size:.85rem !important;
}
.frosted-listing .table-modern .bi-dash-circle-fill.text-secondary::before{content:"\f63b";}
/* smaller-column rule: cells whose content is just a status disc center themselves */
.frosted-listing .table-modern tbody td:has(> .bi-check-circle-fill.text-success:only-child),
.frosted-listing .table-modern tbody td:has(> .bi-x-circle-fill.text-danger:only-child),
.frosted-listing .table-modern tbody td:has(> .bi-question-circle-fill.text-warning:only-child),
.frosted-listing .table-modern tbody td:has(> .bi-dash-circle-fill.text-secondary:only-child){
  text-align:center;
}
/* registration-incomplete "I" disc → matching soft red */
.frosted-listing .badge.rounded-circle.bg-danger{
  background:linear-gradient(180deg, rgba(220,38,38,.2), rgba(220,38,38,.1)) !important;
  border:1px solid rgba(220,38,38,.32) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6) !important;
  color:#b91c1c !important;
  width:28px !important;height:28px !important;
}

/* Package column: strong text like the mockup cell-strong, truncating (full list in tooltip) */
.frosted-listing .pkg-cell{
  display:inline-block;max-width:180px;
  color:#12233b;font-size:.85rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;
}

/* ===== pagination — pager centered like the mockup footer ===== */
.frosted-listing .table-pagination-modern{
  background:transparent !important;border-top:1px solid rgba(255,255,255,.5) !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.frosted-listing .table-pagination-modern .page-info{
  color:#41597a !important;grid-column:1;justify-self:start;
  font-size:.8rem !important;font-weight:500 !important;
}
.frosted-listing .table-pagination-modern .page-info + div{grid-column:2;justify-self:center;}
/* Download CSV — bottom right of the footer (moved out of the hero); same glass
   chip look the hero button had */
.frosted-listing .table-pagination-modern .pager-csv{grid-column:3;justify-self:end;}
.frosted-listing .table-pagination-modern .pager-csv .btn{
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  color:#1d5c86 !important;border-radius:11px !important;
  font-size:.8rem !important;font-weight:600 !important;
  padding:7px 13px !important;
  box-shadow:0 2px 6px rgba(17,42,84,.1) !important;
}
.frosted-listing .table-pagination-modern .pager-csv .btn:hover{background:rgba(255,255,255,.85) !important;}
.frosted-listing .pagination{margin:0 !important;justify-content:center;gap:6px;}
/* mockup .pg — 34×34 glass squares, .82rem/700 */
.frosted-listing .pagination .page-item{margin:0 !important;}
.frosted-listing .pagination .page-link{
  width:34px;height:34px;padding:0 !important;margin:0 !important;
  display:grid;place-items:center;
  font-size:.82rem !important;font-weight:700 !important;line-height:1 !important;
  background:rgba(255,255,255,.5) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  color:#41597a !important;border-radius:10px !important;
  box-shadow:none !important;text-decoration:none !important;
  transition:background .16s ease,color .16s ease;
}
.frosted-listing .pagination .page-item:not(.active):not(.disabled) .page-link:hover{
  background:rgba(255,255,255,.85) !important;color:#12233b !important;
}
.frosted-listing .pagination .page-item.disabled .page-link{
  color:rgba(65,89,122,.45) !important;background:rgba(255,255,255,.3) !important;
}
/* prev/next: swap "« Previous"/"Next »" text for chevron-only squares like the mockup */
.frosted-listing .pagination .page-item:first-child .page-link,
.frosted-listing .pagination .page-item:last-child .page-link{font-size:0 !important;}
.frosted-listing .pagination .page-item:first-child .page-link::before,
.frosted-listing .pagination .page-item:last-child .page-link::before{
  font-family:"bootstrap-icons";font-size:.82rem;line-height:1;
}
.frosted-listing .pagination .page-item:first-child .page-link::before{content:"\f284";}
.frosted-listing .pagination .page-item:last-child .page-link::before{content:"\f285";}
.frosted-listing .pagination .page-item.active .page-link{
  background-image:linear-gradient(135deg,#2674a6,#112a54) !important;
  background-color:#2674a6 !important;
  border-color:transparent !important;color:#ffffff !important;
}
@media (max-width:700px){
  .frosted-listing .table-pagination-modern{grid-template-columns:1fr;justify-items:center;row-gap:8px;}
  .frosted-listing .table-pagination-modern .page-info,
  .frosted-listing .table-pagination-modern .page-info + div,
  .frosted-listing .table-pagination-modern .pager-csv{grid-column:1;justify-self:center;}
}

/* ===== horizontal scroller — wide tables scroll inside the card, never the page ===== */
.frosted-listing .table-container-scroll{
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(65,89,122,.35) transparent;
}
.frosted-listing .table-container-scroll::-webkit-scrollbar{height:8px;width:8px;}
.frosted-listing .table-container-scroll::-webkit-scrollbar-thumb{
  background:rgba(65,89,122,.35);border-radius:99px;
}
.frosted-listing .table-container-scroll::-webkit-scrollbar-thumb:hover{background:rgba(65,89,122,.55);}
.frosted-listing .table-container-scroll::-webkit-scrollbar-track{background:transparent;}

/* ===== reports (.frosted-report modifier on .frosted-listing) =====
   Report filters are mostly dates/text fields, so unlike listing chips they
   KEEP their floating labels; fields get their taller floating height back
   (the 40px chip height would overlap label and value). */
.frosted-report .filter-section-modern .form-floating > label{
  display:block;
  color:#41597a;
  font-size:.8rem;
}
.frosted-report .filter-section-modern .form-floating > .form-control,
.frosted-report .filter-section-modern .form-floating > select.form-select{
  height:52px !important;
  min-height:52px !important;
  padding-top:1.35rem !important;
}
/* flattened row children shrink-to-fit; floating fields need a usable floor */
.frosted-report .filter-content .row > *{min-width:180px;}
/* footer action cluster: CSV + print sit together bottom-right */
.frosted-listing .table-pagination-modern .pager-csv{
  display:flex;align-items:center;gap:8px;
}