body {
            padding: 0;
            background-color: #f0f4f8; /* Softer, cooler bg */
            background-image: radial-gradient(circle at top left, rgba(72, 49, 176, 0.03), transparent 400px), radial-gradient(circle at bottom right, rgba(0, 223, 158, 0.03), transparent 400px);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: #0f172a;
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
        }
        h1, h2, h3, h4, h5, h6, .modal-title, .card-title, .entity-title, .nav-tabs-modern .nav-link {
            font-family: 'Outfit', sans-serif;
            font-weight: 600;
        }
        .dashboard-header {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 16px 28px;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0,0,0,0.02);
            margin-bottom: 24px;
            margin-top: 16px;
            border: 1px solid rgba(255, 255, 255, 0.4);
            position: sticky;
            top: 16px;
            z-index: 1020;
            transition: all 0.3s ease;
        }
        .dashboard-header:hover {
            box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0,0,0,0.02);
        }
        .nav-tabs-modern {
            border-bottom: 2px solid #e5e7eb;
            gap: 4px;
            padding: 0 4px;
        }
        .nav-tabs-modern .nav-link {
            border: none;
            color: #6b7280;
            font-weight: 500;
            font-size: 13px;
            padding: 10px 18px;
            border-radius: 8px 8px 0 0;
            margin-bottom: -2px;
            transition: all 0.15s ease;
        }
        .nav-tabs-modern .nav-link:hover {
            color: #374151;
            background: #f3f4f6;
            border: none;
        }
        .nav-tabs-modern .nav-link.active {
            color: #1d4ed8;
            background: transparent;
            border: none;
            border-bottom: 2px solid #1d4ed8;
        }
        .tab-content {
            background: white;
            border-radius: 0 0 12px 12px;
            padding: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .table-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px; }
        .selected-row { background-color: #e9ecef !important; }
        .clickable-subject { color: #0d6efd; cursor: pointer; text-decoration: none; }
        .clickable-subject:hover { text-decoration: underline; }
        /* Email queue table — wider subject, 2-line clamp */
        .subject-clamp {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
            line-height: 1.4;
            max-height: 2.8em;
        }
        pre.email-body { white-space: pre-wrap; font-family: monospace; font-size: 0.9em; background: #f8f9fa; padding: 10px; border-radius: 5px; }
        .diff-added { color: #055d20; background-color: #e6ffec; text-decoration: none; }
        .diff-removed { color: #cf222e; background-color: #ffebe9; text-decoration: line-through; }

        /* ── Modal tab panes: only active pane participates in flex layout ── */
        #pills-tabContent > .tab-pane.active.show,
        #pills-client-tabContent > .tab-pane.active.show,
        #pills-supplier-tabContent > .tab-pane.active.show {
            display: flex !important;
            flex-direction: column;
            flex-grow: 1;
            min-height: 0;
        }

        /* ── Entity DB fields: responsive list → pills on mobile ── */
        .entity-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; }
        .entity-fields { display: flex; flex-direction: column; gap: 0; }

        .entity-field {
            display: flex; flex-direction: column;
            padding: 0.35rem 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .entity-field:last-child { border-bottom: none; }
        .ef-label {
            color: #6b7280; text-transform: uppercase; font-weight: 600;
            font-size: 0.65rem; letter-spacing: 0.5px; margin-bottom: 1px;
        }
        .ef-value { font-weight: 600; font-size: 0.88rem; }

        .entity-field-suppliers { border-bottom: none; padding-top: 0.5rem; margin-top: 0.25rem; border-top: 1px solid #dee2e6; }

        /* Mobile: ultra-compact wrapped pills for fields to save vertical space */
        @media (max-width: 767.98px) {
            .entity-fields { 
                flex-direction: row; 
                flex-wrap: wrap;
                gap: 6px; 
            }
            .entity-field {
                flex-direction: row; 
                align-items: center; 
                gap: 5px;
                padding: 4px 10px; 
                border-bottom: none;
                background: rgba(240, 244, 248, 0.8);
                border: 1px solid rgba(0,0,0,0.03);
                border-radius: 12px;
                white-space: nowrap;
            }
            .entity-field-suppliers {
                width: 100%; flex-direction: column;
                border-top: 1px solid #dee2e6; margin-top: 4px; padding-top: 6px;
                background: transparent; border: none; padding-left: 0; padding-right: 0;
            }
            .ef-label { font-size: 0.6rem; letter-spacing: 0.2px; margin-bottom: 0; opacity: 0.8; }
            .ef-value { font-size: 0.8rem; }
            .entity-title { font-size: 0.9rem; margin-bottom: 0.5rem; width: 100%; }

            /* Modal sidebar becomes stacked */
            #eventDetailsModal .col-md-2,
            #clientDetailsModal .border-end,
            #supplierDetailsModal .border-end {
                flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
                border-right: none !important; border-bottom: 1px solid #e2e8f0;
                padding-bottom: 12px !important; margin-bottom: 12px !important;
                max-height: none !important; overflow-y: visible !important;
            }
            #eventDetailsModal .col-md-10 {
                flex: 0 0 100% !important; max-width: 100% !important;
            }
            
            /* Make modal nav pills horizontally scrollable */
            .modal-body .nav-pills {
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 4px;
            }
            .modal-body .nav-pills::-webkit-scrollbar {
                display: none;
            }
            /* Fix flex direction for modal row */
            #eventDetailsModal .row.g-2 { flex-direction: column; }
        }

        /* ── Modern Premium UI Additions ── */
        .modal-tab-content > .tab-pane.active.show {
            display: flex !important;
            flex-grow: 1;
            min-height: 0;
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.15);
            border-radius: 10px;
        }
        .custom-scrollbar:hover::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.3);
        }
        
        .letter-spacing-1 {
            letter-spacing: 1px;
        }

        /* Responsive Modal Sidebar */
        .modal-sidebar {
            width: 100%;
            max-height: 50vh;
            display: flex;
            flex-direction: column;
        }
        @media (min-width: 768px) {
            .modal-sidebar {
                width: 320px !important;
                max-height: none;
            }
        }

        /* Nav Tabs Horizontal Scroll on Mobile */
        .nav-tabs-modern {
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .nav-tabs-modern::-webkit-scrollbar {
            display: none;
        }

        .cursor-pointer { cursor: pointer !important; }

        /* ── Model badge for AI agent tabs ── */
        .badge.bg-purple { background-color: #7c3aed !important; color: #fff; }
        .text-purple { color: #7c3aed !important; }

        /* ── Tasklist markdown rendering: normalize heading sizes ── */
        #tasklistContent h2 { font-size: 1.1rem; font-weight: 700; margin-top: 1rem; margin-bottom: 0.4rem; }
        #tasklistContent h3 { font-size: 1rem; font-weight: 700; margin-top: 0.8rem; }
        #tasklistContent h4 { font-size: 0.95rem; font-weight: 600; }
        #tasklistContent h5 { font-size: 0.9rem; font-weight: 600; }
        #tasklistContent p { margin-bottom: 0.3rem; }
        #tasklistContent ul { padding-left: 1.2rem; margin-bottom: 0.5rem; }
        #tasklistContent li { margin-bottom: 0.15rem; font-size: 0.9rem; }

        /* ── Priore modal cronologia: same heading normalization ── */
        #priore-cron h2 { font-size: 1rem; font-weight: 700; margin-top: 0.6rem; }
        #priore-cron h3 { font-size: 0.95rem; font-weight: 600; }
        #priore-cron li { font-size: 0.85rem; }

        /* ── Pure CSS Tooltips ── */
        .css-tooltip {
            position: relative;
        }
        .css-tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%) scale(0.85);
            background-color: #1f2937;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s ease, transform 0.15s ease;
            pointer-events: none;
            color: #6b7280;
            font-weight: 500;
            font-size: 13px;
            padding: 10px 18px;
            border-radius: 8px 8px 0 0;
            margin-bottom: -2px;
            transition: all 0.15s ease;
        }
        .nav-tabs-modern .nav-link:hover {
            color: #374151;
            background: #f3f4f6;
            border: none;
        }
        .nav-tabs-modern .nav-link.active {
            color: #1d4ed8;
            background: transparent;
            border: none;
            border-bottom: 2px solid #1d4ed8;
        }
        .tab-content {
            background: white;
            border-radius: 0 0 12px 12px;
            padding: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .table-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px; }
        .selected-row { background-color: #e9ecef !important; }
        .clickable-subject { color: #0d6efd; cursor: pointer; text-decoration: none; }
        .clickable-subject:hover { text-decoration: underline; }
        /* Email queue table — wider subject, 2-line clamp */
        .subject-clamp {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
            line-height: 1.4;
            max-height: 2.8em;
        }
        pre.email-body { white-space: pre-wrap; font-family: monospace; font-size: 0.9em; background: #f8f9fa; padding: 10px; border-radius: 5px; }
        .diff-added { color: #055d20; background-color: #e6ffec; text-decoration: none; }
        .diff-removed { color: #cf222e; background-color: #ffebe9; text-decoration: line-through; }

        /* ── Modal tab panes: only active pane participates in flex layout ── */
        #pills-tabContent > .tab-pane.active.show,
        #pills-client-tabContent > .tab-pane.active.show,
        #pills-supplier-tabContent > .tab-pane.active.show {
            display: flex !important;
            flex-direction: column;
            flex-grow: 1;
            min-height: 0;
        }

        /* ── Entity DB fields: responsive list → pills on mobile ── */
        .entity-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; }
        .entity-fields { display: flex; flex-direction: column; gap: 0; }

        .entity-field {
            display: flex; flex-direction: column;
            padding: 0.35rem 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .entity-field:last-child { border-bottom: none; }
        .ef-label {
            color: #6b7280; text-transform: uppercase; font-weight: 600;
            font-size: 0.65rem; letter-spacing: 0.5px; margin-bottom: 1px;
        }
        .ef-value { font-weight: 600; font-size: 0.88rem; }

        .entity-field-suppliers { border-bottom: none; padding-top: 0.5rem; margin-top: 0.25rem; border-top: 1px solid #dee2e6; }

        /* Mobile: compact horizontal pills */
        @media (max-width: 767.98px) {
            .entity-fields { flex-direction: row; flex-wrap: wrap; gap: 4px; }
            .entity-field {
                flex-direction: row; align-items: baseline; gap: 3px;
                padding: 2px 8px; border-bottom: none;
                background: #f8f9fa; border-radius: 6px;
                white-space: nowrap;
            }
            .entity-field-suppliers {
                width: 100%; flex-direction: column;
                border-top: 1px solid #dee2e6; margin-top: 4px; padding-top: 4px;
                background: transparent; border-radius: 0;
            }
            .ef-label { font-size: 0.62rem; letter-spacing: 0.3px; margin-bottom: 0; }
            .ef-value { font-size: 0.75rem; }
            .entity-title { font-size: 0.78rem; margin-bottom: 0.25rem; }

            /* Modal sidebar becomes full-width pill row */
            #eventDetailsModal .col-md-2,
            #clientDetailsModal .border-end,
            #supplierDetailsModal .border-end {
                flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
                border-right: none !important; border-bottom: 1px solid #dee2e6;
                padding-bottom: 4px !important; margin-bottom: 6px !important;
                max-height: none !important; overflow-y: visible !important;
            }
            #eventDetailsModal .col-md-10 {
                flex: 0 0 100% !important; max-width: 100% !important;
            }
            #eventDetailsModal .row.g-2 { flex-direction: column; }
        }

        /* ── Modern Premium UI Additions ── */
        .modal-tab-content > .tab-pane.active.show {
            display: flex !important;
            flex-grow: 1;
            min-height: 0;
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.15);
            border-radius: 10px;
        }
        .custom-scrollbar:hover::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.3);
        }
        
        .letter-spacing-1 {
            letter-spacing: 1px;
        }

        /* Responsive Modal Sidebar */
        .modal-sidebar {
            width: 100%;
            max-height: 50vh;
            display: flex;
            flex-direction: column;
        }
        @media (min-width: 768px) {
            .modal-sidebar {
                width: 320px !important;
                max-height: none;
            }
        }

        /* Nav Tabs Horizontal Scroll on Mobile */
        .nav-tabs-modern {
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .nav-tabs-modern::-webkit-scrollbar {
            display: none;
        }

        .cursor-pointer { cursor: pointer !important; }

        /* ── Model badge for AI agent tabs ── */
        .badge.bg-purple { background-color: #7c3aed !important; color: #fff; }
        .text-purple { color: #7c3aed !important; }

        /* ── Tasklist markdown rendering: normalize heading sizes ── */
        #tasklistContent h2 { font-size: 1.1rem; font-weight: 700; margin-top: 1rem; margin-bottom: 0.4rem; }
        #tasklistContent h3 { font-size: 1rem; font-weight: 700; margin-top: 0.8rem; }
        #tasklistContent h4 { font-size: 0.95rem; font-weight: 600; }
        #tasklistContent h5 { font-size: 0.9rem; font-weight: 600; }
        #tasklistContent p { margin-bottom: 0.3rem; }
        #tasklistContent ul { padding-left: 1.2rem; margin-bottom: 0.5rem; }
        #tasklistContent li { margin-bottom: 0.15rem; font-size: 0.9rem; }

        /* ── Priore modal cronologia: same heading normalization ── */
        #priore-cron h2 { font-size: 1rem; font-weight: 700; margin-top: 0.6rem; }
        #priore-cron h3 { font-size: 0.95rem; font-weight: 600; }
        #priore-cron li { font-size: 0.85rem; }

        /* ── Pure CSS Tooltips ── */
        .css-tooltip {
            position: relative;
        }
        .css-tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%) scale(0.85);
            background-color: #1f2937;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s ease, transform 0.15s ease;
            pointer-events: none;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            font-weight: 500;
            z-index: 1000;
        }
        .css-tooltip:hover::after {
            opacity: 1;
            visibility: visible;
        }

        /* ── Premium Light Theme (Here We Grow SaaS Style) ── */
        :root {
            --hwg-purple: #4831B0;
            --hwg-purple-light: #ecebfe;
            --hwg-mint: #00DF9E;
            --hwg-mint-light: #ccf9ea;
            --hwg-green: #009468;
            --hwg-coral: #e03000;

            /* Cool, elevated glass palette */
            --bg: #f0f4f8;             
            --surface: rgba(255, 255, 255, 0.85);        
            --surface-blur: blur(20px);
            --card: rgba(255, 255, 255, 0.95);           
            --card-hover: #ffffff;
            --nav-bg: rgba(226, 232, 240, 0.6);         
            --border: rgba(203, 213, 225, 0.5);
            --border-strong: rgba(148, 163, 184, 0.4);
            --text: #0f172a;
            --text-muted: #475569;
            --text-subtle: #64748b;
        }

        body {
            background-color: var(--bg) !important;
            color: var(--text) !important;
        }

        /* Dashboard Header — modern glassmorphic panel floating on bg */
        .dashboard-header {
            background: rgba(255, 255, 255, 0.76) !important;
            backdrop-filter: var(--surface-blur) !important;
            -webkit-backdrop-filter: var(--surface-blur) !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
            border-bottom: 2px solid rgba(0, 223, 158, 0.35) !important;
            padding: 14px 24px;
            border-radius: 16px;
            margin-bottom: 24px;
            margin-top: 16px;
            color: var(--text);
            position: sticky;
            top: 16px;
            z-index: 1020;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.03), 
                        inset 0 1px 1px rgba(255, 255, 255, 0.8),
                        0 2px 12px rgba(0, 0, 0, 0.04) !important;
            transition: all 0.3s ease;
        }
        .dashboard-header:hover {
            box-shadow: 0 12px 40px rgba(72, 49, 176, 0.06), 
                        inset 0 1px 1px rgba(255, 255, 255, 0.9),
                        0 4px 16px rgba(0, 0, 0, 0.06) !important;
        }
        
        /* Premium Gradient Text for Title */
        .dashboard-header-title {
            font-family: 'Outfit', sans-serif;
            font-size: 1.45rem !important;
            font-weight: 800 !important;
            background: linear-gradient(135deg, var(--hwg-purple) 0%, var(--hwg-mint) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.5px;
            margin: 0;
            display: inline-block;
        }

        /* Header Logo/Badge */
        .header-logo-badge {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--hwg-purple) 0%, var(--hwg-mint) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 1.15rem;
            box-shadow: 0 4px 12px rgba(72, 49, 176, 0.25);
            transition: all 0.3s ease;
        }
        
        .dashboard-header:hover .header-logo-badge {
            transform: rotate(6deg) scale(1.06);
            box-shadow: 0 6px 16px rgba(72, 49, 176, 0.35);
        }
        .dashboard-header .text-dark {
            color: var(--text) !important;
        }
        .dashboard-header .text-muted,
        .dashboard-header .small {
            color: var(--text-muted) !important;
        }

        /* ── Nav Tabs — modern pills, glass segmented control style ── */
        .nav-tabs-modern {
            background: var(--nav-bg) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            border: 1px solid var(--border) !important;
            border-radius: 14px !important;
            padding: 6px !important;
            gap: 4px !important;
            margin-bottom: 24px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.02) inset;
            display: inline-flex;
            width: fit-content;
        }
        @media (max-width: 768px) {
            .nav-tabs-modern { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
        }
        .nav-tabs-modern .nav-item {
            margin-bottom: 0;
        }
        .nav-tabs-modern .nav-link {
            color: var(--text-muted) !important;
            background: transparent !important;
            border: none !important;
            border-radius: 10px !important;
            font-size: 14px;
            font-weight: 500;
            padding: 10px 20px !important;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
        }
        .nav-tabs-modern .nav-link:hover {
            color: var(--text) !important;
            background: rgba(255, 255, 255, 0.4) !important;
        }
        .nav-tabs-modern .nav-link.active {
            color: var(--hwg-purple) !important;
            background: #ffffff !important;
            font-weight: 700 !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0,0,0,0.02) !important;
        }

        /* Tab Content Panel */
        .tab-content {
            background: transparent !important; /* Content will be directly on bg now, cards will hold the content */
            border: none !important;
            border-radius: 0 !important;
            color: var(--text) !important;
            box-shadow: none !important;
            padding: 0 !important;
        }

        /* Cards */
        .card {
            background: var(--card) !important;
            backdrop-filter: var(--surface-blur) !important;
            -webkit-backdrop-filter: var(--surface-blur) !important;
            border: 1px solid var(--border) !important;
            border-radius: 16px !important;
            color: var(--text) !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02) !important;
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
        }
        .card:hover {
            background: var(--card-hover) !important;
            border-color: var(--border-strong) !important;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0,0,0,0.03) !important;
            transform: translateY(-2px) !important;
        }
        .card-title {
            color: var(--text) !important;
        }
        .card-header {
            background-color: #f8fafc !important;
            border-bottom: 1px solid var(--border) !important;
            color: var(--text) !important;
        }

        /* Tables */
        .table {
            color: var(--text) !important;
        }
        .table th {
            color: var(--text-muted) !important;
            background-color: #f1f5f9 !important;
            border-bottom: 2px solid var(--border-strong) !important;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            font-weight: 600;
        }
        .table td {
            border-bottom: 1px solid var(--border) !important;
            color: var(--text) !important;
        }
        .table tbody tr:hover td {
            background-color: #f8f9ff !important;
        }
        .selected-row {
            background-color: rgba(0, 223, 158, 0.08) !important;
        }
        .table-container {
            background: var(--card) !important;
            border: 1px solid var(--border-strong) !important;
            border-radius: 12px !important;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
        }

        /* Buttons */
        .btn-primary {
            background-color: var(--hwg-mint) !important;
            border-color: var(--hwg-mint) !important;
            color: #0a1a14 !important;
            font-weight: 600 !important;
            box-shadow: 0 2px 8px rgba(0, 223, 158, 0.35);
        }
        .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
            background-color: #00C289 !important;
            border-color: #00C289 !important;
            color: #0a1a14 !important;
            box-shadow: 0 4px 14px rgba(0, 194, 137, 0.5);
        }
        .btn-outline-primary {
            color: var(--hwg-purple) !important;
            border-color: var(--hwg-purple) !important;
        }
        .btn-outline-primary:hover {
            background-color: var(--hwg-purple) !important;
            color: #fff !important;
        }
        .btn-outline-secondary {
            color: var(--text-muted) !important;
            border-color: var(--border-strong) !important;
        }
        .btn-outline-secondary:hover {
            background-color: var(--border) !important;
            color: var(--text) !important;
        }

        /* Text & Utility */
        .text-muted {
            color: var(--text-muted) !important;
        }
        .text-primary {
            color: var(--hwg-purple) !important;
        }
        .bg-light {
            background-color: #f1f5f9 !important;
            color: var(--text-muted) !important;
        }
        .border-bottom {
            border-bottom: 1px solid var(--border) !important;
        }
        .border-top {
            border-top: 1px solid var(--border) !important;
        }
        .list-group-item {
            background-color: var(--card) !important;
            border-color: var(--border) !important;
            color: var(--text) !important;
        }
        .list-group-item:hover {
            background-color: var(--card-hover) !important;
        }

        /* Entity field labels in modals */
        .ef-label {
            color: var(--text-subtle) !important;
        }
        .ef-value {
            color: var(--text) !important;
        }
        .entity-field {
            border-bottom-color: var(--border) !important;
        }

        /* Modals */
        .modal-content {
            background-color: var(--card) !important;
            color: var(--text) !important;
            border: 1px solid var(--border-strong) !important;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
            border-radius: 16px !important;
        }
        .modal-header {
            border-bottom: 1px solid var(--border) !important;
            background-color: #f8fafc !important;
            border-radius: 16px 16px 0 0 !important;
        }
        .modal-footer {
            border-top: 1px solid var(--border) !important;
            background-color: #f8fafc !important;
            border-radius: 0 0 16px 16px !important;
        }
        .modal-title {
            color: var(--text) !important;
        }

        /* Forms */
        .form-control, .form-select {
            background-color: #ffffff !important;
            border: 1px solid var(--border-strong) !important;
            color: var(--text) !important;
            border-radius: 8px !important;
        }
        .form-control::placeholder {
            color: var(--text-subtle) !important;
        }
        .form-control:focus, .form-select:focus {
            background-color: #ffffff !important;
            border-color: var(--hwg-mint) !important;
            color: var(--text) !important;
            box-shadow: 0 0 0 3px rgba(0, 223, 158, 0.2) !important;
        }
        .form-label {
            color: var(--text-muted) !important;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        /* Nav pills inside modals */
        .nav-pills .nav-link {
            color: var(--text-muted) !important;
            background: transparent !important;
            border-radius: 8px !important;
            font-size: 13px;
            padding: 6px 14px !important;
        }
        .nav-pills .nav-link:hover {
            color: var(--text) !important;
            background: var(--border) !important;
        }
        .nav-pills .nav-link.active {
            background: rgba(0, 223, 158, 0.12) !important;
            color: var(--hwg-green) !important;
            font-weight: 600;
        }

        /* Sidebar in entity modals */
        .modal .border-end {
            border-right-color: var(--border) !important;
        }

        /* Override Popups */
        [data-ov-popup="1"] {
            background-color: var(--card) !important;
            color: var(--text) !important;
            border: 1px solid var(--border-strong) !important;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
            border-radius: 12px !important;
        }
        .bg-opacity-75.bg-primary {
            background-color: rgba(72, 49, 176, 0.75) !important;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px; height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(100,116,139,0.25);
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(100,116,139,0.45);
        }

        /* Clickable items */
        .clickable-subject {
            color: var(--hwg-purple) !important;
        }
        .clickable-subject:hover {
            color: var(--hwg-green) !important;
        }

/* Processing row highlight � animated blue gradient */
.processing-row {
    background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 50%, #eff6ff 100%) !important;
    background-size: 200% 100% !important;
    animation: processingPulse 1.8s ease-in-out infinite;
    border-left: 3px solid #3b82f6 !important;
}
.processing-row td { font-weight: 500; }
@keyframes processingPulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* == Detail Modal Flex Layout ==
   Bootstrap sets display:block on .tab-pane.show.active which breaks the flex chain.
   These rules enforce the correct flex hierarchy so content scrolls internally.
*/

#eventDetailsModal .modal-content,
#supplierDetailsModal .modal-content,
#clientDetailsModal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
}

