/* ============================================================
   MTF Sales Suite — Config Portal
   Design system: token condivisi + tematizzazione Bootstrap 5.3
   via CSS variables (niente override !important).
   Palette allineata all'app mobile (variables.scss).
   ============================================================ */

:root {
    /* Brand */
    --mtf-primary: #0b8a2f;
    --mtf-primary-shade: #07701f;
    --mtf-primary-tint: #2fa84f;
    --mtf-primary-light: #e3f4e7;
    --mtf-secondary: #ee9829;
    --mtf-secondary-shade: #c17209;
    --mtf-secondary-tint: #f5a832;

    /* Neutrali */
    --mtf-dark: #2b2b2b;
    --mtf-dark-grey: #6b6b6b;
    --mtf-grey: #949494;
    --mtf-light-grey: #f5f5f5;
    --mtf-light-grey-2: #dddddd;
    --mtf-white: #ffffff;
    --mtf-surface: #ffffff;
    --mtf-canvas: #f6f8f6;

    /* Semantici */
    --mtf-success: #16a34a;
    --mtf-success-bg: #d1fae5;
    --mtf-danger: #dc2626;
    --mtf-danger-bg: #fee2e2;
    --mtf-warning: #b45309;
    --mtf-warning-bg: #fef3c7;
    --mtf-info: #0369a1;
    --mtf-info-bg: #e0f2fe;

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;

    /* Tipografia */
    --mtf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mtf-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.85rem;
    --fs-md: 0.94rem;
    --fs-lg: 1.1rem;
    --fs-xl: 1.4rem;

    /* Forma */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Ombre */
    --shadow-sm: 0 1px 2px rgba(16, 12, 24, 0.06);
    --shadow-md: 0 2px 10px rgba(16, 12, 24, 0.08);
    --shadow-lg: 0 12px 32px rgba(16, 12, 24, 0.16);

    /* Layout */
    --sidebar-width: 248px;
    --topbar-height: 58px;

    /* Livelli */
    --z-sidebar: 1040;
    --z-overlay: 1035;
    --z-modal: 1060;
    --z-toast: 1080;

    /* Tematizzazione Bootstrap: fa vincere il brand senza !important */
    --bs-primary: var(--mtf-primary);
    --bs-primary-rgb: 11, 138, 47;
    --bs-link-color: var(--mtf-primary);
    --bs-link-color-rgb: 11, 138, 47;
    --bs-link-hover-color: var(--mtf-primary-shade);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-body-font-family: var(--mtf-font);
    --bs-body-color: var(--mtf-dark);
}

/* ============================================================
   Base
   ============================================================ */
body {
    font-family: var(--mtf-font);
    background: var(--mtf-canvas);
    color: var(--mtf-dark);
    font-size: var(--fs-md);
}

/* I colori brand arrivano dalle variabili dei componenti Bootstrap, che hanno
   precedenza naturale: nessun !important. */
.btn-primary {
    --bs-btn-bg: var(--mtf-primary);
    --bs-btn-border-color: var(--mtf-primary);
    --bs-btn-hover-bg: var(--mtf-primary-shade);
    --bs-btn-hover-border-color: var(--mtf-primary-shade);
    --bs-btn-active-bg: var(--mtf-primary-shade);
    --bs-btn-active-border-color: var(--mtf-primary-shade);
    --bs-btn-disabled-bg: var(--mtf-primary);
    --bs-btn-disabled-border-color: var(--mtf-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--mtf-primary);
    --bs-btn-border-color: var(--mtf-primary);
    --bs-btn-hover-bg: var(--mtf-primary);
    --bs-btn-hover-border-color: var(--mtf-primary);
    --bs-btn-active-bg: var(--mtf-primary);
    --bs-btn-active-border-color: var(--mtf-primary);
    --bs-btn-disabled-color: var(--mtf-primary);
    --bs-btn-disabled-border-color: var(--mtf-primary);
}

.btn-warning {
    --bs-btn-bg: var(--mtf-secondary);
    --bs-btn-border-color: var(--mtf-secondary);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--mtf-secondary-shade);
    --bs-btn-hover-border-color: var(--mtf-secondary-shade);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--mtf-secondary-shade);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--mtf-secondary);
    --bs-btn-disabled-border-color: var(--mtf-secondary);
    --bs-btn-disabled-color: #fff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mtf-primary-tint);
    box-shadow: 0 0 0 0.2rem rgba(11, 138, 47, 0.15);
}

.form-check-input:checked {
    background-color: var(--mtf-primary);
    border-color: var(--mtf-primary);
}

.card {
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-lg);
    background: var(--mtf-surface);
    box-shadow: var(--shadow-sm);
}

.mono-code {
    font-family: var(--mtf-font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--mtf-primary-light);
    color: var(--mtf-primary-shade);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.5rem;
    display: inline-block;
}

.count-pill {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--mtf-light-grey);
    color: var(--mtf-dark-grey);
    border-radius: var(--radius-pill);
    padding: 0.1rem 0.6rem;
    margin-left: var(--sp-2);
}

.spinner-inline {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 0.12em;
}

/* ============================================================
   Shell
   ============================================================ */
.admin-shell {
    min-height: 100vh;
}

.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--mtf-primary-shade), #034d14);
    color: rgba(255, 255, 255, 0.92);
}

.admin-sidebar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mtf-secondary), var(--mtf-secondary-tint));
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-brand img {
    height: 34px;
    width: 34px;
    border-radius: 8px;
}

.sidebar-brand-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.sidebar-close {
    margin-left: auto;
    display: none;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    padding: var(--sp-1);
    cursor: pointer;
}

.sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--sp-3) var(--sp-2);
}

.sidebar-group {
    margin: var(--sp-4) var(--sp-3) var(--sp-1);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.6rem var(--sp-3);
    margin-bottom: 2px;
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.sidebar-link i {
    font-size: 1rem;
    width: 1.15rem;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sidebar-link.active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--mtf-secondary);
}

/* Le voci del piede (riduci, esci) sono bottoni con l'aspetto delle voci di menu */
button.sidebar-link {
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.sidebar-link-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-badge {
    flex-shrink: 0;
    min-width: 1.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--mtf-secondary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.sidebar-footer {
    padding: var(--sp-2);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-footer .sidebar-link {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.68);
}

/* Menu ridotto a sole icone (solo desktop): il nome compare al passaggio del mouse */
@media (min-width: 769px) {
    .admin-sidebar,
    .admin-main {
        transition: width 0.18s ease, margin-left 0.18s ease;
    }

    .admin-shell.sidebar-compact {
        --sidebar-width: 68px;
    }

    .sidebar-compact .sidebar-brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar-compact .sidebar-brand-label,
    .sidebar-compact .sidebar-link-label {
        display: none;
    }

    /* Il titolo del gruppo diventa una riga di separazione */
    .sidebar-compact .sidebar-group {
        height: 1px;
        margin: var(--sp-3) var(--sp-2);
        background: rgba(255, 255, 255, 0.16);
    }

    .sidebar-compact .sidebar-group span {
        display: none;
    }

    .sidebar-compact .sidebar-link {
        position: relative;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar-compact .sidebar-badge {
        position: absolute;
        top: 0.15rem;
        right: 0.3rem;
        min-width: 1.1rem;
        padding: 0 0.25rem;
        font-size: 0.6rem;
    }
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 10, 30, 0.5);
    z-index: var(--z-overlay);
}

.admin-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-5);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mtf-light-grey-2);
}

.topbar-burger {
    display: none;
    background: none;
    border: none;
    font-size: 1.35rem;
    color: var(--mtf-primary);
    padding: var(--sp-1);
    cursor: pointer;
    line-height: 1;
}

.topbar-title {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    white-space: nowrap;
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--mtf-dark);
}

.topbar-group {
    font-weight: 500;
    color: var(--mtf-dark-grey);
}

.topbar-sep {
    font-size: 0.7rem;
    color: var(--mtf-dark-grey);
    opacity: 0.6;
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.topbar-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--mtf-dark-grey);
    background: var(--mtf-light-grey);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.7rem;
}

.topbar-badge i {
    color: var(--mtf-success);
}

.admin-content {
    flex: 1 1 auto;
    padding: var(--sp-5);
    max-width: 1500px;
    width: 100%;
}

/* ============================================================
   Page header
   ============================================================ */
.page-header {
    margin-bottom: var(--sp-5);
}

.page-breadcrumb {
    --bs-breadcrumb-divider: '›';
    font-size: var(--fs-xs);
    margin-bottom: var(--sp-2);
}

.page-breadcrumb a {
    color: var(--mtf-dark-grey);
    text-decoration: none;
}

.page-breadcrumb a:hover {
    color: var(--mtf-primary);
    text-decoration: underline;
}

.page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.page-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--mtf-dark);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.page-title-icon {
    color: var(--mtf-primary);
    font-size: 1.15rem;
}

/* Etichetta accanto al titolo (stato): testo normale, non il corpo del titolo */
.page-title-extra {
    display: inline-flex;
    margin-left: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: normal;
}

