html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* Dashboard polish */
.card > .card-body > .card-title {
    margin-bottom: .75rem;
}

.card {
    border-radius: .75rem;
}

.row.g-3 [class*="col-"] .card {
    height: 100%;
}

canvas {
    max-width: 100%;
}

/* KPI colors balance on dark backgrounds */
.card.bg-dark .card-title,
.card.bg-secondary .card-title {
    color: #fff;
}

.table td, .table th {
    vertical-align: middle;
}

.contract-terms {
    white-space: pre-line;
}

.badge.bg-purple {
    background-color: #6f42c1;
}

/* ===============================
   DASHBOARD TITLE (fixed layout)
   =============================== */

/* Container: give it real height so absolutely-positioned lines don’t overlap following content */
.dash-title {
    position: relative;
    display: inline-flex; /* keeps “Tips” pill alongside the text */
    align-items: baseline;
    gap: .5rem;
    flex-wrap: nowrap;
    min-height: 3rem; /* <-- ensures KPI row won’t slide under */
    line-height: 1.2;
}

    /* Shared text styles */
    .dash-title .hello {
        font-weight: 600;
        color: #6c757d;
        margin-right: .25rem;
    }

    .dash-title .pop-text {
        font-weight: 800;
        letter-spacing: .2px;
        background: linear-gradient(90deg,#6ea8fe,#4dd0e1,#a78bfa,#f6c453);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-size: 200% 100%;
        animation: titleFloat .7s ease-out both; /* gentle entrance on mount */
    }

        .dash-title .pop-text:hover {
            animation: gradientShift 2.6s ease infinite; /* hover shimmer */
        }

    /* Two stacked lines, overlaid */
    .dash-title .line {
        position: absolute;
        inset: 0 auto auto 0; /* top-left */
        display: inline-flex;
        gap: .35rem;
        white-space: nowrap;
        z-index: 1;
    }

        .dash-title .line .hello {
            color: #6c757d;
            font-weight: 600;
        }

        .dash-title .line .pop-text {
            font-weight: 800;
        }

    /* Initial visibility:
   - ghost visible
   - real hidden and slightly lower */
    .dash-title .line--ghost {
        opacity: 1;
        transform: translateY(0);
    }

    .dash-title .line--real {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

/* Slower, readable sequencing driven by CSS only
   Ghost fades up & out, then real fades in */
@keyframes ghostOut {
    to {
        opacity: 0;
        transform: translateY(-8px) scale(.985);
    }
}

@keyframes realIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Timings — slow enough to see:
   - ghost waits 1.2s, then animates for 1.2s (total ~2.4s)
   - real starts after 2.5s and animates for 1.2s */
.dash-title .line--ghost {
    animation: ghostOut 1.2s ease-out 1.2s forwards;
}

.dash-title .line--real {
    animation: realIn 1.2s ease-out 2.5s forwards;
}

/* After the real line animates in, keep it in normal flow so the
   heading can auto-size if fonts/wrapping change */
@supports (animation-fill-mode: forwards) {
    .dash-title .line--real {
        will-change: transform, opacity;
    }
}

/* Reduced motion preference = no fancy swap */
@media (prefers-reduced-motion: reduce) {
    .dash-title .line--ghost, .dash-title .line--real {
        animation: none !important;
    }

    .dash-title .line--ghost {
        display: none;
    }

    .dash-title .line--real {
        opacity: 1;
        transform: none;
        position: static;
    }
}

/* Tips pill */
.tip-chip {
    border: 0;
    cursor: pointer;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
    color: #5a189a;
    background: rgba(167,139,250,.18);
    box-shadow: 0 .125rem .75rem rgba(90,24,154,.15);
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

    .tip-chip:hover {
        transform: translateY(-1px);
        box-shadow: 0 .35rem 1rem rgba(90,24,154,.2);
        background: rgba(167,139,250,.28);
    }

/* Keyframes reused elsewhere */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes titleFloat {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(.98)
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

/* =======================================================
   Diagonal Gradient Utilities (soft + readable by default)
   ======================================================= */

/* Themeable color stops (HSL for easy tuning) */
:root {
    --g1: 217 91% 60%; /* blue */
    --g2: 278 84% 67%; /* purple */
    --g3: 336 82% 60%; /* pinky red */
}

/* Base diagonal gradient (no animation) */
.grad-diag {
    background-image: linear-gradient(135deg, hsl(var(--g1)) 0%, hsl(var(--g2)) 60%, hsl(var(--g3)) 100%);
    background-size: 180% 180%;
    background-position: 0% 50%;
}

/* Soft tint: keeps foreground readable on light UIs */
.grad-soft {
    background-image: linear-gradient(135deg, hsla(var(--g1) / .16) 0%, hsla(var(--g2) / .16) 60%, hsla(var(--g3) / .16) 100%);
}

/* Animated shimmer (very subtle) */
.grad-animate {
    animation: gradPan 14s ease-in-out infinite alternate;
}

@keyframes gradPan {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* Pill (chip) styling — use with .grad-soft or .grad-diag */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
    line-height: 1;
    color: #1a1a1a; /* readable on soft tints */
    box-shadow: 0 .15rem .9rem rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .2s ease, background .25s ease;
    text-decoration: none;
}

    .pill:is(:hover,:focus) {
        transform: translateY(-1px);
        box-shadow: 0 .45rem 1.1rem rgba(0,0,0,.14);
    }

/* Variant for dark-on-bright gradients (optional) */
.pill--bright {
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.25);
}

/* Make any small badge/pill use the gradient softly */
.badge-grad {
    border-radius: 999px;
    padding: .25rem .5rem;
}

    .badge-grad.grad-soft {
        color: #1a1a1a;
    }

    .badge-grad.grad-diag {
        color: #fff;
        text-shadow: 0 1px 8px rgba(0,0,0,.25);
    }

/* KPI & Admin cards: tasteful diagonal accent (no markup changes) */
.kpi-card::before, .ai-admin .card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    height: 4px;
    width: 44%;
    border-top-left-radius: inherit;
    border-top-right-radius: 12px;
    pointer-events: none;
    background-image: linear-gradient(135deg, hsl(var(--g1)) 0%, hsl(var(--g2)) 60%, hsl(var(--g3)) 100%);
    opacity: .85;
}

.kpi-card, .ai-admin .card {
    position: relative;
    overflow: hidden;
}

    /* Admin metric labels become soft gradient “tags” */
    .ai-admin .card .label {
        display: inline-block;
        padding: .2rem .5rem;
        border-radius: 999px;
        font-weight: 600;
        color: #1a1a1a;
        background-image: linear-gradient(135deg, hsla(var(--g1) / .14), hsla(var(--g2) / .14), hsla(var(--g3) / .14));
    }

    /* Optional: “danger” card accent gets diagonal warning tint */
    .ai-admin .card.danger::before {
        background-image: linear-gradient(135deg,#ff7b7b,#ffb199);
        opacity: .9;
    }

/* Re-skin your existing Tips chip to use gradient utilities
   (works alongside current .tip-chip styles) */
.tip-chip {
    background: none; /* clear old BG so gradient shows */
}

    .tip-chip.pill.grad-soft.grad-animate {
        /* keep your original hover feel, just enhance with gradient */
        box-shadow: 0 .125rem .75rem rgba(90,24,154,.15);
    }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .grad-animate {
        animation: none !important;
    }
}

/* ================================
   Pulsating Dots Background (with halo POP)
   ================================ */

/* Register animatable custom properties for smooth tweening */
@property --glow-r {
    syntax: '<length>';
    inherits: false;
    initial-value: 10px;
}

@property --dot-r {
    syntax: '<length>';
    inherits: false;
    initial-value: 2px;
}

/* Theme knobs — tweak to taste */
:root {
    --dot-color: 345 70% 55%; /* base dot (HSL)     */
    --glow-color: 270 85% 62%; /* soft halo color     */
    /* default radii */
    --glow-r-min: 10px; /* base halo */
    --glow-r-max1: 18px; /* first beat (stronger) */
    --glow-r-max2: 14px; /* second beat (softer)  */

    --dot-r-min: 2px; /* dot core */
    --dot-r-max1: 3.2px; /* first beat */
    --dot-r-max2: 2.6px; /* second beat */

    --dot-gap: 90px; /* grid spacing        */
    --bg-opacity: .22; /* overall subtlety    */
    /* Heartbeat timing: double-beat */
    --pulse-duration: 5s; /* whole heartbeat cycle */
    /* Small diagonal drift */
    --drift-x: 10px;
    --drift-y: 6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-opacity: .18;
        --dot-color: 210 92% 72%;
        --glow-color: 280 85% 70%;
        /* slightly bigger halo in dark for visibility */
        --glow-r-min: 11px;
        --glow-r-max1: 20px;
        --glow-r-max2: 15px;
    }
}

body {
    position: relative;
    z-index: 0;
}

    /* Background layer */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        /* start radii (will animate) */
        --glow-r: var(--glow-r-min);
        --dot-r: var(--dot-r-min);
        /* Two layered radial gradients:
     1) glow/feather uses --glow-r
     2) crisp dot core uses --dot-r
     We animate these radii for a “pop” effect. */
        background-image: radial-gradient(circle, hsla(var(--glow-color) / .16) 0 var(--glow-r), hsla(var(--glow-color) / 0) calc(var(--glow-r) + 1px)), radial-gradient(circle, hsla(var(--dot-color) / .95) 0 var(--dot-r), hsla(var(--dot-color) / 0) calc(var(--dot-r) + 1px));
        background-size: var(--dot-gap) var(--dot-gap), var(--dot-gap) var(--dot-gap);
        background-position: 0 0, 0 0;
        opacity: var(--bg-opacity);
        /* Existing “heartbeat” scale + new halo pop + drift */
        transform: scale(1);
        animation: heartbeatDots var(--pulse-duration) ease-in-out infinite, heartbeatHalo var(--pulse-duration) ease-in-out infinite, driftDots calc(var(--pulse-duration) * 2) ease-in-out infinite alternate;
        will-change: transform, background-position, opacity;
        backface-visibility: hidden;
        transform: translateZ(0) scale(1);
    }