#eventDetailsModal .modal-body,
#supplierDetailsModal .modal-body,
#clientDetailsModal .modal-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 768px) {
    #eventDetailsModal .modal-sidebar,
    #supplierDetailsModal .modal-sidebar,
    #clientDetailsModal .modal-sidebar {
        height: 100% !important;
        max-height: none !important;
    }
}

#pills-tabContent,
#pills-supplier-tabContent,
#pills-client-tabContent {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#pills-files.tab-pane.show.active,
#pills-history.tab-pane.show.active,
#pills-emails.tab-pane.show.active,
#pills-attachments.tab-pane.show.active,
#pills-supplier-files.tab-pane.show.active,
#pills-supplier-events.tab-pane.show.active,
#pills-supplier-history.tab-pane.show.active,
#pills-supplier-attachments.tab-pane.show.active,
#pills-client-files.tab-pane.show.active,
#pills-client-events.tab-pane.show.active,
#pills-client-history.tab-pane.show.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX: Prevent Bootstrap modal itself from scrolling
   Only the inner MD/file content areas should scroll.
   ══════════════════════════════════════════════════════════════ */
#eventDetailsModal.modal,
#clientDetailsModal.modal,
#supplierDetailsModal.modal {
    overflow-y: hidden !important;
    padding-right: 0 !important; /* prevent layout shift from scrollbar disappearing */
}

