/* ============================================================
   INCI4ME - SITE MODERN 2026
   Restyling globale non distruttivo.
   Obiettivo: interfaccia semplice, rassicurante e professionale
   per utenti privati e professionali, mantenendo tutta la logica.
   ============================================================ */

:root {
    --inci-bg: #f7f7fb;
    --inci-surface: #ffffff;
    --inci-surface-soft: #fbfbfd;
    --inci-border: #e7e7ee;
    --inci-border-strong: #d8d8e2;
    --inci-text: #24232a;
    --inci-muted: #6f6d79;
    --inci-dark: #242329;
    --inci-accent: #8474e8;
    --inci-accent-soft: #f1efff;
    --inci-pink-soft: #fff3f8;
    --inci-green-soft: #eff9f3;
    --inci-blue-soft: #eef6ff;
    --inci-shadow: 0 10px 32px rgba(45, 42, 61, .07);
    --inci-shadow-hover: 0 16px 42px rgba(45, 42, 61, .11);
    --inci-radius-lg: 20px;
    --inci-radius-md: 14px;
    --inci-radius-sm: 10px;
}

html { font-size: 14px; }

body.inci-site {
    min-height: 100vh;
    margin-bottom: 0;
    background:
        radial-gradient(circle at 12% -8%, rgba(132,116,232,.055), transparent 26rem),
        radial-gradient(circle at 90% 0%, rgba(244,180,208,.05), transparent 28rem),
        #fff;
    color: var(--inci-text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body.inci-site .site-content-shell {
    width: calc(100% - 32px);
    max-width: 1480px;
    margin: 0 auto;
}

body.inci-site .site-main { min-height: 48vh; }

/* ---------------------------
   Header / navigation
---------------------------- */
body.inci-site header .navbar {
    min-height: 68px;
    margin-bottom: 18px !important;
    padding: 7px 0;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--inci-border) !important;
    box-shadow: 0 4px 20px rgba(38, 35, 52, .045) !important;
    backdrop-filter: blur(12px);
}

body.inci-site header .navbar .container-fluid {
    width: calc(100% - 28px);
    max-width: 1480px;
    margin: 0 auto;
}

body.inci-site .navbar-logo {
    max-height: 44px;
    width: auto;
}

body.inci-site .inci-header-panel {
    width: min(1320px, calc(100vw - 32px));
    max-width: none !important;
    transition: none !important;
}

body.inci-site .inci-main-navbar #mainNavbar {
    align-items: center;
}

body.inci-site .inci-main-navbar #mainNavbar > .navbar-nav.mx-auto {
    flex: 1 1 auto;
    justify-content: center;
}

body.inci-site .header-actions,
body.inci-site .header-auth-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.inci-site .header-actions {
    flex: 0 0 auto;
}

body.inci-site .header-account-link,
body.inci-site .language-current,
body.inci-site .header-auth-link {
    white-space: nowrap;
}

body.inci-site .header-register-link {
    color: #fff !important;
    background: var(--inci-dark) !important;
}

body.inci-site .header-register-link:hover {
    color: #fff !important;
    background: #292633 !important;
}

body.inci-site .language-current,
body.inci-site .language-option {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

body.inci-site .language-dropdown .lang-flag {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

body.inci-site .language-menu {
    min-width: 190px;
}

body.inci-site .language-option.active {
    color: var(--inci-dark);
    background: var(--inci-accent-soft);
    font-weight: 700;
}

body.inci-site header .navbar .nav-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    margin: 0 2px;
    border-radius: 10px;
    color: #686672 !important;
    font-size: .92rem;
    font-weight: 650;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

body.inci-site header .navbar .nav-link:hover {
    color: var(--inci-dark) !important;
    background: #f5f4f8;
}

body.inci-site header .navbar .nav-link.active {
    color: var(--inci-dark) !important;
    background: var(--inci-accent-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(132,116,232,.14);
}

body.inci-site header .dropdown-menu {
    padding: 8px;
    border: 1px solid var(--inci-border);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(45,42,61,.14);
}

body.inci-site header .dropdown-item {
    padding: 9px 11px;
    border-radius: 8px;
    font-size: .9rem;
}

body.inci-site header .dropdown-item:hover,
body.inci-site header .dropdown-item:focus {
    background: var(--inci-accent-soft);
    color: var(--inci-dark);
}

body.inci-site .lang-item {
    opacity: .72;
    border-radius: 7px !important;
    transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.inci-site .lang-item:hover { opacity: 1; transform: translateY(-1px); }
body.inci-site .active-lang { opacity: 1; box-shadow: 0 0 0 2px rgba(132,116,232,.24); }

/* Titolo generato dal layout: discreto e coerente. */
body.inci-site header + .container.mt-4,
body.inci-site header ~ .container.mt-4 {
    max-width: 1180px;
}
body.inci-site header ~ .container.mt-4 h2 {
    margin-bottom: 0;
    color: var(--inci-dark);
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    letter-spacing: -.035em;
}

/* ---------------------------
   Footer a larghezza pagina
---------------------------- */
body.inci-site .site-footer {
    width: 100%;
    padding: 0 16px 18px;
    background: transparent !important;
}

body.inci-site .site-footer-panel {
    width: min(1320px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 24px 26px 18px;
    background: linear-gradient(180deg, #f8f8fb 0%, #f4f4f8 100%);
    border: 1px solid var(--inci-border);
    border-radius: 18px;
    box-shadow: 0 7px 24px rgba(45,42,61,.045);
    transition: width .18s ease;
}

body.inci-site .site-footer-panel h6 {
    color: var(--inci-dark);
    font-size: .9rem;
}
body.inci-site .site-footer-panel p,
body.inci-site .site-footer-panel a,
body.inci-site .site-footer-panel li {
    color: #686672 !important;
    line-height: 1.55;
}
body.inci-site .site-footer-panel a:hover { color: var(--inci-dark) !important; }

/* ---------------------------
   Shared public pages
---------------------------- */
body.inci-site .public-page,
body.inci-site .info-page,
body.inci-site .result-page {
    width: 100%;
    max-width: 1040px;
    margin: 12px auto 36px;
}

body.inci-site .public-card,
body.inci-site .info-page > .card,
body.inci-site .public-page > .card {
    border: 1px solid var(--inci-border);
    border-radius: var(--inci-radius-lg);
    background: #fff;
    box-shadow: var(--inci-shadow);
}

body.inci-site .public-page h2,
body.inci-site .public-page h3,
body.inci-site .info-page h2,
body.inci-site .info-page h3 {
    color: var(--inci-dark);
    letter-spacing: -.03em;
}

body.inci-site .public-page p,
body.inci-site .public-page li,
body.inci-site .info-page p,
body.inci-site .info-page li {
    color: #5f5d68;
    line-height: 1.72;
}

/* ---------------------------
   ARCHIVIO INCI
---------------------------- */
body.active-archivioinci .site-main > .mb-3.text-center,
body.active-index .site-main > .mb-3.text-center {
    width: fit-content;
    max-width: 100%;
    margin: 4px auto 16px !important;
    padding: 8px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none;
    font-size: .86rem;
}

body.active-archivioinci .site-main > .container.mt-5 {
    max-width: 1200px;
    margin-top: 18px !important;
    padding: 0;
}

body.active-archivioinci #inci-tab {
    gap: 7px;
    padding: 7px;
    background: #f6f5f9;
    border: 1px solid var(--inci-border);
    border-radius: 16px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

body.active-archivioinci #inci-tab .nav-item { min-width: max-content; }
body.active-archivioinci #inci-tab .nav-link {
    min-height: 43px;
    padding: 9px 14px;
    border: 0;
    border-radius: 11px;
    color: #6a6874;
    font-weight: 650;
    background: transparent;
}
body.active-archivioinci #inci-tab .nav-link i { color: #8174c9 !important; }
body.active-archivioinci #inci-tab .nav-link.active {
    color: #fff !important;
    background: var(--inci-dark) !important;
    box-shadow: 0 6px 16px rgba(36,35,41,.14);
}
body.active-archivioinci #inci-tab .nav-link.active i { color: #fff !important; }

body.active-archivioinci #inci-tabContent {
    margin-top: 18px;
}
body.active-archivioinci #inci-tabContent > .tab-pane {
    padding: 0;
}
body.active-archivioinci #hydrating .card {
    padding: 26px !important;
    border: 1px solid var(--inci-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--inci-shadow) !important;
    background: linear-gradient(180deg, #fff 0%, #fdfdff 100%);
}
body.active-archivioinci .inci-title {
    color: var(--inci-dark);
    font-size: 1.2rem;
    letter-spacing: -.02em;
}
body.active-archivioinci #ingrediente-input {
    min-height: 56px;
    padding: 12px 18px;
    border: 1px solid var(--inci-border-strong);
    border-radius: 16px;
    background: #fff;
    font-size: 1.02rem !important;
    box-shadow: 0 5px 18px rgba(45,42,61,.045);
}
body.active-archivioinci #ingrediente-input:focus {
    border-color: #a99fe7;
    box-shadow: 0 0 0 4px rgba(132,116,232,.10), 0 7px 22px rgba(45,42,61,.06);
}