.page-subtitle {
    margin: var(--sp-1) 0 0;
    color: var(--mtf-dark-grey);
    font-size: var(--fs-sm);
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.section-title {
    font-size: var(--fs-md);
    font-weight: 700;
    margin: 0;
    color: var(--mtf-dark);
    display: flex;
    align-items: center;
}

.card-header-flush {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--mtf-light-grey-2);
    flex-wrap: wrap;
}

.form-card {
    max-width: 680px;
}

/* ============================================================
   Stati (loading / empty)
   ============================================================ */
.state-block {
    text-align: center;
    padding: var(--sp-7) var(--sp-4);
    background: var(--mtf-surface);
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-lg);
}

.card .state-block {
    border: none;
    background: transparent;
    padding: var(--sp-6) var(--sp-4);
}

.state-block-icon {
    font-size: 2.4rem;
    color: var(--mtf-light-grey-2);
    display: block;
    margin-bottom: var(--sp-3);
}

.state-block-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin: 0;
}

.state-block-text {
    color: var(--mtf-dark-grey);
    font-size: var(--fs-sm);
    margin: var(--sp-2) 0 0;
}

.state-block-actions {
    margin-top: var(--sp-4);
}

/* ============================================================
   Dashboard
   ============================================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-4);
    background: var(--mtf-surface);
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

a.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--mtf-primary-tint);
    color: inherit;
}

.stat-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: var(--sp-1);
}

.stat-icon-primary { background: var(--mtf-primary-light); color: var(--mtf-primary); }
.stat-icon-success { background: var(--mtf-success-bg); color: var(--mtf-success); }
.stat-icon-info    { background: var(--mtf-info-bg); color: var(--mtf-info); }
.stat-icon-muted   { background: var(--mtf-light-grey); color: var(--mtf-dark-grey); }
.stat-icon-warning { background: var(--mtf-warning-bg); color: var(--mtf-warning); }

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.stat-label {
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
    font-weight: 600;
}

.stat-hint {
    font-size: var(--fs-xs);
    color: var(--mtf-grey);
}

.recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--mtf-light-grey-2);
}

.recent-item:last-child {
    border-bottom: none;
}

.recent-item-main {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    flex: 1;
}

.recent-item-name {
    font-size: var(--fs-sm);
    color: var(--mtf-dark-grey);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.recent-item-main:hover .recent-item-name {
    color: var(--mtf-primary);
}

.recent-item-side {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.quick-actions {
    padding: var(--sp-2);
}

.quick-action {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.quick-action:hover {
    background: var(--mtf-light-grey);
    color: inherit;
}

.quick-action i {
    font-size: 1.25rem;
    color: var(--mtf-primary);
    width: 2rem;
    text-align: center;
    flex-shrink: 0;
}

.quick-action strong {
    display: block;
    font-size: var(--fs-sm);
}

.quick-action small {
    color: var(--mtf-dark-grey);
    font-size: var(--fs-xs);
}

/* ============================================================
   Toolbar (ricerca + filtri)
   ============================================================ */
.toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.toolbar-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
}

.toolbar-search > i {
    position: absolute;
    left: var(--sp-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--mtf-grey);
    font-size: var(--fs-sm);
    pointer-events: none;
}

.toolbar-search .form-control {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
}

.toolbar-search-clear {
    position: absolute;
    right: var(--sp-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--mtf-grey);
    font-size: var(--fs-xs);
    cursor: pointer;
    padding: var(--sp-1);
}

.toolbar-select {
    width: auto;
    min-width: 220px;
    max-width: 22rem;
}

/* Filtro azienda con ricerca (CompanyFilter) */
.combo {
    position: relative;
    width: 300px;
}

.combo-icon {
    position: absolute;
    left: var(--sp-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--mtf-grey);
    font-size: var(--fs-sm);
    pointer-events: none;
}

.combo-toggle {
    display: block;
    width: 100%;
    padding-left: 2.25rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combo-open .combo-toggle {
    border-color: var(--mtf-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

.combo-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 100%;
    width: max-content;
    max-width: min(460px, calc(100vw - 2 * var(--sp-4)));
    background: var(--mtf-surface);
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.combo-search {
    position: relative;
    padding: var(--sp-2);
    border-bottom: 1px solid var(--mtf-light-grey-2);
}

.combo-search > i {
    position: absolute;
    left: calc(var(--sp-2) + var(--sp-3));
    top: 50%;
    transform: translateY(-50%);
    color: var(--mtf-grey);
    font-size: var(--fs-sm);
    pointer-events: none;
}

.combo-search .form-control {
    padding-left: 2.1rem;
}

.combo-list {
    max-height: 320px;
    overflow-y: auto;
    padding: var(--sp-1) 0;
}

.combo-group {
    padding: var(--sp-2) var(--sp-3) var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mtf-dark-grey);
}

.combo-option {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.combo-option-indent {
    padding-left: var(--sp-5);
}

.combo-option-indent-2 {
    padding-left: calc(var(--sp-5) + var(--sp-4));
}

.combo-option.active {
    background: var(--mtf-primary-light);
}

.combo-option.selected {
    color: var(--mtf-primary);
    font-weight: 600;
}

.combo-sub {
    font-family: var(--mtf-font-mono);
    font-size: var(--fs-xs);
    color: var(--mtf-grey);
}

.combo-check {
    margin-left: auto;
}

.combo-empty {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--mtf-grey);
}

/* Menu "altre azioni" a tre puntini (MoreMenu): sotto il pulsante, allineato al suo bordo destro */
.more-menu {
    position: relative;
}

.more-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
}

.more-menu-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    min-width: 180px;
    padding: var(--sp-1) 0;
    background: var(--mtf-surface);
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.more-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    background: transparent;
    color: var(--mtf-dark);
    font-size: var(--fs-sm);
    text-align: left;
    white-space: nowrap;
}

.more-menu-item:hover,
.more-menu-item:focus-visible {
    background: var(--mtf-primary-light);
    outline: none;
}

.more-menu-item .bi {
    color: var(--mtf-dark-grey);
}

.toolbar-count {
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

/* Filtro a scelta singola (stato, tipo, vista): controllo segmentato, con il numero facoltativo.
   Alto quanto i campi della toolbar; segment-sm dentro le card, accanto ai pulsanti btn-sm. */
.segment {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--radius-md);
    background: var(--mtf-light-grey);
}

.segment-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.35rem 0.8rem;
    border: 0;
    border-radius: calc(var(--radius-md) - 3px);
    background: transparent;
    color: var(--mtf-dark-grey);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
}

.segment-btn:hover:not(:disabled) {
    color: var(--mtf-dark);
}

.segment-btn:disabled {
    opacity: 0.5;
}

.segment-btn.active {
    background: var(--mtf-surface);
    color: var(--mtf-dark);
    box-shadow: var(--shadow-sm);
}

.segment-count {
    min-width: 1.6rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--mtf-light-grey-2);
    color: var(--mtf-dark-grey);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-align: center;
}

.segment-btn.active .segment-count {
    background: var(--mtf-primary-light);
    color: var(--mtf-primary-shade);
}

.segment-sm .segment-btn {
    padding: 0.15rem 0.6rem;
    font-size: var(--fs-xs);
}

/* Pannello filtri: per gli elenchi con molti filtri (documenti falliti, log). Riga in alto come
   la toolbar, sotto i campi con l'etichetta. Gli elenchi semplici usano la toolbar. */
.filter-panel {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
}

.filter-panel-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.filter-panel .toolbar-search {
    flex: 1 1 260px;
    max-width: none;
}

.filter-panel-fields {
    display: grid;
    grid-template-columns: auto minmax(140px, 1fr) minmax(200px, 2fr) minmax(120px, 1fr) minmax(140px, 1fr) auto;
    align-items: end;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--mtf-light-grey);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    margin: 0;
}

.filter-field-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mtf-grey);
}

.filter-field-reset .btn:disabled {
    visibility: hidden;
}

.fr-date-range {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.fr-date-range .form-control {
    width: 9.5rem;
}

.fr-date-sep {
    color: var(--mtf-grey);
}

/* Spiegazione sotto la toolbar, prima della tabella; dentro una card va in card-note, in fondo */
.list-note {
    margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--mtf-dark-grey);
}

.card-note {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--mtf-light-grey-2);
    font-size: var(--fs-sm);
    color: var(--mtf-dark-grey);
}

.list-note-after {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--mtf-grey);
}

/* Testata della tabella dentro la card, ad altezza fissa: riepilogo e strumenti, oppure le
   azioni sulle righe spuntate (table-head-selecting) */
.table-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 3.25rem;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--mtf-light-grey-2);
    transition: background-color 0.15s ease;
}

.table-head-selecting {
    background: var(--mtf-primary-light);
}

.table-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--mtf-dark-grey);
}

.table-summary strong {
    color: var(--mtf-dark);
}

.dotsep::before {
    content: "·";
    margin-right: var(--sp-2);
    color: var(--mtf-grey);
}

.selection-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.selection-bar-count {
    margin-right: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--mtf-primary-shade);
}

.table-head-tools {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
    white-space: nowrap;
}

/* ============================================================
   Tabelle
   ============================================================ */