/* Remove Bootstrap's default tab-content padding inside modals —
   the flex layout manages spacing, padding breaks the height chain */
#pills-tabContent.tab-content,
#pills-supplier-tabContent.tab-content,
#pills-client-tabContent.tab-content {
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Ensure tab-panes ALWAYS participate in flex, even during
   Bootstrap's brief transition states (before .show/.active sync) */
#pills-tabContent > .tab-pane,
#pills-supplier-tabContent > .tab-pane,
#pills-client-tabContent > .tab-pane {
    display: none !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
#pills-tabContent > .tab-pane.active,
#pills-supplier-tabContent > .tab-pane.active,
#pills-client-tabContent > .tab-pane.active {
    display: flex !important;
    overflow: hidden !important;
}

/* ── MD Fascicolo cards: fill available space, only card-body scrolls ── */
#pills-files .custom-scrollbar,
#pills-supplier-files .custom-scrollbar,
#pills-client-files .custom-scrollbar {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
#eventFilesContainer,
#clientFilesContainer,
#supplierFilesContainer {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
#eventFilesContainer .card,
#clientFilesContainer .card,
#supplierFilesContainer .card {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
#eventFilesContainer .card-body,
#clientFilesContainer .card-body,
#supplierFilesContainer .card-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    max-height: none !important;
}

