/* =====================================================================
 * BzWidget — Tabler theme custom layer
 * ---------------------------------------------------------------------
 * Section 1: App component styles (ported for the Tabler design system)
 * Section 2: BS4 / Pixel -> Bootstrap 5 / Tabler compatibility bridge
 *            (keeps not-yet-migrated views readable while the full 1:1
 *             Tabler rewrite is in progress)
 * Section 3: Polish / overrides
 * ===================================================================== */

/* ------------------------------------------------------------------ *
 * 0. Legacy design tokens
 *    The bundled third-party stylesheets (daterangepicker, select2, quill,
 *    cropper, pickr, …) were customised by AltumCode to reference the bzwidget
 *    "Pixel" CSS variables (--white, --primary, --gray-*, --border-radius,
 *    --input-*). Tabler exposes everything under --tblr-*, so those vars are
 *    undefined here and the widgets render broken (e.g. transparent panels).
 *    Mapping the legacy tokens to Tabler equivalents repairs every such widget
 *    at once. These names are not used by Tabler/Bootstrap themselves.
 * ------------------------------------------------------------------ */
:root {
    --white: #ffffff;
    --black: #000000;
    --gray: var(--tblr-gray-600, #6c7a91);
    --gray-50: var(--tblr-gray-50, #f8fafc);
    --gray-100: var(--tblr-gray-100, #f1f5f9);
    --gray-200: var(--tblr-gray-200, #e6e7e9);
    --gray-300: var(--tblr-gray-300, #dadfe5);
    --gray-400: var(--tblr-gray-400, #a6b0c2);
    --gray-500: var(--tblr-gray-500, #7987a1);
    --gray-600: var(--tblr-gray-600, #6c7a91);
    --gray-700: var(--tblr-gray-700, #4b5468);
    --gray-800: var(--tblr-gray-800, #313b52);
    --gray-900: var(--tblr-gray-900, #1a2234);
    --primary: var(--tblr-primary, #206bc4);
    --primary-100: rgba(var(--tblr-primary-rgb, 32,107,196), .1);
    --primary-200: rgba(var(--tblr-primary-rgb, 32,107,196), .2);
    --primary-300: rgba(var(--tblr-primary-rgb, 32,107,196), .35);
    --primary-600: var(--tblr-primary, #206bc4);
    --primary-700: var(--tblr-primary, #206bc4);
    --primary-800: var(--tblr-primary, #206bc4);
    --primary-900: var(--tblr-primary, #206bc4);
    --dark: var(--tblr-dark, #1e293b);
    --body-bg: var(--tblr-body-bg, #f6f7f9);
    --border-radius: var(--tblr-border-radius, .25rem);
    --input-color: var(--tblr-body-color, #1a2234);
    --input-border-color: var(--tblr-border-color, #dadce0);
    --input-padding-x: .75rem;
    --input-padding-y: .4375rem;
}

/* ------------------------------------------------------------------ *
 * 1. App component styles
 * ------------------------------------------------------------------ */

/* Entrance animation used by the main content wrapper */
@keyframes bzwidget-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bzwidget-animate.bzwidget-animate-fade-in {
    animation: bzwidget-fade-in .35s ease-out both;
}
.bzwidget-animate-fill-none { animation-fill-mode: both; }
@media (prefers-reduced-motion: reduce) {
    .bzwidget-animate { animation: none !important; }
}

/* Brand logos */
.navbar-logo { max-height: 2.25rem; width: auto; }
.navbar-logo-mini { max-height: 1.5rem; width: auto; }
.footer-logo { max-height: 2rem; width: auto; }

/* Avatar shown in the top navbar user dropdown */
.navbar-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
}

/* Footer social icon chips */
.footer-social-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--tblr-border-radius, .25rem);
}
.footer-social-wrapper a { line-height: 1; }

.footer-heading { text-decoration: none; }
.list-style-none { list-style: none; padding-left: 0; }

/* Small helper used across legacy views */
.font-size-little-small { font-size: .8125rem; }
.font-weight-450 { font-weight: 500; }
.rounded-2x { border-radius: calc(var(--tblr-border-radius, .25rem) * 2) !important; }

/* Notification badge dot in the navbar bell */
.internal-notification-icon {
    position: absolute;
    top: -.15rem;
    inset-inline-end: -.15rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--tblr-danger, #d63939);
}

/* Chart wrapper — Chart.js needs a bounded height on its container, otherwise
   the <canvas> collapses to 0 (or grows unbounded). Ported from the legacy
   custom.css that the Tabler theme does not load. Used by the dashboard and
   every statistics view. */
.chart-container {
    position: relative;
    width: 100%;
    height: 275px;
    margin: auto;
}
@media print {
    .chart-container canvas {
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        height: auto !important;
        width: auto !important;
    }
}

/* Notification-type avatar chip in "latest notifications" tables. The
   background/text colours are set inline from the notification config; this
   only supplies the size and centering (shape comes from .rounded-circle). */
.notification-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.05rem;
    background: var(--tblr-gray-100);
    color: var(--tblr-secondary);
}

/* Favicon glyphs shown next to campaign domains */
.icon-favicon {
    width: .95rem;
    height: auto;
    border-radius: 2px;
}
.icon-favicon-small {
    width: .85rem;
    height: auto;
    border-radius: 2px;
}

/* Dashboard stat cards — subtle hover lift for a more tactile feel. Keyed to
   the stable wrapper IDs so no view markup change is required. */
#total_campaigns_wrapper,
#total_notifications_wrapper,
#total_notifications_impressions_wrapper {
    transition: transform .15s ease, box-shadow .15s ease;
}
#total_campaigns_wrapper:hover,
#total_notifications_wrapper:hover,
#total_notifications_impressions_wrapper:hover {
    transform: translateY(-3px);
    box-shadow: var(--tblr-box-shadow-lg, 0 1rem 3rem rgba(0,0,0,.1));
}
@media (prefers-reduced-motion: reduce) {
    #total_campaigns_wrapper,
    #total_notifications_wrapper,
    #total_notifications_impressions_wrapper { transition: none; transform: none; }
}

/* ------------------------------------------------------------------ *
 * 2. Compatibility bridge  (BS4 / Pixel  ->  BS5 / Tabler)
 *    Aliases legacy utility class names to their Tabler equivalents so
 *    views that have not yet been converted keep a coherent layout.
 * ------------------------------------------------------------------ */

/* Directional spacing renamed in BS5: mr- / ml- became me- / ms- .
   (Do not write those names with a star and slash here — it closes this comment early and eats .mr-0.) */
.mr-0{margin-right:0!important}.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:1rem!important}.mr-4{margin-right:1.5rem!important}.mr-5{margin-right:3rem!important}
.ml-0{margin-left:0!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-3{margin-left:1rem!important}.ml-4{margin-left:1.5rem!important}.ml-5{margin-left:3rem!important}
.pr-0{padding-right:0!important}.pr-1{padding-right:.25rem!important}.pr-2{padding-right:.5rem!important}.pr-3{padding-right:1rem!important}.pr-4{padding-right:1.5rem!important}.pr-5{padding-right:3rem!important}
.pl-0{padding-left:0!important}.pl-1{padding-left:.25rem!important}.pl-2{padding-left:.5rem!important}.pl-3{padding-left:1rem!important}.pl-4{padding-left:1.5rem!important}.pl-5{padding-left:3rem!important}
.mr-lg-0,.mr-lg-3{}
@media (min-width:992px){
    .mr-lg-0{margin-right:0!important}.mr-lg-3{margin-right:1rem!important}
    .ml-lg-3{margin-left:1rem!important}.pr-lg-3{padding-right:1rem!important}.pl-lg-3{padding-left:1rem!important}
}

/* Font-weight helpers */
.font-weight-bold{font-weight:700!important}
.font-weight-normal{font-weight:400!important}
.font-weight-light{font-weight:300!important}
.font-weight-bolder{font-weight:600!important}

/* Text / display helpers */
.text-decoration-none{text-decoration:none!important}

/* Block buttons became .w-100 / .d-grid in BS5 */
.btn-block{display:block;width:100%}
.btn-block+.btn-block{margin-top:.5rem}

/* Legacy gray utility buttons (Pixel) mapped to Tabler surfaces */
.btn-gray-200{background-color:var(--tblr-gray-100);border-color:var(--tblr-border-color);color:var(--tblr-body-color)}
.btn-gray-200:hover{background-color:var(--tblr-gray-200)}

/* ------------------------------------------------------------------ *
 * Collapsible section headers -> accordion appearance
 * ---------------------------------------------------------------------
 * Every one of the 97 `.btn-gray-200` in the theme is a `data-bs-toggle="collapse"` section header
 * (notification editor + its 30 per-type setting files, account-preferences, admin settings). They are
 * already a hand-rolled accordion — `data-bs-parent` gives them the mutual-exclusion behaviour. What they
 * lacked was the chrome: `.btn` centres the label, and there was NO indicator that the section expands.
 *
 * Styled here rather than converted to Tabler's <div class="accordion"> component. Tabler's accordion
 * rotates a CHILD element (`.accordion-button-toggle`), not a CSS ::after, so adopting it literally means
 * restructuring all 97 toggles across 32 view files for an identical result — including the 30 per-type
 * files, where one bad edit breaks a notification type nobody has a row for. This reaches the same
 * appearance from one place and covers every toggle at once, and it reuses Tabler's own accordion tokens
 * so it tracks the theme.
 *
 * Keyed off [data-bs-toggle="collapse"] rather than .btn-gray-200 alone: verified that all 97 are collapse
 * toggles today, but this way a future plain grey button is not dragged into the accordion look.
 * ------------------------------------------------------------------ */
.btn-gray-200[data-bs-toggle="collapse"] {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-align: left;
    padding: var(--tblr-accordion-btn-padding-y, 1rem) 1rem;
    font-weight: var(--tblr-accordion-btn-font-weight, 500);
    border: var(--tblr-border-width, 1px) solid var(--tblr-accordion-border-color, var(--tblr-border-color));
    border-radius: var(--tblr-accordion-border-radius, var(--tblr-border-radius));
}

/* The chevron the hand-rolled markup never had. Bootstrap keeps aria-expanded in sync on the toggle. */
.btn-gray-200[data-bs-toggle="collapse"]::after {
    flex-shrink: 0;
    width: var(--tblr-accordion-btn-toggle-width, 1.25rem);
    height: var(--tblr-accordion-btn-toggle-width, 1.25rem);
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
    transition: transform .2s ease-in-out;
}

.btn-gray-200[data-bs-toggle="collapse"][aria-expanded="true"]::after {
    transform: rotate(-180deg);
}

/* ------------------------------------------------------------------ *
 * API documentation redesign (tabler)
 * ---------------------------------------------------------------------
 * The docs render inside app_wrapper, so partials/api_documentation_nav.php is a secondary content-column
 * nav (col-lg-3, sticky) beside the page body (col-lg-9.api-documentation-content) — same shape as the
 * settings tabs. Endpoint content (params tables, response JSON) is untouched; this only restyles the
 * shell: a persistent resource nav, method badges aligned in a monospace column, cleaner endpoint headers,
 * and anchor offset so a jumped-to endpoint clears the top bar.
 * ------------------------------------------------------------------ */
/* The nav is a bordered card; its list-group is flush inside it */
.api-documentation-nav .list-group-item {
    border-inline: 0;
    padding: .625rem 1rem;
    font-size: .875rem;
    color: var(--tblr-body-color);
    background-color: transparent;
}
.api-documentation-nav .list-group-item .ti {
    color: var(--tblr-secondary);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.api-documentation-nav .list-group-item:hover {
    background-color: var(--tblr-gray-100);
    color: var(--tblr-body-color);
}
/* Active: primary-tinted fill + primary text + a left accent bar (no full-bleed grey, no negative margin bleed) */
.api-documentation-nav .list-group-item.active {
    margin: 0;
    color: var(--tblr-primary);
    background-color: var(--tblr-primary-lt);
    border-color: var(--tblr-border-color);
    box-shadow: inset .1875rem 0 0 0 var(--tblr-primary);
    font-weight: 600;
}
.api-documentation-nav .list-group-item.active .ti {
    color: var(--tblr-primary);
}

/* Endpoint cards: one flat stack, each with a clickable header row */
.api-documentation-content .accordion > .card {
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    margin-bottom: .75rem;
}
.api-documentation-content .accordion > .card > .card-header {
    cursor: pointer;
}
.api-documentation-content .accordion > .card > .card-header a {
    text-decoration: none;
}

/* Method badges (GET/POST/DELETE) — monospace, fixed min-width so the paths line up under each other */
.api-documentation-content .card-header .badge {
    min-width: 3.75rem;
    font-family: var(--tblr-font-monospace, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-weight: 600;
    letter-spacing: .02em;
}

/* Endpoint anchors sit under the sticky app navbar (min-height 3.5rem) when jumped to */
.api-documentation-content .collapse,
.api-documentation-content [id] {
    scroll-margin-top: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .btn-gray-200[data-bs-toggle="collapse"]::after { transition: none; }
}
.bg-gray-50{background-color:var(--tblr-gray-50)!important}
.bg-gray-100{background-color:var(--tblr-gray-100)!important}
.bg-gray-200{background-color:var(--tblr-gray-100)!important}
.text-gray-50{color:var(--tblr-gray-50)!important}
.text-primary-900{color:var(--tblr-primary)!important}

/* Legacy custom form controls (custom-switch / custom-control) -> Tabler form-check */
.custom-control.custom-switch{padding-left:2.5rem;position:relative;min-height:1.5rem}
.custom-control.custom-switch .custom-control-input{position:absolute;left:0;width:2rem;height:1.25rem;opacity:0;cursor:pointer}
.custom-control.custom-switch .custom-control-label{cursor:pointer}
.custom-control.custom-switch .custom-control-label::before{content:"";position:absolute;left:0;top:.1rem;width:2rem;height:1.25rem;background:var(--tblr-gray-300);border-radius:1rem;transition:background .15s}
.custom-control.custom-switch .custom-control-label::after{content:"";position:absolute;left:.15rem;top:.25rem;width:.95rem;height:.95rem;background:#fff;border-radius:50%;transition:transform .15s}
.custom-control.custom-switch .custom-control-input:checked~.custom-control-label::before{background:var(--tblr-primary)}
.custom-control.custom-switch .custom-control-input:checked~.custom-control-label::after{transform:translateX(.75rem)}

.custom-control.custom-radio,.custom-control.custom-checkbox{position:relative;padding-left:1.75rem;min-height:1.5rem}
.custom-control.custom-radio .custom-control-input,.custom-control.custom-checkbox .custom-control-input{position:absolute;left:0;top:.2rem;width:1.1rem;height:1.1rem;cursor:pointer}

.custom-select{display:block;width:100%;padding:.4375rem 2.25rem .4375rem .75rem;font-size:.875rem;line-height:1.4285714;color:var(--tblr-body-color);background-color:var(--tblr-bg-forms,#fff);border:1px solid var(--tblr-border-color);border-radius:var(--tblr-border-radius)}

/* form-group was dropped in BS5 (use margin utilities) */
.form-group{margin-bottom:1rem}

/* Legacy badge color modifiers -> BS5 background utilities */
.badge-primary{background-color:var(--tblr-primary)!important;color:#fff}
.badge-secondary{background-color:var(--tblr-secondary)!important;color:#fff}
.badge-success{background-color:var(--tblr-success)!important;color:#fff}
.badge-danger{background-color:var(--tblr-danger)!important;color:#fff}
.badge-warning{background-color:var(--tblr-warning)!important;color:#000}
.badge-info{background-color:var(--tblr-info)!important;color:#fff}
.badge-light{background-color:var(--tblr-gray-100)!important;color:#000}
.badge-dark{background-color:var(--tblr-dark)!important;color:#fff}
/* Badges must stay compact: Tabler's .badge is inline-flex, but when it is a
   direct child of a `.d-flex.flex-column` (used across views for stacked status
   badges) the default align-items:stretch blows it out to full width. Keep it
   sized to its content. */
.d-flex.flex-column > .badge,
.d-flex.flex-column > a.badge,
.d-flex.flex-column > div.badge { align-self: flex-start; max-width: max-content; }

/* Badge text contrast: Tabler defaults .badge text colour to --tblr-secondary
   (gray #6b7280), which is unreadable on a SOLID coloured background (green,
   blue, …). Force a contrasting colour. Light "-lt" badges keep their own
   coloured text, and explicit .text-* utilities still override these. */
.badge.bg-primary, .badge.bg-secondary, .badge.bg-success, .badge.bg-danger,
.badge.bg-info, .badge.bg-dark, .badge.bg-blue, .badge.bg-azure, .badge.bg-indigo,
.badge.bg-purple, .badge.bg-pink, .badge.bg-red, .badge.bg-green, .badge.bg-teal,
.badge.bg-cyan, .badge.bg-orange, .badge.bg-black,
a.badge.bg-primary, a.badge.bg-success, a.badge.bg-danger, a.badge.bg-info,
a.badge.bg-dark, a.badge.bg-secondary { color: #fff; }
.badge.bg-warning, .badge.bg-yellow, .badge.bg-lime, .badge.bg-light, .badge.bg-white { color: #182234; }

/* FontAwesome fixed-width helper still referenced by legacy markup */
.fa-fw{text-align:center;width:1.25em}
.fa-layers{position:relative;display:inline-block;height:1em;width:1.25em;text-align:center}
.fa-layers-counter{position:absolute;top:0;right:0;transform:scale(.6);transform-origin:top right}

/* ------------------------------------------------------------------ *
 * 2b. Pricing / plan cards (Pixel ".pricing-*" component -> Tabler)
 *     These bespoke classes live in the legacy pixel.css which the
 *     Tabler theme does not load, so they are ported here. Without this
 *     the decorative SVG (.pricing-deco-img) falls back to a black fill.
 * ------------------------------------------------------------------ */
.pricing-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg, .5rem);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.pricing-item.zoomer:hover { transform: translateY(-4px); box-shadow: var(--tblr-box-shadow-lg, 0 1rem 3rem rgba(0,0,0,.1)); }

.pricing-deco {
    position: relative;
    padding: 2rem 1.5rem 3.5rem;
    text-align: center;
    color: #fff;
    background-color: var(--tblr-primary);
}
.pricing-deco .pricing-title { color: #fff; margin: 0; font-size: 1.25rem; font-weight: 600; }

/* Decorative bottom wave: fill it with the card body colour so it reads as a wave,
   never the default black fill. */
.pricing-deco-img {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 60px;
    fill: var(--tblr-bg-surface, #fff);
}
.pricing-deco-img .deco-layer { fill: var(--tblr-bg-surface, #fff); }

.pricing-price { position: relative; z-index: 1; font-size: 2rem; font-weight: 700; color: #fff; }
.pricing-sub { position: relative; z-index: 1; color: rgba(255,255,255,.85); font-size: .875rem; }

.pricing-tag {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 2;
    padding: .25rem .5rem;
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-orange, #f76707);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
}

.pricing-feature-list { list-style: none; margin: 0; padding: 1.25rem 1.5rem; }
.pricing-feature { padding: .4rem 0; border-bottom: 1px solid var(--tblr-border-color-light, rgba(0,0,0,.04)); }
.pricing-feature:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ *
 * 2c. Marketing homepage (index) — ported from the legacy index-custom.css
 *     onto Tabler tokens, so the public landing page no longer needs
 *     pixel.css / index-custom.css / AOS (all removed from the view).
 * ------------------------------------------------------------------ */

/* Any leftover AOS scroll-reveal attributes must never hide content
   (AOS is no longer loaded). */
[data-aos] { opacity: 1 !important; transform: none !important; }

.index-fade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, var(--tblr-bg-surface, #fff), transparent) !important;
}

/* The decorative hero "cover" is a cluster of live embed widgets that only
   render correctly with the full embed-widget CSS; on the Tabler landing page
   it is hidden in favour of the clean text hero + gradient backdrop. The
   notification-type grid further down showcases the widgets properly. */
.index-cover-container { display: none !important; }

.index-container { width: 100%; padding: 3rem 0 0; }

.index-header { font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
.index-subheader { font-size: 1.2rem; }

.index-button {
    padding: 1rem 3rem;
    font-size: 1.15rem;
    font-weight: 500;
    border-radius: calc(2 * var(--tblr-border-radius, .25rem));
}

@media (min-width: 992px) {
    .index-header { font-size: 3.5rem; }
    .index-container { padding: 5rem 0; }

    .index-background-container {
        width: 100%; height: 100%;
        position: absolute; overflow: hidden; z-index: -2;
    }
    .index-background-image {
        position: absolute;
        border-radius: 2.5%;
        right: 0;
        transform: translate(58%, -18%) rotate(-20deg);
        height: 800px; width: 800px;
        background: radial-gradient(circle at 35% 30%, #8e46d4, #292cc4 70%);
        background-attachment: fixed;
        opacity: .9;
        animation: index-background 50s ease-in-out alternate infinite;
    }
    @keyframes index-background {
        0%   { background-size: 135%; filter: blur(0); }
        100% { background-size: 300%; filter: blur(1px); }
    }
    [dir="rtl"] .index-background-image { right: initial; left: -30%; }

    .index-cover { transform: translate(55%, 5%) scale(.7); }
    [dir="rtl"] .index-cover { transform: translate(-55%, 5%) scale(.7); }
}
@media (min-width: 1200px) {
    .index-background-image { transform: translate(27.5%, -18%) rotate(-20deg); }
    .index-cover { transform: translate(42%, 5%) scale(.7); }
    [dir="rtl"] .index-cover { transform: translate(-55%, 5%) scale(.7); }
}
@media (min-width: 1400px) {
    .index-background-image { transform: translate(20%, -18%) rotate(-20deg); height: 725px; width: 800px; }
}

.index-icon-container {
    background: rgba(var(--tblr-primary-rgb, 32,107,196), .12);
    color: var(--tblr-primary);
    width: 35px; height: 35px; min-width: 35px; min-height: 35px;
    font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: calc(2 * var(--tblr-border-radius, .25rem));
    transition: all .3s ease-in-out;
}
.index-icon-container-steps { width: 60px; height: 60px; min-width: 60px; min-height: 60px; font-size: 1.5rem; }

.index-brand-icon-container {
    background: rgba(var(--tblr-primary-rgb, 32,107,196), .12);
    width: 75px; height: 75px; min-width: 75px; min-height: 75px;
    display: flex; align-items: center; justify-content: center;
    border-radius: calc(3 * var(--tblr-border-radius, .25rem));
    transform: rotate(45deg);
    transition: all .3s ease-in-out;
}
.index-brand-icon-container svg { width: 35px; height: auto; transform: rotate(-45deg); transition: all .3s ease-in-out; }
.index-brand-icon-container:hover { transform: rotate(0); }
.index-brand-icon-container:hover svg { transform: rotate(0); }

.index-register-container {
    background: var(--tblr-primary);
    color: #fff;
    padding: 4rem 0;
    border-radius: calc(2 * var(--tblr-border-radius, .25rem));
}
.index-register-container p { color: rgba(255,255,255,.85); }

.index-testimonial-avatar {
    width: 85px; height: 85px; border-radius: 50%;
    transform: translateY(-70%);
    border: 4px solid var(--tblr-bg-surface, #fff);
    background: var(--tblr-bg-surface, #fff);
    position: absolute; left: 50%; margin-left: -52px;
}
.index-testimonial-comment { margin-left: 18px; }
.index-faq svg { transition: all .15s; color: var(--tblr-primary); }

/* The live notification-type preview renders real embed widgets (which use
   fixed/absolute positioning to sit in page corners). Contain it to a tidy,
   centered box on the landing page so it cannot overlap the surrounding grid. */
#notification_preview {
    position: relative;
    overflow: hidden;
    max-width: 460px;
    min-height: 160px;
    margin: 0 auto 2.5rem;
    padding: 1rem;
    border-radius: var(--tblr-border-radius-lg, .5rem);
}
#notification_preview > * {
    position: relative !important;
    inset: auto !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    transform: none !important;
}

.icon-zoom-animation:hover .index-icon-container,
.icon-zoom-animation:hover .index-icon-container-steps { transform: scale(1.08); }
.zoomer { transition: transform .15s ease, box-shadow .15s ease; }
.zoomer:hover { transform: translateY(-4px); box-shadow: var(--tblr-box-shadow-lg, 0 1rem 3rem rgba(0,0,0,.1)); }

/* ------------------------------------------------------------------ *
 * 2d. Vendor widgets — select2 + daterangepicker restyled to match
 *     Tabler form controls (Tabler ships styles for Tom Select, not these,
 *     and the legacy pixel/custom.css that styled them is not loaded).
 * ------------------------------------------------------------------ */

/* --- select2 (single) --- */
/*
 * Scope the width to .select2, NOT .select2-container. select2 renders its dropdown into a second
 * container appended to <body> and gives it a COPY of the real container's classes
 * (AttachBody.position: `$dropdown.attr('class', $container.attr('class'))`), minus `select2`. So a
 * rule on .select2-container also lands on that body-level clone and stretches it to the full page
 * width from wherever the field sits, overflowing to the right. select2's own stylesheet already does
 * `.select2 { width: 100% !important }` for the real container, which is the class the clone drops.
 */
.select2 { width: 100% !important; }

/*
 * select2 / daterangepicker position their body-level panels from jQuery .offset(), i.e. document
 * coordinates. That is correct again since the root is the scroll container (bz master tokens.css:
 * html { scrollbar-gutter: stable }), so the former position:fixed pins are gone with the old
 * <body>-scroller (see "Scroll container" below).
 */
.select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    min-height: calc(1.4285714em + .875rem + 2px);
    padding: .4375rem 2.25rem .4375rem .75rem;
    font-size: .875rem;
    color: var(--tblr-body-color);
    background-color: var(--tblr-bg-forms, #fff);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    /* Tabler / Bootstrap 5 chevron */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23616876' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.4285714;
    color: var(--tblr-body-color);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--tblr-secondary); }
/* hide select2's own arrow triangle — we use the background chevron above */
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb, 32,107,196), .25);
    outline: none;
}

/* --- select2 (multiple) --- */
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.4285714em + .875rem + 2px);
    padding: .25rem .5rem;
    background-color: var(--tblr-bg-forms, #fff);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    margin: .125rem .25rem .125rem 0;
    padding: .125rem .5rem;
    color: #fff;
    background-color: var(--tblr-primary);
    border: 0;
    border-radius: var(--tblr-border-radius);
    font-size: .8125rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255,255,255,.85);
    margin-right: .25rem;
    border: 0;
    background: transparent;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fff; background: transparent; }

/* --- select2 dropdown panel --- */
.select2-dropdown {
    background-color: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-dropdown, 0 1px 2px 0 rgba(0,0,0,.05));
    color: var(--tblr-body-color);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: .375rem .5rem;
    color: var(--tblr-body-color);
    background-color: var(--tblr-bg-forms, #fff);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}
.select2-container--default .select2-results__option {
    padding: .375rem .75rem;
    font-size: .875rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--tblr-primary);
    color: #fff;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background-color: rgba(var(--tblr-primary-rgb, 32,107,196), .12);
    color: var(--tblr-body-color);
}

/* Dark mode surfaces for select2 */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-bs-theme="dark"] .select2-dropdown,
[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--tblr-bg-forms, #1a2234);
    border-color: var(--tblr-border-color);
    color: var(--tblr-body-color);
}

/* --- daterangepicker ---
   The picker is appended to <body>, outside the card scope where
   --tblr-bg-surface is defined, so concrete colors are used to guarantee an
   opaque panel (a var there resolves to transparent and page content bleeds
   through). Dark mode is handled by the [data-bs-theme="dark"] override below. */
.daterangepicker,
.daterangepicker .ranges,
.daterangepicker .ranges ul,
.daterangepicker .drp-calendar,
.daterangepicker .drp-buttons {
    background-color: #ffffff;
}
.daterangepicker {
    z-index: 3001;
    font-family: inherit;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.15);
    color: var(--tblr-body-color);
}
.daterangepicker::before, .daterangepicker::after { display: none; }
.daterangepicker .calendar-table { background-color: transparent; border: 0; }
.daterangepicker td, .daterangepicker th { color: var(--tblr-body-color); }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background-color: var(--tblr-gray-100); border-radius: var(--tblr-border-radius); }
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { color: var(--tblr-secondary); background-color: transparent; }
.daterangepicker td.in-range { background-color: rgba(var(--tblr-primary-rgb, 32,107,196), .12); color: var(--tblr-body-color); }
.daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--tblr-primary); color: #fff; border-radius: var(--tblr-border-radius); }
.daterangepicker .ranges li { color: var(--tblr-body-color); border-radius: var(--tblr-border-radius); }
.daterangepicker .ranges li:hover { background-color: var(--tblr-gray-100); }
.daterangepicker .ranges li.active { background-color: var(--tblr-primary); color: #fff; }
.daterangepicker .drp-buttons { border-top-color: var(--tblr-border-color); }
.daterangepicker .drp-buttons .btn { font-size: .875rem; }
.daterangepicker .drp-selected { color: var(--tblr-secondary); }
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect,
.daterangepicker .input-mini {
    color: var(--tblr-body-color);
    background-color: var(--tblr-bg-forms, #fff);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}
.daterangepicker .input-mini.active { border-color: var(--tblr-primary); }
[data-bs-theme="dark"] .daterangepicker,
[data-bs-theme="dark"] .daterangepicker .ranges,
[data-bs-theme="dark"] .daterangepicker .ranges ul,
[data-bs-theme="dark"] .daterangepicker .drp-calendar,
[data-bs-theme="dark"] .daterangepicker .drp-buttons { background-color: #182234; }
[data-bs-theme="dark"] .daterangepicker { border-color: var(--tblr-border-color); }
[data-bs-theme="dark"] .daterangepicker td.available:hover,
[data-bs-theme="dark"] .daterangepicker .ranges li:hover { background-color: rgba(255,255,255,.06); }

/* ------------------------------------------------------------------ *
 * 2e. App UI component classes ported from the legacy custom.css
 *     (which the Tabler theme does not load). Referenced across converted
 *     views: invoices, pricing (palden), custom radio-boxes, filters
 *     dropdown, breadcrumbs, blog posts, loading overlays, tables, etc.
 *     Uses the legacy tokens defined in section 0.
 * ------------------------------------------------------------------ */

/* FontAwesome size helpers still present on un-migrated fa icons */
.fa-sm { font-size: .875em; }
.fa-xs { font-size: .75em; }

/* Keyframe used by the announcement banner */
@keyframes ac-fade-in-down {
    from { opacity: 0; transform: translateY(-.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.form-control-range {
	
	-webkit-appearance: none;
	appearance: none;

	
	overflow: hidden;

	
	accent-color: var(--primary);
	background: var(--gray-200);
	border-radius: var(--border-radius);
	height: .5rem;
	margin: 0.75rem 0;
}

.form-control-range::-webkit-slider-runnable-track, .form-control-range::-moz-range-track {
	background: var(--gray-200);
}

.form-control-range::-webkit-slider-thumb {
	
	-webkit-appearance: none;
	appearance: none;

	
	height: .75rem;
	width: .75rem;
	background-color: var(--primary);
	border-radius: 50%;
	border: 2px solid var(--white);

	
	box-shadow: -2007px 0 0 2000px var(--primary-300);
}

.form-control-range::-moz-range-thumb {
	
	-webkit-appearance: none;
	appearance: none;

	
	height: .75rem;
	width: .75rem;
	background-color: var(--primary);
	border-radius: 50%;
	border: 2px solid var(--white);

	
	box-shadow: -2007px 0 0 2000px var(--primary-300);
}

.filters-dropdown {
	width: 18rem;
	max-height: 30rem;
	overflow-y: auto;
}

.custom-breadcrumbs {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.custom-breadcrumbs > li {
	margin-right: .5rem;
}

.custom-breadcrumbs > li > a {
	color: var(--gray);
}

.custom-breadcrumbs > li > svg {
	color: var(--gray-400);
	margin-left: .5rem;
}

.font-size-small {
	font-size: .9rem;
}

.font-weight-500 {
	font-weight: 500;
}

.nav-custom2 .nav-link {
	background: var(--gray-200);
	margin-bottom: 1rem;
	font-size: .9rem;
	font-weight: 500;
}

.notification-preview {
	height: min-content;
	position: sticky;
	top: 1rem;
}

.user-avatar {
	border-radius: 50%;
	max-width: 80px;
	max-height: 80px;
}

.container-disabled {
	pointer-events: none;
	opacity: .5;
}

.container-disabled-simple {
	pointer-events: none;
}

.table-custom-container {
	border: 1px solid var(--gray-200);
	border-radius: calc(2*var(--border-radius));
}

.table-custom {
	margin-bottom: 0;
}

.table-custom thead th {
	border-top: 0;
	border-bottom: 0;
	background: white;
}

[data-theme-style="dark"] .table-custom thead th {
	background: var(--white);
	color: var(--gray-800)
}

.table-custom th {
	padding: 1.25rem 1rem;
}

.table-custom td {
	padding: 1.75rem 1rem;
	background: var(--white);
	vertical-align: middle;
	border: 0;
}

.table-custom tbody tr td {
	transition: all .3s ease-in-out;
}

[data-theme-style="dark"] .table-custom tbody tr td {
	border-color: var(--gray-100)
}

.table-custom tbody tr:hover td {
	
}

.pre-custom {
	background: var(--gray-300);
	padding: 2rem;
	font-size: 0.75rem;
}

.no-focus:focus {
    outline: 0;
    box-shadow: none;
}

.appearance-none {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.pricing {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	margin: 0 auto 3rem;
}

.pricing-palden .pricing-item {
	background: var(--gray-50);
	border-radius: calc(2*var(--border-radius));
	margin: 2rem 0;
    border: 1px solid var(--gray-200);
}

[data-theme-style="dark"] .pricing-palden .pricing-item {
	background: var(--gray-100);
}

.pricing-palden .pricing-deco {
	border-radius: calc(2*var(--border-radius)) calc(2*var(--border-radius)) 0 0;
	background: var(--primary);
	padding: 2rem 0 6rem;
	position: relative;
}

.pricing-palden .pricing-deco-img {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 130px;
}

.pricing-palden .pricing-deco-img path {
	fill: var(--gray-50);
}

[data-theme-style="dark"] .pricing-palden .pricing-deco-img path {
	fill: var(--gray-100);
}

.pricing-palden .pricing-title {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 0;
	color: #fff;
}

.pricing-palden .deco-layer {
	transition: transform 0.5s;
}

.pricing-palden .pricing-item:hover .deco-layer--1 {
	transform: translate3d(15px, 0, 0);
}

.pricing-palden .pricing-item:hover .deco-layer--2 {
	transform: translate3d(-15px, 0, 0);
}

.pricing-palden .icon {
	font-size: 2.5rem;
}

.pricing-palden .pricing-price {
	font-size: 3rem;
	font-weight: bold;
	padding: 0;
	color: #fff;
	margin: 0 0 0.25rem 0;
	line-height: 0.75;
}

.pricing-palden .pricing-currency {
	font-size: .9rem;
	vertical-align: top;
}

.pricing-palden .pricing-sub {
	font-size: .9rem;
	margin: 2rem 0;
	color: #fff;
	padding: 0 1.5rem;
}

.pricing-palden .pricing__sentence {
	font-weight: bold;
	margin: 0 0 1em 0;
	padding: 0 0 0.5em;
}

.pricing-palden .pricing-feature-list {
	margin: 0;
	padding: 0 2rem;
	list-style: none;
    font-size: .95rem;
}

.pricing-palden .pricing-feature {
	padding: .75rem 0;
}

.custom-radio-box {
	cursor: pointer;
}

.custom-radio-box .custom-radio-box-main-text {
	font-size: 1.15rem;
	font-weight: bold;
}

.custom-radio-box .custom-radio-box-main-icon {
	font-size: 1.25rem;
}

.custom-radio-box input[type="radio"] + div, .custom-radio-box input[type="checkbox"] + div {
	transition: all .3s ease-in-out;
	border: 2px solid var(--gray-200);
	background: var(--white);
}

.custom-radio-box input[type="radio"]:checked + div, .custom-radio-box input[type="checkbox"]:checked + div {
	border: 2px solid var(--primary);
}

.custom-radio-box input[type="radio"]:hover + div, .custom-radio-box input[type="checkbox"]:hover + div {
	border: 2px solid var(--primary);
}

.cryptocurrency-icon {
    width: 40px;
    height: 40px;
}

.round-circle-md {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

.invoice-table th {
	border-top: 0 !important;
}

.invoice-table td {
	vertical-align: baseline !important;
}

.btn-custom {
	padding: .5rem 1.5rem;
	color: var(--gray-600);
	border-radius: var(--border-radius);
	font-size: .9rem;
	background: var(--white);

}

.btn-custom:hover {
	color: var(--gray-700);
}

.btn-custom.active {
	color: var(--white);
	background: var(--primary);
}

.blog-post-image {
	max-height: 20rem;
	object-fit: cover;
}

.blog-post-image-small {
	height: 13rem;
	max-height: 13rem;
	object-fit: cover;
}

.blog-post-content {
	line-height: 1.75;
	word-break: break-word;
}

.blog-post-content p {
	margin-bottom: 1.5rem;
}

.ql-content p {
	margin-bottom: 0 !important;
}

.ql-content li[data-list="bullet"] {
	list-style-type: disc;
}

.sticky {
	position: sticky !important;
	top: 1rem;
	height: min-content;
}

.zoom-animation-subtle {
	transition: transform .3s;
}

.zoom-animation-subtle:hover {
	transform: scale(1.025);
}

.zoom-animation-subtle:active {
	transform: scale(.98);
}

.up-animation {
	transition: transform .3s;
}

.up-animation:hover {
	transform: translateY(-10px);
}

.loading-overlay {
	padding: 1.25rem;
	border-radius: var(--border-radius);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--white);
	z-index: 100;
	opacity: 0.8;
}

[data-theme-style="dark"] .loading-overlay {
	background: var(--gray-50);
}

.btn-group-custom {
	border: 1px solid var(--gray-100);
	padding: 0.5rem;
	border-radius: var(--border-radius);
	flex-wrap: wrap;
	display: inline-flex;
	gap: 0.5rem;
}

.btn-group-custom .btn {
	border-radius: var(--border-radius) !important;
	background: var(--gray-100);
}

.btn-group-custom .btn.active {
	background: var(--dark);
	color: var(--white);
    z-index: 0 !important;
}

.team-user-avatar {
	width: 45px;
	height: 45px;
}

.team-delegate-access-wrapper {
	margin: .75rem;
	border-radius: .5rem;
}

.announcement-wrapper {
	margin: .75rem;
	border-radius: .5rem;
	opacity: 0;
	transition: opacity .3s ease-in;
	animation: ac-fade-in-down .3s ease-in .6s forwards;
}

.pointer-events-all {
	pointer-events: all !important;
}

.rating-star {
	cursor: pointer;
}

.rating-star svg {
	color: #ffc107;
	transition: color .15s;
}

.rating-star:hover svg,
.rating-star:hover ~ .rating-star svg
{
	color: #ff8800 !important;
}

.rating-star-chosen svg,
.rating-star-chosen ~ .rating-star svg
{
	color: #dd6200;
}

.notification-radio-box:hover {
    cursor: pointer;
}

.notification-radio-box .notification-radio-box-main-icon {
    font-size: 1.25rem;
}

/*
 * Hide the radio itself — the card next to it IS the control, and the rules below draw its state.
 * The markup carried Bootstrap 4's `.form-check-input`, which back then was `position:absolute` with a
 * negative margin and so sat out of the way. Bootstrap 5 makes it a visible 1.25rem box in normal flow,
 * which put a stray radio dot above all 30 cards on the create-notification page. Same clip technique
 * BS5 itself uses for `.btn-check`, kept focusable so keyboard users still get a ring (below).
 */
.notification-radio-box input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.notification-radio-box input[type="radio"]:focus-visible + div {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 2px;
}

.notification-radio-box input[type="radio"] + div {
    transition: all .3s ease-in-out;
    border: 1px solid var(--gray-200);
    background: var(--white);
}

.notification-radio-box input[type="radio"]:checked + div {
    border: 1px solid var(--primary);
}

.notification-radio-box input[type="radio"]:hover + div {
    border: 1px solid var(--primary);
}

/*
 * No .notification-create-preview-* rules here on purpose. The create-notification preview used to float
 * over the page via those classes (bottom-right for a popup, full-width bottom for a bar), which the
 * bzwidget custom.css defined and this theme never ported — so it silently rendered inline instead. That
 * floating behaviour was dropped rather than restored: it made the preview hard to work with. The preview
 * now lives in a `sticky` column beside the type list, and the widgets size themselves (bars are
 * width:100%, the rest carry fixed widths), so no placement CSS is needed and the view no longer toggles
 * those classes.
 */

.index-timeline {
    position: relative;
}

.index-timeline::before {
    content: '';
    position: absolute;
    border-left: 2px solid var(--gray-200);
    height: 100%;
    left: calc(57px / 2);
}

/* Remaining ported app classes (admin overlay, plugin/invoice, custom file input) */
.admin-overlay { position: fixed; width: 100%; height: 100%; background: var(--gray-200); z-index: 100; opacity: .75; }
.plugin-avatar { min-width: 60px; min-height: 60px; width: 60px; height: 60px; object-fit: cover; font-size: 1.25rem; }
.invoice-logo { max-height: 2.5rem; height: 2.5rem; }
/*
 * The file inputs now use Tabler's own .form-control styling (Bootstrap 5 styles ::file-selector-button
 * natively), so they match every other field on the page. The old .bzwidget-file-input skin — a padded
 * grey box with a white chip — was a Bootstrap 4-era design carried over from the bzwidget theme, and it
 * fought BS5: BS5's negative button margins are tuned to .form-control's padding, which that class
 * overrode, so the chip was dragged onto the container's border and off-centre, and BS5's
 * `color: var(--tblr-body-color)` went near-white against its hardcoded white chip in dark mode.
 * Rather than keep patching the skin, the class was dropped from the markup. Only the preview thumbnail
 * below is still used.
 */
.bzwidget-file-input-preview { max-width: 100%; max-height: 68px; min-height: 68px; object-fit: cover; }

/* ------------------------------------------------------------------ *
 * 3. Polish
 * ------------------------------------------------------------------ */

/* Icon sizing: Tabler Icons default to 1em (text size), but the app was
   authored with FontAwesome's "fa-sm" (0.875em) on nearly every icon, so the
   converted "ti" icons ended up ~14% larger than the original design. Restore
   that weight. Explicit size utilities (.fs-*, .h1-.h6, .fa-lg, ...) still win
   because they carry higher specificity / !important. */
.ti { font-size: .875em; vertical-align: -.125em; }
/* Keep FontAwesome fallback icons visually consistent with the Tabler ones. */
.svg-inline--fa { vertical-align: -.125em; }
.navbar-brand img { max-height: 2.25rem; }
.page-body { margin-top: 1.5rem; }
.dropdown-menu { box-shadow: var(--tblr-box-shadow-dropdown, 0 1px 2px 0 rgba(0,0,0,.05)); }

/* Row-action dropdowns live inside .table-responsive, whose `overflow-x: auto`
   makes the browser compute `overflow-y: auto` on the other axis too — so an
   open menu is clipped and the table sprouts a scrollbar. While a menu is open,
   let the container overflow so the menu escapes cleanly. (:has is already used
   by the Tabler bundle, so support is assumed.) */
.table-responsive:has(.dropdown-menu.show) { overflow: visible; }
.caret{display:inline-block;width:0;height:0;border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent;vertical-align:middle}

/* ------------------------------------------------------------------ *
 * Scroll container: the root (bz master)
 * ---------------------------------------------------------------------
 * This theme used to move scrolling down to <body> (html{overflow:hidden}) to dodge a Chromium
 * root-gutter inset, which pinned window.pageYOffset at 0 and needed position:fixed patches for every
 * jQuery-offset widget. The bz master tokens (assets/css/bz/tokens.css) reserve the gutter on the root
 * and style the root scrollbar, like every other bz product, so the root scrolls again. */

/* With the gutter always reserved, locking the page scroll for a modal or
   offcanvas never frees up width — so Bootstrap's compensating padding-right
   (added inline to <body> and to fixed/sticky bars) would instead shove the
   whole layout left by a scrollbar width every time a dialog opens. Cancel it
   so opening a dialog leaves the page perfectly still. */
body.modal-open { padding-right: 0 !important; }
.modal-open .fixed-top,
.modal-open .sticky-top,
.modal-open .navbar.fixed-top { padding-right: 0 !important; }