/*
 * 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;
}
.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;
}
.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;
}