/* ==========================================
   TIMELINE VERSION HISTORY SYSTEM (GPR UX/UI)
   ========================================== */

#eventHistoryList, #clientHistoryList, #supplierHistoryList {
    position: relative;
    padding: 1.25rem 1rem !important;
}

/* Timeline Vertical Line */
#eventHistoryList::before, #clientHistoryList::before, #supplierHistoryList::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 28px;
    width: 2px;
    background: #e2e8f0; /* Slate 200 */
    z-index: 1;
}

/* Timeline Item base card */
#eventHistoryList .list-group-item, 
#clientHistoryList .list-group-item, 
#supplierHistoryList .list-group-item {
    position: relative;
    padding: 1rem 1.25rem 1rem 3.25rem !important;
    margin-bottom: 0.85rem !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #cbd5e1 !important; /* default left accent */
    border-radius: 10px !important;
    background-color: #ffffff !important;
    z-index: 2;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Timeline Dot / Indicator node */
#eventHistoryList .list-group-item::before, 
#clientHistoryList .list-group-item::before, 
#supplierHistoryList .list-group-item::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #94a3b8; /* Slate 400 */
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px #e2e8f0;
    z-index: 3;
    transition: all 0.2s ease;
}

/* Hover effects */
#eventHistoryList .list-group-item:hover, 
#clientHistoryList .list-group-item:hover, 
#supplierHistoryList .list-group-item:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    cursor: pointer;
}

