/* Liquid glass surface for every popup card: dialogs, sheets and menus.
   Loaded last; !important is needed because each popup's own sheet (and one
   inline style) paints an opaque surface. Content stays readable: large data
   dialogs use a denser glass than small confirmation cards. */
:root {
  --glass-tint: 255 255 255;
  --glass-alpha: .58;
  --glass-edge: rgb(255 255 255 / .62);
  --glass-shine: rgb(255 255 255 / .85);
  --glass-shade: 12 32 38;
  --glass-backdrop: rgb(9 22 28 / .26);
}
:root[data-theme="dark"] {
  --glass-tint: 26 36 48;
  --glass-alpha: .56;
  --glass-edge: rgb(255 255 255 / .14);
  --glass-shine: rgb(255 255 255 / .22);
  --glass-shade: 0 0 0;
  --glass-backdrop: rgb(2 8 14 / .42);
}

:is(
  .admin-reference-delete-dialog,
  .import-match-dialog,
  .kantar-day-dialog,
  .mtg-mail-dialog,
  .order-delete-dialog,
  .order-email-dialog,
  .order-sheet-dialog,
  #reconciliation-dialog,
  .chart-settings-dialog,
  .chart-add-sheet,
  .location-island-menu
) {
  border: 1px solid var(--glass-edge) !important;
  background:
    linear-gradient(150deg, rgb(255 255 255 / .34) 0%, rgb(255 255 255 / .06) 42%, rgb(255 255 255 / 0) 60%, rgb(255 255 255 / .10) 100%),
    rgb(var(--glass-tint) / var(--glass-alpha)) !important;
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  backdrop-filter: blur(28px) saturate(185%);
  box-shadow:
    inset 0 1px 0 var(--glass-shine),
    inset 0 -1px 0 rgb(255 255 255 / .08),
    inset 0 0 0 .5px rgb(255 255 255 / .18),
    0 22px 60px rgb(var(--glass-shade) / .22),
    0 3px 10px rgb(var(--glass-shade) / .10) !important;
}

/* Denser glass where tables and long forms sit on the surface. */
:is(.kantar-day-dialog, .order-sheet-dialog, #reconciliation-dialog, .import-match-dialog) {
  --glass-alpha: .72;
}
:root[data-theme="dark"] :is(.kantar-day-dialog, .order-sheet-dialog, #reconciliation-dialog, .import-match-dialog) {
  --glass-alpha: .68;
}

/* Softer, rounder corners on the small cards. */
:is(.admin-reference-delete-dialog, .order-delete-dialog, .order-email-dialog, .mtg-mail-dialog, .chart-settings-dialog) {
  border-radius: 20px !important;
}

/* Let the page show through: a light, slightly blurred scrim. */
:is(
  .admin-reference-delete-dialog,
  .import-match-dialog,
  .kantar-day-dialog,
  .mtg-mail-dialog,
  .order-delete-dialog,
  .order-email-dialog,
  .order-sheet-dialog,
  .chart-add-sheet
)::backdrop {
  background: var(--glass-backdrop) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.chart-settings-backdrop {
  background: var(--glass-backdrop) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Inner surfaces of the add sheet become frosted rows instead of white slabs. */
body .chart-add-sheet {
  --sheet-bg: transparent;
  --row-bg: rgb(255 255 255 / .5);
  --fill: rgb(118 118 128 / .14);
}
:root[data-theme="dark"] body .chart-add-sheet {
  --row-bg: rgb(255 255 255 / .07);
  --fill: rgb(118 118 128 / .28);
}

/* Without backdrop-filter, glass would be see-through noise: go near-opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-alpha: .97; }
  :root[data-theme="dark"] { --glass-alpha: .96; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-alpha: .97; }
  :root[data-theme="dark"] { --glass-alpha: .96; }
}

/* Night mode paints every "-card"/"-panel" and list row as an opaque surface
   (dark-mode.css). Inside a glass popup those must stay see-through, or they
   cover the glass with a solid slab. */
:root[data-theme="dark"] :is(
  .admin-reference-delete-dialog, .import-match-dialog, .kantar-day-dialog, .mtg-mail-dialog,
  .order-delete-dialog, .order-email-dialog, .order-sheet-dialog, #reconciliation-dialog,
  .chart-settings-dialog, .chart-add-sheet, .location-island-menu
) :is(.panel, .filter-panel, .metric-card, [class*="-panel"], [class*="-card"]) {
  background: transparent !important;
  border-color: rgb(255 255 255 / .10) !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] :is(
  .admin-reference-delete-dialog, .import-match-dialog, .kantar-day-dialog, .mtg-mail-dialog,
  .order-delete-dialog, .order-email-dialog, .order-sheet-dialog, #reconciliation-dialog,
  .chart-settings-dialog, .chart-add-sheet, .location-island-menu
) :is([class$="-row"], [class$="-item"], [class$="-pill"], [class$="-option"], [class$="-fields"], [class$="-controls"], .mtg-mail-recipient-options label) {
  background-color: rgb(255 255 255 / .06) !important;
  border-color: rgb(255 255 255 / .10) !important;
}
/* Day mode: recipient rows frosted instead of solid white. */
:is(.mtg-mail-dialog, .order-email-dialog) .mtg-mail-recipient-options label {
  background-color: rgb(255 255 255 / .55) !important;
}