.table-card {
    overflow: hidden;
}

/* La tabella scorre dentro la card: l'altezza massima la imposta fitTables (admin-interop.js)
   così la barra orizzontale resta nella finestra; l'intestazione resta ferma. */
.table-card .table-responsive,
.card > .table-responsive {
    overflow: auto;
}

/* Stessa intestazione per ogni tabella del portale: nelle card, annidate o no, e nei dialoghi */
.table-card .table > thead th,
.card .table > thead th,
.modal-backdrop-custom .table > thead th {
    background: var(--mtf-light-grey);
    color: var(--mtf-dark-grey);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--mtf-light-grey-2);
    padding: var(--sp-3) var(--sp-4);
    white-space: nowrap;
}

.table-card .table-responsive > .table > thead th,
.card > .table-responsive > .table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--mtf-light-grey-2);
}

.table-card .table > tbody td,
.card .table > tbody td {
    padding: var(--sp-3) var(--sp-4);
    vertical-align: middle;
}

.modal-backdrop-custom .table > thead th {
    padding: var(--sp-2) var(--sp-3);
}

/* Colonna con un campo da compilare o una barra: non si stringe fino a renderli inutilizzabili */
.col-wide {
    min-width: 14rem;
}

/* Campo per un codice breve (es. codice utente SAP) in una testata di card */
.input-code {
    width: 12rem;
}

/* Ultima colonna con le azioni della riga: pulsanti solo icona, stretta quanto serve */
.col-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.col-actions > .btn + .btn,
.col-actions > * + .more-menu,
.col-actions > .more-menu + * {
    margin-left: var(--sp-1);
}

.th-sort {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.th-sort:hover {
    color: var(--mtf-primary);
}

.th-sort-icon {
    font-size: 0.65rem;
    color: var(--mtf-primary);
}

.th-sort-idle {
    color: inherit;
    opacity: 0.35;
}

.th-sort:hover .th-sort-idle {
    opacity: 0.8;
}

.row-clickable {
    cursor: pointer;
}

.url-cell {
    max-width: 260px;
}

.error-cell {
    min-width: 260px;
    max-width: 420px;
}

.notes-cell {
    max-width: 240px;
}

.check-col {
    width: 2.75rem;
    cursor: pointer;
}

.user-picker {
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-md);
}

/* Lista card: sostituisce la tabella sotto il breakpoint mobile */
.stack-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.stack-card {
    background: var(--mtf-surface);
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.stack-card-main {
    display: block;
    padding: var(--sp-4);
    text-decoration: none;
    color: inherit;
}

.stack-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.stack-card-name {
    font-weight: 600;
    font-size: var(--fs-md);
}

.stack-card-sub {
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
    word-break: break-all;
    margin-top: var(--sp-1);
}

.stack-card-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--mtf-light-grey-2);
    background: var(--mtf-light-grey);
}

/* ============================================================
   Dettaglio a tab
   ============================================================ */
.tab-bar {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--mtf-light-grey-2);
    margin-bottom: var(--sp-4);
    overflow-x: auto;
    scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar {
    display: none;
}

.tab-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 2px solid transparent;
    color: var(--mtf-dark-grey);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.tab-link:hover {
    color: var(--mtf-primary);
}

.tab-link.active {
    color: var(--mtf-primary);
    border-bottom-color: var(--mtf-primary);
    font-weight: 600;
}

.kv-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-2) var(--sp-4);
    align-items: center;
    margin: 0 0 var(--sp-4);
}

.kv-list dt {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--mtf-dark-grey);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kv-list dd {
    margin: 0;
}

.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-4) 0 0;
}

.kv-grid dt {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--mtf-grey);
    margin-bottom: 0.1rem;
}

.kv-grid dd {
    margin: 0;
    font-size: var(--fs-sm);
}

/* ============================================================
   Stepper (creazione cliente)
   ============================================================ */
.stepper {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
}

.stepper-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--mtf-grey);
    font-size: var(--fs-sm);
}

.stepper-item + .stepper-item::before {
    content: '';
    width: 2rem;
    height: 2px;
    background: var(--mtf-light-grey-2);
    margin-right: var(--sp-2);
}

.stepper-num {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-pill);
    background: var(--mtf-light-grey);
    color: var(--mtf-dark-grey);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-xs);
    flex-shrink: 0;
}

.stepper-item.done .stepper-num {
    background: var(--mtf-primary-light);
    color: var(--mtf-primary);
}

.stepper-item.current .stepper-num {
    background: var(--mtf-primary);
    color: #fff;
}

.stepper-item.current .stepper-label {
    color: var(--mtf-dark);
    font-weight: 600;
}

/* ============================================================
   Badge di stato e di versione
   ============================================================ */
.badge-active,
.badge-inactive,
.badge-to-review {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0.25rem 0.65rem;
}

.badge-active {
    background: var(--mtf-success-bg);
    color: #065f46;
}

.badge-inactive {
    background: var(--mtf-light-grey);
    color: var(--mtf-dark-grey);
}

.badge-to-review {
    background: var(--mtf-warning-bg);
    color: var(--mtf-warning);
}

/* Badge cliccabile (es. la licenza del dispositivo): il pulsante non aggiunge niente al badge */
.badge-btn {
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--radius-pill);
    line-height: 1;
}

.badge-btn:focus-visible {
    outline: 2px solid var(--mtf-primary);
    outline-offset: 2px;
}

/* Il colore codifica il livello della cascata da cui arriva la versione. */
.version-badge {
    display: inline-block;
    font-family: var(--mtf-font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    white-space: nowrap;
}

.version-badge-device   { background: var(--mtf-primary); color: #fff; }
.version-badge-user     { background: var(--mtf-info-bg); color: var(--mtf-info); border-color: #bae6fd; }
.version-badge-company  { background: var(--mtf-primary-light); color: var(--mtf-primary-shade); border-color: #e0ccf0; }
.version-badge-global   { background: var(--mtf-success-bg); color: #065f46; border-color: #a7f3d0; }
.version-badge-none     { background: var(--mtf-light-grey); color: var(--mtf-grey); }
.version-badge-installed{ background: var(--mtf-light-grey); color: var(--mtf-dark-grey); border-color: var(--mtf-light-grey-2); }
.version-badge-behind   { background: var(--mtf-warning-bg); color: var(--mtf-warning); border-color: #fcd34d; }

.version-source {
    font-size: var(--fs-xs);
    color: var(--mtf-grey);
    margin-left: 0.3rem;
}

.cascade-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
    background: var(--mtf-surface);
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
}

.cascade-arrow {
    color: var(--mtf-grey);
    font-size: 0.7rem;
}

/* Pannello della versione globale */
.global-panel {
    display: flex;
    flex-direction: column;
}

.global-version {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.global-version-num {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--mtf-success);
}

/* Selettore dell'ambito di distribuzione */
.scope-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-2);
}

.scope-option {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    min-height: 4rem;
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-md);
    background: var(--mtf-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.scope-option:hover {
    border-color: var(--mtf-primary-tint);
}

.scope-option.active {
    border-color: var(--mtf-primary);
    background: var(--mtf-primary-light);
}

.scope-option i {
    font-size: 1.15rem;
    color: var(--mtf-primary);
    flex-shrink: 0;
}

.scope-option > span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.scope-option strong {
    display: block;
    font-size: var(--fs-sm);
    line-height: 1.25;
}

.scope-option small {
    color: var(--mtf-dark-grey);
    font-size: var(--fs-xs);
    line-height: 1.3;
}

/* Alert informativi dentro un dialogo: stesso respiro degli altri blocchi. */
.modal-backdrop-custom .alert {
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: 0;
}

/* ============================================================
   Segreti, QR, blocchi di codice
   ============================================================ */
.secret-field {
    font-family: var(--mtf-font-mono);
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
}

.qr-img {
    width: 230px;
    height: 230px;
    image-rendering: pixelated;
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-md);
    padding: var(--sp-2);
    background: #fff;
}

.payload-box {
    background: var(--mtf-light-grey);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    margin: var(--sp-4) 0;
}

.payload-label {
    display: block;
    font-weight: 600;
    color: var(--mtf-dark-grey);
    font-size: var(--fs-xs);
    margin-bottom: var(--sp-1);
}

.payload-label span {
    font-weight: 400;
    color: var(--mtf-grey);
}

.payload-box code {
    font-size: var(--fs-sm);
    color: var(--mtf-primary-shade);
    word-break: break-all;
}

.code-block {
    background: #1e1b24;
    color: #e8e3ef;
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--mtf-font-mono);
    font-size: var(--fs-xs);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 320px;
    overflow: auto;
}

.code-block-inline {
    max-height: none;
    padding: var(--sp-2) var(--sp-3);
}

/* Errore dei documenti falliti: testo normale, non va spezzato a metà parola */
.code-block-error {
    word-break: normal;
    overflow-wrap: anywhere;
}

.code-block-json {
    max-height: 560px;
    white-space: pre;
    word-break: normal;
}

/* ============================================================
   Documenti falliti
   ============================================================ */
.mono {
    font-family: var(--mtf-font-mono);
}

.fr-summary {
    margin-bottom: var(--sp-3);
}

.fr-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin: 0;
    padding: var(--sp-4);
    row-gap: var(--sp-4);
}

.fr-summary-grid dd {
    font-size: var(--fs-md);
    overflow-wrap: break-word;
}

.fr-sub {
    margin-top: 0.1rem;
    font-size: var(--fs-xs);
    color: var(--mtf-grey);
}

/* Modifica e reinvia: editor JSON e pannello d'invio */
.fr-editor-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--mtf-light-grey-2);
}