/* Heartbeat: double pulse on the whole layer (as before) */
@keyframes heartbeatDots {
    0% {
        transform: scale(1);
    }

    8% {
        transform: scale(1.07);
    }
    /* first beat */
    16% {
        transform: scale(1);
    }

    26% {
        transform: scale(1.04);
    }
    /* second beat */
    36% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

/* NEW: Halo/dot radii pop in sync with the beats */
@keyframes heartbeatHalo {
    0% {
        --glow-r: var(--glow-r-min);
        --dot-r: var(--dot-r-min);
    }

    6% {
        --glow-r: var(--glow-r-max1);
        --dot-r: var(--dot-r-max1);
    }

    14% {
        --glow-r: var(--glow-r-min);
        --dot-r: var(--dot-r-min);
    }

    22% {
        --glow-r: var(--glow-r-max2);
        --dot-r: var(--dot-r-max2);
    }

    32% {
        --glow-r: var(--glow-r-min);
        --dot-r: var(--dot-r-min);
    }

    100% {
        --glow-r: var(--glow-r-min);
        --dot-r: var(--dot-r-min);
    }
}

/* Gentle diagonal drift to keep it alive */
@keyframes driftDots {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: var(--drift-x) var(--drift-y), var(--drift-x) var(--drift-y);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none !important;
        transform: none !important;
    }
}

@media print {
    body::before {
        display: none;
    }
}

/* Let dropdowns escape table overflow without breaking horizontal scroll */
/*.table-responsive .dropdown.position-static {
    position: static !important;
}

.table-responsive .dropdown-menu {
    z-index: 1080;
}*/

/* Let dropdown menus escape the table scroller only while open */
.table-responsive.dropdown-open {
    overflow: visible;
}

.table-responsive .dropdown-menu {
    z-index: 1080;
}
/* above headers */
/* above table headers */

/* Let the container never block clicks... */
#miniToastContainer {
    pointer-events: none;
}

    /* ...and only let a toast capture clicks while it’s actually visible */
    #miniToastContainer .toast {
        pointer-events: none;
    }
        /* default */
        #miniToastContainer .toast.show,
        #miniToastContainer .toast:hover {
            pointer-events: auto;
        }
        /* visible/interactive */

        /* Optional: keep hidden toasts from covering anything even visually */
        #miniToastContainer .toast:not(.show) {
            visibility: hidden;
        }

/* Toast container itself should never intercept clicks */
#miniToastContainer {
    pointer-events: none;
}

    #miniToastContainer .toast {
        pointer-events: auto;
    }

/* Keep the Actions toggle/menu on top of any ornaments */
#invoiceTable td:last-child .dropdown-toggle {
    position: relative;
    z-index: 2055;
}

#invoiceTable td:last-child .dropdown-menu {
    z-index: 2054;
}

/* Safety: never let the header overlap the first row’s hit area */
#invoiceTable thead {
    position: relative;
    z-index: 1;
}

/* Never let any global mouth overlay eat clicks */
#mouthGlobal {
    pointer-events: none;
}

/* Table context & stacking */
.table-responsive {
    position: relative;
}

/* Keep the Actions cell/toggle definitely on top */
#invoiceTable tbody td:last-child {
    position: relative;
    z-index: 2;
}

#invoiceTable td:last-child .dropdown-toggle {
    position: relative;
    z-index: 2055;
    pointer-events: auto;
}

#invoiceTable td:last-child .dropdown-menu {
    z-index: 2054;
}

/* Header should not sit above first row’s hit area */
#invoiceTable thead {
    position: relative;
    z-index: 0;
}

/* (You already have this, but keeping it here for completeness)
   Let open dropdowns escape the table scroller */
.table-responsive.dropdown-open {
    overflow: visible;
}

/* Micro-toast container must never intercept clicks (you already added this) */
#miniToastContainer {
    pointer-events: none;
}

    #miniToastContainer .toast {
        pointer-events: auto;
    }
/* Guarantee the first data row wins the click fight */
#invoiceTable tbody tr:first-child {
    position: relative;
    z-index: 3;
}

    #invoiceTable tbody tr:first-child td:last-child .dropdown-toggle {
        position: relative;
        z-index: 2060;
    }

    #invoiceTable tbody tr:first-child td:last-child .dropdown-menu {
        z-index: 2059;
    }

/* Allow clicks to pass through header gaps; keep header content clickable */
#invoiceTable thead {
    pointer-events: none;
}

    #invoiceTable thead * {
        pointer-events: auto;
    }

