/* Additions to Bootstrap 5.3 for the parts it has no component for (dialer,
   uptime bars, status dots, ...). Colours come from Bootstrap's CSS variables,
   so light and dark mode both work. */

/* The hidden attribute must win over display utilities such as .d-flex */
[hidden] { display: none !important; }

.brand-mark { display: inline-grid; place-items: center; color: var(--bs-primary); }
/* Waveform logo: rounded bars of different heights */
.brand-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ico-sm { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-fill { fill: currentColor; stroke: none; }

/* "Join our Discord" buttons in Discord's brand colour */
.btn-discord {
  --bs-btn-color: #fff; --bs-btn-bg: #5865f2; --bs-btn-border-color: #5865f2;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4752c4; --bs-btn-hover-border-color: #4752c4;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #3c45a5; --bs-btn-active-border-color: #3c45a5;
  --bs-btn-focus-shadow-rgb: 88, 101, 242;
}
.discord-badge { background: #5865f2; color: #fff; }
.discord-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030;
  width: 3.5rem; height: 3.5rem; padding: 0; border-radius: 50%;
  display: grid; place-items: center; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.discord-fab:hover { transform: scale(1.06); }
.discord-fab svg { width: 1.75rem; height: 1.75rem; }
/* Pop-up notifications appear above the floating button */
.has-discord-fab .toast-container { margin-bottom: 4.5rem; }

.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.price { font-size: 2.25rem; font-weight: 800; }
.border-dashed { border-style: dashed !important; }

/* Fixed column grids (no orphaned last rows), collapsing on smaller screens */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
/* Overview on a phone: the dial code list gets tighter text (a normal
   rounded card like the others), the outside calling card below stays small */
@media (max-width: 575.98px) {
  .ov-codes { padding: .875rem .75rem; }
  .ov-codes .table { font-size: .875rem; }
  .ov-codes .table td { padding: .45rem .35rem; }
  .ov-codes .table td:first-child { width: 36%; padding-left: 0; }
  .ov-codes .table td:last-child { padding-right: 0; }
  .ov-usage { padding: .625rem .75rem; }
  .ov-usage h3 { font-size: .95rem; margin-bottom: .25rem; }
  .ov-usage p { font-size: .8rem; margin-bottom: 0; }
  .ov-usage .uptime-bars { height: 12px; margin: .4rem 0 0; }
  .ov-usage #ov-groups h3 { margin-top: .75rem !important; }
  .ov-usage #ov-groups ul { font-size: .85rem; margin-bottom: 0; padding-left: 1.1rem; }
}

/* Text inputs share a row with their buttons */
.d-flex > .form-control, .d-flex > .form-select { width: auto; flex: 1 1 10rem; }
.d-flex > .form-control[type=file] { flex-basis: 14rem; }
.d-flex > .input-group { width: auto; flex: 1 1 12rem; }

/* Call queue settings */
.d-flex > .form-control.q-short { flex: none; width: 6rem; }
.q-hours-table input[type=time] { min-width: 7.5rem; }

/* Definition lists: label column + value column */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .375rem 1rem; margin: 0; }
.kv dt { color: var(--bs-secondary-color); font-weight: 400; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.drawer .kv { grid-template-columns: 8.5rem 1fr; }

.secret {
  font-family: var(--bs-font-monospace); background: var(--bs-tertiary-bg); border: 1px dashed var(--bs-border-color);
  padding: .5rem .75rem; border-radius: var(--bs-border-radius); overflow-wrap: anywhere; user-select: all;
}
.qr { background: #fff; padding: .5rem; border-radius: var(--bs-border-radius); display: inline-block; }
.qr img { display: block; }
audio { width: 100%; max-width: 320px; height: 36px; }
tr.clickable { cursor: pointer; }

/* ---- side navigation (dashboard / admin) ---------------------------------- */
@media (min-width: 992px) { .sidenav { position: sticky; top: 5rem; } }
.sidenav .nav-link:not(.active) { color: var(--bs-body-color); }
/* Phones and tablets: the tabs are one sideways-scrolling bar that stays
   under the top bar (--navbar-h is measured in js/dashboard.js) */
@media (max-width: 991.98px) {
  .sidenav-col {
    position: sticky; top: var(--navbar-h, 56px); z-index: 1010; margin-top: -.75rem; padding-block: .5rem;
    background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color-translucent);
  }
  .sidenav { scrollbar-width: none; scroll-padding-inline: 1rem; }
  .sidenav::-webkit-scrollbar { display: none; }
  .sidenav .nav-link { padding: .4rem .8rem; }
}

/* Android app install help: the Play Protect screenshot */
.install-help-shot { display: block; width: 100%; max-width: 20rem; margin: 0 auto; border-radius: 1rem; border: 1px solid var(--bs-border-color); }

/* ---- phones ------------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .container.py-4 { padding-top: .75rem !important; }
  main.container.py-5 { padding-top: 1.25rem !important; padding-bottom: 1.5rem !important; }
  main.container.py-5 .card-body.p-4 { padding: 1.25rem !important; }
  .panel > .card.card-body, .panel > .card > .card-body, .panel .grid > .card.card-body { padding: .875rem; }
  .panel h2.h4 { font-size: 1.25rem; }
  .stat-value { font-size: 1.4rem; }
  .panel { padding-top: .25rem; }
  .panel .form-select, .panel .form-control { max-width: 100%; }
  .panel input[type="time"].w-auto { flex: 1 1 6.5rem; width: auto; }
  /* Theme picker: two tiles per row instead of one very long list (.panel:
     the picker's own rules come later in this file) */
  .panel .theme-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .panel .theme-tile { padding: .5rem; }
  .panel .theme-swatch { height: 2.5rem; }
  .sd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }

  /* Tables become one compact card per row (no sideways scrolling) */
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody { display: block; }
  .table-cards tr { display: grid; gap: .15rem .6rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--bs-border-color); }
  .table-cards tr:last-child { border-bottom: 0; }
  .table-cards td { display: block; padding: 0; border: 0; background: none; box-shadow: none; min-width: 0; }
  .table-cards td[colspan] { grid-area: auto !important; grid-column: 1 / -1 !important; text-align: center; }
  .table-cards td.text-end { text-align: left !important; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
  .table-cards td.text-end:empty { display: none; }
  .table-cards audio { width: 100%; height: 2.25rem; }
  .table-cards td.text-end audio { flex: 1 1 100%; }
  /* Call history: direction | number | status / direction | when | duration / actions */
  .tbl-calls tr { grid-template-columns: 1.25rem minmax(0, 1fr) auto; grid-template-areas: "dir num status" "dir when dur" "act act act"; }
  .tbl-calls td:nth-child(1) { grid-area: when; font-size: .8rem; color: var(--bs-secondary-color); }
  .tbl-calls td:nth-child(2) { grid-area: dir; font-size: 1.1rem; }
  .tbl-calls td:nth-child(3) { grid-area: num; font-weight: 600; overflow-wrap: anywhere; }
  .tbl-calls td:nth-child(4) { grid-area: status; justify-self: end; }
  .tbl-calls td:nth-child(5) { grid-area: dur; justify-self: end; font-size: .8rem; color: var(--bs-secondary-color); }
  .tbl-calls td:nth-child(6) { grid-area: act; }
  /* Voicemail: from | length / when / player / actions */
  .tbl-vm tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "from len" "when when" "audio audio" "act act"; }
  .tbl-vm td:nth-child(1) { grid-area: from; font-weight: 600; overflow-wrap: anywhere; }
  .tbl-vm td:nth-child(2) { grid-area: when; font-size: .8rem; color: var(--bs-secondary-color); }
  .tbl-vm td:nth-child(3) { grid-area: len; font-size: .8rem; color: var(--bs-secondary-color); }
  .tbl-vm td:nth-child(4) { grid-area: audio; margin-top: .25rem; }
  .tbl-vm td:nth-child(5) { grid-area: act; }
  /* Fax: like the call history */
  .tbl-fax tr { grid-template-columns: 1.25rem minmax(0, 1fr) auto; grid-template-areas: "dir remote status" "dir when pages" "act act act"; }
  .tbl-fax td:nth-child(1) { grid-area: when; font-size: .8rem; color: var(--bs-secondary-color); }
  .tbl-fax td:nth-child(2) { grid-area: dir; font-size: 1.1rem; }
  .tbl-fax td:nth-child(3) { grid-area: remote; font-weight: 600; overflow-wrap: anywhere; }
  .tbl-fax td:nth-child(4) { grid-area: pages; justify-self: end; font-size: .8rem; color: var(--bs-secondary-color); }
  .tbl-fax td:nth-child(5) { grid-area: status; justify-self: end; }
  .tbl-fax td:nth-child(6) { grid-area: act; }
  /* Devices: type | until / device / address */
  .tbl-dev tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "type until" "ua ua" "addr addr"; }
  .tbl-dev td:nth-child(1) { grid-area: type; font-weight: 600; }
  .tbl-dev td:nth-child(2) { grid-area: ua; overflow-wrap: anywhere; }
  .tbl-dev td:nth-child(3) { grid-area: addr; font-size: .8rem; color: var(--bs-secondary-color); }
  .tbl-dev td:nth-child(4) { grid-area: until; font-size: .8rem; color: var(--bs-secondary-color); }
  /* Signed-in sessions: browser / ip | last active / sign out */
  .tbl-sess tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ua ua" "ip seen" "act act"; }
  .tbl-sess td:nth-child(1) { grid-area: ua; overflow-wrap: anywhere; }
  .tbl-sess td:nth-child(2) { grid-area: ip; font-size: .8rem; color: var(--bs-secondary-color); }
  .tbl-sess td:nth-child(3) { grid-area: seen; font-size: .8rem; color: var(--bs-secondary-color); }
  .tbl-sess td:nth-child(4) { grid-area: act; }
}

