/*
 * TexHub - Unified Stylesheet
 * Material Design 3 (M3) Theme
 * User (Blue-Indigo) | Manager (Teal-Emerald) | Admin (Rose-Coral)
 */

/* ========================================
   M3 Design Tokens - Core
   ======================================== */

:root {
    /* M3 Reference Palette - Neutral */
    --md-ref-palette-neutral0: #000000;
    --md-ref-palette-neutral10: #1a1c1e;
    --md-ref-palette-neutral20: #2f3033;
    --md-ref-palette-neutral30: #46474a;
    --md-ref-palette-neutral40: #5e5e62;
    --md-ref-palette-neutral50: #76777a;
    --md-ref-palette-neutral60: #909094;
    --md-ref-palette-neutral70: #ababae;
    --md-ref-palette-neutral80: #c6c6c9;
    --md-ref-palette-neutral90: #e2e2e5;
    --md-ref-palette-neutral95: #f1f0f4;
    --md-ref-palette-neutral99: #fdfbff;
    --md-ref-palette-neutral100: #ffffff;

    /* M3 Surface Tones */
    --md-sys-color-surface: #fdfbff;
    --md-sys-color-surface-dim: #ddd9de;
    --md-sys-color-surface-bright: #fdfbff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f7f5f9;
    --md-sys-color-surface-container: #f1eff3;
    --md-sys-color-surface-container-high: #eceaee;
    --md-sys-color-surface-container-highest: #e6e4e8;

    /* M3 Common */
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #cac4cf;
    --md-sys-color-shadow: rgba(0, 0, 0, 0.15);
    --md-sys-color-scrim: rgba(0, 0, 0, 0.32);

    /* Status Colors */
    --md-sys-color-success: #1b873f;
    --md-sys-color-success-container: #c3f7d1;
    --md-sys-color-warning: #e5a000;
    --md-sys-color-warning-container: #fff0c7;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-info: #0061a4;
    --md-sys-color-info-container: #d1e4ff;

    /* Typography */
    --md-sys-typescale-headline-large: 600 2rem/2.5rem 'Inter', system-ui, sans-serif;
    --md-sys-typescale-headline-medium: 600 1.75rem/2.25rem 'Inter', system-ui, sans-serif;
    --md-sys-typescale-headline-small: 600 1.5rem/2rem 'Inter', system-ui, sans-serif;
    --md-sys-typescale-title-large: 500 1.375rem/1.75rem 'Inter', system-ui, sans-serif;
    --md-sys-typescale-title-medium: 500 1rem/1.5rem 'Inter', system-ui, sans-serif;
    --md-sys-typescale-title-small: 500 0.875rem/1.25rem 'Inter', system-ui, sans-serif;
    --md-sys-typescale-body-large: 400 1rem/1.5rem 'Inter', system-ui, sans-serif;
    --md-sys-typescale-body-medium: 400 0.875rem/1.25rem 'Inter', system-ui, sans-serif;
    --md-sys-typescale-body-small: 400 0.75rem/1rem 'Inter', system-ui, sans-serif;
    --md-sys-typescale-label-large: 500 0.875rem/1.25rem 'Inter', system-ui, sans-serif;
    --md-sys-typescale-label-medium: 500 0.75rem/1rem 'Inter', system-ui, sans-serif;
    --md-sys-typescale-label-small: 500 0.6875rem/1rem 'Inter', system-ui, sans-serif;

    /* Shape */
    --md-sys-shape-corner-none: 0;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;

    /* Elevation */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0 1px 3px 1px rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.04);
    --md-sys-elevation-level2: 0 2px 6px 2px rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.04);
    --md-sys-elevation-level3: 0 4px 8px 3px rgba(0,0,0,0.08), 0 1px 3px 0 rgba(0,0,0,0.04);
    --md-sys-elevation-level4: 0 6px 10px 4px rgba(0,0,0,0.08), 0 2px 3px 0 rgba(0,0,0,0.04);
    --md-sys-elevation-level5: 0 8px 12px 6px rgba(0,0,0,0.08), 0 4px 4px 0 rgba(0,0,0,0.04);

    /* Animation */
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

    /* Legacy compatibility aliases */
    --primary: var(--btn-primary, #4f46e5);
    --accent: var(--md-sys-color-tertiary, #06b6d4);
    --bg: var(--md-sys-color-surface, #fdfbff);
    --card: var(--md-sys-color-surface-container-low, #f7f5f9);
    --muted: var(--md-sys-color-outline, #79747e);
    --success: var(--md-sys-color-success, #1b873f);
    --danger: var(--md-sys-color-error, #ba1a1a);
}

/* ========================================
   THEME: User Level (Blue) - Default
   Colors from Intranet2020 "utente" theme
   ======================================== */
.theme-blue, :root {
    --md-sys-color-primary: #3498db;
    --md-sys-color-primary-hover: #278bce;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d7e9fc;
    --md-sys-color-on-primary-container: #1d6fa5;
    --md-sys-color-secondary: #2980b9;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #d7e9fc;
    --md-sys-color-on-secondary-container: #1d6fa5;
    --md-sys-color-tertiary: #1abc9c;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #d1f2eb;
    --md-sys-color-on-tertiary-container: #0e6251;

    --sidebar-bg: #1d6fa5;
    --sidebar-bg-hover: rgba(255, 255, 255, 0.08);
    --sidebar-bg-active: rgba(52, 152, 219, 0.24);
    --sidebar-text: rgba(255, 255, 255, 0.87);
    --sidebar-text-muted: rgba(255, 255, 255, 0.6);
    --sidebar-accent: #85c1e9;
    --sidebar-border: rgba(255, 255, 255, 0.08);

    --btn-primary: #3498db;
    --btn-primary-hover: #278bce;
    --btn-on-primary: #ffffff;
    --avatar-bg: #3498db;
    --avatar-text: #ffffff;
    --accent: #3498db;
    --accent-light: #aed6f1;
}

/* ========================================
   THEME: Direzione Level (Green)
   Colors from Intranet2020 "manager" theme
   ======================================== */
.theme-green {
    --md-sys-color-primary: #62bc55;
    --md-sys-color-primary-hover: #4ca83f;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d5f5d0;
    --md-sys-color-on-primary-container: #2d6b23;
    --md-sys-color-secondary: #70ca63;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #e5f2da;
    --md-sys-color-on-secondary-container: #3d8b3d;
    --md-sys-color-tertiary: #27ae60;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #d5f5e3;
    --md-sys-color-on-tertiary-container: #145a32;

    --sidebar-bg: #3d8b3d;
    --sidebar-bg-hover: rgba(255, 255, 255, 0.08);
    --sidebar-bg-active: rgba(98, 188, 85, 0.24);
    --sidebar-text: rgba(255, 255, 255, 0.87);
    --sidebar-text-muted: rgba(255, 255, 255, 0.6);
    --sidebar-accent: #a8e6a1;
    --sidebar-border: rgba(255, 255, 255, 0.08);

    --btn-primary: #62bc55;
    --btn-primary-hover: #4ca83f;
    --btn-on-primary: #ffffff;
    --avatar-bg: #62bc55;
    --avatar-text: #ffffff;
    --accent: #70ca63;
    --accent-light: #c8f0c4;
}

/* ========================================
   THEME: Admin Level (Red)
   Colors from Intranet2020 "administrator/administration" theme
   ======================================== */
.theme-red {
    --md-sys-color-primary: #e7604a;
    --md-sys-color-primary-hover: #d95944;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #fde8e4;
    --md-sys-color-on-primary-container: #b02913;
    --md-sys-color-secondary: #ec7063;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #fadbd8;
    --md-sys-color-on-secondary-container: #922b21;
    --md-sys-color-tertiary: #e67e22;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #fdebd0;
    --md-sys-color-on-tertiary-container: #7d3c0c;

    --sidebar-bg: #b02913;
    --sidebar-bg-hover: rgba(255, 255, 255, 0.08);
    --sidebar-bg-active: rgba(231, 96, 74, 0.24);
    --sidebar-text: rgba(255, 255, 255, 0.87);
    --sidebar-text-muted: rgba(255, 255, 255, 0.6);
    --sidebar-accent: #f5b7b1;
    --sidebar-border: rgba(255, 255, 255, 0.08);

    --btn-primary: #e7604a;
    --btn-primary-hover: #d95944;
    --btn-on-primary: #ffffff;
    --avatar-bg: #e7604a;
    --avatar-text: #ffffff;
    --accent: #e7604a;
    --accent-light: #f5b7b1;
}

/* ========================================
   Base Styles
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    background: var(--md-sys-color-surface);
    color: var(--md-ref-palette-neutral10);
    line-height: 1.5;
}

/* ========================================
   App Layout
   ======================================== */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--md-sys-color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--md-sys-color-surface-container-highest);
    border-top-color: var(--btn-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.app-layout {
    display: flex;
    min-height: 100vh;
    background: var(--md-sys-color-surface);
}

/* ========================================
   Sidebar
   ======================================== */
.sidebar,
.sidebar.app-sidebar,
.app-sidebar {
    width: 240px;
    min-width: 240px;
    background-color: var(--sidebar-bg) !important;
    background-image: none !important;
    display: flex;
    flex-direction: column;
    transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
                min-width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
    z-index: 100;
    flex-shrink: 0;
}

.sidebar.collapsed,
.app-layout.sidebar-collapsed .sidebar,
.app-layout.sidebar-collapsed .app-sidebar {
    width: 60px;
    min-width: 60px;
    overflow: hidden;
    background-color: var(--sidebar-bg) !important;
    background-image: none !important;
}

.sidebar-header {
    padding: 24px 20px;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
}

.sidebar.collapsed .sidebar-header,
.app-layout.sidebar-collapsed .sidebar-header {
    padding: 16px 8px;
    justify-content: center;
}

.logo {
    margin: 0 auto;
    padding: 0;
    width: auto;
    text-align: center;
}

.logo img {
    max-width: 100%;
    max-height: 72px;
    width: auto;
    height: auto;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.sidebar.collapsed .logo img,
.app-layout.sidebar-collapsed .logo img {
    height: 28px;
    width: 28px;
    object-fit: contain;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 8px;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 4px 8px;
    border-radius: var(--md-sys-shape-corner-full);
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: background var(--md-sys-motion-duration-short4), color var(--md-sys-motion-duration-short4);
    background: transparent;
    border: none;
    cursor: pointer;
    width: calc(100% - 16px);
    text-align: left;
}

.nav-item i {
    font-size: 1.2rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.nav-item:hover {
    background: rgba(255,255,255,0.10);
    color: #fff;
}

.nav-item.active {
    background: rgba(255,255,255,0.16);
    color: #fff;
}

/* Collapsed sidebar: hide text, show only icons */
.sidebar.collapsed .nav-text,
.app-layout.sidebar-collapsed .nav-text {
    display: none;
}

.sidebar.collapsed .nav-item,
.app-layout.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 12px;
    margin: 4px;
    width: calc(100% - 8px);
}

.sidebar.collapsed .sidebar-nav,
.app-layout.sidebar-collapsed .sidebar-nav {
    padding: 8px 4px;
}

/* ========================================
   Main Wrapper & Topbar
   ======================================== */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    margin-left: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-toggle {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container-low);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--md-sys-motion-duration-short4);
    z-index: 70;
    position: relative;
}

.menu-toggle:hover {
    background: var(--md-sys-color-surface-container-highest);
}

.menu-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.menu-toggle i {
    font-size: 1.5rem;
    color: var(--md-ref-palette-neutral10);
    pointer-events: none;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========================================
   User Menu (Critical z-index fix)
   ======================================== */
.user-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container-low);
    z-index: 1001;
    transition: background var(--md-sys-motion-duration-short4);
}

.user-menu:hover {
    background: var(--md-sys-color-surface-container-highest);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--md-sys-shape-corner-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--avatar-bg);
    color: var(--avatar-text);
}

.user-name {
    color: var(--md-ref-palette-neutral10);
    font: var(--md-sys-typescale-title-small);
}

.user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 240px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level3);
    z-index: 1002;
    overflow: hidden;
}

.user-dropdown .dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: transparent;
    border: none;
    text-decoration: none;
    color: var(--md-ref-palette-neutral10);
    cursor: pointer;
    transition: background var(--md-sys-motion-duration-short4);
}

.user-dropdown .dropdown-item:hover {
    background: var(--md-sys-color-surface-container-low);
}

.dropdown-divider {
    height: 1px;
    background: var(--md-sys-color-outline-variant);
    margin: 6px 0;
}

/* Language submenu */
.lang-dropdown-toggle {
    position: relative;
}

.lang-chevron {
    margin-left: auto;
    transition: transform var(--md-sys-motion-duration-short4);
}

.lang-chevron.rotated {
    transform: rotate(90deg);
}

.lang-submenu {
    background: var(--md-sys-color-surface-container-low);
    padding: 4px 0;
}

.lang-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 28px;
    background: transparent;
    border: none;
    color: var(--md-ref-palette-neutral10);
    cursor: pointer;
    transition: background var(--md-sys-motion-duration-short4);
}

.lang-option:hover {
    background: var(--md-sys-color-surface-container-highest);
}

.lang-option.active {
    color: var(--btn-primary);
}

.lang-flag {
    width: 20px;
    height: 15px;
    border-radius: 2px;
}

/* Overlay - must be under user-menu completely */
.overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 999;
}

/* ========================================
   Main Content
   ======================================== */
.main-content {
    flex: 1;
    padding: 12px;
    overflow: auto;
}

.content-container {
    margin: 0 auto;
}

/* ========================================
   Footer
   ======================================== */
.app-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-outline);
}

/* ========================================
   Home Page
   ======================================== */
.home-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.home-header {
    margin-bottom: 40px;
    text-align: left;
}

.home-header h1 {
    font: var(--md-sys-typescale-headline-large);
    color: var(--md-ref-palette-neutral10);
    margin: 0 0 12px 0;
}

.home-header h1 span {
    color: var(--btn-primary);
}

.home-header p {
    color: var(--md-sys-color-outline);
    margin: 0;
    font: var(--md-sys-typescale-body-large);
}

.loading-state,
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    gap: 20px;
    color: var(--md-sys-color-outline);
}

.empty-state i {
    font-size: 4rem;
    opacity: 0.5;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--md-sys-color-surface-container-highest);
    border-top-color: var(--btn-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ========================================
   Tiles Grid (Home Page)
   ======================================== */
.tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.tile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 24px 20px;
    background: var(--btn-primary);
    border-radius: var(--md-sys-shape-corner-extra-large);
    border: none;
    text-decoration: none;
    transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
    box-shadow: var(--md-sys-elevation-level2);
    min-height: 120px;
    text-align: left;
}

.tile:hover {
    background: var(--btn-primary-hover);
    box-shadow: var(--md-sys-elevation-level4);
    transform: translateY(-2px);
}

.tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--md-sys-shape-corner-medium);
    color: white;
    font-size: 1.35rem;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.tile:hover .tile-icon {
    transform: scale(1.06);
    background: rgba(255, 255, 255, 0.25);
}

.tile-content h3 {
    margin: 0 0 4px 0;
    font: 600 1.05rem/1.3rem 'Inter', system-ui, sans-serif;
    color: white;
    font-weight: 600;
    text-align: left;
}

.tile-content p {
    margin: 0;
    font: 400 0.92rem/1.25rem 'Inter', system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.tile-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* ========================================
   Tracking Supplier
   ======================================== */
.tracking-supplier-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tracking-header .page-subtitle {
    display: block;
    color: var(--md-sys-color-outline);
    font: var(--md-sys-typescale-body-medium);
}

.tracking-filters-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tracking-filters {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: var(--md-sys-elevation-level1);
    background: var(--md-sys-color-surface-container-low);
}

.tracking-content {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 20px;
    box-shadow: var(--md-sys-elevation-level1);
}

.stations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.station-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-radius: var(--md-sys-shape-corner-large);
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
    box-shadow: var(--md-sys-elevation-level1);
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.station-card:hover {
    box-shadow: var(--md-sys-elevation-level3);
    transform: translateY(-2px);
}

.station-card-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.station-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.station-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.station-supplier {
    font: 600 1rem/1.3rem 'Inter', system-ui, sans-serif;
    color: var(--md-ref-palette-neutral10);
}

.station-macrolevel {
    font: 500 0.95rem/1.2rem 'Inter', system-ui, sans-serif;
    color: var(--md-sys-color-outline);
}

.station-phase {
    font: 500 0.95rem/1.2rem 'Inter', system-ui, sans-serif;
    color: var(--btn-primary);
}

.station-workstation {
    margin-top: 4px;
    line-height: 1.4;
}

.station-workstation .workstation-group {
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 400;
}

.station-workstation .workstation-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    margin-left: 4px;
}

.station-phases {
    margin-top: 6px;
    color: var(--md-sys-color-outline);
    font-size: 0.85rem;
    line-height: 1.3;
}

/* ========================================
   Info Box (Item -> Work Instructions link)
   ======================================== */
.work-instructions-link-section {
    margin-top: 24px;
}

.info-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    border-left: 4px solid var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level1);
}

.info-box .info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    min-width: 56px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-medium);
    font-size: 1.8rem;
}

.info-box .info-content {
    flex: 1;
}

.info-box .info-content h4 {
    margin: 0 0 4px 0;
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-ref-palette-neutral10);
}

.info-box .info-content p {
    margin: 0;
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-outline);
}

.info-box .info-action {
    flex-shrink: 0;
}

/* ========================================
   Main Content - Station Page (detailed)
   ======================================== */
.station-details-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.station-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.station-details-header h1 {
    margin: 0;
    font: var(--md-sys-typescale-headline-medium);
    color: var(--md-ref-palette-neutral10);
}

.station-details-header .record-count {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-outline);
    background: var(--md-sys-color-surface-container-highest);
    padding: 6px 14px;
    border-radius: var(--md-sys-shape-corner-full);
}

.station-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.station-info-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 16px;
    box-shadow: var(--md-sys-elevation-level1);
}

.station-info-card h3 {
    margin: 0 0 8px 0;
    font: var(--md-sys-typescale-title-small);
    color: var(--md-ref-palette-neutral10);
}

.station-info-card p {
    margin: 0;
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-outline);
}

/* Expandable details section */
.station-details-content {
    background: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 16px;
    box-shadow: var(--md-sys-elevation-level1);
    margin-top: 8px;
}

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

.details-section li {
    padding: 8px 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.details-section li:last-child {
    border-bottom: none;
}

/* Toggle button for details */
.details-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container-low);
    transition: background var(--md-sys-motion-duration-short4);
}

.details-toggle:hover {
    background: var(--md-sys-color-surface-container-highest);
}

.details-toggle i {
    margin-left: 8px;
    transition: transform var(--md-sys-motion-duration-short4);
}

.details-toggle.expanded i {
    transform: rotate(180deg);
}

/* ========================================
   Page Headers
   ======================================== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.page-header h1,
.page-header h2 {
    margin: 0;
}

.page-header h1 {
    font: var(--md-sys-typescale-headline-medium);
    color: var(--md-ref-palette-neutral10);
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-header h2 {
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 600;
}

.page-header h1 i {
    color: var(--btn-primary);
    font-size: 1.5rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-import {
    height: 44px;
    padding: 0 20px;
}

.btn-info-modern {
    background: var(--md-sys-color-info) !important;
    color: white !important;
}

.btn-info-modern:hover {
    background: #0369a1 !important;
}

.last-refresh-label {
    font-size: 0.85rem;
    color: var(--md-sys-color-outline);
    white-space: nowrap;
}

.import-running-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--md-sys-color-info, #0284c7);
    background: var(--md-sys-color-info-container, #e0f2fe);
    padding: 6px 14px;
    border-radius: var(--md-sys-shape-corner-full, 9999px);
    white-space: nowrap;
    animation: pulse-opacity 2s ease-in-out infinite;
}

@keyframes pulse-opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.record-count {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-outline);
    background: var(--md-sys-color-surface-container-highest);
    padding: 6px 14px;
    border-radius: var(--md-sys-shape-corner-full);
}

/* ========================================
   Panels & Cards
   ======================================== */
.panel,
.card-modern,
.filters-card,
.grid-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level1);
    overflow: hidden;
}

.panel-body {
    padding: 20px;
}

/* ========================================
   Filters
   ======================================== */
.filters-card {
    padding: 20px 24px;
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.filter-item {
    flex: 1;
    min-width: 160px;
    max-width: 220px;
}

.filter-input {
    width: 100%;
}

.filter-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ========================================
   Buttons
   ======================================== */
.m3-button,
.btn-primary-modern,
.btn-add,
.btn-save,
.btn-action,
.btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    height: auto;
    padding: 12px 28px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    background: var(--btn-primary);
    color: var(--btn-on-primary);
    box-shadow: var(--md-sys-elevation-level1);
    text-decoration: none;
}

.m3-button:hover,
.btn-primary-modern:hover,
.btn-add:hover,
.btn-save:hover,
.btn-action:hover,
.btn-search:hover {
    background: var(--btn-primary-hover);
    box-shadow: var(--md-sys-elevation-level2);
    transform: translateY(-1px);
}

.btn-add {
    height: 44px;
    padding: 0 24px;
}

/* Outlined Button */
.m3-button-outlined,
.btn-outline-modern,
.btn-clear,
.btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    height: auto;
    padding: 12px 28px;
    background: transparent;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
    font-size: 0.95rem;
    color: var(--btn-primary);
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.m3-button-outlined:hover,
.btn-outline-modern:hover,
.btn-clear:hover,
.btn-cancel:hover {
    background: var(--md-sys-color-primary-container);
    border-color: var(--btn-primary);
}

.btn-clear {
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--md-sys-color-outline);
}

.btn-clear:hover {
    background: var(--md-sys-color-surface-container-highest);
    border-color: var(--md-ref-palette-neutral10);
    color: var(--md-ref-palette-neutral10);
}

/* Grid Links */
.grid-link {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    cursor: pointer;
}

.grid-link:hover {
    text-decoration: underline;
    color: var(--md-sys-color-primary);
}

/* Icon Buttons */
.btn-icon {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant, #49454f);
}

.btn-icon:hover {
    background: var(--md-sys-color-surface-container-highest);
}

.btn-edit {
    background: var(--md-sys-color-primary-container);
    color: var(--btn-primary);
}

.btn-edit:hover {
    background: var(--md-sys-color-secondary-container);
    color: var(--btn-primary-hover);
}

.btn-delete {
    background: transparent;
    color: var(--md-sys-color-outline);
}

.btn-delete:hover {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

/* Priority Cell */
.priority-cell {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.priority-cell .btn-priority {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant, #49454f);
    padding: 0;
    font-size: 0.85rem;
}

.priority-cell .btn-priority:hover:not(:disabled) {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.priority-cell .btn-priority:disabled {
    opacity: 0.3;
    cursor: default;
}

.priority-cell .priority-value {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
}

.priority-cell .priority-value.priority-high {
    color: var(--md-sys-color-primary);
    font-weight: 700;
}

/* Login Button */
.btn-login {
    width: 100%;
    height: 48px;
    padding: 16px 0;
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--btn-primary);
    color: var(--btn-on-primary);
    border: none;
    cursor: pointer;
    box-shadow: var(--md-sys-elevation-level1);
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.btn-login:hover:not(:disabled) {
    background: var(--btn-primary-hover);
    box-shadow: var(--md-sys-elevation-level2);
    transform: translateY(-2px);
}

.btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Action buttons for tracking */
.btn-start {
    background: var(--md-sys-color-success) !important;
    color: white !important;
}

.btn-start:hover {
    background: #15803d !important;
}

.btn-stop {
    background: var(--btn-primary) !important;
}

.btn-pause {
    background: var(--md-sys-color-warning) !important;
    color: #1e293b !important;
}

.btn-pause:hover {
    background: #ca8a04 !important;
}

.btn-resume {
    background: var(--md-sys-color-tertiary) !important;
}

/* ========================================
   Inputs & Form Controls
   ======================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"] {
    height: 56px;
    padding: 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    background: transparent;
    font: var(--md-sys-typescale-body-large);
    color: var(--md-ref-palette-neutral10);
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    outline: none;
}

input:hover {
    border-color: var(--md-ref-palette-neutral10);
}

input:focus {
    border-color: var(--btn-primary);
    border-width: 2px;
}

input::placeholder {
    color: var(--md-sys-color-outline);
}

input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--btn-primary);
}

.form-group {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #475569;
    font-size: 0.875rem;
}

.form-field {
    margin-bottom: 24px;
}

.form-field label {
    display: flex;
    align-items: center;
    gap: 10px;
    font: var(--md-sys-typescale-label-large);
    color: var(--md-ref-palette-neutral30);
    margin-bottom: 10px;
}

.form-field label i {
    color: var(--btn-primary);
    font-size: 1.125rem;
}

.form-field input {
    width: 100%;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.required { color: #dc2626; }
.text-danger { color: #dc2626; font-size: 0.8rem; display: block; margin-top: 4px; }
.text-required {
    color: #dc2626;
    font-size: 0.8rem;
    display: inline;
    margin-top: 4px;
}
.text-muted { color: #94a3b8; font-size: 0.9rem; font-style: italic; }

/* ========================================
   Alerts
   ======================================== */
.alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-body-medium);
    margin-bottom: 24px;
}

.alert-error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-error); border: none; }
.alert-success { background: var(--md-sys-color-success-container); color: var(--md-sys-color-success); }
.alert-warning { background: var(--md-sys-color-warning-container); color: #854d0e; }
.alert-info { background: var(--md-sys-color-info-container); color: var(--md-sys-color-info); }

/* ========================================
   Login Page
   ======================================== */
.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--sidebar-bg) 0%, #1e293b 50%, var(--md-ref-palette-neutral30) 100%);
    display: flex;
    flex-direction: column;
}

.login-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.login-logo {
    margin-bottom: 40px;
}

.login-logo img {
    height: 112px;
    transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.login-logo:hover img {
    transform: scale(1.05);
}

.login-card {
    background: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-extra-large);
    box-shadow: var(--md-sys-elevation-level5);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}

.login-header {
    padding: 40px 40px 32px;
    text-align: center;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.login-header h1 {
    font: var(--md-sys-typescale-headline-medium);
    color: var(--md-ref-palette-neutral10);
    margin: 0 0 12px 0;
}

.login-header p {
    color: var(--md-sys-color-outline);
    margin: 0;
    font: var(--md-sys-typescale-body-large);
}

.login-form {
    padding: 40px;
}

.login-links {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

.login-links a {
    color: var(--btn-primary);
    text-decoration: none;
    font: var(--md-sys-typescale-label-large);
    transition: color var(--md-sys-motion-duration-short4);
}

.login-links a:hover {
    color: var(--btn-primary-hover);
}

.forgot-link {
    display: block;
    text-align: right;
    margin-top: 16px;
    margin-bottom: 24px;
    font: var(--md-sys-typescale-body-medium);
    color: var(--btn-primary);
    text-decoration: none;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.forgot-link:hover {
    color: var(--btn-primary-hover);
    text-decoration: underline;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font: var(--md-sys-typescale-body-medium);
    color: var(--btn-primary);
    text-decoration: none;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.back-link:hover {
    color: var(--btn-primary-hover);
    text-decoration: underline;
}

.back-link i {
    font-size: 1.1rem;
    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.back-link:hover i {
    transform: translateX(-4px);
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--btn-primary);
    color: var(--btn-on-primary);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    box-shadow: var(--md-sys-elevation-level1);
}

.btn-back:hover {
    background: var(--btn-primary-hover);
    box-shadow: var(--md-sys-elevation-level2);
    transform: translateY(-1px);
}

.btn-back i {
    font-size: 1.2rem;
    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.btn-back:hover i {
    transform: translateX(-4px);
}

.login-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(10px);
    gap: 16px;
}

.login-footer span {
    color: rgba(255,255,255,0.75);
    font: var(--md-sys-typescale-body-small);
    flex: 1;
}

.login-footer img {
    height: 28px;
    max-width: 180px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity var(--md-sys-motion-duration-short4);
}

.login-footer img:hover {
    opacity: 1;
}

/* ========================================
   Telerik Grid Overrides
   ======================================== */
.k-grid.m3-grid,
.m3-grid {
    border: none !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    overflow: hidden;
}

.k-grid.m3-grid .k-grid-header,
.m3-grid .k-grid-header {
    background: var(--md-sys-color-surface-container) !important;
    border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
    width: 100% !important;
}

.k-grid.m3-grid .k-grid-header-wrap,
.m3-grid .k-grid-header-wrap {
    width: 100% !important;
}

.k-grid.m3-grid .k-grid-header th,
.m3-grid .k-grid-header th {
    font: var(--md-sys-typescale-title-small) !important;
    color: var(--md-sys-color-on-surface-variant, #49454f) !important;
    padding: 16px !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}

.k-grid.m3-grid .k-grid-content,
.m3-grid .k-grid-content {
    background: var(--md-sys-color-surface) !important;
}

.k-grid.m3-grid .k-grid-content td,
.m3-grid .k-grid-content td {
    font: var(--md-sys-typescale-body-medium) !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--md-sys-color-surface-container-high) !important;
    color: var(--md-ref-palette-neutral10) !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/*  FIXED, NON AUTO. Telerik disegna le intestazioni e le righe in DUE
    tabelle separate, e le tiene allineate solo se le colonne le decide il
    `colgroup` - cioe' con `table-layout: fixed`, che e' il suo valore. Qui
    c'era `auto !important` fin dal primo giorno: ognuna delle due tabelle si
    calcolava le larghezze dal suo contenuto, e le intestazioni finivano
    sopra la colonna sbagliata (le righe della trattativa: «Colore» sopra le
    quantita'), mentre una colonna senza larghezza dichiarata poteva
    stringersi fino a una lettera per riga - la descrizione dei campioni
    scritta in verticale, e una pagina alta quarantamila pixel.
    Con `fixed` una colonna senza Width prende lo spazio che le altre
    lasciano: le larghezze dichiarate devono lasciargliene.  */
.k-grid.m3-grid .k-grid-table,
.m3-grid .k-grid-table {
    width: 100% !important;
    table-layout: fixed !important;
}

.k-grid.m3-grid .k-grid-content tr:hover,
.m3-grid .k-grid-content tr:hover {
    background: var(--md-sys-color-surface-container) !important;
}

.k-grid.m3-grid .k-grid-content tr.k-selected,
.k-grid.m3-grid .k-grid-content tr.k-state-selected,
.m3-grid .k-grid-content tr.k-selected,
.m3-grid .k-grid-content tr.k-state-selected {
    background: var(--md-sys-color-primary-container) !important;
}

/* Pagination */
.k-grid.m3-grid .k-pager-wrap,
.m3-grid .k-pager-wrap {
    background: var(--md-sys-color-surface-container-low) !important;
    border-top: 1px solid var(--md-sys-color-outline-variant) !important;
    padding: 12px 16px !important;
}

.k-grid.m3-grid .k-pager-numbers .k-link,
.m3-grid .k-pager-numbers .k-link {
    border-radius: var(--md-sys-shape-corner-full) !important;
    min-width: 40px !important;
    height: 40px !important;
}

.k-grid.m3-grid .k-pager-numbers .k-link:hover,
.m3-grid .k-pager-numbers .k-link:hover {
    background: var(--md-sys-color-surface-container-highest) !important;
}

.k-grid.m3-grid .k-pager-numbers .k-selected,
.m3-grid .k-pager-numbers .k-selected {
    background: var(--btn-primary) !important;
    color: var(--btn-on-primary) !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
}

/* Grid with smaller text */
.grid-small-text .k-grid-header th,
.grid-small-text .k-grid-content td {
    font-size: 0.875rem !important;
    padding: 8px 12px !important;
}

.grid-small-text .k-grid-header th {
    font-weight: 500 !important;
}

/* Row highlighting for import status */
.k-grid .k-grid-content tr.row-new,
.k-grid .k-grid-content tr.row-new td {
    background-color: #d4edda !important; /* Verde chiaro */
}

.k-grid .k-grid-content tr.row-new:hover,
.k-grid .k-grid-content tr.row-new:hover td {
    background-color: #c3e6cb !important;
}

.k-grid .k-grid-content tr.row-modified,
.k-grid .k-grid-content tr.row-modified td {
    background-color: #fff3cd !important; /* Giallo chiaro */
}

.k-grid .k-grid-content tr.row-modified:hover,
.k-grid .k-grid-content tr.row-modified:hover td {
    background-color: #ffeeba !important;
}

/* Row highlighting for orders without active BOM */
.k-grid .k-grid-content tr.row-no-bom,
.k-grid .k-grid-content tr.row-no-bom td {
    background-color: #fce4ec !important; /* Rosa chiaro */
}

.k-grid .k-grid-content tr.row-no-bom:hover,
.k-grid .k-grid-content tr.row-no-bom:hover td {
    background-color: #f8bbd0 !important;
}

/* ========================================
   Telerik Inputs
   ======================================== */
.k-input,
.k-textbox,
.k-textarea,
.k-numerictextbox,
.k-autocomplete,
.k-dropdown,
.k-dropdownlist,
.k-combobox {
    border-radius: var(--md-sys-shape-corner-extra-small) !important;
    border-color: var(--md-sys-color-outline) !important;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard) !important;
    min-height: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
}

.user-password {
    height: 38px !important;
}

.k-dropdown-wrap,
.k-picker-wrap,
.k-dropdownlist .k-input-inner,
.k-dropdown .k-input-inner,
.k-combobox .k-input-inner {
    min-height: 42px !important;
    height: 42px !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    font-family: inherit !important;
    font-weight: 400 !important;
}

.k-combobox .k-input-button,
.k-combobox .k-clear-value {
    min-height: 42px !important;
    height: 42px !important;
    width: 28px !important;
    padding: 0 !important;
}

.k-combobox .k-input-button .k-icon,
.k-combobox .k-clear-value .k-icon,
.k-dropdownlist .k-input-button .k-icon,
.k-dropdownlist .k-clear-value .k-icon {
    font-size: 1rem !important;
}

.k-input:hover,
.k-textbox:hover,
.k-dropdown:hover,
.k-dropdownlist:hover,
.k-combobox:hover {
    border-color: var(--md-ref-palette-neutral10) !important;
}

.k-input:focus,
.k-input.k-focus,
.k-textbox:focus,
.k-dropdown.k-focus,
.k-dropdownlist.k-focus,
.k-combobox.k-focus {
    border-color: var(--btn-primary) !important;
    box-shadow: none !important;
}

/* Dropdown popup */
.k-popup,
.k-list-container {
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-level3) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

.k-list-item:hover,
.k-list-item.k-hover {
    background: var(--md-sys-color-surface-container-highest) !important;
}

.k-list-item.k-selected {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}

/* ========================================
   Telerik Buttons
   ======================================== */
.k-button {
    border-radius: var(--md-sys-shape-corner-full) !important;
    font: var(--md-sys-typescale-label-large) !important;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard) !important;
}

.k-button.k-primary,
.k-button.k-button-solid-primary {
    background: var(--btn-primary) !important;
    border-color: var(--btn-primary) !important;
    color: var(--btn-on-primary) !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
}

.k-button.k-primary:hover,
.k-button.k-button-solid-primary:hover {
    background: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}

/* ========================================
   Telerik Dialog
   ======================================== */
.k-dialog,
.k-window {
    border-radius: var(--md-sys-shape-corner-extra-large) !important;
    box-shadow: var(--md-sys-elevation-level5) !important;
    background: var(--md-sys-color-surface-container-high) !important;
}

.k-dialog-titlebar,
.k-window-titlebar {
    background: transparent !important;
    border: none !important;
    padding: 24px 24px 16px !important;
    font: var(--md-sys-typescale-headline-small) !important;
}

.k-dialog-content,
.k-window-content {
    padding: 0 24px !important;
}

.k-dialog-buttongroup,
.k-dialog-actions {
    padding: 24px !important;
    border: none !important;
    gap: 8px !important;
}

/* Notification */
.k-notification {
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-level3) !important;
}

/* ========================================
   Permissions & Checkbox Lists
   ======================================== */
.permissions-list,
.checkbox-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background: #f8fafc;
}

.permission-item,
.checkbox-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.permission-item:last-child,
.checkbox-item:last-child {
    border-bottom: none;
}

/* Supplier/phase lists for macro level */
.supplier-list, .phase-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow: auto;
    padding: 12px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.supplier-item, .phase-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--md-sys-shape-corner-small);
    font-size: 0.9rem;
    transition: background 200ms;
}