body.active-archivioinci #inci-comuni,
body.active-archivioinci #allergens,
body.active-archivioinci #colorants,
body.active-archivioinci #fragrances,
body.active-archivioinci #guida {
    padding: 22px;
    border: 1px solid var(--inci-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--inci-shadow);
}
body.active-archivioinci .list-group-item {
    margin-bottom: 6px;
    border: 1px solid #ececf1 !important;
    border-radius: 10px !important;
    background: #fff;
}
body.active-archivioinci .list-group-item:hover { background: #f8f7fc; }
body.active-archivioinci .list-group-item.selected {
    background: var(--inci-accent-soft) !important;
    border-color: #d8d2ff !important;
    color: var(--inci-dark) !important;
}
body.active-archivioinci #ocrResult {
    margin-top: 22px !important;
    padding-top: 2px;
}
body.active-archivioinci #intro-section .card,
body.active-archivioinci #intro-section .card .card {
    border: 1px solid var(--inci-border);
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
}
body.active-archivioinci #intro-section .card-header {
    background: #fafafd;
    border-bottom: 1px solid var(--inci-border);
}
body.active-archivioinci #intro-section .btn-link {
    color: #4e4b59;
    text-decoration: none !important;
    font-weight: 700;
}
body.active-archivioinci #intro-section img { border-radius: 16px; }

/* ---------------------------
   ANALIZZA - mantiene la semplicità tipo Google Translate
---------------------------- */
body.active-index .site-main > .container.mt-5 {
    max-width: 1160px;
    margin-top: 14px !important;
    padding: 0;
}
body.active-index #myTabContent > #caricamento > .row.mt-4 {
    margin-top: 0 !important;
    padding: 8px;
    gap: 0;
    border: 1px solid var(--inci-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(45,42,61,.075);
}
body.active-index #myTabContent > #caricamento > .row.mt-4 > [class*="col-"] {
    padding: 10px;
}
body.active-index #myTabContent > #caricamento > .row.mt-4 > [class*="col-"]:first-of-type {
    border-right: 1px solid #ecebf0;
}
body.active-index .zoom-container,
body.active-index #manualIngredients {
    border-color: #e2e1e8 !important;
    border-radius: 16px !important;
    background: #fbfbfd !important;
}
body.active-index .zoom-container {
    min-height: 280px;
    overflow: hidden;
}
body.active-index #manualIngredients {
    min-height: 280px;
    padding: 18px !important;
    resize: vertical;
    font-size: 1rem !important;
    line-height: 1.55;
    box-shadow: none !important;
}
body.active-index #manualIngredients:focus {
    background: #fff !important;
    border-color: #aaa0e8 !important;
    box-shadow: 0 0 0 4px rgba(132,116,232,.09) !important;
}
body.active-index .btn-icon-only {
    width: 46px;
    height: 46px;
    padding: 7px !important;
    border-radius: 12px !important;
    border-color: #dedde5 !important;
    background: #fff;
}
body.active-index .btn-icon-only:hover { background: #f7f6fb; }
body.active-index #submitBtn,
body.active-index #checkInciBtn1 {
    min-height: 44px;
    padding: 9px 18px;
    border-radius: 11px;
    border-color: var(--inci-dark);
    background: var(--inci-dark);
    color: #fff;
    font-weight: 700;
}
body.active-index #ocrResult {
    margin-top: 28px !important;
}
body.active-index #ocrResult .nav-tabs {
    gap: 6px;
    border-bottom: 1px solid var(--inci-border);
}
body.active-index #ocrResult .nav-tabs .nav-link {
    border: 0;
    border-radius: 10px 10px 0 0;
    color: #6b6975;
    font-weight: 650;
}
body.active-index #ocrResult .nav-tabs .nav-link.active {
    color: var(--inci-dark);
    background: #f5f4fb;
}
body.active-index .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(45,42,61,.18);
    overflow: hidden;
}

/* ---------------------------
   Welcome / FAQ / Contact / legal
---------------------------- */
body.active-welcomepage .site-main,
body.active-faq .site-main,
body.active-contact .site-main,
body.controller-home.action-privacy .site-main,
body.controller-home.action-cookiepolicy .site-main,
body.controller-home.action-refundpolicy .site-main,
body.controller-home.action-termsandconditions .site-main,
body.controller-home.action-thankyou .site-main,
body.controller-home.action-donatesuccess .site-main {
    max-width: 1060px;
    margin: 0 auto;
}

body.active-welcomepage .site-main > .container,
body.active-faq .site-main > .container,
body.active-contact .site-main > .container,
body.controller-home.action-privacy .site-main > .container,
body.controller-home.action-cookiepolicy .site-main > .container,
body.controller-home.action-refundpolicy .site-main > .container,
body.controller-home.action-termsandconditions .site-main > .container,
body.controller-home.action-thankyou .site-main > .container,
body.controller-home.action-donatesuccess .site-main > .container {
    max-width: 100%;
}

body.active-welcomepage .card,
body.active-faq .card,
body.active-contact .card,
body.controller-home.action-privacy .card,
body.controller-home.action-cookiepolicy .card,
body.controller-home.action-refundpolicy .card,
body.controller-home.action-termsandconditions .card,
body.controller-home.action-thankyou .card,
body.controller-home.action-donatesuccess .card {
    border: 1px solid var(--inci-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--inci-shadow) !important;
}

body.active-faq .accordion-item {
    margin-bottom: 10px;
    border: 1px solid var(--inci-border) !important;
    border-radius: 13px !important;
    overflow: hidden;
}
body.active-faq .accordion-button {
    padding: 15px 17px;
    background: #fff;
    color: var(--inci-dark);
    font-weight: 650;
}
body.active-faq .accordion-button:not(.collapsed) {
    background: #f7f6fc;
    box-shadow: inset 0 -1px 0 var(--inci-border);
}

body.active-contact .form-control,
body.active-contact .form-select {
    min-height: 46px;
    border-radius: 11px;
    border-color: var(--inci-border-strong);
}
body.active-contact textarea.form-control { min-height: 140px; }

/* ---------------------------
   Result / notification / errors
---------------------------- */
body.controller-ingrediente .site-main,
body.controller-newsletter .site-main,
body.controller-shared .site-main {
    max-width: 900px;
    margin: 0 auto;
}

body.controller-ingrediente .site-main > *,
body.controller-newsletter .site-main > *,
body.action-error .site-main > * {
    border-radius: 16px;
}

/* ---------------------------
   Admin + support not covered previously
---------------------------- */
body.area-admin.controller-media .site-main,
body.controller-supportticketadmin .site-main,
body.controller-admin .site-main {
    max-width: 1280px;
    margin: 0 auto;
}

body.area-admin.controller-media .card,
body.controller-supportticketadmin .card,
body.controller-supportticketadmin .table-responsive,
body.controller-admin .card {
    border: 1px solid var(--inci-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--inci-shadow) !important;
    overflow: hidden;
}

body.controller-supportticketadmin table {
    margin-top: 0 !important;
}

/* ---------------------------
   Consistenza Bootstrap globale, senza invadere l'analizzatore
---------------------------- */
body.inci-site .btn {
    border-radius: 10px;
}
body.inci-site .form-control,
body.inci-site .form-select {
    border-color: var(--inci-border-strong);
}
body.inci-site .form-control:focus,
body.inci-site .form-select:focus {
    border-color: #aaa0e8;
    box-shadow: 0 0 0 4px rgba(132,116,232,.09);
}

/* ---------------------------
   Responsive
---------------------------- */
@media (max-width: 991.98px) {
    body.inci-site .site-content-shell { width: calc(100% - 24px); }
    body.inci-site header .navbar .container-fluid { width: calc(100% - 20px); }
    body.inci-site header .navbar .nav-link { justify-content: flex-start; margin: 2px 0; }
    body.active-index #myTabContent > #caricamento > .row.mt-4 > [class*="col-"]:first-of-type {
        border-right: 0;
        border-bottom: 1px solid #ecebf0;
    }
    body.active-archivioinci #inci-tab { justify-content: flex-start; }
}