#eventHistoryList .list-group-item:hover::before, 
#clientHistoryList .list-group-item:hover::before, 
#supplierHistoryList .list-group-item:hover::before {
    transform: translateY(-50%) scale(1.15);
}

/* Timeline dot colors based on entry type */
#eventHistoryList .list-group-item.border-info,
#clientHistoryList .list-group-item.border-info,
#supplierHistoryList .list-group-item.border-info {
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #0ea5e9 !important;
}

#eventHistoryList .list-group-item.border-info::before,
#clientHistoryList .list-group-item.border-info::before,
#supplierHistoryList .list-group-item.border-info::before {
    background: #0ea5e9; /* Sky 500 */
    box-shadow: 0 0 0 2px #bae6fd;
}

#eventHistoryList .list-group-item.border-danger,
#clientHistoryList .list-group-item.border-danger,
#supplierHistoryList .list-group-item.border-danger {
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #ef4444 !important;
}

#eventHistoryList .list-group-item.border-danger::before,
#clientHistoryList .list-group-item.border-danger::before,
#supplierHistoryList .list-group-item.border-danger::before {
    background: #ef4444 !important; /* Red 500 */
    box-shadow: 0 0 0 2px #fecaca;
}

/* Time Back Machine Action Card */
.timeline-rewind-action {
    background-color: #fff5f5 !important;
    border: 1px solid #feb2b2 !important;
    border-left: 4px solid #ef4444 !important;
}