.supplier-item:hover, .phase-item:hover {
    background: var(--md-sys-color-surface-container-highest);
}

/* ========================================
   Tracking Page
   ======================================== */
.timer-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-extra-large);
    box-shadow: var(--md-sys-elevation-level1);
}

.timer-card.active {
    background: var(--md-sys-color-success-container);
    border: 2px solid var(--md-sys-color-success);
}

.timer-card.paused {
    background: var(--md-sys-color-warning-container);
    border: 2px solid var(--md-sys-color-warning);
}

.timer-value {
    font: var(--md-sys-typescale-headline-large);
    font-size: 3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.input-card,
.product-info-card,
.actions-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level1);
}

/* Delete confirmation dialog */
.delete-confirm-content {
    text-align: center;
    padding: 16px 0;
}

.warning-icon {
    font-size: 4rem;
    color: var(--md-sys-color-warning);
    margin-bottom: 20px;
}

.delete-confirm-content p {
    margin: 0;
    font: var(--md-sys-typescale-body-large);
    color: var(--md-ref-palette-neutral30);
}

.user-to-delete {
    margin-top: 12px !important;
    color: var(--md-ref-palette-neutral10) !important;
}

/* ========================================
   Breadcrumb
   ======================================== */
.breadcrumb {
    height: 48px;
    padding: 0 16px;
    background-color: var(--md-sys-color-surface-container);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    border-radius: var(--md-sys-shape-corner-small);
}

/* ========================================
   Utility Classes
   ======================================== */

.wrap-lines {
    white-space: pre-line;
}

.m3-grid .btn-icon {
    margin: 0 auto;
}
.mb-3 { margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.text-center { text-align: center; }
.me-1 { margin-right: 0.25rem; }
.ms-2 { margin-left: 0.5rem; }

.m3-surface { background: var(--md-sys-color-surface); }
.m3-surface-container { background: var(--md-sys-color-surface-container); }
.m3-text-primary { color: var(--btn-primary); }
.m3-text-error { color: var(--md-sys-color-error); }
.m3-text-success { color: var(--md-sys-color-success); }

.m3-elevation-1 { box-shadow: var(--md-sys-elevation-level1); }
.m3-elevation-2 { box-shadow: var(--md-sys-elevation-level2); }
.m3-elevation-3 { box-shadow: var(--md-sys-elevation-level3); }

.m3-rounded-small { border-radius: var(--md-sys-shape-corner-small); }
.m3-rounded-medium { border-radius: var(--md-sys-shape-corner-medium); }
.m3-rounded-large { border-radius: var(--md-sys-shape-corner-large); }
.m3-rounded-full { border-radius: var(--md-sys-shape-corner-full); }

/* ========================================
   Scrollbar
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
}

/* Selection */
::selection {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

/* ========================================
   Tiles override (ensure not overridden by button styles)
   ======================================== */
.tiles-grid .tile,
.tiles-grid .tile-modern {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 22px 18px !important;
    background: var(--btn-primary) !important;
    border-radius: 20px !important;
    border: none !important;
    text-decoration: none !important;
    transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized) !important;
    box-shadow: var(--md-sys-elevation-level2) !important;
    min-height: 120px !important;
    text-align: left !important;
}

.tiles-grid .tile:hover,
.tiles-grid .tile-modern:hover {
    background: var(--btn-primary-hover) !important;
    box-shadow: var(--md-sys-elevation-level4) !important;
    transform: translateY(-1px) !important;
}

.tiles-grid .tile .tile-icon,
.tiles-grid .tile-modern .tile-icon,
.tiles-grid .tile .tile-icon-modern,
.tiles-grid .tile-modern .tile-icon-modern {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: white !important;
    font-size: 2rem !important;
}

.tiles-grid .tile .tile-content,
.tiles-grid .tile-modern .tile-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.tiles-grid .tile .tile-content h3,
.tiles-grid .tile-modern .tile-content h3 {
    margin: 0 0 4px 0 !important;
    font: 600 1.32rem/1.58rem 'Inter', system-ui, sans-serif !important;
    color: white !important;
    text-align: left !important;
}

.tiles-grid .tile .tile-content p,
.tiles-grid .tile-modern .tile-content p {
    margin: 0 !important;
    font: 400 1.05rem/1.40rem 'Inter', system-ui, sans-serif !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: left !important;
}

/* Tile disabilitato (modulo non ancora attivo) */
.tiles-grid .tile-disabled {
    background: #6b7280 !important;
    border-color: #4b5563 !important;
    opacity: 0.65;
    cursor: default;
    pointer-events: none;
    position: relative;
}

.tiles-grid .tile-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

.tiles-grid .tile-disabled .tile-icon-modern {
    background: rgba(255, 255, 255, 0.15) !important;
}

.tiles-grid .tile-disabled .tile-content h3,
.tiles-grid .tile-disabled .tile-content p {
    color: rgba(255, 255, 255, 0.7) !important;
}

.tile-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #f59e0b;
    color: #1f2937;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 992px) {
    .filter-item {
        min-width: 140px;
        max-width: none;
        flex: 1 1 calc(50% - 16px);
    }

    .filter-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }
}

@media (max-width: 768px) {
    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 576px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .filter-item {
        flex: 1 1 100%;
        max-width: none;
    }

    .btn-add {
        width: 100%;
        justify-content: center;
    }

    .filters-card {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .login-wrapper {
        padding: 32px 16px;
    }

    .login-logo img {
        height: 44px;
    }

    .login-footer {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .login-links {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

/* ========================================
   Custom Notifications - Snackbar Style
   ======================================== */
.custom-notification .k-notification {
    min-width: 320px;
    max-width: 568px;
    padding: 16px 24px !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-level4) !important;
    border: none !important;
    font: var(--md-sys-typescale-body-large) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.custom-notification .k-notification-content {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    padding: 0 !important;
}

/* Success notification */
.custom-notification .k-notification-success {
    background: var(--md-sys-color-success) !important;
    color: white !important;
    border-left: 4px solid #15803d !important;
}

.custom-notification .k-notification-success::before {
    content: "\f058";
    font-family: "bootstrap-icons";
    font-size: 1.5rem;
    margin-right: 8px;
}

/* Error notification */
.custom-notification .k-notification-error {
    background: var(--md-sys-color-error) !important;
    color: white !important;
    border-left: 4px solid #991b1b !important;
}

.custom-notification .k-notification-error::before {
    content: "\f057";
    font-family: "bootstrap-icons";
    font-size: 1.5rem;
    margin-right: 8px;
}

/* Warning notification */
.custom-notification .k-notification-warning {
    background: var(--md-sys-color-warning) !important;
    color: #1e293b !important;
    border-left: 4px solid #ca8a04 !important;
}

.custom-notification .k-notification-warning::before {
    content: "\f071";
    font-family: "bootstrap-icons";
    font-size: 1.5rem;
    margin-right: 8px;
}

/* Info notification */
.custom-notification .k-notification-info {
    background: var(--md-sys-color-info) !important;
    color: white !important;
    border-left: 4px solid #0369a1 !important;
}

.custom-notification .k-notification-info::before {
    content: "\f05a";
    font-family: "bootstrap-icons";
    font-size: 1.5rem;
    margin-right: 8px;
}

/* Animation for notification appearance */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.custom-notification .k-notification {
    animation: slideInRight 0.3s var(--md-sys-motion-easing-emphasized) !important;
}

.custom-notification .k-notification.k-notification-hide {
    animation: slideOutRight 0.2s var(--md-sys-motion-easing-standard) !important;
}

/* ========================================
   Tracking Supplier - Station Cards
   ======================================== */
.station-workstation {
    margin-top: 4px;
    line-height: 1.4;
}

.station-workstation .workstation-group {
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 400;
}

.station-workstation .workstation-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    margin-left: 4px;
}

.station-phases {
    margin-top: 6px;
    color: var(--md-sys-color-outline);
    font-size: 0.85rem;
    line-height: 1.3;
}

/* ========================================
   Info Box (Item -> Work Instructions link)
   ======================================== */
.work-instructions-link-section {
    margin-top: 24px;
}

.info-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    border-left: 4px solid var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level1);
}

.info-box .info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    min-width: 56px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-medium);
    font-size: 1.8rem;
}

.info-box .info-content {
    flex: 1;
}

.info-box .info-content h4 {
    margin: 0 0 4px 0;
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-ref-palette-neutral10);
}

.info-box .info-content p {
    margin: 0;
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-outline);
}

.info-box .info-action {
    flex-shrink: 0;
}

/* ========================================
   Main Content - Station Page (detailed)
   ======================================== */
.station-details-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.station-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.station-details-header h1 {
    margin: 0;
    font: var(--md-sys-typescale-headline-medium);
    color: var(--md-ref-palette-neutral10);
}

.station-details-header .record-count {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-outline);
    background: var(--md-sys-color-surface-container-highest);
    padding: 6px 14px;
    border-radius: var(--md-sys-shape-corner-full);
}

.station-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.station-info-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 16px;
    box-shadow: var(--md-sys-elevation-level1);
}

.station-info-card h3 {
    margin: 0 0 8px 0;
    font: var(--md-sys-typescale-title-small);
    color: var(--md-ref-palette-neutral10);
}

.station-info-card p {
    margin: 0;
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-outline);
}

/* Expandable details section */
.station-details-content {
    background: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 16px;
    box-shadow: var(--md-sys-elevation-level1);
    margin-top: 8px;
}

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

.details-section li {
    padding: 8px 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.details-section li:last-child {
    border-bottom: none;
}

/* Toggle button for details */
.details-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container-low);
    transition: background var(--md-sys-motion-duration-short4);
}

.details-toggle:hover {
    background: var(--md-sys-color-surface-container-highest);
}

.details-toggle i {
    margin-left: 8px;
    transition: transform var(--md-sys-motion-duration-short4);
}

.details-toggle.expanded i {
    transform: rotate(180deg);
}

/* Button Delete BOM - Circolare e pi� largo */
.btn-delete-bom {
    min-width: 45px;
    width: 45px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-delete-bom i {
        font-size: 18px;
    }

/* ========================================
   BOM ACTIVE BADGE
   ======================================== */
.badge-bom-active {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.78rem;
    background-color: #e8f5e9;
    color: #2e7d32;
    white-space: nowrap;
}

/* ========================================
   ORDER STATUS BADGES
   ======================================== */
.badge-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
}

.badge-status.status-todo {
    background-color: #e3f2fd;
    color: #1565c0;
}

.badge-status.status-inprogress {
    background-color: #ff9800;
    color: #fff;
}

.badge-status.status-completed {
    background-color: #43a047;
    color: #fff;
}

.badge-status.status-forceclosed {
    background-color: #ef6c00;
    color: #fff;
}

/* ========================================
   ORDER VIEW BUTTON (eye icon)
   ======================================== */
.btn-icon.btn-view {
    color: #1976d2;
}

.btn-icon.btn-view:hover {
    color: #0d47a1;
    background-color: #e3f2fd;
}

/* ========================================
   PRODUCTS GRID - Row Colors by Status
   ======================================== */

/* In Lavorazione - Celeste chiaro */
.products-grid tbody tr.row-product-working {
    background-color: #e1f5fe !important;
}

.products-grid tbody tr.row-product-working:hover {
    background-color: #b3e5fc !important;
}

/* Prossima Stazione (completato su una WS, deve andare su un'altra) - Lilla */
.products-grid tbody tr.row-product-next-ws {
    background-color: #ede7f6 !important;
}

.products-grid tbody tr.row-product-next-ws:hover {
    background-color: #d1c4e9 !important;
}

/* In Pausa - Giallo */
.products-grid tbody tr.row-product-paused {
    background-color: #fff9c4 !important;
}

.products-grid tbody tr.row-product-paused:hover {
    background-color: #fff59d !important;
}

/* Errore - Rosso */
.products-grid tbody tr.row-product-error {
    background-color: #ffcdd2 !important;
}

.products-grid tbody tr.row-product-error:hover {
    background-color: #ef9a9a !important;
}

/* Completato - Verde */
.products-grid tbody tr.row-product-completed {
    background-color: #c8e6c9 !important;
}

.products-grid tbody tr.row-product-completed:hover {
    background-color: #a5d6a7 !important;
}

/* ========================================
   PRODUCT STATUS BADGES
   ======================================== */
.badge-product-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}

.badge-product-status.badge-todo {
    background-color: #eceff1;
    color: #546e7a;
}

.badge-product-status.badge-working {
    background-color: #039be5;
    color: #fff;
}

.badge-product-status.badge-next-ws {
    background-color: #7e57c2;
    color: #fff;
}

.badge-product-status.badge-paused {
    background-color: #fbc02d;
    color: #333;
}

.badge-product-status.badge-error {
    background-color: #e53935;
    color: #fff;
}

.badge-product-status.badge-completed {
    background-color: #43a047;
    color: #fff;
}

/* ========================================
   SERIAL NUMBER CLICKABLE
   ======================================== */
.serial-clickable {
    cursor: pointer;
    transition: color 0.2s;
}

.serial-clickable:hover {
    color: #1976d2;
    text-decoration: underline;
}

.serial-clickable:hover i {
    opacity: 1 !important;
}

/* ========================================
   SERIAL NUMBER EDIT DIALOG
   ======================================== */
.serial-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    padding: 0;
    width: 400px;
    max-width: 90vw;
    z-index: 1001;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.serial-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.serial-dialog-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.serial-dialog-body {
    padding: 20px;
}

.serial-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    backdrop-filter: blur(2px);
}

/* ========================================
   PRODUCT NOTES EDIT DIALOG
   ======================================== */
.notes-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    padding: 0;
    width: 600px;
    max-width: 90vw;
    z-index: 1001;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.notes-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.notes-dialog-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.notes-dialog-body {
    padding: 20px;
}

.notes-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
}

/* ========================================
   PRODUCT COMPONENTS DIALOG
   ======================================== */
.components-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    padding: 0;
    width: 1000px;
    max-width: 95vw;
    max-height: 90vh;
    z-index: 1001;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.components-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.components-dialog-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.components-dialog-close {
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
}

.components-dialog-close:hover {
    background: #f0f0f0;
    color: #333;
}

.components-dialog-body {
    padding: 16px 20px;
    overflow-y: auto;
}

.components-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
}

.components-dialog .cf-control {
    min-height: 56px;
}

/* Annotazioni */
.cf-annotations {
    margin-bottom: 16px;
}

.cf-annotations label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 4px;
}

.cf-annotations-box {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 10px;
    background: #f8f9fa;
    min-height: 38px;
    white-space: pre-wrap;
}

/* Filtri */
.cf-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
}

.cf-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 220px;
    min-width: 180px;
}

.cf-item-narrow {
    flex: 0 1 160px;
    min-width: 140px;
}

.cf-item label {
    font-size: 0.78rem;
    font-weight: 600;

/* Shipments grid - compact table like Intranet2020 */
.shipments-grid .k-grid-table {
    font-size: 0.78rem;
}
.shipments-grid .k-grid-table th {
    font-size: 0.72rem;
    padding: 4px 6px;
    white-space: nowrap;
}
.shipments-grid .k-grid-table td {
    padding: 2px 6px;
    white-space: nowrap;
}
.shipments-grid .k-checkbox {
    width: 16px !important;
    height: 16px !important;
}
    color: #6c757d;
    margin-bottom: 4px;
}

.cf-control {
    height: 38px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
}

.cf-control:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.15);
}

.cf-clear {
    height: 56px;
    width: 56px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    color: #6c757d;
    cursor: pointer;
}

.cf-clear i {
    font-size: 1.25rem;
}

.cf-clear:hover {
    background: #f0f0f0;
    color: #dc3545;
}

/* =============================================
   SEZIONE TESORERIA
   ============================================= */

/* Tabella Cash Flow */
.cf-table {
    border-collapse: collapse;
    min-width: 1200px;
    width: 100%;
    font-size: 0.85rem;
}
.cf-table th, .cf-table td {
    padding: 6px 10px;
    white-space: nowrap;
    text-align: right;
}
.cf-table th:first-child, .cf-table td:first-child {
    text-align: left;
}
.cf-header-months th {
    background: var(--md-sys-color-primary);
    color: #000000;
    text-align: center;
    font-weight: 600;
}
.cf-header-decades th {
    background: var(--md-sys-color-surface-container-high);
    text-align: center;
    font-size: 0.8rem;
}
.cf-row-total {
    background: var(--md-sys-color-primary-container);
    font-weight: 700;
}
.cf-row-saldo {
    background: var(--md-sys-color-tertiary-container);
    font-weight: 700;
}
.cf-row-group-header {
    background: var(--md-sys-color-surface-container-high);
    font-weight: 600;
}
.cf-row-detail:nth-child(even) {
    background: var(--md-sys-color-surface-container-low);
}

/* Drillable rows (bank breakdown drill-down) */
.cf-row-drillable {
    cursor: pointer;
}
.cf-row-drillable:hover {
    filter: brightness(0.95);
}
.cf-row-drillable .cf-label-col {
    cursor: pointer;
}
/* Bank breakdown sub-rows */
.cf-row-bank-detail {
    background: #F8FAFC;
}
.cf-row-bank-detail:nth-child(even) {
    background: #F1F5F9;
}
.cf-row-bank-detail .cf-label-col {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--md-sys-color-on-surface-variant);
}
.cf-cell-positive {
    color: #1A5C1A;
}
.cf-cell-negative {
    color: #C8102E;
}
.cf-cell-zero {
    color: var(--md-sys-color-outline);
}

/* Filtri tesoreria */
.filter-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    align-items: center;
}
.filter-check {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 0.875rem;
    cursor: pointer;
}
.filter-disabled {
    opacity: 0.38;
}
.filter-date-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.filter-action {
    justify-self: end;
}
.filter-checks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Alternating month columns - per row type */
/* Normal rows */
.cf-row-detail .cf-month-even,
.cf-row-group-header .cf-month-even {
    background-color: #FFFFFF;
}
.cf-row-detail .cf-month-odd,
.cf-row-group-header .cf-month-odd {
    background-color: #F1F5F9;
}
/* Total rows */
.cf-row-total .cf-month-even {
    background-color: #DBEAFE;
}
.cf-row-total .cf-month-odd {
    background-color: #BFDBFE;
}
.cf-scroll-container .cf-table .cf-row-total .cf-scaduto-cell {
    background: #DBEAFE;
}
.cf-scroll-container .cf-table .cf-row-total .cf-label-col {
    background: #DBEAFE;
}
/* Saldo rows */
.cf-row-saldo .cf-month-even {
    background-color: #DBEAFE;
}
.cf-row-saldo .cf-month-odd {
    background-color: #BFDBFE;
}
.cf-scroll-container .cf-table .cf-row-saldo .cf-scaduto-cell {
    background: #DBEAFE;
}
.cf-scroll-container .cf-table .cf-row-saldo .cf-label-col {
    background: #DBEAFE;
}
/* Month header cells (alternating) */
.cf-header-months .cf-month-even,
.cf-header-decades .cf-month-even {
    background-color: #E2E8F0;
}
.cf-header-months .cf-month-odd,
.cf-header-decades .cf-month-odd {
    background-color: #CBD5E1;
}
/* Scroll container with sticky header/footer */
.cf-scroll-container {
    max-height: 68vh;
    overflow: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: #FFFFFF;
}
.cf-scroll-container .cf-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}
.cf-scroll-container .cf-table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 3;
}
/* Make sure label column also sticks */
.cf-scroll-container .cf-table .cf-label-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #FFFFFF;
}
.cf-scroll-container .cf-table thead .cf-label-col {
    z-index: 4;
}
.cf-scroll-container .cf-table tfoot .cf-label-col {
    z-index: 4;
    font-weight: 700;
}

/* Table section label */
.cf-table-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--md-sys-color-primary);
    padding: 8px 0 4px 0;
    margin-top: 8px;
}
.cf-table thead .cf-month-even,
.cf-table thead .cf-month-odd {
    text-align: center;
}
/* Scaduto and label columns */
.cf-table .cf-scaduto-hdr {
    background: #FFF7ED;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
}
.cf-table .cf-scaduto-cell {
    background: #FFF7ED;
}
.cf-table .cf-total-hdr {
    background: #E0E7FF;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
}
.cf-table .cf-total-cell {
    background: #EEF2FF;
    font-weight: 600;
}
.cf-table .cf-label-col {
    min-width: 260px;
    position: sticky;
    left: 0;
    z-index: 1;
    background: #FFFFFF;
    border-right: 2px solid var(--md-sys-color-outline-variant);
    text-align: left;
    font-weight: 500;
}
.cf-label-indented {
    padding-left: 20px !important;
}
.cf-hdr-label {
    text-align: left;
    font-weight: 600;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.cf-table .cf-subhdr {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--md-sys-color-on-surface);
}

/* Righe spostate (manovra) */
.row-spostata {
    background-color: #FEF3C7 !important;
}

/* Split layout: Partite Aperte (left) + Ordini Aperti (right) */
.treasury-split {
    display: flex;
    gap: 12px;
    width: 100%;
}
.treasury-split-left,
.treasury-split-right {
    flex: 1;
    min-width: 0;
}
.treasury-split-left .cf-scroll-container,
.treasury-split-right .cf-scroll-container {
    max-height: 56vh;
}
.treasury-split-left .filter-row,
.treasury-split-right .filter-row {
    grid-template-columns: repeat(4, 1fr);
}

/* Treasury tabs: tighter filter card padding */
.treasury-filters {
    padding: 12px 24px !important;
}

/* Tab navigation */
.treasury-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    padding-bottom: 0;
}
.treasury-tab {
    padding: 8px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.treasury-tab:hover {
    color: var(--md-sys-color-on-surface);
}
.treasury-tab.active {
    color: var(--md-sys-color-primary);
    border-bottom-color: var(--md-sys-color-primary);
}

/* Manovra panel */
.manovra-panel {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: 8px;
    margin-bottom: 12px;
}
.manovra-actions {
    display: flex;
    gap: 8px;
}

/* Compact button for filter row */
.btn-small-nowrap {
    white-space: nowrap !important;
    flex-shrink: 0;
}

/* Small round icon button (e.g. "latest elaboration" reset) */
.btn-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--md-sys-color-on-surface);
    font-size: 0.85rem;
    transition: background 0.15s;
}
.btn-icon-circle:hover {
    background: var(--md-sys-color-surface-container-highest);
}

/* Drag & Drop move cell highlight */
.cf-cell-moved-from {
    background-color: #DBEAFE !important;
    outline: 2px dashed #3B82F6 !important;
    outline-offset: -2px;
}
.cf-cell-moved-fwd {
    background-color: #DCFCE7 !important;
    outline: 2px dashed #22C55E !important;
    outline-offset: -2px;
}
.cf-cell-moved-bwd {
    background-color: #DBEAFE !important;
    outline: 2px dashed #3B82F6 !important;
    outline-offset: -2px;
}
.cf-cell-moved-to {
    background-color: #DCFCE7 !important;
    outline: 2px dashed #22C55E !important;
    outline-offset: -2px;
}

/* Selected source cell for click-to-move */
.cf-cell-selected {
    outline: 3px solid var(--md-sys-color-primary) !important;
    outline-offset: -3px;
}

/* Today's loaded maneuvers: blue border + light bg */
.cf-cell-maneuver-today {
    box-shadow: inset 0 0 0 2px #1E40AF !important;
    background-color: #EFF6FF !important;
}
.cf-cell-maneuver-from {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Manual Data dialog */
.manual-data-dialog .k-window-content {
    max-height: 70vh;
    overflow-y: auto;
}

/* Cell detail popup
   La finestra e' larga quanto lo schermo concede (fino a 1600px): sette
   colonne con dentro ragioni sociali intere non stanno in 900px, e quello che
   restava fuori era la colonna di destra - tagliata dal bordo, senza che niente
   lo dicesse. Chi legge questa finestra sta controllando da dove viene un
   numero, quindi le righe vanno lette per intero.

   Le barre di scorrimento sono dichiarate spesse apposta: quelle di sistema
   sono sottili e quella orizzontale, in fondo a un riquadro, si prende solo
   centrando due o tre pixel. */
.cell-detail-dialog .k-window-content {
    max-height: 82vh;
    overflow: hidden;
    /*  IL RESPIRO SOTTO L'ULTIMA RIGA, E PERCHE' NON C'ERA.

        Questa regola c'era gia' e non ha mai avuto effetto: piu' in alto nel
        foglio, fra i ritocchi Material su Telerik, `.k-window-content` porta
        `padding: 0 24px !important` - e `!important` batte la specificita',
        quindi il padding di sotto restava ZERO e l'ultima riga usciva a filo
        del bordo arrotondato. Non si vedeva rileggendo questo blocco, che e'
        scritto giusto: si vede solo cercando chi altro tocca la stessa
        proprieta'. E' la stessa forma delle altre trappole di questo
        progetto - la regola sta dove il guasto si vede, la causa sta
        altrove.  */
    padding: 10px 14px 28px !important;
}
.cell-detail-scroll {
    max-height: 70vh;
    overflow: auto;
    /* Firefox: le sue due sole misure, e questa e' la piu' larga. */
    scrollbar-width: auto;
    scrollbar-color: var(--md-sys-color-outline) var(--md-sys-color-surface-container);
}
.cell-detail-scroll::-webkit-scrollbar {
    width: 16px;
    height: 18px;
}
.cell-detail-scroll::-webkit-scrollbar-track {
    background: var(--md-sys-color-surface-container);
    border-radius: 9px;
}
.cell-detail-scroll::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline);
    border-radius: 9px;
    /* Il bordo trasparente col ritaglio sul contenuto lascia il cursore
       spesso ma staccato dal binario: senza, tocca i bordi e sembra incastrato. */
    border: 4px solid transparent;
    background-clip: content-box;
}
.cell-detail-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-on-surface-variant);
    border: 3px solid transparent;
    background-clip: content-box;
}
.cell-detail-scroll::-webkit-scrollbar-corner {
    background: var(--md-sys-color-surface-container);
}
.cf-table.cell-detail-table {
    min-width: 0;
    font-size: 0.86rem;
}
.cf-table.cell-detail-table thead th {
    background: var(--md-sys-color-surface-container-high);
    font-weight: 600;
    font-size: 0.8rem;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 14px;
    white-space: nowrap;
}
.cf-table.cell-detail-table tbody tr:nth-child(even) {
    background: var(--md-sys-color-surface-container-low);
}
.cf-table.cell-detail-table td {
    padding: 8px 14px;
}
/* La ragione sociale e' l'unica colonna che puo' essere lunga: le si lascia
   mandare a capo invece di allargare la tabella oltre la finestra, cosi' le
   colonne di destra restano visibili senza scorrere. */
.cf-table.cell-detail-table td:first-child {
    white-space: normal;
    min-width: 260px;
}
.cf-table.cell-detail-table td:not(:first-child) {
    white-space: nowrap;
}
/* L'ultima riga non deve toccare il bordo della finestra. */
.cf-table.cell-detail-table tbody tr:last-child td {
    padding-bottom: 14px;
}



/* ========================================
   Virtual CFO
   Portato dal prodotto TexHub. Le sette schermate sono dense: la gerarchia e'
   sempre la stessa - verdetto in una riga, tessere, il grafico piu' grande,
   i confronti affiancati, le eccezioni in tabella.

   I colori e i raggi arrivano dai token di questa installazione, non da quelli
   del prodotto: gli alias qui sotto sono il ponte, e passando da --btn-primary
   seguono i tre temi per ruolo (blu utente, verde direzione, rosso admin).

   La barra delle sezioni non e' qui: si usano .cfo-tabs / .cfo-tab.active di
   cfo-dashboard.css, gli stessi della tesoreria.
   ======================================== */

:root {
    --ink: var(--md-ref-palette-neutral10);
    --ink-2: var(--md-ref-palette-neutral40);
    --ink-3: var(--md-ref-palette-neutral50);
    --line: var(--md-sys-color-outline-variant);
    --line-soft: var(--md-ref-palette-neutral90);
    --card-bg: var(--md-sys-color-surface);
    --accent-strong: var(--btn-primary);
    --accent-deep: var(--btn-primary-hover);
    --accent-soft: var(--md-sys-color-primary-container);
    --r: var(--md-sys-shape-corner-small);
}

.cfo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

/* --- intestazione con data del dato --- */
.cfo-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cfo-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--ink);
}

.cfo-head .cfo-asof {
    font: var(--md-sys-typescale-label-medium);
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --- riga del verdetto --- */
.cfo-verdict {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-strong);
    border-radius: 6px;
    background: var(--card-bg);
    font: var(--md-sys-typescale-body-medium);
    color: var(--ink);
    line-height: 1.5;
}

.cfo-verdict.is-bad { border-left-color: var(--md-sys-color-error); }
.cfo-verdict.is-warning { border-left-color: var(--md-sys-color-warning); }
.cfo-verdict > i { font-size: 1.05rem; color: var(--accent-deep); margin-top: 1px; }
.cfo-verdict.is-bad > i { color: var(--md-sys-color-error); }
.cfo-verdict.is-warning > i { color: var(--md-sys-color-warning); }
.cfo-verdict b { font-weight: 650; }

/* --- tessere --- */
.cfo-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.cfo-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 15px 14px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s, box-shadow .12s;
    overflow: hidden;
}

a.cfo-tile:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }

/* La salute e' una barra sottile in alto: non colora tutto il riquadro. */
.cfo-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--line);
}

.cfo-tile.h-good::before { background: var(--md-sys-color-success); }
.cfo-tile.h-warning::before { background: var(--md-sys-color-warning); }
.cfo-tile.h-bad::before { background: var(--md-sys-color-error); }

.cfo-tile-label {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfo-tile-value {
    font-size: 1.4rem;
    font-weight: 650;
    letter-spacing: -.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.cfo-tile-value.is-negative { color: var(--md-sys-color-error); }

.cfo-tile-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-3);
    min-height: 16px;
}

.cfo-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.cfo-delta.is-up { color: var(--md-sys-color-success); }
.cfo-delta.is-down { color: var(--md-sys-color-error); }

/* --- pannelli --- */
.cfo-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px 16px 16px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    min-width: 0;
}

.cfo-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cfo-panel-title {
    margin: 0;
    font: var(--md-sys-typescale-title-small);
    font-weight: 650;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cfo-panel-title > i { color: var(--accent-deep); }
.cfo-panel-note { font: var(--md-sys-typescale-label-small); color: var(--ink-3); }

/* Due pannelli affiancati, in colonna sotto i 1100px. */
.cfo-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 12px;
    align-items: start;
}

.cfo-split-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    align-items: start;
}

@media (max-width: 1100px) {
    .cfo-split-2-1 { grid-template-columns: 1fr; }
}

/* --- legenda --- */
.cfo-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-2);
}

.cfo-legend span { display: inline-flex; align-items: center; gap: 6px; }

.cfo-legend i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* --- eccezioni --- */
.cfo-alerts { display: flex; flex-direction: column; gap: 8px; }

.cfo-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--md-sys-color-surface-container-lowest);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s;
}

.cfo-alert:hover { border-color: var(--accent); }
.cfo-alert > i { font-size: 1rem; margin-top: 1px; }
.cfo-alert.sev-bad > i { color: var(--md-sys-color-error); }
.cfo-alert.sev-warning > i { color: var(--md-sys-color-warning); }
.cfo-alert.sev-good > i { color: var(--md-sys-color-success); }
.cfo-alert-body { min-width: 0; }

.cfo-alert-body strong {
    display: block;
    font: var(--md-sys-typescale-label-large);
    color: var(--ink);
}

.cfo-alert-body span {
    display: block;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
    margin-top: 1px;
}

.cfo-empty {
    padding: 22px;
    text-align: center;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
}

/* --- barra dei filtri --- */
.cfo-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cfo-controls label {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
}

/* --- segmenti (orizzonte 3/6/12 mesi) --- */
.cfo-seg {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
}

.cfo-seg button {
    border: 0;
    background: var(--card-bg);
    padding: 6px 13px;
    font: var(--md-sys-typescale-label-medium);
    color: var(--ink-2);
    cursor: pointer;
    border-right: 1px solid var(--line);
}

.cfo-seg button:last-child { border-right: 0; }
.cfo-seg button:hover { background: var(--md-sys-color-surface-container); }
.cfo-seg button.is-active { background: var(--ink); color: #fff; }

/* --- misure secondarie in riga --- */
.cfo-stats {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    padding: 2px 0;
}

.cfo-stat { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }

.cfo-stat dt {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
}

.cfo-stat dd {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.cfo-stat dd.is-negative { color: var(--md-sys-color-error); }
.cfo-stat dd small { font-weight: 500; font-size: .72rem; color: var(--ink-3); }

/* --- anzianita' crediti come barra unica --- */
.cfo-aging { display: flex; flex-direction: column; gap: 9px; }

.cfo-aging-bar {
    display: flex;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--line-soft);
}

.cfo-aging-bar > span {
    display: block;
    min-width: 2px;
    transition: filter .12s;
}

.cfo-aging-bar > span:hover { filter: brightness(1.12); }
.cfo-aging-rows { display: flex; flex-direction: column; gap: 1px; }

.cfo-aging-row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    gap: 9px;
    padding: 5px 2px;
    font: var(--md-sys-typescale-body-small);
    border-bottom: 1px solid var(--line-soft);
}

.cfo-aging-row:last-child { border-bottom: 0; }
.cfo-aging-row i { width: 10px; height: 10px; border-radius: 2px; }
.cfo-aging-row .cfo-aging-name { color: var(--ink-2); }

.cfo-aging-row .cfo-aging-amount {
    font-weight: 650;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.cfo-aging-row .cfo-aging-share {
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    min-width: 46px;
    text-align: right;
}

/* --- profilo di stagionalita' --- */
.cfo-season {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    align-items: end;
    height: 108px;
}

.cfo-season-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}

.cfo-season-bar {
    width: 100%;
    background: var(--accent-strong);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}

.cfo-season-bar.is-low { background: var(--md-sys-color-warning); }
.cfo-season-col span { font-size: .62rem; color: var(--ink-3); }
.cfo-season-col b { font-size: .64rem; color: var(--ink-2); font-weight: 600; }

/* --- avviso sui dati dimostrativi --- */
.cfo-demo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border: 1px dashed var(--md-sys-color-warning);
    border-radius: 6px;
    background: var(--md-sys-color-warning-container);
    font: var(--md-sys-typescale-body-small);
    color: #78350f;
}

.cfo-demo > i { color: var(--md-sys-color-warning); margin-top: 1px; }
.cfo-demo strong { display: block; margin-bottom: 1px; }

/* --- griglia finanziaria periodo per periodo --- */
.cfo-matrix-wrap { overflow-x: auto; }

.cfo-matrix {
    border-collapse: collapse;
    width: 100%;
    min-width: 720px;
    font: var(--md-sys-typescale-body-small);
    font-variant-numeric: tabular-nums;
}