@media (max-width: 767.98px) {
    html { font-size: 14px; }
    body.inci-site .site-content-shell { width: calc(100% - 20px); }
    body.inci-site .site-footer { padding: 0 10px 12px; }
    body.inci-site .site-footer-panel {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        padding: 20px 18px 15px;
        border-radius: 15px;
    }
    body.active-index #myTabContent > #caricamento > .row.mt-4 {
        padding: 4px;
        border-radius: 17px;
    }
    body.active-index .zoom-container,
    body.active-index #manualIngredients { min-height: 230px; }
    body.active-archivioinci #hydrating .card { padding: 19px !important; }
}

/* ============================================================
   Pagine informative pubbliche
   ============================================================ */
body.active-welcomepage .site-main > .container-fluid {
    max-width: 1180px;
    margin: 14px auto 38px !important;
    padding: 0;
}
body.active-welcomepage .welcome-menu {
    padding: 7px;
    border: 1px solid var(--inci-border);
    border-radius: 16px;
    background: #f7f6fa;
    box-shadow: 0 8px 25px rgba(45,42,61,.05);
}
body.active-welcomepage .welcome-menu .list-group-item {
    margin: 2px 0;
    padding: 11px 13px;
    border: 0 !important;
    border-radius: 10px !important;
    color: #625f6c;
    background: transparent;
    font-weight: 600;
}
body.active-welcomepage .welcome-menu .list-group-item:hover {
    color: var(--inci-dark);
    background: #fff;
}
body.active-welcomepage .welcome-menu .list-group-item.active {
    color: #fff !important;
    background: var(--inci-dark) !important;
    box-shadow: 0 6px 16px rgba(36,35,41,.13);
}
body.active-welcomepage .site-main section,
body.active-welcomepage .site-main .content-section,
body.active-welcomepage .site-main .card {
    border-color: var(--inci-border) !important;
    border-radius: 17px !important;
}
body.active-welcomepage .site-main .card {
    box-shadow: var(--inci-shadow) !important;
}

body.controller-home.action-privacy .site-main > .container,
body.controller-home.action-cookiepolicy .site-main > .container,
body.controller-home.action-refundpolicy .site-main > .container,
body.controller-home.action-termsandconditions .site-main > .container {
    margin-top: 12px !important;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid var(--inci-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--inci-shadow);
}
body.controller-home.action-privacy .site-main h4,
body.controller-home.action-cookiepolicy .site-main h4,
body.controller-home.action-refundpolicy .site-main h4,
body.controller-home.action-termsandconditions .site-main h4 {
    margin-top: 26px;
    margin-bottom: 10px;
    color: var(--inci-dark);
    font-size: 1.08rem;
}

body.controller-home.action-thankyou .site-main > .container,
body.controller-home.action-donatesuccess .site-main > * {
    margin-top: 18px !important;
    padding: clamp(24px, 5vw, 44px);
    border: 1px solid var(--inci-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--inci-shadow);
}

/* Risultati ingrediente e conferme newsletter */
body.controller-ingrediente .site-main,
body.controller-newsletter .site-main {
    padding-top: 8px;
}
body.controller-ingrediente .site-main > .container,
body.controller-newsletter .site-main > .container,
body.controller-newsletter .site-main > div,
body.action-error .site-main > div {
    padding: 24px;
    border: 1px solid var(--inci-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--inci-shadow);
}

/* Media admin */
.media-admin-page {
    width: 100%;
    max-width: 1320px;
    margin: 10px auto 38px;
}
.media-admin-page .upload-box {
    padding: 18px !important;
    border: 1px solid var(--inci-border);
    background: #fff !important;
    box-shadow: var(--inci-shadow);
}
.media-admin-page .media-card {
    border: 1px solid var(--inci-border) !important;
    box-shadow: 0 7px 22px rgba(45,42,61,.065) !important;
}
.media-admin-page .media-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--inci-shadow-hover) !important;
}
.media-admin-page .section-title {
    margin-top: 28px !important;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--inci-border);
    color: var(--inci-dark);
    font-weight: 700;
}

/* Admin ticket */
.admin-support-page {
    width: 100%;
    max-width: 1180px;
    margin: 10px auto 38px;
}
.admin-support-page > h2 {
    margin-bottom: 18px;
    font-size: 1.75rem;
    letter-spacing: -.025em;
}
.admin-support-page .table-responsive {
    border: 1px solid var(--inci-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--inci-shadow);
    overflow: auto;
}
.admin-support-page .card { box-shadow: var(--inci-shadow) !important; }

/* ============================================================
   FINITURA 2026 - leggibilita, touch, coerenza e accessibilita
   ============================================================ */
body.inci-site .site-main > [data-page-shell],
body.inci-site .site-main > .portal-page,
body.inci-site .site-main > .identity-container {
    scroll-margin-top: 88px;
}

body.inci-site :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(132,116,232,.28);
    outline-offset: 2px;
}

body.inci-site .site-main > .alert {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 13px;
    border-width: 1px;
}

body.inci-site .site-main .pagination .page-link {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    border-radius: 9px !important;
    border-color: var(--inci-border);
    color: #575462;
}
body.inci-site .site-main .pagination .page-item.active .page-link {
    background: var(--inci-dark);
    border-color: var(--inci-dark);
    color: #fff;
}

body.inci-site .site-main .accordion-button:focus {
    box-shadow: 0 0 0 4px rgba(132,116,232,.09);
}

/* L'archivio deve sembrare una ricerca, non un pannello tecnico. */
body.active-archivioinci #hydrating .card {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
body.active-archivioinci #hydrating .inci-title {
    margin-bottom: 12px;
    text-align: center;
    font-size: clamp(1.15rem, 2vw, 1.42rem);
}
body.active-archivioinci #search-ingrediente-form {
    max-width: 780px;
    margin: 0 auto;
}
body.active-archivioinci #search-ingrediente-form small {
    padding-left: 4px;
    line-height: 1.45;
}
body.active-archivioinci #inci-comuni-tab-content,
body.active-archivioinci #allergens-tab-content,
body.active-archivioinci #colorants-tab-content,
body.active-archivioinci #fragrances-tab-content {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
body.active-archivioinci #intro-section {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

/* Analizza: il cuore resta volutamente essenziale, come un traduttore. */
body.active-index #myTabContent > #caricamento > .row.mt-4 {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}
body.active-index #myTabContent > #caricamento .fw-bold {
    color: #484651;
    font-size: .93rem;
}
body.active-index #submitBtn,
body.active-index #checkInciBtn1 {
    box-shadow: 0 5px 14px rgba(36,35,41,.12);
}
body.active-index #submitBtn:hover,
body.active-index #checkInciBtn1:hover {
    background: #111015;
    border-color: #111015;
    transform: translateY(-1px);
}
body.active-index #clearImageBtn,
body.active-index #clearTextareaBtn {
    opacity: .72;
    transition: opacity .15s ease, background .15s ease;
}
body.active-index #clearImageBtn:hover,
body.active-index #clearTextareaBtn:hover { opacity: 1; }

/* Le pagine legali localizzate hanno un'unica superficie leggibile. */
body.controller-home.action-privacy .site-main > [data-page-shell],
body.controller-home.action-cookiepolicy .site-main > [data-page-shell],
body.controller-home.action-refundpolicy .site-main > [data-page-shell],
body.controller-home.action-termsandconditions .site-main > [data-page-shell] {
    max-width: 980px;
}
body.controller-home.action-privacy .site-main > [data-page-shell] > h2,
body.controller-home.action-cookiepolicy .site-main > [data-page-shell] > h2,
body.controller-home.action-refundpolicy .site-main > [data-page-shell] > h2,
body.controller-home.action-termsandconditions .site-main > [data-page-shell] > h2 {
    font-size: clamp(1.65rem, 3vw, 2.15rem);
}

/* Testi lunghi: piu facili da leggere anche su tablet. */
body.inci-site .site-main :where(.public-page, [data-page-shell]) p {
    text-wrap: pretty;
}