/* Keep Actions cell on top everywhere */
#invoiceTable td:last-child {
    position: relative;
    z-index: 3;
}

/* --- Actions column: always on top (especially the first row) --- */
.table-responsive {
    position: relative;
}

    .table-responsive.dropdown-open {
        overflow: visible;
    }

#invoiceTable td:last-child,
#invoiceTable td:last-child .dropdown,
#invoiceTable td:last-child .dropdown-toggle {
    position: relative;
    z-index: 3000 !important;
}

/* First data row gets a higher layer just in case */
#invoiceTable tbody tr:first-child {
    position: relative;
    z-index: 3001;
}

    #invoiceTable tbody tr:first-child td:last-child .dropdown-toggle {
        z-index: 3002 !important;
    }

/* Header must never block hits into row 1 */
#invoiceTable thead {
    position: relative;
    z-index: 0 !important;
    pointer-events: none !important; /* allow clicks to pass through gaps */
}

    #invoiceTable thead * {
        pointer-events: auto !important;
    }

/* Micro toasts & global “mouth” can never eat clicks */
#miniToastContainer {
    pointer-events: none !important;
}

    #miniToastContainer .toast {
        pointer-events: auto;
    }

#mouthGlobal {
    pointer-events: none !important;
}

/* ---------- AI kebab command menu ---------- */
.ai-kebab {
    line-height: 1;
}

    .ai-kebab:focus {
        outline: 2px solid rgba(13,110,253,.35);
        outline-offset: 2px;
    }

.ai-fly {
    position: fixed; /* portal in viewport coordinates */
    z-index: 4200;
    min-width: 220px;
    max-width: min(360px, 90vw);
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .6rem;
    box-shadow: 0 16px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
    padding: .35rem;
    overflow: hidden;
    transform-origin: top right;
    opacity: 0;
    transform: scale(.98) translateY(-4px);
    transition: opacity .12s ease, transform .12s ease;
}

    .ai-fly.show {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    .ai-fly ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ai-fly .ai-item {
        display: flex;
        align-items: center;
        width: 100%;
        border: 0;
        background: transparent;
        font: inherit;
        text-align: left;
        padding: .55rem .65rem;
        border-radius: .5rem;
        color: #212529;
        text-decoration: none;
        cursor: pointer;
    }

        .ai-fly .ai-item:hover, .ai-fly .ai-item:focus {
            background: rgba(13,110,253,.08);
            outline: none;
        }

        .ai-fly .ai-item.text-danger:hover, .ai-fly .ai-item.text-danger:focus {
            background: rgba(220,53,69,.08);
        }

    .ai-fly .ai-sep {
        height: 1px;
        margin: .35rem .25rem;
        background: rgba(0,0,0,.08);
        border: 0;
    }

@media (prefers-reduced-motion: reduce) {
    .ai-fly {
        transition: none;
    }
}

/* Ensure nothing in the corner blocks first-row clicks */
#invoiceTable thead {
    position: relative;
    z-index: 0;
    pointer-events: none;
}

    #invoiceTable thead * {
        pointer-events: auto;
    }

#miniToastContainer, #mouthGlobal {
    pointer-events: none;
}

/* ====== ACTIONS: Kebab clarity + emphasis ====== */
.ai-kebab {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    line-height: 1;
    border-radius: .55rem;
    border: 1px solid rgba(13,110,253,.35);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    padding: .275rem .5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

    .ai-kebab .label {
        font-weight: 600;
        letter-spacing: .1px;
    }

    .ai-kebab i {
        font-size: 1rem;
        line-height: 1;
    }

/* “Important” state (Unpaid/Overdue/Part-paid) */
.ai-kebab--alert {
    border-color: rgba(220,53,69,.35);
    background: linear-gradient(180deg, #fff, #fff5f6);
}

    .ai-kebab--alert .label {
        color: #dc3545;
    }

/* Calm state (Paid) */
.ai-kebab--calm .label {
    color: #0d6efd;
}

/* Attention dot (shows only in alert state) */
.ai-kebab .dot {
    display: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #dc3545;
    box-shadow: 0 0 0 0 rgba(220,53,69,.35);
}

.ai-kebab--alert .dot {
    display: inline-block;
}

@keyframes aiPulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(220,53,69,.35);
    }

    70% {
        box-shadow: 0 0 0 .45rem rgba(220,53,69,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220,53,69,0);
    }
}

.ai-kebab--alert .dot {
    animation: aiPulseDot 2.4s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ai-kebab--alert .dot {
        animation: none;
    }
}

/* Make it obvious on hover/focus */
.ai-kebab:hover, .ai-kebab:focus {
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(13,110,253,.12);
}

.ai-kebab--alert:hover, .ai-kebab--alert:focus {
    box-shadow: 0 2px 10px rgba(220,53,69,.12);
}

/* ====== Portal menu z-index (below modal; above table) ====== */
.ai-fly {
    z-index: 1049;
}
/* Modal backdrop = 1050, Modal = 1055 */

/* ====== Confirm modal always above everything ====== */
.modal-backdrop {
    z-index: 1990 !important;
}

.modal {
    z-index: 2000 !important;
}

/* ====== Strip old high z-indexes that could beat the modal ====== */
/* Your earlier rules pushed the table/Actions cell above the modal.
   Normalize them to sit below the modal but above the table content. */
#invoiceTable td:last-child,
#invoiceTable td:last-child .dropdown,
#invoiceTable td:last-child .dropdown-toggle {
    z-index: 1010 !important; /* > dropdown(1000), < modal(2000) */
}

#invoiceTable thead {
    position: relative;
    z-index: 0 !important;
    pointer-events: none; /* keep nice “holes” for clicks to row 1 */
}

    #invoiceTable thead * {
        pointer-events: auto;
    }

/* The table wrapper can be relative without creating stacking battles */
.table-responsive {
    position: relative;
}

    /* Keep your “let menus escape while open” behavior (from your JS) */
    .table-responsive.dropdown-open {
        overflow: visible;
    }

/* ====== ACTIONS: 3 variants (Paid / Unpaid / Overdue) ====== */
.ai-kebab {
    --accent: #0d6efd; /* default */
    --accentA: rgba(13,110,253,.35);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    line-height: 1;
    border-radius: .55rem;
    padding: .275rem .5rem;
    border: 1px solid var(--accentA);
    background: linear-gradient(180deg,#fff, color-mix(in srgb, var(--accent) 7%, #fff 93%));
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

    .ai-kebab i {
        font-size: 1rem;
        line-height: 1;
    }

    .ai-kebab .label {
        font-weight: 600;
        letter-spacing: .1px;
        color: var(--accent);
    }

    .ai-kebab:hover, .ai-kebab:focus {
        text-decoration: none;
        box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 25%, transparent);
    }

/* ==== Paid = Success green + dot ==== */
.ai-kebab--paid {
    --accent: #198754; /* Bootstrap 'success' */
    --accentA: rgba(25,135,84,.35);
}

    .ai-kebab--paid .label {
        color: var(--accent);
    }

    /* show the dot for Paid too, with a gentle pulse */
    .ai-kebab--paid .dot {
        display: inline-block;
        background: var(--accent);
        animation: aiPulseDot 2.4s ease-out infinite;
    }

/* Unpaid (amber, gentle attention) */
.ai-kebab--unpaid {
    --accent: #ffc107;
    --accentA: rgba(255,193,7,.40);
}

/* Overdue (red, stronger attention) */
.ai-kebab--overdue {
    --accent: #dc3545;
    --accentA: rgba(220,53,69,.35);
}

/* Attention dot (shown only for unpaid/overdue) */
.ai-kebab .dot {
    display: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accentA);
}

