/* Tabler components and theme tokens; glass uses the native bg-blur utility.
   References: preview/pages/pay.astro, segmented-control.astro,
   layout-navbar-floating.astro and core/scss/ui/_segmented.scss. */
:root {
  --tblr-border-radius: 0.875rem;
  --tblr-border-radius-lg: 1.25rem;
  --tblr-border-radius-xl: 1.5rem;
  --tblr-border-color: rgba(82, 111, 150, 0.18);
  --tblr-border-color-translucent: rgba(82, 111, 150, 0.14);
  --kote-glass-bg: rgba(255, 255, 255, 0.72);
  --kote-glass-border: rgba(255, 255, 255, 0.86);
  --kote-glass-shadow: 0 8px 32px rgba(39, 70, 111, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --kote-modal-bg: rgba(255, 255, 255, 0.94);
  --kote-dropdown-bg: rgba(255, 255, 255, 0.96);
  --kote-input-bg: rgba(255, 255, 255, 0.8);
  --kote-nav-active-bg: rgba(255, 255, 255, 0.92);
  --kote-page-bg: #eef3fa;
}

/* Tabler's native dark mode, with matching surfaces for the existing glass UI. */
:root[data-bs-theme="dark"] {
  --kote-glass-bg: rgba(24, 36, 51, 0.88);
  --kote-glass-border: rgba(148, 163, 184, 0.2);
  --kote-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --kote-modal-bg: rgba(24, 36, 51, 0.97);
  --kote-dropdown-bg: rgba(24, 36, 51, 0.98);
  --kote-input-bg: rgba(15, 23, 34, 0.8);
  --kote-nav-active-bg: rgba(255, 255, 255, 0.08);
  --kote-page-bg: #182433;
}

body {
  background: radial-gradient(ellipse at 8% 8%, rgba(136, 195, 250, 0.38), transparent 48%),
    radial-gradient(ellipse at 95% 45%, rgba(172, 157, 240, 0.24), transparent 48%),
    radial-gradient(ellipse at 30% 95%, rgba(140, 218, 217, 0.28), transparent 48%), var(--kote-page-bg);
  background-attachment: fixed;
}

:root[data-bs-theme="dark"] body {
  background-image: radial-gradient(ellipse at 8% 8%, rgba(39, 85, 130, 0.25), transparent 48%),
    radial-gradient(ellipse at 95% 45%, rgba(86, 65, 132, 0.18), transparent 48%),
    radial-gradient(ellipse at 30% 95%, rgba(35, 104, 103, 0.16), transparent 48%);
}

:root[data-bs-theme="dark"] img.icon[src^="/assets/tabler/"][src$=".svg"] {
  filter: invert(1);
}

.card {
  --tblr-card-bg: var(--kote-glass-bg);
  --tblr-card-border-color: var(--kote-glass-border);
  --tblr-card-cap-bg: transparent;
  --tblr-card-box-shadow: var(--kote-glass-shadow);
}

.modal-content {
  --tblr-modal-bg: var(--kote-modal-bg);
  --tblr-modal-border-color: var(--kote-glass-border);
  --tblr-modal-border-radius: var(--tblr-border-radius-xl);
  --tblr-modal-box-shadow: var(--kote-glass-shadow);
}

.dropdown-menu {
  --tblr-dropdown-bg: var(--kote-dropdown-bg);
  --tblr-dropdown-border-color: var(--kote-glass-border);
  --tblr-dropdown-box-shadow: var(--kote-glass-shadow);
}

.card .table { --tblr-table-bg: transparent; }
.card .list-group { --tblr-list-group-bg: transparent; }
.form-control, .form-select { background-color: var(--kote-input-bg); }

/* iOS's legacy touch-scrolling layer clips fixed dropdowns to the table.
   Keep native horizontal scrolling without that separate compositing layer. */
.users-table { -webkit-overflow-scrolling: auto; }

#header.sticky-top {
  top: env(safe-area-inset-top, 0px);
}