.timeline-rewind-action::before {
    background: #ef4444 !important; /* Red 500 */
    box-shadow: 0 0 0 2px #fecaca !important;
}

.timeline-rewind-action:hover {
    background-color: #fff5f5 !important;
    border-color: #f87171 !important;
}

/* Rewound item styles (Faded, inactive look) */
.timeline-rewound-item {
    opacity: 0.55 !important;
    background-color: #fafafa !important;
    border: 1px dashed #d1d5db !important;
    border-left: 4px solid #9ca3af !important;
    transition: opacity 0.2s ease, background-color 0.2s ease !important;
}

.timeline-rewound-item::before {
    background: #9ca3af !important; /* Grey 400 */
    box-shadow: 0 0 0 2px #e5e7eb !important;
}

.timeline-rewound-item:hover {
    opacity: 0.85 !important;
    background-color: #f8fafc !important;
    border-style: solid !important;
}

.timeline-rewound-item .badge {
    text-decoration: line-through !important;
    opacity: 0.7;
}

/* ============================================================
   HWG HISTORY TIMELINE — Clean compact sidebar cards
   ============================================================ */

/* Base card item */
.hwg-history-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
    position: relative;
}
.hwg-history-item:hover {
    background: #f8fafc;
}

/* Inner layout: badge(s) left, timestamp right — no wrapping */
.hwg-history-item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
}