.cfo-matrix th,
.cfo-matrix td {
    padding: 6px 10px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--line-soft);
}

.cfo-matrix thead th {
    position: sticky;
    top: 0;
    background: var(--md-sys-color-surface-container);
    color: var(--ink-2);
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--line);
    z-index: 2;
}

/* La prima colonna resta visibile scorrendo i mesi. */
.cfo-matrix th:first-child,
.cfo-matrix td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--card-bg);
    z-index: 1;
    font-weight: 500;
    color: var(--ink-2);
}

.cfo-matrix thead th:first-child { background: var(--md-sys-color-surface-container); z-index: 3; }
.cfo-matrix tbody tr:hover td { background: var(--md-sys-color-surface-container-lowest); }
.cfo-matrix tbody tr:hover td:first-child { background: var(--md-sys-color-surface-container); }

.cfo-matrix tr.is-total td {
    font-weight: 650;
    color: var(--ink);
    background: var(--md-sys-color-surface-container);
    border-top: 1px solid var(--line);
}

.cfo-matrix tr.is-total td:first-child { background: var(--md-sys-color-surface-container); color: var(--ink); }
.cfo-matrix td.is-negative { color: var(--md-sys-color-error); }
.cfo-matrix td.is-min { background: var(--md-sys-color-error-container) !important; font-weight: 650; }
.cfo-matrix .cfo-group-row td {
    background: var(--md-sys-color-surface-container-high);
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-2);
}

/* --- simulatore: leve --- */
.cfo-levers { display: flex; flex-direction: column; gap: 2px; }

.cfo-lever {
    display: grid;
    /* La prima colonna tiene il codice del mastro piu' la descrizione: con i nomi
       veri del piano dei conti sotto i 210px va a capo tre volte. */
    grid-template-columns: 210px 1fr 62px 108px;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-soft);
}

.cfo-lever:last-child { border-bottom: 0; }

.cfo-lever-name {
    font: var(--md-sys-typescale-body-medium);
    color: var(--ink);
    font-weight: 500;
}

.cfo-lever-delta {
    text-align: right;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    font-size: .84rem;
}

.cfo-lever-delta.is-up { color: var(--md-sys-color-success); }
.cfo-lever-delta.is-down { color: var(--md-sys-color-error); }

.cfo-lever-base {
    text-align: right;
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .cfo-lever { grid-template-columns: 1fr 56px; grid-template-areas: "name delta" "slider slider" "base base"; }
    .cfo-lever-name { grid-area: name; }
    .cfo-lever-delta { grid-area: delta; }
    .cfo-lever-base { grid-area: base; text-align: left; }
}

/* --- esiti del simulatore --- */
.cfo-outcomes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 8px;
}

.cfo-outcome {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--md-sys-color-surface-container-lowest);
}

.cfo-outcome dt {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    margin-bottom: 3px;
}

.cfo-outcome dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.cfo-outcome dd.is-negative { color: var(--md-sys-color-error); }

.cfo-outcome-delta {
    display: block;
    font-size: .72rem;
    font-weight: 650;
    margin-top: 2px;
}

.cfo-outcome-delta.is-up { color: var(--md-sys-color-success); }
.cfo-outcome-delta.is-down { color: var(--md-sys-color-error); }

/* --- carte degli scenari del goalseek --- */
.cfo-scenarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.cfo-scenario {
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card-bg);
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, box-shadow .12s;
}

.cfo-scenario:hover { border-color: var(--accent); }

.cfo-scenario.is-best {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 1px var(--accent-soft);
}

.cfo-scenario-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.cfo-scenario-head strong { font: var(--md-sys-typescale-label-large); color: var(--ink); }

.cfo-badge {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 9px;
    background: var(--accent-strong);
    color: #fff;
}

.cfo-scenario-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.cfo-scenario-row b { font-variant-numeric: tabular-nums; }
.cfo-scenario-row b.is-up { color: var(--md-sys-color-success); }
.cfo-scenario-row b.is-down { color: var(--md-sys-color-error); }

/* Il grafico Telerik non deve sfondare la colonna della griglia. */
.cfo-panel .k-chart { max-width: 100%; }

/* Codice del mastro accanto al nome della leva: distingue ricavi da costi
   senza aggiungere una colonna. */
.cfo-badge-sec {
    display: inline-block;
    min-width: 26px;
    text-align: center;
    padding: 1px 5px;
    margin-right: 7px;
    border-radius: 3px;
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cfo-badge-sec.is-ric { background: var(--accent-soft); color: var(--accent-deep); }
.cfo-badge-sec.is-cos { background: var(--md-sys-color-error-container); color: var(--md-sys-color-error); }

/* --- tooltip dei grafici: i numeri con i separatori delle migliaia --- */
.cfo-tip { min-width: 190px; font: var(--md-sys-typescale-body-small); }

.cfo-tip-cat {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .75;
    margin-bottom: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.cfo-tip-row {
    display: grid;
    grid-template-columns: 9px 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 1px 0;
}

.cfo-tip-dot { width: 9px; height: 9px; border-radius: 2px; }
.cfo-tip-name { opacity: .88; }

.cfo-tip-val {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- conto economico a scalare --- */
.cfo-scalare {
    border-collapse: collapse;
    width: 100%;
    min-width: 340px;
    font: var(--md-sys-typescale-body-small);
    font-variant-numeric: tabular-nums;
}

.cfo-scalare th,
.cfo-scalare td {
    padding: 5px 10px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--line-soft);
}

.cfo-scalare thead th {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
}

.cfo-scalare th:first-child,
.cfo-scalare td:first-child { text-align: left; color: var(--ink-2); }

.cfo-scalare tr.is-total td {
    font-weight: 650;
    color: var(--ink);
    background: var(--md-sys-color-surface-container);
    border-top: 1px solid var(--line);
}

.cfo-scalare tr.is-total td:first-child { text-transform: uppercase; letter-spacing: .03em; }
.cfo-scalare tr.is-total small { margin-left: 6px; font-weight: 500; color: var(--ink-3); }
.cfo-scalare td.is-negative { color: var(--md-sys-color-error); }
.cfo-scalare td.is-up { color: var(--md-sys-color-success); }
.cfo-scalare td.is-down { color: var(--md-sys-color-error); }

/* --- leve raggruppate per classe --- */
.cfo-levers-head {
    margin: 12px 0 2px;
    padding-bottom: 3px;
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
}

.cfo-levers-head:first-child { margin-top: 0; }

/* --- classificazione del piano dei conti --- */
.cfo-matrix.cfo-config td { padding: 4px 10px; }
.cfo-matrix.cfo-config td:nth-child(2) { text-align: left; white-space: normal; }
.cfo-matrix.cfo-config td:last-child,
.cfo-matrix.cfo-config thead th:last-child { text-align: left; }

/* La proposta dell'euristica: un colpo per accettarla, nessuno per ignorarla. */
.cfo-chip-suggest {
    margin-left: 7px;
    padding: 2px 8px;
    border: 1px dashed var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-3);
    font: var(--md-sys-typescale-label-small);
    cursor: pointer;
}

.cfo-chip-suggest:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }

/* Un mese ancora da chiudere: il numero e' una previsione, non un consuntivo. */
.cfo-matrix tr.is-forecast td { color: var(--ink-3); font-style: italic; }

/* L'etichetta accanto al mese: previsione, oppure mese in corso. */
.cfo-matrix td:first-child small {
    margin-left: 6px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .64rem;
    opacity: .8;
}

/* Tabella dentro un pannello a mezza larghezza: senza min-width l'ultima
   colonna finiva tagliata invece di far scorrere. */
.cfo-matrix.cfo-compact { min-width: 0; }
.cfo-matrix.cfo-compact th,
.cfo-matrix.cfo-compact td { padding: 6px 8px; }

/* --- flag "usa come leva" nella configurazione --- */
.cfo-check-leva {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    font: var(--md-sys-typescale-label-small);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-2);
    cursor: pointer;
}

/* Un mastro fuori dalle leve: resta leggibile ma si vede che non si tocca. */
.cfo-lever.is-fissa { opacity: .68; }

.cfo-lever-fissa {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    border: 1px dashed var(--line);
    border-radius: 999px;
    padding: 2px 9px;
    justify-self: start;
}

/* --- consultazione dei saldi banche --- */
/* Divisa e nome banca si leggono da sinistra: solo gli importi vanno a destra. */
.cfo-matrix.cfo-banche td:nth-child(2),
.cfo-matrix.cfo-banche th:nth-child(2) { text-align: left; }

.cfo-matrix.cfo-banche td:nth-child(2) small { margin-left: 8px; color: var(--ink-3); }

.cfo-link-banca {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--accent-deep);
    cursor: pointer;
    text-align: left;
}

.cfo-link-banca:hover { text-decoration: underline; }

.cfo-banche tbody tr.is-rettificata td { background: var(--md-sys-color-surface-container-lowest); }

.cfo-rettifica {
    display: block;
    font: var(--md-sys-typescale-label-small);
    font-weight: 500;
    color: var(--ink-3);
    text-transform: none;
    letter-spacing: 0;
}

/* Dettaglio dei conti di una banca: la descrizione puo' andare a capo, le date no. */
.k-window .cfo-matrix.cfo-compact td:nth-child(2) { white-space: normal; text-align: left; }
.k-window .cfo-matrix.cfo-compact td:last-child,
.k-window .cfo-matrix.cfo-compact th:last-child { white-space: nowrap; min-width: 96px; }

/* --- legami fra le leve --- */
.cfo-lever-indotto {
    display: block;
    font: var(--md-sys-typescale-label-small);
    font-weight: 500;
    color: var(--ink-3);
    white-space: nowrap;
}

.cfo-lever-base small {
    display: block;
    font-size: .64rem;
    color: var(--ink-3);
    opacity: .85;
}

.cfo-matrix.cfo-compact td .k-dropdownlist,
.cfo-matrix.cfo-compact td .k-numerictextbox { vertical-align: middle; }

/* Un legame che non potra' essere salvato: si vede prima, non dopo. */
.cfo-matrix tr.is-invalido td { background: var(--md-sys-color-error-container); }
.cfo-matrix tr.is-invalido td small { display: block; }


/* ---------- riconciliazione: avvisi sull'estrazione e righe rifiutate ---------- */
/* Un avviso qui non e' decorazione: dice che il documento potrebbe essere stato
   letto male, e va visto prima che l'utente prema Salva. Colori dai token, cosi'
   ogni installazione resta con la propria grafica. */
.recon-avvisi {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-body-medium);
}

.recon-avvisi > i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 1.05rem;
}

.recon-avvisi > div { min-width: 0; }
.recon-avvisi > div > div + div { margin-top: 4px; }
.recon-avvisi strong { display: block; margin-bottom: 4px; }

.recon-avvisi-nota {
    margin-top: 8px;
    font: var(--md-sys-typescale-body-small);
    opacity: .85;
}


/* ---------- configurazione dei motori AI ---------- */
/* Tutto dai token: la pagina prende i colori del tema per ruolo come le altre. */
.ai-ruoli {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.ai-ruolo { padding: 16px 20px; }
.ai-ruolo-vuoto { opacity: .72; }

.ai-ruolo-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ai-ruolo-motore { font: var(--md-sys-typescale-body-large); }

.ai-ruolo-endpoint {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-ref-palette-neutral40);
    word-break: break-all;
}

.ai-ruolo-flag {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font: var(--md-sys-typescale-label-medium);
    color: var(--md-ref-palette-neutral40);
}

.ai-chiave { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ai-chiave-assente { color: var(--md-sys-color-error); font-weight: 600; }
.ai-attivo { color: var(--md-sys-color-success); font-size: 1.1rem; }

.ai-suggerito {
    margin-left: 8px;
    color: var(--btn-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--btn-primary);
}
.ai-suggerito:hover { color: var(--btn-primary-hover); }

.ai-esito {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-body-medium);
}
.ai-esito > div + div { margin-top: 4px; }
.ai-esito-errore { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; word-break: break-word; }

.ai-consumi { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: .85rem; }
.ai-consumi th,
.ai-consumi td { padding: 6px 10px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.ai-consumi th { text-align: left; font-weight: 600; }
.ai-consumi .num { text-align: right; font-variant-numeric: tabular-nums; }
.ai-consumi .ai-errori { color: var(--md-sys-color-error); font-weight: 600; }

/* =========================================================================
   Revisione righe di fattura spedizioniere
   -------------------------------------------------------------------------
   Un blocco solo, identico nei due progetti, scritto sui token e mai su un
   colore letterale: cosi' segue il tema per ruolo del fork e la tavolozza
   unica del prodotto senza doverlo scrivere due volte.

   La scelta grafica che conta e' una: i tre stati - non agganciate, da
   guardare, agganciate - hanno colori diversi e stanno sempre nello stesso
   ordine, quello del lavoro che resta da fare. Chi apre la pagina deve
   capire in un secondo quanto manca, e quali righe sono sue.
   ========================================================================= */

.rev-page .rev-numero {
    font: var(--md-sys-typescale-title-medium);
    color: var(--ink-2);
    margin-left: 8px;
}

/* --- barra degli stati e avanzamento ------------------------------------ */

.rev-stato {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rev-gruppi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rev-gruppo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.rev-gruppo:hover:not(:disabled) { background: var(--md-sys-color-surface-container-low); }

.rev-gruppo:disabled,
.rev-gruppo.is-vuoto {
    opacity: .4;
    cursor: default;
}

.rev-gruppo-n {
    font: var(--md-sys-typescale-title-medium);
    font-weight: 700;
}

.rev-gruppo-t {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

/* Il colore lo porta il pallino del conteggio, non tutto il bottone: una
   fila di bottoni pieni si legge peggio, e qui il conteggio e' il dato. */
.rev-gruppo.rev-bad  .rev-gruppo-n { color: var(--md-sys-color-error); }
.rev-gruppo.rev-warn .rev-gruppo-n { color: #b45309; }
.rev-gruppo.rev-ok   .rev-gruppo-n { color: var(--md-sys-color-success); }
.rev-gruppo.rev-off  .rev-gruppo-n { color: var(--ink-3); }

.rev-gruppo.is-active {
    border-color: var(--btn-primary);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: inset 0 0 0 1px var(--btn-primary);
}

.rev-gruppo.rev-tutte { border-style: dashed; }

.rev-avanzamento {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 260px;
    flex: 1;
    max-width: 420px;
}

.rev-barra {
    height: 8px;
    border-radius: 999px;
    background: var(--line-soft);
    overflow: hidden;
}

.rev-barra-riempita {
    height: 100%;
    background: var(--btn-primary);
    transition: width .25s;
}

.rev-avanzamento-testo {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.rev-impedimenti ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

/* --- griglia: fattura a sinistra, sistema a destra ---------------------- */

.rev-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font: var(--md-sys-typescale-label-small);
    font-weight: 600;
    white-space: nowrap;
}

.rev-pill.rev-bad  { background: var(--md-sys-color-error-container);   color: var(--md-sys-color-error); }
.rev-pill.rev-warn { background: var(--md-sys-color-warning-container); color: #854d0e; }
.rev-pill.rev-ok   { background: var(--md-sys-color-success-container); color: var(--md-sys-color-success); }
.rev-pill.rev-off  { background: var(--line-soft);                      color: var(--ink-3); }

.rev-mano {
    margin-left: 6px;
    color: var(--btn-primary);
}

.rev-lato {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.rev-rif, .rev-ddt {
    font-weight: 600;
    color: var(--ink);
}

.rev-piu {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--line-soft);
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-2);
}

.rev-sub {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

/* Il destinatario di fattura e quello di bolla non si somigliano. Non e' un
   errore di per se' - il conto terzi funziona cosi' - ma e' la prima cosa da
   guardare quando si dubita di un aggancio, quindi si vede. */
.rev-sub.rev-diverso {
    color: #b45309;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.rev-nessuno {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
    font-style: italic;
}

.rev-importo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}

.rev-importo .is-negative { color: var(--md-sys-color-error); }

.rev-delta {
    font: var(--md-sys-typescale-label-small);
    font-weight: 600;
}

.rev-delta.is-piu  { color: var(--md-sys-color-error); }
.rev-delta.is-meno { color: #0369a1; }

.rev-residuo {
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-error);
}

.rev-azioni {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.rev-azioni .btn-icon {
    width: 32px;
    height: 32px;
}

.rev-az-ok:hover        { color: var(--md-sys-color-success); }
.rev-az-riassegna:hover { color: var(--btn-primary); }
.rev-az-spezza:hover    { color: var(--btn-primary); }
.rev-az-scarta:hover    { color: var(--md-sys-color-error); }
.rev-az-riapri:hover    { color: var(--ink-2); }

/* --- dettaglio della riga ----------------------------------------------- */

.rev-dettaglio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 16px 18px;
    background: var(--md-sys-color-surface-container-low);
}

.rev-dettaglio > div > strong {
    display: block;
    margin-bottom: 8px;
    font: var(--md-sys-typescale-label-large);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rev-dettaglio-motivo p {
    margin: 0 0 8px;
    color: var(--ink);
}

.rev-chiave {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r, 10px);
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-2);
}

.rev-dettaglio-dati dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    margin: 0;
}

.rev-dettaglio-dati dt {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
}

.rev-dettaglio-dati dd {
    margin: 0;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink);
}

.rev-dettaglio-dati dd small { color: var(--ink-3); }

.rev-grezzo { margin-top: 10px; }

.rev-grezzo summary {
    cursor: pointer;
    font: var(--md-sys-typescale-body-small);
    color: var(--btn-primary);
}

.rev-grezzo pre {
    margin: 6px 0 0;
    padding: 8px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: .75rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 160px;
    overflow: auto;
}

.rev-alloc-table {
    width: 100%;
    border-collapse: collapse;
    font: var(--md-sys-typescale-body-small);
}

.rev-alloc-table td {
    padding: 4px 8px 4px 0;
    border-bottom: 1px solid var(--line-soft);
}

.rev-alloc-table tr.is-spenta {
    opacity: .45;
    text-decoration: line-through;
}

.rev-alloc-quota { text-align: right; font-weight: 600; }

.rev-origine {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--line-soft);
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-2);
}

.rev-storia {
    margin: 0;
    padding: 0;
    list-style: none;
    font: var(--md-sys-typescale-body-small);
}

.rev-storia li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--line-soft);
}

.rev-storia-quando { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rev-storia-cosa   { font-weight: 600; }
.rev-storia-chi    { color: var(--ink-2); }
.rev-storia-perche { color: var(--ink-3); flex-basis: 100%; }

/* --- divisione su piu' bolle -------------------------------------------- */

.rev-spezza-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.rev-spezza-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid var(--line);
    font: var(--md-sys-typescale-label-medium);
    color: var(--ink-2);
}

.rev-spezza-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line-soft);
}

.rev-spezza-table .rev-num { text-align: right; }

.rev-spezza-totale {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r, 10px);
    background: var(--md-sys-color-surface-container-low);
}

.rev-spezza-totale.is-ok strong { color: var(--md-sys-color-success); }
.rev-spezza-totale.is-ko strong { color: var(--md-sys-color-error); }