@media (hover: hover) {
    body.inci-site .site-main .card,
    body.inci-site .site-main .list-group-item,
    body.inci-site .site-main .btn {
        transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.inci-site *,
    body.inci-site *::before,
    body.inci-site *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Footer responsive rispetto al proprio pannello, non solo al viewport. */
body.inci-site .site-footer-panel {
    container-type: inline-size;
}

@container (max-width: 720px) {
    body.inci-site .site-footer-panel .row.gy-3 > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.inci-site .site-footer-panel .row.gy-3 > [class*="col-md-"] + [class*="col-md-"] {
        padding-top: 14px;
        border-top: 1px solid var(--inci-border);
    }
}

/* ============================================================
   HOTFIX UI v5.4.1 - menu admin + index + archivio INCI
   ============================================================ */

/* Il menu admin nel dropdown utente deve stare sopra titoli, card e contenuti. */
body.inci-site header {
    position: sticky;
    top: 0;
    z-index: 1085;
}

body.inci-site header .navbar {
    position: relative;
    z-index: 1086;
}

body.inci-site header .navbar-collapse,
body.inci-site header .dropdown,
body.inci-site header .dropdown-menu {
    position: relative;
}

body.inci-site header .dropdown-menu {
    z-index: 2000;
}

body.inci-site .site-content-shell,
body.inci-site .site-main,
body.inci-site .site-main > .container,
body.inci-site .site-main > .container-fluid {
    position: relative;
    z-index: 1;
}

/* INDEX: meno effetto "container dentro container", più omogeneo e pulito. */
body.active-index .site-main > .container.mt-5[data-page-shell] {
    margin-top: 10px !important;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.active-index #myTabContent,
body.active-index #myTabContent > #caricamento {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.active-index #myTabContent > #caricamento > .row.mt-4 {
    padding: 14px;
    background: linear-gradient(180deg, #fcfcfe 0%, #ffffff 100%);
    border: 1px solid #e7e6ef;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(45,42,61,.08);
}

body.active-index #myTabContent > #caricamento > .row.mt-4 > [class*="col-"] {
    padding: 14px;
}

body.active-index .zoom-container,
body.active-index #manualIngredients {
    background: linear-gradient(180deg, #fbfbfd 0%, #f6f6fa 100%) !important;
    border-color: #e4e3eb !important;
}

body.active-index .zoom-container {
    min-height: 296px;
    border-radius: 18px !important;
}

body.active-index #manualIngredients {
    min-height: 296px;
    border-radius: 18px !important;
}

body.active-index #ocrResult {
    max-width: 1120px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 4px;
}

body.active-index #ocrResult .tab-content,
body.active-index #ocrResult .tab-pane,
body.active-index #ocrResult .card {
    border-radius: 18px;
}

/* ARCHIVIO INCI: interfaccia più dolce e coerente. */
body.active-archivioinci .site-main > .container.mt-5[data-page-shell] {
    max-width: 1200px;
    margin-top: 10px !important;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.active-archivioinci #inci-tab {
    padding: 8px;
    background: linear-gradient(180deg, #f8f7fc 0%, #f4f3f9 100%);
    border-color: #e6e4ef;
    box-shadow: 0 8px 22px rgba(45,42,61,.05);
}

body.active-archivioinci #inci-tabContent {
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.active-archivioinci #hydrating .card,
body.active-archivioinci #inci-comuni,
body.active-archivioinci #allergens,
body.active-archivioinci #colorants,
body.active-archivioinci #fragrances,
body.active-archivioinci #guida {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%);
    border: 1px solid #e8e6f0 !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 34px rgba(45,42,61,.07) !important;
}

body.active-archivioinci #hydrating .card {
    padding: 30px !important;
}

body.active-archivioinci #guida {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 28px;
}

body.active-archivioinci #guida .container.mt-4 {
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

body.active-archivioinci #guida h3 {
    margin-bottom: 18px;
    color: var(--inci-dark);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
}

body.active-archivioinci #guida p,
body.active-archivioinci #guida li,
body.active-archivioinci #intro-section p,
body.active-archivioinci #intro-section li {
    color: #5f5d68;
    line-height: 1.72;
}

body.active-archivioinci .row.mt-4 .alert.alert-warning {
    max-width: 1040px;
    margin: 0 auto;
    padding: 20px 22px;
    background: linear-gradient(180deg, #fff8e8 0%, #fffdf6 100%);
    color: #715514;
    border: 1px solid #f0dfac !important;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(164,133,52,.08);
}

body.active-archivioinci .row.mt-4 .alert.alert-warning p {
    margin-bottom: 0;
    font-size: 1.02rem;
    line-height: 1.75;
}

body.active-archivioinci #intro-section .card,
body.active-archivioinci #intro-section .card .card {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%);
    border: 1px solid #e8e6f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(45,42,61,.06) !important;
}

body.active-archivioinci #intro-section .card-header {
    padding: 0;
    background: #fbfafe;
}

body.active-archivioinci #intro-section .btn-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 17px 20px;
    color: var(--inci-dark);
    font-weight: 700;
    text-decoration: none !important;
}

body.active-archivioinci #intro-section .btn-link::after {
    content: '\f282';
    font-family: 'bootstrap-icons';
    font-size: 1rem;
    opacity: .8;
}

body.active-archivioinci #intro-text,
body.active-archivioinci #suggerimenti-text {
    padding: 20px !important;
}

body.active-archivioinci #skimage_bambini_alert,
body.active-archivioinci .text-center.my-4 img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 20px;
    border: 1px solid #e7e5ee;
    box-shadow: 0 16px 36px rgba(45,42,61,.10);
}

body.active-archivioinci .text-center.my-4 {
    max-width: 1040px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 8px 0 4px;
}

@media (max-width: 991.98px) {
    body.active-index #myTabContent > #caricamento > .row.mt-4 {
        padding: 8px;
    }

    body.active-archivioinci #guida {
        padding: 22px 20px;
    }
}

@media (max-width: 767.98px) {
    body.inci-site header {
        position: relative;
        top: auto;
    }

    body.active-index #myTabContent > #caricamento > .row.mt-4 {
        border-radius: 20px;
    }

    body.active-index .zoom-container,
    body.active-index #manualIngredients {
        min-height: 230px;
    }

    body.active-archivioinci #hydrating .card,
    body.active-archivioinci #inci-comuni,
    body.active-archivioinci #allergens,
    body.active-archivioinci #colorants,
    body.active-archivioinci #fragrances,
    body.active-archivioinci #guida {
        border-radius: 18px !important;
    }

    body.active-archivioinci .row.mt-4 .alert.alert-warning {
        padding: 18px;
        border-radius: 16px;
    }
}

/* ============================================================
   UI v5.4.2 - RESPONSIVE / MODAL / PRICING / ARCHIVIO / ESEMPI
   Questo blocco e intenzionalmente in fondo al file per prevalere
   sui vecchi override senza cambiare logica o traduzioni.
   ============================================================ */

/* ---------- Stacking corretto: menu sopra la pagina, modal sopra tutto ---------- */
body.inci-site header {
    position: relative !important;
    top: auto !important;
    z-index: 1020 !important;
}

body.inci-site header .navbar,
body.inci-site header .navbar-collapse {
    overflow: visible;
}

body.inci-site header .dropdown-menu {
    z-index: 1045 !important;
}

/* Evita stacking context del contenuto: era la causa dei modal intrappolati. */
body.inci-site .site-content-shell,
body.inci-site .site-main,
body.inci-site .site-main > .container,
body.inci-site .site-main > .container-fluid {
    position: static !important;
    z-index: auto !important;
}

body.inci-site .modal-backdrop {
    z-index: 1080 !important;
}

body.inci-site .modal {
    z-index: 1090 !important;
}

body.inci-site .restriction-detail-modal .modal-dialog {
    width: min(1120px, calc(100vw - 28px));
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

body.inci-site .restriction-detail-modal .modal-content {
    max-height: calc(100vh - 32px);
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(24, 21, 38, .24);
}

body.inci-site .restriction-detail-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 62px;
    padding: 14px 18px;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid #e9e7ef;
    backdrop-filter: blur(10px);
}

body.inci-site .restriction-detail-modal .modal-title {
    padding-right: 16px;
    color: #26242c;
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.35;
}

body.inci-site .restriction-detail-modal .btn-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background-color: #f5f4f8;
    background-size: 12px;
    opacity: .78;
}

body.inci-site .restriction-detail-modal .btn-close:hover {
    opacity: 1;
    background-color: #eceaf2;
}

body.inci-site .restriction-detail-modal .modal-body {
    overflow: auto;
    padding: 18px;
    background: #fff;
}

body.inci-site .restriction-detail-modal #restrictionDetailsTable {
    margin: 0 !important;
}