.ai-kebab--unpaid .dot, .ai-kebab--overdue .dot {
    display: inline-block;
}

@keyframes aiPulseDot {
    0% {
        box-shadow: 0 0 0 0 var(--accentA)
    }

    70% {
        box-shadow: 0 0 0 .5rem rgba(0,0,0,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0,0,0,0)
    }
}

.ai-kebab--unpaid .dot {
    animation: aiPulseDot 2.6s ease-out infinite;
}

.ai-kebab--overdue .dot {
    animation: aiPulseDot 2.0s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ai-kebab .dot {
        animation: none !important;
    }
}

/* ====== MODAL ALWAYS ABOVE TABLE ======
   Bootstrap defaults: backdrop 1050, modal 1055.
   We give them a clear lead, then cap table pieces lower. */
.modal-backdrop {
    z-index: 5000 !important;
}

.modal {
    z-index: 5005 !important;
}

/* Reset any aggressive z-index that might keep the top row above the modal */
#invoiceTable tbody tr:first-child,
#invoiceTable tbody tr:first-child * {
    z-index: auto !important; /* kill earlier 2000+/3000+ overrides */
}

/* Keep Actions cell & menus above table content but below modal */
#invoiceTable td:last-child,
#invoiceTable td:last-child .dropdown,
#invoiceTable td:last-child .dropdown-toggle {
    position: relative;
    z-index: 1100 !important; /* > dropdowns(1000), < modal(5005) */
}

    #invoiceTable td:last-child .dropdown-menu {
        z-index: 1090 !important;
    }

/* Your flyout (if used) should sit under the modal too */
.ai-fly {
    z-index: 1085;
}

/* Header should never block clicks into row 1 */
#invoiceTable thead {
    position: relative;
    z-index: 0 !important;
    pointer-events: none !important;
}

    #invoiceTable thead * {
        pointer-events: auto !important;
    }

/* Let menus escape the scroller while open (your JS toggles .dropdown-open) */
.table-responsive {
    position: relative;
}

    .table-responsive.dropdown-open {
        overflow: visible;
    }

/* ==== Keep the action menu on top of the table (but under modals) ==== */
/* Custom flyout (if you're using the ai-fly portal menu) */
.ai-fly {
    z-index: 4800 !important; /* below .modal (5005), above table */
}

/* If a Bootstrap dropdown is still used anywhere in the Actions cell */
#invoiceTable td:last-child .dropdown-toggle {
    z-index: 4701 !important;
    position: relative;
}

#invoiceTable td:last-child .dropdown-menu {
    z-index: 4700 !important;
}

/* Make sure no row beats the modal stack (especially row 1) */
#invoiceTable tbody tr:first-child,
#invoiceTable tbody tr:first-child * {
    z-index: auto !important;
}

/* Modal stays king */
.modal-backdrop {
    z-index: 5000 !important;
}

.modal {
    z-index: 5005 !important;
}

/* Let menus escape the scroller while open (JS adds .dropdown-open) */
.table-responsive {
    position: relative;
}

    .table-responsive.dropdown-open {
        overflow: visible;
    }

.beta-pill {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    padding: .05rem .35rem;
    margin-left: .35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,153,0,.16), rgba(255,0,102,.16));
    color: #b54708; /* accessible amber/brown */
    vertical-align: middle;
}

/* =========================
   NAVBAR AVATAR (one clean block)
   ========================= */

/* Wrapper: fixed footprint; image scales above it */
.ai-avatar-wrap {
    --base: 40px; /* desktop base size */
    width: var(--base);
    height: var(--base);
    position: relative; /* for the halo pseudo element */
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 999px;
    overflow: visible; /* allow the zoom to escape */
    text-decoration: none; /* it's a link */
}

@media (max-width: 991.98px) {
    .ai-avatar-wrap {
        --base: 36px;
    }
}

/* The image itself */
.ai-nav-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    position: relative; /* enables z-index */
    z-index: 2; /* sit above ring */
    transform-origin: center;
    will-change: transform, filter;
    backface-visibility: hidden;
    transition: filter .18s ease, box-shadow .18s ease;
}

/* Immediate pop + start long grow on hover/focus */
.ai-avatar-wrap:hover .ai-nav-avatar,
.ai-avatar-wrap:focus .ai-nav-avatar,
.ai-avatar-wrap:focus-visible .ai-nav-avatar {
    filter: saturate(1.05) contrast(1.03);
    box-shadow: 0 12px 30px rgba(0,0,0,.33);
    /* run two animations: quick pop, then continuous grow */
    animation: aiAvatarPop .16s ease-out 1 forwards, aiAvatarGrow 3.2s cubic-bezier(.22,1,.36,1) .16s forwards, aiAvatarTilt 2.8s ease-in-out .16s infinite alternate;
}

/* Quick snap to 1.6x (no layout shift) */
@keyframes aiAvatarPop {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.6);
    }
}

/* Then continue growing up to a tasteful cap */
@keyframes aiAvatarGrow {
    from {
        transform: scale(1.6);
    }

    60% {
        transform: scale(2.2);
    }

    to {
        transform: scale(3.0);
    }
    /* cap */
}

/* Subtle tilt for a bit of life */
@keyframes aiAvatarTilt {
    from {
        transform: translateZ(0) rotateZ(0deg) scale(2.6);
    }

    to {
        transform: translateZ(0) rotateZ(2.2deg) scale(2.6);
    }
}