.hwg-history-badges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.hwg-history-badges .badge {
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Timestamp — always right, never squished */
.hwg-history-time {
    font-size: 0.68rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* Rewound / faded items */
.hwg-history-rewound {
    opacity: 0.65;
    border-left: 3px solid #fca5a5 !important;
    background: #fff5f5 !important;
}
.hwg-history-rewound:hover {
    opacity: 0.85;
    background: #fff1f1 !important;
}

/* Selected / active highlight */
.hwg-history-item.hwg-history-selected {
    background: #f0fdf4 !important;
    border-left: 3px solid #22c55e !important;
    opacity: 1 !important;
}
.hwg-history-item.hwg-history-selected .hwg-history-time {
    color: #15803d;
}

/* ⏪ TBM compact pill shown in the list */
.hwg-tbm-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #dc2626;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 999px;
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================
   HWG HISTORY DIFF PANEL — right side detail view
   ============================================================ */

/* Header row: badge(s) left, timestamp right */
.hwg-diff-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}
.hwg-diff-time {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 3px;
}

/* Time Back Machine banner — shown in detail panel only */
.hwg-tbm-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: #fff1f1;
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #7f1d1d;
}
.hwg-tbm-banner i {
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 2px;
}
.hwg-tbm-banner em {
    font-style: italic;
    color: #991b1b;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE-ONLY ELEMENTS — always hidden on desktop
   ══════════════════════════════════════════════════════════════ */
.hwg-bottom-sheet,
.hwg-bottom-sheet-backdrop {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE-NATIVE RESPONSIVE LAYOUT (iPhone 14: 390×844)
   All mobile overrides in one place — easy to audit & tune.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* ── Body: Adjust padding for fixed top/bottom native bars ── */
    body {
        padding-top: 60px !important;
        padding-bottom: 78px !important;
        font-size: 14px !important;
        background-color: #f8fafc !important;
    }

    /* ── Hide Desktop Navigation Header and Main Menu Tabs (Preserves Modal Tabs) ── */
    .dashboard-header,
    #dashboardTabs {
        display: none !important;
    }

    /* ── Container: Maximize content real estate ── */
    .container,
    .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* ── Tab Content Container ── */
    .tab-content {
        padding: 12px 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* ── Cards: Native app style elements ── */
    .card {
        border-radius: 16px !important;
        border: 1px solid rgba(15, 23, 42, 0.05) !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
        margin-bottom: 12px;
        background-color: #ffffff;
    }
    .card-body {
        padding: 16px !important;
    }
    .card:hover {
        transform: none !important;
    }
    .card[style*="transform"] {
        transform: none !important;
    }

    /* ── Grid: Force full width on columns ── */
    .row.g-3 > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ── Headings & Titles (Increased for legibility) ── */
    .card-title.h6, .card-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #0c1222 !important;
    }
    .card-text.small {
        font-size: 13.5px !important;
        color: #475569 !important;
    }

    /* ── Mobile Top Header (Sticky/Blur) ── */
    .hwg-mobile-top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 1030;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        padding: 0 16px;
    }
    .hwg-mobile-brand {
        font-size: 18px !important;
        font-weight: 700;
        color: #0f172a;
        letter-spacing: -0.01em;
    }

    /* ── Mobile Tab Bar (iOS Native Style) ── */
    .hwg-mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 1030;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
        display: flex !important;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }
    .mobile-tab-btn {
        background: transparent;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 500;
        padding: 4px 0;
        width: 20%;
        transition: color 0.15s ease;
        outline: none;
    }
    .mobile-tab-btn i {
        font-size: 20px;
        margin-bottom: 2px;
        transition: transform 0.15s ease;
    }
    .mobile-tab-btn.active {
        color: #7c3aed;
    }
    .mobile-tab-btn.active i {
        transform: scale(1.05);
    }

    /* ── Bottom Sheet Drawer Menu (Altro) — mobile only ── */
    .hwg-bottom-sheet-backdrop {
        display: block !important; /* Override desktop display:none */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.4);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .hwg-bottom-sheet-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }
    .hwg-bottom-sheet {
        display: block !important; /* Override desktop display:none */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        z-index: 1050;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 16px);
    }
    .hwg-bottom-sheet.open {
        transform: translateY(0);
    }
    .hwg-bottom-sheet-header {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f1f5f9;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 2;
    }
    .hwg-bottom-sheet-drag-handle {
        width: 36px;
        height: 5px;
        background: #e2e8f0;
        border-radius: 2.5px;
        margin-bottom: 8px;
    }

    /* ── Buttons & Touch Targets ── */
    .btn-sm, .btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        padding: 8px 16px !important;
    }
    .d-flex.gap-2 {
        gap: 8px !important;
    }

    /* ── Email Queue Responsive Table (CSS Grid Card List) ── */
    #emailTable {
        display: block !important;
        background: transparent !important;
        border: none !important;
    }
    #emailTable thead {
        display: none !important;
    }
    #emailTable tbody {
        display: block !important;
    }
    #emailTable tr {
        display: grid !important;
        grid-template-areas: 
            "check status date"
            "subject subject subject"
            "sender sender sender"
            "event event actions";
        grid-template-columns: 32px 1fr auto;
        gap: 8px;
        border: 1px solid rgba(15, 23, 42, 0.05) !important;
        border-radius: 16px;
        margin-bottom: 12px;
        padding: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
    }
    #emailTable td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        font-size: 13px !important;
        background: transparent !important;
    }
    #emailTable td:nth-child(1) { 
        grid-area: check; 
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    #emailTable td:nth-child(1) input[type="checkbox"] {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 1px solid #cbd5e1;
    }
    #emailTable td:nth-child(2) { 
        grid-area: date; 
        text-align: right; 
        color: #64748b; 
        font-size: 11px !important; 
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }
    #emailTable td:nth-child(3) { 
        grid-area: sender; 
        font-weight: 600; 
        color: #475569; 
        margin-top: 2px; 
    }
    #emailTable td:nth-child(4) { 
        grid-area: subject; 
        font-weight: 500; 
        font-size: 14.5px !important; 
        color: #0f172a;
        margin-top: 4px; 
    }
    #emailTable td:nth-child(5) { 
        grid-area: status; 
        display: flex !important; 
        align-items: center; 
        gap: 4px;
    }
    #emailTable td:nth-child(6) { 
        grid-area: event; 
        margin-top: 6px; 
    }
    #emailTable td:nth-child(7) { 
        grid-area: actions; 
        margin-top: 6px;
        display: flex !important;
        justify-content: flex-end;
        gap: 6px;
    }
    #emailTable td:nth-child(7) .btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        min-height: 36px;
        min-width: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Queue Action Toolbar adjustment */
    .tab-pane[id="queue"] .d-flex.flex-wrap {
        gap: 8px !important;
    }
    .tab-pane[id="queue"] select {
        flex-grow: 1;
        font-size: 13px !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
        min-height: 42px;
    }

    /* ── Modals: Native style full-screen bottom sheets ── */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
    }
    .modal-content {
        border-radius: 0 !important;
        height: 100% !important;
        max-height: 100vh !important;
        border: none !important;
        display: flex;
        flex-direction: column;
        background-color: #f8fafc;
    }
    .modal-header {
        padding: 14px 16px !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        background: #ffffff !important;
        flex-shrink: 0;
    }
    .modal-header .modal-title {
        font-size: 18px !important;
        font-weight: 700 !important;
    }
    .modal-header .btn-close {
        font-size: 0.8rem;
        padding: 8px !important;
    }
    .modal-body {
        padding: 16px !important;
        flex-grow: 1;
        overflow-y: auto;
    }
    .modal-footer {
        padding: 12px 16px !important;
        border-top: 1px solid rgba(0,0,0,0.06) !important;
        background: #ffffff !important;
        flex-shrink: 0;
    }

    /* Modal layout sidebar and columns split */
    #eventDetailsModal .col-md-2,
    #clientDetailsModal .border-end,
    #supplierDetailsModal .border-end {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    #eventDetailsModal .col-md-2.modal-sidebar,
    #clientDetailsModal .modal-sidebar,
    #supplierDetailsModal .modal-sidebar {
        border-bottom: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
    }
    #eventDetailsModal .col-md-10 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    #eventDetailsModal .row.g-2 {
        flex-direction: column !important;
    }

    /* Modal detail subtabs */
    #eventPills, #supplierPills, #clientPills {
        gap: 6px !important;
        margin-bottom: 16px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    #eventPills .nav-link,
    #supplierPills .nav-link,
    #clientPills .nav-link {
        font-size: 13px !important;
        padding: 8px 16px !important;
        border-radius: 20px !important;
        background: #e2e8f0 !important;
        color: #475569 !important;
        border: none !important;
        white-space: nowrap;
    }
    #eventPills .nav-link.active,
    #supplierPills .nav-link.active,
    #clientPills .nav-link.active {
        background: #7c3aed !important;
        color: #ffffff !important;
    }

    /* Entity DB fields layout (Collapsible Card Style on Mobile) */
    .entity-fields {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .entity-field {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 12px !important;
        background: #ffffff !important;
        border-radius: 10px !important;
        border: 1px solid rgba(15, 23, 42, 0.04) !important;
        white-space: normal !important;
    }
    .entity-field-suppliers {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        border-top: 1px solid #e2e8f0 !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        background: transparent !important;
    }
    .ef-label {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .ef-value {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #0f172a !important;
    }
    .entity-title {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    /* ── MD File Viewer Dossier Responsiveness & Wrapping (Prevents Horizontal Scrolls) ── */
    #eventFilesContainer,
    #clientFilesContainer,
    #supplierFilesContainer {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        font-size: 14.5px !important;
        line-height: 1.6 !important;
        padding: 12px !important;
    }
    #eventFilesContainer pre,
    #clientFilesContainer pre,
    #supplierFilesContainer pre,
    #eventFilesContainer code,
    #clientFilesContainer code,
    #supplierFilesContainer code {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        word-break: break-all !important;
        max-width: 100% !important;
    }
    #eventFilesContainer table,
    #clientFilesContainer table,
    #supplierFilesContainer table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
        border-collapse: collapse;
    }
    #eventFilesContainer img,
    #clientFilesContainer img,
    #supplierFilesContainer img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ── Tasklist Component Card on Mobile ── */
    #tasklistCard .card-header {
        padding: 14px 16px !important;
        gap: 8px;
    }
    #tasklistCard .card-header h4 {
        font-size: 17px !important;
    }
    #tasklistContent:not(.expanded) {
        max-height: 200px !important;
    }
    #tasklistContent {
        padding: 16px !important;
    }
    #tasklistContent h2 {
        font-size: 16px !important;
    }
    #tasklistContent h3 {
        font-size: 15px !important;
    }
    #tasklistContent li {
        font-size: 13.5px !important;
    }

    /* ── Leaflet Maps ── */
    #graph .leaflet-container,
    #graphMap {
        height: 280px !important;
        border-radius: 12px;
    }

    /* ── Analytics Tab Overrides ── */
    #analytics .row > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    #analytics canvas {
        max-height: 220px !important;
    }
    #analyticsAgentTable th,
    #analyticsAgentTable td {
        font-size: 12.5px !important;
        padding: 8px !important;
    }

    /* ── Event History Timeline (Modals) Stack Layout on Mobile ── */
    #pills-history > .d-flex,
    #pills-client-history > .d-flex,
    #pills-supplier-history > .d-flex {
        flex-direction: column !important;
    }
    #pills-history .border-end,
    #pills-client-history .border-end,
    #pills-supplier-history .border-end {
        width: 100% !important;
        max-height: 150px !important; /* Stack version list at top */
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        flex-shrink: 0 !important;
    }
    #eventHistoryDiff,
    #clientHistoryDiff,
    #supplierHistoryDiff {
        padding: 14px !important;
    }

    #eventHistoryList .list-group-item,
    #clientHistoryList .list-group-item,
    #supplierHistoryList .list-group-item {
        padding: 10px 10px 10px 2.8rem !important;
        margin-bottom: 6px !important;
        font-size: 13px !important;
    }
    #eventHistoryList::before,
    #clientHistoryList::before,
    #supplierHistoryList::before {
        left: 20px;
    }
    #eventHistoryList .list-group-item::before,
    #clientHistoryList .list-group-item::before,
    #supplierHistoryList .list-group-item::before {
        left: 15px;
        width: 12px;
        height: 12px;
    }

    /* History sidebar timeline items */
    .hwg-history-item-inner {
        gap: 6px;
        min-height: 32px;
    }
    .hwg-history-badges .badge {
        font-size: 11px !important;
    }
    .hwg-history-time {
        font-size: 10px !important;
        color: #94a3b8 !important;
    }

    /* ── EasyMDE Markdown Editor in Modals ── */
    .EasyMDEContainer .CodeMirror {
        font-size: 13.5px !important;
        height: 220px !important;
    }

    /* ── Global badge helper ── */
    .badge {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ══════════════════════════════════════════════════════════════
   TICKETS / SEGNALAZIONI — status badges, cards, transitions
   ══════════════════════════════════════════════════════════════ */

/* Status badge variants */
.ticket-status-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.2px;
}