body.inci-site .restriction-detail-modal #restrictionDetailsTable th {
    width: 30%;
    min-width: 170px;
    color: #46434e;
    font-weight: 700;
    background: #f8f7fb;
}

body.inci-site .restriction-detail-modal #restrictionDetailsTable td {
    color: #34313b;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* ---------- Navbar realmente responsive: hamburger fino a 991 px ---------- */
body.inci-site .inci-main-navbar .navbar-toggler {
    border: 1px solid #dedbe8;
    border-radius: 12px;
    padding: 7px 9px;
    background: #fff;
}

body.inci-site .inci-main-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 4px rgba(132,116,232,.10);
}

@media (max-width: 991.98px) {
    body.inci-site header .navbar {
        padding: 8px 0;
    }

    body.inci-site header .navbar .container-fluid {
        width: calc(100% - 18px);
    }

    body.inci-site .navbar-logo {
        max-height: 40px;
    }

    body.inci-site .inci-main-navbar #mainNavbar {
        margin-top: 10px;
        padding: 12px;
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid #e9e6f0;
        border-radius: 16px;
        background: rgba(255,255,255,.99);
        box-shadow: 0 18px 46px rgba(45,42,61,.11);
    }

    body.inci-site .inci-main-navbar #mainNavbar > .navbar-nav.mx-auto {
        width: 100%;
        margin: 0 !important;
        gap: 3px;
    }

    body.inci-site .inci-main-navbar #mainNavbar > .navbar-nav.mx-auto > .nav-item {
        width: 100%;
    }

    body.inci-site .inci-main-navbar #mainNavbar > .navbar-nav.mx-auto .nav-link {
        width: 100%;
        min-height: 44px;
        justify-content: flex-start;
        padding: 10px 12px;
        margin: 0;
        border-radius: 10px;
    }

    body.inci-site .inci-main-navbar #mainNavbar .dropdown-menu {
        position: static !important;
        transform: none !important;
        float: none;
        width: 100%;
        margin: 4px 0 6px;
        border-radius: 12px;
        box-shadow: none;
        background: #faf9fd;
    }

    body.inci-site .inci-main-navbar .language-nav {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(46px, 1fr));
        gap: 8px;
        width: 100%;
        max-width: 320px;
        margin: 12px 0 0 !important;
        padding: 12px 0 0;
        border-top: 1px solid #ece9f2;
    }

    body.inci-site .inci-main-navbar .language-nav .nav-item {
        margin: 0 !important;
    }

    body.inci-site .inci-main-navbar .language-nav .lang-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 42px;
        border: 1px solid #ece9f2 !important;
        border-radius: 10px !important;
        background: #faf9fd;
    }

    body.inci-site .inci-main-navbar .language-nav .lang-flag {
        width: 26px !important;
        height: 18px !important;
        object-fit: cover;
        border-radius: 4px;
    }

    body.inci-site .inci-main-navbar .header-actions {
        width: 100%;
        margin: 10px 0 0 !important;
        padding-top: 10px;
        border-top: 1px solid #ece9f2;
        flex-wrap: wrap;
        align-items: stretch;
    }

    body.inci-site .inci-main-navbar .header-auth-links {
        flex: 1 1 100%;
        width: 100%;
    }

    body.inci-site .inci-main-navbar .header-auth-link,
    body.inci-site .inci-main-navbar .account-nav,
    body.inci-site .inci-main-navbar .language-dropdown {
        flex: 1 1 160px;
    }

    body.inci-site .inci-main-navbar .header-auth-link,
    body.inci-site .inci-main-navbar .header-account-link,
    body.inci-site .inci-main-navbar .language-current {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        margin: 0;
        border: 1px solid #ece9f2;
        background: #faf9fd;
    }
}

/* ---------- Pricing: badge leggibile e layout tablet/mobile ---------- */
body.inci-site .pricing-page .plan-card-featured {
    overflow: visible !important;
    border-top-color: #3566ff !important;
    box-shadow: 0 18px 42px rgba(53,102,255,.12) !important;
}

body.inci-site .pricing-page .plan-card-featured .card-body {
    padding-top: 34px !important;
}

body.inci-site .pricing-page .pricing-recommended-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    z-index: 6;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    max-width: calc(100% - 28px);
    padding: 6px 14px;
    border: 1px solid #e5b700;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffdf54 0%, #ffc928 100%);
    color: #5d4700;
    box-shadow: 0 8px 18px rgba(179,139,0,.20);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .015em;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    body.inci-site .pricing-page {
        max-width: 620px;
    }

    body.inci-site .pricing-page > .container {
        margin-top: 20px !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    body.inci-site .pricing-page > .container > .row > .row {
        margin-left: 0;
        margin-right: 0;
    }

    body.inci-site .pricing-page .plan-card {
        max-width: 520px;
        margin: 0 auto;
    }

    body.inci-site .pricing-page .pricing-recommended-badge {
        top: -14px;
    }
}

@media (max-width: 575.98px) {
    body.inci-site .pricing-page > div:first-of-type h3 {
        font-size: clamp(1.65rem, 7vw, 2rem);
        line-height: 1.15;
    }

    body.inci-site .pricing-page > div:first-of-type p {
        padding: 0 8px;
        font-size: .96rem;
    }

    body.inci-site .pricing-page .plan-card .card-body {
        padding: 24px 20px !important;
    }

    body.inci-site .pricing-page .plan-card-featured .card-body {
        padding-top: 34px !important;
    }
}

/* ---------- Archivio INCI: ricerca compatta e gerarchia più pulita ---------- */
body.inci-site.active-archivioinci .archive-page {
    max-width: 1180px;
    margin-top: 12px !important;
}

body.inci-site.active-archivioinci .archive-tabs {
    gap: 6px;
    padding: 7px;
    border: 1px solid #e8e5ef;
    border-radius: 16px;
    background: linear-gradient(180deg, #f9f8fc 0%, #f4f3f8 100%);
    box-shadow: 0 8px 22px rgba(45,42,61,.045);
}

body.inci-site.active-archivioinci .archive-tab-content {
    margin-top: 16px;
}

body.inci-site.active-archivioinci .archive-search-card {
    max-width: 860px !important;
    margin: 0 auto;
    padding: 24px 26px !important;
    border: 1px solid #e9e6ef !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fdfcff 100%) !important;
    box-shadow: 0 14px 34px rgba(45,42,61,.06) !important;
}

body.inci-site.active-archivioinci .archive-search-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 700px;
    margin: 0 auto 18px;
}

body.inci-site.active-archivioinci .archive-search-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1efff;
    color: #7164ce;
    font-size: 1rem;
}

body.inci-site.active-archivioinci .archive-search-copy {
    color: #686572;
    line-height: 1.55;
}

body.inci-site.active-archivioinci .archive-search-form {
    max-width: 360px !important;
    margin: 0 auto;
}

body.inci-site.active-archivioinci #ingrediente-input.archive-search-input {
    width: 100%;
    max-width: 360px;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 14px !important;
    text-align: center;
    font-size: .98rem !important;
    box-shadow: none;
}

body.inci-site.active-archivioinci #ingrediente-input.archive-search-input:focus {
    border-color: #9e94df !important;
    box-shadow: 0 0 0 4px rgba(132,116,232,.09) !important;
}

body.inci-site.active-archivioinci .archive-search-card > small {
    display: block;
    max-width: 700px;
    margin: 10px auto 0;
    text-align: center;
}

body.inci-site.active-archivioinci .archive-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 980px !important;
    margin: 24px auto 0 !important;
    padding: 18px 20px !important;
    border: 1px solid #eadfbf !important;
    border-radius: 17px !important;
    background: linear-gradient(180deg, #fffaf1 0%, #fffdf8 100%) !important;
    color: #6f581f !important;
    box-shadow: 0 8px 22px rgba(164,133,52,.06) !important;
}

body.inci-site.active-archivioinci .archive-note-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff2c9;
    color: #8a6815;
    font-size: 1.05rem;
}

body.inci-site.active-archivioinci .archive-note p {
    margin: 0;
    color: inherit;
    font-size: .96rem;
    line-height: 1.65;
}

body.inci-site.active-archivioinci #intro-section {
    max-width: 980px;
    margin: 12px auto 0 !important;
}

body.inci-site.active-archivioinci .archive-info-card {
    border: 1px solid #e9e6ef !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(45,42,61,.05) !important;
}

body.inci-site.active-archivioinci .archive-info-card > .card-header {
    border-bottom: 0;
    background: #faf9fd;
}