#header > .navbar {
  --tblr-navbar-bg: var(--kote-glass-bg);
  --tblr-navbar-border-color: var(--kote-glass-border);
  --tblr-navbar-margin: 0.75rem;
  --tblr-navbar-border-radius: var(--tblr-border-radius-xl);
  --tblr-navbar-outline-width: 1px;
  box-shadow: var(--kote-glass-shadow);
}

.nav-segmented {
  --tblr-nav-bg: var(--kote-glass-bg);
  --tblr-nav-active-bg: var(--kote-nav-active-bg);
  --tblr-nav-radius: var(--tblr-border-radius-lg);
  --tblr-nav-padding: 0.375rem;
  --tblr-nav-height: 3rem;
  border: 1px solid var(--kote-glass-border);
  box-shadow: var(--kote-glass-shadow);
}

.user-navigation .navbar {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.user-navigation .navbar-nav { flex-grow: 0; }
.user-navigation .nav-link[aria-current="page"] { color: var(--tblr-primary); }
.user-navigation .nav-link-icon { opacity: 1; }
.user-navigation .nav-item.active::after { display: none; }

@media (min-width: 768px) {
  .user-navigation .container-xl { justify-content: center; }
  .user-navigation .nav-link { min-width: 7rem; }
  #header .header-actions .btn { min-width: 2.5rem; min-height: 2.5rem; }
}

/* The compact header already blurs its backdrop; a second blur on the
   brand creates a separate rectangular surface inside that glass panel. */
@media (max-width: 991.98px) {
  #header .navbar-brand {
    background: transparent;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Native Tabler ghost buttons, each with its own glass surface. */
#header .header-actions .btn {
  --tblr-btn-bg: var(--kote-glass-bg);
  --tblr-btn-disabled-bg: var(--kote-glass-bg);
  --tblr-btn-border-width: 0;
  --tblr-btn-border-radius: var(--tblr-border-radius-lg);
  --tblr-btn-box-shadow: var(--kote-glass-shadow);
  min-width: 1.75rem;
  min-height: 1.75rem;
}

@media (max-width: 767.98px) {
  #header .header-actions .btn {
    --tblr-btn-icon-size: 1.25rem;
    width: 2.25rem;
    height: 2.25rem;
  }
}
@media (max-width: 359.98px) {
  #header .header-actions .btn { width: 2rem; height: 2rem; }
  #header .navbar-brand { font-size: 1rem; }
  #header .navbar-brand-image { width: 1.5rem; height: 1.5rem; }
}

/* One desktop row: Tabler brand, segmented navigation and navbar actions.
   Equal outer columns keep the main menu centered as actions appear or hide. */
@media (min-width: 992px) {
  #header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem;
  }
  #header.sticky-top {
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
  }
  #header > .navbar {
    grid-column: 1 / -1;
    grid-row: 1;
    --tblr-navbar-bg: transparent;
    --tblr-navbar-margin: 0;
    --tblr-navbar-outline-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  #header > .navbar > .container-xl {
    max-width: none;
    padding: 0;
  }
  #header .navbar-brand {
    min-height: 3.5rem;
    padding: 0.375rem 0.875rem;
    background: var(--kote-glass-bg);
    border: 1px solid var(--kote-glass-border);
    border-radius: var(--tblr-border-radius-xl);
    box-shadow: var(--kote-glass-shadow);
  }
  #header .navbar-brand { margin: 0; }
  #header .header-actions .btn { width: 3.5rem; height: 3.5rem; }
  #header > .user-navigation {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
  }
  #header .user-navigation .navbar,
  #header .user-navigation .container-xl { padding: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  #header .user-navigation .nav-link {
    min-width: 0;
    padding-inline: 0.375rem;
    font-size: 0.8125rem;
  }
}

/* Retain opaque, readable surfaces when the browser cannot blur a backdrop. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  :root { --kote-glass-bg: #f8faff; }
  :root[data-bs-theme="dark"] { --kote-glass-bg: #182433; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --kote-glass-bg: #f8faff; }
  :root[data-bs-theme="dark"] { --kote-glass-bg: #182433; }
  .bg-blur { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media print {
  body { background: white; }
  .card { --tblr-card-bg: white; --tblr-card-box-shadow: none; }
}

#announcement-text {
  white-space: pre-wrap;
}