.fr-editor-host {
    position: relative;
}

.fr-editor {
    height: calc(100vh - 260px);
    min-height: 420px;
}

.fr-editor-msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    color: var(--mtf-dark-grey);
    background: var(--mtf-surface);
    z-index: 1;
}

.fr-warn {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    background: var(--mtf-warning-bg);
}

.fr-result {
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
}

.fr-result-ok {
    background: var(--mtf-success-bg);
    color: #065f46;
}

.fr-result-ko {
    background: var(--mtf-danger-bg);
    color: #991b1b;
}

.fr-result-text {
    overflow-wrap: anywhere;
}

/* ---------- Vista per righe del documento (dettaglio e Modifica e reinvia) ---------- */
/* Si adatta alla larghezza del riquadro (colonna della pagina), non della finestra */
.fr-lines {
    container: frlines / inline-size;
    --fr-ko: var(--mtf-danger);
    --fr-ko-bg: #fff5f5;
    --fr-ko-line: #fecaca;
    --fr-warn: var(--mtf-warning);
    --fr-warn-bg: #fffbeb;
    --fr-ok: var(--mtf-success);
    background: var(--mtf-canvas);
}

.fr-lines-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3);
    background: var(--mtf-surface);
    border-bottom: 1px solid var(--mtf-light-grey-2);
}

.fr-lines-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-right: auto;
}

.fr-lines-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.fr-lines-hint {
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
}

.fr-lines-msg {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--mtf-info);
    background: var(--mtf-info-bg);
    border-bottom: 1px solid var(--mtf-light-grey-2);
}

.fr-lines-msg > .bi {
    margin-top: 0.1rem;
}

.fr-lines-msg-ko {
    color: #991b1b;
    background: var(--mtf-danger-bg);
}

.fr-lines-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
    max-height: calc(100vh - 280px);
    min-height: 360px;
    overflow: auto;
}

.fr-lines-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-3);
    color: var(--mtf-dark-grey);
}

.fr-lines-empty .bi {
    font-size: 1.4rem;
    color: var(--mtf-success);
}

/* Etichette di stato */
.fr-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--mtf-dark-grey);
    background: var(--mtf-light-grey);
    border: 1px solid var(--mtf-light-grey-2);
}

.fr-pill-ko { color: #b91c1c; background: var(--mtf-danger-bg); border-color: var(--fr-ko-line, #fecaca); }
.fr-pill-warn { color: #92400e; background: var(--mtf-warning-bg); border-color: #fde68a; }
.fr-pill-ok { color: #166534; background: var(--mtf-success-bg); border-color: #a7f3d0; }
.fr-pill-info { color: var(--mtf-info); background: var(--mtf-info-bg); border-color: #bae6fd; }
.fr-pill-changed { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }

.fr-pill-xs {
    padding: 0 0.4rem;
    margin-left: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
}

.fr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.05rem 0.45rem;
    border-radius: var(--radius-sm);
    font-family: var(--mtf-font-mono);
    font-size: var(--fs-xs);
    color: var(--mtf-dark);
    background: var(--mtf-light-grey);
}

.fr-chip .bi {
    color: var(--mtf-grey);
}

/* Scheda di una riga */
.fr-lc {
    background: var(--mtf-surface);
    border: 1px solid var(--mtf-light-grey-2);
    border-left: 4px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.fr-lc-ko { border-color: var(--fr-ko-line); border-left-color: var(--fr-ko); }
.fr-lc-warn { border-left-color: #f59e0b; }
.fr-lc-ok { border-left-color: var(--fr-ok); }

.fr-lc-head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(7.5rem, 0.8fr) auto auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    border-radius: var(--radius-md);
}

.fr-lc-head:hover {
    background: var(--mtf-light-grey);
}

.fr-lc-ko .fr-lc-head {
    background: var(--fr-ko-bg);
}

.fr-lc-ko .fr-lc-head:hover {
    background: #ffecec;
}

.fr-lc-open .fr-lc-head {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.fr-lc-head:focus-visible {
    outline: 2px solid var(--mtf-primary);
    outline-offset: -2px;
}

.fr-lc-chevron {
    color: var(--mtf-grey);
    transition: transform 0.15s ease;
}

.fr-lc-open .fr-lc-chevron {
    transform: rotate(90deg);
}

.fr-lc-num {
    min-width: 1.9rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    text-align: center;
    font-family: var(--mtf-font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--mtf-dark-grey);
    background: var(--mtf-light-grey);
}

.fr-lc-ko .fr-lc-num {
    color: #b91c1c;
    background: var(--mtf-danger-bg);
}

.fr-lc-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fr-lc-code {
    font-family: var(--mtf-font-mono);
    font-weight: 700;
    color: var(--mtf-dark);
}

.fr-lc-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
}

.fr-lc-where {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem var(--sp-2);
    min-width: 0;
}

.fr-lc-base {
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
    white-space: nowrap;
}

.fr-lc-qty {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.fr-lc-qty strong {
    font-size: var(--fs-md);
}

.fr-lc-lots {
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
}

.fr-bar {
    display: block;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--mtf-light-grey-2);
    overflow: hidden;
}

.fr-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--mtf-primary-tint);
}

.fr-bar-full > span { background: var(--mtf-primary); }
.fr-bar-over > span { background: #f59e0b; }

.fr-lc-state {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
}

.fr-lc-lotsbtn {
    white-space: nowrap;
}

.fr-lc-body {
    padding: var(--sp-3);
    border-top: 1px solid var(--mtf-light-grey-2);
}

.fr-lc-ko .fr-lc-body {
    border-top-color: var(--fr-ko-line);
}

/* Messaggi */
.fr-notes {
    list-style: none;
    margin: 0 0 var(--sp-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: var(--fs-sm);
}

.fr-notes li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.fr-notes .bi {
    margin-top: 0.15rem;
}

.fr-note-ko { color: #b91c1c; }
.fr-note-warn { color: #92400e; }

/* Lotti della riga: griglia che sul telefono si impila */
.fr-dets {
    --fr-det-cols: minmax(12rem, 2fr) minmax(7rem, 1.1fr) 5.5rem 6.5rem 5.5rem 1.5rem;
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.fr-dets-ro {
    --fr-det-cols: minmax(10rem, 1.4fr) minmax(8rem, 1.2fr) 7rem 6rem;
}

.fr-det {
    display: grid;
    grid-template-columns: var(--fr-det-cols);
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--mtf-light-grey-2);
    font-size: var(--fs-sm);
}

.fr-det:first-child {
    border-top: 0;
}

.fr-det-head {
    padding-block: 0.35rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mtf-dark-grey);
    background: var(--mtf-light-grey);
}

.fr-det-ko {
    background: var(--fr-ko-bg);
    box-shadow: inset 3px 0 0 var(--fr-ko);
}

.fr-det-warn {
    background: var(--fr-warn-bg);
    box-shadow: inset 3px 0 0 #f59e0b;
}

.fr-det-cell {
    min-width: 0;
}

.fr-det-cell.mono {
    font-family: var(--mtf-font-mono);
    font-size: var(--fs-xs);
    overflow-wrap: anywhere;
}

.fr-det-actions {
    text-align: right;
}

.fr-det-notes {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--fs-xs);
}

.fr-det-none {
    padding: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--mtf-dark-grey);
}

.fr-add-lot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    margin-top: var(--sp-2);
}

.fr-input-lot {
    width: 100%;
    font-size: 0.8rem;
}

.fr-input-qty {
    width: 100%;
    max-width: 7.5rem;
    margin-left: auto;
}

.fr-input-ko {
    border-color: var(--fr-ko);
    box-shadow: 0 0 0 1px var(--fr-ko-line);
}

.fr-input-changed {
    border-color: var(--mtf-secondary);
    background-color: #fff7ed;
}

.fr-text-changed {
    padding: 0 var(--sp-1);
    border-radius: var(--radius-sm);
    background: #ffedd5;
}

/* Quanto se ne può prendere */
.fr-take {
    display: inline-block;
    min-width: 2.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: var(--radius-sm);
    text-align: right;
    font-family: var(--mtf-font-mono);
    font-weight: 700;
    color: #166534;
    background: var(--mtf-success-bg);
}

.fr-take-zero { color: var(--mtf-dark-grey); background: var(--mtf-light-grey); }
.fr-take-ko { color: #b91c1c; background: var(--mtf-danger-bg); }

/* Lotti in giacenza della riga */
.fr-lots {
    margin-bottom: var(--sp-3);
    border: 1px solid #bae6fd;
    border-radius: var(--radius-sm);
    background: var(--mtf-surface);
    overflow: hidden;
}

.fr-lots-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--mtf-info);
    background: var(--mtf-info-bg);
}

.fr-lots-msg {
    padding: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--mtf-dark-grey);
}