.rev-spezza-azioni {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* --- selettore di spedizioni -------------------------------------------- */

.rev-picker-filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.rev-picker-filtri .filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.rev-picker-filtri label {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.rev-picker-testo { flex: 1; min-width: 240px; }

.rev-picker-vettore { align-self: center; }

.rev-picker-avviso { margin-bottom: 12px; }

.rev-picker-elenco {
    max-height: 46vh;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--r, 10px);
}

/* Una riga sola per spedizione, a colonne fisse: chi cerca scorre con gli
   occhi lungo una colonna, e colonne che ballano da riga a riga rendono lo
   scorrimento inutile. */
.rev-picker-riga {
    display: grid;
    grid-template-columns: 92px 92px 1fr 150px 130px 110px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.rev-picker-riga:hover { background: var(--md-sys-color-surface-container-low); }
.rev-picker-riga:last-child { border-bottom: 0; }

.rev-picker-ddt { font-weight: 700; color: var(--ink); }

.rev-picker-data,
.rev-picker-vett,
.rev-picker-misure {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.rev-picker-dest {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.rev-picker-dest strong,
.rev-picker-vett {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rev-picker-dest small { color: var(--ink-3); }

.rev-picker-importo { text-align: right; }

.rev-picker-gia {
    font: var(--md-sys-typescale-label-small);
    font-weight: 600;
    color: #b45309;
}

.rev-picker-riga.is-presa { background: var(--md-sys-color-warning-container); }
.rev-picker-riga.is-presa:hover { filter: brightness(.97); }

.rev-picker-troppi {
    margin: 8px 0 0;
    font: var(--md-sys-typescale-body-small);
}

@media (max-width: 900px) {
    .rev-picker-riga {
        grid-template-columns: 1fr 1fr;
        row-gap: 2px;
    }
    .rev-stato { flex-direction: column; align-items: stretch; }
    .rev-avanzamento { max-width: none; }
}

/* --- elenco documenti e caricamento ------------------------------------- */

.rec-carica .filters-row { align-items: flex-end; }

.rec-carica .filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rec-carica label {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.rec-file { flex: 1; min-width: 280px; }

/* Il campo file nudo del browser e' alto e sgraziato accanto ai controlli
   Telerik: qui si allinea alla loro altezza e prende il bordo del tema. */
.rec-input-file {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r, 10px);
    background: var(--card-bg);
    font: var(--md-sys-typescale-body-small);
    line-height: 1.6;
}

.rec-input-file::file-selector-button {
    margin-right: 10px;
    padding: 4px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--btn-primary);
    color: var(--btn-on-primary);
    cursor: pointer;
}

.rec-lavoro {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.rec-nota {
    margin: 10px 0 0;
    font: var(--md-sys-typescale-body-small);
}

.rec-gia {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.rec-avanzamento {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* --- qualita' della riconciliazione ------------------------------------- */

.qual-tiles { margin-bottom: 12px; }

.qual-tiles .cfo-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qual-tile-t {
    font: var(--md-sys-typescale-label-medium);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.qual-tile-n {
    font: var(--md-sys-typescale-headline-medium);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}

.qual-tile-s {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
}

.qual-barra-riga {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qual-barra-riga .rev-barra { flex: 1; }

/* Le soglie non sono decorative: sotto la meta' il vettore chiede lavoro a
   mano su piu' di una riga su due, ed e' il segnale da vedere per primo. */
.rev-barra-riempita.is-buona  { background: var(--md-sys-color-success); }
.rev-barra-riempita.is-media  { background: #d97706; }
.rev-barra-riempita.is-scarsa { background: var(--md-sys-color-error); }

.qual-tolleranza {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink);
    cursor: pointer;
}

.qual-tolleranza:hover { border-color: var(--btn-primary); }
.qual-tolleranza small { color: var(--ink-3); }

.qual-proposte { margin-top: 12px; }

.qual-proposte h2 {
    font: var(--md-sys-typescale-title-large);
    margin: 0 0 4px;
}

.qual-proposte h2 i { color: var(--btn-primary); margin-right: 8px; }

.qual-proposta {
    padding: 12px 14px;
    margin-top: 10px;
    border-left: 3px solid var(--btn-primary);
    border-radius: 0 var(--r, 10px) var(--r, 10px) 0;
    background: var(--md-sys-color-surface-container-low);
}

.qual-proposta-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.qual-proposta-cosa {
    margin: 6px 0 0;
    color: var(--ink);
}

.qual-esempi {
    margin: 6px 0 0;
    padding-left: 18px;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.qual-tolleranze-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 14px 0;
}

.qual-tolleranze-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qual-tolleranze-form label {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.qual-tolleranze-form small { color: var(--ink-3); }

.qual-esempio-banda { margin-top: 6px; }

/* ===========================================================================
   Finestre di dialogo: i bottoni devono restare raggiungibili
   ---------------------------------------------------------------------------
   Una TelerikWindow si dimensiona sul contenuto e non ha un tetto: il form dei
   motori AI, con dieci campi, cresceva oltre l'altezza dello schermo e il pie'
   di pagina con Salva e Annulla finiva fuori, senza modo di arrivarci - la
   finestra e' modale, quindi non si puo' nemmeno scorrere la pagina sotto.

   La regola vale per tutte le finestre e non solo per quella: e' un limite del
   componente, non un difetto di una pagina. Il titolo e il pie' restano fermi,
   scorre solo il corpo.
   =========================================================================== */
.k-window {
    max-height: 92vh;
    max-width: 96vw;
    display: flex;
    flex-direction: column;
}

.k-window > .k-window-content {
    overflow: auto;
    /* senza questo il contenuto in flex non si lascia rimpicciolire e il
       tetto di 92vh non ha effetto */
    min-height: 0;
}

.k-window > .k-window-titlebar,
.k-window > .k-window-actions,
.k-window > .k-actions {
    flex: 0 0 auto;
}

/* Il pie' di pagina raccoglie i bottoni a destra, con Salva per ultimo. */
.k-window > .k-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

/* In una riga di filtri l'etichetta di una casella non deve andare a capo, ma
   dentro un dialog stretto quel nowrap sfonda la larghezza e fa comparire la
   barra di scorrimento orizzontale: "Supporta output JSON con schema" non ci
   sta in un terzo di 720px. */
.k-window .filter-check {
    white-space: normal;
    align-items: flex-start;
}

.k-window .filter-check label { line-height: 1.25; }

/* ===========================================================================
   Bilancio gestionale
   ---------------------------------------------------------------------------
   Riusa la matrice del CFO (.cfo-matrix): stessa densita', stessa prima colonna
   che resta ferma scorrendo. Qui si aggiunge solo cio' che il foglio Excel non
   sapeva dire, cioe' DA DOVE VIENE un numero.
   =========================================================================== */

/* La colonna del residuo e quella del totale si staccano dalle altre: la prima
   perche' cio' che ci finisce dentro e' da attribuire, la seconda perche' e' il
   numero che si legge per primo. */
.bal-matrix th.bal-col-residuo { color: var(--md-sys-color-error); }
.bal-matrix td.bal-col-residuo,
.bal-matrix th.bal-col-totale,
.bal-matrix td.bal-col-totale {
    border-left: 1px solid var(--line);
    font-weight: 600;
    color: var(--ink);
}

/* Una cella scritta a mano si vede, senza gridare: sfondo appena caldo e una
   matita. Serve a distinguere a colpo d'occhio il consuntivo dalla stima. */
.bal-matrix td.bal-cella-manuale { background: var(--md-sys-color-tertiary-container); }
.bal-manuale { font-size: .62rem; margin-left: 4px; opacity: .55; vertical-align: super; }

/* Quando lo scritto si allontana di oltre un quinto dal proposto, la cella si
   sottolinea: non e' per forza un errore - gli ammortamenti mensili sono una
   quota e la contabilita' li registra a fine anno - ma non deve passare
   inosservato. */
.bal-matrix td.bal-scostata { box-shadow: inset 0 -2px 0 var(--md-sys-color-error); }

.bal-matrix td.bal-vuota { color: var(--ink-3); }
.bal-matrix tr.bal-risultato td { border-top: 2px solid var(--line); }

.bal-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 4px 0;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
}

.bal-legenda-auto::before {
    content: "";
    display: inline-block;
    width: 12px; height: 12px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 1px solid var(--line);
    background: var(--card-bg);
}

/* I reparti industriali stanno affiancati finche' ci stanno: sono prospetti
   corti e uno sotto l'altro sprecherebbero mezzo schermo. */
.bal-reparti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.bal-reparto h4 {
    font: var(--md-sys-typescale-label-large);
    color: var(--ink-2);
    margin: 0 0 6px;
}

.bal-matrix-stretta { min-width: 0; }
.bal-nota { font: var(--md-sys-typescale-body-small); color: var(--ink-2); margin: 0 4px 8px; }
.bal-descr { text-align: left !important; white-space: normal; max-width: 420px; }

.bal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font: var(--md-sys-typescale-label-small);
}

.bal-chip-chiuso {
    background: var(--md-sys-color-surface-container-high);
    color: var(--ink-2);
    border: 1px solid var(--line);
}

/* --- bilancio: le celle che si possono scrivere --- */
/* Un prospetto in cui alcune celle si aprono e altre no deve dirlo prima del
   clic: il puntatore cambia e il fondo si accende passandoci sopra. Sui
   subtotali non succede niente, ed e' giusto: sono la somma delle loro parti. */
.bal-cella-clic { cursor: pointer; }
.bal-cella-clic:hover { outline: 2px solid var(--btn-primary); outline-offset: -2px; }

.bal-modifica .bal-proposto { padding: 8px 0; font: var(--md-sys-typescale-body-medium); }
.bal-modifica .bal-quote { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.bal-modifica .bal-quote-testa { display: flex; justify-content: space-between; align-items: baseline; }
.bal-quote-errore { color: var(--md-sys-color-error); font-weight: 600; }

/* -------------------------------------------------------------------------
   Bilancio gestionale: la scheda di configurazione

   Le tre viste - voci, regole, business unit - condividono una testata con il
   selettore a segmenti e la ricerca. Il resto e' segnaletica: una voce spenta,
   una riga dichiarata fuori dal prospetto e un codice sotto la descrizione
   devono distinguersi senza colore da solo, perche' il colore da solo non si
   legge in stampa e non si legge a tutti.
   ------------------------------------------------------------------------- */
.bal-schema-testa { display: flex; justify-content: space-between; align-items: center;
                    gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bal-schema-azioni { margin-bottom: 12px; }

/* Il codice sotto la descrizione: si legge quando serve, non ruba la riga. */
.bal-codice { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant);
              font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* Spenta e fuori dal prospetto sono due cose diverse: la prima e' sbiadita,
   la seconda ha una barra a sinistra. Il testo dice comunque quale delle due. */
.bal-riga-spenta   { opacity: .5; }
.bal-riga-esclusa td:first-child { border-left: 3px solid var(--md-sys-color-outline); padding-left: 9px; }

.bal-schema .text-right { text-align: right; }
.bal-schema code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
                   background: var(--md-sys-color-surface-variant); padding: 2px 6px; border-radius: 4px; }

/* La fonte di una voce, a colpo d'occhio. Le automatiche hanno un fondo pieno,
   le altre no: e' la distinzione che conta quando un numero non torna. */
.bal-chip-contabilita   { background: var(--md-sys-color-info-container);    color: var(--md-sys-color-info); }
.bal-chip-analitica     { background: var(--md-sys-color-info-container);    color: var(--md-sys-color-info); }
.bal-chip-venduto       { background: var(--md-sys-color-info-container);    color: var(--md-sys-color-info); }
.bal-chip-manuale       { background: var(--md-sys-color-warning-container); color: #854d0e; }
.bal-chip-calcolata     { background: transparent; color: var(--md-sys-color-on-surface-variant);
                          border: 1px solid var(--line); }
.bal-chip-ribaltamento  { background: transparent; color: var(--md-sys-color-on-surface-variant);
                          border: 1px solid var(--line); }
.bal-chip-totale_sezione{ background: transparent; color: var(--md-sys-color-on-surface-variant);
                          border: 1px solid var(--line); }

/* La testata della configurazione, e le tabelle che non devono allungare la
   pagina: 183 voci e 165 regole una sotto l'altra fanno undicimila pixel, e a
   quel punto per confrontare due righe si scorre avanti e indietro. Corpo che
   scorre da solo, intestazione appiccicata in cima. */
.bal-schema-cerca { display: flex; align-items: center; gap: 8px; }
.bal-schema .cfo-matrix-wrap { max-height: 62vh; overflow-y: auto; }
.bal-schema .cfo-matrix thead th { position: sticky; top: 0; z-index: 4; }

/* Qui le colonne sono quasi tutte testo: l'allineamento a destra della matrice
   dei numeri le renderebbe illeggibili. Si torna a sinistra, e solo le due
   colonne di conteggio restano a destra. */
.bal-schema .cfo-matrix th,
.bal-schema .cfo-matrix td { text-align: left; white-space: normal; }
.bal-schema .cfo-matrix th.text-right,
.bal-schema .cfo-matrix td.text-right { text-align: right; }
.bal-schema .cfo-matrix td:first-child { position: static; }

/* ==========================================================================
   Configuratore Prezzi (/PriceQuotes, /PriceQuote, /PriceQuoteParams)

   La pagina che c'era prima si portava un foglio suo di 983 righe, copiato dal
   mockup del consulente, con la sua tavolozza e i suoi tipi di carattere: era
   un corpo estraneo in mezzo a cinquanta schermate e non seguiva i temi per
   ruolo. Qui restano solo le cose che quel mockup aveva ragione di avere - i
   riquadri grandi del prezzo e la barra che mostra dove va ogni euro - riscritte
   sui token, quindi blu per l'utente, verdi per la direzione, rosse per
   l'amministratore come tutto il resto.
   ========================================================================== */

/* Due colonne: a sinistra cosa si vende, a destra quanto deve costare. Sotto i
   1200px si impilano, perche' affiancate diventerebbero due strisce strette. */
.pq-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.pq-col    { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1200px) { .pq-layout { grid-template-columns: 1fr; } }

.pq-card   { padding: 0; overflow: hidden; }
.pq-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px;
             padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pq-card-h h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.pq-card-b { padding: 14px; }

.pq-row    { margin-bottom: 14px; }
.pq-row:last-child { margin-bottom: 0; }
.pq-row-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pq-row-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pq-lab    { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600;
             color: var(--md-sys-color-on-surface-variant); }
.pq-req    { color: var(--danger); }
.pq-hint   { margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--ink); }
.pq-muted  { color: var(--muted); }
.pq-sub    { margin: 8px 0; font-size: 12px; }

/* I segmenti agente/spedizione riusano .cfo-seg: qui serve solo che non
   provino a stare sulla stessa riga dell'etichetta. */
.pq-seg    { display: inline-flex; }

/* I riquadri del prezzo. Il minimo e' l'unico numero grande della pagina:
   e' la risposta alla domanda per cui la schermata esiste. */
.pq-kpis     { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.pq-kpi      { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
               background: var(--card-bg); }
.pq-kpi-lab  { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
               color: var(--muted); margin-bottom: 4px; }
.pq-kpi-val  { font-size: 20px; font-weight: 700; color: var(--ink);
               font-variant-numeric: tabular-nums; }
.pq-kpi-lead .pq-kpi-val { font-size: 28px; color: var(--accent-strong); }
.pq-kpi-sub  { margin-top: 4px; font-size: 12px; color: var(--muted);
               display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.pq-num      { font-variant-numeric: tabular-nums; }

.pq-chip       { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
                 border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pq-chip-ok    { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.pq-chip-no    { background: color-mix(in srgb, var(--danger) 14%, transparent);  color: var(--danger); }
.pq-chip-draft { background: color-mix(in srgb, var(--btn-primary) 12%, transparent); color: var(--accent-strong); }
.pq-chip-lock  { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--ink); }

/* La sezione riservata: un filo di bordo accentato basta a dire che quello che
   c'e' dentro non lo vedono tutti, senza urlare. */
.pq-master { border-left: 3px solid var(--accent-strong); }

.pq-facts        { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                   gap: 6px 14px; margin-bottom: 10px; }
.pq-facts > div  { display: flex; justify-content: space-between; gap: 8px;
                   padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.pq-facts span   { color: var(--muted); }
.pq-facts b      { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Dove va ogni euro del prezzo proposto. Le tinte sono derivate dai token, non
   scelte a mano: cosi' seguono il tema per ruolo. */
.pq-bar    { display: flex; height: 18px; border-radius: 6px; overflow: hidden;
             border: 1px solid var(--line); margin: 10px 0 6px; }
.pq-bar > div { height: 100%; }
.pq-seg-ci    { background: color-mix(in srgb, var(--ink) 62%, transparent); }
.pq-seg-provv { background: color-mix(in srgb, var(--ink) 38%, transparent); }
.pq-seg-trasp { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.pq-seg-oneri { background: color-mix(in srgb, var(--danger) 45%, transparent); }
.pq-seg-marg  { background: color-mix(in srgb, var(--success) 55%, transparent); }

.pq-legend      { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); }
.pq-legend i    { display: inline-flex; align-items: center; gap: 5px; font-style: normal; }
.pq-legend b    { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* La scheda costo: le stesse colonne della schermata «Valore Corrente» di
   italfabrics, cosi' i due numeri si confrontano senza tradurre niente. */
.pq-costsheet-h { display: flex; align-items: center; justify-content: space-between;
                  gap: 8px; margin: 14px 0 6px; }
.pq-costsheet-h h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }

.pq-sheet          { width: 100%; border-collapse: collapse; font-size: 12px; }
.pq-sheet th       { text-align: left; font-weight: 600; color: var(--muted);
                     border-bottom: 1px solid var(--line); padding: 5px 6px; white-space: nowrap; }
.pq-sheet td       { padding: 4px 6px; border-bottom: 1px solid var(--line); color: var(--ink); }
.pq-sheet th.r,
.pq-sheet td.r     { text-align: right; font-variant-numeric: tabular-nums; }
.pq-sheet-tot td   { font-weight: 600; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.pq-sheet-grand td { font-size: 13px; border-top: 2px solid var(--line); }

/* Una riga che il motore non ha saputo risolvere, o una zona con un'incidenza
   fuori scala: si segnala, non si nasconde dietro uno zero. */
.pq-unresolved td { background: color-mix(in srgb, var(--danger) 8%, transparent); }

.pq-notes      { margin: 0; font-size: 12px; line-height: 1.55; }
.pq-notes dt   { font-weight: 600; color: var(--ink); margin-top: 8px; }
.pq-notes dt:first-child { margin-top: 0; }
.pq-notes dd   { margin: 2px 0 0; color: var(--muted); }
.pq-notes code { background: color-mix(in srgb, var(--ink) 7%, transparent);
                 padding: 1px 5px; border-radius: 4px; font-size: 11px; }

/* TelerikTextArea ignora Rows: l'altezza la detta il guscio, che il tema tiene
   basso quanto una casella di testo. Le annotazioni uscivano alte una riga
   sola, e in una riga nessuno scrive una nota. Va alzato il guscio, non solo il
   textarea dentro. */
.pq-row .k-textarea.k-input,
.pq-card-b .k-textarea.k-input { height: auto !important; min-height: 88px !important; }
.pq-row .k-textarea textarea,
.pq-row textarea.k-input-inner,
.pq-card-b textarea.k-input-inner { min-height: 84px; height: 84px; resize: vertical; }

/* I filtri dell'elenco: cliente, articolo e colore sono tre caselle distinte,
   e la fila deve stare allineata. Prima la casella di ricerca era alta 40px e i
   bottoni dello stato 28: due altezze diverse sulla stessa riga si vedono. */
.pq-filters { align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pq-filters .pq-filter { display: flex; flex-direction: column; gap: 4px; }
.pq-filters label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
                    color: var(--muted); margin: 0; }
/* Telerik da' 44px alle sue caselle e .cfo-seg ne fa 36: due altezze sulla
   stessa riga si vedono. L'altezza non sta sul contenitore ma sull'input
   dentro, che il tema fa alto 40 di padding: e' quello che va pareggiato,
   altrimenti si stringe il guscio e il contenuto lo rigonfia. */
/* Il foglio di Telerik e' caricato dopo questo e mette 44px di min-height sul
   guscio delle sue caselle. Ne' una classe in piu' ne' una regola piu' lunga lo
   scavalcano, quindi qui serve !important: e' l'unico in tutto il file, vale
   solo dentro .pq-filters, e la ragione e' quella. */
.pq-filters .k-textbox.k-input,
.pq-filters .k-input.filter-input,
.pq-filters .cfo-seg,
.pq-filters .k-button {
    height: 36px !important; min-height: 36px !important; box-sizing: border-box;
}
.pq-filters .k-input-inner {
    height: 34px; min-height: 34px; line-height: 34px;
    padding-top: 0; padding-bottom: 0; box-sizing: border-box;
}
.pq-filters .cfo-seg { display: inline-flex; align-items: stretch; }
.pq-filters .cfo-seg button { height: 100%; padding-top: 0; padding-bottom: 0; }

/* Cursori. La dilazione e lo sconto si negoziano a scatti, e il punto di
   guardarli su un cursore e' vedere il prezzo minimo muoversi mentre si
   trascina: e' il motivo per cui questa schermata esiste. */
.pq-lab-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pq-lab-val  { font-size: 13px; font-weight: 700; color: var(--accent-strong);
               font-variant-numeric: tabular-nums; }
.pq-row .k-slider-horizontal { margin: 2px 0 0; }

.pq-chips    { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pq-chipbtn  { border: 1px solid var(--line); background: transparent; color: var(--muted);
               border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600;
               cursor: pointer; line-height: 1.6; }
.pq-chipbtn:hover:not(:disabled) { border-color: var(--accent-strong); color: var(--accent-strong); }
.pq-chipbtn.is-active { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.pq-chipbtn:disabled  { opacity: .45; cursor: default; }

/* Il prezzo proposto: cursore piu' casella. La scala parte dal minimo perche'
   sotto non ha senso proporre, e arriva al doppio perche' una scala un estremo
   lo deve avere e il listino qui non esiste. La casella accetta comunque
   qualunque cifra: una trattativa e' una trattativa. */
.pq-proposta   { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.pq-proposta-b { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap;
                 font-size: 12px; }

/* Sotto il minimo il riquadro del netto si segnala da solo: e' l'unica cosa
   della schermata che nessuno deve poter non vedere. */
.pq-kpi-no { border-color: var(--danger);
             background: color-mix(in srgb, var(--danger) 6%, var(--card-bg)); }
.pq-kpi-no .pq-kpi-val { color: var(--danger); }

/* Le due letture che servono a chi tratta: quanto costa concedere giorni, e
   quanto spazio c'e' fra il prezzo minimo e il listino. Erano nel prototipo del
   consulente ed erano la parte che valeva la pena tenere: un numero grande e
   una frase che dice cosa vuol dire. */
.pq-insights   { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                 gap: 10px; margin-top: 12px; }
.pq-insight    { border: 1px solid var(--line); border-left: 3px solid var(--accent-strong);
                 border-radius: 10px; padding: 10px 12px; background: var(--card-bg); }
.pq-insight-band { border-left-color: var(--success); }
.pq-insight-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
                  color: var(--muted); margin-bottom: 3px; }
.pq-insight-val { font-size: 22px; font-weight: 700; color: var(--ink);
                  font-variant-numeric: tabular-nums; }
.pq-insight-band .pq-insight-val { color: var(--success); }
.pq-insight-txt { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.pq-badge      { display: inline-block; padding: 0 6px; border-radius: 999px; font-weight: 600;
                 background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }

/* ===========================================================================
   Configuratore Prezzi: le due tabelle configurabili di /PriceQuoteParams

   Il margine per settore e l'incidenza forzata a mano si modificano dentro la
   tabella, non in una finestra: sono quarantacinque righe e trenta zone, e
   aprire un dialogo per cambiare un numero e' piu' lavoro del numero. La
   casella dentro la cella va quindi stretta e bassa, altrimenti la riga
   diventa alta come un modulo.

   La percentuale calcolata di una zona forzata resta a video barrata: serve a
   vedere di quanto ci si e' scostati, e a ricordarsi perche' la forzatura
   c'era. Il colore lo mette .pq-muted, qui c'e' solo la riga sopra.
   =========================================================================== */
.pq-sheet .k-input.filter-input { min-height: 30px !important; height: 30px !important; }
.pq-sheet .k-input.filter-input .k-input-inner { padding: 2px 6px; font-size: 12px; }

/*  inline-FLEX, non inline-block: la casella numerica di Telerik e' un flex
    con l'input a sinistra e le due frecce a destra, e mettendola a block le
    frecce andavano a capo sotto l'input, dove la cella le tagliava. Si vedeva
    solo la punta di quella di sopra. */
.pq-forzatura      { white-space: nowrap; }
.pq-forzatura .k-input.filter-input { display: inline-flex; vertical-align: middle; }
.pq-mini.k-button  { min-width: 28px; padding: 2px 6px; margin-left: 4px; vertical-align: middle; }

.pq-barrato        { text-decoration: line-through; }

/* ---------------------------------------------------------------------------
   La provvigione fra le condizioni di vendita

   La casella e la sua nota stanno su due colonne: a sinistra il numero, a
   destra da dove viene o - se l'ha scritta una persona - quanto diceva il
   calcolo. La nota si allinea in basso, alla stessa altezza della casella,
   se no galleggia sopra l'etichetta.
   --------------------------------------------------------------------------- */
.pq-provvigione-note { display: flex; flex-direction: column; justify-content: flex-end;
                       gap: 4px; font-size: 12px; line-height: 1.4; padding-bottom: 2px; }
.pq-provvigione-note .k-button { align-self: flex-start; }
.pq-provvigione { margin-top: 10px; }

/* ---------------------------------------------------------------------------
   Il cestino sulle bozze

   Buttare via una scheda e' l'unica azione distruttiva di queste pagine, e
   deve sembrarlo: il bottone della finestra e' rosso pieno, quello in griglia
   resta un'icona e si accende solo quando ci passi sopra, se no una colonna di
   cestini rossi fa piu' paura di quanta gliene serva.
   --------------------------------------------------------------------------- */
.btn-icon-modern.k-button { min-width: 32px; padding: 4px 8px; background: transparent;
                            border: 1px solid var(--line); color: var(--ink); }
.btn-icon-modern.k-button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }

.pq-cestino.k-button { margin-left: 4px; color: var(--danger); }
.pq-cestino.k-button:hover { background: color-mix(in srgb, var(--danger) 12%, transparent);
                             border-color: var(--danger); }

.btn-danger-modern.k-button { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-modern.k-button:hover { filter: brightness(0.92); }

/* ===========================================================================
   Texi, l'assistente dati

   Il pannello sta dentro .app-layout, non fuori. Il tema per ruolo - blu
   utente, verde direzione, rosso amministratore - e' una classe su quel div,
   e i colori qui sotto passano tutti da --btn-primary: appeso a :root il
   pulsante sarebbe rimasto blu anche per un amministratore, che e' la stessa
   trappola gia' pagata con i popup di Telerik.

   Il pulsante e il pannello sono fixed, non absolute: devono restare in basso
   a destra mentre la pagina sotto scorre, e .main-content ha un padding suo
   che li avrebbe spostati.

   z-index 1200: sopra la barra e la barra laterale, sotto le finestre
   Telerik, che stanno a 10000. Una finestra modale aperta deve poter coprire
   Texi, non il contrario.
   =========================================================================== */

.texi-radice {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    font-size: .86rem;
}

.texi-icona { width: 1.5em; height: 1.5em; display: block; flex: 0 0 auto; }

/* --- il pulsante --- */
.texi-pulsante {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    background: var(--btn-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.texi-pulsante:hover { background: var(--btn-primary-hover); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.texi-pulsante:active { transform: translateY(0); }
.texi-pulsante.texi-aperto { font-size: 1.1rem; }

/* --- il pannello --- */
.texi-pannello {
    width: 420px;
    max-width: calc(100vw - 40px);
    height: 620px;
    max-height: calc(100vh - 120px);
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.texi-testa {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--btn-primary);
    color: #fff;
    flex: 0 0 auto;
}
.texi-marchio { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: .98rem; }
.texi-sottotitolo { font-size: .74rem; opacity: .8; }
.texi-testa-azioni { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.texi-azione {
    background: transparent; border: none; color: #fff; opacity: .85;
    width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.texi-azione:hover { background: rgba(255,255,255,.18); opacity: 1; color: #fff; }
.texi-azione:disabled { opacity: .4; cursor: default; }

/* --- i messaggi --- */
.texi-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg);
}

.texi-messaggio { display: flex; }
.texi-messaggio.texi-mio { justify-content: flex-end; }
.texi-messaggio.texi-suo { justify-content: flex-start; }

.texi-bolla {
    max-width: 92%;
    padding: 9px 12px;
    border-radius: 12px;
    line-height: 1.5;
    word-break: break-word;
}
.texi-mio .texi-bolla { background: var(--btn-primary); color: #fff; border-bottom-right-radius: 4px; }
.texi-suo .texi-bolla {
    background: var(--card-bg);
    color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
}

.texi-bolla p { margin: 0 0 .5em; }
.texi-bolla p:last-child { margin-bottom: 0; }
.texi-bolla ul, .texi-bolla ol { margin: .3em 0 .5em; padding-left: 1.2em; }
.texi-bolla code { background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 1px 4px; border-radius: 4px; font-size: .92em; }
.texi-titolo { font-weight: 600; margin: .4em 0 .2em; }

/*  Le tabelle scorrono dentro il loro contenitore. Una classifica con sei
    colonne dentro un pannello da 420 pixel non ci sta, e lasciarla allargare
    il pannello vorrebbe dire un pannello che cambia larghezza a ogni
    risposta.  */
.texi-tabella { overflow-x: auto; margin: .4em 0; }
.texi-tabella table { border-collapse: collapse; font-size: .8rem; width: 100%; }
.texi-tabella th, .texi-tabella td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.texi-tabella th { font-weight: 600; color: var(--ink-2); border-bottom: 2px solid var(--line); }
.texi-tabella td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- l'etichetta dell'esito --- */
.texi-etichetta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 600; padding: 2px 8px;
    border-radius: 999px; margin-bottom: 6px;
}
.texi-nonso  { background: color-mix(in srgb, var(--warning, #e0a800) 16%, transparent); color: var(--warning, #a07800); }
.texi-errore { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/*  La riga delle fonti e il blocco dell'SQL: sono la ragione per cui a una
    risposta si puo' credere. Piccoli, ma sempre presenti.  */
.texi-fonti {
    margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line);
    font-size: .72rem; color: var(--ink-3); display: flex; align-items: center; gap: 5px;
}
.texi-sql { margin-top: 6px; font-size: .74rem; }
.texi-sql summary { cursor: pointer; color: var(--accent-strong); user-select: none; }
.texi-sql pre {
    margin: 6px 0 0; padding: 8px; border-radius: 6px; overflow-x: auto;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    font-size: .72rem; line-height: 1.4; white-space: pre;
}

.texi-pollici { margin-top: 6px; display: flex; gap: 4px; align-items: center; }
.texi-pollice {
    background: transparent; border: 1px solid var(--line); border-radius: 6px;
    width: 26px; height: 24px; cursor: pointer; color: var(--ink-3);
    display: flex; align-items: center; justify-content: center; font-size: .78rem;
}
.texi-pollice:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.texi-grazie { font-size: .72rem; color: var(--ink-3); font-style: italic; }

/* --- mentre lavora --- */
/*  I puntini e la frase stanno insieme: la frase dice COSA sta facendo -
    «cerco il cliente...», «interrogo il venduto...» - e in una query che ci
    mette cinque secondi e' la differenza fra sembrare bloccato e sembrare al
    lavoro.  */
.texi-lavoro { display: flex; align-items: center; gap: 9px; color: var(--ink-3); }
.texi-attivita { font-size: .8rem; font-style: italic; }
.texi-puntini { display: inline-flex; gap: 3px; }
.texi-puntini span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-strong); opacity: .4;
    animation: texi-pulsa 1.2s infinite ease-in-out;
}
.texi-puntini span:nth-child(2) { animation-delay: .16s; }
.texi-puntini span:nth-child(3) { animation-delay: .32s; }
@keyframes texi-pulsa {
    0%, 80%, 100% { opacity: .25; transform: scale(.8); }
    40%           { opacity: 1;   transform: scale(1); }
}

/* --- il benvenuto --- */
.texi-benvenuto { text-align: center; padding: 28px 14px; color: var(--ink-2); }
.texi-benvenuto .texi-icona { width: 46px; height: 46px; margin: 0 auto 12px; color: var(--accent-strong); }
.texi-benvenuto p { margin: 0 0 8px; }
.texi-nota { font-size: .78rem; color: var(--ink-3); line-height: 1.5; }
.texi-suggerimenti { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.texi-suggerimento {
    background: var(--card-bg); border: 1px solid var(--line); border-radius: 10px;
    padding: 7px 11px; font-size: .78rem; color: var(--ink); cursor: pointer; text-align: left;
}
.texi-suggerimento:hover { border-color: var(--accent-strong); color: var(--accent-strong); }

/* --- la casella --- */
.texi-piede {
    flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
    padding: 10px; border-top: 1px solid var(--line); background: var(--card-bg);
}
/*  La casella e' un textarea e non un input: le domande vere sono lunghe una
    riga e mezza, e un input le fa scorrere orizzontalmente mentre si scrive.
    Maiusc+Invio va a capo, Invio manda.  */
.texi-casella {
    flex: 1 1 auto; resize: none; border: 1px solid var(--line); border-radius: 10px;
    padding: 8px 10px; font: inherit; color: var(--ink); background: var(--bg);
    min-height: 38px; max-height: 120px; line-height: 1.4;
}
.texi-casella:focus { outline: none; border-color: var(--accent-strong); }
.texi-invia {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; border: none;
    background: var(--btn-primary); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.texi-invia:hover:not(:disabled) { background: var(--btn-primary-hover); }
.texi-invia:disabled { opacity: .45; cursor: default; }

/*  Sul telefono il pannello prende quasi tutto lo schermo: un riquadro da 420
    pixel su un telefono da 360 sarebbe uscito dai bordi.  */
@media (max-width: 520px) {
    .texi-radice { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
    .texi-pannello { width: auto; height: calc(100vh - 100px); }
    .texi-pulsante { align-self: flex-end; }
}

/* ---------------------------------------------------------------------------
   La sezione amministrativa di Texi

   Le schede sono .cfo-tabs / .cfo-tab, le stesse della tesoreria e del CFO:
   la convenzione del progetto e' un <button> vero, non un TelerikTabStrip.
   Qui c'e' solo quello che le schede di Texi hanno in piu'.
   --------------------------------------------------------------------------- */

/*  Il riquadro della freschezza sta in cima e non in fondo, e non e' una
    scelta estetica: davanti a un numero strano si guarda PRIMA se il dato e'
    arrivato. Una tabella ferma significa caricamento non passato, non un bug
    di Texi - la stessa regola della tesoreria.  */
.texi-freschezza { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.texi-fresca, .texi-stantia {
    display: flex; flex-direction: column; gap: 2px;
    padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--card-bg); font-size: .74rem; min-width: 150px;
}
.texi-fresca strong, .texi-stantia strong { font-size: .8rem; color: var(--ink); }
.texi-fresca span, .texi-stantia span { color: var(--ink-3); }
.texi-stantia {
    border-color: var(--warning, #e0a800);
    background: color-mix(in srgb, var(--warning, #e0a800) 10%, var(--card-bg));
}
.texi-stantia span { color: var(--warning, #a07800); font-weight: 600; }

/*  Le quattro cifre in cima all'andamento. Quella che conta e' la percentuale
    di «non so»: le domande al giorno dicono solo che qualcuno prova, il «non
    so» che scende dice che il dizionario sta migliorando.  */
.texi-cifre { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.texi-cifra {
    flex: 1 1 140px; padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--card-bg);
}
.texi-cifra dt { font-size: .72rem; color: var(--ink-3); margin: 0 0 4px; }
.texi-cifra dd { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.texi-cifra dd small { display: block; font-size: .7rem; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.texi-cifra.texi-attenzione { border-color: var(--warning, #e0a800); }
.texi-cifra.texi-attenzione dd { color: var(--warning, #a07800); }

.texi-domanda-testo { max-width: 460px; white-space: normal; line-height: 1.4; }
.texi-sql-cella {
    font-family: ui-monospace, Consolas, monospace; font-size: .72rem;
    max-width: 380px; white-space: pre-wrap; word-break: break-all; color: var(--ink-2);
}
.texi-badge {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    font-size: .7rem; font-weight: 600;
}
.texi-badge-risposta    { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.texi-badge-chiarimento { background: color-mix(in srgb, var(--btn-primary) 14%, transparent); color: var(--accent-strong); }
.texi-badge-nonso       { background: color-mix(in srgb, var(--warning, #e0a800) 18%, transparent); color: var(--warning, #a07800); }
.texi-badge-errore,
.texi-badge-negato      { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* ==========================================================================
   Texi: schermo intero, voce, tabelle e grafici
   --------------------------------------------------------------------------
   Aggiunte al pannello che c'era gia'. Tre gruppi:

   LA PAGINA INTERA riusa .users-page e non ridefinisce niente di suo: la
   conversazione e' lo stesso componente del pannello, e l'unica differenza e'
   che qui puo' respirare. Il corpo prende l'altezza dello schermo meno la
   testata e il piede, se no si scorre due volte - una nella pagina e una nella
   conversazione - che e' il modo piu' rapido di far perdere il segno.

   LA RIGA DELL'ASCOLTO sta fuori dalla casella e ha un id: il testo parziale
   lo scrive il JavaScript direttamente li' dentro, senza passare dal server.
   E' la ragione per cui la dettatura non sembra a scatti su una VPN.

   LA TABELLA sotto una risposta ha la sua testata con il conteggio e i bottoni.
   L'avviso «elenco parziale» e' in evidenza apposta: una tabella tagliata che
   sembra intera e' un numero sbagliato con un'altra faccia.
   ========================================================================== */

.texi-pagina .page-header h1 { display: flex; align-items: center; gap: 10px; }
.texi-pagina .page-header h1 .texi-icona { width: 30px; height: 30px; }

.texi-pagina-conversazione {
    display: flex;
    flex-direction: column;
    /* la testata della pagina, il piede dell'applicazione e i margini */
    height: calc(100vh - 210px);
    min-height: 380px;
    padding: 0;
    overflow: hidden;
}

.texi-corpo-largo { padding: 18px 22px; }
.texi-corpo-largo .texi-bolla { max-width: 74ch; }
.texi-corpo-largo .texi-messaggio { margin-bottom: 16px; }

/* --- la voce --- */
.texi-ascolto {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 0;
    font-size: .82rem;
    color: var(--ink);
    opacity: .85;
    min-height: 26px;
}
.texi-ascolto-spento { display: none; }
.texi-ascolto-fase { font-weight: 600; color: var(--accent-strong); white-space: nowrap; }
.texi-parziale { color: var(--ink); opacity: .7; font-style: italic; }

.texi-onda { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.texi-onda span {
    width: 3px; height: 4px; border-radius: 2px;
    background: var(--btn-primary);
    animation: texi-onda 1s ease-in-out infinite;
}
.texi-onda span:nth-child(2) { animation-delay: .15s; }
.texi-onda span:nth-child(3) { animation-delay: .3s; }
@keyframes texi-onda { 0%,100% { height: 4px; } 50% { height: 14px; } }

.texi-microfono {
    background: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    width: 38px; height: 38px;
    color: var(--ink);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background .15s, color .15s, border-color .15s;
}
.texi-microfono:hover:not(:disabled) { border-color: var(--btn-primary); color: var(--btn-primary); }
.texi-microfono-acceso {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: #fff;
}
/*  Il microfono impossibile resta VISIBILE e spento, con il motivo nel title:
    un bottone che sparisce senza spiegazione diventa una segnalazione
    all'assistenza il giorno stesso.  */
.texi-microfono-spento { opacity: .4; cursor: not-allowed; }

/* --- tabella e grafico sotto una risposta --- */
.texi-tabella {
    margin: 10px 0 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card-bg);
}
.texi-tabella-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
    font-size: .78rem;
}
.texi-tabella-conta { color: var(--ink); opacity: .7; }
.texi-parziale-avviso { color: var(--danger); opacity: 1; }
.texi-tabella-azioni { display: flex; gap: 4px; }

.texi-azione-piccola {
    background: none;
    border: 1px solid transparent;
    border-radius: 7px;
    width: 28px; height: 28px;
    color: var(--ink);
    opacity: .65;
    cursor: pointer;
}
.texi-azione-piccola:hover {
    opacity: 1;
    border-color: var(--line);
    color: var(--btn-primary);
}

.texi-tabella .k-grid { border: none; font-size: .82rem; }
.texi-tabella .k-grid td, .texi-tabella .k-grid th { padding: 5px 8px; }

/* ==========================================================================
   Texi: la sezione amministrativa, drill-down e dettaglio
   --------------------------------------------------------------------------
   Le cifre in cima erano <dd> di testo puro. Adesso sono <button>, e la
   differenza non e' estetica: cliccare sul «33% non lo so» porta all'elenco
   filtrato su quella condizione, con la cifra e le righe che vengono dalla
   stessa query - cosi' non possono raccontare due cose diverse.

   Il pannello di dettaglio mostra IL RAGIONAMENTO, non solo il risultato. Un
   passo «Rifiutata» e' la riga piu' interessante di tutte: nel testo della
   risposta non compare mai, perche' il modello poi si corregge e racconta solo
   il tentativo riuscito.
   ========================================================================== */

.texi-cifra-cliccabile {
    text-align: left;
    border: 1px solid var(--line);
    background: var(--card-bg);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color .15s, transform .1s;
}
.texi-cifra-cliccabile:hover {
    border-color: var(--btn-primary);
    transform: translateY(-1px);
}
.texi-cifra-cliccabile:active { transform: none; }

/* Le cifre senza fonte: se non sono zero, si vedono da lontano. */
.texi-cifra.texi-allarme { border-color: var(--danger); }
.texi-cifra.texi-allarme dd { color: var(--danger); }

.filter-item-wide { flex: 1 1 260px; }

.texi-costo { font-variant-numeric: tabular-nums; opacity: .8; }

/* --- il pannello di dettaglio --- */
.texi-dett-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    font-size: .85rem;
}
.texi-dett-tema {
    padding: 2px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--btn-primary) 12%, transparent);
    color: var(--accent-strong);
}
.texi-dett-blocco { margin-top: 14px; }
.texi-dett-blocco h4 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
    margin: 0 0 6px;
}
.texi-dett-domanda { font-size: 1.02rem; font-weight: 600; margin: 0; }
.texi-dett-risposta { font-size: .9rem; line-height: 1.5; }
.texi-dett-risposta table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.texi-dett-risposta th, .texi-dett-risposta td {
    border: 1px solid var(--line); padding: 4px 8px; font-size: .82rem;
}

/*  I passi, in ordine. Il colore dice l'esito a colpo d'occhio: una query
    rifiutata in mezzo a una risposta riuscita e' la cosa da notare per prima.  */
.texi-passi { margin: 0; padding-left: 20px; }
.texi-passo { margin-bottom: 8px; font-size: .84rem; }
.texi-passo-nome { font-weight: 600; }
.texi-passo-arg { opacity: .75; margin-left: 6px; }
.texi-passo-esito {
    margin-left: 8px; padding: 1px 7px; border-radius: 9px; font-size: .74rem;
    background: color-mix(in srgb, var(--btn-primary) 12%, transparent);
    color: var(--accent-strong);
}
.texi-passo-rifiutata .texi-passo-esito { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.texi-passo-errore   .texi-passo-esito { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.texi-passo-vuoto    .texi-passo-esito { background: color-mix(in srgb, var(--warning, #e0a800) 16%, transparent); color: var(--warning, #a07800); }
.texi-passo-righe, .texi-passo-ms { margin-left: 8px; opacity: .55; font-size: .76rem; }
.texi-passo-sql {
    margin: 5px 0 0;
    padding: 6px 9px;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    border-radius: 6px;
    font-size: .76rem;
    white-space: pre-wrap;
    max-height: 160px;
    overflow: auto;
}

.texi-dett-misure {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: .82rem;
    opacity: .85;
}
.texi-pollice-su  { color: var(--btn-primary); }
.texi-pollice-giu { color: var(--danger); }

/*  Una finestra non ha un tetto d'altezza suo: senza questo, un dettaglio con
    dieci passi esce dallo schermo e il piede diventa irraggiungibile. E' la
    stessa trappola gia' pagata sulle finestre del configuratore prezzi.  */
.texi-dettaglio .k-window-content { max-height: 68vh; overflow-y: auto; }

/* ==========================================================================
   TEXI - IL COSTRUTTORE DI QUERY
   --------------------------------------------------------------------------
   «Deve essere un sistema sempre da utilizzare anche per chi non sa scrivere
    sql.»

   Quello che questo foglio deve ottenere e' una cosa sola: che la persona
   guardi le cose nell'ordine giusto. L'SQL sta in un <details> chiuso e la
   spiegazione in italiano sta aperta e grande - l'inverso di come lo
   disegnerebbe uno sviluppatore, e il motivo per cui la pagina e' usabile da
   chi l'SQL non lo legge.

   Nessun colore letterale: tutto passa dai token, e l'accento da --btn-primary
   cosi' segue il tema per ruolo (blu utente, verde direzione, rosso admin).
   ========================================================================== */

.texi-costruttore { display: flex; flex-direction: column; gap: 12px; }

/* --- la barra dei passi ---------------------------------------------------
   Un passo bloccato resta VISIBILE e spento, non sparisce: vedere che ci sono
   cinque passi e che al terzo si e' fermi spiega dove si e' arrivati. Un passo
   che compare solo quando e' raggiungibile fa credere ogni volta di essere
   all'ultimo.                                                              */
.texi-passi {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 12px;
    background: var(--card-bg); border: 1px solid var(--line);
}
.texi-passo {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 8px; border-radius: 999px;
    border: 1px solid var(--line); background: transparent;
    color: var(--ink); font-size: .86rem; cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s;
}
.texi-passo:hover:not(.bloccato) { border-color: var(--btn-primary); }
.texi-passo.attivo {
    border-color: var(--btn-primary);
    background: color-mix(in srgb, var(--btn-primary) 12%, transparent);
    font-weight: 600;
}
.texi-passo.bloccato { opacity: .42; cursor: not-allowed; }
.texi-passo-numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 12%, transparent);
    font-size: .78rem; font-weight: 700;
}
.texi-passo.fatto .texi-passo-numero { background: var(--btn-primary); color: #fff; }
.texi-passo.attivo .texi-passo-numero { background: var(--btn-primary); color: #fff; }

/* --- i campi -------------------------------------------------------------- */
.texi-riga-campi { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.texi-campo, .texi-campo-largo { display: flex; flex-direction: column; gap: 4px; }
.texi-campo-largo { width: 100%; }
.texi-campo label, .texi-campo-largo label {
    font-size: .8rem; font-weight: 600; color: var(--ink);
}
.texi-campo small, .texi-campo-largo small { max-width: 640px; line-height: 1.45; }

/* --- la spiegazione, che e' il pezzo che conta ----------------------------
   Grande e in evidenza. E' l'unica cosa su cui chi non legge l'SQL puo' dire
   «no, non e' questo che volevo», ed e' quindi il vero contenuto della
   pagina - non un contorno del codice.                                     */
.texi-spiegazione {
    padding: 14px 16px; border-radius: 10px;
    background: color-mix(in srgb, var(--btn-primary) 8%, var(--card-bg));
    border-left: 4px solid var(--btn-primary);
}
.texi-spiegazione h4 { margin: 0 0 6px; font-size: .82rem; text-transform: uppercase;
                       letter-spacing: .04em; opacity: .75; }
.texi-spiegazione p { margin: 0; font-size: 1.02rem; line-height: 1.55; }

/* --- il numero atteso ----------------------------------------------------- */
.texi-attesa {
    padding: 14px 16px; border-radius: 10px;
    border: 1px dashed var(--line); background: var(--card-bg);
    display: flex; flex-direction: column; gap: 10px;
}
.texi-attesa h4 { margin: 0; font-size: .95rem; }

/* --- l'SQL, chiuso per difetto -------------------------------------------- */
.texi-sql { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
            background: var(--card-bg); }
.texi-sql > summary { cursor: pointer; font-size: .86rem; opacity: .8; user-select: none; }
.texi-sql-testo textarea {
    font-family: Consolas, "Courier New", monospace !important;
    font-size: .84rem !important; line-height: 1.45 !important;
}

/* --- le tabelle disponibili ----------------------------------------------- */
.texi-tabelle-elenco { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.texi-tabella-chip {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 12px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--card-bg); font-size: .8rem;
}
.texi-tabella-chip span { opacity: .65; font-size: .74rem; }

/* --- l'esito della prova -------------------------------------------------- */
.texi-prova-esito { padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; }
.texi-prova-esito.buona  { background: var(--md-sys-color-success-container);
                           color: var(--md-sys-color-success); }
.texi-prova-esito.cattiva { background: var(--md-sys-color-error-container);
                            color: var(--md-sys-color-error); }

/* --- l'anteprima delle righe ---------------------------------------------
   Una tabella nuda e non una TelerikGrid: qui si guardano quindici righe per
   capire se sono i dati giusti, non si pagina, non si ordina e non si
   esporta. Una griglia vera prometterebbe cose che a questo passo non
   servono.                                                                 */
.texi-anteprima { width: 100%; border-collapse: collapse; font-size: .82rem; }
.texi-anteprima th, .texi-anteprima td {
    padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: left;
    white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis;
}
.texi-anteprima th { font-weight: 600; opacity: .8; position: sticky; top: 0;
                     background: var(--card-bg); }

/* --- da dove viene il livello --------------------------------------------
   «query» e' l'unico che deve saltare all'occhio: sono i calcoli, quelli su
   cui nessuna regola puo' decidere e che vanno guardati a mano. Gli altri due
   sono conferme, e una conferma che grida quanto un allarme insegna a
   ignorare gli allarmi.                                                    */
.texi-fonte {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: .7rem; text-transform: lowercase; border: 1px solid var(--line);
}
.texi-fonte.dizionario { opacity: .7; }
.texi-fonte.persona    { opacity: .7; }
.texi-fonte.query      { border-color: var(--md-sys-color-warning);
                         background: var(--md-sys-color-warning-container); color: #854d0e; }
.texi-fonte.predefinito { border-color: var(--md-sys-color-error);
                          background: var(--md-sys-color-error-container);
                          color: var(--md-sys-color-error); }

/* --- il verdetto ---------------------------------------------------------- */
.texi-verdetto { font-size: 1.05rem; font-weight: 600; padding: 10px 14px;
                 border-radius: 8px; margin-bottom: 10px; }
.texi-verdetto.buono   { background: var(--md-sys-color-success-container);
                         color: var(--md-sys-color-success); }
.texi-verdetto.cattivo { background: var(--md-sys-color-warning-container); color: #854d0e; }
.texi-verdetto-cattivo { color: var(--md-sys-color-error); font-weight: 600; }

.texi-controlli { list-style: none; padding: 0; margin: 0; display: flex;
                  flex-direction: column; gap: 6px; }
.texi-controlli li { padding-left: 26px; position: relative; font-size: .88rem; }
.texi-controlli li::before {
    position: absolute; left: 0; top: 0; font-weight: 700;
}
.texi-controlli li.si::before { content: "\2713"; color: var(--md-sys-color-success); }
.texi-controlli li.no::before { content: "\2717"; color: var(--md-sys-color-error); }
.texi-controlli li.no { color: var(--md-sys-color-error); }

/* --- il semaforo nell'elenco ---------------------------------------------- */
.texi-semaforo { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.texi-semaforo.verde  { background: var(--md-sys-color-success); }
.texi-semaforo.giallo { background: var(--md-sys-color-warning); }
.texi-semaforo.rosso  { background: var(--md-sys-color-error); }
.texi-semaforo.grigio { background: color-mix(in srgb, var(--ink) 28%, transparent); }

.texi-ricontrollo-riga {
    font-size: .84rem; padding: 4px 0; border-bottom: 1px solid var(--line);
    font-family: Consolas, "Courier New", monospace;
}
.texi-ricontrollo-riga:last-child { border-bottom: none; }

/* ==========================================================================
   CRM
   --------------------------------------------------------------------------
   Solo token, nessun colore letterale: l'accento e' --btn-primary, che segue
   il tema per ruolo, cosi' la stessa schermata resta blu per il commerciale e
   rossa per l'amministratore senza una riga in piu'.

   Le classi qui sotto servono a tre schermate che il resto del progetto non
   aveva: la scheda cliente a 360 gradi (una griglia di riquadri che si
   riordina da sola quando lo schermo si stringe), l'imbuto delle trattative, e
   la schermata d'invio di una campagna, dove la cosa piu' importante e' che si
   VEDA quanti destinatari escono e perche'.
   ========================================================================== */

/* --- la scheda a 360 gradi ------------------------------------------------ */
.crm-scheda { display: grid; gap: 12px; grid-template-columns: repeat(12, 1fr); }
.crm-scheda > .crm-blocco { grid-column: span 12; }
@media (min-width: 1100px) {
    .crm-scheda > .crm-blocco.meta  { grid-column: span 6; }
    .crm-scheda > .crm-blocco.terzo { grid-column: span 4; }
}

.crm-blocco {
    background: var(--card-bg);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level1);
    overflow: hidden;
}
.crm-blocco > h2 {
    font: var(--md-sys-typescale-title-small); font-weight: 600;
    margin: 0; padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 8px;
}
.crm-blocco > h2 i { color: var(--btn-primary); }
.crm-blocco > .corpo { padding: 12px 16px; }

/* Le cifre della testata. Sono grandi perche' sono la risposta alla domanda
   con cui si apre la scheda: quanto vale questo cliente, e come sta. */
.crm-cifre { display: flex; flex-wrap: wrap; gap: 12px; }
.crm-cifra {
    flex: 1 1 150px; min-width: 130px;
    padding: 12px 14px; border-radius: var(--r);
    background: var(--md-sys-color-surface-container-low);
    border-left: 3px solid var(--btn-primary);
}
/* display:block e non inline: l'etichetta e il valore sono <span>, e da
   inline si attaccano - «CODICE CLIENTE1601115» invece di due righe. Il
   margin-top su un elemento inline, per giunta, non ha nessun effetto. */
.crm-cifra .etichetta {
    display: block;
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em;
    line-height: 1.3;
}
.crm-cifra .valore {
    display: block;
    font-size: var(--crm-fs-cifra); line-height: 1.2;
    color: var(--ink); font-weight: 700; margin-top: 2px;
    overflow-wrap: anywhere;
}
/*  display:block per la stessa ragione di .etichetta: le note sono <span>, e
    da inline due note di seguito si attaccavano - «26,7%Media aziendale».  */
.crm-cifra .nota { display: block; font-size: var(--crm-fs-nota); color: var(--ink-3); margin-top: 2px; }
.crm-cifra.su   { border-left-color: var(--md-sys-color-success); }
.crm-cifra.giu  { border-left-color: var(--md-sys-color-error); }
.crm-cifra.muta { border-left-color: var(--line); }

/* Il dato che non c'e' non e' uno zero: si scrive, e si scrive in grigio. */
.crm-nd { color: var(--ink-3); font-style: italic; }

/* --- l'imbuto ------------------------------------------------------------- */
.crm-imbuto { display: flex; flex-direction: column; gap: 6px; }
.crm-imbuto-fase {
    display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
    align-items: center; padding: 8px 12px; border-radius: var(--r);
    background: var(--md-sys-color-surface-container-low);
    position: relative; overflow: hidden;
}
/* La barra e' proporzionale al valore PESATO, non al valore pieno: e' l'unico
   numero che ha senso sommare su un imbuto. */
.crm-imbuto-fase .barra {
    position: absolute; inset: 0 auto 0 0;
    background: color-mix(in srgb, var(--btn-primary) 16%, transparent);
    z-index: 0;
}
.crm-imbuto-fase > * { position: relative; z-index: 1; }
.crm-imbuto-fase .nome { font-weight: 600; }
.crm-imbuto-fase .conteggio { color: var(--ink-2); font-size: var(--crm-fs-nota); }
.crm-imbuto-fase .valore { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- pastiglie di stato --------------------------------------------------- */
.crm-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: var(--md-sys-shape-corner-full);
    font-size: var(--crm-fs-nota); font-weight: 600; white-space: nowrap;
}
.crm-chip.neutro   { background: var(--md-sys-color-surface-container-high); color: var(--ink-2); }
.crm-chip.buono    { background: var(--md-sys-color-success-container); color: var(--md-sys-color-success); }
.crm-chip.avviso   { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-warning); }
.crm-chip.male     { background: var(--md-sys-color-error-container); color: var(--md-sys-color-error); }
.crm-chip.accento  { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-primary); }

/* --- il diario ------------------------------------------------------------ */
.crm-diario { display: flex; flex-direction: column; }
.crm-diario-riga {
    display: grid; grid-template-columns: 92px 1fr; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.crm-diario-riga:last-child { border-bottom: none; }
.crm-diario-riga .quando {
    font-size: var(--crm-fs-nota); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.crm-diario-riga .cosa .titolo { font-weight: 600; }
.crm-diario-riga .cosa .testo {
    font-size: var(--crm-fs-testo); color: var(--ink-2); margin-top: 3px;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.crm-diario-riga.scaduta .quando { color: var(--md-sys-color-error); font-weight: 600; }

/* --- la schermata d'invio ------------------------------------------------- */
/* Il conteggio degli ammessi e degli esclusi e' la cosa piu' importante della
   pagina: un numero di destinatari piu' basso del previsto va spiegato PRIMA
   di mandare, non scoperto dopo. */
.crm-verdetto { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.crm-verdetto .voce {
    flex: 1 1 140px; padding: 10px 14px; border-radius: var(--r);
    background: var(--md-sys-color-surface-container-low);
}
.crm-verdetto .voce .n {
    font-size: var(--crm-fs-cifra); font-weight: 700; line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.crm-verdetto .voce .et { font-size: var(--crm-fs-nota); color: var(--ink-3); }
.crm-verdetto .voce.blocca { background: var(--md-sys-color-error-container); }
.crm-verdetto .voce.blocca .n { color: var(--md-sys-color-error); }

.crm-impedimenti { list-style: none; margin: 0 0 12px; padding: 0;
                   display: flex; flex-direction: column; gap: 6px; }
.crm-impedimenti li {
    padding: 8px 12px 8px 32px; position: relative; border-radius: var(--r);
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error); font-size: var(--crm-fs-testo);
}
.crm-impedimenti li::before {
    content: "\26A0"; position: absolute; left: 12px; top: 8px; font-weight: 700;
}

/* L'anteprima del messaggio sta in un iframe e non in un innerHTML: e' HTML che
   viene da fuori, e non lo si lascia girare dentro la pagina. */
.crm-anteprima {
    width: 100%; height: 520px; border: 1px solid var(--line);
    border-radius: var(--r); background: #ffffff;
}

/* --- filtri del CRM ------------------------------------------------------- */
.crm-filtri { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.crm-filtro { display: flex; flex-direction: column; gap: 4px; }
.crm-filtro > label {
    font: var(--md-sys-typescale-label-small); color: var(--ink-3);
}
.crm-num { font-variant-numeric: tabular-nums; }
.crm-muted { color: var(--ink-3); font-size: var(--crm-fs-nota); }

/* =============================================================
   CRM - l'avanzamento del campione, e le cifre che si aprono
   =============================================================
   Una cifra su cui si puo' cliccare deve DIRLO prima del clic, o nessuno ci
   prova: il cursore e il bordo che si accende sono tutta la differenza fra un
   cruscotto e un foglio di numeri. Il colore viene dai token, come sempre.  */
.crm-cifra.cliccabile {
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.crm-cifra.cliccabile:hover {
    border-left-color: var(--btn-primary);
    background-color: var(--card-bg);
}
.crm-cifra.cliccabile:focus-visible {
    outline: 2px solid var(--btn-primary);
    outline-offset: 2px;
}

/* Il giallo dell'avviso: usato dall'esposizione quando il fido e' quasi
   esaurito, che non e' ancora un problema ma non e' piu' una tranquillita'. */
.crm-cifra.avviso { border-left-color: var(--md-sys-color-warning, #b8860b); }
.crm-chip.avviso {
    background: color-mix(in srgb, var(--md-sys-color-warning, #b8860b) 14%, transparent);
    color: var(--md-sys-color-warning, #b8860b);
}
.crm-chip.neutro {
    background: color-mix(in srgb, var(--ink-3) 12%, transparent);
    color: var(--ink-2);
}

/* La riga di un passo dell'avanzamento porta i bottoni a destra: senza questo
   finiscono sotto il testo e la colonna delle date si disallinea. */
.crm-diario-riga .header-buttons { margin-left: auto; align-self: center; }

/* Il titolo di una griglia dentro una .grid-card: la configurazione ne ha due
   una sotto l'altra e senza un'intestazione non si capisce dove finisce la
   prima. Prende la stessa tipografia degli altri titoli di blocco. */
.crm-blocco-titolo {
    font: var(--md-sys-typescale-title-small); font-weight: 600;
    color: var(--ink); margin: 0 0 8px 0; padding: 0;
}

/* =============================================================
   CRM - la pagina di feedback, che la vede un cliente
   =============================================================
   E' l'unica schermata del progetto che apre qualcuno che non e' un utente
   dell'intranet, e va trattata come tale: piu' larga della scheda di login,
   perche' undici bottoni in fila su un telefono devono starci, e senza niente
   che somigli a un pannello di amministrazione. */
.feedback-card { max-width: 560px; }

.feedback-scala {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center; margin: 18px 0 4px 0;
}

/* Il bottone del voto e' grande abbastanza da premersi col pollice: 44px e' il
   minimo che le linee guida di accessibilita' danno per un'area toccabile, e
   sotto quella misura si sbaglia numero. */
.feedback-voto {
    min-width: 44px; min-height: 44px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--card-bg); color: var(--ink);
    font: var(--md-sys-typescale-title-small);
    cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
}
.feedback-voto:hover { border-color: var(--btn-primary); }
.feedback-voto.scelto {
    background: var(--btn-primary); border-color: var(--btn-primary); color: #fff;
}
.feedback-voto:focus-visible { outline: 2px solid var(--btn-primary); outline-offset: 2px; }

/* Gli estremi della scala sotto i bottoni: senza, «0» e «10» non dicono in
   quale verso vada letta la domanda, e c'e' chi risponde 0 intendendo 10. */
.feedback-estremi {
    display: flex; justify-content: space-between;
    color: var(--ink-3); font-size: .82rem; margin-bottom: 14px;
}

/* ===========================================================================
   I reclami: le code e la scheda

   Poco CSS, e non per pigrizia: quasi tutto quello che serve esiste gia' -
   .crm-cifre per i riquadri, .crm-chip per le etichette di stato, .crm-nd per
   il «non disponibile». Qui c'e' solo quello che le due schermate nuove
   aggiungono davvero.

   Tutto passa dai token: --btn-primary segue il tema per ruolo, e un colore
   letterale qui dentro resterebbe blu anche per un amministratore.
   =========================================================================== */

/*  Un riquadro di coda si preme: e' il gesto principale dell'elenco, e deve
    sembrarlo prima di essere provato.  */
.coda-cliccabile { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.coda-cliccabile:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.coda-cliccabile:focus-visible { outline: 2px solid var(--btn-primary); outline-offset: 2px; }

/*  I bottoni del passo avanti, uno per riga con accanto scritto dove porta.
    In colonna e non in fila: sono decisioni, non una barra di strumenti, e
    leggerle una per una e' esattamente il ritmo giusto.  */
.crm-azioni { display: flex; flex-direction: column; gap: 10px; }
.crm-azione { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/*  La griglia dei campi della scheda: due colonne su schermo largo, una sola
    quando non ci sta. `auto-fit` invece di un numero fisso perche' i blocchi
    hanno da due a sei campi e un numero fisso lascerebbe buchi.  */
.crm-scheda-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px 24px;
    margin: 12px 0 18px;
}
.crm-campo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-campo > .etichetta {
    font-size: var(--crm-fs-etichetta); text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-3);
}
.crm-campo > .valore { font-size: var(--crm-fs-testo); color: var(--ink); word-break: break-word; }

/*  Il testo del reclamo e' quello che il cliente ha scritto, e va letto:
    a capo conservati, larghezza limitata perche' una riga lunga tutto lo
    schermo non si segue con gli occhi.  */
.crm-testo-lungo {
    white-space: pre-wrap;
    max-width: 88ch;
    line-height: 1.55;
    color: var(--ink);
    margin: 6px 0 16px;
}

/*  Dentro un riquadro .crm-cifra il valore e' pensato per un numero: quando e'
    un nome di stato o una ragione sociale va rimpicciolito, o esce dal box.  */
.crm-cifra .crm-valore-testo {
    font-size: var(--crm-fs-titolo);
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

/*  Il ritardo si vede senza doverlo cercare, ed e' l'unica evidenza forte
    dell'elenco: tutto il resto e' neutro di proposito.  */
.crm-ritardo { color: var(--md-sys-color-error, #b3282d); font-weight: 600; }

/*  Una spunta con la sua etichetta dentro la riga dei filtri. TelerikCheckBox
    non ha una Label sua: l'idioma di casa e' un <label> vero attorno.  */
.crm-spunta { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.crm-spunta > span { font-size: var(--crm-fs-testo); color: var(--ink); }


/* ========================================================================
   I gruppi della barra a sinistra
   ------------------------------------------------------------------------
   Il CRM porta undici voci su ventuno: senza un modo di chiuderle, la barra
   diventa un elenco da scorrere e la voce che serve non si trova piu' a
   colpo d'occhio. Qui c'e' solo l'apparenza del gruppo - chi decide cosa sta
   dentro e' MenuService.

   Le regole si appoggiano a .nav-item, che porta gia' forma, colori e
   transizioni: un gruppo deve sembrare la stessa barra, non un pezzo
   incollato. Nessun colore letterale, come per il resto del foglio.
   ======================================================================== */

.nav-group { display: block; }

/*  La testa e' due bersagli affiancati: il nome porta al cruscotto, la
    freccia apre. Sono separati perche' fanno due cose diverse, e un solo
    bersaglio che le facesse entrambe ne farebbe una a caso.  */
.nav-group-head {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-group-head > .nav-group-link {
    flex: 1;
    min-width: 0;
    margin-right: 0;
    width: auto;
}

.nav-group-head > .nav-group-link .nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-group-head.active > .nav-group-link {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.nav-group-caret {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 4px 12px 4px 0;
    padding: 0;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background var(--md-sys-motion-duration-short4),
                color var(--md-sys-motion-duration-short4),
                transform var(--md-sys-motion-duration-short4);
}

.nav-group-caret:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.nav-group-caret i { font-size: .9rem; }

/*  La freccia punta in basso quando e' aperto: e' la convenzione che la gente
    ha gia' in mano da ogni altro menu, e non va reinventata.  */
.nav-group:not(.open) .nav-group-caret i { transform: rotate(-90deg); }

/*  Il filo verticale a sinistra dice dove finisce il gruppo. Senza, le voci
    rientrate sembrano voci di primo livello scritte male.  */
.nav-group-items {
    margin: 2px 0 6px 26px;
    padding-left: 8px;
    border-left: 1px solid var(--sidebar-border);
}

.nav-subitem {
    padding: 9px 14px;
    margin: 2px 8px 2px 0;
    width: calc(100% - 8px);
    font-size: .92rem;
    color: rgba(255, 255, 255, 0.72);
}

.nav-subitem i { font-size: 1rem; width: 20px; }

/*  Barra ridotta a sole icone: i figli non hanno dove stare e la freccia non
    ha piu' niente da aprire. Resta l'icona della testa, che porta al
    cruscotto - da li' si riapre la barra e si sceglie.  */
.sidebar.collapsed .nav-group-items,
.app-layout.sidebar-collapsed .nav-group-items,
.sidebar.collapsed .nav-group-caret,
.app-layout.sidebar-collapsed .nav-group-caret {
    display: none;
}

.sidebar.collapsed .nav-group-head > .nav-group-link,
.app-layout.sidebar-collapsed .nav-group-head > .nav-group-link {
    width: calc(100% - 8px);
}

/* ========================================
   Texi: il selettore della forma del grafico

   Sta sopra il grafico e non in un menu: cambiare tipo e' la cosa che si fa
   piu' spesso dopo averlo visto, e una scelta nascosta e' una scelta che
   nessuno scopre.
   ======================================== */
.texi-grafico-tipi {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 4px 8px;
    flex-wrap: wrap;
}

.texi-grafico-tipo {
    display: grid;
    place-items: center;
    width: 28px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--card-bg);
    color: var(--ink-3);
    cursor: pointer;
    font-size: .8rem;
    padding: 0;
}
.texi-grafico-tipo:hover { color: var(--ink); border-color: var(--md-sys-color-outline); }
.texi-grafico-tipo.attivo {
    background: var(--md-sys-color-primary-container);
    border-color: var(--btn-primary);
    color: var(--md-sys-color-on-primary-container);
}

/*  Il perche' della forma consigliata, accanto ai bottoni: chi cambia deve
    sapere cosa sta scartando, se no cambia a caso e poi non sa tornare. */
.texi-grafico-perche {
    margin-left: 8px;
    font-size: .74rem;
    color: var(--ink-3);
    font-style: italic;
    flex: 1 1 240px;
    min-width: 0;
}

.texi-solo-pdf { display: flex; justify-content: flex-end; margin-top: 6px; }

/* ===========================================================================
   TEXI - L'ARCHIVIO DELLE CHAT
   ===========================================================================
   Prima di questo un F5 buttava via la conversazione. Adesso sta a database e
   si sceglie da un elenco, come in qualunque assistente: chat nuova, titolo che
   si riscrive, cancellazione con la conferma.

   DUE LARGHEZZE, UN COMPONENTE. Nella pagina a tutto schermo l'elenco sta in
   una colonna a sinistra e la conversazione a destra - e' quello che la pagina
   ha in piu' del pannello, cioe' lo spazio. Nel pannello da 420 pixel una
   colonna a lato lascerebbe due strisce illeggibili, quindi l'elenco PRENDE IL
   POSTO della conversazione, che resta montata sotto (`.texi-nascosto` e non un
   `@if`: smontarla perderebbe il grafico aperto, la forma scelta e l'aggancio
   dello scorrimento a ogni sbirciata).

   NIENTE COLORI LETTERALI: tutto passa dai token, e l'accento da --btn-primary,
   che segue il tema per ruolo. Un colore scritto qui resterebbe blu anche per
   un amministratore.
   =========================================================================== */

/* --- il contenitore, nelle due larghezze --- */
.texi-archivio {
    display: flex;
    flex-direction: column;
    min-height: 0;              /* se no il figlio che scorre spinge il flex */
    background: var(--card-bg);
}
/* Nel pannello l'archivio prende tutto lo spazio della conversazione. */
.texi-pannello > .texi-archivio { flex: 1 1 auto; overflow: hidden; }
.texi-archivio-largo { height: 100%; }

/* La conversazione resta montata sotto, e sotto vuol dire nascosta. */
.texi-sotto { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.texi-sotto.texi-nascosto { display: none; }

.texi-archivio-testa {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.texi-archivio-nuova {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--btn-primary);
    border-radius: 9px;
    background: transparent;
    color: var(--btn-primary);
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
}
.texi-archivio-nuova:hover { background: var(--btn-primary); color: #fff; }
.texi-archivio-nuova:disabled { opacity: .45; cursor: default; background: transparent; color: var(--btn-primary); }

.texi-archivio-vuoto {
    padding: 18px 14px;
    font-size: .82rem;
    color: var(--ink-3);
    line-height: 1.5;
}

.texi-archivio-elenco {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* --- una riga --- */
/*  I bottoni di azione compaiono al passaggio del mouse e restano SEMPRE
    visibili su schermo tattile: su un tablet non c'e' nessun passaggio del
    mouse, e un'azione che si scopre solo passandoci sopra li' non esiste. */
.texi-chat {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    padding: 2px 4px 2px 2px;
}
.texi-chat:hover { background: var(--md-sys-color-surface-container-low, rgba(0,0,0,.04)); }
.texi-chat.attiva { background: var(--md-sys-color-primary-container); }
.texi-chat.attiva .texi-chat-titolo { color: var(--md-sys-color-on-primary-container); font-weight: 600; }

.texi-chat-apri {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    background: none;
    border: none;
    padding: 7px 8px;
    cursor: pointer;
    text-align: left;
}
.texi-chat-apri:disabled { cursor: default; opacity: .6; }

.texi-chat-titolo {
    font-size: .84rem;
    color: var(--ink);
    line-height: 1.3;
    /* Una riga sola: un titolo lungo si legge nel suggerimento del mouse, e un
       elenco in cui ogni voce ha un'altezza diversa non si scorre con l'occhio. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.texi-chat-quando { font-size: .7rem; color: var(--ink-3); }

.texi-chat-azioni { display: flex; gap: 1px; flex: 0 0 auto; opacity: 0; }
.texi-chat:hover .texi-chat-azioni,
.texi-chat.attiva .texi-chat-azioni { opacity: 1; }
@media (hover: none) { .texi-chat-azioni { opacity: 1; } }

.texi-pericolo { color: var(--md-sys-color-error, #b3261e); }

.texi-chat-conferma {
    flex: 1 1 auto;
    padding: 7px 8px;
    font-size: .8rem;
    color: var(--ink);
}

.texi-chat-titolo-modifica {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--btn-primary);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--ink);
    font-size: .84rem;
    font-family: inherit;
}

/* --- la pagina a tutto schermo: elenco a sinistra, discorso a destra --- */
.texi-pagina-corpo {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 12px;
    /* la testata della pagina, il piede dell'applicazione e i margini */
    height: calc(100vh - 210px);
    min-height: 380px;
}
.texi-pagina-corpo > .grid-card { min-height: 0; margin: 0; }
.texi-colonna-archivio { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

/*  L'elenco chiuso, e lo schermo stretto: sotto i mille pixel una colonna da
    268 lascia alla conversazione una striscia in cui una tabella di dodici
    clienti non si legge - che e' l'unica cosa che questa pagina guadagna sul
    pannello. Si nasconde, e il bottone in testata la riapre. */
.texi-senza-elenco { grid-template-columns: minmax(0, 1fr); }
.texi-senza-elenco .texi-colonna-archivio { display: none; }

@media (max-width: 1000px) {
    .texi-pagina-corpo { grid-template-columns: minmax(0, 1fr); }
    .texi-pagina-corpo .texi-colonna-archivio { display: none; }
}

/*  Dentro la griglia a due colonne l'altezza la da' la griglia, non un calcolo
    ripetuto: due numeri scritti a mano che devono restare uguali divergono. */
.texi-pagina-corpo .texi-pagina-conversazione { height: auto; min-height: 0; }

/* Il titolo della conversazione in testata, accanto al nome. */
.texi-titolo-corrente {
    font-size: .86rem;
    color: var(--ink-3);
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Il bottone dell'archivio acceso, nella barra del pannello. */
.texi-azione-attiva { background: rgba(255, 255, 255, .22); opacity: 1; }

/*  L'avviso della storia parziale: una conversazione ripresa dall'archivio in
    cui manca il dettaglio delle interrogazioni. Si dichiara, invece di lasciarlo
    scoprire da una risposta che non ricorda quello che dovrebbe. */
.texi-avviso-ripresa {
    margin: 0 0 10px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-strong);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--ink-3);
    font-size: .78rem;
    line-height: 1.45;
}

/* ==========================================================================
   Profilo di lettura del vettore  (/CarrierProfile/{id})
   --------------------------------------------------------------------------
   La schermata dove si dice quale colonna della fattura e' cosa. Due colonne
   affiancate perche' le due meta' si guardano insieme: la mappa a sinistra e
   il documento come il lettore l'ha interpretato a destra - mappare senza
   vedere le righe e' indovinare.

   Sotto i 1200px vanno una sopra l'altra: la tabella di anteprima e' larga
   per natura, e stringerla la rende illeggibile invece di farla stare.
   ========================================================================== */

.prof-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: start;
}

@media (max-width: 1200px) {
    .prof-layout { grid-template-columns: 1fr; }
}

.prof-h2 {
    margin: 0 0 4px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
}

.prof-h2:not(:first-child) { margin-top: 18px; }

.prof-nota { margin: 0 0 10px; font-size: .78rem; }

.prof-doc { min-width: 420px; flex: 1 1 420px; }

/*  Un campo della mappa: il nome a sinistra, il controllo e le sue opzioni a
    destra. Griglia e non flex perche' i nomi hanno lunghezze molto diverse e
    allineare le colonne fa leggere l'elenco come un elenco.  */
.prof-campo {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 10px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.prof-campo:last-of-type { border-bottom: none; }

.prof-campo-nome {
    font-size: .82rem;
    color: var(--ink);
    padding-top: 6px;
}

.prof-obbl {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--accent-strong);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
}

.prof-campo-corpo { display: flex; flex-direction: column; gap: 6px; }

.prof-campo-opzioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.prof-opz {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--ink-3);
}

.prof-azioni {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

/*  L'anteprima scorre da sola, dentro il suo riquadro: una fattura DHL ha
    trentotto colonne, e senza questo la pagina scorrerebbe in orizzontale
    tutta intera, menu compreso.  */
.prof-scorri {
    overflow: auto;
    max-height: 460px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.prof-tabella {
    border-collapse: collapse;
    font-size: .74rem;
    white-space: nowrap;
}

.prof-tabella th,
.prof-tabella td {
    padding: 3px 8px;
    border-bottom: 1px solid var(--line);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prof-tabella thead th {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    color: var(--ink);
    font-weight: 600;
    text-align: left;
    z-index: 1;
}

.prof-tabella .prof-num { color: var(--ink-3); text-align: right; }


/* ==========================================================================
   Preventivatore Allestimento (/Allestimenti, /Allestimento, /AllestimentoConfig)

   Due cose qui non sono decorazione.

   La prima e' il numero BARRATO accanto a quello scritto a mano: quando
   qualcuno riscrive i metri di un telo, il calcolo resta li' accanto, sbiadito
   e sbarrato. Nel foglio Excel il numero scritto a mano cancellava la formula,
   e sei mesi dopo nessuno sapeva piu' dire se quel 66,3 fosse una scelta o un
   errore di battitura.

   La seconda sono i due disegni in SVG. Non sono immagini: sono testo, scalano
   con la pagina, si stampano, e soprattutto prendono i colori dai token - cosi'
   seguono il tema per ruolo come tutto il resto, invece di restare blu su una
   schermata rossa da amministratore.
   ========================================================================== */

/* Le due schede in testa: il lavoro e la dettatura. */
.pa-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 1100px) { .pa-layout { grid-template-columns: 1fr; } }

.pa-card   { padding: 0; overflow: hidden; margin-bottom: 12px; }
.pa-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px;
             padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pa-card-h h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.pa-card-h-dx { display: flex; align-items: center; gap: 10px; }
.pa-card-b { padding: 14px; }

.pa-row    { margin-bottom: 12px; }
.pa-row:last-child { margin-bottom: 0; }
.pa-row-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.pa-row-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
@media (max-width: 1100px) { .pa-row-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .pa-row-2, .pa-row-4 { grid-template-columns: 1fr; } }

.pa-lab    { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600;
             color: var(--md-sys-color-on-surface-variant); }
.pa-lab-2  { margin-top: 12px; }
.pa-req    { color: var(--danger); }
.pa-hint   { margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.pa-muted  { color: var(--muted); }
.pa-num    { font-variant-numeric: tabular-nums; }
.pa-forte  { font-weight: 600; color: var(--ink); }

/* Il calcolo che sopravvive alla forzatura. */
.pa-barrato { text-decoration: line-through; color: var(--muted); opacity: .75; }

.pa-h3 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink);
         text-transform: uppercase; letter-spacing: .04em; }

.pa-chip       { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
                 border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
                 margin-left: 6px; }
.pa-chip-ok    { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.pa-chip-no    { background: color-mix(in srgb, var(--danger) 14%, transparent);  color: var(--danger); }
.pa-chip-draft { background: color-mix(in srgb, var(--btn-primary) 12%, transparent); color: var(--accent-strong); }
.pa-chip-sent  { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.pa-chip-old   { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }

/* Il registro in cima all'elenco. */
.pa-registro { padding: 12px 14px; }
.pa-kpis     { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pa-kpi      { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
               background: var(--card-bg); }
.pa-kpi-lab  { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
               color: var(--muted); margin-bottom: 4px; }
.pa-kpi-val  { font-size: 20px; font-weight: 700; color: var(--ink);
               font-variant-numeric: tabular-nums; }
.pa-kpi-lead .pa-kpi-val { font-size: 26px; color: var(--accent-strong); }
.pa-kpi-sub  { margin-top: 4px; font-size: 12px; color: var(--muted); }

.pa-totale .pa-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Le tabelle dei teli e delle lavorazioni. Non sono TelerikGrid: dentro ci sono
   caselle da compilare riga per riga, e una griglia con l'editing in linea
   costringerebbe a un giro di conferma per ogni misura. */
.pa-tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.pa-tabella th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
                 letter-spacing: .03em; color: var(--muted); padding: 6px 8px;
                 border-bottom: 1px solid var(--line); white-space: nowrap; }
.pa-tabella td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pa-tabella tr:last-child td { border-bottom: 0; }
.pa-dx { text-align: right; }
.pa-riga-motivo td { padding-top: 0; border-bottom: 1px solid var(--line);
                     display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* LE COLONNE HANNO UNA LARGHEZZA DICHIARATA, e non e' pignoleria: senza, la
   larghezza di ogni colonna la decide la cella piu' piena, che cambia da una
   riga all'altra. Il numero degli occhielli finiva a meta' strada fra la sua
   intestazione e quella accanto, e un numero di cui non si sa la colonna e'
   peggio di un numero assente. `table-layout: fixed` fa rispettare queste
   misure invece di trattarle come suggerimenti. */
.pa-tabella-teli, .pa-tabella-lav { table-layout: fixed; }
.pa-c-q    { width: 82px; }    /* quanti */
.pa-c-mis  { width: 104px; }   /* altezza, larghezza */
.pa-c-rif  { width: auto; }
.pa-c-n    { width: 92px; }    /* calate, occhielli */
.pa-c-m    { width: 108px; }   /* metri */
.pa-c-pezzi{ width: 118px; }   /* la griglia dei pezzi: 2 x [1] */
.pa-c-tar  { width: 92px; }
.pa-c-tot  { width: 112px; }
.pa-c-x    { width: 60px; }
/* La colonna della lavorazione tiene il nome, i lati e il passo: e' larga
   perche' ci sta dentro tutto quello che riguarda quella riga. Lo spazio che
   avanza lo prende la MAGGIORAZIONE, che e' l'unica cella con del testo dentro:
   lasciandolo prendere alla prima, le colonne dei numeri finivano a mezzo metro
   dalla loro intestazione. */
/* La prima colonna e' larga quanto le serve - nome, quattro lati e passo su una
   riga sola - e non di piu': lo spazio che avanza lo prende la MAGGIORAZIONE,
   che ha dentro una frase, una casella e una pastiglia. */
.pa-c-lav  { width: 430px; }
.pa-c-qta  { width: 116px; }
.pa-c-um   { width: 72px; }
.pa-c-magg { width: auto; }
.pa-tabella-teli td, .pa-tabella-lav td { overflow: hidden; text-overflow: ellipsis; }
.pa-tabella-teli .pa-cella, .pa-tabella-lav .pa-cella { max-width: 100%; }

/* L'unita' di misura accanto all'intestazione o all'etichetta. Scritta piccola
   perche' non e' il dato: e' quello che dice di che dato si tratta. Su questa
   scheda convivono metri, centimetri, euro, euro al metro, ore e conteggi, e
   un 150 senza unita' accanto a delle ore si legge come ore. */
.pa-um { font-weight: 400; text-transform: none; letter-spacing: 0;
         color: var(--muted); font-size: 11px; }
.pa-lab-inline { font-size: 12px; font-weight: 600;
                 color: var(--md-sys-color-on-surface-variant); }

/* I lati di una lavorazione di bordo stanno nella SUA cella, sotto il nome.
   In una riga a parte larga quanto la tabella la scheda diventava una scala di
   righe mezze vuote, e non si capiva piu' quale riga fosse di quale lavorazione. */
.pa-lav-nome { font-weight: 500; color: var(--ink); }
.pa-lav-lati { display: flex; align-items: center; gap: 2px 12px; flex-wrap: wrap;
               margin-top: 4px; }
.pa-lav-lati .pa-check { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.pa-lav-lati .pa-check input[type=checkbox] { width: 14px; height: 14px; }
.pa-lav-passo { display: inline-flex; align-items: center; gap: 6px; }
/* Il descrittivo di «altra lavorazione»: largo quanto una frase, non quanto la
   colonna - che adesso si prende tutto lo spazio che avanza. */
.pa-lav-lati .pa-desc { max-width: 340px; }
.pa-lav-lati .pa-cella .k-input, .pa-lav-lati .pa-cella.k-input { height: 28px; min-height: 28px; }
/* Tutto centrato in verticale: le celle di una riga sono alte diverso - una ha
   tre righe di roba, le altre una casella - e allineate in alto i numeri
   sembravano appartenere alla riga di sopra. */
.pa-tabella-lav td { vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
/* La spunta della maggiorazione e il suo importo sulla STESSA riga: adesso la
   colonna e' larga abbastanza, e in due righe la tabella cresceva di un piano
   ogni volta che si spuntava. */
.pa-magg-imp { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.pa-tabella-lav .pa-check { display: inline-flex; }
.pa-tabella-lav .pa-hint { margin-top: 3px; }

/* Le tre righe che alimentano l'orlo, ognuna con il suo numero scrivibile. */
.pa-orlo-voce   { display: flex; flex-direction: column; gap: 4px; }
.pa-orlo-num    { display: flex; align-items: center; gap: 6px; }
.pa-orlo-totale { margin-left: auto; }

.pa-due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Il conto del tessuto a taglio scritto per intero: prezzo x coefficiente =
   quello che entra nel costo. Alto come una casella accanto, cosi' i due campi
   della riga restano allineati. */
.pa-conto { display: flex; align-items: center; gap: 8px; min-height: 40px;
            padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
            background: var(--md-sys-color-surface-container); font-size: 14px; }

/* Telerik da' 44px alle sue caselle: dentro una tabella diventano righe alte
   come tre. Qui si stringono, e basta farlo una volta per tutte. */
.pa-cella .k-input,
.pa-cella.k-input { height: 32px; min-height: 32px; }
.pa-cella { display: inline-block; }

.pa-azioni { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pa-azioni-grandi { margin: 0 0 12px; }

/* Le tre righe che alimentano l'orlo, con le spunte. */
.pa-orlo { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: flex-start;
           padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
           background: var(--md-sys-color-surface-container); font-size: 13px; }
.pa-check { display: inline-flex; align-items: center; gap: 6px; }
.pa-check input[type=checkbox] { accent-color: var(--btn-primary); width: 15px; height: 15px; }

/* Le due caselle a sinistra e il riepilogo a destra. Meta' e meta' era troppo
   per le caselle e troppo poco per il riepilogo: «Taglio e inscatolamento»
   andava su due righe e il simbolo dell'euro si staccava dal suo numero. Le
   caselle prendono quanto gli serve, il resto e' del riepilogo. */
.pa-riepilogo { margin-top: 16px; align-items: start; grid-template-columns: 420px 1fr; }
@media (max-width: 1100px) { .pa-riepilogo { grid-template-columns: 1fr; } }
.pa-facts        { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
                   gap: 4px 14px; }
.pa-facts b      { white-space: nowrap; }
.pa-facts > div  { display: flex; justify-content: space-between; gap: 8px;
                   padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.pa-facts span   { color: var(--muted); }
.pa-facts b      { color: var(--ink); font-variant-numeric: tabular-nums; }

.pa-alert  { margin-top: 12px; }
.pa-scarti { margin: 4px 0 0; padding-left: 18px; }
.pa-scarti li { margin: 2px 0; }

/* La riga della dettatura. Stessa forma di quella di Texi: i parziali li scrive
   il JS dentro .pa-parziale senza passare da SignalR. */
.pa-ascolto { display: flex; align-items: center; gap: 8px; min-height: 24px;
              margin-bottom: 8px; font-size: .82rem; color: var(--ink); opacity: .85; }
.pa-ascolto-spento { visibility: hidden; }
.pa-ascolto-fase { font-weight: 600; color: var(--accent-strong); white-space: nowrap; }
.pa-parziale { color: var(--ink); opacity: .7; font-style: italic; }
.pa-onda { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.pa-onda span { width: 3px; height: 4px; border-radius: 2px; background: var(--btn-primary);
                animation: pa-onda 1s ease-in-out infinite; }
.pa-onda span:nth-child(2) { animation-delay: .15s; }
.pa-onda span:nth-child(3) { animation-delay: .3s; }
@keyframes pa-onda { 0%,100% { height: 4px; } 50% { height: 14px; } }

/* I due disegni. */
.pa-schemi { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.pa-svg { width: 100%; height: auto; display: block; }
.pa-schema-vuoto { padding: 14px; color: var(--muted); font-size: 13px;
                   border: 1px dashed var(--line); border-radius: 10px; }

.pa-svg-pezza   { fill: var(--md-sys-color-surface-container); stroke: var(--line); stroke-width: 1; }
.pa-svg-calata  { stroke: var(--card-bg); stroke-width: 1; }
.pa-svg-calata-a { fill: color-mix(in srgb, var(--btn-primary) 26%, transparent); }
.pa-svg-calata-b { fill: color-mix(in srgb, var(--btn-primary) 14%, transparent); }
/* Quello che avanza in LARGHEZZA su una calata: la pezza e' alta 4,05, il telo
   ne prende 3,30, e quei 0,75 si comprano senza che diventino niente. E' scarto
   quanto la coda in fondo, e prima non si vedeva. */
.pa-svg-avanzo  { fill: color-mix(in srgb, var(--danger) 7%, transparent);
                  stroke: var(--line); stroke-dasharray: 3 3; stroke-width: 1; }
.pa-svg-sfrido  { fill: color-mix(in srgb, var(--danger) 12%, transparent);
                  stroke: var(--line); stroke-dasharray: 4 3; stroke-width: 1; }
.pa-svg-telo    { fill: color-mix(in srgb, var(--btn-primary) 10%, transparent);
                  stroke: var(--ink); stroke-width: 1.4; }
.pa-svg-orlo    { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 5 3; opacity: .55; }
.pa-svg-giunzione { stroke: var(--danger); stroke-width: 1.4; stroke-dasharray: 6 3; }
.pa-svg-pliss   { stroke: var(--accent-strong); stroke-width: 1; opacity: .7; }
.pa-svg-velcro  { fill: color-mix(in srgb, var(--success) 35%, transparent); stroke: none; }
.pa-svg-occhiello { fill: var(--card-bg); stroke: var(--ink); stroke-width: 1.3; }
.pa-svg-linea-quota { stroke: var(--muted); stroke-width: 1; }
.pa-svg-quota   { fill: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.pa-svg-quota-sub { fill: var(--muted); font-size: 11px; }
.pa-svg-etichetta { fill: var(--muted); font-size: 11px; }

/* La pagina delle tariffe. */
.pa-tariffe .pa-tabella td { padding: 6px 8px; }
.pa-tariffa-vecchia td { color: var(--muted); font-size: 12px; }
.pa-nota { padding: 12px 14px; border-left: 3px solid var(--accent-strong);
           background: var(--md-sys-color-surface-container); border-radius: 0 10px 10px 0;
           font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.pa-nota b { display: block; margin-bottom: 4px; color: var(--ink); }

/* ==========================================================================
   CRM - il cruscotto della scheda cliente, e la faccia

   La scheda cliente apre sui numeri e non sull'anagrafica: chi la apre ha
   appena cercato quel cliente per nome, la ragione sociale la sa gia'. Quello
   che gli serve e' come sta andando, e sopra ai numeri c'e' il giudizio - una
   faccia, il conto che l'ha prodotta, e i motivi uno per uno.

   I MOTIVI STANNO SOTTO LA FACCIA E NON IN UN TOOLTIP. Un giudizio su un
   cliente vero deve poter essere contestato da chi lo legge, e un titolo che
   compare passandoci sopra non si legge, non si copia in una mail e non si
   stampa. La faccia senza i motivi sarebbe la pastiglia «bloccato» da capo:
   un colore che nessuno sa spiegare.

   Nessun colore letterale: tutto dai token, cosi' i tre temi per ruolo
   continuano a funzionare.
   ========================================================================== */

.crm-faccia {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 18px;
    margin-bottom: 12px;
    background: var(--card-bg);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level1);
    border-left: 4px solid var(--line);
}

.crm-faccia > i {
    font-size: 2.6rem;
    line-height: 1;
    color: var(--muted);
    flex: 0 0 auto;
}

.crm-faccia.contento { border-left-color: var(--success); }
.crm-faccia.contento > i { color: var(--success); }
/*  Il neutro e' GRIGIO e non del colore d'accento, e la ragione e' che
    l'accento segue il tema per ruolo: su un amministratore --btn-primary e'
    rosso, e una faccia neutra rossa e' un allarme che non c'e'.  */
.crm-faccia.neutro { border-left-color: var(--ink-3); }
.crm-faccia.neutro > i { color: var(--ink-3); }
.crm-faccia.insoddisfatto { border-left-color: var(--danger); }
.crm-faccia.insoddisfatto > i { color: var(--danger); }

.crm-faccia-testo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.crm-faccia-riga { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.crm-faccia-verdetto {
    font-size: var(--crm-fs-titolo);
    font-weight: 700;
    color: var(--ink);
}

.crm-faccia-riassunto { color: var(--ink-2); font-size: var(--crm-fs-testo); }

.crm-motivi { list-style: none; margin: 4px 0 0; padding: 0; display: flex;
              flex-direction: column; gap: 3px; }

.crm-motivo { display: flex; align-items: flex-start; gap: 7px;
              font-size: var(--crm-fs-testo); line-height: 1.45; color: var(--ink); }
.crm-motivo > i { flex: 0 0 auto; margin-top: .2em; font-size: var(--crm-fs-nota); }
.crm-motivo.pos > i { color: var(--success); }
.crm-motivo.neg > i { color: var(--danger); }
.crm-motivo.pari > i { color: var(--muted); }
.crm-motivo.pari { color: var(--muted); }

/*  La pastiglia della faccia accanto al nome: si passa mezza giornata dentro
    un tab, e un giudizio che sparisce cambiando scheda non entra in nessuna
    telefonata.  */
.crm-chip.faccia.contento {
    background: var(--md-sys-color-success-container);
    color: var(--md-sys-color-success);
}
.crm-chip.faccia.neutro {
    background: color-mix(in srgb, var(--ink-3) 14%, transparent);
    color: var(--ink-2);
}
.crm-chip.faccia.insoddisfatto {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

/*  Nel cruscotto le caselle stanno in GRIGLIA e non in flex, per una ragione
    sola: con `flex: 1 1 150px` l'ultima casella di una riga spaiata si allarga
    a tutta la larghezza del blocco - quattro campioni diventano tre normali e
    uno lungo il doppio, che si legge come «questo conta di piu'». Le colonne
    si contano una volta per il blocco, e l'ultima riga resta allineata.  */
.crm-blocco .crm-cifre.griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.crm-blocco .crm-cifre.griglia > .crm-cifra { min-width: 0; }

/* ==========================================================================
   LE VISITE DETTATE  (/Crm/Visite, /Crm/Visita/{id})
   --------------------------------------------------------------------------
   Le caselle delle code (.crm-kpi*) erano USATE E NON DEFINITE: le nominano
   anche il cruscotto del CRM e la scheda cliente, e senza una regola erano tre
   div impilati - un numero e un'etichetta senza riquadro, che non si leggono
   come una casella. Definendole qui si sistemano anche quelle.

   Le pastiglie di stato NON sono qui: si usa `.crm-chip` con neutro / buono /
   avviso / accento, che il CRM ha gia'. Una seconda famiglia accanto alla prima
   e' il modo in cui due schermate della stessa applicazione finiscono per
   sembrare due applicazioni.
   ========================================================================== */

.crm-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
               gap: 10px; margin-bottom: 12px; }
.crm-kpi     { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
               background: var(--card-bg); cursor: pointer; transition: border-color .15s; }
.crm-kpi:hover      { border-color: var(--btn-primary); }
.crm-kpi-attivo     { border-color: var(--btn-primary); border-width: 2px; padding: 9px 11px; }
.crm-kpi-num { font-size: var(--crm-fs-cifra); font-weight: 700; color: var(--ink); line-height: 1.1; }
.crm-kpi-lab { font-size: var(--crm-fs-etichetta); text-transform: uppercase; letter-spacing: .04em;
               color: var(--muted); margin-top: 2px; }

/* --- si registra --------------------------------------------------------- */
.crm-registra .pa-azioni { margin-top: 10px; }

/*  Il pallino rosso pulsa perche' e' l'unica cosa che dice «sto registrando» a
    chi ha messo il telefono in tasca e lo riguarda dopo dieci minuti.  */
.crm-livello { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
               margin: 6px 0 2px; }
.crm-rec     { width: 12px; height: 12px; border-radius: 50%;
               background: var(--md-sys-color-error); animation: crm-pulsa 1.4s infinite; }
@keyframes crm-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.crm-tempo   { font-size: var(--crm-fs-cifra); font-weight: 700; font-variant-numeric: tabular-nums;
               color: var(--ink); }
.crm-perso   { color: var(--md-sys-color-warning); font-size: var(--crm-fs-nota); }

/*  Il bottone «carica un audio» e' un <label> con dentro un input invisibile:
    InputFile disegna un campo file di sistema, che accanto a un bottone
    Telerik sembra un pezzo di un'altra pagina.  */
.crm-carica  { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

/* --- la trascrizione ------------------------------------------------------ */
/*  Si legge, quindi ha una misura da lettura: interlinea larga, larghezza
    limitata, e un tetto d'altezza con lo scorrimento suo - mezz'ora di parlato
    sposterebbe di due schermate tutto quello che sta sotto.  */
.crm-trascrizione { max-height: 420px; overflow-y: auto; padding: 12px 14px;
                    border: 1px solid var(--line); border-radius: 10px;
                    background: var(--md-sys-color-surface-container-low);
                    line-height: 1.65; font-size: var(--crm-fs-testo); white-space: pre-wrap; }
.crm-trascrizione mark { background: var(--md-sys-color-primary-container);
                         color: var(--md-sys-color-primary); padding: 1px 2px;
                         border-radius: 3px; }

/* --- le cose da fare ------------------------------------------------------ */
.crm-todo td        { vertical-align: middle; }
.crm-todo-testo     { padding: 8px 10px; }
.crm-todo-azioni    { width: 110px; text-align: right; white-space: nowrap; }
.crm-rifiutato      { opacity: .55; }
.crm-rifiutato .crm-todo-testo > div:first-child { text-decoration: line-through; }
.crm-oratore        { font-style: italic; }
.crm-cita           { cursor: pointer; color: var(--btn-primary); margin-left: 6px; }
.crm-cita:hover     { text-decoration: underline; }

/*  Le scartate stanno richiuse ma CI SONO: ogni tanto la difesa sbaglia, e
    nascondere quello che si e' buttato e' come non averlo mai proposto.  */
.crm-scartate            { margin-top: 12px; }
.crm-scartate summary    { cursor: pointer; color: var(--muted); font-size: var(--crm-fs-nota); }
.crm-scartate ul         { margin: 8px 0 0 18px; }
.crm-scartate li         { margin-bottom: 6px; }
.crm-scartate li .pa-hint { display: block; }

.crm-giudizio { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
                margin: 10px 0; }
.crm-troncato { display: inline-block; max-width: 100%; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.crm-chiudi   { border-color: var(--btn-primary); }

/*  Un campo con la sua etichetta sopra. `.pa-campo` nasce nel preventivatore e
    qui serve identica: sta in questo blocco perche' e' li' che vive il resto
    del vocabolario `pa-`, e duplicarla con un nome `crm-` vorrebbe dire due
    regole per la stessa cosa.  */
.pa-campo       { display: flex; flex-direction: column; gap: 3px; }
.pa-campo label { font-size: var(--crm-fs-etichetta); text-transform: uppercase; letter-spacing: .04em;
                  color: var(--muted); }
.pa-campo-largo { flex: 1 1 320px; }
.pa-hint-dubbio { color: var(--md-sys-color-warning); }

/*  La divergenza fra chi ha parlato e su chi ricade l'obbligo: si vede, non
    blocca. E' la forma della quadratura di /CarrierProfile - un avviso che
    lascia passare, perche' due strade indipendenti che non tornano sono
    un'informazione e non un errore.  */
.crm-divergenza { margin-left: 8px; color: var(--md-sys-color-warning);
                  font-style: normal; cursor: help; }

/* ===========================================================================
   L'ANGOLO IN BASSO A DESTRA E' DI TEXI, E IL RESTO DEVE SAPERLO

   `.texi-radice` e' fixed a `right:20px; bottom:20px` con un pulsante da
   54x54: occupa stabilmente gli ultimi 74px dell'angolo, sopra qualunque
   contenuto (z-index 1200). Il footer ne copre una quarantina, quindi quello
   che resta scoperto e' la CODA di `.main-content` - ed e' li' che le schede
   della tesoreria mettono le due cose che servono di piu': la riga dei
   totali, appiccicata in fondo al contenitore scorrevole
   (`.cf-scroll-container tfoot` e' sticky), e il bottone «Excel» subito
   sotto. Il risultato era che il pulsante di Texi copriva il totale - il
   numero per cui si apre quella schermata - e stava esattamente sopra il
   bottone dell'esportazione, che diventava difficile da centrare.

   Non si sposta Texi: sta dov'e' per scelta, ed e' la stessa posizione su
   ogni pagina. Si fa spazio.

   `padding-bottom` su `.main-content` - che e' il contenitore che scorre,
   non la finestra - vuol dire che scorrendo fino in fondo l'ultima riga di
   contenuto si ferma sopra la fascia di Texi invece di restarci sotto senza
   scampo. Vale per ogni pagina, compresa quella che qualcuno scrivera'
   domani: e' la condizione, non l'elenco delle schede che oggi ne hanno
   bisogno.
   =========================================================================== */

.main-content { padding-bottom: 88px; }

/*  La riga del bottone «Excel» in coda alle tabelle della tesoreria. Era un
    `style=` ripetuto in otto punti su sei file, allineato a destra: adesso e'
    una classe sola, e sta A SINISTRA.

    A destra era proprio sotto Texi, e spostarlo di ottantaquattro pixel
    verso l'interno era solo un modo per litigare con l'angolo che non e'
    suo. A sinistra il problema non si pone piu' per costruzione, ed e' anche
    dove l'occhio torna dopo aver letto la prima colonna della tabella - che
    e' quella delle etichette.

    Il margine sopra e' quello che lo stacca dalla tabella: attaccato al
    bordo sembrava l'ultima riga della griglia invece di un comando.  */
.export-row {
    margin-top: 14px;
    display: flex;
    justify-content: flex-start;
}

/* ========================================
   Scelta di cosa esportare in Excel
   Tre opzioni che si leggono scorrendo la colonna dei titoli: icona a
   sinistra, nome e spiegazione allineati, nessun testo centrato. La terza e'
   quella che serve quasi sempre ed e' marcata, non colorata a caso.
   Colori dai token, come tutto il resto del foglio.
   ======================================== */
.esporta-scelta-dialog .k-window-content {
    /* !important per la stessa ragione della finestra di dettaglio qui sopra. */
    padding: 14px 16px 18px !important;
}
.esporta-titolo {
    font-weight: 600;
}
.esporta-opzioni {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.esporta-opzione {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.esporta-opzione:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--btn-primary);
}
.esporta-opzione i {
    font-size: 1.15rem;
    line-height: 1.35;
    color: var(--btn-primary);
    flex-shrink: 0;
}
.esporta-testo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.esporta-nome {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
}
.esporta-nota {
    font-size: 0.8rem;
    color: var(--md-sys-color-outline);
    line-height: 1.3;
}
/* La scelta consigliata: un bordo che la indica, non un blocco di colore che
   copre il testo e obbliga a invertire tutto il resto. */
.esporta-opzione.consigliata {
    border-color: var(--btn-primary);
    border-width: 2px;
    background: var(--md-sys-color-surface-container);
}

/* ========================================
   Scadenzario dei finanziamenti
   Due pastiglie e basta: quello che resta da restituire e quello che e' gia'
   uscito. Sono neutre di proposito - una rata da pagare non e' un allarme, e'
   il caso normale di un mutuo: la pastiglia rossa accesa su tutto e' il
   difetto del «bloccato» del CRM, che si accendeva su nove clienti su dodici.
   ======================================== */
.badge-da-pagare,
.badge-pagato {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--line);
}
.badge-da-pagare {
    background: var(--md-sys-color-surface-container-high);
    color: var(--ink);
}
.badge-pagato {
    background: transparent;
    color: var(--md-sys-color-outline);
}


/* ==========================================================================
   SALDI BANCHE: una riga per banca

   La tabella copiava la consultazione della contabilita', che mette
   l'affidamento SOPRA il saldo: due righe per banca, con quella dell'affidamento
   vuota su dieci banche su dodici e una colonna in piu' solo per dire quale
   delle due si stava leggendo. Le cifre finivano lontanissime dal nome della
   banca, e in mezzo c'era il vuoto.

   Adesso la riga e' una, l'affidamento sta sotto l'importo della sua colonna e
   solo dove c'e', e le larghezze sono DICHIARATE: senza, la larghezza la decide
   la cella piu' piena e cambia da una riga all'altra - un numero di cui non si
   sa la colonna e' peggio di un numero assente, perche' quello si nota. E'
   `table-layout: fixed` a far rispettare il colgroup: senza, quelle misure
   restano suggerimenti. La colonna «auto» e' una sola, quella del nome, che e'
   l'unica con dentro del testo.
   ========================================================================== */
.cfo-matrix.cfo-banche { table-layout: fixed; }

.cfo-matrix.cfo-banche td,
.cfo-matrix.cfo-banche th { vertical-align: top; }

.cfo-matrix.cfo-banche td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }

/* L'affidamento sotto il suo importo: si legge come annotazione, non come una
   seconda cifra da sommare. */
.cfo-affid {
    display: block;
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-3);
    font-weight: 400;
    white-space: nowrap;
}

/* La nota e il bottone Excel stanno insieme a destra della testata, cosi' il
   bottone non si porta via una riga sua sopra la tabella. */
.cfo-panel-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==========================================================================
   CRM - UNA SCALA TIPOGRAFICA SOLA
   --------------------------------------------------------------------------
   Il CRM e' cresciuto una schermata alla volta, e ogni regola si e' scelta la
   sua misura: ventotto dimensioni diverse fra px e rem nello stesso blocco,
   .78rem accanto a .8rem accanto a 12px. A occhio non si distinguono una per
   una, ma messe sulla stessa pagina fanno esattamente quello che si vede:
   scritte grosse e scritte piccole senza un motivo leggibile.

   Le misure sono cinque, e ogni testo del CRM ne prende una per quello che
   E', non per dove sta:
     etichetta  il nome in maiuscolo sopra una cifra o un campo
     nota       quello che accompagna: date, pastiglie, testo secondario
     testo      quello che si legge
     titolo     un valore di testo in evidenza, il verdetto
     cifra      il numero di una casella, in tutte le schermate uguale
   Una misura nuova non si aggiunge qui senza togliere un motivo per cui le
   cinque non bastano: altrimenti fra sei mesi le misure sono di nuovo dieci.
   ========================================================================== */
:root {
    --crm-fs-etichetta: 11px;
    --crm-fs-nota:      12px;
    --crm-fs-testo:     14px;
    --crm-fs-titolo:    16px;
    --crm-fs-cifra:     22px;
}

/*  Il caricamento della scheda cliente: la rotella accanto alla parola, non
    sopra, e alla stessa altezza della riga che la sostituira'.  */
.crm-caricamento { display: flex; align-items: center; gap: 10px; }

/*  Il periodo della scheda cliente, e la scelta del confronto. Non sono tab:
    la scheda ha gia' la sua riga di tab, e una seconda sotto la prima si
    leggerebbe come un'altra navigazione. Sono due scelte piccole accanto alla
    frase che dicono cosa cambiano.  */
.crm-periodo {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    margin: 0 0 12px;
}
.crm-periodo-titolo { font-size: var(--crm-fs-testo); font-weight: 600; color: var(--ink); margin-right: 6px; }
.crm-scelta {
    border: 1px solid var(--line); background: var(--card-bg); color: var(--ink-2);
    border-radius: var(--md-sys-shape-corner-full); padding: 3px 12px;
    font-size: var(--crm-fs-nota); cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.crm-scelta:hover { border-color: var(--btn-primary); }
.crm-scelta.active { border-color: var(--btn-primary); color: var(--btn-primary); font-weight: 600; }

/*  «oggi» accanto al titolo dei blocchi che sono una situazione e non un
    periodo: senza, sotto una frase che dice «Anno 2026» si leggerebbero
    come numeri dell'anno.  */
.crm-h2-quando { font-size: var(--crm-fs-nota); font-weight: 400; color: var(--ink-3); }

/*  Due note una sotto l'altra dentro la stessa casella. */
.crm-cifra .nota + .nota { margin-top: 0; }

/*  La griglia RFM 5 x 5 della scheda cliente. I colori dei segmenti sono
    mescolati dai token del tema e non scritti a mano: vanno dal verde del
    successo (i migliori) al grigio (i persi), passando per il colore del tema
    e per l'avviso. Il segmento del cliente e' pieno, gli altri sono velati:
    la griglia deve far vedere DOVE sta lui, non la tavolozza.  */
:root {
    --crm-rfm-campioni:     var(--md-sys-color-success);
    --crm-rfm-fedeli:       color-mix(in srgb, var(--md-sys-color-success) 55%, var(--card-bg));
    --crm-rfm-promettenti:  color-mix(in srgb, var(--md-sys-color-primary) 45%, var(--card-bg));
    --crm-rfm-nuovi:        color-mix(in srgb, var(--md-sys-color-primary) 22%, var(--card-bg));
    --crm-rfm-attenzione:   color-mix(in srgb, var(--md-sys-color-warning) 45%, var(--card-bg));
    --crm-rfm-occasionali:  color-mix(in srgb, var(--md-sys-color-warning) 20%, var(--card-bg));
    --crm-rfm-danonperdere: var(--md-sys-color-error);
    --crm-rfm-dormienti:    color-mix(in srgb, var(--md-sys-color-error) 45%, var(--card-bg));
    --crm-rfm-persi:        color-mix(in srgb, var(--ink-3) 30%, var(--card-bg));
}
.seg-Campioni     { --seg: var(--crm-rfm-campioni); }
.seg-Fedeli       { --seg: var(--crm-rfm-fedeli); }
.seg-Promettenti  { --seg: var(--crm-rfm-promettenti); }
.seg-Nuovi        { --seg: var(--crm-rfm-nuovi); }
.seg-Attenzione   { --seg: var(--crm-rfm-attenzione); }
.seg-Occasionali  { --seg: var(--crm-rfm-occasionali); }
.seg-DaNonPerdere { --seg: var(--crm-rfm-danonperdere); }
.seg-Dormienti    { --seg: var(--crm-rfm-dormienti); }
.seg-Persi        { --seg: var(--crm-rfm-persi); }

.crm-rfm5 {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 260px);
    grid-template-rows: auto auto; gap: 8px 14px; align-items: start;
}
.crm-rfm5-asse-y {
    grid-row: 1; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg);
    align-self: center; font-size: var(--crm-fs-nota); color: var(--ink-3);
}
.crm-rfm5-griglia {
    grid-row: 1; grid-column: 2;
    display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr);
    gap: 2px; height: clamp(240px, 32vw, 420px);
    border-radius: var(--r); overflow: hidden;
}
.crm-rfm5-cella {
    position: relative; background: color-mix(in srgb, var(--seg) 45%, var(--card-bg));
    display: flex; align-items: center; justify-content: center; padding: 4px; text-align: center;
}
.crm-rfm5-cella.del-cliente { background: var(--seg); }
/*  Sui due segmenti pieni e scuri il nome si scrive chiaro, o non si legge. */
.seg-Campioni.del-cliente .nome,
.seg-DaNonPerdere.del-cliente .nome { color: var(--btn-on-primary); }
.crm-rfm5-cella .nome {
    font-size: var(--crm-fs-nota); font-weight: 600; color: var(--ink); line-height: 1.2;
}
.crm-rfm5-punto {
    position: absolute; width: 18px; height: 18px; border-radius: 50%;
    background: var(--ink); border: 3px solid var(--card-bg);
    box-shadow: var(--md-sys-elevation-level2); right: 8px; top: 8px;
}
.crm-rfm5-asse-x { grid-row: 2; grid-column: 2; text-align: center; font-size: var(--crm-fs-nota); color: var(--ink-3); }

.crm-rfm5-legenda {
    grid-row: 1; grid-column: 3; list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.crm-rfm5-legenda li {
    display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center;
    padding: 4px 8px; border-radius: var(--r); font-size: var(--crm-fs-testo); color: var(--ink-2);
}
.crm-rfm5-legenda li.del-cliente { background: var(--md-sys-color-surface-container); color: var(--ink); font-weight: 600; }
.crm-rfm5-legenda .colore { width: 14px; height: 14px; border-radius: 3px; background: var(--seg); }
.crm-rfm5-legenda .conta { font-size: var(--crm-fs-nota); color: var(--ink-3); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .crm-rfm5 { grid-template-columns: auto minmax(0, 1fr); }
    .crm-rfm5-legenda { grid-row: 3; grid-column: 1 / -1; }
}
.crm-rfm-cifre { margin-top: 12px; }

/*  Le spiegazioni dei blocchi stanno nel tooltip del titolo, non in una riga
    sotto: la scheda deve mostrare numeri, e la regola si legge quando serve.
    L'icona dice che il tooltip c'e' - un titolo che risponde al passaggio del
    mouse senza dirlo non lo scopre nessuno.  */
.crm-info { color: var(--ink-3); font-size: var(--crm-fs-nota); cursor: help; }
[title] > .crm-info { margin-left: 2px; }
.crm-blocco > h2[title], .crm-faccia-verdetto[title] { cursor: help; }

/* ==========================================================================
   CRM - LA RIGA DEI FILTRI, UNA FORMA SOLA
   --------------------------------------------------------------------------
   Nella stessa riga c'erano tre controlli con tre aspetti: la casella di testo
   bianca, le tendine grigie con il testo a 16px, e il gruppo di pulsanti dello
   stato alto dieci pixel meno degli altri - che per questo portava anche la
   sua etichetta piu' in basso. Tre ragioni diverse: le caselle Telerik sono
   forzate a 44px piu' in alto nel foglio, la tendina porta lo sfondo pieno del
   tema, e `.cfo-seg` e' nato per le schede della tesoreria, dove sta da solo.

   Qui si pareggia tutto dentro `.crm-filtri`, che e' la riga di filtri e di
   campi di tutte le pagine del CRM: 40px, lo stesso sfondo, lo stesso bordo,
   il testo a 14px. Le aree di testo restano fuori - sono alte apposta.
   `!important` perche' la regola globale lo usa, e senza non si scavalca: e'
   la stessa ragione di `.pq-filters` nel configuratore prezzi.
   ========================================================================== */
/*  Allineati in ALTO, non in basso: adesso che le caselle hanno tutte la
    stessa altezza, in alto si allineano anche le etichette - e nei moduli
    della scheda un campo che e' solo testo («Agente: Sede») sta sotto la sua
    etichetta invece di scendere al fondo della riga. Le spunte e i bottoni,
    che l'etichetta non ce l'hanno, scendono da soli al livello delle caselle. */
.crm-filtri { gap: 12px 16px; align-items: flex-start; }
.crm-filtri > .crm-spunta,
.crm-filtri > .k-button,
.crm-filtri > .crm-azioni-riga { align-self: flex-end; }
.crm-filtro > label {
    font-size: var(--crm-fs-nota); font-weight: 500; color: var(--ink-3);
    line-height: 1.3;
}

.crm-filtri .k-input:not(.k-textarea),
.crm-filtri .k-picker,
.crm-filtri .cfo-seg {
    height: 40px !important; min-height: 40px !important; box-sizing: border-box !important;
}
.crm-filtri .k-input:not(.k-textarea),
.crm-filtri .k-picker {
    background: var(--card-bg) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md-sys-shape-corner-extra-small) !important;
}
.crm-filtri .k-input:not(.k-textarea):hover,
.crm-filtri .k-picker:hover { border-color: var(--md-sys-color-outline) !important; }
.crm-filtri .k-input.k-focus,
.crm-filtri .k-picker.k-focus { border-color: var(--btn-primary) !important; }

.crm-filtri .k-input:not(.k-textarea) .k-input-inner,
.crm-filtri .k-picker .k-input-inner {
    height: 38px !important; min-height: 38px !important; line-height: 38px !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    font-size: var(--crm-fs-testo) !important;
}
.crm-filtri .k-input-button,
.crm-filtri .k-clear-value {
    height: 38px !important; min-height: 38px !important;
    background: transparent !important; border: 0 !important;
}
.crm-filtri .k-textarea .k-input-inner { font-size: var(--crm-fs-testo) !important; }

/* Il gruppo di pulsanti: stessa altezza, stesso bordo e stesso raggio delle
   caselle, e il pulsante scelto nel colore del tema invece che nero. */
.crm-filtri .cfo-seg {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-extra-small);
    background: var(--card-bg);
}
.crm-filtri .cfo-seg button {
    height: 100%; padding: 0 14px; font-size: var(--crm-fs-testo);
    border-right-color: var(--md-sys-color-outline-variant);
}
.crm-filtri .cfo-seg button.is-active {
    background: var(--btn-primary); color: var(--btn-on-primary); font-weight: 600;
}

/* I bottoni nella riga (Conta, Cerca...) e le spunte: alti come le caselle. */
.crm-filtri > .k-button,
.crm-filtri .crm-filtro > .k-button {
    height: 40px !important; min-height: 40px !important; padding-block: 0 !important;
}
.crm-filtri > .crm-spunta { height: 40px; }

/*  Un testo lungo in una cella: due righe al massimo, il resto nel tooltip.
    Una descrizione di sei righe fa una riga di griglia alta come la pagina.  */
.crm-due-righe {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   CRM - QUELLO CHE SI E' VISTO APRENDO LE PAGINE
   ========================================================================== */

/*  Il «non disponibile» dentro una casella: e' una frase, non un numero, e a
    22px in corsivo sembrava il dato piu' importante della schermata.  */
.crm-cifra .valore .crm-nd,
.crm-cifra .valore.crm-nd {
    font-size: var(--crm-fs-testo); font-weight: 400; line-height: 1.6;
}

/*  La spunta nella riga dei filtri: la casella e la parola sulla stessa riga,
    alte quanto le caselle accanto. Prima la parola stava sopra una casella
    minuscola, e in Aziende sembravano due etichette senza campo.  */
.crm-spunta { display: inline-flex; align-items: center; gap: 8px; height: 40px; }
/*  Il tema Telerik mette `align-self: flex-start` sul contenitore della
    casella: centrata la parola, la casella restava nove pixel piu' in alto.  */
.crm-spunta .k-checkbox-wrap, .crm-spunta .k-checkbox { margin: 0; align-self: center; }
.crm-spunta > span { font-size: var(--crm-fs-testo); color: var(--ink); }

/*  Il riquadro delle pastiglie sotto il nome del cliente: niente vuoto in
    fondo, il margine della riga di pastiglie e' gia' il padding del riquadro. */
.filters-card > .crm-verdetto:last-child { margin-bottom: 0; }

/*  Due file di caselle una sotto l'altra nello stesso blocco. */
.crm-cifre-dopo { margin-top: 12px; }

/*  Le caselle di Visite (e di ogni coda che si filtra cliccando): la stessa
    forma di .crm-cifra - etichetta sopra, numero sotto - invece del numero
    sopra e di una parola minuscola sotto. Sono gli stessi due pezzi, e il
    markup resta quello: li gira il CSS.  */
.crm-kpi { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px;
           border-left: 3px solid var(--line); border-radius: var(--r);
           background: var(--md-sys-color-surface-container-low); padding: 12px 14px; }
.crm-kpi-attivo { border-color: var(--btn-primary); border-width: 1px 1px 1px 3px; padding: 11px 13px 11px 14px; }
.crm-kpi-lab { margin-top: 0; }

/*  Le schede delle visite usano .pa-campo, il campo del preventivatore: stessa
    forma della riga dei filtri del CRM, etichetta compresa. Il maiuscoletto a
    11px stava solo qui.  */
.pa-campo label {
    text-transform: none; letter-spacing: 0;
    font-size: var(--crm-fs-nota); font-weight: 500; color: var(--ink-3);
}
.pa-campo .k-input:not(.k-textarea),
.pa-campo .k-picker {
    height: 40px !important; min-height: 40px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md-sys-shape-corner-extra-small) !important;
}
.pa-campo .k-input:not(.k-textarea) .k-input-inner,
.pa-campo .k-picker .k-input-inner {
    height: 38px !important; min-height: 38px !important; line-height: 38px !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    font-size: var(--crm-fs-testo) !important;
}
.pa-campo .k-input-button, .pa-campo .k-clear-value {
    height: 38px !important; min-height: 38px !important;
    background: transparent !important; border: 0 !important;
}

/*  IL CAMPO DENTRO UNA CASELLA TELERIK NON HA UN BORDO SUO. La regola
    `input[type="text"]` piu' in alto disegna bordo, altezza e padding su ogni
    campo di testo della pagina - compreso quello che Telerik mette DENTRO la
    sua casella, che il bordo ce l'ha gia' fuori. Nelle tendine con ricerca si
    vedeva un riquadro attorno al testo e la croce e la freccia fuori, come tre
    pezzi separati. Vale per tutto Portal, non solo per il CRM.  */
.k-input > .k-input-inner,
.k-picker > .k-input-inner,
.k-input > .k-input-inner:hover,
.k-input > .k-input-inner:focus {
    border: 0 !important;
    background: transparent;
    border-radius: 0;
}

/*  I riquadri delle schede delle visite: `.grid-card` e' fatto per contenere
    una griglia a filo, e senza margine interno il titolo e il testo toccavano
    il bordo. Qui dentro ci sono moduli e testo, quindi il margine c'e'.  */
.users-page > .grid-card:not(:has(> .k-grid)) { padding: 16px 20px; }
.users-page > .grid-card + .grid-card { margin-top: 12px; }

/*  Il fido residuo nella casella dell'esposizione totale: e' il numero per cui
    la «Situazione del cliente» dell'ERP si apre, quindi non e' una nota come le
    altre. Verde finche' c'e', rosso quando e' finito.  */
.crm-fido-residuo {
    display: block; margin-top: 6px; padding: 4px 8px; border-radius: var(--r);
    font-size: var(--crm-fs-testo); font-weight: 700;
    color: var(--md-sys-color-success);
    background: color-mix(in srgb, var(--md-sys-color-success) 12%, transparent);
}
.crm-fido-residuo.fuori {
    color: var(--md-sys-color-error);
    background: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
}
.crm-fido-residuo .uso { font-weight: 400; font-size: var(--crm-fs-nota); margin-left: 4px; }
.crm-avviso-testo { color: var(--md-sys-color-warning); }

/*  La griglia RFM si clicca: caselle e voci della legenda aprono le aziende
    del segmento. Deve dirlo prima del clic, o nessuno ci prova.  */
.crm-rfm5-cella[role=button], .crm-rfm5-legenda li[role=button] { cursor: pointer; }
.crm-rfm5-cella[role=button]:hover { outline: 2px solid var(--ink-2); outline-offset: -2px; }
.crm-rfm5-legenda li[role=button]:hover { background: var(--md-sys-color-surface-container); }
/*  I nuovi clienti in viola: un colore che nessun altro segmento ha, e che non
    dipende dal tema per ruolo (il colore del tema per un amministratore e'
    rosso, e si confondeva con «da non perdere»).  */
.seg-Nuovi { --seg: color-mix(in srgb, var(--md-sys-color-info) 60%, var(--md-sys-color-error)); }
/*  La casella del segmento accanto alla salute porta il colore del segmento. */
.crm-cifra.seg-bordo { border-left-color: var(--seg); }

/* ==========================================================================
   L'ANAGRAFICA DEL CLIENTE  (/Crm/Azienda/{id}, tab Anagrafica)
   ==========================================================================
   Dodici colonne e una larghezza per campo, dichiarata sul campo (c1..c12):
   con caselle tutte uguali la ragione sociale andava a capo a meta' parola e
   la provincia occupava lo stesso spazio. E qui le parole NON si spezzano a
   caso: `overflow-wrap: anywhere` di .crm-cifra .valore e' giusto per un
   numero lungo, su un nome faceva «MATERASS / I ITALIA».  */
.crm-blocco .crm-cifre.crm-anagrafica {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
}
.crm-anagrafica > .crm-cifra { min-width: 0; grid-column: span 2; }
.crm-anagrafica > .crm-cifra .valore { overflow-wrap: break-word; }
.crm-anagrafica > .c1 { grid-column: span 1; }
.crm-anagrafica > .c2 { grid-column: span 2; }
.crm-anagrafica > .c3 { grid-column: span 3; }
.crm-anagrafica > .c4 { grid-column: span 4; }
.crm-anagrafica > .c6 { grid-column: span 6; }
.crm-anagrafica > .c7 { grid-column: span 7; }
/*  Su uno schermo stretto una colonna di dodici e' troppo poco anche per
    «PT»: si passa a quattro caselle per riga, e i campi lunghi ne prendono due.  */
@media (max-width: 1100px) {
    .crm-anagrafica > .crm-cifra { grid-column: span 3; }
    .crm-anagrafica > .c4, .crm-anagrafica > .c6, .crm-anagrafica > .c7 { grid-column: span 6; }
}
@media (max-width: 600px) {
    .crm-anagrafica > .crm-cifra { grid-column: span 6; }
    .crm-anagrafica > .c4, .crm-anagrafica > .c6, .crm-anagrafica > .c7 { grid-column: span 12; }
}

/*  La descrizione di un reclamo nella griglia della scheda: e' testo libero
    del cliente, a volte mezza pagina. Due righe bastano a riconoscerlo, il
    resto sta nel titolo e nel dettaglio.  */
.crm-testo-riga {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Il registratore delle visite dettate
   --------------------------------------------------------------------------
   Deve sembrare un registratore, non un modulo con tre bottoni: chi lo usa ha
   il telefono in mano davanti a un cliente, e deve capire con un'occhiata se
   sta registrando. Quindi un corpo scuro con un display, un tasto rosso tondo
   che si riconosce senza leggere, e una forma d'onda che si muove quando si
   parla - una riga piatta col cliente che parla vuol dire microfono sbagliato,
   ed e' meglio saperlo adesso che alla trascrizione.
   I colori sono token nuovi costruiti sulla tavolozza: il corpo e' scuro in
   tutti e tre i temi per ruolo, perche' un registratore non cambia colore con
   chi lo tiene in mano.
   ========================================================================== */
:root {
    --rec-corpo: var(--md-ref-palette-neutral10);
    --rec-corpo-alto: var(--md-ref-palette-neutral20);
    --rec-bordo: var(--md-ref-palette-neutral30);
    --rec-display: var(--md-ref-palette-neutral0);
    --rec-cifre: var(--md-sys-color-success-container);
    --rec-onda: var(--md-sys-color-success-container);
    --rec-onda-picco: var(--md-sys-color-warning);
    --rec-testo: var(--md-ref-palette-neutral80);
    --rec-rosso: var(--md-sys-color-error);
}

.rec { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .rec { grid-template-columns: 1fr; } }

.rec-corpo {
    background: linear-gradient(180deg, var(--rec-corpo-alto), var(--rec-corpo));
    border: 1px solid var(--rec-bordo);
    border-radius: 22px;
    padding: 16px 18px 14px;
    box-shadow: var(--md-sys-elevation-level3);
    color: var(--rec-testo);
    user-select: none;
}

.rec-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rec-marca { font-size: var(--crm-fs-etichetta); text-transform: uppercase; letter-spacing: .14em;
             display: inline-flex; align-items: center; gap: 6px; }

/*  Il LED: spento e' un puntino scuro, acceso pulsa. E' l'unica cosa che dice
    «sto registrando» a chi riguarda il telefono dopo dieci minuti.  */
.rec-led { width: 10px; height: 10px; border-radius: 50%; background: var(--rec-bordo); }
.rec-led.acceso { background: var(--rec-rosso); box-shadow: 0 0 8px var(--rec-rosso);
                  animation: crm-pulsa 1.4s infinite; }

.rec-display {
    background: var(--rec-display);
    border: 1px solid var(--rec-bordo);
    border-radius: 10px;
    padding: 8px 12px 6px;
    color: var(--rec-cifre);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    box-shadow: inset 0 2px 8px var(--md-sys-color-shadow);
}
.rec-display-riga { display: flex; justify-content: space-between; align-items: center; gap: 8px;
                    font-size: var(--crm-fs-etichetta); letter-spacing: .08em; text-transform: uppercase; }
.rec-piccolo { opacity: .8; min-height: 1.4em; }
.rec-avviso { color: var(--rec-onda-picco); }
.rec-stato.Rec { color: var(--rec-rosso); animation: crm-pulsa 1.4s infinite; }
.rec-stato.Rec::before { content: "\25CF  "; }
.rec-stato.Pause::before { content: "\275A\275A  "; }
.rec-stato.Stop::before { content: "\25A0  "; }
.rec-tempo { font-size: 2.4rem; font-weight: 600; line-height: 1.15; text-align: center;
             font-variant-numeric: tabular-nums; letter-spacing: .06em;
             text-shadow: 0 0 10px var(--rec-onda); margin: 2px 0; }
.rec-onda { display: block; width: 100%; height: 54px; }

/*  I tasti sono tondi e grandi come dita, non bottoni di un modulo: in un
    piazzale si preme senza guardare. Il rosso si riconosce dalla forma.  */
.rec-tasti { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 16px; }
.rec-tasto {
    width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid var(--rec-bordo);
    background: linear-gradient(180deg, var(--rec-corpo-alto), var(--rec-corpo));
    color: var(--rec-testo); font-size: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 0 var(--rec-display), var(--md-sys-elevation-level1);
    cursor: pointer; transition: transform .08s, box-shadow .08s, opacity .15s;
}
.rec-tasto:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--rec-display); }
.rec-tasto:disabled { opacity: .35; cursor: default; }
.rec-tasto-rec { width: 72px; height: 72px; }
.rec-pallino { width: 30px; height: 30px; border-radius: 50%; background: var(--rec-rosso);
               box-shadow: 0 0 10px var(--rec-rosso); }
.rec-tasto-rec:disabled { opacity: 1; }
.rec-tasto-rec:disabled .rec-pallino { animation: crm-pulsa 1.4s infinite; }
.rec-etichette { display: flex; justify-content: center; gap: 22px; margin-top: 8px;
                 font-size: var(--crm-fs-etichetta); text-transform: uppercase; letter-spacing: .1em; }
.rec-etichette > span { width: 56px; text-align: center; }
.rec-etichette > span:first-child { width: 72px; }

.rec-lato > p { margin-top: 0; }
.rec-titolo-spezzoni { margin: 16px 0 6px; font-size: var(--crm-fs-titolo); color: var(--ink); }

/*  Gli spezzoni come le tracce di un nastro: si riascoltano, e si toglie
    quello sbagliato. Il cestino chiede «sicuro?» sulla riga stessa, perche'
    una finestra per ogni spezzone sarebbe un'interruzione per un gesto
    piccolo - ma un gesto che non si annulla.  */
.rec-tracce { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rec-traccia {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px;
    background: var(--card-bg);
}
.rec-traccia.suona { border-color: var(--btn-primary); }
.rec-traccia-play, .rec-traccia-cestino, .rec-traccia-si, .rec-traccia-no {
    border: 1px solid var(--line); background: var(--card-bg); color: var(--ink);
    border-radius: 50%; width: 32px; height: 32px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.rec-traccia-play { background: var(--btn-primary); border-color: var(--btn-primary);
                    color: var(--md-sys-color-on-primary); }
.rec-traccia-play:disabled { opacity: .35; cursor: default; }
.rec-traccia-cestino:hover, .rec-traccia-si { color: var(--danger); border-color: var(--danger); }
.rec-traccia-corpo { flex: 1 1 auto; min-width: 0; }
.rec-traccia-riga { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rec-traccia-nome { font-weight: 600; color: var(--ink); }
.rec-traccia-info { color: var(--ink-3); font-size: var(--crm-fs-nota); font-variant-numeric: tabular-nums; }
.rec-traccia-barra { height: 4px; border-radius: 2px; background: var(--line-soft); margin-top: 5px; overflow: hidden; }
.rec-traccia-avanzamento { height: 100%; width: 0; background: var(--btn-primary); transition: width .25s linear; }
.rec-conferma { display: inline-flex; align-items: center; gap: 6px; font-size: var(--crm-fs-nota);
                color: var(--danger); white-space: nowrap; }

/* ==========================================================================
   Il velo di caricamento, unico per tutto il portale
   --------------------------------------------------------------------------
   Copre il contenuto finche' la pagina non ha finito di leggere (PaginaPortal,
   <Caricamento />). E' OPACO subito, perche' sotto c'e' la pagina gia'
   disegnata con gli elenchi vuoti e «nessun risultato» non deve leggersi
   nemmeno per un istante; la rotella invece compare dopo un attimo, cosi' una
   pagina veloce non lampeggia.
   ========================================================================== */
.main-contenitore {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.caricamento-velo {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: var(--md-sys-color-surface);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 18vh;
}
.caricamento-velo-rotella {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--ink-3);
    font-size: var(--crm-fs-testo);
    opacity: 0;
    animation: caricamento-appare .2s ease-out .25s forwards;
}
@keyframes caricamento-appare { to { opacity: 1; } }
/*  La rotella segue il tema per ruolo (blu, verde, rosso): il colore di
    Telerik e' sempre blu, e su una schermata rossa sembrava un pezzo di
    un'altra applicazione. Il velo sta dentro .app-layout, dove il tema c'e'. */
.caricamento-velo .k-loader-segment { background-color: var(--btn-primary); }

/* ==========================================================================
   Con chi: l'azienda e gli interlocutori della visita
   --------------------------------------------------------------------------
   Si compila anche mentre si registra, quindi sta in righe che vanno a capo
   sul telefono. Gli interlocutori sono pastiglie e non una tabella: sono due
   o tre nomi, e si tolgono col dito.
   ========================================================================== */
.vis-chi .vis-riga { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 10px; }
.vis-chi .vis-etichetta { display: block; margin: 8px 0 6px; font-size: var(--crm-fs-etichetta);
                          text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.vis-modulo { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; }
.vis-persone { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.vis-persona {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 10px;
    background: var(--card-bg); color: var(--ink); font-size: var(--crm-fs-testo);
}
.vis-persona > i { color: var(--btn-primary); }
.vis-persona.solo-nome { border-style: dashed; }
.vis-persona.solo-nome > i { color: var(--ink-3); }
.vis-ruolo { color: var(--ink-3); font-size: var(--crm-fs-nota); }
.vis-persona-togli {
    border: none; background: transparent; color: var(--ink-3); cursor: pointer;
    width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center;
}
.vis-persona-togli:hover { color: var(--danger); background: var(--md-sys-color-error-container); }
@media (max-width: 600px) {
    .vis-chi .k-combobox, .vis-chi .k-textbox, .vis-chi .k-dropdownlist { width: 100% !important; }
    .vis-chi .pa-campo, .vis-chi .crm-filtro { width: 100%; }
}

/* ==========================================================================
   La barra laterale sul telefono: un cassetto
   --------------------------------------------------------------------------
   Sotto i 768 pixel la barra ridotta a icone era una striscia fissa da 60
   pixel, un sesto di uno schermo da 390. Chiusa sparisce; aperta scivola
   sopra il contenuto, larga come sullo schermo grande, con un velo dietro che
   la richiude al tocco (MainLayout.razor, `sidebar-velo`).
   ========================================================================== */
.sidebar-velo { display: none; }
@media (max-width: 768px) {
    .app-layout.sidebar-collapsed .sidebar,
    .app-layout.sidebar-collapsed .app-sidebar,
    .sidebar.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        border: none;
    }
    .app-layout:not(.sidebar-collapsed) .app-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: 272px; min-width: 272px;
        z-index: 1200;
        overflow-y: auto;
        box-shadow: var(--md-sys-elevation-level4);
    }
    .sidebar-velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1100;
        background: var(--md-sys-color-scrim);
    }
}

/* ==========================================================================
   I moduli di inserimento del CRM: richiesta di campione e reclamo
   --------------------------------------------------------------------------
   Sostituiscono le pagine Classic ASP e WebForms, che erano un elenco di
   caselle una sotto l'altra. Qui il modulo e' diviso in schede che rispondono
   a una domanda ciascuna (per chi, quando, cosa serve, chi paga), le scelte
   brevi sono tessere da toccare invece di tendine - sul telefono una tendina
   sono tre tocchi - e la barra in fondo resta in vista e dice cosa manca.
   ========================================================================== */
.mod-griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 88px;           /* la barra fissa non copre l'ultima scheda */
}
.mod-card {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: var(--md-sys-elevation-level1);
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.mod-card.largo { grid-column: 1 / -1; }
.mod-card > header { display: flex; gap: 12px; align-items: flex-start; }
.mod-card > header > i {
    flex: none;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-primary-container);
    color: var(--btn-primary);
    font-size: 1.2rem;
}
.mod-card > header h2 { font: var(--md-sys-typescale-title-medium); margin: 0; color: var(--ink); }
.mod-card > header p { font: var(--md-sys-typescale-body-small); margin: 2px 0 0; color: var(--muted); }

.mod-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mod-campo > label { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant, var(--muted)); }
.mod-campo.stretto { max-width: 200px; }
.mod-riga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mod-riga.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mod-obbl { color: var(--danger); }
.mod-aiuto { font: var(--md-sys-typescale-body-small); color: var(--muted); }

.mod-spunta {
    display: inline-flex; align-items: center; gap: 8px;
    font: var(--md-sys-typescale-body-medium);
    color: var(--ink);
    cursor: pointer;
    user-select: none;
}
.mod-spunta.forte {
    padding: 8px 12px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-success-container);
    font-weight: 600;
}

/* Le tessere: scelte brevi da toccare. */
.mod-tessere { display: flex; flex-wrap: wrap; gap: 8px; }
.mod-tessera {
    border: 1px solid var(--line);
    background: var(--md-sys-color-surface-container-low);
    color: var(--ink);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 8px 16px;
    font: var(--md-sys-typescale-label-large);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--md-sys-motion-duration-short4, 150ms), border-color var(--md-sys-motion-duration-short4, 150ms);
}
.mod-tessere.piccole .mod-tessera { padding: 4px 12px; font: var(--md-sys-typescale-label-medium); }
.mod-tessera:hover { border-color: var(--btn-primary); }
.mod-tessera.attiva {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: var(--btn-on-primary);
}
.mod-tessera.attiva.si { background: var(--success); border-color: var(--success); color: var(--md-sys-color-on-primary); }
.mod-tessera.attiva.no { background: var(--danger); border-color: var(--danger); color: var(--md-sys-color-on-primary); }

/* Le scelte grandi: icona, nome e una riga che spiega. */
.mod-scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.mod-scelta {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    text-align: left;
    padding: 14px 16px;
    border: 2px solid var(--line);
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--card-bg);
    color: var(--ink);
    cursor: pointer;
}
.mod-scelta > i { grid-row: 1 / span 2; font-size: 1.5rem; color: var(--muted); }
.mod-scelta > strong { font: var(--md-sys-typescale-title-small); }
.mod-scelta > span { font: var(--md-sys-typescale-body-small); color: var(--muted); }
.mod-scelta:hover { border-color: var(--btn-primary); }
.mod-scelta.attiva { border-color: var(--btn-primary); background: var(--md-sys-color-primary-container); }
.mod-scelta.attiva > i { color: var(--btn-primary); }

.mod-avviso {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-info-container);
    color: var(--ink);
    font: var(--md-sys-typescale-body-medium);
}

/* La zona per la foto e per gli allegati: tutta l'area apre la scelta del file. */
.mod-foto-zona {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    min-height: 180px;
    padding: 20px;
    border: 2px dashed var(--line);
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--muted);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--md-sys-motion-duration-short4, 150ms), background var(--md-sys-motion-duration-short4, 150ms);
}
.mod-foto-zona.basso { min-height: 96px; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.mod-foto-zona:hover { border-color: var(--btn-primary); background: var(--md-sys-color-primary-container); }
.mod-foto-zona.carica { border-style: solid; border-color: var(--btn-primary); cursor: progress; }
.mod-foto-zona > i { font-size: 2rem; color: var(--btn-primary); }
.mod-foto-zona.basso > i { font-size: 1.5rem; }
.mod-foto-zona > strong { font: var(--md-sys-typescale-title-small); color: var(--ink); }
.mod-foto-zona > span { font: var(--md-sys-typescale-body-small); }
.mod-foto-zona input[type=file] {
    position: absolute; inset: 0;
    opacity: 0;
    cursor: pointer;
}
.mod-foto-anteprima {
    position: relative;
    border-radius: var(--md-sys-shape-corner-large);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--md-sys-color-surface-container);
}
.mod-foto-anteprima img { display: block; width: 100%; max-height: 320px; object-fit: contain; }
.mod-foto-togli {
    position: absolute; top: 8px; right: 8px;
    width: 34px; height: 34px;
    border: none; border-radius: 50%;
    background: var(--md-sys-color-scrim);
    color: var(--md-sys-color-on-primary);
    cursor: pointer;
}
.mod-foto-togli:hover { background: var(--danger); }

.mod-allegati { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mod-allegati > li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container-low);
    min-width: 0;
}
.mod-allegati > li > span:not(.crm-muted) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-allegati > li > i { color: var(--btn-primary); }
.mod-allegato-apri {
    flex: 1; min-width: 0;
    display: inline-flex; align-items: center; gap: 8px;
    border: none; background: none; padding: 0;
    color: var(--btn-primary);
    font: var(--md-sys-typescale-body-medium);
    text-align: left;
    cursor: pointer;
}
.mod-allegato-apri > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-allegato-apri:hover > span { text-decoration: underline; }
.mod-allegato-togli {
    flex: none;
    width: 30px; height: 30px;
    border: none; border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.mod-allegato-togli:hover { color: var(--danger); background: var(--md-sys-color-error-container); }

/* La barra del salvataggio: sempre in vista, dice cosa manca. */
.mod-barra {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex; align-items: center; gap: 10px;
    margin: 0 -12px -12px;
    padding: 12px 16px;
    background: var(--card-bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 12px var(--md-sys-color-shadow);
}
.mod-barra-stato { flex: 1; min-width: 0; font: var(--md-sys-typescale-body-medium); }
.mod-manca { color: var(--ink); display: inline-flex; gap: 6px; align-items: center; }
.mod-manca > i { color: var(--md-sys-color-warning); }
.mod-pronto { color: var(--success); display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }

@media (max-width: 900px) {
    .mod-griglia { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .mod-riga, .mod-riga.tre { grid-template-columns: minmax(0, 1fr); }
    .mod-card { padding: 14px; }
    .mod-barra { flex-wrap: wrap; }
    .mod-barra-stato { flex-basis: 100%; }
    .mod-barra .k-button { flex: 1; }
}

/* ==========================================================================
   La scheda del campione: la decisione in cima, le lavorazioni, i commenti
   --------------------------------------------------------------------------
   Le pagine ASP la motivazione di un rifiuto la salvavano e non la mostravano
   a nessuno: il commerciale sapeva che il campione non si faceva e non perche'.
   Adesso e' la prima cosa della scheda, con chi l'ha scritta e quando.
   ========================================================================== */
.cm-decisione {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border-radius: var(--md-sys-shape-corner-large);
    border: 1px solid var(--line);
    border-left-width: 6px;
    background: var(--card-bg);
}
.cm-decisione > i { font-size: 1.8rem; flex: none; }
.cm-decisione.respinta { border-left-color: var(--danger); background: var(--md-sys-color-error-container); }
.cm-decisione.respinta > i { color: var(--danger); }
.cm-decisione.attesa { border-left-color: var(--md-sys-color-warning); background: var(--md-sys-color-warning-container); }
.cm-decisione.attesa > i { color: var(--md-sys-color-warning); }
.cm-decisione-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-decisione-corpo h3 { font: var(--md-sys-typescale-title-medium); margin: 0; color: var(--ink); }
.cm-decisione-chi { margin: 0; font: var(--md-sys-typescale-body-small); color: var(--muted); }
.cm-decisione-motivo {
    margin: 4px 0 0;
    padding: 10px 12px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--card-bg);
    font: var(--md-sys-typescale-body-large);
    color: var(--ink);
    white-space: pre-wrap;
}
.cm-decisione-motivo > span { font-weight: 600; }
.cm-decisione-motivo.vuoto { font-style: italic; color: var(--muted); }
.cm-decisione-bottoni { display: flex; flex-direction: column; gap: 8px; flex: none; }

.cm-foto { max-width: 100%; max-height: 260px; border-radius: var(--md-sys-shape-corner-medium); border: 1px solid var(--line); }

.cm-lavorazione {
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--btn-primary);
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-primary-container);
}
.cm-lavorazione-piede { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-spinta { flex: 1; }
.cm-azioni-riga { float: right; display: flex; gap: 4px; }

.cm-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.cm-messaggio {
    max-width: 85%;
    align-self: flex-start;
    padding: 10px 14px;
    border-radius: var(--md-sys-shape-corner-large);
    border-top-left-radius: var(--md-sys-shape-corner-extra-small);
    background: var(--md-sys-color-surface-container);
}
.cm-messaggio.mio {
    align-self: flex-end;
    border-top-left-radius: var(--md-sys-shape-corner-large);
    border-top-right-radius: var(--md-sys-shape-corner-extra-small);
    background: var(--md-sys-color-primary-container);
}
.cm-messaggio-testa {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font: var(--md-sys-typescale-body-small);
    color: var(--muted);
    margin-bottom: 4px;
}
.cm-messaggio-testa > strong { color: var(--ink); }
.cm-messaggio-testo { font: var(--md-sys-typescale-body-medium); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-messaggio-togli {
    margin-left: auto;
    border: none; background: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0 2px;
}
.cm-messaggio-togli:hover { color: var(--danger); }
.cm-scrivi { display: flex; flex-direction: column; gap: 8px; }
.cm-scrivi > .k-button { align-self: flex-end; }
.cm-scrivi-a { display: flex; gap: 8px; align-items: center; }
.cm-scrivi-a > .k-multiselect { flex: 1; min-width: 0; }

@media (max-width: 600px) {
    .cm-decisione { flex-wrap: wrap; }
    .cm-decisione-bottoni { flex-direction: row; flex-basis: 100%; }
    .cm-decisione-bottoni .k-button { flex: 1; }
    .cm-messaggio { max-width: 100%; }
    .cm-scrivi-a { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   La scheda del reclamo: il passo di chi tocca
   --------------------------------------------------------------------------
   Si compilano solo i campi della fase in corso, e sotto una riga dice dove
   andra' la pratica premendo «avanza»: la biforcazione dipende dai dati
   appena scritti, e chi preme deve saperlo prima.
   ========================================================================== */
.rc-fase {
    display: flex; flex-direction: column; gap: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border: 1px solid var(--btn-primary);
    border-left-width: 6px;
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--card-bg);
    box-shadow: var(--md-sys-elevation-level1);
}
.rc-fase > p { margin: 0; display: flex; gap: 8px; align-items: center; font: var(--md-sys-typescale-body-large); color: var(--ink); }
.rc-fase-piede {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.rc-esito {
    flex: 1; min-width: 200px;
    display: inline-flex; align-items: center; gap: 8px;
    font: var(--md-sys-typescale-body-medium);
    color: var(--btn-primary);
    font-weight: 600;
}
.rc-esito.manca { color: var(--ink); font-weight: 400; }
.rc-esito.manca > i { color: var(--md-sys-color-warning); }
.rc-speciali { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) {
    .rc-fase-piede .k-button { flex: 1; }
}

/* ==========================================================================
   La stampa della richiesta di campione (CampioneStampa.razor)
   --------------------------------------------------------------------------
   Il foglio di uffstile_rich_print.asp, che l'ufficio stile tiene sul banco.
   A schermo non c'e'; in stampa c'e' solo lui. La regola con :has() nasconde
   ogni elemento che non contiene il foglio e non ci sta dentro, e toglie agli
   antenati altezze, rientri e sfondi: nascondere con visibility lascerebbe lo
   spazio della scheda, cioe' tre pagine bianche dopo il foglio.
   I colori sono inchiostro e carta, non quelli del tema: un foglio stampato
   con il blu dell'utente o il rosso dell'amministratore non e' lo stesso
   foglio per tutti.
   ========================================================================== */
:root {
    --stampa-inchiostro: #000;
    --stampa-carta: #fff;
    --stampa-fondo-titolo: #ddd;
}
.stampa-richiesta { display: none; }
@media print {
    @page { size: A4; margin: 12mm; }
    body:has(.stampa-richiesta) *:not(:has(.stampa-richiesta)):not(.stampa-richiesta):not(.stampa-richiesta *) {
        display: none !important;
    }
    body:has(.stampa-richiesta),
    body:has(.stampa-richiesta) *:has(.stampa-richiesta) {
        display: block !important;
        position: static !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: var(--stampa-carta) !important;
    }
    .stampa-richiesta {
        display: block;
        color: var(--stampa-inchiostro);
        background: var(--stampa-carta);
        font-family: Verdana, Geneva, sans-serif;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        /* Con border-collapse meta' del bordo esterno sta fuori dalla tabella:
           senza questo filo il bordo destro finiva oltre il margine, tagliato. */
        padding: 0 2px;
        box-sizing: border-box;
    }
}
.st-testa { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 36px; }
.st-testa img { width: 200px; height: auto; }
.st-numero {
    width: 250px;
    border: 1px solid var(--stampa-inchiostro);
    padding: 6px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
.st-numero span { font-size: 26px; }
.st-tabella { width: 100%; border-collapse: collapse; table-layout: fixed; }
.st-tabella th, .st-tabella td {
    border: 1px solid var(--stampa-inchiostro);
    padding: 5px 6px;
    height: 30px;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
}
.st-tabella th { text-align: center; }
.st-testo { white-space: pre-wrap; overflow-wrap: anywhere; }
.st-casella { display: inline-flex; align-items: center; gap: 5px; margin-right: 18px; }
.st-box {
    display: inline-block;
    width: 18px; height: 18px;
    border: 1.5px solid var(--stampa-inchiostro);
    text-align: center;
    line-height: 16px;
    font-size: 15px;
}
.st-piede { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 16px; }
.st-foto img { max-width: 100%; max-height: 8cm; object-fit: contain; }
.st-firma {
    flex: none;
    width: 340px;
    border: 1px solid var(--stampa-inchiostro);
    padding: 16px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
}
.st-firma p { margin: 0 0 12px; }

/* ==========================================================================
   Le griglie non schiacciano piu' la colonna principale; tab e bottoni sul
   telefono
   --------------------------------------------------------------------------
   In quasi tutte le griglie la colonna che conta (ragione sociale, descrizione,
   oggetto) non ha una larghezza dichiarata: prende quello che avanza. Con
   table-layout fixed, quando le colonne a larghezza fissa superano lo spazio
   - diciotto griglie oltre i 900 pixel, e l'elenco Aziende a 1.540 - non
   avanza niente: la colonna va a zero, il nome va a capo lettera per lettera e
   ogni riga diventa alta mezzo schermo. Su /Crm/Aziende succedeva anche a 1440
   pixel. Telerik scrive le colonne senza larghezza come <col style="">, e a
   quelle si da' un minimo; dove la griglia e' piu' stretta dello schermo il
   browser distribuisce il resto fra tutte le colonne.
   ========================================================================== */
.m3-grid col[style=""] { width: 260px; }

@media (max-width: 768px) {
    .m3-grid col[style=""] { width: 220px; }

    /* Le barre dei tab scorrono col dito invece di tagliare le voci: sulla
       scheda cliente Trattative, Campioni, Non conformita' e Salute erano fuori
       dallo schermo e non si potevano aprire. */
    .cfo-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .cfo-tabs::-webkit-scrollbar { display: none; }
    .cfo-tab { flex: none; white-space: nowrap; margin-bottom: 0; padding: 10px 14px; }

    /* I bottoni dell'intestazione vanno a capo invece di uscire dallo schermo. */
    .page-header { flex-wrap: wrap; }
    .page-header .header-buttons { flex-wrap: wrap; max-width: 100%; }
}

@media (max-width: 768px) {
    /* L'intestazione: il titolo su una riga sua, il numero e le pastiglie di
       stato accanto, a capo solo se non ci stanno. Prima ognuno stava su una
       riga da solo, e la scheda cominciava a mezzo schermo. */
    .page-header .header-left { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
    .page-header .header-left h1 { flex-basis: 100%; }

    /* I filtri in due colonne a larghezza piena, la ricerca su tutta la riga:
       cinque tendine di cinque larghezze diverse una sotto l'altra occupavano
       uno schermo intero prima dei dati. */
    .filters-card .crm-filtri:has(> .crm-filtro) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
    .filters-card .crm-filtri > .crm-filtro:first-child { grid-column: 1 / -1; }
    .filters-card .crm-filtro { min-width: 0; }
    .filters-card .crm-filtro .k-input,
    .filters-card .crm-filtro .k-dropdownlist,
    .filters-card .crm-filtro .k-combobox,
    .filters-card .crm-filtro .k-datepicker,
    .filters-card .crm-filtro .k-multiselect { width: 100% !important; min-width: 0; }

    /* Una barra di tab che scorre deve farlo capire: senza, l'ultima voce
       visibile sembra l'ultima. La sfumatura sparisce solo alla fine della
       corsa, che una maschera statica non sa: e' un compromesso dichiarato. */
    .cfo-tabs { mask-image: linear-gradient(to right, currentColor 85%, transparent); }
}

@media (max-width: 768px) {
    /* Un filtro a pulsanti (Tutti / Aperta / Vinta / Persa / Sospesa) in
       mezza colonna non ci sta: prende la riga intera, e se non basta scorre. */
    .filters-card .crm-filtri > .crm-filtro:has(.cfo-seg) { grid-column: 1 / -1; }
    .filters-card .cfo-seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .filters-card .cfo-seg > button { flex: none; white-space: nowrap; }
}

/* Una pastiglia dentro una cella va a capo invece di tagliarsi: «Aperta non
   conformità» in una colonna da 150 pixel usciva «Aperta non conformit», e la
   parola tagliata era proprio quella che dice cos'e'. */
.m3-grid td .crm-chip { white-space: normal; text-align: left; line-height: 1.3; }

/* Il riquadro «Scadute» del cruscotto: il numero e' la cosa da vedere, e stava
   in corpo nota nella colonna delle date. Grande, e rosso quando c'e' qualcosa
   di scaduto; grigio a zero, perche' uno zero non chiede niente. */
.crm-scadenze .crm-diario-riga { grid-template-columns: 64px 1fr; align-items: center; cursor: pointer; }
.crm-scadenze .crm-diario-riga:hover { background: var(--md-sys-color-surface-container-low); }
.crm-scadenze .quando { font-size: 1.5rem; font-weight: 700; color: var(--ink-3); text-align: right; padding-right: 4px; }
.crm-scadenze .scaduta .quando { color: var(--md-sys-color-error); }

/* Annulla e Rifiuta sulla non conformità sono azioni di ripiego: stanno a
   destra e a misura, non a tutta larghezza come se fossero la cosa da fare. */
.rc-speciali { flex-direction: row; justify-content: flex-end; }
.rc-speciali .k-button { width: auto; flex: none; }

/* ==========================================================================
   I tasti di riga, uguali in tutte le liste (AzioniRiga.razor)
   --------------------------------------------------------------------------
   Tondi, a contorno, della stessa misura: apri, modifica, elimina, annulla.
   Il colore arriva solo al passaggio del mouse, e dice cosa succede: rosso
   per il cestino, ambra per l'annullamento. Una riga annullata resta in
   elenco, a colori spenti.
   ========================================================================== */
.azioni-riga { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.azione-tasto {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card-bg);
    color: var(--ink-2);
    cursor: pointer;
    transition: background var(--md-sys-motion-duration-short4, 150ms), color var(--md-sys-motion-duration-short4, 150ms), border-color var(--md-sys-motion-duration-short4, 150ms);
}
.azione-tasto:hover { background: var(--md-sys-color-surface-container-high); color: var(--ink); }
.azione-tasto.elimina:hover { color: var(--danger); border-color: var(--danger); background: var(--md-sys-color-error-container); }
.azione-tasto.annulla:hover { color: var(--md-sys-color-warning); border-color: var(--md-sys-color-warning); background: var(--md-sys-color-warning-container); }
.m3-grid tr.riga-annullata td { color: var(--ink-3); }
.m3-grid tr.riga-annullata td:not(:last-child) { text-decoration: line-through; text-decoration-color: var(--line); }

/* ==========================================================================
   Tasti di riga: uno solo in tutte le liste (26/09/2026)
   AzioniRiga scrive .azione-tasto; le griglie che hanno ancora un
   TelerikButton con .btn-icon-modern - le schede in sola lettura, il
   preventivatore, Texi - prendono lo stesso cerchio, cosi' la stessa azione
   non ha due facce a seconda della pagina. Il cestino rosso del configuratore
   (.pq-cestino) segue il cestino di AzioniRiga.
   ========================================================================== */
.azione-tasto:disabled { opacity: .45; cursor: default; pointer-events: none; }
.azione-tasto:focus-visible { outline: 2px solid var(--btn-primary); outline-offset: 2px; }
.m3-grid td .btn-icon-modern.k-button {
    width: 32px; height: 32px; min-width: 32px; padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card-bg);
    color: var(--ink-2);
}
.m3-grid td .btn-icon-modern.k-button:hover { background: var(--md-sys-color-surface-container-high); color: var(--ink); }
.m3-grid td .btn-icon-modern.k-button + .btn-icon-modern.k-button { margin-left: 6px; }
.m3-grid td .pq-cestino.k-button { color: var(--ink-2); }
.m3-grid td .pq-cestino.k-button:hover { color: var(--danger); border-color: var(--danger); background: var(--md-sys-color-error-container); }
.diario-azioni { margin-top: 6px; }

/* === DOC-MODULE BEGIN ===================================================
   Documenti per gli audit (Pages/AuditDocuments).
   Lo stesso blocco sta in fondo ad app.css di Portal e di TexHub: lo scrive
   Tools/SincronizzaDocumenti, e va cambiato li', non qui dentro. Solo token:
   su Portal prende il colore del ruolo, su TexHub la tavolozza unica - e'
   l'unica cosa che fra i due progetti deve essere diversa.
   ======================================================================== */
.doc-page .doc-nav { margin-bottom: 12px; overflow-x: auto; }
.doc-page a.cfo-tab { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

.doc-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.doc-kpi {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 12px 14px; border-radius: var(--md-sys-shape-corner-medium, 12px);
    border: 1px solid var(--line); background: var(--card-bg); color: var(--ink);
    cursor: pointer; text-align: left; border-left-width: 4px;
}
.doc-kpi:hover { background: var(--md-sys-color-surface-container); }
.doc-kpi.active { box-shadow: 0 0 0 2px var(--btn-primary); }
.doc-kpi-label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.doc-kpi-value { font-size: 24px; font-weight: 600; line-height: 1; }
.doc-kpi-missing, .doc-kpi-expired, .doc-kpi-rejected { border-left-color: var(--danger); }
.doc-kpi-expiring { border-left-color: var(--md-sys-color-warning, #e5a000); }
.doc-kpi-pending { border-left-color: var(--btn-primary); }
.doc-kpi-valid { border-left-color: var(--success); }

.doc-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.doc-filter { display: flex; flex-direction: column; gap: 4px; min-width: 220px; flex: 1 1 220px; }
.doc-filter > label, .doc-form > label { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.doc-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }

.doc-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); }
.doc-icon-btn {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--line); background: var(--card-bg); color: var(--ink-2); cursor: pointer;
}
.doc-icon-btn:hover { background: var(--md-sys-color-surface-container-high); color: var(--ink); }
.doc-icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: var(--md-sys-color-error-container); }
.doc-icon-btn + .doc-icon-btn { margin-left: 4px; }

.doc-card {
    background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--md-sys-shape-corner-medium, 12px);
    padding: 16px 18px; margin-bottom: 12px;
}
.doc-card > h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-card h3 { font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.doc-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.doc-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.doc-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 12px; align-items: start; }

.doc-form { display: flex; flex-direction: column; gap: 6px; }
.doc-form > label:not(.doc-check) { margin-top: 6px; }
.doc-form.doc-narrow { max-width: 460px; margin-bottom: 12px; }
.doc-form.doc-inline { flex-direction: row; align-items: center; gap: 10px; }
.doc-req { color: var(--danger); }
.doc-help, .doc-small { font-size: 12px; }
.doc-file { padding: 8px 0; }
.doc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.doc-facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 12px; font-size: 14px; }
.doc-facts dt { color: var(--ink-3); font-size: 13px; }
.doc-facts dd { margin: 0; }
.doc-instructions {
    background: var(--md-sys-color-surface-container); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
    white-space: pre-line; font-size: 14px;
}

.doc-versions { display: flex; flex-direction: column; gap: 10px; }
.doc-version { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; border-left-width: 4px; }
.doc-version-approved { border-left-color: var(--success); }
.doc-version-pending { border-left-color: var(--btn-primary); }
.doc-version-rejected { border-left-color: var(--danger); }
.doc-version-superseded, .doc-version-withdrawn { opacity: .7; }
.doc-version-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.doc-version-meta { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.doc-version-note { font-size: 13px; margin-top: 6px; padding: 6px 10px; background: var(--md-sys-color-surface-container); border-radius: 6px; }
.doc-version-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.doc-values { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 2px 12px; margin: 8px 0 0; font-size: 13px; }
.doc-values dt { color: var(--ink-3); }
.doc-values dd { margin: 0; }
.doc-warning {
    margin-top: 8px; padding: 6px 10px; border-radius: 6px; font-size: 13px;
    background: var(--md-sys-color-warning-container); color: var(--ink);
}
.doc-info {
    margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
    background: var(--md-sys-color-surface-container); color: var(--ink-2);
}
.doc-warn-text { color: var(--danger); }
.doc-yes { color: var(--success); font-size: 16px; }

.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.doc-table th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.doc-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.doc-table .doc-small.k-input { margin-top: 4px; }
.doc-matrix td:not(:first-child), .doc-matrix th:not(:first-child) { width: 90px; text-align: center; }
.doc-matrix-all td { background: var(--md-sys-color-surface-container); font-weight: 500; }
.doc-tree { display: flex; align-items: center; gap: 6px; }

.doc-userlist { max-height: 72vh; display: flex; flex-direction: column; gap: 8px; }
.doc-userlist-items { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.doc-user {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; text-align: left;
    padding: 6px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer;
}
.doc-user > .crm-muted { grid-column: 1; font-size: 11px; }
.doc-user > .record-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.doc-user:hover { background: var(--md-sys-color-surface-container); }
.doc-user.active { border-color: var(--btn-primary); background: var(--md-sys-color-surface-container-high); }
.doc-user.inactive { opacity: .6; }

.doc-site-list { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-site {
    display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 14px; min-width: 200px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card-bg); color: var(--ink); cursor: pointer;
}
.doc-site.inactive { opacity: .6; }
.doc-site:disabled { cursor: default; }

.doc-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.doc-rule.inactive { opacity: .6; }
.doc-steps { margin: 0 0 12px; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }

.doc-cert-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.doc-cert-card {
    display: flex; flex-direction: column; gap: 8px; padding: 16px; text-decoration: none; color: var(--ink);
    background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--md-sys-shape-corner-medium, 12px);
}
.doc-cert-card:hover { border-color: var(--btn-primary); }
.doc-cert-head { display: flex; flex-direction: column; }
.doc-cert-head strong { font-size: 18px; }
.doc-gauge { display: flex; flex-direction: column; gap: 4px; }
.doc-gauge-value { font-size: 26px; font-weight: 700; line-height: 1; }
.doc-gauge.big .doc-gauge-value { font-size: 34px; }
.doc-gauge-bar { display: block; height: 8px; border-radius: 4px; background: var(--md-sys-color-surface-container-high); overflow: hidden; }
.doc-gauge-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--danger); }
.doc-gauge.warn .doc-gauge-bar > span { background: var(--md-sys-color-warning, #e5a000); }
.doc-gauge.ok .doc-gauge-bar > span { background: var(--success); }
.doc-gauge.ok .doc-gauge-value { color: var(--success); }
.doc-gauge.bad .doc-gauge-value { color: var(--danger); }

.doc-ready-head { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-bottom: 14px; }
.doc-ready-head .doc-gauge { min-width: 260px; }
.doc-ok { color: var(--success); font-weight: 500; }
.doc-item { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; border-left-width: 4px; }
.doc-item.ok { border-left-color: var(--success); }
.doc-item.bad { border-left-color: var(--danger); }
.doc-item.optional { border-left-color: var(--line); }
.doc-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
.doc-item.ok .doc-item-head > .bi { color: var(--success); }
.doc-item.bad .doc-item-head > .bi { color: var(--danger); }
.doc-clause { font-weight: 600; color: var(--ink-3); }
.doc-item-count { margin-left: auto; font-weight: 600; }
.doc-item-empty { padding: 0 14px 10px 40px; font-size: 13px; color: var(--danger); }
.doc-item-lines { display: flex; flex-direction: column; padding: 0 14px 10px 40px; gap: 2px; }
.doc-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: var(--ink); }
a.doc-line:hover { background: var(--md-sys-color-surface-container); }

.doc-attention {
    background: var(--card-bg); border: 1px solid var(--line); border-left: 4px solid var(--danger);
    border-radius: var(--md-sys-shape-corner-medium, 12px); padding: 14px 16px; margin-bottom: 12px;
}
.doc-attention > h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.doc-attention > h2 .bi { color: var(--danger); }
.doc-attention-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.doc-attention-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; text-align: left;
    border: 1px solid var(--line); background: var(--card-bg); color: var(--ink); cursor: pointer; text-decoration: none;
    font-size: 14px;
}
.doc-attention-item:hover { background: var(--md-sys-color-surface-container); }
.doc-attention-item > .bi-chevron-right { margin-left: auto; color: var(--ink-3); }
.doc-attention-count {
    min-width: 34px; height: 28px; padding: 0 8px; border-radius: 14px; display: inline-flex; align-items: center;
    justify-content: center; font-weight: 700; background: var(--md-sys-color-surface-container-high);
}
.doc-attention-item.male .doc-attention-count { background: var(--md-sys-color-error-container); color: var(--danger); }
.doc-attention-item.avviso .doc-attention-count { background: var(--md-sys-color-warning-container); color: var(--ink); }
.doc-attention-item.accento .doc-attention-count { color: var(--btn-primary); }
.doc-ok-banner {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; border-radius: 10px;
    background: var(--card-bg); border: 1px solid var(--line); border-left: 4px solid var(--success); color: var(--success); font-weight: 500;
}
.doc-filter-narrow { flex: 0 1 170px; min-width: 150px; }
.doc-days { font-size: 12px; color: var(--ink-3); }
.doc-days-soon { color: var(--md-sys-color-warning, #b77900); font-weight: 600; }
.doc-days-late { color: var(--danger); font-weight: 600; }

@media (max-width: 1100px) {
    .doc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .doc-columns, .doc-grid2, .doc-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .doc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-facts, .doc-values { grid-template-columns: minmax(0, 1fr); }
    .doc-item-lines, .doc-item-empty { padding-left: 14px; }
}
/* === DOC-MODULE END ===================================================== */

/* =========================================================================
   Catalogo filati (/Filati, /Filato/{id})

   Solo token: la pagina e' della Direzione e prende il colore del suo ruolo.
   Le caselle in alto sono bottoni veri, perche' sono filtri; quelle che non
   filtrano niente (is-static) non promettono un clic che non fa niente.
   Il riquadro della foto e' un segnaposto dichiarato: le foto verranno dopo.
   ========================================================================= */
.fil-fonte { font-size: 12px; color: var(--ink-3); margin: 0 0 10px; }
.fil-avviso { color: var(--md-sys-color-warning); font-weight: 600; }
.fil-neg { color: var(--danger); }
.fil-sub { font-size: 11.5px; color: var(--ink-3); }
.fil-nota { font-size: 13px; color: var(--ink-2); margin: 4px 0 12px; line-height: 1.45; max-width: 1100px; }
.fil-vuoto { padding: 18px; color: var(--ink-3); text-align: center; }
.fil-mancante { color: var(--ink-3); font-style: italic; }
.fil-link { color: var(--btn-primary); font-weight: 600; text-decoration: none; }
.fil-link:hover { text-decoration: underline; }
.fil-titolo-descr { font-size: 15px; font-weight: 400; color: var(--ink-2); margin-left: 10px; }

/* Tre gruppi da tre caselle. Con nove caselle in una griglia che va a capo da
   sola venivano sei piu' tre, e con sottotitoli di lunghezza diversa nove
   altezze diverse: adesso ogni sottotitolo sta su una riga (il testo intero e'
   nel title) e le caselle di un gruppo sono alte uguali. */
.fil-gruppi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
.fil-gruppo-kpi {
    display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 10px;
    background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; min-width: 0;
}
.fil-gruppo-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
.fil-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.fil-gruppo-kpi .fil-kpis { margin-bottom: 0; }
.fil-page > .fil-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fil-kpi {
    text-align: left; background: var(--card-bg); border: 1px solid var(--line); border-radius: 10px;
    padding: 8px 10px; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.fil-kpi:hover { border-color: var(--btn-primary); }
.fil-kpi.is-static { cursor: default; }
.fil-kpi.is-static:hover { border-color: var(--line); }
.fil-kpi.is-active { border-color: var(--btn-primary); box-shadow: inset 0 0 0 1px var(--btn-primary); }
.fil-kpi.is-alert { border-left: 4px solid var(--md-sys-color-warning); }
.fil-kpi-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-kpi-lab .bi { margin-right: 4px; }
.fil-kpi-val { font-size: 20px; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; }
.fil-kpi-sub { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fil-filtro-attivo {
    align-self: flex-end; border: 1px solid var(--btn-primary); color: var(--btn-primary); background: var(--card-bg);
    border-radius: 16px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer;
}
.fil-badge {
    display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px;
    background: var(--md-sys-color-warning-container); color: var(--ink); font-size: 11px; font-weight: 700;
}

.fil-pill, .fil-stato {
    display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
    white-space: nowrap; vertical-align: middle; border: 1px solid transparent;
}
.fil-pill-ruota { background: var(--md-sys-color-success-container); color: var(--success); }
.fil-pill-lenta { background: var(--md-sys-color-warning-container); color: var(--ink); }
.fil-pill-ferma { background: var(--md-sys-color-error-container); color: var(--danger); }
.fil-pill-nuovo { background: var(--md-sys-color-info-container); color: var(--ink); }
.fil-stato-nessuno { border-color: var(--line); color: var(--ink-3); font-weight: 500; }
.fil-stato-catalogo { background: var(--md-sys-color-success-container); color: var(--success); }
.fil-stato-surichiesta { background: var(--md-sys-color-info-container); color: var(--ink); }
.fil-stato-dasmaltire { background: var(--md-sys-color-error-container); color: var(--danger); }
.fil-stato-fuoricatalogo { background: var(--md-sys-color-surface-container-high); color: var(--ink-2); }

.fil-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.fil-scheda {
    background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
    cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.fil-scheda:hover { border-color: var(--btn-primary); }
.fil-scheda-testa { display: flex; justify-content: space-between; gap: 8px; }
.fil-pastiglie { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fil-codice { font-weight: 700; font-size: 15px; }
.fil-descr { font-size: 12.5px; color: var(--ink-2); }
.fil-comp { font-size: 11.5px; color: var(--ink-3); }
.fil-scheda-numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fil-scheda-numeri div { display: flex; flex-direction: column; }
.fil-scheda-numeri span { font-size: 10.5px; text-transform: uppercase; color: var(--ink-3); letter-spacing: .03em; }
.fil-scheda-numeri b { font-variant-numeric: tabular-nums; }
.fil-tessere { display: flex; flex-wrap: wrap; gap: 6px; }
.fil-tessera {
    width: 70px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 11px;
    background: var(--md-sys-color-surface-container-low);
}
.fil-tessera.is-ferma { border-color: var(--danger); }
.fil-tessera-altri { display: flex; align-items: center; justify-content: center; min-height: 70px; color: var(--ink-3); font-weight: 600; }
.fil-foto {
    height: 38px; display: flex; align-items: center; justify-content: center;
    background: var(--md-sys-color-surface-container-high); color: var(--ink-3);
}
.fil-tessera-cod { padding: 2px 5px 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-tessera-kg { padding: 0 5px 3px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fil-altre { display: flex; justify-content: center; margin: 14px 0; }

.fil-due { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; margin-bottom: 12px; align-items: start; }
.fil-due h3 { margin: 0 0 8px; font-size: 15px; }
.fil-dati { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; margin: 0 0 10px; font-size: 13px; }
.fil-dati dt { color: var(--ink-3); }
.fil-dati dd { margin: 0; }
.fil-foto-grande {
    display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px;
    background: var(--md-sys-color-surface-container-low); color: var(--ink-3); font-size: 12px;
}
.fil-decisione { display: flex; flex-direction: column; gap: 8px; }
.fil-stati { flex-wrap: wrap; align-self: flex-start; }
.fil-note { width: 100%; }
.fil-decisione-tasti { display: flex; justify-content: flex-end; gap: 8px; }
.fil-param { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.fil-param label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.fil-riga-tasti { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }

.fil-tabella-wrap { overflow-x: auto; }
.fil-tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.fil-tabella th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3);
    font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.fil-tabella td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.fil-tabella .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fil-tabella tbody tr:hover { background: var(--md-sys-color-surface-container-low); }
.fil-tabella tr.is-ferma td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.fil-tabella tr.is-scelto { background: var(--md-sys-color-surface-container); }
.fil-tabella tfoot td { font-weight: 700; border-bottom: 0; }
.fil-dove { font-size: 12px; white-space: nowrap; }
.fil-dove-tessitura { color: var(--btn-primary); }
.fil-dove-terzi { color: var(--ink-2); }
.fil-perchi { min-width: 280px; font-size: 12px; }
.fil-gruppo { margin-bottom: 12px; }
.fil-gruppo-testa { display: flex; align-items: baseline; gap: 10px; padding: 10px 10px 4px; }
.fil-gruppo-kg { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Le scorte PS («Conferme produzione per Scorta»): il tessuto si fa per tenerlo pronto a un cliente. */
.fil-pill-scorta { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.fil-tabella tr.is-scorta td:first-child { box-shadow: inset 3px 0 0 var(--md-sys-color-tertiary); }
.fil-fornitore { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.fil-fornitore .bi { margin-right: 3px; color: var(--ink-3); }
.fil-fornitori { display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow-x: auto; }

/* UNA MISURA SOLA PER I CONTROLLI. Le tendine Telerik sono un .k-picker, non un
   .k-input, quindi la regola di .pq-filters non le prende: restavano alte 56px
   con il testo a 16px accanto a caselle da 36 e segmenti da 32. Qui tutto e'
   36px e 13px: caselle, tendine, numeri, segmenti, spunta. Il !important
   serve per la stessa ragione di .pq-filters: il foglio di Telerik arriva dopo. */
.fil-page .k-picker, .fil-page .k-input:not(.k-textarea), .fil-finestra .k-input:not(.k-textarea) {
    height: 36px !important; min-height: 36px !important; box-sizing: border-box; font-size: 13px;
}
.fil-page .k-picker .k-input-inner, .fil-page .k-input:not(.k-textarea) .k-input-inner,
.fil-finestra .k-input:not(.k-textarea) .k-input-inner {
    height: 34px !important; min-height: 34px !important; line-height: 34px; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 13px;
}
.fil-page .k-input-value-text { font-size: 13px; }
/* Stesso guscio per tendine e caselle, come nei filtri del CRM: la tendina
   usciva grigia piena accanto a una casella bianca col bordo. */
.fil-page .k-input:not(.k-textarea), .fil-page .k-picker {
    background: var(--card-bg) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md-sys-shape-corner-extra-small) !important;
}
.fil-page .k-input:not(.k-textarea):hover, .fil-page .k-picker:hover { border-color: var(--md-sys-color-outline) !important; }
.fil-page .k-input.k-focus, .fil-page .k-picker.k-focus { border-color: var(--btn-primary) !important; }
.fil-page .k-picker .k-input-button { background: transparent !important; border: 0 !important; }
.fil-page .k-textarea { font-size: 13px; }
.fil-page .cfo-seg { height: 36px; display: inline-flex; align-items: stretch; }
.fil-page .cfo-seg button { font-size: 13px; padding: 0 12px; height: 100%; }
.fil-page .pq-filters { gap: 12px 14px; }
.fil-page .pq-filters label { font-size: 11px; }
.fil-page .pq-filters .crm-spunta {
    height: 36px; display: inline-flex; align-items: center; gap: 8px;
    text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); align-self: flex-end;
}
.fil-page .btn-primary-modern, .fil-page .btn-outline-modern { font-size: 13px; }

/* Righe su una linea: nell'elenco le descrizioni andavano a capo e una riga
   diventava alta tre o quattro. La descrizione intera e' nel title. */
/* Il selettore e' lungo apposta: la regola generale delle griglie Material
   (.k-grid.m3-grid .k-grid-content td) ha !important su padding, font e
   white-space, e con una specificita' piu' bassa questa non passava. */
.fil-page .k-grid.m3-grid .k-grid-content td {
    white-space: nowrap !important; word-break: normal !important; overflow: hidden; text-overflow: ellipsis;
    font-size: 13px !important; line-height: 18px !important;
    padding: 7px 10px !important;
}
.fil-page .k-grid.m3-grid .k-table-th { font-size: 11.5px !important; padding: 8px 10px !important; }
.fil-nome { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.fil-fornitori .fil-tabella th, .fil-fornitori .fil-tabella td { padding: 6px 8px; }
.fil-altri-tasto {
    align-self: flex-start; border: 0; background: none; color: var(--btn-primary); font: inherit; font-size: 12.5px;
    cursor: pointer; padding: 2px 0;
}
.fil-decisione .k-picker { width: 100% !important; max-width: 320px; }

@media (max-width: 700px) {
    .fil-gruppo-kpi { grid-template-columns: minmax(0, 1fr); }
    .fil-kpis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .fil-due { grid-template-columns: minmax(0, 1fr); }
    .fil-catalogo { grid-template-columns: minmax(0, 1fr); }
    .fil-scheda-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- La scheda di una qualita', sull'impaginazione di italfabrics ---------
   Testata in una fascia, poi la tabella dei colori con le partite e il
   «Totale colore»: e' la schermata che chi compra il filato legge ogni giorno,
   e riconoscerla vale piu' di qualunque grafica nuova. Righe fitte (12,5px),
   quantita' a due decimali, totali in grassetto su fondo tenue, consumi in
   una fascia di colore a parte perche' sono l'aggiunta che l'ERP non ha. */
.fil-testata {
    display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline;
    background: var(--card-bg); border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 14px; margin-bottom: 10px; font-size: 13px;
}
.fil-testata > div { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.fil-testata span:first-child { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.fil-testata-larga b { white-space: nowrap; }
.fil-testata-fonte { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.fil-erp-wrap { overflow: auto; max-height: 70vh; padding: 0 !important; margin-bottom: 12px; }
.fil-erp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.fil-erp th {
    position: sticky; top: 0; z-index: 1; background: var(--md-sys-color-surface-container-high);
    font-size: 11px; font-weight: 600; color: var(--ink-2); padding: 5px 4px; text-align: left;
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.fil-erp thead tr:nth-child(2) th { top: 25px; }
.fil-erp th.c { text-align: center; }
.fil-erp td { padding: 3px 4px; border-bottom: 1px solid var(--md-sys-color-surface-container-high); white-space: nowrap; }
.fil-erp .n { text-align: right; }
.fil-erp .fil-erp-cons { background: var(--md-sys-color-surface-container-low); }
.fil-erp th.fil-erp-cons { background: var(--md-sys-color-surface-container-highest); }
.fil-erp-lotto td { color: var(--ink-2); }
.fil-erp-lotto.is-ferma td:nth-child(2) { color: var(--danger); }
.fil-erp-totale td { font-weight: 700; background: var(--md-sys-color-surface-container); color: var(--ink); }
.fil-erp-totale td.fil-erp-cons { background: var(--md-sys-color-surface-container-high); }
.fil-erp-totale.is-scelto td { box-shadow: inset 0 -2px 0 var(--btn-primary); }
.fil-erp-descr { font-weight: 600; color: var(--ink-2); margin: 0 6px; }
.fil-erp-colore {
    border: 0; background: none; padding: 0; font: inherit; color: var(--btn-primary);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.fil-erp tfoot td {
    position: sticky; bottom: 0; background: var(--md-sys-color-surface-container-highest);
    font-weight: 700; padding: 5px 8px; border-top: 2px solid var(--line);
}
/* L'indice colorato per classe al posto della pastiglia: in una tabella da
   sedici colonne la pastiglia spingeva fuori schermo i giorni di fermo. */
.fil-cl-ruota { color: var(--success); font-weight: 700; }
.fil-cl-lenta { color: var(--md-sys-color-warning); font-weight: 700; }
.fil-cl-ferma { color: var(--danger); font-weight: 700; }
.fil-cl-nuovo { color: var(--ink-3); }
/* La barra del filtro sopra i colori: una riga bassa, etichetta accanto alla casella. */
.fil-barra { padding: 8px 14px !important; margin-bottom: 10px; }
.fil-barra .pq-filter { flex-direction: row !important; align-items: center; gap: 10px !important; }

/* La scheda Dettagli: la tabella dell'ERP su tutti i filati, piu' alta di
   quella della scheda di una qualita' perche' e' la schermata stessa. */
.fil-erp-lungo { max-height: 78vh; }
/* Sulle tessere del catalogo la classe e' del colore: il bordo la dice. */
.fil-tessera-ferma { border-color: var(--danger); }
.fil-tessera-lenta { border-color: var(--md-sys-color-warning); }
.fil-tessera-ruota { border-color: var(--success); }
/* Griglie compatte: righe basse, testo piccolo, per le liste lunghe. */
.fil-page .fil-compatta .k-grid.m3-grid .k-grid-content td { padding: 4px 6px !important; font-size: 12px !important; line-height: 16px !important; }
.fil-page .fil-compatta .k-grid.m3-grid .k-table-th { padding: 6px !important; font-size: 11px !important; }

/* Dettagli: il totale dell'articolo/colore si deve vedere a colpo d'occhio,
   anche con cento colori a schermo. Fondo del colore del ruolo, bordo sopra,
   testo piu' grande delle partite. */
.fil-erp-totale-forte td {
    background: var(--md-sys-color-primary-container) !important; color: var(--md-sys-color-on-primary-container);
    border-top: 2px solid var(--btn-primary); font-size: 12.5px;
}
.fil-erp-totale-forte td.fil-erp-cons, .fil-erp-totale-forte td.fil-erp-val { background: var(--md-sys-color-primary-container) !important; }
.fil-erp .fil-erp-val { background: var(--md-sys-color-surface-container-low); }
.fil-erp th.fil-erp-val { background: var(--md-sys-color-surface-container-highest); }
.fil-erp-nota { max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-style: italic; }
.fil-erp-lotto.is-bloccata td { color: var(--ink-3); }
.fil-erp .c { text-align: center; }
.fil-obsoleto { color: var(--danger); font-weight: 700; }
.fil-uso {
    border: 1px solid var(--line); background: var(--card-bg); color: var(--btn-primary); border-radius: 6px;
    width: 26px; height: 22px; padding: 0; cursor: pointer; line-height: 1;
}
.fil-uso:hover { border-color: var(--btn-primary); }
.fil-sezione { margin: 14px 0 6px; font-size: 13px; }
.fil-usi-vendite { max-height: 320px; overflow: auto; }
.fil-finestra-usi .fil-tabella { font-size: 12.5px; }

/* Catalogo filati, 28/09 sera: il pager di Dettagli, il totale in fondo, e la
   finestra «dove e' stato usato» a tessere, con il consiglio di vendita. */
.fil-obsoleto-ico { margin-right: 5px; }
.fil-erp tfoot .fil-erp-generale td {
    background: var(--btn-primary) !important; color: var(--md-sys-color-on-primary);
    font-weight: 700; font-size: 12.5px; border-top: 2px solid var(--btn-primary);
    position: sticky; bottom: 0;
}
.fil-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.fil-pag {
    min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--card-bg); color: var(--ink); cursor: pointer; font-size: 13px;
}
.fil-pag:hover:not(:disabled) { border-color: var(--btn-primary); color: var(--btn-primary); }
.fil-pag.is-active { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--md-sys-color-on-primary); font-weight: 700; }
.fil-pag:disabled { opacity: .4; cursor: default; }
.fil-pag-gap { color: var(--ink-3); padding: 0 2px; }
.fil-pag-info { font-size: 12.5px; color: var(--ink-2); margin-left: 10px; }
.fil-pag-dim { margin-left: 18px; }

.fil-usi-testa {
    display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
    padding: 14px 18px; margin-bottom: 10px; border-radius: 12px;
    background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
    border-left: 5px solid var(--btn-primary);
}
.fil-usi-chi { margin-right: auto; }
.fil-usi-filato { font-size: 20px; font-weight: 800; letter-spacing: .3px; }
.fil-usi-num { display: flex; flex-direction: column; min-width: 80px; }
.fil-usi-num span { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; opacity: .8; }
.fil-usi-num b { font-size: 17px; font-variant-numeric: tabular-nums; }
.fil-usi-tessuti { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.fil-usi-tessuto {
    text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--card-bg);
    padding: 12px 14px; cursor: pointer; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.fil-usi-tessuto:hover { border-color: var(--btn-primary); box-shadow: 0 0 0 1px var(--btn-primary); }
.fil-usi-tessuto.is-scelto { border: 2px solid var(--btn-primary); background: var(--md-sys-color-surface-container-low); }
.fil-usi-t-cod { font-weight: 800; font-size: 14.5px; }
.fil-usi-t-descr { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-usi-t-resa { margin-top: 8px; color: var(--btn-primary); }
.fil-usi-t-resa b { font-size: 24px; font-variant-numeric: tabular-nums; }
.fil-usi-t-resa span { font-size: 13px; font-weight: 600; }
.fil-usi-t-sub { font-size: 11px; color: var(--ink-3); margin-bottom: 6px; }
.fil-usi-t-riga { font-size: 12px; color: var(--ink-2); }
.fil-usi-t-apri { margin-top: 8px; font-size: 12px; color: var(--btn-primary); font-weight: 600; }
.fil-usi-vendite-box { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card-bg); }
.fil-usi-vendite-tit { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.fil-usi-suggerimento { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.fil-consiglio { border-radius: 12px; padding: 12px 14px; background: var(--md-sys-color-surface-container-low); border: 1px solid var(--line); }
.fil-consiglio-avviso { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.fil-consiglio-lista { display: flex; flex-direction: column; gap: 10px; }
.fil-consiglio-voce { display: flex; gap: 12px; background: var(--card-bg); border-radius: 10px; padding: 10px 12px; border: 1px solid var(--line); }
.fil-consiglio-n {
    flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--btn-primary);
    color: var(--md-sys-color-on-primary); display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.fil-consiglio-corpo { flex: 1; min-width: 0; }
.fil-consiglio-nome { font-weight: 700; font-size: 14px; }
.fil-consiglio-titolo { font-size: 13px; color: var(--accent-strong); margin-top: 2px; font-weight: 600; }
.fil-consiglio-motivi { margin: 6px 0 4px 18px; padding: 0; font-size: 12.5px; color: var(--ink); }
.fil-consiglio-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fil-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 10px; background: var(--md-sys-color-surface-container-highest); color: var(--ink-2); }
.fil-chip-tessuti { background: transparent; border: 1px solid var(--line); }
.fil-consiglio-nota { margin-top: 10px; font-size: 12.5px; font-style: italic; color: var(--ink-2); }
.fil-consiglio-fonte { margin-top: 8px; font-size: 11px; color: var(--ink-3); }
.fil-finestra-usi .fil-sezione { display: flex; align-items: center; gap: 6px; margin-top: 18px; }

/* Dettagli: la tabella prende l'altezza che resta nello schermo (filati.js),
   e sotto, sulla stessa riga del pager, «solo i totali», il conteggio e l'Excel. */
.fil-pager { margin: 8px 0 0; }
.fil-pager .fil-riga-tasti { margin: 0 0 0 auto; gap: 12px; }

/* Catalogo filati, 29/09: i filtri su due righe fisse, e in Dettagli filato,
   colore e partita restano fermi a sinistra mentre si scorre di lato. Le tre
   colonne hanno larghezza dichiarata perche' ognuna sa dove comincia la
   successiva: con larghezze decise dal contenuto, lo scarto fra le colonne
   fisse cambierebbe a ogni pagina. */
.fil-filtri { display: flex; flex-direction: column; gap: 8px; }
.fil-filtri .fil-filtri-riga { flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.fil-dettagli .fil-fix1, .fil-dettagli .fil-fix2, .fil-dettagli .fil-fix3 {
    position: sticky; z-index: 2; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;
    background: var(--card-bg);
}
.fil-dettagli .fil-fix1 { left: 0; width: 130px; min-width: 130px; max-width: 130px; }
.fil-dettagli .fil-fix2 { left: 130px; width: 220px; min-width: 220px; max-width: 220px; }
.fil-dettagli .fil-fix3 { left: 350px; width: 130px; min-width: 130px; max-width: 130px; box-shadow: inset -1px 0 0 var(--line); }
.fil-dettagli .fil-fix-tutte { width: 480px; min-width: 480px; max-width: 480px; }
.fil-dettagli thead th.fil-fix1, .fil-dettagli thead th.fil-fix2, .fil-dettagli thead th.fil-fix3 {
    z-index: 4; background: var(--md-sys-color-surface-container-high);
}
.fil-dettagli .fil-erp-totale-forte td.fil-fix1, .fil-dettagli .fil-erp-totale-forte td.fil-fix2, .fil-dettagli .fil-erp-totale-forte td.fil-fix3 {
    background: var(--md-sys-color-primary-container) !important;
}
.fil-dettagli tfoot .fil-erp-generale td.fil-fix1 { z-index: 3; background: var(--btn-primary) !important; }

/* Catalogo filati, 29/09: le correzioni al consiglio di vendita. */
.fil-usi-tessuto { position: relative; }
.fil-usi-t-escludi {
    position: absolute; top: 8px; right: 10px; color: var(--ink-3); cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.fil-usi-t-escludi:hover { color: var(--danger); background: var(--md-sys-color-surface-container-high); }
.fil-usi-esclusi { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.fil-usi-escluso { background: var(--md-sys-color-surface-container-low); border: 1px dashed var(--line); border-radius: 8px; padding: 2px 8px; }
.fil-link-tasto { background: none; border: 0; padding: 0 4px; color: var(--btn-primary); cursor: pointer; font-size: 12px; font-weight: 600; }
.fil-link-tasto:hover { text-decoration: underline; }
.fil-consiglio-no {
    margin-left: 10px; border: 1px solid var(--line); background: var(--card-bg); color: var(--ink-2); border-radius: 14px;
    font-size: 11.5px; font-weight: 500; padding: 1px 9px; cursor: pointer;
}
.fil-consiglio-no:hover { border-color: var(--danger); color: var(--danger); }
.fil-segnala { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--btn-primary); border-radius: 10px; background: var(--md-sys-color-surface-container-low); }
.fil-segnala-tit { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.fil-segnala-scelte { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fil-segnala-scelta {
    border: 1px solid var(--line); background: var(--card-bg); color: var(--ink); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; cursor: pointer;
}
.fil-segnala-scelta.is-active { border-color: var(--btn-primary); background: var(--btn-primary); color: var(--md-sys-color-on-primary); }
.fil-segnala-prefisso { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
.fil-segnala-motivo { width: 100%; }
.fil-segnala-motivo textarea { min-height: 54px; }
.fil-segnala-tasti { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.fil-regole { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; font-size: 12.5px; }
.fil-regole-lista { margin: 6px 0 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.fil-regole-lista li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

/* La finestra «dove e' stato usato» ha sotto lo stesso respiro dei lati: i
   ritocchi Material danno a .k-window-content «padding: 0 24px !important», e
   senza !important qui l'ultima riga resterebbe a filo del bordo. */
.fil-finestra-usi .k-window-content { padding-bottom: 24px !important; }
.fil-finestra-usi .fil-consiglio { margin-bottom: 4px; }

/* Lotti fermi e Da decidere: la griglia riempie lo schermo e il pager sta in fondo (filati.js). */
.fil-griglia-alta { display: flex; flex-direction: column; margin-bottom: 0; }
.fil-griglia-alta > .k-grid { flex: 1; min-height: 0; }

/* Catalogo filati, 29/09: il filtro per quantita' della partita, e il costo
   senza dazi (prezzo d'ordine o corrente) scritto in corsivo con l'asterisco. */
.fil-qta { display: flex; gap: 6px; align-items: center; }
.fil-erp td.fil-senza-dazi { font-style: italic; color: var(--ink-2); }