body.inci-site.active-archivioinci .archive-info-card .btn-link {
    min-height: 56px;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    text-decoration: none !important;
}

body.inci-site.active-archivioinci .archive-suggestions-card {
    margin-top: 8px;
    box-shadow: none !important;
}

body.inci-site.active-archivioinci .archive-visual {
    max-width: 900px !important;
    margin-top: 24px !important;
}

body.inci-site.active-archivioinci .archive-visual img {
    max-height: 520px;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    body.inci-site.active-archivioinci .archive-tabs {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    body.inci-site.active-archivioinci .archive-tabs .nav-item {
        flex: 0 0 auto !important;
    }

    body.inci-site.active-archivioinci .archive-tabs .nav-link {
        white-space: nowrap;
    }

    body.inci-site.active-archivioinci .archive-search-card {
        padding: 20px 18px !important;
        border-radius: 17px !important;
    }

    body.inci-site.active-archivioinci .archive-search-heading {
        display: block;
        text-align: center;
    }

    body.inci-site.active-archivioinci .archive-search-icon {
        margin: 0 auto 10px;
    }

    body.inci-site.active-archivioinci .archive-search-form {
        max-width: 300px !important;
    }

    body.inci-site.active-archivioinci #ingrediente-input.archive-search-input {
        max-width: 300px;
        min-height: 46px;
    }

    body.inci-site.active-archivioinci .archive-note {
        gap: 10px;
        padding: 16px !important;
    }
}

/* ---------- Elenco cosmetici/esempi: card interamente cliccabili ---------- */
body.inci-site #examplesModal .modal-dialog {
    max-width: 980px;
}

body.inci-site #examplesModal .modal-content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 26px 78px rgba(24,21,38,.22);
}

body.inci-site #examplesModal .modal-body {
    background: #fbfafd;
}

body.inci-site #examplesModal .examples-grid-header {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #ebe8f1;
    border-radius: 12px;
    background: #fff;
}

body.inci-site #examplesModal .iconic-card-selectable {
    position: relative;
    min-height: 96px;
    height: 100%;
    align-items: center;
    padding: 14px 44px 14px 14px;
    border: 1px solid #e7e4ed;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 7px 20px rgba(45,42,61,.045);
}

body.inci-site #examplesModal .iconic-card-selectable:hover,
body.inci-site #examplesModal .iconic-card-selectable:focus-visible {
    transform: translateY(-2px);
    border-color: #cfc8f4;
    background: #fdfcff;
    box-shadow: 0 12px 28px rgba(45,42,61,.09);
}

body.inci-site #examplesModal .iconic-left {
    flex: 0 0 78px;
    width: 78px;
    height: 72px;
    border-radius: 12px;
    background: #f7f6fa;
    overflow: hidden;
}

body.inci-site #examplesModal .iconic-img {
    width: 72px;
    height: 68px;
    object-fit: contain;
}

body.inci-site #examplesModal .iconic-img-fallback {
    opacity: .55;
    padding: 10px;
}

body.inci-site #examplesModal .example-card-hint {
    color: #7164ce;
    font-weight: 650;
}

body.inci-site #examplesModal .iconic-card-action {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #8e8998;
}

@media (max-width: 575.98px) {
    body.inci-site .restriction-detail-modal .modal-dialog {
        width: calc(100vw - 16px);
        margin: 8px auto;
    }

    body.inci-site .restriction-detail-modal .modal-content {
        max-height: calc(100vh - 16px);
        border-radius: 16px;
    }

    body.inci-site .restriction-detail-modal #restrictionDetailsTable th {
        min-width: 120px;
        width: 38%;
    }

    body.inci-site #examplesModal .iconic-card-selectable {
        min-height: 86px;
        padding-right: 38px;
    }

    body.inci-site #examplesModal .iconic-left {
        flex-basis: 62px;
        width: 62px;
        height: 60px;
    }

    body.inci-site #examplesModal .iconic-img {
        width: 58px;
        height: 56px;
    }
}

/* ============================================================
   UI FIX v5.4.4 - editor ingredienti singola superficie
   ============================================================ */

/* La colonna destra della Index deve avere la stessa logica visiva della colonna immagine:
   un solo pannello esterno, senza textarea con un secondo bordo interno. */
body.active-index .ingredients-editor-shell {
    height: 300px;
    min-height: 300px;
    overflow: hidden;
    border: 1px solid #e4e3eb;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfbfd 0%, #f6f6fa 100%);
}

body.active-index .ingredients-editor-shell #manualIngredients {
    flex: 1 1 auto;
    width: 100%;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0;
    padding: 24px 18px 18px;
    resize: none;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.active-index .ingredients-editor-shell #manualIngredients:focus {
    border: 0 !important;
    outline: 0 !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 2px rgba(132,116,232,.14) !important;
}

body.active-index .ingredients-editor-shell #manualIngredients:disabled {
    color: #777480;
    background: #f2f2f5 !important;
    opacity: 1;
}

/* I due pannelli principali hanno altezza e superficie coerenti. */
body.active-index .zoom-container,
body.active-index .ingredients-editor-shell {
    height: 300px;
    min-height: 300px;
}

@media (max-width: 767.98px) {
    body.active-index .zoom-container,
    body.active-index .ingredients-editor-shell {
        height: 230px;
        min-height: 230px;
    }

    body.active-index .ingredients-editor-shell #manualIngredients {
        padding: 20px 16px 16px;
    }
}

/* ---------- OCR camera guidance / R5 ---------- */
body.inci-site .camera-guidance,
body.inci-site .crop-guidance {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 10px;
    padding: 9px 11px;
    border: 1px solid #e7e3f0;
    border-radius: 10px;
    background: #faf9fd;
    color: #5f5b69;
    font-size: .84rem;
    line-height: 1.35;
}

body.inci-site .crop-guidance {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   v5.13.20 R5 FIX 1 - HEADER / DROPDOWN / AUTH ALIGNMENT
   UAT 18/09/2026
   - dropdown Account/Lingue fuori dal flusso: non aumentano l'altezza header
   - reset del vecchio menu centrale assoluto di base.css
   - icona Account con spaziatura coerente al selettore lingua
   - Login e Register entrambi come link chiari, non pulsante nero
   ============================================================ */

/* Desktop: il vecchio base.css posizionava il menu principale in assoluto.
   Con Login/Register + lingua questo causava la sovrapposizione visibile dopo Logout. */
@media (min-width: 992px) {
    body.inci-site .inci-main-navbar #mainNavbar {
        display: flex !important;
        align-items: center;
        gap: 10px;
        min-width: 0;
        overflow: visible !important;
    }

    body.inci-site .inci-main-navbar #mainNavbar > .navbar-nav.mx-auto {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 10px !important;
        margin-right: 10px !important;
        justify-content: center;
        flex-wrap: nowrap;
    }

    body.inci-site .inci-main-navbar .header-actions {
        position: relative;
        flex: 0 0 auto;
        margin-left: auto !important;
        flex-wrap: nowrap;
        overflow: visible;
    }

    body.inci-site .inci-main-navbar .account-nav,
    body.inci-site .inci-main-navbar .language-dropdown {
        position: relative !important;
        flex: 0 0 auto;
    }

    /* R5 aveva ereditato un vecchio override che rendeva .dropdown-menu relative.
       In quel modo la tendina entrava nel normale flusso e faceva crescere l'header. */
    body.inci-site .inci-main-navbar .account-nav > .dropdown-menu,
    body.inci-site .inci-main-navbar .language-dropdown > .dropdown-menu {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        right: 0 !important;
        left: auto !important;
        margin: 0 !important;
        transform: none !important;
        float: none !important;
        z-index: 2050 !important;
    }
}