.fr-lots-scroll {
    max-height: 320px;
    overflow: auto;
}

.fr-lots-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.fr-lots-table th,
.fr-lots-table td {
    padding: 0.4rem var(--sp-3);
    border-top: 1px solid var(--mtf-light-grey-2);
    white-space: nowrap;
}

.fr-lots-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-top: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mtf-dark-grey);
    background: var(--mtf-light-grey);
}

.fr-lots-table .mono {
    font-family: var(--mtf-font-mono);
}

.fr-lots-table tbody tr:hover > td {
    background: var(--mtf-light-grey);
}

.fr-lots-table .fr-lot-empty > td {
    color: var(--mtf-grey);
}

.fr-lots-table .fr-lot-used > td:first-child {
    box-shadow: inset 3px 0 0 var(--mtf-info);
}

/* Stato della lista di prelievo in SAP (dettaglio e Modifica e reinvia) */
.fr-pl {
    border-left: 4px solid var(--mtf-light-grey-2);
}

.fr-pl-open { border-left-color: var(--mtf-info); }
.fr-pl-picked { border-left-color: var(--mtf-success); }
.fr-pl-complete { border-left-color: #f59e0b; background: #fffbeb; }
.fr-pl-closed { border-left-color: var(--mtf-danger); background: #fff5f5; }
.fr-pl-missing { border-left-color: var(--mtf-grey); }

.fr-pl-body {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3);
}

.fr-pl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    color: var(--mtf-dark-grey);
    background: var(--mtf-light-grey);
}

.fr-pl-open .fr-pl-icon { color: var(--mtf-info); background: var(--mtf-info-bg); }
.fr-pl-picked .fr-pl-icon { color: #166534; background: var(--mtf-success-bg); }
.fr-pl-complete .fr-pl-icon { color: #92400e; background: var(--mtf-warning-bg); }
.fr-pl-closed .fr-pl-icon { color: #b91c1c; background: var(--mtf-danger-bg); }

.fr-pl-text {
    flex: 1;
    min-width: 0;
}

.fr-pl-kicker {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mtf-dark-grey);
}

.fr-pl-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--mtf-dark);
}

.fr-pl-desc,
.fr-pl-error {
    margin-top: 0.15rem;
    font-size: var(--fs-sm);
    color: var(--mtf-dark-grey);
}

.fr-pl-error {
    color: #b91c1c;
}

.fr-pl-foot {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--mtf-grey);
}

/* Finestra "Verifica stato liste": un riquadro per server e database */
.fr-plc-group {
    padding: var(--sp-3);
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-sm);
}

.fr-plc-group + .fr-plc-group {
    margin-top: var(--sp-2);
}

.fr-plc-head {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
}

.fr-plc-result {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
}

/* Etichetta dello stato della lista sotto il numero del documento, nell'elenco */
.fr-doc-text .fr-pill {
    margin: 0.2rem 0 0;
}

/* Telefono e colonna stretta: intestazione della riga su due livelli, lotti impilati con l'etichetta del campo */
@container frlines (max-width: 980px) {
    .fr-lc-head {
        grid-template-columns: auto auto minmax(0, 1fr) minmax(8rem, 12rem) auto;
        grid-template-areas:
            "chev num item state btn"
            ". . where qty qty";
        row-gap: var(--sp-2);
    }

    .fr-lc-chevron { grid-area: chev; }
    .fr-lc-num { grid-area: num; }
    .fr-lc-item { grid-area: item; }
    .fr-lc-where { grid-area: where; }
    .fr-lc-qty { grid-area: qty; }
    .fr-lc-state { grid-area: state; }
    .fr-lc-lotsbtn { grid-area: btn; justify-self: end; }
}

@container frlines (max-width: 640px) {
    .fr-lc-head {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "chev num item state"
            ". . where where"
            ". . qty btn";
    }

    .fr-lines-list {
        max-height: none;
        padding: var(--sp-2);
    }

    .fr-hide-sm {
        display: none;
    }

    .fr-det-head {
        display: none;
    }

    .fr-det,
    .fr-dets-ro .fr-det {
        grid-template-columns: 1fr 1fr;
        row-gap: var(--sp-2);
    }

    .fr-det-lot {
        grid-column: 1 / -1;
    }

    .fr-det-cell[data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: var(--mtf-font);
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--mtf-dark-grey);
    }

    .fr-det-cell.text-end {
        text-align: left !important;
    }

    .fr-input-qty {
        margin-left: 0;
    }

    .fr-det-actions {
        grid-column: 1 / -1;
        text-align: right;
    }
}

.fr-table > thead th {
    white-space: nowrap;
}

.fr-c-when {
    width: 7rem;
    white-space: nowrap;
}

.fr-when-time {
    font-size: var(--fs-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mtf-dark);
}

.fr-doc {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.fr-doc-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: var(--mtf-light-grey);
    color: var(--mtf-dark-grey);
    font-size: 1.05rem;
}

.fr-doc-icon-group {
    background: var(--mtf-info-bg);
    color: var(--mtf-info);
}

.fr-doc-text {
    min-width: 0;
}

.fr-doc-type {
    font-weight: 600;
    color: var(--mtf-dark);
    white-space: nowrap;
}

.fr-c-err {
    min-width: 280px;
}

.fr-err {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
}

/* Codice SAP dell'errore: si riconosce a colpo d'occhio anche con messaggi lunghi */
.fr-code {
    flex: none;
    margin-top: 1px;
    padding: 0 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--mtf-danger-bg);
    color: var(--mtf-danger);
    font-family: var(--mtf-font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
}

/* Messaggio d'errore nell'elenco: al massimo due righe */
.fr-error-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--mtf-dark);
}

/* Invio salvato in SAP, nella colonna dell'esito al posto dell'errore */
.fr-ok {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--mtf-success);
}

.fr-c-who {
    white-space: nowrap;
}

.fr-who-user {
    font-size: var(--fs-sm);
}

.fr-c-status {
    width: 1%;
    white-space: nowrap;
}

.fr-mixed {
    display: inline-flex;
    flex-direction: column;
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
}

.fr-mixed-todo {
    font-weight: 600;
    color: var(--mtf-warning);
}

/* Gruppi dello stesso documento */
/* Freccia del gruppo in fondo alla riga: giù da chiuso, su da aperto */
.fr-c-toggle {
    width: 1%;
    text-align: right;
    padding-left: 0 !important;
}

.fr-group-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-pill);
    color: var(--mtf-dark-grey);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.fr-group:hover .fr-group-chevron {
    background: var(--mtf-light-grey);
    color: var(--mtf-dark);
}

.fr-group-open .fr-group-chevron {
    transform: rotate(180deg);
}

.fr-group-count {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 0 var(--sp-2);
    border-radius: var(--radius-pill);
    background: var(--mtf-info-bg);
    color: var(--mtf-info);
    font-size: var(--fs-xs);
    font-weight: 600;
    vertical-align: 1px;
}

.table > tbody > tr.fr-group-open > td {
    border-bottom-color: transparent;
}

.table > tbody > tr.fr-child > td {
    background: var(--mtf-canvas);
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
}

/* I casi del gruppo pendono dall'icona del documento: una linea verticale con un punto per caso */
.table > tbody > tr.fr-child > td.fr-c-doc {
    position: relative;
}

.fr-attempt {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-left: 1.6rem;
    font-size: var(--fs-sm);
    color: var(--mtf-dark-grey);
}

.fr-attempt::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--sp-4) + 1.125rem - 1px);
    width: 2px;
    background: var(--mtf-info-bg);
}

.fr-attempt-dot {
    position: absolute;
    left: calc(var(--sp-4) + 1.125rem - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mtf-info);
    box-shadow: 0 0 0 3px var(--mtf-canvas);
}

.table > tbody > tr.row-selected > td {
    background: var(--mtf-primary-light);
}

.fr-error {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--mtf-danger-bg);
    border: 1px solid #fecaca;
    border-radius: var(--radius-lg);
    color: #7f1d1d;
}

.fr-error-icon {
    color: var(--mtf-danger);
    font-size: 1.25rem;
    line-height: 1.3;
}

.fr-error-body {
    flex: 1;
    min-width: 0;
}

.fr-error-title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.fr-error-toggle {
    color: #991b1b;
    text-decoration: none;
}

.fr-error-copy {
    flex-shrink: 0;
}

.tab-bar button.tab-link {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.tab-bar button.tab-link.active {
    border-bottom-color: var(--mtf-primary);
}

.fr-large {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--mtf-light-grey);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
}

.fr-folder-label {
    margin-bottom: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mtf-grey);
}

.fr-folder {
    flex: 1;
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
    overflow-wrap: anywhere;
}

.instructions-box {
    background: var(--mtf-light-grey);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    white-space: pre-wrap;
    font-size: var(--fs-sm);
    line-height: 1.65;
    max-height: 360px;
    overflow: auto;
}