.ticket-status-backlog {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.ticket-status-progress {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.ticket-status-released {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* Priority badge variants */
.ticket-priority-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.2px;
}

.ticket-priority-alta {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.ticket-priority-media {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.ticket-priority-bassa {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

/* Released tickets: subtly distinguished */
.ticket-card.ticket-released {
    opacity: 0.85;
    border-left: 3px solid #86efac !important;
}

.ticket-card.ticket-released:hover {
    opacity: 0.9;
}

/* Ticket card transitions */
.ticket-card {
    transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 3px solid transparent;
    background: #ffffff !important;
    opacity: 1;
}

.ticket-card:hover {
    border-left-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* Description text clamp for compactness */
.ticket-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ticket form card subtle highlight */
#ticketFormCard {
    border-left: 4px solid var(--hwg-mint, #00DF9E) !important;
    animation: ticketFormIn 0.25s ease-out;
}

@keyframes ticketFormIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Ticket replies */
.ticket-reply-toggle {
    position: relative;
    transition: all 0.15s ease;
}
.ticket-reply-toggle:hover {
    background: #e0f2fe !important;
    border-color: #7dd3fc !important;
}
.ticket-reply-count {
    font-weight: 700;
    font-size: 0.7rem;
    margin-left: 1px;
}
.ticket-replies-divider {
    height: 1px;
    background: linear-gradient(to right, #e2e8f0, transparent);
    margin: 0 1rem;
}
.ticket-replies-section {
    animation: replySlideIn 0.2s ease-out;
}
@keyframes replySlideIn {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 500px; }
}
.ticket-reply-item {
    background: #f8fafc;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
    border: 1px solid #f1f5f9;
}
.ticket-reply-item:last-child {
    margin-bottom: 10px;
}
.ticket-reply-item p {
    color: #334155;
    line-height: 1.5;
}