/* ---- landing page ------------------------------------------------------------ */
.feature-icon {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--bs-border-radius-lg); display: grid; place-items: center;
  color: var(--bs-primary); background: var(--bs-primary-bg-subtle);
}
.feature-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.featurelist { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.featurelist li { padding: .3rem 0 .3rem 1.6rem; position: relative; }
.featurelist li::before { content: "\2713"; position: absolute; left: 0; color: var(--bs-success); font-weight: 700; }
.post { scroll-margin-top: 5rem; }
/* Changelog entries look like small windows: a title bar on top */
.post-window { border: 1px solid var(--bs-border-color); border-radius: .75rem; overflow: hidden; }
.post-bar { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; font-size: .8125rem;
  color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.post-dots { display: inline-flex; gap: .35rem; flex: none; }
.post-dots i { width: .65rem; height: .65rem; border-radius: 50%; background: #ff5f57; }
.post-dots i:nth-child(2) { background: #febc2e; }
.post-dots i:nth-child(3) { background: #28c840; }
.post-window .btn-close-sm { font-size: .7rem; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.dot.live { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.uptime-bars { display: flex; gap: 2px; height: 34px; align-items: stretch; margin: .75rem 0 .375rem; }
.uptime-bars span { flex: 1; border-radius: 2px; background: var(--bs-success); min-width: 2px; }
.uptime-bars span.partial { background: var(--bs-warning); }
.uptime-bars span.down { background: var(--bs-danger); }
.uptime-bars span.none { background: var(--bs-secondary-bg); }

/* ---- people ---------------------------------------------------------------------- */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 1rem;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.5rem; }
.av-0 { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.av-1 { background: linear-gradient(135deg, #0f766e, #2dd4bf); }
.av-2 { background: linear-gradient(135deg, #6d28d9, #a78bfa); }
.av-3 { background: linear-gradient(135deg, #9f1239, #fb7185); }
.av-4 { background: linear-gradient(135deg, #b45309, #fbbf24); }
.av-5 { background: linear-gradient(135deg, #1e293b, #64748b); }

.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--bs-secondary-bg); margin-right: 6px; }
.status-dot.available { background: var(--bs-success); }
.status-dot.busy { background: var(--bs-warning); }
.status-dot.dnd { background: var(--bs-danger); }
.nav-dir-count .status-dot { width: 7px; height: 7px; margin-right: 4px; }
.dir-modal .modal-content { height: min(680px, calc(100vh - 3.5rem)); }

/* Removable chips (blocked numbers, PBX signatures) */
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem .25rem .75rem; border-radius: 50rem;
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); font-family: var(--bs-font-monospace); font-size: .875rem;
}
.chip .btn-close { width: .5em; height: .5em; }
.chip.match { border-color: var(--bs-danger); background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* ---- web dialer ------------------------------------------------------------------- */
.dialer { max-width: 340px; margin: 0 auto; }
/* Stop mobile browsers zooming in when a key or button is tapped quickly twice */
button, .btn, .keypad { touch-action: manipulation; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; margin: .875rem 0; }
.keypad .btn { height: 60px; border-radius: 1rem; font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.keypad .btn small { display: block; font-size: .6rem; letter-spacing: .15em; opacity: .7; }
.call-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; }
#incoming.call-actions { grid-template-columns: repeat(2, 1fr); margin-top: .875rem; }
.transfer-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: .625rem; }
.call-btn { height: 60px; border-radius: 1rem; font-weight: 700; }
.call-btn.aux { font-size: .8rem; letter-spacing: .04em; }
.transfer-row .call-btn { height: 48px; }
/* Call volume: speaker icon next to Delete, the slider pops out below it */
.volume-wrap { position: relative; }
.volume-pop {
  position: absolute; left: 50%; top: calc(100% + .25rem); transform: translateX(-50%); z-index: 20; width: 14rem; padding: .75rem;
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .2);
}
.volume-pop .form-range { display: block; }
.volume-wrap svg [hidden] { display: none; }
.call-btn svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.call-status { min-height: 1.5em; }
.call-info-head { display: flex; align-items: center; gap: .75rem; }
.call-info .avatar { width: 46px; height: 46px; font-size: 1.25rem; }
.ci-name { font-weight: 700; font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }
.ci-details { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--bs-border-color); }
.call-info.ringing { border-color: var(--bs-success); animation: ringing 1s infinite alternate; }
@keyframes ringing { from { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), .3); } to { box-shadow: 0 0 0 10px rgba(var(--bs-success-rgb), 0); } }
.reg-status { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; }
.reg-status.on { color: var(--bs-success); }
.reg-status.off { color: var(--bs-secondary-color); }
.popped-out { display: flex; gap: 1rem; align-items: flex-start; }
.popped-out .f-icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.popped-out .f-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- tickets (modmail) -------------------------------------------------------------- */
#tk-list { max-height: 70vh; overflow-y: auto; }
.ticket-thread { display: flex; flex-direction: column; gap: .75rem; max-height: 60vh; overflow-y: auto; }
.ticket-msg { max-width: 85%; padding: .625rem .875rem; border-radius: var(--bs-border-radius-lg); background: var(--bs-tertiary-bg); align-self: flex-start; overflow-wrap: anywhere; }
.ticket-msg.staff, .ticket-msg.mine { align-self: flex-end; background: var(--bs-primary-bg-subtle); }
.ticket-meta { font-size: .75rem; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.ticket-system { align-self: center; font-size: .8rem; color: var(--bs-secondary-color); }
.ticket-img { display: block; max-width: 100%; max-height: 260px; margin-top: .5rem; border-radius: var(--bs-border-radius); }
.min-w-0 { min-width: 0; }

/* ---- admin user drawer (offcanvas) ------------------------------------------------- */
.offcanvas.drawer { --bs-offcanvas-width: min(880px, 100vw); }
.week-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: .625rem; align-items: end; }
.week-col { display: flex; flex-direction: column; align-items: center; gap: .375rem; }
.week-bar { width: 100%; height: 70px; display: flex; align-items: flex-end; background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius); overflow: hidden; }
.week-bar span { width: 100%; background: var(--bs-warning); border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; }
.action-group + .action-group { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); }
.action-group h4 { margin: 0 0 .625rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }
.danger-zone h4 { color: var(--bs-danger); }

/* ==== website themes (premium) ===========================================================
   js/theme.js sets data-pbx-theme on <html> on top of Bootstrap's light/dark mode:
   light (Bootstrap light as is), midnight, lowcontrast, highcontrast and terminal (dark),
   paper, skeuo and aero (light). */

/* Theme picker (Account) */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; }
.theme-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; padding: .625rem;
  background: var(--bs-body-bg); color: var(--bs-body-color); border: 2px solid var(--bs-border-color); border-radius: .75rem;
}
.theme-tile:hover:not(:disabled) { border-color: rgba(var(--bs-primary-rgb), .5); }
.theme-tile.active { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .2); }
.theme-tile:disabled { opacity: .55; cursor: not-allowed; }
.theme-swatch { display: block; width: 100%; height: 3.25rem; border-radius: .5rem; margin-bottom: .25rem; border: 1px solid rgba(0, 0, 0, .12); }
.sw-auto { background: linear-gradient(135deg, #ffffff 50%, #212529 50%); }
.sw-light { background: linear-gradient(#f8f9fa 30%, #ffffff 30%), #fff; box-shadow: inset 0 -10px 0 #0d6efd; }
.sw-midnight { background: radial-gradient(circle at 30% 20%, #1b2a5c, #070b18 70%); box-shadow: inset 0 -10px 0 #4c6ef5; }
.sw-lowcontrast { background: #26282c; box-shadow: inset 0 -10px 0 #59667a; }
.sw-highcontrast { background: #000; border: 2px solid #fff; box-shadow: inset 0 -10px 0 #ffd400; }
.sw-paper { background: radial-gradient(ellipse, #fbf5e7, #eadfc4); box-shadow: inset 0 -10px 0 #8b5a2b; }
.sw-terminal { background: repeating-linear-gradient(rgba(61, 255, 110, .12) 0 1px, transparent 1px 4px), #030803; box-shadow: inset 0 -10px 0 #3dff6e; }
.sw-skeuodark {
  background: linear-gradient(#9fd0ff 0%, #4a98f2 49%, #1f6fe0 51%, #3f8ff3 100%) bottom / 100% 12px no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px), linear-gradient(#3a3c40, #1f2022);
}
.sw-aero {
  background: linear-gradient(#7fd0ff 0%, #2ba3ea 48%, #0f86d3 52%, #36b0f0 100%) bottom / 100% 12px no-repeat,
    radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, .9), transparent 60%), linear-gradient(#7cc4f0, #e9f7ff 75%, #d4f2c8);
}
.sw-skeuo {
  background: linear-gradient(#8ec5ff 0%, #3d8ef0 50%, #1f6fe0 51%, #3c8cf2 100%) bottom / 100% 12px no-repeat,
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .25) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px), #d9d6cf;
}

/* ---- Midnight: deep navy ---- */
[data-pbx-theme="midnight"] {
  --bs-body-bg: #070b18; --bs-body-bg-rgb: 7, 11, 24;
  --bs-body-color: #c8d3f0; --bs-body-color-rgb: 200, 211, 240;
  --bs-emphasis-color: #eef2ff; --bs-emphasis-color-rgb: 238, 242, 255;
  --bs-secondary-color: rgba(200, 211, 240, .62);
  --bs-secondary-bg: #141d3a; --bs-secondary-bg-rgb: 20, 29, 58;
  --bs-tertiary-bg: #0c1328; --bs-tertiary-bg-rgb: 12, 19, 40;
  --bs-border-color: #1f2b50;
  --bs-primary: #6d8cff; --bs-primary-rgb: 109, 140, 255;
  --bs-primary-bg-subtle: #121d45; --bs-primary-text-emphasis: #aebfff;
  --bs-link-color: #8ea6ff; --bs-link-color-rgb: 142, 166, 255;
  --bs-link-hover-color: #b6c5ff; --bs-link-hover-color-rgb: 182, 197, 255;
}
[data-pbx-theme="midnight"] body { background: radial-gradient(ellipse at top, #101b3d 0%, #070b18 55%) fixed; }
[data-pbx-theme="midnight"] .card, [data-pbx-theme="midnight"] .modal-content, [data-pbx-theme="midnight"] .offcanvas { --bs-card-bg: #0b1226; --bs-modal-bg: #0b1226; --bs-offcanvas-bg: #0b1226; }
[data-pbx-theme="midnight"] .btn-primary {
  --bs-btn-bg: #4c6ef5; --bs-btn-border-color: #4c6ef5; --bs-btn-hover-bg: #6382f7; --bs-btn-hover-border-color: #6382f7;
  --bs-btn-active-bg: #3b5bdb; --bs-btn-active-border-color: #3b5bdb; --bs-btn-disabled-bg: #4c6ef5; --bs-btn-disabled-border-color: #4c6ef5;
}
[data-pbx-theme="midnight"] .btn-outline-primary { --bs-btn-color: #8ea6ff; --bs-btn-border-color: #4c6ef5; --bs-btn-hover-bg: #4c6ef5; --bs-btn-hover-border-color: #4c6ef5; }
[data-pbx-theme="midnight"] .nav-pills { --bs-nav-pills-link-active-bg: #4c6ef5; }

/* ---- Low contrast: dim greys close together, muted colours (dark) ---- */
[data-pbx-theme="lowcontrast"] {
  --bs-body-bg: #26282c; --bs-body-bg-rgb: 38, 40, 44;
  --bs-body-color: #9a9ea6; --bs-body-color-rgb: 154, 158, 166;
  --bs-emphasis-color: #b4b8bf; --bs-emphasis-color-rgb: 180, 184, 191;
  --bs-secondary-color: rgba(154, 158, 166, .7);
  --bs-secondary-bg: #313439; --bs-secondary-bg-rgb: 49, 52, 57;
  --bs-tertiary-bg: #2b2e32; --bs-tertiary-bg-rgb: 43, 46, 50;
  --bs-border-color: #393c42;
  --bs-primary: #7d8ba1; --bs-primary-rgb: 125, 139, 161;
  --bs-primary-bg-subtle: #30363f; --bs-primary-text-emphasis: #a3aec0;
  --bs-link-color: #8d9ab0; --bs-link-color-rgb: 141, 154, 176;
  --bs-link-hover-color: #a3aec0; --bs-link-hover-color-rgb: 163, 174, 192;
}
[data-pbx-theme="lowcontrast"] :is(.card, .modal-content, .offcanvas) { --bs-card-bg: #2a2c30; --bs-modal-bg: #2a2c30; --bs-offcanvas-bg: #2a2c30; }
[data-pbx-theme="lowcontrast"] :is(.form-control, .form-select) { background-color: #2e3135; border-color: #3d4046; }
[data-pbx-theme="lowcontrast"] .btn-primary {
  --bs-btn-color: #d3d6db; --bs-btn-bg: #59667a; --bs-btn-border-color: #59667a; --bs-btn-hover-color: #dfe2e6;
  --bs-btn-hover-bg: #637186; --bs-btn-hover-border-color: #637186; --bs-btn-active-bg: #505c6e; --bs-btn-active-border-color: #505c6e;
  --bs-btn-disabled-bg: #59667a; --bs-btn-disabled-border-color: #59667a;
}
[data-pbx-theme="lowcontrast"] .btn-outline-primary { --bs-btn-color: #8d9ab0; --bs-btn-border-color: #4d5868; --bs-btn-hover-bg: #59667a; --bs-btn-hover-border-color: #59667a; --bs-btn-hover-color: #dfe2e6; }
[data-pbx-theme="lowcontrast"] .btn-outline-secondary { --bs-btn-color: #9a9ea6; --bs-btn-border-color: #44484f; --bs-btn-hover-bg: #363a40; --bs-btn-hover-border-color: #44484f; --bs-btn-hover-color: #b4b8bf; }
[data-pbx-theme="lowcontrast"] .nav-pills { --bs-nav-pills-link-active-bg: #444c59; --bs-nav-pills-link-active-color: #c7cbd2; }
[data-pbx-theme="lowcontrast"] :is(.badge, .alert, .btn-success, .btn-danger, .btn-warning, .btn-discord, .text-bg-success, .text-bg-danger, .avatar) { filter: saturate(.45) brightness(.85); }

/* ---- High contrast: black, white and yellow, thick edges (dark) ---- */
[data-pbx-theme="highcontrast"] {
  --bs-body-bg: #000; --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: #fff; --bs-body-color-rgb: 255, 255, 255;
  --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #e6e6e6;
  --bs-secondary-bg: #1a1a1a; --bs-secondary-bg-rgb: 26, 26, 26;
  --bs-tertiary-bg: #000; --bs-tertiary-bg-rgb: 0, 0, 0;
  --bs-border-color: #fff; --bs-border-width: 2px;
  --bs-primary: #ffd400; --bs-primary-rgb: 255, 212, 0;
  --bs-primary-bg-subtle: #332b00; --bs-primary-text-emphasis: #ffe566;
  --bs-link-color: #ffd400; --bs-link-color-rgb: 255, 212, 0;
  --bs-link-hover-color: #fff; --bs-link-hover-color-rgb: 255, 255, 255;
}
[data-pbx-theme="highcontrast"] a { text-decoration: underline; }
[data-pbx-theme="highcontrast"] :is(.card, .modal-content, .offcanvas) { --bs-card-bg: #000; --bs-modal-bg: #000; --bs-offcanvas-bg: #000; --bs-card-border-color: #fff; }
[data-pbx-theme="highcontrast"] .navbar { border-bottom: 2px solid #fff !important; }
[data-pbx-theme="highcontrast"] :is(.form-control, .form-select) { background-color: #000; color: #fff; border: 2px solid #fff; }
[data-pbx-theme="highcontrast"] :is(.btn, .form-control, .form-select, .nav-link, .theme-tile):focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; box-shadow: none; }
[data-pbx-theme="highcontrast"] .btn { border-width: 2px; font-weight: 700; }
[data-pbx-theme="highcontrast"] .btn-primary {
  --bs-btn-color: #000; --bs-btn-bg: #ffd400; --bs-btn-border-color: #ffd400; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff; --bs-btn-active-color: #000; --bs-btn-active-bg: #ffe566; --bs-btn-active-border-color: #ffe566;
  --bs-btn-disabled-color: #000; --bs-btn-disabled-bg: #ffd400; --bs-btn-disabled-border-color: #ffd400;
}
[data-pbx-theme="highcontrast"] :is(.btn-outline-primary, .btn-outline-secondary) {
  --bs-btn-color: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #ffd400; --bs-btn-hover-border-color: #ffd400;
  --bs-btn-active-color: #000; --bs-btn-active-bg: #ffd400;
}
[data-pbx-theme="highcontrast"] .nav-pills { --bs-nav-pills-link-active-bg: #ffd400; --bs-nav-pills-link-active-color: #000; }
[data-pbx-theme="highcontrast"] .text-body-secondary { color: #e6e6e6 !important; }
[data-pbx-theme="highcontrast"] .badge { border: 1px solid #fff; }

/* ---- Paper: warm sepia pages, ink-brown text, a book face (light) ---- */
[data-pbx-theme="paper"] {
  --bs-body-bg: #f3ead6; --bs-body-bg-rgb: 243, 234, 214;
  --bs-body-color: #4a3b28; --bs-body-color-rgb: 74, 59, 40;
  --bs-emphasis-color: #2f2416; --bs-emphasis-color-rgb: 47, 36, 22;
  --bs-secondary-color: rgba(74, 59, 40, .7);
  --bs-secondary-bg: #e8dcc0; --bs-secondary-bg-rgb: 232, 220, 192;
  --bs-tertiary-bg: #ede2c9; --bs-tertiary-bg-rgb: 237, 226, 201;
  --bs-border-color: #d6c6a2;
  --bs-primary: #8b5a2b; --bs-primary-rgb: 139, 90, 43;
  --bs-primary-bg-subtle: #ead7bd; --bs-primary-text-emphasis: #6b4420;
  --bs-link-color: #8b5a2b; --bs-link-color-rgb: 139, 90, 43;
  --bs-link-hover-color: #6b4420; --bs-link-hover-color-rgb: 107, 68, 32;
  --bs-body-font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}
[data-pbx-theme="paper"] body { background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, .35), rgba(0, 0, 0, .04)); background-attachment: fixed; }
[data-pbx-theme="paper"] :is(.card, .modal-content, .offcanvas) { --bs-card-bg: #fbf5e7; --bs-modal-bg: #fbf5e7; --bs-offcanvas-bg: #fbf5e7; box-shadow: 0 1px 2px rgba(74, 59, 40, .12), 0 4px 14px rgba(74, 59, 40, .08); }
[data-pbx-theme="paper"] :is(.form-control, .form-select) { background-color: #fffaf0; }
[data-pbx-theme="paper"] .btn-primary {
  --bs-btn-bg: #8b5a2b; --bs-btn-border-color: #8b5a2b; --bs-btn-hover-bg: #774b22; --bs-btn-hover-border-color: #774b22;
  --bs-btn-active-bg: #643f1c; --bs-btn-active-border-color: #643f1c; --bs-btn-disabled-bg: #8b5a2b; --bs-btn-disabled-border-color: #8b5a2b;
}
[data-pbx-theme="paper"] .btn-outline-primary { --bs-btn-color: #8b5a2b; --bs-btn-border-color: #b88c5e; --bs-btn-hover-bg: #8b5a2b; --bs-btn-hover-border-color: #8b5a2b; }
[data-pbx-theme="paper"] .nav-pills { --bs-nav-pills-link-active-bg: #8b5a2b; }
[data-pbx-theme="paper"] :is(.badge, .btn-success, .btn-danger, .text-bg-success, .text-bg-danger, .avatar) { filter: sepia(.35) saturate(.8); }

/* ---- Terminal: green phosphor on black, monospace, scanlines (dark). Body text is a
   pale green and the effects are light so longer text stays easy to read ---- */
[data-pbx-theme="terminal"] {
  --bs-body-bg: #030803; --bs-body-bg-rgb: 3, 8, 3;
  --bs-body-color: #c6f5d1; --bs-body-color-rgb: 198, 245, 209;
  --bs-emphasis-color: #eafff0; --bs-emphasis-color-rgb: 234, 255, 240;
  --bs-secondary-color: #8fd6a2;
  --bs-secondary-bg: #0a1d0d; --bs-secondary-bg-rgb: 10, 29, 13;
  --bs-tertiary-bg: #061207; --bs-tertiary-bg-rgb: 6, 18, 7;
  --bs-border-color: #145c26;
  --bs-primary: #3dff6e; --bs-primary-rgb: 61, 255, 110;
  --bs-primary-bg-subtle: #0b2a12; --bs-primary-text-emphasis: #9bffb6;
  --bs-link-color: #9bffb6; --bs-link-color-rgb: 155, 255, 182;
  --bs-link-hover-color: #d4ffe0; --bs-link-hover-color-rgb: 212, 255, 224;
  --bs-body-font-family: "Cascadia Mono", "Fira Code", Consolas, "Courier New", monospace;
  --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0;
}
[data-pbx-theme="terminal"] body { text-shadow: 0 0 1px rgba(61, 255, 110, .35); line-height: 1.6; }
[data-pbx-theme="terminal"] :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .navbar-brand, .stat-value) { color: #4dff7e; text-shadow: 0 0 6px rgba(61, 255, 110, .35); }
[data-pbx-theme="terminal"] .text-body-secondary { color: #8fd6a2 !important; }
/* Faint CRT scanlines over the whole page (clicks pass through) */
[data-pbx-theme="terminal"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0 3px, rgba(0, 0, 0, .07) 3px 4px);
}
[data-pbx-theme="terminal"] :is(.card, .modal-content, .offcanvas) { --bs-card-bg: #051006; --bs-modal-bg: #051006; --bs-offcanvas-bg: #051006; box-shadow: 0 0 12px rgba(61, 255, 110, .08); }
[data-pbx-theme="terminal"] :is(.form-control, .form-select) { background-color: #020602; color: #eafff0; caret-color: #3dff6e; border-color: #1f7a36; }
[data-pbx-theme="terminal"] .form-control::placeholder { color: #5fa872; }
[data-pbx-theme="terminal"] .btn, [data-pbx-theme="terminal"] .badge, [data-pbx-theme="terminal"] .theme-tile { border-radius: 0; }
/* The main action is filled, so it stands out from the outlined buttons */
[data-pbx-theme="terminal"] .btn-primary {
  --bs-btn-color: #021004; --bs-btn-bg: #3dff6e; --bs-btn-border-color: #3dff6e; --bs-btn-hover-color: #021004; --bs-btn-hover-bg: #8affa8;
  --bs-btn-hover-border-color: #8affa8; --bs-btn-active-color: #021004; --bs-btn-active-bg: #b8ffcb; --bs-btn-active-border-color: #b8ffcb;
  --bs-btn-disabled-color: #021004; --bs-btn-disabled-bg: #1d8a3a; --bs-btn-disabled-border-color: #1d8a3a; text-shadow: none;
}
[data-pbx-theme="terminal"] :is(.btn-outline-primary, .btn-outline-secondary, .btn-success) {
  --bs-btn-color: #3dff6e; --bs-btn-bg: transparent; --bs-btn-border-color: #3dff6e; --bs-btn-hover-color: #030803; --bs-btn-hover-bg: #3dff6e;
  --bs-btn-hover-border-color: #3dff6e; --bs-btn-active-color: #030803; --bs-btn-active-bg: #9bffb6; --bs-btn-active-border-color: #9bffb6;
  --bs-btn-disabled-color: #1d8a3a; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #145c26;
}
[data-pbx-theme="terminal"] .btn:hover { text-shadow: none; }
[data-pbx-theme="terminal"] .nav-pills { --bs-nav-pills-link-active-bg: #3dff6e; --bs-nav-pills-link-active-color: #030803; }
[data-pbx-theme="terminal"] .nav-pills .nav-link.active { text-shadow: none; }
[data-pbx-theme="terminal"] .navbar { border-bottom: 1px solid #145c26 !important; }

/* ---- Aero: sky, glass panels and glossy pills, the 2008 desktop look (light) ---- */
[data-pbx-theme="aero"] {
  --bs-body-color: #1e3a52; --bs-body-color-rgb: 30, 58, 82;
  --bs-emphasis-color: #0f2538; --bs-emphasis-color-rgb: 15, 37, 56;
  --bs-secondary-color: rgba(30, 58, 82, .7);
  --bs-tertiary-bg: rgba(255, 255, 255, .5); --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-border-color: rgba(255, 255, 255, .75);
  --bs-primary: #1688d6; --bs-primary-rgb: 22, 136, 214;
  --bs-body-font-family: "Segoe UI", "Frutiger", "Helvetica Neue", Arial, sans-serif;
  --bs-border-radius: .65rem; --bs-border-radius-lg: .9rem;
}
[data-pbx-theme="aero"] body {
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 85%, rgba(140, 230, 140, .55), transparent 70%),
    radial-gradient(ellipse 70% 50% at 70% 20%, rgba(120, 200, 255, .5), transparent 70%),
    linear-gradient(#7cc4f0 0%, #bfe6fb 45%, #e9f7ff 75%, #d4f2c8 100%) fixed;
  background-attachment: fixed;
}
/* Frosted glass panels */
[data-pbx-theme="aero"] :is(.card, .modal-content, .post-window, .theme-tile) {
  background-color: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 22px rgba(20, 70, 120, .18);
}
[data-pbx-theme="aero"] .navbar {
  background-image: linear-gradient(rgba(255, 255, 255, .75), rgba(210, 236, 252, .55)) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .9) !important; box-shadow: 0 2px 12px rgba(20, 70, 120, .15);
}
[data-pbx-theme="aero"] :is(.form-control, .form-select) { background-color: rgba(255, 255, 255, .85); border-color: #9cc7e6; }
[data-pbx-theme="aero"] .btn { border-radius: 2rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 5px rgba(20, 70, 120, .25); }
[data-pbx-theme="aero"] .btn-primary { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-border-color: #0d6aab; --bs-btn-hover-border-color: #0d6aab; background-image: linear-gradient(#7fd0ff 0%, #2ba3ea 48%, #0f86d3 52%, #36b0f0 100%); text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); }
[data-pbx-theme="aero"] .btn-success { --bs-btn-border-color: #2f8a20; --bs-btn-hover-border-color: #2f8a20; background-image: linear-gradient(#b8f39a 0%, #63c93e 48%, #45ad22 52%, #6fd24a 100%); text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); }
[data-pbx-theme="aero"] .btn-danger { background-image: linear-gradient(#ffb2a8 0%, #f05a4e 48%, #d63a2f 52%, #f26a5e 100%); }
[data-pbx-theme="aero"] :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger) {
  --bs-btn-color: #1e3a52; --bs-btn-hover-color: #0f2538; --bs-btn-border-color: #8fbfe0; --bs-btn-hover-border-color: #5aa6dc;
  --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; --bs-btn-active-color: #0f2538;
  background-image: linear-gradient(rgba(255, 255, 255, .95), rgba(225, 242, 253, .85) 50%, rgba(205, 232, 250, .85) 51%, rgba(238, 248, 255, .95));
}
[data-pbx-theme="aero"] .btn:hover { filter: brightness(1.06); }
[data-pbx-theme="aero"] .nav-pills .nav-link.active {
  background-image: linear-gradient(#7fd0ff 0%, #2ba3ea 48%, #0f86d3 52%, #36b0f0 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(20, 70, 120, .3);
}
[data-pbx-theme="aero"] .table { --bs-table-bg: transparent; }

/* ---- Skeuomorphic: late 2000s - linen, brushed metal, glossy aqua buttons, bevels ---- */
[data-pbx-theme="skeuo"] {
  --bs-body-color: #333; --bs-body-color-rgb: 51, 51, 51;
  --bs-border-color: #b3b0aa;
  --bs-primary: #2a7ae8; --bs-primary-rgb: 42, 122, 232;
  --bs-tertiary-bg: #ecebe8; --bs-tertiary-bg-rgb: 236, 235, 232;
  --bs-body-font-family: "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-border-radius: .55rem; --bs-border-radius-lg: .75rem;
}
[data-pbx-theme="skeuo"] body {
  background-color: #d9d6cf;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .02) 0 2px, transparent 2px 5px),
    linear-gradient(#e2dfd9, #cdc9c1);
  background-attachment: fixed;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}
[data-pbx-theme="skeuo"] :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) { color: #3a3a3a; text-shadow: 0 1px 0 #fff; }
/* Brushed metal title bar */
[data-pbx-theme="skeuo"] .navbar {
  background-image: linear-gradient(#f4f4f4, #d2d2d2 55%, #c4c4c4) !important;
  border-bottom: 1px solid #7f7f7f !important; box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0, 0, 0, .3);
}
[data-pbx-theme="skeuo"] .navbar .nav-link, [data-pbx-theme="skeuo"] .navbar-brand { color: #2f2f2f; text-shadow: 0 1px 0 #fff; }
/* Raised panels */
[data-pbx-theme="skeuo"] :is(.card, .modal-content, .post-window, .theme-tile) {
  background-image: linear-gradient(#fefefe, #efefed); border: 1px solid #a9a6a0;
  box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgba(0, 0, 0, .2);
}
[data-pbx-theme="skeuo"] .theme-tile.active { border-color: #2a7ae8; box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(42, 122, 232, .35); }
[data-pbx-theme="skeuo"] .post-bar { background-image: linear-gradient(#ececec, #cfcfcf); border-bottom-color: #9c9c9c; }
/* Glossy buttons: a highlight on the top half, a hard edge in the middle */
[data-pbx-theme="skeuo"] .btn {
  border-radius: 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(0, 0, 0, .3);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
[data-pbx-theme="skeuo"] .btn:hover { filter: brightness(1.07); }
[data-pbx-theme="skeuo"] .btn:active { filter: brightness(.93); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
[data-pbx-theme="skeuo"] .btn-primary { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-border-color: #1a5bb5; --bs-btn-hover-border-color: #1a5bb5; background-image: linear-gradient(#9fd0ff 0%, #4a98f2 49%, #1f6fe0 51%, #3f8ff3 100%); }
[data-pbx-theme="skeuo"] .btn-success { --bs-btn-border-color: #2c7a1d; --bs-btn-hover-border-color: #2c7a1d; background-image: linear-gradient(#b4ec8e 0%, #5fc23a 49%, #3d9e1f 51%, #5cbf37 100%); }
[data-pbx-theme="skeuo"] .btn-danger { --bs-btn-border-color: #9b1c1c; --bs-btn-hover-border-color: #9b1c1c; background-image: linear-gradient(#ffaaa0 0%, #ec5246 49%, #c82a20 51%, #e8493d 100%); }
[data-pbx-theme="skeuo"] .btn-warning { background-image: linear-gradient(#ffe7a3 0%, #f7c331 49%, #e0a400 51%, #f3bd2a 100%); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
[data-pbx-theme="skeuo"] :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-light, .btn-secondary) {
  --bs-btn-color: #2f2f2f; --bs-btn-hover-color: #2f2f2f; --bs-btn-border-color: #8f8f8f; --bs-btn-hover-border-color: #7a7a7a;
  --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; --bs-btn-active-color: #2f2f2f;
  background-image: linear-gradient(#ffffff 0%, #ececec 49%, #dcdcdc 51%, #f0f0f0 100%); text-shadow: 0 1px 0 #fff;
}
[data-pbx-theme="skeuo"] .btn-outline-danger { --bs-btn-color: #b02a20; --bs-btn-hover-color: #b02a20; }
/* Inset fields */
[data-pbx-theme="skeuo"] :is(.form-control, .form-select) { background-color: #fff; border-color: #a2a2a2; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22); }
[data-pbx-theme="skeuo"] .form-control:focus, [data-pbx-theme="skeuo"] .form-select:focus { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22), 0 0 0 3px rgba(42, 122, 232, .45); }
/* Side navigation: selected item as a glossy blue pill */
[data-pbx-theme="skeuo"] .nav-pills .nav-link.active {
  background-image: linear-gradient(#8ec5ff 0%, #4a98f2 49%, #1f6fe0 51%, #3f8ff3 100%); color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .3);
}
[data-pbx-theme="skeuo"] .badge { background-image: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .08) 51%); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); }
[data-pbx-theme="skeuo"] .table { --bs-table-bg: transparent; }
[data-pbx-theme="skeuo"] .keypad .btn, [data-pbx-theme="skeuo"] .call-btn { border-radius: 1.25rem; }

/* ---- Skeuomorphic dark: stitched dark leather, smoked metal, glossy buttons (dark) ---- */
[data-pbx-theme="skeuodark"] {
  --bs-body-bg: #1f2022; --bs-body-bg-rgb: 31, 32, 34;
  --bs-body-color: #d6d6d6; --bs-body-color-rgb: 214, 214, 214;
  --bs-emphasis-color: #f2f2f2; --bs-emphasis-color-rgb: 242, 242, 242;
  --bs-secondary-color: rgba(214, 214, 214, .62);
  --bs-secondary-bg: #2c2e31; --bs-secondary-bg-rgb: 44, 46, 49;
  --bs-tertiary-bg: #26282b; --bs-tertiary-bg-rgb: 38, 40, 43;
  --bs-border-color: #121314;
  --bs-primary: #4a98f2; --bs-primary-rgb: 74, 152, 242;
  --bs-link-color: #7ab6ff; --bs-link-color-rgb: 122, 182, 255;
  --bs-body-font-family: "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-border-radius: .55rem; --bs-border-radius-lg: .75rem;
}
[data-pbx-theme="skeuodark"] body {
  background-color: #1f2022;
  background-image:
    radial-gradient(ellipse at top, rgba(255, 255, 255, .06), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 4px),
    linear-gradient(#2a2b2e, #17181a);
  background-attachment: fixed;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .75);
}
[data-pbx-theme="skeuodark"] :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) { color: #ececec; text-shadow: 0 -1px 0 #000, 0 1px 0 rgba(255, 255, 255, .06); }
/* Smoked metal title bar */
[data-pbx-theme="skeuodark"] .navbar {
  background-image: linear-gradient(#55585d, #36383c 55%, #2a2c2f) !important;
  border-bottom: 1px solid #000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 8px rgba(0, 0, 0, .6);
}
[data-pbx-theme="skeuodark"] .navbar .nav-link, [data-pbx-theme="skeuodark"] .navbar-brand { color: #ececec; text-shadow: 0 -1px 0 #000; }
/* Leather panels with stitching */
[data-pbx-theme="skeuodark"] :is(.card, .modal-content, .post-window, .theme-tile) {
  --bs-card-bg: transparent; --bs-modal-bg: #2c2e31;
  background-image: linear-gradient(#36383c, #2a2c2f); border: 1px solid #0c0c0d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 3px 10px rgba(0, 0, 0, .6);
}
[data-pbx-theme="skeuodark"] .card { outline: 1px dashed rgba(255, 255, 255, .1); outline-offset: -6px; }
[data-pbx-theme="skeuodark"] .theme-tile.active { border-color: #4a98f2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 3px rgba(74, 152, 242, .4); }
[data-pbx-theme="skeuodark"] .post-bar { background-image: linear-gradient(#4a4c50, #2f3134); border-bottom-color: #000; }
[data-pbx-theme="skeuodark"] .offcanvas { --bs-offcanvas-bg: #2a2c2f; }
/* Glossy buttons, like the light version */
[data-pbx-theme="skeuodark"] .btn {
  border-radius: 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .6);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
}
[data-pbx-theme="skeuodark"] .btn:hover { filter: brightness(1.1); }
[data-pbx-theme="skeuodark"] .btn:active { filter: brightness(.9); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); }
[data-pbx-theme="skeuodark"] .btn-primary { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-border-color: #0e3f80; --bs-btn-hover-border-color: #0e3f80; background-image: linear-gradient(#9fd0ff 0%, #4a98f2 49%, #1f6fe0 51%, #3f8ff3 100%); }
[data-pbx-theme="skeuodark"] .btn-success { --bs-btn-border-color: #1d5512; --bs-btn-hover-border-color: #1d5512; background-image: linear-gradient(#b4ec8e 0%, #5fc23a 49%, #3d9e1f 51%, #5cbf37 100%); }
[data-pbx-theme="skeuodark"] .btn-danger { --bs-btn-border-color: #6b1010; --bs-btn-hover-border-color: #6b1010; background-image: linear-gradient(#ffaaa0 0%, #ec5246 49%, #c82a20 51%, #e8493d 100%); }
[data-pbx-theme="skeuodark"] .btn-warning { background-image: linear-gradient(#ffe7a3 0%, #f7c331 49%, #e0a400 51%, #f3bd2a 100%); }
[data-pbx-theme="skeuodark"] :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-light, .btn-secondary) {
  --bs-btn-color: #ececec; --bs-btn-hover-color: #fff; --bs-btn-border-color: #0c0c0d; --bs-btn-hover-border-color: #000;
  --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; --bs-btn-active-color: #fff;
  background-image: linear-gradient(#5d6065 0%, #43464a 49%, #33353a 51%, #474a4f 100%);
}
[data-pbx-theme="skeuodark"] .btn-outline-danger { --bs-btn-color: #ff8a80; --bs-btn-hover-color: #ffb0a8; }
/* Sunken fields */
[data-pbx-theme="skeuodark"] :is(.form-control, .form-select) {
  background-color: #18191b; color: #e8e8e8; border-color: #0a0a0b;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .07);
}
[data-pbx-theme="skeuodark"] :is(.form-control, .form-select):focus { box-shadow: inset 0 1px 4px rgba(0, 0, 0, .7), 0 0 0 3px rgba(74, 152, 242, .5); }
[data-pbx-theme="skeuodark"] .nav-pills .nav-link:not(.active) { color: #d6d6d6; }
[data-pbx-theme="skeuodark"] .nav-pills .nav-link.active {
  background-image: linear-gradient(#8ec5ff 0%, #4a98f2 49%, #1f6fe0 51%, #3f8ff3 100%); color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 3px rgba(0, 0, 0, .6);
}
[data-pbx-theme="skeuodark"] .badge { background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .12) 51%); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
[data-pbx-theme="skeuodark"] .table { --bs-table-bg: transparent; }
[data-pbx-theme="skeuodark"] .keypad .btn, [data-pbx-theme="skeuodark"] .call-btn { border-radius: 1.25rem; }
/* ---- Nord: arctic blue-greys, frost accents (dark) ---- */
[data-pbx-theme="nord"] {
  --bs-body-bg: #2e3440; --bs-body-bg-rgb: 46, 52, 64;
  --bs-body-color: #d8dee9; --bs-body-color-rgb: 216, 222, 233;
  --bs-emphasis-color: #eceff4; --bs-emphasis-color-rgb: 236, 239, 244;
  --bs-secondary-color: rgba(216, 222, 233, .68);
  --bs-secondary-bg: #3b4252; --bs-secondary-bg-rgb: 59, 66, 82;
  --bs-tertiary-bg: #343a47; --bs-tertiary-bg-rgb: 52, 58, 71;
  --bs-border-color: #434c5e;
  --bs-primary: #88c0d0; --bs-primary-rgb: 136, 192, 208;
  --bs-primary-bg-subtle: #3a4a5a; --bs-primary-text-emphasis: #a9d4e0;
  --bs-link-color: #88c0d0; --bs-link-color-rgb: 136, 192, 208;
  --bs-link-hover-color: #8fbcbb; --bs-link-hover-color-rgb: 143, 188, 187;
  --bs-success: #a3be8c; --bs-success-rgb: 163, 190, 140; --bs-danger: #bf616a; --bs-danger-rgb: 191, 97, 106;
  --bs-warning: #ebcb8b; --bs-warning-rgb: 235, 203, 139;
}
[data-pbx-theme="nord"] :is(.card, .modal-content, .offcanvas) { --bs-card-bg: #3b4252; --bs-modal-bg: #3b4252; --bs-offcanvas-bg: #3b4252; }
[data-pbx-theme="nord"] :is(.form-control, .form-select) { background-color: #343a47; border-color: #4c566a; }
[data-pbx-theme="nord"] .btn-primary {
  --bs-btn-color: #eceff4; --bs-btn-bg: #5e81ac; --bs-btn-border-color: #5e81ac; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6c8fbd;
  --bs-btn-hover-border-color: #6c8fbd; --bs-btn-active-bg: #516f96; --bs-btn-active-border-color: #516f96; --bs-btn-disabled-bg: #5e81ac; --bs-btn-disabled-border-color: #5e81ac;
}
[data-pbx-theme="nord"] .btn-outline-primary { --bs-btn-color: #88c0d0; --bs-btn-border-color: #5e81ac; --bs-btn-hover-bg: #5e81ac; --bs-btn-hover-border-color: #5e81ac; --bs-btn-hover-color: #eceff4; }
[data-pbx-theme="nord"] .btn-success { --bs-btn-bg: #8fb07a; --bs-btn-border-color: #8fb07a; --bs-btn-hover-bg: #a3be8c; --bs-btn-color: #2e3440; --bs-btn-hover-color: #2e3440; }
[data-pbx-theme="nord"] .btn-danger { --bs-btn-bg: #bf616a; --bs-btn-border-color: #bf616a; --bs-btn-hover-bg: #cc747c; }
[data-pbx-theme="nord"] .nav-pills { --bs-nav-pills-link-active-bg: #5e81ac; }

/* ---- Solarized: the classic cream and teal palette (light) ---- */
[data-pbx-theme="solarized"] {
  --bs-body-bg: #fdf6e3; --bs-body-bg-rgb: 253, 246, 227;
  --bs-body-color: #4f6369; --bs-body-color-rgb: 79, 99, 105;
  --bs-emphasis-color: #073642; --bs-emphasis-color-rgb: 7, 54, 66;
  --bs-secondary-color: rgba(79, 99, 105, .75);
  --bs-secondary-bg: #eee8d5; --bs-secondary-bg-rgb: 238, 232, 213;
  --bs-tertiary-bg: #f5efdc; --bs-tertiary-bg-rgb: 245, 239, 220;
  --bs-border-color: #e3dbc2;
  --bs-primary: #268bd2; --bs-primary-rgb: 38, 139, 210;
  --bs-primary-bg-subtle: #e2ecf0; --bs-primary-text-emphasis: #1a6aa3;
  --bs-link-color: #268bd2; --bs-link-color-rgb: 38, 139, 210;
  --bs-link-hover-color: #2aa198; --bs-link-hover-color-rgb: 42, 161, 152;
  --bs-success: #859900; --bs-success-rgb: 133, 153, 0; --bs-danger: #dc322f; --bs-danger-rgb: 220, 50, 47;
  --bs-warning: #b58900; --bs-warning-rgb: 181, 137, 0;
}
[data-pbx-theme="solarized"] :is(.card, .modal-content, .offcanvas) { --bs-card-bg: #fffbef; --bs-modal-bg: #fffbef; --bs-offcanvas-bg: #fffbef; }
[data-pbx-theme="solarized"] :is(.form-control, .form-select) { background-color: #fffdf6; }
[data-pbx-theme="solarized"] .btn-primary {
  --bs-btn-bg: #268bd2; --bs-btn-border-color: #268bd2; --bs-btn-hover-bg: #1f78b8; --bs-btn-hover-border-color: #1f78b8;
  --bs-btn-active-bg: #1b6aa2; --bs-btn-active-border-color: #1b6aa2; --bs-btn-disabled-bg: #268bd2; --bs-btn-disabled-border-color: #268bd2;
}
[data-pbx-theme="solarized"] .btn-outline-primary { --bs-btn-color: #268bd2; --bs-btn-border-color: #268bd2; --bs-btn-hover-bg: #268bd2; --bs-btn-hover-border-color: #268bd2; }
[data-pbx-theme="solarized"] .btn-success { --bs-btn-bg: #859900; --bs-btn-border-color: #859900; --bs-btn-hover-bg: #738500; --bs-btn-hover-border-color: #738500; }
[data-pbx-theme="solarized"] .btn-danger { --bs-btn-bg: #dc322f; --bs-btn-border-color: #dc322f; --bs-btn-hover-bg: #c32a27; }
[data-pbx-theme="solarized"] .nav-pills { --bs-nav-pills-link-active-bg: #268bd2; }

/* ---- Sakura: blossom pinks, soft and bright (light) ---- */
[data-pbx-theme="sakura"] {
  --bs-body-bg: #fff6f8; --bs-body-bg-rgb: 255, 246, 248;
  --bs-body-color: #5b3a44; --bs-body-color-rgb: 91, 58, 68;
  --bs-emphasis-color: #3d2129; --bs-emphasis-color-rgb: 61, 33, 41;
  --bs-secondary-color: rgba(91, 58, 68, .7);
  --bs-secondary-bg: #fbe3ea; --bs-secondary-bg-rgb: 251, 227, 234;
  --bs-tertiary-bg: #fdecf1; --bs-tertiary-bg-rgb: 253, 236, 241;
  --bs-border-color: #f2cbd6;
  --bs-primary: #d6577a; --bs-primary-rgb: 214, 87, 122;
  --bs-primary-bg-subtle: #fbdbe4; --bs-primary-text-emphasis: #a83a5a;
  --bs-link-color: #c2456a; --bs-link-color-rgb: 194, 69, 106;
  --bs-link-hover-color: #9e3354; --bs-link-hover-color-rgb: 158, 51, 84;
}
[data-pbx-theme="sakura"] body {
  background:
    radial-gradient(circle at 10% 15%, rgba(255, 192, 210, .45), transparent 35%),
    radial-gradient(circle at 90% 80%, rgba(255, 214, 226, .55), transparent 40%), #fff6f8 fixed;
  background-attachment: fixed;
}
[data-pbx-theme="sakura"] :is(.card, .modal-content, .offcanvas) { --bs-card-bg: #fffbfc; --bs-modal-bg: #fffbfc; --bs-offcanvas-bg: #fffbfc; box-shadow: 0 4px 16px rgba(214, 87, 122, .08); }
[data-pbx-theme="sakura"] .btn-primary {
  --bs-btn-bg: #d6577a; --bs-btn-border-color: #d6577a; --bs-btn-hover-bg: #c4486b; --bs-btn-hover-border-color: #c4486b;
  --bs-btn-active-bg: #b03e5f; --bs-btn-active-border-color: #b03e5f; --bs-btn-disabled-bg: #d6577a; --bs-btn-disabled-border-color: #d6577a;
}
[data-pbx-theme="sakura"] .btn-outline-primary { --bs-btn-color: #c2456a; --bs-btn-border-color: #e59ab0; --bs-btn-hover-bg: #d6577a; --bs-btn-hover-border-color: #d6577a; }
[data-pbx-theme="sakura"] .nav-pills { --bs-nav-pills-link-active-bg: #d6577a; }
[data-pbx-theme="sakura"] .btn { border-radius: 2rem; }

/* ---- Grape: deep purple night with violet and pink accents (dark) ---- */
[data-pbx-theme="grape"] {
  --bs-body-bg: #1c1a2b; --bs-body-bg-rgb: 28, 26, 43;
  --bs-body-color: #e0dbf3; --bs-body-color-rgb: 224, 219, 243;
  --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(224, 219, 243, .64);
  --bs-secondary-bg: #2c2742; --bs-secondary-bg-rgb: 44, 39, 66;
  --bs-tertiary-bg: #242036; --bs-tertiary-bg-rgb: 36, 32, 54;
  --bs-border-color: #3a3354;
  --bs-primary: #b48cff; --bs-primary-rgb: 180, 140, 255;
  --bs-primary-bg-subtle: #33284f; --bs-primary-text-emphasis: #d2b8ff;
  --bs-link-color: #c4a3ff; --bs-link-color-rgb: 196, 163, 255;
  --bs-link-hover-color: #ff8fcf; --bs-link-hover-color-rgb: 255, 143, 207;
}
[data-pbx-theme="grape"] body { background: radial-gradient(ellipse at top right, #2d2350 0%, #1c1a2b 55%) fixed; }
[data-pbx-theme="grape"] :is(.card, .modal-content, .offcanvas) { --bs-card-bg: #242036; --bs-modal-bg: #242036; --bs-offcanvas-bg: #242036; }
[data-pbx-theme="grape"] :is(.form-control, .form-select) { background-color: #1f1c30; border-color: #443c63; }
[data-pbx-theme="grape"] .btn-primary {
  --bs-btn-bg: #8b5cf6; --bs-btn-border-color: #8b5cf6; --bs-btn-hover-bg: #9d74ff; --bs-btn-hover-border-color: #9d74ff;
  --bs-btn-active-bg: #7646e8; --bs-btn-active-border-color: #7646e8; --bs-btn-disabled-bg: #8b5cf6; --bs-btn-disabled-border-color: #8b5cf6;
}
[data-pbx-theme="grape"] .btn-outline-primary { --bs-btn-color: #c4a3ff; --bs-btn-border-color: #8b5cf6; --bs-btn-hover-bg: #8b5cf6; --bs-btn-hover-border-color: #8b5cf6; --bs-btn-hover-color: #fff; }
[data-pbx-theme="grape"] .nav-pills { --bs-nav-pills-link-active-bg: #8b5cf6; }

/* ---- Glass: liquid glass - clear, strongly blurred panels with bright edges over a vivid backdrop (light) ---- */
[data-pbx-theme="glass"] {
  --bs-body-color: #1d1d1f; --bs-body-color-rgb: 29, 29, 31;
  --bs-emphasis-color: #000; --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(29, 29, 31, .68);
  --bs-secondary-bg: rgba(255, 255, 255, .45); --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-bg: rgba(255, 255, 255, .35); --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-border-color: rgba(255, 255, 255, .6);
  --bs-primary: #0a7cff; --bs-primary-rgb: 10, 124, 255;
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --bs-border-radius: 1rem; --bs-border-radius-sm: .75rem; --bs-border-radius-lg: 1.5rem;
}
[data-pbx-theme="glass"] body {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 120, 170, .75), transparent 32%),
    radial-gradient(circle at 85% 12%, rgba(90, 170, 255, .8), transparent 35%),
    radial-gradient(circle at 70% 85%, rgba(120, 230, 190, .7), transparent 35%),
    radial-gradient(circle at 25% 80%, rgba(255, 200, 90, .65), transparent 32%),
    linear-gradient(135deg, #e9d7ff, #d6ecff 50%, #fff0de) fixed;
  background-attachment: fixed;
}
/* Glass panels: very clear, heavily blurred, a light rim on top and a soft refraction edge */
[data-pbx-theme="glass"] :is(.card, .modal-content, .post-window, .theme-tile, .offcanvas, .dropdown-menu) {
  --bs-card-bg: transparent; --bs-modal-bg: transparent; --bs-offcanvas-bg: rgba(255, 255, 255, .3);
  background-color: rgba(255, 255, 255, .28);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .22));
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 1.5rem;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .35), inset 0 0 18px rgba(255, 255, 255, .25), 0 10px 30px rgba(40, 40, 80, .15);
}
[data-pbx-theme="glass"] .navbar {
  background-color: rgba(255, 255, 255, .3) !important; -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  border-bottom: 1px solid rgba(255, 255, 255, .7) !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5), 0 4px 20px rgba(40, 40, 80, .1);
}
[data-pbx-theme="glass"] :is(.form-control, .form-select) {
  background-color: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Glass pills: clear buttons, tinted ones for actions */
[data-pbx-theme="glass"] .btn {
  border-radius: 2rem; -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), inset 0 -1px 1px rgba(255, 255, 255, .25), 0 4px 12px rgba(40, 40, 80, .12);
  transition: transform .12s ease, box-shadow .12s ease;
}
[data-pbx-theme="glass"] .btn:hover { transform: translateY(-1px); }
[data-pbx-theme="glass"] .btn:active { transform: scale(.97); }
[data-pbx-theme="glass"] :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-light, .btn-secondary) {
  --bs-btn-color: #1d1d1f; --bs-btn-hover-color: #000; --bs-btn-active-color: #000;
  --bs-btn-bg: rgba(255, 255, 255, .35); --bs-btn-hover-bg: rgba(255, 255, 255, .55); --bs-btn-active-bg: rgba(255, 255, 255, .65);
  --bs-btn-border-color: rgba(255, 255, 255, .75); --bs-btn-hover-border-color: rgba(255, 255, 255, .9); --bs-btn-active-border-color: #fff;
}
[data-pbx-theme="glass"] .btn-outline-danger { --bs-btn-color: #d70015; --bs-btn-hover-color: #b00012; }
[data-pbx-theme="glass"] .btn-primary {
  --bs-btn-bg: rgba(10, 124, 255, .82); --bs-btn-border-color: rgba(255, 255, 255, .5); --bs-btn-hover-bg: rgba(10, 124, 255, .92);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .6); --bs-btn-active-bg: #0a6fe6; --bs-btn-disabled-bg: rgba(10, 124, 255, .6);
}
[data-pbx-theme="glass"] .btn-success { --bs-btn-bg: rgba(40, 190, 90, .85); --bs-btn-border-color: rgba(255, 255, 255, .5); --bs-btn-hover-bg: rgba(40, 190, 90, .95); }
[data-pbx-theme="glass"] .btn-danger { --bs-btn-bg: rgba(255, 59, 48, .85); --bs-btn-border-color: rgba(255, 255, 255, .5); --bs-btn-hover-bg: rgba(255, 59, 48, .95); }
[data-pbx-theme="glass"] .nav-pills .nav-link.active {
  background-color: rgba(255, 255, 255, .6); color: #0a64d6; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 1px #fff, 0 4px 12px rgba(40, 40, 80, .12);
}
[data-pbx-theme="glass"] .nav-pills .nav-link:not(.active):hover { background-color: rgba(255, 255, 255, .3); }
[data-pbx-theme="glass"] .table { --bs-table-bg: transparent; }
[data-pbx-theme="glass"] .badge { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Swatches for the themes above */
.sw-dark { background: linear-gradient(#2b3035 30%, #212529 30%); box-shadow: inset 0 -10px 0 #0d6efd; }
.sw-nord { background: linear-gradient(#3b4252 30%, #2e3440 30%); box-shadow: inset 0 -10px 0 #88c0d0; }
.sw-solarized { background: linear-gradient(#eee8d5 30%, #fdf6e3 30%); box-shadow: inset 0 -10px 0 #268bd2; }
.sw-sakura { background: radial-gradient(circle at 25% 30%, #ffc0d2, transparent 45%), #fff6f8; box-shadow: inset 0 -10px 0 #d6577a; }
.sw-grape { background: radial-gradient(ellipse at top right, #2d2350, #1c1a2b 65%); box-shadow: inset 0 -10px 0 #8b5cf6; }
.sw-glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .1)) center / 70% 55% no-repeat,
    radial-gradient(circle at 15% 25%, #ff78aa, transparent 45%), radial-gradient(circle at 85% 20%, #5aaaff, transparent 45%),
    radial-gradient(circle at 60% 90%, #78e6be, transparent 45%), #e9d7ff;
}
/* ---- Winter: frosty blues and falling snow (light) ---- */
[data-pbx-theme="winter"] {
  --bs-body-bg: #eef5fb; --bs-body-bg-rgb: 238, 245, 251;
  --bs-body-color: #2a4459; --bs-body-color-rgb: 42, 68, 89;
  --bs-emphasis-color: #142b3d; --bs-emphasis-color-rgb: 20, 43, 61;
  --bs-secondary-color: rgba(42, 68, 89, .72);
  --bs-secondary-bg: #dce9f4; --bs-secondary-bg-rgb: 220, 233, 244;
  --bs-tertiary-bg: #e5eff8; --bs-tertiary-bg-rgb: 229, 239, 248;
  --bs-border-color: #c9dceb;
  --bs-primary: #2f7fc1; --bs-primary-rgb: 47, 127, 193;
  --bs-primary-bg-subtle: #d6e8f7; --bs-primary-text-emphasis: #1f5f94;
  --bs-link-color: #2f7fc1; --bs-link-color-rgb: 47, 127, 193;
  --bs-link-hover-color: #1f5f94; --bs-link-hover-color-rgb: 31, 95, 148;
}
[data-pbx-theme="winter"] body { background: linear-gradient(#cfe3f4 0%, #eef5fb 40%, #ffffff 100%) fixed; }
/* Falling snow: a few small icy blue flakes in three layers at different speeds.
   They fall behind the page content (z-index -1): visible on the background,
   never over cards, text or buttons, and clicks pass through */
[data-pbx-theme="winter"] body::before {
  content: ""; position: fixed; inset: -100px 0 0; z-index: -1; pointer-events: none; opacity: .75;
  background-image:
    radial-gradient(3px 3px at 40px 50px, #8fc1ec 50%, transparent 52%), radial-gradient(2px 2px at 210px 170px, #a9d0f2 50%, transparent 52%),
    radial-gradient(4px 4px at 90px 230px, #7ab4e8 50%, transparent 52%), radial-gradient(3px 3px at 300px 90px, #9cc8ef 50%, transparent 52%),
    radial-gradient(5px 5px at 180px 40px, #86bcea 50%, transparent 52%), radial-gradient(4px 4px at 420px 300px, #74afe5 50%, transparent 52%);
  background-size: 300px 300px, 300px 300px, 420px 420px, 420px 420px, 560px 560px, 560px 560px;
  animation: pbx-snow 26s linear infinite;
}
@keyframes pbx-snow {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 40px 300px, -30px 300px, 50px 420px, -40px 420px, 60px 560px, -50px 560px; }
}
@media (prefers-reduced-motion: reduce) { [data-pbx-theme="winter"] body::before { animation: none; } }
[data-pbx-theme="winter"] :is(.card, .modal-content, .offcanvas) {
  --bs-card-bg: rgba(255, 255, 255, .82); --bs-modal-bg: #fbfdff; --bs-offcanvas-bg: #fbfdff;
  border-color: #d3e4f1; box-shadow: 0 1px 0 #fff inset, 0 6px 18px rgba(47, 127, 193, .1);
}
[data-pbx-theme="winter"] .card { border-top: 3px solid #fff; }
[data-pbx-theme="winter"] .navbar { background-image: linear-gradient(rgba(255, 255, 255, .9), rgba(228, 239, 249, .9)) !important; }
[data-pbx-theme="winter"] .btn-primary {
  --bs-btn-bg: #2f7fc1; --bs-btn-border-color: #2f7fc1; --bs-btn-hover-bg: #276dab; --bs-btn-hover-border-color: #276dab;
  --bs-btn-active-bg: #215f95; --bs-btn-active-border-color: #215f95; --bs-btn-disabled-bg: #2f7fc1; --bs-btn-disabled-border-color: #2f7fc1;
}
[data-pbx-theme="winter"] .btn-outline-primary { --bs-btn-color: #2f7fc1; --bs-btn-border-color: #8bb8dd; --bs-btn-hover-bg: #2f7fc1; --bs-btn-hover-border-color: #2f7fc1; }
[data-pbx-theme="winter"] .nav-pills { --bs-nav-pills-link-active-bg: #2f7fc1; }
.sw-winter {
  background: radial-gradient(3px 3px at 20% 30%, #5f9fd8 50%, transparent 52%), radial-gradient(4px 4px at 70% 20%, #5f9fd8 50%, transparent 52%),
    radial-gradient(3px 3px at 45% 65%, #7ab4e8 50%, transparent 52%), radial-gradient(4px 4px at 85% 70%, #7ab4e8 50%, transparent 52%),
    linear-gradient(#cfe3f4, #eef5fb);
  box-shadow: inset 0 -10px 0 #2f7fc1;
}

/* "Logged in as" in the top bar on phones and in the Android app (the menu is folded) */
.nav-user { min-width: 0; max-width: calc(100vw - 250px); padding: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-size: .75rem; }
.nav-user > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Disruptions expected" (slow server / network, or set by an admin) */
.text-bg-orange { color: #fff !important; background-color: #fd7e14 !important; }