/* ============================================================
   Dialoghi e toast
   ============================================================ */
.modal-backdrop-custom {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(20, 10, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    overflow-y: auto;
}

.modal-backdrop-custom .modal-dialog {
    margin: auto;
    width: 100%;
    max-width: 480px;
}

.modal-backdrop-custom .modal-dialog.modal-lg {
    max-width: 720px;
}

/* Lo storico sessioni è una tabella a sette colonne: sotto questa larghezza le date
   andrebbero a capo riga per riga. */
.modal-backdrop-custom .modal-dialog.modal-xl {
    max-width: 1040px;
}

.modal-backdrop-custom .modal-content {
    /* Il fondo va dichiarato esplicitamente: fuori da un .modal Bootstrap la
       variabile --bs-modal-bg non è impostata e il dialogo risulterebbe trasparente. */
    background: var(--mtf-surface);
    color: var(--mtf-dark);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    /* Su schermi bassi il dialogo non deve sfondare: scorre il solo corpo. */
    max-height: calc(100vh - 2 * var(--sp-4));
    overflow: hidden;
}

/* Padding espliciti: le utility border-0 di Bootstrap azzerano il bordo ma lasciano
   spaziature disallineate fra header, corpo e footer. */
.modal-backdrop-custom .modal-header {
    flex-shrink: 0;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-5) var(--sp-3);
}

.modal-backdrop-custom .modal-title {
    display: flex;
    align-items: center;
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.modal-backdrop-custom .modal-title .bi {
    color: var(--mtf-primary);
    flex-shrink: 0;
}

/* La chiusura si stacca dal titolo e resta cliccabile comodamente. */
.modal-backdrop-custom .modal-header .btn-close {
    margin: 0 0 0 auto;
    flex-shrink: 0;
    padding: var(--sp-2);
}

.modal-backdrop-custom .modal-body {
    overflow-y: auto;
    padding: 0 var(--sp-5) var(--sp-4);
}

.modal-backdrop-custom .modal-footer {
    flex-shrink: 0;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5) var(--sp-5);
    border-top: 1px solid var(--mtf-light-grey-2);
    background: var(--mtf-light-grey);
}

/* Bootstrap aggiunge margini a ogni figlio del footer: qui lo spazio lo dà il gap. */
.modal-backdrop-custom .modal-footer > * {
    margin: 0;
}

/* L'ultimo elemento del corpo non deve aggiungere spazio sotto: al resto pensa il padding. */
.modal-backdrop-custom .modal-body > :last-child {
    margin-bottom: 0;
}

.toast-stack {
    position: fixed;
    bottom: var(--sp-5);
    right: var(--sp-5);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: min(380px, calc(100vw - 2rem));
}

.toast-stack .toast {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.toast-stack .text-bg-success {
    background-color: var(--mtf-success);
}

/* ============================================================
   Login
   ============================================================ */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: linear-gradient(150deg, var(--mtf-primary-shade), #034d14);
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--mtf-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border-top: 4px solid var(--mtf-secondary);
}

.login-card-body {
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
}

.login-logo-wrap {
    text-align: center;
    margin-bottom: var(--sp-5);
}

.login-logo-wrap img {
    height: 72px;
    width: 72px;
    border-radius: 16px;
}

.login-subtitle {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-xs);
    color: var(--mtf-grey);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.login-card-footer {
    padding: var(--sp-3);
    text-align: center;
    background: var(--mtf-light-grey);
    border-top: 1px solid var(--mtf-light-grey-2);
    font-size: var(--fs-xs);
}

.login-card-footer a {
    color: var(--mtf-dark-grey);
    text-decoration: none;
}

.login-card-footer a:hover {
    color: var(--mtf-primary);
    text-decoration: underline;
}

.login-card-sep {
    color: var(--mtf-light-grey-2);
    margin: 0 var(--sp-2);
}

/* ============================================================
   Avatar utente (condiviso da dispositivi e rollout)
   ============================================================ */
.user-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: hsl(var(--h, 270) 55% 30%);
    background: linear-gradient(135deg, hsl(var(--h, 270) 68% 95%), hsl(var(--h, 270) 62% 87%));
    box-shadow: inset 0 0 0 1.5px hsl(var(--h, 270) 52% 78%),
                0 2px 6px -2px hsl(var(--h, 270) 45% 55% / 0.45);
    transition: transform 0.18s ease;
}

.user-avatar-sm {
    width: 30px;
    height: 30px;
    font-size: 0.68rem;
}

/* ============================================================
   Selettore lingua — condiviso da Privacy e Support
   ============================================================ */
.lang-switcher {
    display: inline-flex;
    background: var(--mtf-light-grey);
    border-radius: var(--radius-md);
    padding: 3px;
    border: 1px solid var(--mtf-light-grey-2);
}

.lang-switcher-btn {
    padding: 0.35rem 1.1rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--mtf-grey);
    font-family: var(--mtf-font);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.lang-switcher-btn.active {
    background: var(--mtf-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(11, 138, 47, 0.25);
}

/* ============================================================
   Pagine pubbliche (Privacy, Support)
   Poggiano sugli stessi token: qui restano solo le regole
   specifiche del documento legale.
   ============================================================ */
.prv-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 1.25rem var(--sp-7);
    font-family: var(--mtf-font);
    color: var(--mtf-dark);
    font-size: 0.92rem;
    line-height: 1.7;
    background: var(--mtf-surface);
    min-height: 100vh;
}

.prv-header {
    text-align: center;
    padding: var(--sp-6) var(--sp-4) var(--sp-5);
    border-bottom: 3px solid var(--mtf-secondary);
}

.prv-logo {
    height: 60px;
    width: auto;
    margin-bottom: var(--sp-4);
}

.prv-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--mtf-primary);
    margin: 0 0 0.2rem;
    letter-spacing: -0.02em;
}

.prv-app-name {
    color: var(--mtf-grey);
    font-size: 0.82rem;
    margin: 0 0 var(--sp-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.prv-date {
    color: var(--mtf-grey);
    font-size: var(--fs-xs);
    margin-top: var(--sp-3);
}

.prv-section {
    display: flex;
    gap: var(--sp-5);
    padding: var(--sp-6) 0 var(--sp-5);
    border-bottom: 1px solid var(--mtf-light-grey-2);
}

.prv-section-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--mtf-primary-light);
    line-height: 1;
    min-width: 2.5rem;
    user-select: none;
}

.prv-section-body {
    flex: 1;
    min-width: 0;
}

.prv-section-body h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mtf-primary);
    margin: 0 0 0.85rem;
}

.prv-section-body p { margin: 0 0 var(--sp-3); }
.prv-section-body ul { padding-left: 1.3rem; margin: 0 0 var(--sp-3); }
.prv-section-body li { margin-bottom: 0.4rem; }
.prv-section-body a { color: var(--mtf-primary); text-decoration: underline; }

.prv-card-owner {
    background: var(--mtf-primary-light);
    border: 1px solid #e0ccf0;
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.prv-owner-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.88rem;
}

.prv-owner-row i {
    color: var(--mtf-primary);
    font-size: 0.95rem;
    min-width: 1rem;
}

.prv-owner-row a { color: var(--mtf-primary); }

.prv-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0.85rem;
}

.prv-pills span {
    background: var(--mtf-primary-light);
    color: var(--mtf-primary);
    border: 1px solid #d0b8e8;
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
}

.prv-pills span em {
    font-style: normal;
    color: var(--mtf-grey);
    font-weight: 400;
}