/* Account e lingua devono avere la stessa distanza icona/testo. */
body.inci-site .header-account-link,
body.inci-site .language-current {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

body.inci-site .header-account-link > i {
    width: 16px;
    min-width: 16px;
    margin: 0 !important;
    text-align: center;
    line-height: 1;
}

/* La richiesta e' Login e Register "in chiaro": nessun CTA nero nel menu. */
body.inci-site .header-register-link,
body.inci-site .header-register-link:visited {
    color: #686672 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.inci-site .header-register-link:hover,
body.inci-site .header-register-link:focus {
    color: var(--inci-dark) !important;
    background: #f5f4f8 !important;
    box-shadow: none !important;
}
/* ============================================================
   v5.13.20 R5 FIX 2 R1 - HEADER STABILITY ON FULL PAGE NAVIGATION
   UAT 18/09/2026
   - elimina l'animazione laterale del logo e del gruppo Account/Lingua
     ad ogni navigazione completa
   - mantiene invariati hover e active dei normali item menu
   - nessuna modifica a layout, responsive, routing o localizzazione
   ============================================================ */

/* Il pannello deve nascere direttamente nella sua larghezza finale.
   L'ID aumenta la specificita' rispetto agli stili Bootstrap/legacy. */
body.inci-site .inci-main-navbar #siteHeaderPanel {
    transition: none !important;
}

/* I due estremi dell'header non devono avere animazioni/trasformazioni
   di ingresso durante il caricamento della nuova pagina. */
body.inci-site .inci-main-navbar #siteHeaderPanel > .navbar-brand,
body.inci-site .inci-main-navbar #mainNavbar > .header-actions,
body.inci-site .inci-main-navbar #mainNavbar > .header-actions > .language-dropdown {
    animation: none !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body.inci-site .inci-main-navbar #siteHeaderPanel,
    body.inci-site .inci-main-navbar #siteHeaderPanel > .navbar-brand,
    body.inci-site .inci-main-navbar #mainNavbar > .header-actions,
    body.inci-site .inci-main-navbar #mainNavbar > .header-actions > .language-dropdown {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* R5.12 DRIVER CLOSE HITBOX
   Driver.js draws a focus outline outside the native 32x28 close button.
   The outline itself is not clickable and can look like a second X target.
   Make the whole visible target a real 44x44 button and keep the focus ring inside it. */
.driver-popover-close-btn {
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    top: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    touch-action: manipulation;
}

.driver-popover-close-btn:focus,
.driver-popover-close-btn:focus-visible {
    outline: 0 !important;
    box-shadow: inset 0 0 0 2px rgba(111, 82, 219, 0.50) !important;
}

.driver-popover-title {
    box-sizing: border-box !important;
    padding-right: 46px !important;
}
/* R5.13 DRIVER CLOSE ZONE
   The transparent 50x50 button is the real pointer target for the whole visible X area.
   The native Driver.js X remains visible underneath and receives the programmatic click. */
.driver-popover {
    overflow: visible !important;
}

.driver-popover-close-btn {
    pointer-events: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.inci-driver-close-hitbox {
    all: unset;
    box-sizing: border-box !important;
    position: absolute !important;
    top: -7px !important;
    right: -7px !important;
    width: 50px !important;
    height: 50px !important;
    z-index: 2147483647 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

.inci-driver-close-hitbox:hover {
    cursor: pointer !important;
}

.inci-driver-close-hitbox:focus,
.inci-driver-close-hitbox:focus-visible {
    outline: 0 !important;
    box-shadow: inset 0 0 0 2px rgba(111, 82, 219, 0.60) !important;
}


/* ============================================================
   BF35 - STABLE SITE WIDTH / NO HORIZONTAL MENU SHIFT
   Align header, body and footer to the same ChemilabSuite-like shell.
   ============================================================ */
html { scrollbar-gutter: stable; }
body.inci-site { --inci-page-shell: 1320px; }
body.inci-site .site-content-shell,
body.inci-site header .navbar .container-fluid,
body.inci-site .inci-header-panel,
body.inci-site .site-footer-panel {
    width: min(var(--inci-page-shell), calc(100vw - 32px)) !important;
    max-width: var(--inci-page-shell) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.inci-site .site-main { width: 100%; min-width: 0; }
@media (max-width: 767.98px) { body.inci-site .site-content-shell, body.inci-site header .navbar .container-fluid, body.inci-site .inci-header-panel, body.inci-site .site-footer-panel { width: calc(100vw - 20px) !important; } }

/* BF13 BF4 - SYSTEM DASHBOARD WIDTH ALIGNMENT START */
/*
   Le view di SISTEMA devono mantenere la stessa larghezza del guscio Dashboard.
   La vecchia regola max-width:1280px su Media / SupportTicketAdmin restringeva
   l'intera area quando si passava dalle view Commerciale/Account alle view Sistema.
*/
body.area-admin.controller-media .site-main,
body.controller-supportticketadmin .site-main {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Neutralizza eventuali container Bootstrap esterni al guscio amministrativo. */
body.area-admin.controller-media .site-main > .container,
body.area-admin.controller-media .site-main > .container-fluid,
body.controller-supportticketadmin .site-main > .container,
body.controller-supportticketadmin .site-main > .container-fluid {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Stessa larghezza autorevole della Dashboard Admin e delle altre funzioni. */
body.area-admin.controller-media .site-main .inci-admin-shell,
body.controller-supportticketadmin .site-main .inci-admin-shell {
    width: min(1320px, calc(100vw - 34px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 1050px) {
    body.area-admin.controller-media .site-main .inci-admin-shell,
    body.controller-supportticketadmin .site-main .inci-admin-shell {
        width: calc(100vw - 24px) !important;
    }
}

@media (max-width: 650px) {
    body.area-admin.controller-media .site-main .inci-admin-shell,
    body.controller-supportticketadmin .site-main .inci-admin-shell {
        width: calc(100vw - 16px) !important;
    }
}
/* BF13 BF4 - SYSTEM DASHBOARD WIDTH ALIGNMENT END */

/* ============================================================
   R5.18 RC1 BF1 - TRIAL ICONIC + PWA PORTRAIT ENTRY
   ============================================================ */
body.active-index #checktableinci tbody tr.inci-trial-obscured-row,
body.active-index #restrizioni .table-annex tbody tr.inci-trial-obscured-row {
    filter: blur(5px);
    opacity: .58;
    pointer-events: none;
    user-select: none;
}
body.active-index #statistiche.inci-trial-statistics-locked {
    position: relative;
    min-height: 260px;
}
body.active-index #statistiche.inci-trial-statistics-locked #statisticheDiv,
body.active-index #statistiche.inci-trial-statistics-locked #exportPdfChartsWrapper,
body.active-index #statistiche.inci-trial-statistics-locked #exportChartsBtn {
    filter: blur(8px);
    opacity: .5;
    pointer-events: none;
    user-select: none;
}
body.active-index .inci-trial-chart-lock,
body.active-index .inci-trial-limit-notice {
    margin: 18px auto;
    max-width: 760px;
    padding: 14px 18px;
    border: 1px solid #d7d1f6;
    border-radius: 14px;
    background: rgba(247,246,253,.97);
    color: #3e395e;
    font-weight: 650;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 8px 24px rgba(62,57,94,.08);
}
body.active-index .inci-trial-chart-lock {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: min(760px, calc(100% - 32px));
    transform: translate(-50%, -50%);
}
.inci-pwa-install { display: none; }
@media (orientation: portrait) and (max-width: 1100px) {
    body.inci-site .inci-pwa-install[data-ready="true"] {
        position: fixed;
        right: max(14px, env(safe-area-inset-right));
        bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
        z-index: 1070;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 48px;
        max-width: calc(100vw - 28px);
        padding: 7px 13px 7px 8px;
        border: 1px solid #d8d3f4;
        border-radius: 999px;
        background: rgba(255,255,255,.96);
        color: #37324f;
        box-shadow: 0 10px 28px rgba(45,42,61,.18);
        font-weight: 700;
        backdrop-filter: blur(8px);
    }
    body.inci-site .inci-pwa-install img {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        object-fit: contain;
        background: #fff;
    }
}
@media (display-mode: standalone) {
    .inci-pwa-install { display: none !important; }
}
/* INCI4ME R5.18 RC1 BF10 BF9 BF4 - Archivio INCI modern responsive guide */
body.inci-site.active-archivioinci #guida {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.inci-site.active-archivioinci #guida .archive-guide-shell {
    padding: 28px;
    border: 1px solid #e8e6f0;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%);
    box-shadow: 0 14px 34px rgba(45,42,61,.07);
}

body.inci-site.active-archivioinci #guida .archive-guide-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 0 0 18px;
    border-bottom: 1px solid #eceaf2;
}

body.inci-site.active-archivioinci #guida .archive-guide-header-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f0edff;
    color: #6f61cf;
    font-size: 1.18rem;
}

body.inci-site.active-archivioinci #guida .archive-guide-title {
    margin: 0;
    color: #232129;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    line-height: 1.2;
    letter-spacing: -.025em;
}

body.inci-site.active-archivioinci #guida .archive-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.inci-site.active-archivioinci #guida .archive-guide-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid #e8e6ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(45,42,61,.045);
}