/* Gradient halo ring using mask */
.ai-avatar-wrap::after {
    content: "";
    position: absolute;
    inset: -2px; /* just outside the circle */
    border-radius: 999px;
    padding: 2px;
    opacity: 0;
    background: conic-gradient(from 120deg, #8a5bff, #ff2ea6, #42d9ff, #8a5bff);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 6px 18px rgba(138,91,255,.35));
    transition: opacity .18s ease;
    z-index: 1;
    pointer-events: none;
}

.ai-avatar-wrap:hover::after,
.ai-avatar-wrap:focus::after,
.ai-avatar-wrap:focus-visible::after {
    opacity: 1;
}

/* Ensure nothing clips the enlarged avatar */
.navbar, .navbar .container-fluid {
    overflow: visible;
}

/* Accessibility: reduce motion = static gentle enlarge */
@media (prefers-reduced-motion: reduce) {
    .ai-nav-avatar {
        animation: none !important;
        transition: none !important;
    }

    .ai-avatar-wrap:hover .ai-nav-avatar,
    .ai-avatar-wrap:focus .ai-nav-avatar,
    .ai-avatar-wrap:focus-visible .ai-nav-avatar {
        transform: scale(1.4) !important;
    }

    .ai-avatar-wrap::after {
        transition: none !important;
    }
}


.app-footer {
    background: #fff;
}

.app-footer .btn {
    --ring: 0 0 0 0 rgba(13,110,253,.2);
    transition: box-shadow .15s ease, transform .12s ease;
}

    .app-footer .btn:hover {
        transform: translateY(-1px);
    }

    .app-footer .btn:focus-visible {
        box-shadow: var(--ring), 0 .25rem .75rem rgba(0,0,0,.08);
        outline: none;
    }

    .app-footer .btn i {
        font-size: 1rem;
        line-height: 1;
    }

@media (prefers-reduced-motion: reduce) {
    .app-footer .btn {
        transition: none;
    }

        .app-footer .btn:hover {
            transform: none;
        }
}
/* Dark-mode friendly (optional if you use a theme switch) */
@media (prefers-color-scheme: dark) {
    .app-footer {
        background: #0f1113;
    }
}


/* Footer bar + layout polish */
.app-footer {
    position: relative;
    background: transparent;
}

.app-footer__bar {
    height: 4px;
    opacity: .9;
}

/* Make the pills feel clickable but not shouty */
.app-footer .pill {
    color: #fff; /* bright on gradient */
    text-shadow: 0 1px 8px rgba(0,0,0,.25);
    font-weight: 700;
    border: 0;
}

    /* Hover/focus pop with accessible ring */
    .app-footer .pill:hover,
    .app-footer .pill:focus-visible {
        box-shadow: 0 .45rem 1.1rem rgba(0,0,0,.18);
        transform: translateY(-1px);
        outline: none;
    }

/* Stack nicely on small screens */
@media (max-width: 576px) {
    .app-footer .container {
        justify-content: center !important;
        text-align: center;
    }
}


/*Logo Guard*/
/* --- Anti-drag/anti-select helpers --- */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.no-drag {
    -webkit-user-drag: none; /* Safari/Chrome */
    user-drag: none;
}

/* Guard wrapper: places a transparent shield over the image to block hit-tests */
.logo-guard {
    position: relative;
    display: inline-block;
    line-height: 0; /* remove gaps around images */
}

    .logo-guard img {
        display: block;
        height: auto;
        max-width: 100%;
    }

    /* Transparent overlay that intercepts right-click & dragging */
    .logo-guard::after {
        content: "";
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: auto; /* this is the “shield” */
    }

.backup-busy-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55); /* dark slate with transparency */
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.backup-busy-dialog {
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.32);
    max-width: 320px;
    width: 90%;
    font-size: 0.9rem;
}

    .backup-busy-dialog .spinner-border {
        width: 2.25rem;
        height: 2.25rem;
    }
.ai-brand {
    gap: 4px;
}
/* try 4px–8px */
/* Navbar brand logos: pull them closer (handles transparent padding inside images) */
.ai-brand {
    gap: 0 !important;
}
    /* try 0 first */
    .ai-brand img + img {
        margin-left: -6px;
    }
/* then tune: -6px to -14px */

/* ============================
   Manage area: left sidenav box
   ============================ */
.manage-sidenav {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10, 12, 28, .60);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.22);
    overflow: hidden;
}

/* Optional: keep the nav visible while scrolling on desktop */
@media (min-width: 992px) {
    .manage-sidenav {
        position: sticky;
        top: 90px; /* adjust if your navbar height differs */
    }
}

/* Make list-group sit nicely in the box */
.manage-sidenav .list-group-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(232,235,255,.86);
    padding: .85rem 1rem;
}

    .manage-sidenav .list-group-item:last-child {
        border-bottom: 0;
    }

    .manage-sidenav .list-group-item:hover {
        background: rgba(124,201,255,.06);
    }

/* ============================
   Manage area: Title bar (boxed)
   ============================ */
.ai-titlebar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10, 12, 28, .62);
    box-shadow: 0 14px 34px rgba(0,0,0,.20);
}

.ai-title-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(124,201,255,.20);
    background: rgba(124,201,255,.10);
    color: rgba(232,235,255,.96);
}

    .ai-title-icon i {
        font-size: 1.2rem;
        opacity: .95;
    }

.ai-title {
    color: #fff;
    font-weight: 900;
    letter-spacing: .2px;
}

.tiny.muted,
.muted {
    color: rgba(232,235,255,.76) !important;
}

/* Optional: danger variant for delete pages */
.ai-titlebar.ai-titlebar-danger {
    border-color: rgba(220,53,69,.28);
    background: rgba(40, 10, 14, .40);
}

    .ai-titlebar.ai-titlebar-danger .ai-title-icon {
        border-color: rgba(220,53,69,.35);
        background: rgba(220,53,69,.10);
    }

/* ===========================
   GLASS NAVBARS (AUTH + APP)
   Canonical (no duplicates)
   =========================== */

/* =========================================
   App header + navbar (glass / transparent)
   ========================================= */
.ai-app-header {
    position: sticky;
    top: 0;
    z-index: 1030; /* above page content */
}

/* The glass bar itself */
.ai-app-navbar {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(15, 18, 40, 0.10) !important;
    box-shadow: 0 10px 30px rgba(12, 14, 30, 0.08);
}

    .ai-app-navbar .navbar-brand,
    .ai-app-navbar .navbar-brand:hover {
        text-decoration: none;
    }

    /* Premium inner spacing */
    .ai-app-navbar .container-fluid {
        padding-top: .45rem;
        padding-bottom: .45rem;
    }

/* Toggler polish for glass backgrounds */
.ai-nav-toggler {
    border: 1px solid rgba(20, 20, 40, 0.18);
    border-radius: 14px;
    padding: .45rem .55rem;
    box-shadow: 0 10px 24px rgba(12, 14, 30, 0.10);
}

/* Pills + hover lift + neon underline */
.ai-app-navbar .navbar-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .85rem;
    margin: .15rem .15rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .1px;
    color: rgba(10, 12, 28, 0.86) !important;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}

    .ai-app-navbar .navbar-nav .nav-link:hover {
        background: rgba(124, 201, 255, 0.16);
        box-shadow: 0 10px 22px rgba(0,0,0,.08);
        transform: translateY(-1px);
        color: rgba(10, 12, 28, 0.98) !important;
    }

    /* Active state (works for .active and aria-current) */
    .ai-app-navbar .navbar-nav .nav-link.active,
    .ai-app-navbar .navbar-nav .nav-link[aria-current="page"] {
        background: linear-gradient(135deg, rgba(124,201,255,.22), rgba(184,148,255,.18));
        box-shadow: inset 0 0 0 1px rgba(124,201,255,.28), 0 12px 26px rgba(0,0,0,.08);
    }

    /* Neon underline accent */
    .ai-app-navbar .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 6px;
        height: 2px;
        border-radius: 99px;
        background: linear-gradient( 90deg, rgba(124,201,255,0), rgba(124,201,255,.85), rgba(184,148,255,.85), rgba(124,201,255,0) );
        opacity: 0;
        transform: translateY(2px);
        transition: opacity .15s ease, transform .15s ease;
    }

    .ai-app-navbar .navbar-nav .nav-link:hover::after,
    .ai-app-navbar .navbar-nav .nav-link.active::after,
    .ai-app-navbar .navbar-nav .nav-link[aria-current="page"]::after {
        opacity: 1;
        transform: translateY(0);
    }

    /* Focus visibility */
    .ai-app-navbar .navbar-nav .nav-link:focus-visible {
        outline: 2px solid rgba(124,201,255,.55);
        outline-offset: 3px;
    }

    /* Make nav icons read clearly */
    .ai-app-navbar .navbar-nav .nav-link i {
        opacity: .92;
    }