.prv-note {
    background: var(--mtf-light-grey);
    border-left: 3px solid var(--mtf-secondary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.6rem 0.9rem;
    font-size: 0.83rem;
    color: var(--mtf-dark-grey);
    margin: var(--sp-3) 0 0;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.prv-note.prv-note-ok { border-left-color: var(--mtf-success); }
.prv-note i { margin-top: 1px; flex-shrink: 0; }
.prv-note.mt-2 { margin-top: var(--sp-3); }

.prv-table-wrap {
    overflow-x: auto;
    margin: var(--sp-2) 0 var(--sp-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--mtf-light-grey-2);
}

.prv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.prv-table th {
    background: var(--mtf-primary);
    color: #fff;
    font-weight: 600;
    padding: 0.65rem var(--sp-4);
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prv-table td {
    padding: 0.65rem var(--sp-4);
    border-top: 1px solid var(--mtf-light-grey-2);
    vertical-align: top;
}

.prv-table tr:nth-child(even) td { background: var(--mtf-light-grey); }
.prv-table em { color: var(--mtf-grey); font-style: normal; }

.prv-highlight {
    display: flex;
    gap: var(--sp-4);
    background: linear-gradient(135deg, var(--mtf-primary-light), #fdf6ff);
    border: 1px solid #d0b8e8;
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    font-size: 0.88rem;
    align-items: flex-start;
}

.prv-highlight i {
    font-size: 1.4rem;
    color: var(--mtf-primary);
    margin-top: 1px;
    flex-shrink: 0;
}

.prv-rights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin: var(--sp-3) 0;
}

.prv-right {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    background: var(--mtf-light-grey);
    border-radius: var(--radius-sm);
    padding: 0.6rem var(--sp-3);
    font-size: 0.84rem;
}

.prv-right i {
    color: var(--mtf-primary);
    font-size: 0.95rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.prv-contact-box {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--mtf-primary);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 0.85rem var(--sp-4);
    margin-top: var(--sp-4);
    font-size: 0.88rem;
}

.prv-contact-box a {
    color: var(--mtf-secondary);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
}

.prv-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
    padding: var(--sp-5) 0 0;
    border-top: 2px solid var(--mtf-light-grey-2);
    font-size: var(--fs-xs);
    color: var(--mtf-grey);
}

.prv-footer a {
    color: var(--mtf-primary);
    text-decoration: none;
    font-weight: 500;
}

.prv-footer a:hover { text-decoration: underline; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1200px) {
    .admin-content { padding: var(--sp-4); }
    .url-cell { max-width: 180px; }
    .notes-cell { max-width: 160px; }
}

@media (max-width: 768px) {
    /* La sidebar diventa off-canvas invece di sparire. */
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: var(--shadow-lg);
    }

    .admin-shell.sidebar-open .admin-sidebar { transform: translateX(0); }
    .admin-shell.sidebar-open .sidebar-overlay { display: block; }

    .sidebar-close { display: block; }
    .topbar-burger { display: block; }

    .admin-main { margin-left: 0; }
    .admin-topbar { padding: 0 var(--sp-3); }
    .admin-content { padding: var(--sp-3); }

    .topbar-badge { display: none; }
    .topbar-group,
    .topbar-sep { display: none; }
    /* Su mobile il menu si apre a tutta larghezza: ridurlo non serve */
    .sidebar-collapse { display: none; }

    .page-header-row { flex-direction: column; align-items: stretch; }
    .page-header-actions { justify-content: flex-start; }

    .toolbar-search { max-width: none; flex-basis: 100%; }
    .toolbar-select { width: 100%; min-width: 0; max-width: none; }
    .toolbar-count { margin-left: 0; }
    .toolbar .segment, .filter-panel .segment { width: 100%; }
    .toolbar .segment-btn, .filter-panel .segment-btn { flex: 1; justify-content: center; padding-inline: var(--sp-2); }
    .filter-panel { padding: var(--sp-3); }
    .filter-panel-top .combo { width: 100%; }
    .table-head { padding: var(--sp-2) var(--sp-3); flex-wrap: wrap; }

    .form-card { max-width: none; }

    .stat-value { font-size: 1.35rem; }


    .toast-stack {
        left: var(--sp-3);
        right: var(--sp-3);
        bottom: var(--sp-3);
        max-width: none;
    }

    .qr-img { width: 190px; height: 190px; }

    .modal-backdrop-custom { padding: var(--sp-2); align-items: flex-start; }
    .modal-backdrop-custom .modal-content { max-height: calc(100vh - 2 * var(--sp-2)); }
    .modal-backdrop-custom .modal-header { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
    .modal-backdrop-custom .modal-body { padding: 0 var(--sp-4) var(--sp-3); }
    .modal-backdrop-custom .modal-footer { padding: var(--sp-3) var(--sp-4); }
    /* Su schermo stretto i bottoni del footer stanno larghi invece di stringersi. */
    .modal-backdrop-custom .modal-footer > .btn { flex: 1 1 auto; }
}

@media (max-width: 600px) {
    .prv-section { flex-direction: column; gap: var(--sp-2); }
    .prv-section-num { font-size: 1.2rem; }
    .prv-rights { grid-template-columns: 1fr; }
    .prv-footer { flex-direction: column; text-align: center; }
    .stepper { gap: var(--sp-2); }
    .stepper-item + .stepper-item::before { width: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar,
    .stat-card,
    .quick-action,
    .sidebar-link,
    .user-avatar {
        transition: none;
    }
}

/* ============================================================
   Warehouse: elenchi di caselle e campi a spaziatura fissa
   ============================================================ */
.check-list {
    max-height: 22rem;
    overflow-y: auto;
    padding: .25rem 0;
}

.check-list-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    column-gap: 1rem;
    max-height: none;
}

.mono-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================================================
   Aggiornamenti app: scelta dei destinatari di un bundle
   ============================================================ */
.dist-tree {
    max-height: 45vh;
    overflow-y: auto;
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    margin-left: 1.5rem;
}

.dist-server {
    padding: var(--sp-2) 0;
}

.dist-server + .dist-server {
    border-top: 1px solid var(--mtf-light-grey);
}

.dist-server .badge-inactive {
    margin-left: var(--sp-2);
}

.dist-company {
    margin-left: 3rem;
}

/* Documenti falliti da telefono: ogni riga diventa una scheda (documento e stato in alto,
   errore al centro, quando e chi in basso); la casella di selezione resta a sinistra */
@media (max-width: 768px) {
    .filter-panel-fields { grid-template-columns: 1fr 1fr; }
    .filter-field-dates, .filter-field-wide, .filter-field-type { grid-column: 1 / -1; }
    .filter-field-reset:has(.btn:disabled) { display: none; }
    .fr-date-range .form-control { width: auto; flex: 1; min-width: 0; }
    .filter-field-reset { grid-column: 1 / -1; align-items: flex-end; }

    .fr-table thead { display: none; }
    .fr-table, .fr-table tbody { display: block; }
    .fr-table > tbody > tr {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr) auto auto;
        grid-template-areas:
            "check doc status toggle"
            "check err err err"
            "check when who who";
        column-gap: var(--sp-2);
        row-gap: var(--sp-1);
        padding: var(--sp-3);
        border-bottom: 1px solid var(--mtf-light-grey-2);
    }
    .fr-table > tbody > tr > td { display: block; padding: 0 !important; border: 0; width: auto; min-width: 0; }
    /* Sfondi sulla scheda intera, non sulle singole celle (che nella griglia lascerebbero buchi) */
    .fr-table > tbody > tr > td { background: transparent !important; box-shadow: none !important; }
    .fr-table > tbody > tr.fr-group { background: var(--mtf-surface); }
    .fr-table > tbody > tr.fr-child { background: var(--mtf-canvas); }
    .fr-table > tbody > tr.row-selected { background: var(--mtf-primary-light); }
    .fr-table > tbody > tr > td.check-col { grid-area: check; padding-top: 0.6rem !important; }
    .fr-table > tbody > tr > td.fr-c-doc { grid-area: doc; }
    .fr-table > tbody > tr > td.fr-c-status { grid-area: status; }
    .fr-table > tbody > tr > td.fr-c-err { grid-area: err; min-width: 0; }
    .fr-table > tbody > tr > td.fr-c-when { grid-area: when; display: flex; gap: var(--sp-2); align-items: baseline; }
    .fr-table > tbody > tr > td.fr-c-who { grid-area: who; text-align: right; }
    .fr-table > tbody > tr > td.fr-c-toggle { grid-area: toggle; }
    .fr-c-when .fr-when-time { font-size: var(--fs-sm); }
    .fr-c-who .fr-who-user { display: none; }
    .fr-doc-type { white-space: normal; }
    .fr-table > tbody > tr.fr-child { padding-left: var(--sp-5); grid-template-areas: "check doc status toggle" "check err err err" "check when who who"; }
    .fr-attempt { padding-left: 0; }
    .fr-attempt::before, .fr-attempt-dot { display: none; }
}

/* ---------- Dettaglio del documento fallito ---------- */
.fr-hero {
    margin-bottom: var(--sp-3);
    overflow: hidden;
}

.fr-hero-error {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: linear-gradient(180deg, var(--mtf-danger-bg), color-mix(in srgb, var(--mtf-danger-bg) 35%, var(--mtf-surface)));
    border-bottom: 1px solid color-mix(in srgb, var(--mtf-danger) 18%, transparent);
}

.fr-hero-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--mtf-surface);
    color: var(--mtf-danger);
    font-size: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.fr-hero-body {
    flex: 1;
    min-width: 0;
}

.fr-hero-kicker {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mtf-danger);
}

.fr-hero-kicker .fr-code {
    background: var(--mtf-surface);
    letter-spacing: 0;
}

.fr-hero-message {
    margin-top: var(--sp-1);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.35;
    color: #7f1d1d;
    overflow-wrap: anywhere;
}

.fr-hero-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-2);
}

.fr-hero-tools .btn-link {
    color: #991b1b;
    text-decoration: none;
    font-size: var(--fs-sm);
}

.fr-hero-tools .btn-link:hover {
    text-decoration: underline;
}

.fr-hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3) var(--sp-4);
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
}

.fr-hero-meta dt {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mtf-grey);
}

.fr-hero-meta dd {
    margin: 0.15rem 0 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--mtf-dark);
    overflow-wrap: anywhere;
}

/* Dati inviati: schede a pillola e visualizzatore JSON */
.fr-data {
    overflow: hidden;
}

.fr-data-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4) 0;
}

/* Le schede dei dati inviati vanno a capo sul telefono */
.fr-data-head .segment {
    flex-wrap: wrap;
}

/* A destra anche quando va a capo sotto le schede: il menu dei tre puntini si apre verso sinistra */
.fr-data-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-left: auto;
}