body.inci-site.active-archivioinci #guida .archive-guide-card-wide {
    grid-column: 1 / -1;
}

body.inci-site.active-archivioinci #guida .archive-guide-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

body.inci-site.active-archivioinci #guida .archive-guide-step {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f0edff;
    color: #6558bc;
    font-size: .86rem;
    font-weight: 800;
}

body.inci-site.active-archivioinci #guida .archive-guide-card h4 {
    margin: 0;
    color: #2b2931;
    font-size: 1.04rem;
    line-height: 1.3;
    letter-spacing: -.012em;
}

body.inci-site.active-archivioinci #guida .archive-guide-card p,
body.inci-site.active-archivioinci #guida .archive-guide-card li {
    color: #64616d;
    font-size: .96rem;
    line-height: 1.62;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

body.inci-site.active-archivioinci #guida .archive-guide-card p {
    margin: 0;
}

body.inci-site.active-archivioinci #guida .archive-guide-card ul,
body.inci-site.active-archivioinci #guida .archive-guide-card ol {
    margin: 14px 0 0;
    padding: 14px 18px 14px 38px;
    border: 1px solid #eceaf2;
    border-radius: 14px;
    background: #f8f7fb;
}

body.inci-site.active-archivioinci #guida .archive-guide-card li + li {
    margin-top: 7px;
}

body.inci-site.active-archivioinci #guida .archive-guide-card strong {
    color: #3e3a49;
    font-weight: 750;
}

body.inci-site.active-archivioinci #guida .archive-guide-note-card {
    background: linear-gradient(180deg, #fffdf7 0%, #fffaf0 100%);
    border-color: #f0e5c8;
}

body.inci-site.active-archivioinci #guida .archive-guide-plan-card {
    background: linear-gradient(180deg, #f8f6ff 0%, #f3f0ff 100%);
    border-color: #ddd7fb;
}

@media (max-width: 767.98px) {
    body.inci-site.active-archivioinci #guida {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    body.inci-site.active-archivioinci #guida .archive-guide-shell {
        padding: 14px;
        border-radius: 20px;
        box-shadow: 0 10px 26px rgba(45,42,61,.055);
    }

    body.inci-site.active-archivioinci #guida .archive-guide-header {
        align-items: flex-start;
        margin-bottom: 14px;
        padding-bottom: 14px;
    }

    body.inci-site.active-archivioinci #guida .archive-guide-header-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    body.inci-site.active-archivioinci #guida .archive-guide-title {
        font-size: clamp(1.18rem, 5.2vw, 1.45rem);
        line-height: 1.24;
    }

    body.inci-site.active-archivioinci #guida .archive-guide-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.inci-site.active-archivioinci #guida .archive-guide-card,
    body.inci-site.active-archivioinci #guida .archive-guide-card-wide {
        grid-column: 1;
        padding: 16px;
        border-radius: 16px;
    }

    body.inci-site.active-archivioinci #guida .archive-guide-card-heading {
        align-items: flex-start;
        gap: 9px;
        margin-bottom: 8px;
    }

    body.inci-site.active-archivioinci #guida .archive-guide-step {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: .82rem;
    }

    body.inci-site.active-archivioinci #guida .archive-guide-card h4 {
        padding-top: 3px;
        font-size: 1rem;
    }

    body.inci-site.active-archivioinci #guida .archive-guide-card p,
    body.inci-site.active-archivioinci #guida .archive-guide-card li {
        font-size: .94rem;
        line-height: 1.58;
    }

    body.inci-site.active-archivioinci #guida .archive-guide-card ul,
    body.inci-site.active-archivioinci #guida .archive-guide-card ol {
        margin-top: 12px;
        padding: 12px 12px 12px 31px;
        border-radius: 13px;
    }
}
/* R5.19 ADMIN PORTAL SERVER WIDTH BF4 FIX4 START */
/*
   Authoritative desktop geometry for the Admin portal.
   This is intentionally placed in site-modern.css, the final visual layer,
   and is driven by a server-side body class rather than runtime JS state.
   User Dashboard and non-Admin Account routes are excluded by the server flag.
*/
@media (min-width:1051px){
    body.inci-site.inci-admin-portal-server .site-content-shell{
        width:100%!important;
        max-width:none!important;
        margin-left:0!important;
        margin-right:0!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    body.inci-site.inci-admin-portal-server .site-main{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
        margin-left:0!important;
        margin-right:0!important;
        padding-left:0!important;
        padding-right:0!important;
        padding-bottom:0!important;
    }

    body.inci-site.inci-admin-portal-server .site-main > .inci-admin-shell:not(.inci-unified-user-dashboard),
    body.inci-site.inci-admin-portal-server .inci-admin-shell:not(.inci-unified-user-dashboard){
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
        min-height:calc(100vh - 150px)!important;
        margin:0!important;
        border-left:0!important;
        border-right:0!important;
        border-radius:0!important;
        box-shadow:none!important;
        grid-template-columns:252px minmax(0,1fr)!important;
    }

    body.inci-site.inci-admin-portal-server .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side{
        border-left:0!important;
        border-top:0!important;
        border-bottom:0!important;
        border-radius:0!important;
    }

    body.inci-site.inci-admin-portal-server .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-main{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
        padding-left:clamp(24px,2.4vw,44px)!important;
        padding-right:clamp(24px,2.4vw,44px)!important;
    }
}
/* R5.19 ADMIN PORTAL SERVER WIDTH BF4 FIX4 END */
/* R5.19 ADMIN SIDEBAR SINGLE SCROLL BF4 FIX5 START */
/*
   Desktop Admin only.
   BF4/BF5 established .inci-admin-side as the independent sidebar scroller.
   Later portal/navigation layers can leave a nested .inci-admin-nav scroll context,
   which produces two adjacent vertical scrollbars on Account/Ticket/Media flows.
   FIX5 restores one owner only: the sidebar scrolls; nested nav/placeholder do not.
   Portrait/tablet and User Dashboard are intentionally excluded.
*/
@media (min-width:1051px){
    body.inci-site.inci-admin-portal-server
    .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side{
        overflow-x:hidden!important;
        overflow-y:auto!important;
        scrollbar-gutter:stable!important;
        overscroll-behavior:contain;
    }

    body.inci-site.inci-admin-portal-server
    .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav,
    body.inci-site.inci-admin-portal-server
    .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav-placeholder{
        height:auto!important;
        max-height:none!important;
        overflow:visible!important;
        overflow-x:visible!important;
        overflow-y:visible!important;
        scrollbar-gutter:auto!important;
        overscroll-behavior:auto;
    }
}
/* R5.19 ADMIN SIDEBAR SINGLE SCROLL BF4 FIX5 END */
/* R5.19 ADMIN SIDEBAR TYPOGRAPHY BF6C START */
/* Desktop-only readability refinement. Portrait/tablet behavior and scroll ownership stay untouched. */
@media (min-width: 1100px) {
    .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav > a,
    .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav > .inci-admin-nav-placeholder {
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        min-height: 40px;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav > a > i,
    .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav > .inci-admin-nav-placeholder > i {
        font-size: 15px !important;
        line-height: 1 !important;
    }

    .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav-section,
    .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav-label,
    .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav-group-title {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        letter-spacing: .075em !important;
        line-height: 1.25 !important;
    }

    .inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav-next {
        font-size: 8.5px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
}
/* R5.19 ADMIN SIDEBAR TYPOGRAPHY BF6C END */
/* R5.19 ADMIN NAV COLORS BF6E START */
/* ONLY the two requested menu background colors. No other menu styling changes. */
.inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav > a.active {
    background-color: #ece9ff !important;
}
.inci-admin-shell:not(.inci-unified-user-dashboard) > .inci-admin-side .inci-admin-nav > a:not(.active):hover {
    background-color: #f2f0ff !important;
}
/* R5.19 ADMIN NAV COLORS BF6E END */

/* R5.19 BF6N16 PORTRAIT SCROLLBARS FIX1 START
   Global viewport portrait: phone, tablet and narrow browser preview.
   Visibility only. Scroll containers, touch, cropper and JS remain untouched.
*/
@media (orientation: portrait) {
    html, body, body * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        scrollbar-gutter: auto !important;
    }
    html::-webkit-scrollbar:vertical,
    body::-webkit-scrollbar:vertical,
    body *::-webkit-scrollbar:vertical {
        width: 0 !important;
        min-width: 0 !important;
        display: none !important;
    }
}
/* R5.19 BF6N16 PORTRAIT SCROLLBARS FIX1 END */