/* Right-side controls inside the glass navbar */
.ai-app-navbar .btn-outline-secondary,
.ai-app-navbar .ai-nav-btn {
    border-color: rgba(15,18,40,.18);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 800;
    border-radius: 999px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    box-shadow: 0 10px 22px rgba(12, 14, 30, 0.08);
}

    .ai-app-navbar .btn-outline-secondary:hover,
    .ai-app-navbar .ai-nav-btn:hover {
        background: rgba(124, 201, 255, 0.18);
        box-shadow: 0 12px 26px rgba(0,0,0,.08);
        transform: translateY(-1px);
    }

    .ai-app-navbar .btn-outline-secondary:focus-visible,
    .ai-app-navbar .ai-nav-btn:focus-visible {
        outline: 2px solid rgba(124,201,255,.55);
        outline-offset: 3px;
    }

/* Greeting + logout match palette */
.ai-nav-greeting,
.ai-nav-logout {
    color: rgba(10, 12, 28, 0.86) !important;
}

/* Dropdown menu glass */
.ai-app-navbar .dropdown-menu,
.ai-nav-dropdown {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(15,18,40,.08);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.10);
    padding: .45rem;
    overflow: hidden;
}

    .ai-app-navbar .dropdown-item,
    .ai-nav-dropdown .dropdown-item {
        border-radius: 10px;
        font-weight: 800;
        padding: .65rem .9rem;
    }

        .ai-app-navbar .dropdown-item:hover,
        .ai-nav-dropdown .dropdown-item:hover {
            background: rgba(124,201,255,.16);
        }

/* Desktop polish */
@media (min-width: 992px) {
    .ai-app-navbar {
        border-radius: 0 0 18px 18px;
        margin: 0 10px;
    }
}

/* =========================================
   Pro banner: ensure it never disappears
   ========================================= */
.ai-pro-banner-wrap {
    position: relative;
    z-index: 1025; /* safely below navbar (1030) but above content */
}

/* =========================================
   Auth Navbar (top capsule over animated bg)
   ========================================= */
.ai-auth-body .ai-auth-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
}

    .ai-auth-body .ai-auth-navbar .container {
        padding: .65rem .9rem;
        border-radius: 999px;
        background: rgba(15, 17, 36, 0.55);
        border: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 16px 44px rgba(0,0,0,.25);
    }

    .ai-auth-body .ai-auth-navbar .navbar-brand span {
        font-weight: 900;
        letter-spacing: .2px;
    }

    .ai-auth-body .ai-auth-navbar .btn {
        border-radius: 999px;
        font-weight: 900;
        padding: .45rem .85rem;
        box-shadow: 0 10px 24px rgba(0,0,0,.18);
    }

    .ai-auth-body .ai-auth-navbar .btn-outline-light {
        border-color: rgba(255,255,255,.55);
        background: rgba(255,255,255,.06);
    }

        .ai-auth-body .ai-auth-navbar .btn-outline-light:hover {
            background: rgba(255,255,255,.14);
            border-color: rgba(255,255,255,.75);
            transform: translateY(-1px);
        }

    .ai-auth-body .ai-auth-navbar .btn-primary {
        background: linear-gradient(135deg, rgba(124,201,255,.95), rgba(184,148,255,.92));
        border: none;
    }

        .ai-auth-body .ai-auth-navbar .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 36px rgba(0,0,0,.22);
        }

    .ai-auth-body .ai-auth-navbar a:focus-visible,
    .ai-auth-body .ai-auth-navbar button:focus-visible {
        outline: 2px solid rgba(124,201,255,.65);
        outline-offset: 3px;
    }

/* =========================================
   Pro dropdown (VIP/Pro tools menu)
   ========================================= */

/* Make the Pro toggle feel like a premium capsule */
#proMenu.nav-link {
    border: 1px solid rgba(184,148,255,.28);
    background: linear-gradient(135deg, rgba(184,148,255,.14), rgba(124,201,255,.10));
    box-shadow: 0 10px 22px rgba(12, 14, 30, 0.08);
}

    /* Slightly stronger hover “glow” for the Pro toggle */
    #proMenu.nav-link:hover,
    #proMenu.nav-link:focus-visible {
        background: linear-gradient(135deg, rgba(184,148,255,.20), rgba(124,201,255,.14));
        box-shadow: 0 14px 30px rgba(12,14,30,.12);
    }

    /* Make the star icon read as “premium” */
    #proMenu.nav-link i.bi-stars {
        opacity: 1;
        filter: drop-shadow(0 10px 16px rgba(184,148,255,.18));
    }

/* Dropdown: slightly more “app-like” spacing + crisp separators */
.ai-app-navbar .dropdown-menu[aria-labelledby="proMenu"] {
    padding: .55rem;
}

    .ai-app-navbar .dropdown-menu[aria-labelledby="proMenu"] .dropdown-divider {
        margin: .4rem .25rem;
        opacity: .18;
    }

    /* Items: align icons nicely and reduce jitter on hover */
    .ai-app-navbar .dropdown-menu[aria-labelledby="proMenu"] .dropdown-item {
        display: flex;
        align-items: center;
        gap: .5rem;
        white-space: nowrap;
    }

        /* Optional: make the first two items (PO + Remittance) feel “primary” */
        .ai-app-navbar .dropdown-menu[aria-labelledby="proMenu"] .dropdown-item:nth-child(1),
        .ai-app-navbar .dropdown-menu[aria-labelledby="proMenu"] .dropdown-item:nth-child(2) {
            font-weight: 900;
        }

/* Keep dropdown aligned on the right cleanly on smaller viewports too */
@@media (max-width: 991.98px) {
    .dropdown-menu-end {
        right: auto !important;
        left: 0 !important;
    }
}


/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .ai-app-navbar .navbar-nav .nav-link,
    .ai-app-navbar .navbar-nav .nav-link::after {
        transition: none !important;
    }

        .ai-app-navbar .navbar-nav .nav-link:hover {
            transform: none !important;
        }

    .ai-auth-body .ai-auth-navbar .btn:hover {
        transform: none !important;
    }
}

.ai-nav-text {
    display: inline;
    font-weight: 800;
    margin-left: .1rem;
}

@media (max-width: 991.98px) {
    .ai-app-navbar .nav-link {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }
}


/* =========================
   Cookie Consent UI (Glass)
   ========================= */

:root {
    --cc-z: 20000;
    --cc-radius: 18px;
    --cc-shadow: 0 18px 60px rgba(0,0,0,.35);
    --cc-border: rgba(255,255,255,.14);
    --cc-bg: rgba(16, 18, 22, .72);
    --cc-bg-strong: rgba(16, 18, 22, .92);
    --cc-text: rgba(255,255,255,.92);
    --cc-muted: rgba(255,255,255,.72);
}

/* Banner wrapper (keeps it off the very edge + safe area) */
#cookieConsent.cc-banner {
    z-index: var(--cc-z);
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}

/* The “card” inside the banner */
#cookieConsent .cc-card {
    border-radius: var(--cc-radius);
    background: var(--cc-bg);
    border: 1px solid var(--cc-border);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Top animated gradient strip */
#cookieConsent .cc-accent {
    height: 4px;
    background: linear-gradient(90deg, hsl(210 90% 56%), hsl(280 78% 62%), hsl(330 80% 58%), hsl(210 90% 56%) );
    background-size: 240% 100%;
    animation: cc-grad 10s linear infinite;
    opacity: .95;
}