.fr-data-caption {
    padding: var(--sp-2) var(--sp-4) var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--mtf-grey);
    border-bottom: 1px solid var(--mtf-light-grey-2);
}

.fr-viewer-host {
    position: relative;
}

.fr-viewer {
    height: max(420px, calc(100vh - 420px));
}

.fr-viewer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 220px;
    padding: var(--sp-5);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--mtf-dark-grey);
}

.fr-viewer-empty .bi {
    font-size: 1.75rem;
    color: var(--mtf-grey);
}

/* Cronologia del caso */
.fr-timeline {
    list-style: none;
    margin: 0;
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.fr-timeline li {
    position: relative;
    padding: 0 0 var(--sp-3) 1.5rem;
}

.fr-timeline li:last-child {
    padding-bottom: 0;
}

.fr-timeline li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mtf-surface);
    border: 2px solid var(--mtf-grey);
}

.fr-timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 1.1rem;
    bottom: 0.1rem;
    width: 2px;
    background: var(--mtf-light-grey-2);
}

.fr-timeline li.fr-tl-error::before { border-color: var(--mtf-danger); background: var(--mtf-danger-bg); }
.fr-timeline li.fr-tl-retry::before { border-color: var(--mtf-info); background: var(--mtf-info-bg); }
.fr-timeline li.fr-tl-done::before { border-color: var(--mtf-success); background: var(--mtf-success); }

.fr-tl-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--mtf-dark);
}

/* Altri casi dello stesso documento */
.fr-related {
    list-style: none;
    margin: 0;
    padding: var(--sp-1) 0;
    max-height: 320px;
    overflow-y: auto;
}

.fr-related-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    color: inherit;
    text-decoration: none;
}

.fr-related-item:hover {
    background: var(--mtf-light-grey);
}

.fr-related-item > .bi {
    color: var(--mtf-grey);
    font-size: var(--fs-xs);
}

.fr-related-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mtf-warning);
}

.fr-related-dot.done {
    background: var(--mtf-success);
}

.fr-related-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.fr-related-when {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--mtf-dark);
}

.fr-related-error {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
}

@media (max-width: 768px) {
    .fr-hero-error { padding: var(--sp-3); }
    .fr-hero-message { font-size: var(--fs-md); }
    .fr-hero-meta { grid-template-columns: 1fr 1fr; padding: var(--sp-3); }
    .fr-hero-meta > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .fr-data-head { padding: var(--sp-3) var(--sp-3) 0; }
    .fr-data-caption { padding-inline: var(--sp-3); }
    .fr-viewer { height: 60vh; }
}

/* Riquadro dell'errore in piccolo, nella pagina di reinvio */
.fr-hero-compact .fr-hero-error {
    border-bottom: 0;
    padding: var(--sp-3);
}

.fr-hero-compact .fr-hero-icon {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
}

.fr-hero-compact .fr-hero-message {
    font-size: var(--fs-md);
}

/* ============================================================
   Spiegazioni dei campi (InfoTip / FieldLabel) e form a sezioni
   ============================================================ */
.tip-anchor {
    position: relative;
}

.field-label {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
}

.field-label .form-label {
    margin-bottom: 0;
    font-weight: 600;
}

.info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mtf-grey);
    font-size: 0.9rem;
    line-height: 1;
    cursor: help;
}

.info-tip:hover,
.info-tip.open {
    color: var(--mtf-primary);
}

.info-tip:focus-visible {
    outline: 2px solid var(--mtf-primary-tint);
    outline-offset: 1px;
}

/* Sotto l'etichetta, larga al massimo quanto la colonna del campo: non esce dal riquadro
   né in alto nei dialoghi che scorrono. */
.info-tip-bubble {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    width: max-content;
    max-width: min(360px, 100%);
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--mtf-dark);
    color: var(--mtf-white);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    pointer-events: none;
}

/* Nelle intestazioni delle tabelle la tabella scorre e taglierebbe la nuvoletta: resta fissa
   nella finestra, alle coordinate che le dà placeHeaderTip (admin-interop.js) */
th .info-tip {
    margin-left: 0.15rem;
    vertical-align: middle;
}

th .info-tip-bubble {
    position: fixed;
    top: 0;
    left: 0;
    max-width: min(320px, calc(100vw - 32px));
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
}

.info-tip-bubble code {
    color: #b9f0c6;
    font-size: 0.85em;
}

.info-tip:hover + .info-tip-bubble,
.info-tip:focus-visible + .info-tip-bubble,
.info-tip.open + .info-tip-bubble {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.form-section + .form-section {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--mtf-light-grey-2);
}

.form-section-title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mtf-dark-grey);
}

.form-section-hint {
    margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--mtf-info);
}

.field-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--mtf-dark-grey);
}

.field-hint > i {
    margin-top: 0.1rem;
}

.field-hint-warning {
    color: var(--mtf-warning);
}

.segmented .btn {
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
}

/* Stessa altezza dei campi di testo, per allinearsi al selettore del tipo */
.switch-box {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0 var(--sp-3);
    border: 1px solid var(--mtf-light-grey-2);
    border-radius: var(--bs-border-radius);
    background: var(--mtf-primary-light);
    transition: background 0.15s ease;
}

.switch-box.is-off {
    background: var(--mtf-warning-bg);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--mtf-light-grey-2);
}

.dirty-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-sm);
    color: var(--mtf-warning);
}

.dirty-pill > i {
    font-size: 0.5rem;
}

.form-meta {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-xs);
    color: var(--mtf-grey);
}

@media (max-width: 768px) {
    .form-actions > .btn { flex: 1 1 auto; }
    .form-actions > .ms-auto { margin-left: 0 !important; }
    .dirty-pill { flex-basis: 100%; order: -1; }
}

@media (prefers-reduced-motion: reduce) {
    .info-tip-bubble,
    .switch-box { transition: none; }
}

/* Elenco clienti: i server del cliente uno accanto all'altro */
.customer-server {
    display: inline-flex;
    align-items: center;
    margin-right: var(--sp-3);
    white-space: nowrap;
}

/* ============================================================
   Log del servizio
   ============================================================ */
.log-field-instance { flex: 0 1 220px; }
.log-field-endpoint { flex: 0 1 160px; }
.log-field-folder { flex: 1 1 280px; }
.log-field-day { flex: 0 1 220px; }

.log-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
    align-self: flex-end;
}

.log-url {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--mtf-light-grey);
    max-width: 640px;
}

.log-filters {
    grid-template-columns: minmax(220px, 2fr) auto minmax(120px, 1fr) minmax(140px, 1fr) auto;
}

.log-table {
    font-size: var(--fs-sm);
}

.table-card .table-responsive .table.log-table > tbody > tr > td {
    padding: 0.4rem var(--sp-3);
    vertical-align: top;
}

.table-card .table-responsive .table.log-table > thead > tr > th {
    padding: var(--sp-2) var(--sp-3);
}

.log-time,
.log-device,
.log-user,
.log-source {
    white-space: nowrap;
    font-family: var(--mtf-font-mono);
    font-size: var(--fs-xs);
    color: var(--mtf-dark-grey);
}

.log-device { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.log-source { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }

.log-msg {
    min-width: 24rem;
    overflow-wrap: anywhere;
}

.log-more {
    margin-left: var(--sp-2);
    font-size: 0.7rem;
    color: var(--mtf-grey);
}

.log-pre {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--mtf-font-mono);
    font-size: var(--fs-xs);
}

.log-level {
    display: inline-block;
    min-width: 3.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

.log-level-error { background: var(--mtf-danger-bg); color: var(--mtf-danger); }
.log-level-warn { background: var(--mtf-warning-bg); color: #92400e; }
.log-level-info { background: var(--mtf-info-bg); color: var(--mtf-info); }
.log-level-debug { background: var(--mtf-light-grey); color: var(--mtf-grey); }

.log-row.log-error > td { background: color-mix(in srgb, var(--mtf-danger-bg) 45%, transparent); }
.log-row.log-warn > td { background: color-mix(in srgb, var(--mtf-warning-bg) 45%, transparent); }

@media (max-width: 768px) {
    .log-field-instance, .log-field-endpoint, .log-field-folder, .log-field-day { flex: 1 1 100%; }
    .log-actions { margin-left: 0; width: 100%; justify-content: space-between; }
    .log-filters { grid-template-columns: 1fr 1fr; }
    .log-filters .toolbar-search, .log-filters .segment { grid-column: 1 / -1; }
}

.log-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.log-msg:has(.log-more) {
    position: relative;
    padding-right: 1.75rem !important;
}

.log-msg .log-more {
    position: absolute;
    top: 0.55rem;
    right: 0.5rem;
    margin: 0;
}

/* Indirizzi dell'istanza (una riga per versione dell'API) */
.endpoint-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.endpoint-row .endpoint-version { flex: 1 1 10rem; min-width: 0; }
.endpoint-row .endpoint-full { flex: 1 1 100%; font-size: .8rem; color: var(--bs-secondary-color); word-break: break-all; margin-top: -.25rem; }