:root {
    --primary: #7c3aed;
    --primary-dark: #5b21b6;
    --secondary: #0ea5e9;
    --accent: #f472b6;
    --bg-gradient: radial-gradient(circle at 10% 20%, rgba(249, 168, 212, 0.45), transparent 45%), radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.35), transparent 45%), linear-gradient(180deg, #f8fafc 0%, #eef2ff 60%, #ffffff 100%);
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background: var(--bg-gradient);
    color: #0f172a;
    min-height: 100vh;
}

.app-navbar {
    backdrop-filter: blur(18px);
    background: rgba(248, 250, 252, 0.85);
    border-bottom: 1px solid rgba(120, 53, 15, 0.05);
}

.app-navbar .nav-link,
.app-navbar .navbar-brand {
    color: #0f172a !important;
}

.btn-primary {
    background: linear-gradient(120deg, var(--primary), var(--accent));
    border: none;
    box-shadow: 0 20px 40px rgba(124, 58, 237, 0.25);
}

.btn-outline-secondary {
    color: var(--primary-dark);
    border-color: rgba(91, 33, 182, 0.25);
}

main {
    position: relative;
    padding-top: 3rem;
}

.card-highlight {
    border: none;
    border-radius: 1.5rem;
    background: #ffffff;
    box-shadow: 0 35px 80px rgba(79, 70, 229, 0.12);
    color: #0f172a;
}

.card-highlight .text-muted {
    color: #64748b !important;
}


.badge-pill {
    border-radius: 999px;
    padding-inline: .9rem;
}

.text-teal {
    color: var(--secondary) !important;
}

footer {
    background: rgba(248, 250, 252, 0.85);
    color: #475569;
}



@media (max-width: 991.98px) {
    .app-navbar {
        backdrop-filter: none;
    }

    .app-offcanvas {
        --bs-offcanvas-width: min(75vw, 360px);
        width: var(--bs-offcanvas-width);
        height: 100vh;
    }

    .app-offcanvas .navbar-nav {
        width: 100%;
        row-gap: 0.75rem;
    }

    .app-offcanvas .nav-auth {
        width: 100%;
    }

    .app-offcanvas .offcanvas-body {
        overflow-y: auto;
    }

    .app-offcanvas .navbar-nav .nav-link,
    .app-offcanvas .dropdown,
    .app-offcanvas .dropdown-toggle,
    .app-offcanvas .btn {
        /* width: 100%; */
        width: auto;
        text-align: left;
    }

}

@media (max-width: 575.98px) {
    .editor-shell textarea {
        min-height: 200px;
    }
}

.pet-action-btn .button-text {
    display: inline;
}

@media (max-width: 991.98px) {
    .pet-action-btn .button-text {
        display: none !important;
    }

    .pet-action-btn {
        padding-inline: 0.75rem;
    }
}

@media (max-width: 991.98px) {
    .pet-action-btn {
        width: 48px;
        height: 48px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        line-height: 1;
    }

    .pet-action-btn i {
        font-size: 1.3rem;
        margin-right: 0 !important;
        line-height: 1;
    }
    .pet-action-btn .bi.me-2 {
        margin-right: 0 !important;
    }
}



/* ---------- TOM SELECT: borderless, il bordo lo fa il wrapper esterno del form ---------- */

.ts-dropdown {
    width: max-content;
    min-width: 100%;
}

/* wrapper sempre responsivo */
.ts-wrapper {
    width: 100%;
}

/* control: come bootstrap, ma a prova di flex */
.ts-wrapper .ts-control {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    width: 100%;
    min-width: 0;
    /* 🔥 fondamentale nei flex container */
    box-sizing: border-box;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
}

/* single: flex ok, ma con gestione dello spazio */
.ts-wrapper.single .ts-control {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* input: deve poter crescere e NON collassare */
.ts-wrapper.single .ts-control input {
    padding: 0;
    margin: 0;
    min-width: 2ch;
    /* evita width=0 intermittente */
    flex: 1 1 auto;
    /* prende lo spazio disponibile */
}

.ts-wrapper.single .ts-control input::placeholder {
    opacity: 0.5;
}

/* opzionale ma utile: items non devono “spingere” l'input a 0 */
.ts-wrapper.single .ts-control .item {
    flex: 0 1 auto;
    max-width: 100%;
}

.ts-wrapper .ts-control .item[data-value=""] {
    opacity: 0.5;
}

.ck.ck-sticky-panel__content {
    border-color: transparent;
}

.editor-shell .ck-editor__editable {
    min-height: 120px;
    max-height: 400px;
    overflow-y: auto;
}