@keyframes cc-grad {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 240% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #cookieConsent .cc-accent {
        animation: none;
    }
}

/* Typography */
#cookieConsent .cc-copy {
    color: var(--cc-text);
    line-height: 1.35;
}

    #cookieConsent .cc-copy small {
        color: var(--cc-muted);
    }

/* Buttons: unify sizing + better feel */
#cookieConsent .cc-actions .btn {
    border-radius: 999px;
    padding: .45rem .85rem;
    font-weight: 600;
    letter-spacing: .2px;
}

/* Slightly “premium” outline */
#cookieConsent .cc-actions .btn-outline-light {
    border-color: rgba(255,255,255,.45);
}

    #cookieConsent .cc-actions .btn-outline-light:hover {
        border-color: rgba(255,255,255,.75);
    }

/* Manage button sits between primary + outline */
#cookieConsent .cc-actions .btn-secondary {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.18);
}

    #cookieConsent .cc-actions .btn-secondary:hover {
        background: rgba(255,255,255,.20);
    }

/* Modal styling to match */
#cookieSettingsModal .modal-content.cc-modal {
    border-radius: 20px;
    background: rgba(18, 20, 24, .92);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 22px 70px rgba(0,0,0,.45);
    overflow: hidden;
}

#cookieSettingsModal .cc-modal .modal-header {
    border-bottom-color: rgba(255,255,255,.10);
    background: radial-gradient(1200px 420px at 10% 0%, rgba(120, 82, 255, .22), transparent 55%), radial-gradient(1200px 420px at 90% 0%, rgba(255, 92, 156, .18), transparent 55%);
}

#cookieSettingsModal .cc-modal .modal-title {
    color: rgba(255,255,255,.92);
}

#cookieSettingsModal .cc-modal .modal-body {
    color: rgba(255,255,255,.86);
}

#cookieSettingsModal .cc-modal .text-muted {
    color: rgba(255,255,255,.62) !important;
}

#cookieSettingsModal .cc-modal .border {
    border-color: rgba(255,255,255,.12) !important;
}

#cookieSettingsModal .cc-modal .modal-footer {
    border-top-color: rgba(255,255,255,.10);
}

/* Switches: slightly brighter on dark background */
#cookieSettingsModal .cc-modal .form-check-input {
    cursor: pointer;
}

    #cookieSettingsModal .cc-modal .form-check-input:checked {
        filter: saturate(1.1);
    }


/* ===== Cookie banner branding ===== */
.cc-card {
    position: relative;
    overflow: hidden;
    background: #121212;
    border-radius: 16px;
}

    /* Large abstract cookie watermark */
    .cc-card::before {
        content: "";
        position: absolute;
        inset: -10%;
        background-image: url('/uploads/logos/abstractcookie.png');
        background-repeat: no-repeat;
        background-position: right center;
        background-size: min(420px, 70vw);
        opacity: 0.08;
        pointer-events: none;
        user-select: none;
        filter: saturate(1.1) blur(0.3px);
    }

/* ===== Cookie settings modal branding ===== */
.cc-modal {
    position: relative;
    background-color: #161616;
    color: #fff;
    border-radius: 16px;
    overflow: hidden;
}

    /* Background logo */
    .cc-modal::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('/uploads/logos/abstractcookie.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 65%;
        opacity: 0.06;
        pointer-events: none;
        user-select: none;
    }

    /* Cookie category blocks */
    .cc-modal .border.rounded {
        position: relative;
        background-color: rgba(255,255,255,0.04);
        overflow: hidden;
    }

        /* Category watermark */
        .cc-modal .border.rounded::after {
            content: "";
            position: absolute;
            right: -12px;
            bottom: -12px;
            width: 120px;
            height: 120px;
            background-image: url('/uploads/logos/abstractcookie.png');
            background-repeat: no-repeat;
            background-size: contain;
            opacity: 0.05;
            pointer-events: none;
        }

/*Further fooot CSS*/
.ai-foot-meta {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    margin-left: .25rem;
    flex-wrap: wrap;
}

.ai-foot-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255,255,255,.85);
    line-height: 1.2;
    transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
    user-select: none;
}

    .ai-foot-chip i {
        opacity: .9;
        font-size: .95em;
    }

    .ai-foot-chip:hover {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,.28);
        background: rgba(0,0,0,.28);
    }

.ai-foot-version {
    border-color: rgba(255,215,0,.22); /* subtle “premium” vibe */
}

    .ai-foot-version:hover {
        border-color: rgba(255,215,0,.42);
    }

/* ==========================
   Footer — canonical override
   ========================== */

/* Ensure footer never gets an accidental solid background */
.app-footer {
    background: transparent !important;
    position: relative;
}

/* Gradient bar always visible */
.app-footer__bar {
    height: 4px;
    opacity: .95;
}

/* Keep footer content aligned consistently */
.app-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Footer pills: treat as "bright" consistently */
.app-footer .pill {
    color: #fff !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.28);
}

/* Chips: readable regardless of page background */
.ai-foot-chip {
    background: rgba(0,0,0,.22);
    border-color: rgba(255,255,255,.16);
}

/* Small screens: center it nicely */
@media (max-width: 576px) {
    .app-footer .container {
        justify-content: center !important;
        text-align: center;
    }
}

/* Footer: keep left+right on wide screens */
.app-footer__meta {
    flex: 1 1 auto;
    min-width: 280px;
}

.app-footer__nav {
    margin-left: auto;
    justify-content: flex-end;
}

/* When wrapping kicks in, make nav its own “row” and keep it polished */
@media (max-width: 992px) {
    .app-footer__nav {
        flex-basis: 100%;
        width: 100%;
        margin-left: 0;
        justify-content: center; /* or flex-start if you prefer */
        padding-top: .25rem;
    }
}

/* Optional: keep chips looking premium but compact */
.ai-foot-chip {
    padding: .14rem .45rem;
    font-size: .78rem;
    border-radius: 999px;
}

/* ==========================
   Footer — layout lock-in
   ========================== */

.app-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

/* Left block behaves nicely */
.app-footer__meta {
    flex: 1 1 auto;
    min-width: 280px;
}

/* Right block sticks right on desktop */
.app-footer__nav {
    margin-left: auto;
    justify-content: flex-end;
}

/* If wrapping happens, nav becomes its own clean row */
@media (max-width: 992px) {
    .app-footer__nav {
        flex-basis: 100%;
        width: 100%;
        margin-left: 0;
        justify-content: center; /* change to flex-start if you want left-aligned */
        padding-top: .25rem;
    }
}

/* Chips: never wrap inside themselves */
.ai-foot-chip {
    white-space: nowrap;
}

/* Pills: keep them consistent size & stop ugly wraps */
.app-footer .pill {
    white-space: nowrap;
    font-size: .78rem; /* slightly smaller = fewer wraps */
    padding: .26rem .6rem; /* slightly tighter */
}

/* On very small screens, reduce pill text (optional) */
@media (max-width: 420px) {
    .app-footer .pill {
        font-size: .74rem;
        padding: .24rem .55rem;
    }
}

/* =========================================================
   NAVBAR (right side tools) + PRO BANNER + LOAD POP
   Drop-in: replace your current "Nav bar right side tools" block
   ========================================================= */

/* --- Layering: keep dropdowns above Pro banner --- */
.ai-app-header {
    position: relative;
    z-index: 1030;
    overflow: visible;
}

.ai-app-navbar {
    position: relative;
    z-index: 1030;
}

.ai-pro-banner-wrap {
    position: relative;
    z-index: 1025;
}

.ai-app-navbar .dropdown-menu,
.ai-nav-dropdown {
    z-index: 1100;
}

/* Mobile: keep dropdown aligned & visible */
@media (max-width: 991.98px) {
    .dropdown-menu-end {
        right: auto !important;
        left: 0 !important;
    }
}

/* --- Compact container for credits badge / pro/vip pill in navbar --- */
.ai-credits-compact {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

    /* Clamp any badge/button inside the compact area */
    .ai-credits-compact .badge,
    .ai-credits-compact .btn,
    .ai-credits-compact .pill {
        padding: .25rem .55rem;
        font-size: .85rem;
        line-height: 1.1;
        white-space: nowrap;
    }

/* --- Nav pill hover pop (hover only; doesn't interfere with load pop) --- */
@keyframes aiNavPillPop {
    0% {
        transform: translateY(0) scale(1);
    }

    35% {
        transform: translateY(-1px) scale(1.12);
    }

    70% {
        transform: translateY(0) scale(.985);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.ai-app-navbar .navbar-nav .nav-link {
    position: relative;
    transform-origin: center;
    will-change: transform;
}

/* Hover animation only (load animation is on the badge/span itself) */
@media (prefers-reduced-motion: no-preference) {
    .ai-app-navbar .navbar-nav .nav-link:hover {
        animation: aiNavPillPop 420ms cubic-bezier(.2,.9,.2,1) 1;
    }
}

/* --- Premium Tools toggle (NO transform on the link itself) --- */
#utilsMenu.ai-utils-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    overflow: hidden; /* keep shine clipped */
    border: 1px solid rgba(184,148,255,.28);
    background: linear-gradient(135deg, rgba(184,148,255,.14), rgba(124,201,255,.10));
    box-shadow: 0 10px 22px rgba(12,14,30,.08);
}

    #utilsMenu.ai-utils-premium:hover,
    #utilsMenu.ai-utils-premium:focus-visible {
        border-color: rgba(184,148,255,.38);
        background: linear-gradient(135deg, rgba(184,148,255,.20), rgba(124,201,255,.14));
        box-shadow: 0 14px 30px rgba(12,14,30,.12);
    }

    /* Shine sweep uses pseudo-element only */
    #utilsMenu.ai-utils-premium::before {
        content: "";
        position: absolute;
        inset: -60% -70%;
        opacity: 0;
        transform: translateX(-45%) rotate(12deg);
        background: linear-gradient( 115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 35%, rgba(255,255,255,.42) 45%, rgba(255,255,255,.12) 55%, rgba(255,255,255,0) 70% );
        pointer-events: none;
    }

@keyframes aiToolsGlisten {
    0% {
        opacity: 0;
        transform: translateX(-55%) rotate(12deg);
    }

    12% {
        opacity: .95;
    }

    60% {
        opacity: .55;
    }

    100% {
        opacity: 0;
        transform: translateX(55%) rotate(12deg);
    }
}

#utilsMenu.ai-utils-premium:hover::before {
    opacity: 1;
    animation: aiToolsGlisten 1.15s ease-out 1;
}

/* Icon “breath” is on child only (safe) */
#utilsMenu.ai-utils-premium .ai-utils-ico {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(99,102,241,.18);
    box-shadow: 0 0 0 rgba(99,102,241,0);
}

@keyframes aiToolsIconBreath {
    0%,100% {
        box-shadow: 0 0 0 rgba(99,102,241,0);
        filter: saturate(1);
    }

    50% {
        box-shadow: 0 10px 20px rgba(99,102,241,.18);
        filter: saturate(1.08);
    }
}

@media (prefers-reduced-motion: no-preference) {
    #utilsMenu.ai-utils-premium .ai-utils-ico {
        animation: aiToolsIconBreath 3.2s ease-in-out infinite;
    }
}

#utilsMenu.ai-utils-premium .ai-utils-chip {
    display: inline-flex;
    align-items: center;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .2px;
    border: 1px solid rgba(255,193,7,.28);
    background: rgba(255,193,7,.12);
    white-space: nowrap;
}

/* --- LOAD/REFRESH POP (for Credits/VIP/Pro/Credits number) --- */
/* Use a unique keyframe name and FORCE it to win when the class is present */
@keyframes aiLoadPop {
    0% {
        transform: scale(.86);
        filter: drop-shadow(0 0 0 rgba(0,0,0,0));
    }

    60% {
        transform: scale(1.10);
        filter: drop-shadow(0 .25rem .75rem rgba(0,0,0,.22));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 .15rem .45rem rgba(0,0,0,.16));
    }
}

/* Apply to the badge/span itself (not the nav-link) */
.ai-pop-onload {
    transform-origin: center;
    will-change: transform, filter;
    animation: aiLoadPop .34s cubic-bezier(.2,.9,.2,1) 1 !important;
}

/* If you also use ai-badge-pop anywhere, keep it as an alias to the same effect */
.ai-badge-pop {
    transform-origin: center;
    will-change: transform, filter;
    animation: aiLoadPop .34s cubic-bezier(.2,.9,.2,1) 1 !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ai-pop-onload,
    .ai-badge-pop {
        animation: none !important;
    }

    .ai-app-navbar .navbar-nav .nav-link,
    .ai-app-navbar .navbar-nav .nav-link::after {
        transition: none !important;
    }

        .ai-app-navbar .navbar-nav .nav-link:hover {
            animation: none !important;
            transform: none !important;
        }

    #utilsMenu.ai-utils-premium .ai-utils-ico {
        animation: none !important;
    }

    #utilsMenu.ai-utils-premium:hover::before {
        animation: none !important;
    }
}

/* ================================
   MOBILE: prevent footer overlap
   ================================ */

/* Stop reserving only 60px (too small for wrapped footer pills) */
body {
  margin-bottom: 0 !important;
}

/* Reserve enough space for the footer on all pages */
main {
  padding-bottom: calc(220px + env(safe-area-inset-bottom)) !important;
}

/* On bigger screens the footer is usually shorter */
@media (min-width: 768px) {
  main {
    padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
  }
}

/* Safety: ensure footer is never "fixed" by accident */
.app-footer {
  position: static !important;
}

/* ================================
   Create Client: sticky sidebar fix
   ================================ */

/* Default: NOT sticky (prevents overlap when columns stack) */
.page-client-create .sidebar-sticky {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

/* Only stick on large screens where the page is genuinely two-column */
@media (min-width: 992px) {
    .page-client-create .col-md-7,
    .page-client-create .col-md-5 {
        align-self: flex-start;
    }

    .page-client-create .sidebar-sticky {
        position: sticky !important;
        top: 1rem !important; /* adjust if you want more clearance */
        z-index: 1; /* harmless; keeps it above its own background */
    }
}

/* HARD OVERRIDE: Create Client sidebar must never stick on stacked layouts */
body .page-client-create .sidebar-sticky {
    position: static !important;
    top: auto !important;
}

@media (min-width: 992px) {
    body .page-client-create .sidebar-sticky {
        position: sticky !important;
        top: 1rem !important;
    }
}