/* ==========================================================================
   ManaJR - Unified Company Management App Theme
   Dark theme with emerald accents - Applied across all app sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* Color Palette - Emerald Business Theme */
    --app-bg-primary: #0a0f1a;
    --app-bg-secondary: #111827;
    --app-bg-tertiary: #1f2937;
    --app-bg-card: rgba(17, 24, 39, 0.85);
    --app-bg-card-solid: #111827;
    --app-bg-card-hover: rgba(17, 24, 39, 0.95);
    
    /* Accent Colors */
    --app-accent-primary: #10b981;
    --app-accent-secondary: #059669;
    --app-accent-tertiary: #34d399;
    --app-accent-glow: rgba(16, 185, 129, 0.3);
    
    /* Status Colors */
    --app-success: #10b981;
    --app-info: #3b82f6;
    --app-warning: #764c04;
    --app-danger: #ef4444;
    --app-purple: #8b5cf6;
    
    /* Text Colors */
    --app-text-primary: #f9fafb;
    --app-text-secondary: #9ca3af;
    --app-text-muted: #6b7280;
    
    /* Border & Effects */
    --app-border-color: rgba(75, 85, 99, 0.4);
    --app-border-light: rgba(75, 85, 99, 0.2);
    --app-shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --app-shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --app-shadow-glow: 0 0 20px var(--app-accent-glow);
    
    /* Typography */
    --app-font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --app-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Spacing */
    --app-spacing-xs: 0.25rem;
    --app-spacing-sm: 0.5rem;
    --app-spacing-md: 1rem;
    --app-spacing-lg: 1.5rem;
    --app-spacing-xl: 2rem;
    --app-spacing-2xl: 3rem;
    
    /* Border Radius */
    --app-radius-sm: 0.375rem;
    --app-radius-md: 0.5rem;
    --app-radius-lg: 0.75rem;
    --app-radius-xl: 1rem;
    
    /* Transitions */
    --app-transition-fast: 150ms ease;
    --app-transition-normal: 250ms ease;
    --app-transition-slow: 350ms ease;
    
    /* Sidebar */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 70px;
    --topbar-height: 64px;
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

body.app-body {
    font-family: var(--app-font-primary);
    background: var(--app-bg-primary);
    color: var(--app-text-primary);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Background Pattern */
body.app-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(59, 130, 246, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* --------------------------------------------------------------------------
   App Layout
   -------------------------------------------------------------------------- */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--sidebar-width);
    background: var(--app-bg-secondary);
    border-right: 1px solid var(--app-border-color);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: width var(--app-transition-normal);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

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

.app-topbar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--app-spacing-xl);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.app-content {
    flex: 1;
    padding: var(--app-spacing-xl);
    max-width: 100%;
    width: 100%;
    min-width: 0; /* Prevents flex items from overflowing */
    overflow-x: auto; /* Allow horizontal scroll if content is too wide */
}

.app-footer {
    background: var(--app-bg-secondary);
    border-top: 1px solid var(--app-border-color);
    padding: var(--app-spacing-lg);
    text-align: center;
}

.app-footer-text {
    color: var(--app-text-muted);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-spacing-sm);
}

.app-footer-text i {
    color: var(--app-accent-primary);
}

/* --------------------------------------------------------------------------
   Sidebar Styles
   -------------------------------------------------------------------------- */
.sidebar-header {
    height: var(--topbar-height);
    padding: 0 var(--app-spacing-lg);
    border-bottom: 1px solid var(--app-border-color);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: space-between;
}

.sidebar-header-left {
    display: flex;
    align-items: center;
    gap: var(--app-spacing-md);
    overflow: hidden;
}

/* Sidebar Toggle Button */
.sidebar-toggle-btn {
    background: none;
    border: none;
    color: var(--app-text-muted);
    cursor: pointer;
    padding: var(--app-spacing-xs);
    border-radius: var(--app-radius-sm);
    transition: all var(--app-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--app-text-primary);
}

.sidebar-toggle-btn i {
    font-size: 1.1rem;
    transition: transform var(--app-transition-normal);
}

/* Sidebar Collapsed State */
.app-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.app-sidebar.collapsed .sidebar-brand,
.app-sidebar.collapsed .sidebar-section-title,
.app-sidebar.collapsed .sidebar-menu-link span,
.app-sidebar.collapsed .sidebar-menu-badge,
.app-sidebar.collapsed .sidebar-footer-text {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

.app-sidebar.collapsed .sidebar-header {
    padding: 0 var(--app-spacing-sm);
    justify-content: center;
    position: relative;
}

.app-sidebar.collapsed .sidebar-header-left {
    justify-content: center;
}

.app-sidebar.collapsed .sidebar-logo {
    margin: 0;
    width: 32px;
    height: 32px;
}

.app-sidebar.collapsed .sidebar-toggle-btn {
    position: absolute;
    right: -14px;
    background: var(--app-bg-secondary);
    border: 1px solid var(--app-border-color);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    padding: 0;
    box-shadow: var(--app-shadow-soft);
}

.app-sidebar.collapsed .sidebar-toggle-btn i {
    transform: rotate(180deg);
    font-size: 0.75rem;
}

.app-sidebar.collapsed .sidebar-nav {
    padding: 0.35rem 0.25rem;
}

.app-sidebar.collapsed .sidebar-section {
    margin-bottom: 0;
}

.app-sidebar.collapsed .sidebar-menu-link {
    justify-content: center;
    padding: 0.3rem;
    width: 36px;
    height: 36px;
    margin: 0 auto;
}

.app-sidebar.collapsed .sidebar-menu-link i {
    margin: 0;
    font-size: 1.05rem;
    width: auto;
}

.app-sidebar.collapsed .sidebar-divider {
    margin: 0.2rem 0;
}

/* Main content adjustment when sidebar is collapsed */
.app-main.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed-width);
}

/* Tooltip for collapsed sidebar */
.app-sidebar.collapsed .sidebar-menu-link {
    position: relative;
}

.app-sidebar.collapsed .sidebar-menu-link::after {
    content: attr(data-title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--app-bg-secondary);
    color: var(--app-text-primary);
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    border-radius: var(--app-radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--app-transition-fast);
    border: 1px solid var(--app-border-color);
    z-index: 1000;
    pointer-events: none;
}

.app-sidebar.collapsed .sidebar-menu-link:hover::after {
    opacity: 1;
    visibility: visible;
}

.sidebar-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.sidebar-brand {
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--app-text-primary) 0%, var(--app-accent-tertiary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-nav {
    flex: 1;
    padding: 0.35rem 0.4rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-section {
    margin-bottom: 0.25rem;
}

.sidebar-section-title {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--app-text-muted);
    padding: 0.15rem 0.7rem;
    margin-bottom: 0;
    line-height: 1.2;
}

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

.sidebar-menu-item {
    margin-bottom: 0;
}

.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--app-radius-md);
    color: var(--app-text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all var(--app-transition-fast);
    line-height: 1.4;
}

.sidebar-menu-link:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--app-text-primary);
}

.sidebar-menu-link.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--app-accent-primary);
}

.sidebar-menu-link i {
    font-size: 0.95rem;
    width: 20px;
    text-align: center;
}

.sidebar-menu-badge {
    margin-left: auto;
    background: var(--app-danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
}

.sidebar-divider {
    height: 1px;
    background: var(--app-border-color);
    margin: 0.2rem 0;
}

.sidebar-footer {
    margin-top: auto;
    padding: 4px var(--app-spacing-lg);
    border-top: 1px solid var(--app-border-color);
    flex-shrink: 0;
    line-height: 1;
}

.sidebar-footer-text {
    color: var(--app-text-muted);
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: var(--app-spacing-xs);
    opacity: 0.5;
}

.sidebar-footer-text i {
    font-size: 0.55rem;
}

.app-sidebar.collapsed .sidebar-footer-text span {
    display: none;
}

.app-sidebar.collapsed .sidebar-footer {
    padding: var(--app-spacing-sm);
    justify-content: center;
    display: flex;
}

/* Sidebar User Section */
.sidebar-user {
    padding: var(--app-spacing-md);
    border-top: 1px solid var(--app-border-color);
    background: rgba(0, 0, 0, 0.2);
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: var(--app-spacing-md);
    padding: var(--app-spacing-sm);
}

.sidebar-user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--app-accent-primary), var(--app-accent-secondary));
    border-radius: var(--app-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.sidebar-user-details {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--app-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 0.7rem;
    color: var(--app-text-muted);
}

/* --------------------------------------------------------------------------
   Topbar Styles
   -------------------------------------------------------------------------- */

.user-menu-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--app-spacing-lg);
}

.topbar-toggle {
    background: none;
    border: none;
    color: var(--app-text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: var(--app-spacing-sm);
    border-radius: var(--app-radius-sm);
    transition: all var(--app-transition-fast);
    display: none;
}

.topbar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--app-text-primary);
}

.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--app-spacing-sm);
    font-size: 0.875rem;
    color: var(--app-text-muted);
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(10px);
    padding: var(--app-spacing-xs) var(--app-spacing-md);
    border-radius: var(--app-radius-lg);
    border: 1px solid var(--app-border-light);
}

.topbar-breadcrumb a {
    color: var(--app-text-secondary);
    text-decoration: none;
    transition: color var(--app-transition-fast);
}

.topbar-breadcrumb a:hover {
    color: var(--app-accent-primary);
}

.topbar-breadcrumb-separator {
    color: var(--app-text-muted);
}

.topbar-breadcrumb-current {
    color: var(--app-text-primary);
    font-weight: 500;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--app-spacing-md);
}

.topbar-btn {
    background: none;
    border: none;
    color: var(--app-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: var(--app-spacing-sm);
    border-radius: var(--app-radius-sm);
    position: relative;
    transition: all var(--app-transition-fast);
}

.topbar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--app-text-primary);
}

.topbar-btn-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--app-danger);
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Page Header
   -------------------------------------------------------------------------- */
.page-header {
    margin-bottom: var(--app-spacing-xl);
}

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 0 0 var(--app-spacing-xs) 0;
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--app-text-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.app-card {
    background: var(--app-bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-soft);
    transition: all var(--app-transition-normal);
    overflow: hidden;
}

.app-card:hover {
    box-shadow: var(--app-shadow-medium);
}

/* i#1.08: i pannelli con dropdown/menu a tendina interni non devono essere
   tagliati dall'overflow:hidden della card (altrimenti il menu sparisce). */
.app-card--overflow-visible {
    overflow: visible;
}

.app-card-header {
    padding: var(--app-spacing-md) var(--app-spacing-lg);
    border-bottom: 1px solid var(--app-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--app-spacing-sm);
}

.app-card-title i {
    color: var(--app-accent-primary);
}

.app-card-body {
    padding: var(--app-spacing-lg);
}

.app-card-footer {
    padding: var(--app-spacing-md) var(--app-spacing-lg);
    border-top: 1px solid var(--app-border-color);
    background: rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.app-table-wrapper {
    overflow-x: auto;
}

.app-table {
    width: 100%;
    border-collapse: collapse;
}

.app-table th {
    background: rgba(0, 0, 0, 0.2);
    padding: var(--app-spacing-md);
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-text-muted);
    border-bottom: 1px solid var(--app-border-color);
}

.app-table td {
    padding: var(--app-spacing-md);
    border-bottom: 1px solid var(--app-border-light);
    font-size: 0.875rem;
    color: var(--app-text-secondary);
}

.app-table tbody tr {
    transition: background var(--app-transition-fast);
}

.app-table tbody tr:hover {
    background: rgba(16, 185, 129, 0.15);
}

/* Ensure text remains readable on hover */
.app-table tbody tr:hover td,
.app-table tbody tr:hover th {
    color: var(--app-text-primary);
}

.app-table tbody tr:last-child td {
    border-bottom: none;
}

/* Filter row in tables */
.app-table thead tr.filter-row th {
    background: rgba(0, 0, 0, 0.1);
    padding: var(--app-spacing-sm) var(--app-spacing-md);
}

.app-table thead tr.filter-row .input-group {
    min-width: 120px;
}

.app-table thead tr.filter-row .form-control {
    font-size: 0.8rem;
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
}

.app-table thead tr.filter-row .btn {
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    font-size: 0.8rem;
}

/* Table links */
.app-table th a {
    color: var(--app-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--app-spacing-xs);
}

.app-table th a:hover {
    color: var(--app-accent-primary);
}

/* --------------------------------------------------------------------------
   Buttons - Universal theme-compatible colors
   -------------------------------------------------------------------------- */
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-spacing-sm);
    padding: var(--app-spacing-sm) var(--app-spacing-lg);
    border-radius: var(--app-radius-md);
    font-family: var(--app-font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--app-transition-fast);
    border: 2px solid transparent;
    white-space: nowrap;
}

/* Ensure all Bootstrap buttons are single-line */
body.app-body .btn,
body.app-body [class*="btn-"] {
    white-space: nowrap;
}

/* Ensure all solid background buttons have white text */
.app-btn-primary,
.app-btn-secondary,
.app-btn-success,
.app-btn-info,
.app-btn-warning,
.app-btn-danger,
.app-btn-primary:hover,
.app-btn-secondary:hover,
.app-btn-success:hover,
.app-btn-info:hover,
.app-btn-warning:hover,
.app-btn-danger:hover,
.app-btn-primary:focus,
.app-btn-secondary:focus,
.app-btn-success:focus,
.app-btn-info:focus,
.app-btn-warning:focus,
.app-btn-danger:focus,
.app-btn-primary:active,
.app-btn-secondary:active,
.app-btn-success:active,
.app-btn-info:active,
.app-btn-warning:active,
.app-btn-danger:active {
    color: white !important;
}

.app-btn-primary {
    background: #0d9488;
    border-color: #0d9488;
    color: white;
}

.app-btn-primary:hover {
    background: #0f766e;
    border-color: #0f766e;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4);
    transform: translateY(-1px);
    color: white;
}

.app-btn-secondary {
    background: #475569;
    border-color: #475569;
    color: white;
}

.app-btn-secondary:hover {
    background: #334155;
    border-color: #334155;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.4);
    color: white;
}

.app-btn-success {
    background: #059669;
    border-color: #059669;
    color: white;
}

.app-btn-success:hover {
    background: #047857;
    border-color: #047857;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
    color: white;
}

/* M10 (round 2026-08): vista settimanale della lista Carichi — griglia
   lun-dom, un rettangolo per viaggio colorato per referente LOG. */
.vista-settimana {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
}

.vs-giorno {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.4rem;
    padding: 0.3rem;
    min-height: 90px;
}

.vs-giorno.vs-oggi {
    border-color: #0dcaf0;
}

.vs-testata {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #93a4bf;
    text-align: center;
    margin-bottom: 0.3rem;
}

.vs-viaggio {
    display: block;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0.3rem;
    padding: 0.3rem 0.4rem;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    line-height: 1.25;
    text-decoration: none;
    color: inherit;
    word-break: break-word;
}

.vs-viaggio:hover {
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
}

.vs-viaggio .badge {
    font-size: 0.58rem;
}

.vs-r1 { font-weight: 600; }

@media (max-width: 1100px) {
    .vista-settimana {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* riga evidenziata dopo il click su un viaggio del calendario */
tr.carichi-row:target {
    outline: 2px solid #0dcaf0;
    background: rgba(13, 202, 240, 0.12) !important;
}

/* #5.37.13 (round 2026-08): niente scorrimento orizzontale di pagina.
   Le celle testuali vanno a capo invece di allargare la tabella; le
   tabelle molto larghe si comprimono (font e padding ridotti) sotto i
   1400px. Lo scroll residuo resta confinato dentro .table-responsive. */
.table td.small, .table th.small,
.table td .small, .table .cell-wrap {
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 1400px) {
    .table-responsive .table {
        font-size: 0.8rem;
    }
    .table-responsive .table td,
    .table-responsive .table th {
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }
}

/* #5.37.4 (round 2026-08): il Reset del blocco filtri è sempre MARRONE,
   così si distingue dal Filtra (verde) su tutte le pagine. */
.app-btn-reset {
    background: #8b5e3c;
    border-color: #8b5e3c;
    color: white;
}

.app-btn-reset:hover,
.app-btn-reset:focus {
    background: #74492c;
    border-color: #74492c;
    box-shadow: 0 4px 12px rgba(139, 94, 60, 0.4);
    color: white;
}

.app-btn-info {
    background: #0284c7;
    border-color: #0284c7;
    color: white;
}

.app-btn-info:hover {
    background: #0369a1;
    border-color: #0369a1;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
    color: white;
}

.app-btn-warning {
    background: #7b4302;
    border-color: #7b4302;
    color: white;
}

.app-btn-warning:hover {
    background: #552f01;
    border-color: #552f01;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4);
    color: white;
}

.app-btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}

.app-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    color: white;
}

.app-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--app-text-secondary);
}

.app-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--app-text-primary);
}

/* Outline variants - work on both light and dark */
.app-btn-outline-primary {
    background: transparent;
    border-color: #0d9488;
    color: #0d9488;
}

.app-btn-outline-primary:hover {
    background: #0d9488;
    color: white;
}

.app-btn-outline-secondary {
    background: transparent;
    border-color: #64748b;
    color: #64748b;
}

.app-btn-outline-secondary:hover {
    background: #64748b;
    color: white;
}

.app-btn-outline-success {
    background: transparent;
    border-color: #059669;
    color: #059669;
}

.app-btn-outline-success:hover {
    background: #059669;
    color: white;
}

.app-btn-outline-info {
    background: transparent;
    border-color: #0284c7;
    color: #0284c7;
}

.app-btn-outline-info:hover {
    background: #0284c7;
    color: white;
}

.app-btn-outline-warning {
    background: transparent;
    border-color: #d97706;
    color: #d97706;
}

.app-btn-outline-warning:hover {
    background: #d97706;
    color: white;
}

.app-btn-outline-danger {
    background: transparent;
    border-color: #dc2626;
    color: #dc2626;
}

.app-btn-outline-danger:hover {
    background: #dc2626;
    color: white;
}

.app-btn-sm {
    padding: var(--app-spacing-xs) var(--app-spacing-md);
    font-size: 0.75rem;
}

.app-btn-lg {
    padding: var(--app-spacing-md) var(--app-spacing-xl);
    font-size: 1rem;
}

/* Bootstrap button size overrides for consistency */
body.app-body .btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

body.app-body .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.app-form-group {
    margin-bottom: var(--app-spacing-lg);
}

.app-form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-text-muted);
    margin-bottom: var(--app-spacing-xs);
}

.app-form-control {
    width: 100%;
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    background: var(--app-bg-tertiary);
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-md);
    color: var(--app-text-primary);
    font-family: var(--app-font-primary);
    font-size: 0.875rem;
    transition: all var(--app-transition-fast);
}

.app-form-control:focus {
    outline: none;
    border-color: var(--app-accent-primary);
    box-shadow: 0 0 0 3px var(--app-accent-glow);
}

.app-form-control::placeholder {
    color: var(--app-text-muted);
}

/* --------------------------------------------------------------------------
   Status Badges
   -------------------------------------------------------------------------- */
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--app-spacing-xs);
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    border-radius: var(--app-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.app-badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--app-success);
}

.app-badge-info {
    background: rgba(59, 130, 246, 0.15);
    color: var(--app-info);
}

.app-badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--app-warning);
}

.app-badge-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--app-danger);
}

.app-badge-purple {
    background: rgba(139, 92, 246, 0.15);
    color: var(--app-purple);
}

/* --------------------------------------------------------------------------
   Stats / KPI Cards
   -------------------------------------------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--app-spacing-lg);
    margin-bottom: var(--app-spacing-xl);
}

.stat-card {
    background: var(--app-bg-card);
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-lg);
    padding: var(--app-spacing-lg);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--stat-color, var(--app-accent-primary));
}

.stat-card--success { --stat-color: var(--app-success); }
.stat-card--info { --stat-color: var(--app-info); }
.stat-card--warning { --stat-color: var(--app-warning); }
.stat-card--danger { --stat-color: var(--app-danger); }
.stat-card--purple { --stat-color: var(--app-purple); }

.stat-card-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--app-text-muted);
    margin-bottom: var(--app-spacing-xs);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--app-text-primary);
    font-family: var(--app-font-mono);
}

.stat-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius-md);
    background: rgba(16, 185, 129, 0.1);
    color: var(--stat-color, var(--app-accent-primary));
    font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   Homepage — vertical sections with horizontal tile rows
   -------------------------------------------------------------------------- */
.home-section {
    background: var(--app-bg-card);
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-lg);
    padding: var(--app-spacing-lg);
    margin-bottom: var(--app-spacing-lg);
}

.home-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--app-spacing-md);
    margin-bottom: var(--app-spacing-md);
    padding-bottom: var(--app-spacing-sm);
    border-bottom: 1px solid var(--app-border-light);
}

.home-section-title-wrapper { min-width: 0; }

.home-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--app-spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-section-title-icon {
    color: var(--app-accent-primary);
    font-size: 1.1em;
}

.home-section-desc {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    color: var(--app-text-muted);
}

.home-section-badge {
    align-self: center;
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.home-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--app-spacing-md);
}

.home-tile {
    display: flex;
    align-items: center;
    gap: var(--app-spacing-md);
    padding: var(--app-spacing-md);
    background: var(--app-bg-secondary);
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--app-transition-normal);
    min-height: 76px;
}

.home-tile:hover {
    border-color: var(--app-accent-primary);
    background: var(--app-bg-card);
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-medium);
    color: inherit;
    text-decoration: none;
}

.home-tile-text {
    flex: 1;
    min-width: 0;
}

.home-tile-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--app-text-primary);
    line-height: 1.2;
}

.home-tile-sub {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-tile-arrow {
    color: var(--app-text-muted);
    font-size: 1.1rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: all var(--app-transition-normal);
    flex-shrink: 0;
}

.home-tile:hover .home-tile-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--app-accent-primary);
}

/* Reused tile icon block (size unified with the new tile) */
.home-tile-icon,
.home-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius-md);
    font-size: 1.35rem;
    flex-shrink: 0;
}

.home-card-icon--teal {
    background: rgba(13, 148, 136, 0.15);
    color: #0d9488;
}

.home-card-icon--blue {
    background: rgba(2, 132, 199, 0.15);
    color: #0284c7;
}

.home-card-icon--amber {
    background: rgba(217, 119, 6, 0.15);
    color: #d97706;
}

.home-card-icon--purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.home-card-icon--green {
    background: rgba(5, 150, 105, 0.15);
    color: #059669;
}

.home-card-icon--red {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
}

/* Homepage Login CTA */
.home-login-cta {
    display: flex;
    justify-content: center;
    margin-top: var(--app-spacing-2xl);
}

.home-login-card {
    background: var(--app-bg-card);
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-xl);
    padding: var(--app-spacing-2xl);
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.home-login-icon {
    font-size: 3rem;
    color: var(--app-accent-primary);
    margin-bottom: var(--app-spacing-md);
}

.home-login-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 0 0 var(--app-spacing-sm) 0;
}

.home-login-text {
    color: var(--app-text-muted);
    font-size: 0.875rem;
    margin: 0 0 var(--app-spacing-lg) 0;
}

/* Responsive Homepage */
@media (max-width: 768px) {
    .home-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .home-tiles {
        grid-template-columns: 1fr;
    }
    .home-tile {
        min-height: 64px;
    }
}

/* --------------------------------------------------------------------------
   Empty States
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: var(--app-spacing-2xl);
}

.empty-state-icon {
    font-size: 3rem;
    color: var(--app-text-muted);
    opacity: 0.5;
    margin-bottom: var(--app-spacing-lg);
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-text-secondary);
    margin-bottom: var(--app-spacing-sm);
}

.empty-state-text {
    color: var(--app-text-muted);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Alerts / Messages
   -------------------------------------------------------------------------- */
.app-alert {
    padding: var(--app-spacing-md) var(--app-spacing-lg);
    border-radius: var(--app-radius-md);
    border: 1px solid;
    margin-bottom: var(--app-spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--app-spacing-md);
}

.app-alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--app-success);
}

.app-alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--app-info);
}

.app-alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--app-warning);
}

.app-alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--app-danger);
}

/* --------------------------------------------------------------------------
   Responsive Sidebar
   -------------------------------------------------------------------------- */

/* Tablet: sidebar is auto-collapsed (icons only) */
@media (max-width: 1199px) and (min-width: 769px) {
    .app-sidebar {
        width: var(--sidebar-collapsed-width);
    }
    
    .app-main {
        margin-left: var(--sidebar-collapsed-width);
    }
    
    .app-sidebar .sidebar-brand,
    .app-sidebar .sidebar-section-title,
    .app-sidebar .sidebar-menu-link span,
    .app-sidebar .sidebar-menu-badge {
        opacity: 0;
        visibility: hidden;
        width: 0;
        overflow: hidden;
    }
    
    .app-sidebar .sidebar-header {
        padding: 0 var(--app-spacing-sm);
        justify-content: center;
    }
    
    .app-sidebar .sidebar-header-left {
        justify-content: center;
    }
    
    .app-sidebar .sidebar-toggle-btn {
        display: none;
    }
    
    .app-sidebar .sidebar-menu-link {
        justify-content: center;
        padding: var(--app-spacing-sm);
    }
    
    .app-sidebar .sidebar-menu-link i {
        margin: 0;
        font-size: 1.25rem;
    }
    
    .app-sidebar .sidebar-nav {
        padding: var(--app-spacing-sm);
    }
    
    .app-sidebar .sidebar-divider {
        margin: var(--app-spacing-sm) 0;
    }
    
    .topbar-toggle {
        display: none;
    }
}

/* Mobile: sidebar is hidden off-screen, toggled via hamburger */
@media (max-width: 768px) {
    .app-sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }
    
    .app-sidebar.show {
        transform: translateX(0);
    }
    
    .app-main {
        margin-left: 0;
    }
    
    .topbar-toggle {
        display: block;
    }
    
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
    }
    
    .sidebar-overlay.show {
        display: block;
    }
    
    .app-content {
        padding: var(--app-spacing-md);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Global Layout & Alignment Utilities
   -------------------------------------------------------------------------- */

/* Consistent container spacing */
body.app-body .container,
body.app-body .container-fluid {
    padding-left: var(--app-spacing-lg);
    padding-right: var(--app-spacing-lg);
}

/* Consistent row gutters */
body.app-body .row {
    --bs-gutter-x: var(--app-spacing-lg);
    --bs-gutter-y: var(--app-spacing-lg);
}

/* Table alignment */
body.app-body .table {
    margin-bottom: var(--app-spacing-lg);
}

body.app-body .table th,
body.app-body .table td {
    vertical-align: middle;
    padding: var(--app-spacing-md);
}

/* Form alignment */
body.app-body .form-group,
body.app-body .mb-3 {
    margin-bottom: var(--app-spacing-lg) !important;
}

body.app-body .form-label,
body.app-body label {
    margin-bottom: var(--app-spacing-xs);
    font-weight: 600;
    font-size: 0.8rem;
}

/* Card consistency */
body.app-body .card {
    margin-bottom: var(--app-spacing-lg);
}

body.app-body .card-body {
    padding: var(--app-spacing-lg);
}

body.app-body .card-header {
    padding: var(--app-spacing-md) var(--app-spacing-lg);
}

/* Button group alignment */
body.app-body .btn-group,
body.app-body .btn-toolbar {
    gap: var(--app-spacing-sm);
}

/* Input group alignment */
body.app-body .input-group {
    align-items: stretch;
}

body.app-body .input-group .btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* List alignment */
body.app-body ul,
body.app-body ol {
    padding-left: var(--app-spacing-lg);
}

/* Pagination alignment */
body.app-body .pagination {
    justify-content: center;
    margin-top: var(--app-spacing-lg);
    gap: var(--app-spacing-xs);
}

/* Alert alignment */
body.app-body .alert {
    margin-bottom: var(--app-spacing-lg);
    padding: var(--app-spacing-md) var(--app-spacing-lg);
}

/* Badge alignment */
body.app-body .badge {
    font-weight: 600;
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
}

/* Section spacing */
body.app-body section,
body.app-body .section {
    margin-bottom: var(--app-spacing-xl);
}

/* Heading alignment */
body.app-body h1, body.app-body h2, body.app-body h3,
body.app-body h4, body.app-body h5, body.app-body h6 {
    margin-bottom: var(--app-spacing-md);
    line-height: 1.3;
}

/* Paragraph spacing */
body.app-body p {
    margin-bottom: var(--app-spacing-md);
    line-height: 1.6;
}

body.app-body p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Bootstrap Overrides for Dark Theme
   -------------------------------------------------------------------------- */
body.app-body .card {
    background: var(--app-bg-card);
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-lg);
    color: var(--app-text-primary);
}

body.app-body .card-header {
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--app-border-color);
    color: var(--app-text-primary);
}

body.app-body .card-body {
    color: var(--app-text-primary);
}

body.app-body .progress {
    background-color: rgba(255, 255, 255, 0.1);
}

body.app-body .table {
    color: var(--app-text-primary);
}

body.app-body .table thead th {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--app-border-color);
    color: var(--app-text-muted);
}

body.app-body .table td {
    border-color: var(--app-border-light);
    color: var(--app-text-secondary);
}

body.app-body .table tbody tr:hover {
    background: rgba(16, 185, 129, 0.15);
}

/* Ensure text stays readable on table hover */
body.app-body .table tbody tr:hover td,
body.app-body .table tbody tr:hover th,
body.app-body .table-hover tbody tr:hover td,
body.app-body .table-hover tbody tr:hover th {
    color: var(--app-text-primary) !important;
}

/* Table row status colors - Dark theme compatible */
body.app-body .table-danger,
body.app-body .table-danger > td,
body.app-body .table-danger > th {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: var(--app-text-primary) !important;
}

body.app-body .table-danger:hover,
body.app-body .table-danger:hover > td,
body.app-body .table-danger:hover > th {
    background-color: rgba(239, 68, 68, 0.25) !important;
}

body.app-body .table-warning,
body.app-body .table-warning > td,
body.app-body .table-warning > th {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: var(--app-text-primary) !important;
}

body.app-body .table-warning:hover,
body.app-body .table-warning:hover > td,
body.app-body .table-warning:hover > th {
    background-color: rgba(245, 158, 11, 0.25) !important;
}

body.app-body .table-secondary,
body.app-body .table-secondary > td,
body.app-body .table-secondary > th {
    background-color: rgba(100, 116, 139, 0.2) !important;
    color: var(--app-text-muted) !important;
}

body.app-body .table-secondary:hover,
body.app-body .table-secondary:hover > td,
body.app-body .table-secondary:hover > th {
    background-color: rgba(100, 116, 139, 0.3) !important;
    color: var(--app-text-secondary) !important;
}

body.app-body .table-success,
body.app-body .table-success > td,
body.app-body .table-success > th {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: var(--app-text-primary) !important;
}

body.app-body .table-success:hover,
body.app-body .table-success:hover > td,
body.app-body .table-success:hover > th {
    background-color: rgba(16, 185, 129, 0.25) !important;
}

body.app-body .table-info,
body.app-body .table-info > td,
body.app-body .table-info > th {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: var(--app-text-primary) !important;
}

body.app-body .table-info:hover,
body.app-body .table-info:hover > td,
body.app-body .table-info:hover > th {
    background-color: rgba(59, 130, 246, 0.25) !important;
}

body.app-body .table-primary,
body.app-body .table-primary > td,
body.app-body .table-primary > th {
    background-color: rgba(13, 148, 136, 0.15) !important;
    color: var(--app-text-primary) !important;
}

body.app-body .table-primary:hover,
body.app-body .table-primary:hover > td,
body.app-body .table-primary:hover > th {
    background-color: rgba(13, 148, 136, 0.25) !important;
}

body.app-body .table-dark,
body.app-body .table-dark > td,
body.app-body .table-dark > th {
    background-color: rgba(30, 41, 59, 0.5) !important;
    color: var(--app-text-muted) !important;
}

body.app-body .table-dark:hover,
body.app-body .table-dark:hover > td,
body.app-body .table-dark:hover > th {
    background-color: rgba(30, 41, 59, 0.7) !important;
    color: var(--app-text-secondary) !important;
}

/* Use native checkbox rendering — avoids repaint bugs caused by appearance:none
   conflicting across Bootstrap 5 + styles.css + sb-admin-2 (Bootstrap 4). */
body.app-body .form-check-input {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    accent-color: var(--app-accent-primary);
    width: 1em;
    height: 1em;
}

/* Checkboxes inside table cells: override Bootstrap 4 (sb-admin-2) positioning */
body.app-body td .form-check-input,
body.app-body th .form-check-input {
    position: static;
    float: none;
    margin: 0;
    margin-left: 0;
    vertical-align: middle;
}

body.app-body .form-check-input:focus {
    outline-color: var(--app-accent-primary);
    box-shadow: 0 0 0 0.2rem var(--app-accent-glow);
}

body.app-body .form-check-label {
    color: var(--app-text-primary);
}

body.app-body .form-control,
body.app-body .form-select,
body.app-body input:not([type="checkbox"]):not([type="radio"]),
body.app-body select,
body.app-body textarea {
    background: var(--app-bg-tertiary) !important;
    border: 1px solid var(--app-border-color) !important;
    color: var(--app-text-primary) !important;
    border-radius: var(--app-radius-md);
    padding: 0.5rem 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* App Form Container */
.app-form {
    width: 100%;
}

.app-form .mb-3 {
    width: 100%;
}

body.app-body .form-control:focus,
body.app-body .form-select:focus,
body.app-body input:focus,
body.app-body select:focus,
body.app-body textarea:focus {
    border-color: var(--app-accent-primary) !important;
    box-shadow: 0 0 0 3px var(--app-accent-glow) !important;
    background: var(--app-bg-tertiary) !important;
}

/* Select dropdown options styling */
body.app-body select option {
    background: var(--app-bg-secondary);
    color: var(--app-text-primary);
    padding: 0.5rem;
}

body.app-body select option:hover,
body.app-body select option:checked {
    background: var(--app-accent-primary);
    color: white;
}

/* Form placeholder styling */
body.app-body input::placeholder,
body.app-body textarea::placeholder {
    color: var(--app-text-muted) !important;
    opacity: 0.7;
}

/* Form label styling */
body.app-body .form-label {
    color: var(--app-text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Form text/help text */
body.app-body .form-text {
    color: var(--app-text-muted);
    font-size: 0.85rem;
}

/* Invalid feedback styling */
body.app-body .invalid-feedback {
    color: #ef4444;
    font-size: 0.85rem;
}

/* Bootstrap Button Overrides - Universal theme-compatible colors */
body.app-body .btn-primary {
    background: #0d9488 !important;
    border-color: #0d9488 !important;
    color: white !important;
}

body.app-body .btn-primary:hover,
body.app-body .btn-primary:focus,
body.app-body .btn-primary:active {
    background: #0f766e !important;
    border-color: #0f766e !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4) !important;
    color: white !important;
}

body.app-body .btn-secondary {
    background: #475569 !important;
    border-color: #475569 !important;
    color: white !important;
}

body.app-body .btn-secondary:hover,
body.app-body .btn-secondary:focus,
body.app-body .btn-secondary:active {
    background: #334155 !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.4) !important;
    color: white !important;
}

body.app-body .btn-success {
    background: #059669 !important;
    border-color: #059669 !important;
    color: white !important;
}

body.app-body .btn-success:hover,
body.app-body .btn-success:focus,
body.app-body .btn-success:active {
    background: #047857 !important;
    border-color: #047857 !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4) !important;
    color: white !important;
}

body.app-body .btn-info {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: white !important;
}

body.app-body .btn-info:hover,
body.app-body .btn-info:focus,
body.app-body .btn-info:active {
    background: #0369a1 !important;
    border-color: #0369a1 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4) !important;
    color: white !important;
}

body.app-body .btn-warning {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: white !important;
}

body.app-body .btn-warning:hover,
body.app-body .btn-warning:focus,
body.app-body .btn-warning:active {
    background: #b45309 !important;
    border-color: #b45309 !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4) !important;
    color: white !important;
}

body.app-body .btn-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: white !important;
}

body.app-body .btn-danger:hover,
body.app-body .btn-danger:focus,
body.app-body .btn-danger:active {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
    color: white !important;
}

body.app-body .btn-light {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

body.app-body .btn-light:hover,
body.app-body .btn-light:focus,
body.app-body .btn-light:active {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

body.app-body .btn-dark {
    background: #1e293b !important;
    border-color: #1e293b !important;
    color: white !important;
}

body.app-body .btn-dark:hover,
body.app-body .btn-dark:focus,
body.app-body .btn-dark:active {
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: white !important;
}

/* Outline button overrides */
body.app-body .btn-outline-primary {
    background: transparent !important;
    border-color: #0d9488 !important;
    color: #0d9488 !important;
}

body.app-body .btn-outline-primary:hover,
body.app-body .btn-outline-primary:focus,
body.app-body .btn-outline-primary:active {
    background: #0d9488 !important;
    color: white !important;
}

body.app-body .btn-outline-secondary {
    background: transparent !important;
    border-color: #64748b !important;
    color: #64748b !important;
}

body.app-body .btn-outline-secondary:hover,
body.app-body .btn-outline-secondary:focus,
body.app-body .btn-outline-secondary:active {
    background: #64748b !important;
    color: white !important;
}

/* Gruppi di toggle (btn-check + label): la regola Bootstrap
   `.btn-check:checked + .btn` perde contro gli override !important qui sopra,
   quindi il pulsante selezionato restava scolorito pur essendo selezionato
   (es. modalita Attuale/Storico nel report Contabilita Progetto). Riportiamo
   lo stato "selezionato" con la stessa forza. */
body.app-body .btn-check:checked + .btn-outline-primary {
    background: #0d9488 !important;
    border-color: #0d9488 !important;
    color: white !important;
}

body.app-body .btn-check:checked + .btn-outline-secondary {
    background: #64748b !important;
    border-color: #64748b !important;
    color: white !important;
}

body.app-body .btn-outline-success {
    background: transparent !important;
    border-color: #059669 !important;
    color: #059669 !important;
}

body.app-body .btn-outline-success:hover,
body.app-body .btn-outline-success:focus,
body.app-body .btn-outline-success:active {
    background: #059669 !important;
    color: white !important;
}

body.app-body .btn-outline-info {
    background: transparent !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

body.app-body .btn-outline-info:hover,
body.app-body .btn-outline-info:focus,
body.app-body .btn-outline-info:active {
    background: #0284c7 !important;
    color: white !important;
}

body.app-body .btn-outline-warning {
    background: transparent !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

body.app-body .btn-outline-warning:hover,
body.app-body .btn-outline-warning:focus,
body.app-body .btn-outline-warning:active {
    background: #d97706 !important;
    color: white !important;
}

body.app-body .btn-outline-danger {
    background: transparent !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}

body.app-body .btn-outline-danger:hover,
body.app-body .btn-outline-danger:focus,
body.app-body .btn-outline-danger:active {
    background: #dc2626 !important;
    color: white !important;
}

body.app-body .btn-outline-dark {
    background: transparent !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

body.app-body .btn-outline-dark:hover,
body.app-body .btn-outline-dark:focus,
body.app-body .btn-outline-dark:active {
    background: #475569 !important;
    color: white !important;
}

body.app-body .btn-outline-light {
    background: transparent !important;
    border-color: #94a3b8 !important;
    color: #94a3b8 !important;
}

body.app-body .btn-outline-light:hover,
body.app-body .btn-outline-light:focus,
body.app-body .btn-outline-light:active {
    background: #94a3b8 !important;
    color: #1e293b !important;
}

/* Universal button text color fix - ensure all solid buttons have white text */
body.app-body .btn-primary,
body.app-body .btn-secondary,
body.app-body .btn-success,
body.app-body .btn-info,
body.app-body .btn-warning,
body.app-body .btn-danger,
body.app-body .btn-dark {
    color: white !important;
}

body.app-body .btn-primary:hover,
body.app-body .btn-primary:focus,
body.app-body .btn-primary:active,
body.app-body .btn-secondary:hover,
body.app-body .btn-secondary:focus,
body.app-body .btn-secondary:active,
body.app-body .btn-success:hover,
body.app-body .btn-success:focus,
body.app-body .btn-success:active,
body.app-body .btn-info:hover,
body.app-body .btn-info:focus,
body.app-body .btn-info:active,
body.app-body .btn-warning:hover,
body.app-body .btn-warning:focus,
body.app-body .btn-warning:active,
body.app-body .btn-danger:hover,
body.app-body .btn-danger:focus,
body.app-body .btn-danger:active,
body.app-body .btn-dark:hover,
body.app-body .btn-dark:focus,
body.app-body .btn-dark:active {
    color: white !important;
}

body.app-body .modal-content {
    background: var(--app-bg-secondary);
    border: 1px solid var(--app-border-color);
    color: var(--app-text-primary);
}

body.app-body .modal-header {
    border-bottom: 1px solid var(--app-border-color);
}

body.app-body .modal-footer {
    border-top: 1px solid var(--app-border-color);
}

body.app-body .dropdown-menu {
    background: var(--app-bg-secondary);
    border: 1px solid var(--app-border-color);
}

body.app-body .dropdown-item {
    color: var(--app-text-secondary);
}

body.app-body .dropdown-item:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--app-text-primary);
}

body.app-body a {
    color: var(--app-accent-primary);
}

body.app-body a:hover {
    color: var(--app-accent-tertiary);
}

body.app-body hr {
    border-color: var(--app-border-color);
    opacity: 0.5;
}

body.app-body .text-muted {
    color: var(--app-text-muted) !important;
}

body.app-body .bg-light {
    background: var(--app-bg-tertiary) !important;
}

body.app-body .bg-white {
    background: var(--app-bg-card) !important;
}

body.app-body .border {
    border-color: var(--app-border-color) !important;
}

body.app-body .shadow {
    box-shadow: var(--app-shadow-soft) !important;
}

/* Pagination */
body.app-body .pagination .page-link {
    background: var(--app-bg-tertiary);
    border-color: var(--app-border-color);
    color: var(--app-text-secondary);
}

body.app-body .pagination .page-link:hover {
    background: var(--app-accent-primary);
    border-color: var(--app-accent-primary);
    color: white;
}

body.app-body .pagination .page-item.active .page-link {
    background: var(--app-accent-primary);
    border-color: var(--app-accent-primary);
}

body.app-body .pagination .page-item.disabled .page-link {
    background: var(--app-bg-secondary);
    color: var(--app-text-muted);
}

/* --------------------------------------------------------------------------
   Enhanced Responsive Layout Fixes
   -------------------------------------------------------------------------- */

/* Ensure main content never overflows when sidebar is expanded */
.app-main {
    min-width: 0;
    overflow-x: hidden;
}

.app-content {
    min-width: 0;
}

/* Responsive table wrapper - always allow horizontal scroll */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Container fluid should never exceed viewport */
.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

/* Row should not cause overflow */
.row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* Cards should adapt to available space */
.card, .app-card {
    max-width: 100%;
    overflow: hidden;
}

/* Fix for forms in cards */
.app-card-body form {
    max-width: 100%;
}

/* Responsive typography */
@media (max-width: 576px) {
    .page-title {
        font-size: 1.25rem;
    }
    
    .page-subtitle {
        font-size: 0.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
}

/* Responsive button groups */
@media (max-width: 576px) {
    .d-flex.gap-2.flex-wrap {
        width: 100%;
    }
    
    .d-flex.gap-2.flex-wrap .app-btn,
    .d-flex.gap-2.flex-wrap .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Responsive info items */
@media (max-width: 576px) {
    .info-item {
        padding: 0.5rem;
    }
    
    .info-item .fs-4 {
        font-size: 1.1rem !important;
    }
}

/* (Tablet sidebar rules are consolidated in the Responsive Sidebar section above) */

/* --------------------------------------------------------------------------
   Legend Card Component Styles (Unified)
   -------------------------------------------------------------------------- */
.legend-card {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.8) 100%);
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-lg);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.legend-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.legend-items .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.legend-label {
    font-size: 0.75rem;
    color: var(--app-text-secondary);
    margin-right: 0.5rem;
}

.legend-separator {
    height: 16px;
    width: 1px;
    background-color: var(--app-border-color);
    margin: 0 0.25rem;
}

.legend-group-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--app-text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Custom badge colors */
.badge.bg-purple,
.bg-purple {
    background-color: #8b5cf6 !important;
    color: white !important;
}

.badge.bg-orange,
.bg-orange {
    background-color: #f97316 !important;
    color: white !important;
}

/* Legacy badge-legend support (for backwards compatibility) */
.badge-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.8) 100%);
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-lg);
    margin-bottom: 1rem;
    font-size: 0.8rem;
}

.badge-legend-title {
    font-weight: 600;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    width: 100%;
    margin-bottom: 0.25rem;
}

.badge-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--app-text-secondary);
}

.badge-legend-item .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.badge-legend-item span:last-child {
    font-size: 0.8rem;
}

/* Responsive legend */
@media (max-width: 768px) {
    .legend-card,
    .badge-legend {
        padding: 0.5rem 0.75rem;
    }
    
    .legend-items {
        gap: 0.375rem 0.5rem;
    }
    
    .legend-items .badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
    
    .legend-label {
        font-size: 0.7rem;
    }
    
    .legend-separator {
        display: none;
    }
}

@media (max-width: 576px) {
    .badge-legend {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
    
    .badge-legend-item {
        flex: 0 0 100%;
    }
    
    .legend-group-title {
        width: 100%;
        margin-top: 0.25rem;
    }
}

/* --------------------------------------------------------------------------
   Alert Banner Component Styles
   -------------------------------------------------------------------------- */
.alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--app-radius-lg);
    margin-bottom: 1.5rem;
    border: 1px solid;
}

.alert-banner--danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-banner--warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.alert-banner--info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.alert-banner--success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.alert-banner-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.alert-banner--danger .alert-banner-icon { color: #ef4444; }
.alert-banner--warning .alert-banner-icon { color: #f59e0b; }
.alert-banner--info .alert-banner-icon { color: #3b82f6; }
.alert-banner--success .alert-banner-icon { color: #10b981; }

.alert-banner-content {
    flex: 1;
    min-width: 0;
}

.alert-banner-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: inherit;
}

.alert-banner-text {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
}

.alert-banner-actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Multiple alerts stacking */
.alert-banners-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Responsive alert banner */
@media (max-width: 576px) {
    .alert-banner {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }
    
    .alert-banner-icon {
        font-size: 1.25rem;
    }
    
    .alert-banner-title {
        font-size: 0.9rem;
    }
    
    .alert-banner-text {
        font-size: 0.8rem;
    }
}

/* --------------------------------------------------------------------------
   Logistica - Filter panel layout fixes
   -------------------------------------------------------------------------- */
.logistica-filter-form .range-group {
    min-width: 0;
}

.logistica-filter-form .range-group .form-control {
    min-width: 0;
    width: auto !important;
    flex: 1 1 0;
}

.logistica-filter-form .range-group-week .form-control {
    max-width: 84px;
}

.logistica-filter-form .filter-actions .app-btn {
    flex: 0 0 auto;
}

@media (max-width: 992px) {
    .logistica-filter-form .range-group {
        flex-wrap: wrap;
    }

    .logistica-filter-form .range-group .text-muted {
        display: none;
    }

    .logistica-filter-form .range-group .form-control {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .logistica-filter-form .range-group-week .form-control {
        max-width: 100%;
    }
}


/* Riga di separazione fra gruppi in tabella (fasce di scadenza del Cashflow).
   Sostituisce l'utility Bootstrap `table-light`, che sul tema scuro dava uno
   sfondo bianco con sopra testo chiaro: fascia illeggibile. */
body.app-body .table tbody tr.app-row-fascia td {
    background: rgba(16, 185, 129, 0.12);
    color: var(--app-text-primary);
    border-top: 1px solid var(--app-border-color);
    border-bottom: 1px solid var(--app-border-color);
}

/* 05_avvisi (round 2026-08): righe di severita nelle liste.
   riga-scaduta = rosso-grigiastro (notifica Scaduta, via di mezzo fra il
   rosso pieno e il grigio dei conclusi); riga-chiusa = grigio. */
.table > tbody > tr.riga-scaduta > td {
    background: rgba(190, 90, 90, 0.16);
    color: #cdb2b2;
}
.table > tbody > tr.riga-chiusa > td {
    background: rgba(148, 163, 184, 0.10);
    color: #94a3b8;
}


/* ==== CATALOGO 2026-09 (verifica Giacomo) ==================================
   Elementi condivisi del catalogo (fix_round_agosto/catalogo_elementi.html):
   badge di stato, avatar, lettere N/F/C, azioni riga, titoli, testi grigi,
   tabelle senza scorrimento, blocchi richiudibili, comandi filtri, banner
   delle liste e OVERRIDE SCURI globali (l'app è solo scura: niente alert /
   bg chiari di Bootstrap). I colori di badge e avatar stanno in core/ui.py
   e arrivano inline dai tag di core/templatetags/ui_extras.py.
   ========================================================================== */

/* Badge di stato: {% badge_stato tipo codice %} */
.app-badge-stato {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
}

/* Avatar iniziali: {% avatar utente %} (cerchio 26px, title = nome) */
.app-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    cursor: default;
}
.app-avatar-legenda {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-right: .5rem;
}

/* Lettere-avviso N/F/C: la lettera stessa, bold e colorata (non badge) */
.app-lettera {
    display: inline-block;
    font-weight: 800;
    font-size: 17px;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
}
.app-lettera--blu { color: #0dcaf0; }
.app-lettera--gialla { color: #ffc107; }
.app-lettera--rossa { color: #f87171; }

/* Badge numerici (solo numero): verde = ton. secondarie, rosso = note
   interne, blu = prenotati, giallo = conclusi / P prorogata */
.app-badge-num {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    white-space: nowrap;
}
.app-badge-num--verde { background: #198754; }
.app-badge-num--rosso { background: #dc3545; }
.app-badge-num--blu { background: #2937f0; }
.app-badge-num--giallo { background: #ffc107; color: #212529; }

/* Pallini fatturazione / balance (scheda progetto): viola = fattura,
   arancio = balance; outline = emesso, pieno = pagato */
.pf {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 3px;
    box-sizing: border-box;
}
.pf.o-viola { border: 3px solid #9f1ae2; background: transparent; }
.pf.f-viola { background: #9f1ae2; }
.pf.o-aran { border: 3px solid #fd7e14; background: transparent; }
.pf.f-aran { background: #fd7e14; }

/* Azioni per riga: quadrate 28px, outline, sola icona */
.app-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid #64748b;
    background: transparent;
    color: #cbd5e0;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--app-transition-fast), color var(--app-transition-fast);
}
.app-act:hover,
.app-act:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
    outline: none;
}
.app-act-secondary { border-color: #64748b; color: #cbd5e0; }
.app-act-info { border-color: #0284c7; color: #38bdf8; }
.app-act-info:hover, .app-act-info:focus { background: rgba(2, 132, 199, 0.18); color: #7dd3fc; }
.app-act-danger { border-color: #dc3545; color: #f87171; }
.app-act-danger:hover, .app-act-danger:focus { background: rgba(220, 53, 69, 0.18); color: #fca5a5; }
.app-act-success { border-color: #059669; color: #10b981; }
.app-act-success:hover, .app-act-success:focus { background: rgba(5, 150, 105, 0.18); color: #34d399; }
.app-act[disabled], .app-act.disabled { opacity: .45; pointer-events: none; }
.app-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Titoli pagina uniformi */
.app-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: var(--app-text-primary);
}
.app-page-subtitle {
    font-size: 0.9rem;
    margin: 0;
    color: var(--app-text-secondary);
}

/* Testi grigi piccoli (NON badge): "(JR)", numero interno destinatario */
.txt-jr {
    color: #94a3b8;
    font-size: 12px;
    white-space: nowrap;
}
.app-nowrap { white-space: nowrap !important; }

/* Tabelle che stanno nella pagina: niente scorrimento orizzontale. Il testo
   lungo va a capo, numeri / etichette / azioni no. */
.app-table-fit {
    width: 100%;
    table-layout: auto;
}
.app-table-fit th { white-space: nowrap; }
.app-table-fit td { overflow-wrap: anywhere; word-break: normal; }
.app-table-fit td.num,
.app-table-fit th.num,
.app-table-fit td.app-nowrap,
.app-table-fit .app-actions,
.app-table-fit .app-badge-stato,
.app-table-fit .app-avatar,
.app-table-fit .txt-jr {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Blocchi richiudibili: header cliccabile con chevron che ruota di 180°
   quando aria-expanded="true" (Bootstrap collapse lo aggiorna da solo) */
.app-collapsible {
    cursor: pointer;
    user-select: none;
}
.app-collapsible .app-collapsible-chevron {
    display: inline-block;
    transition: transform var(--app-transition-fast);
}
.app-collapsible[aria-expanded="true"] .app-collapsible-chevron {
    transform: rotate(180deg);
}

/* Comandi filtri: Avanzati · Reset · Filtra su UNA riga (_filtri_azioni.html) */
.app-filtri-azioni {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.app-filtri-azioni .app-btn { flex: 0 0 auto; }

/* Reset marrone (#7b4302, catalogo btn_reset) con testo BIANCO sempre */
.app-btn-reset {
    background: #7b4302;
    border-color: #7b4302;
    color: #fff !important;
}
.app-btn-reset:hover,
.app-btn-reset:focus,
.app-btn-reset:visited {
    background: #63360a;
    border-color: #63360a;
    box-shadow: 0 4px 12px rgba(123, 67, 2, 0.4);
    color: #fff !important;
}

/* Banner delle liste (_banner_liste.html): compatti, elenco richiudibile */
.app-banner-liste-wrap {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: .5rem 0 .75rem 0;
}
.alert-banner.app-banner-liste {
    align-items: center;
    gap: .75rem;
    padding: .6rem 1rem;
    margin: 0;
}
.app-banner-liste .alert-banner-icon { font-size: 1.15rem; }
.app-banner-liste .alert-banner-content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .6rem;
}
.app-banner-liste .alert-banner-title { font-size: .9rem; margin: 0; }
.app-banner-liste .alert-banner-text { font-size: .85rem; }
.app-banner-liste-toggle { flex: 0 0 auto; margin-left: auto; }
.app-banner-liste-elenco {
    margin: 0;
    padding: .5rem .9rem;
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-md);
    background: rgba(17, 24, 39, 0.7);
}
.app-banner-liste-elenco--danger { border-color: rgba(239, 68, 68, 0.3); }
.app-banner-liste-elenco--warning { border-color: rgba(245, 158, 11, 0.3); }
.app-banner-liste-elenco--info { border-color: rgba(59, 130, 246, 0.3); }
.app-banner-liste-voci {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3 220px;
    column-gap: 1.25rem;
    font-size: .82rem;
}
.app-banner-liste-voci li { break-inside: avoid; padding: .1rem 0; }
.app-banner-liste-voci a { color: var(--app-text-primary); text-decoration: none; }
.app-banner-liste-voci a:hover { color: var(--app-accent-tertiary); text-decoration: underline; }
.app-banner-liste-altri { font-size: .75rem; color: var(--app-text-muted); margin-top: .35rem; }

/* --- OVERRIDE SCURI GLOBALI ------------------------------------------------
   Gli alert di Bootstrap prendono le tinte dei .alert-banner--*; le legende,
   i tab, le list-group e le utility bg-light/bg-white diventano scure. */
.alert.alert-info,
.alert.alert-primary {
    --bs-alert-bg: rgba(59, 130, 246, 0.1);
    --bs-alert-border-color: rgba(59, 130, 246, 0.3);
    --bs-alert-color: #93c5fd;
    --bs-alert-link-color: #bfdbfe;
    background-color: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}
.alert.alert-warning {
    --bs-alert-bg: rgba(245, 158, 11, 0.1);
    --bs-alert-border-color: rgba(245, 158, 11, 0.3);
    --bs-alert-color: #fcd34d;
    --bs-alert-link-color: #fde68a;
    background-color: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}
.alert.alert-danger {
    --bs-alert-bg: rgba(239, 68, 68, 0.1);
    --bs-alert-border-color: rgba(239, 68, 68, 0.3);
    --bs-alert-color: #fca5a5;
    --bs-alert-link-color: #fecaca;
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.alert.alert-success {
    --bs-alert-bg: rgba(16, 185, 129, 0.1);
    --bs-alert-border-color: rgba(16, 185, 129, 0.3);
    --bs-alert-color: #6ee7b7;
    --bs-alert-link-color: #a7f3d0;
    background-color: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}
.alert.alert-secondary,
.alert.alert-light,
.alert.alert-dark {
    --bs-alert-bg: rgba(148, 163, 184, 0.12);
    --bs-alert-border-color: rgba(148, 163, 184, 0.3);
    --bs-alert-color: #cbd5e1;
    --bs-alert-link-color: #e2e8f0;
    background-color: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}
.alert .alert-link,
.alert a:not(.app-btn):not(.btn) {
    color: inherit;
    font-weight: 600;
}
.alert .link-info,
.alert .link-warning,
.alert .link-danger,
.alert .link-success,
.alert .link-primary,
.alert .link-secondary {
    color: inherit !important;
}
.alert .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Legenda (legend-card) scura */
.legend-card {
    background: var(--app-bg-card-solid);
    border: 1px solid var(--app-border-color);
    color: var(--app-text-primary);
}
.legend-title { color: var(--app-text-secondary); }
.legend-items { color: var(--app-text-primary); }
.legend-label { color: var(--app-text-secondary); }
.legend-group-title { color: var(--app-text-secondary); }

/* Utility chiare di Bootstrap → scure (Bootstrap le dichiara !important) */
.bg-light,
.bg-white,
.card-header.bg-white,
.card-header.bg-light,
.card-footer.bg-white,
.card-footer.bg-light {
    background-color: var(--app-bg-tertiary) !important;
    color: var(--app-text-primary);
}
.card-header.bg-white,
.card-header.bg-light {
    border-bottom-color: var(--app-border-color);
}
.text-bg-light {
    background-color: var(--app-bg-tertiary) !important;
    color: var(--app-text-primary) !important;
}
.bg-light .text-dark,
.bg-white .text-dark,
.bg-light .text-muted,
.bg-white .text-muted {
    color: var(--app-text-secondary) !important;
}
.table-light,
.table > :not(caption) > .table-light > *,
tr.table-light > th,
tr.table-light > td {
    --bs-table-bg: var(--app-bg-tertiary);
    --bs-table-color: var(--app-text-primary);
    --bs-table-border-color: var(--app-border-color);
    --bs-table-striped-bg: var(--app-bg-tertiary);
    --bs-table-striped-color: var(--app-text-primary);
    --bs-table-hover-bg: var(--app-bg-tertiary);
    --bs-table-hover-color: var(--app-text-primary);
    --bs-table-active-bg: var(--app-bg-tertiary);
    --bs-table-active-color: var(--app-text-primary);
    background-color: var(--app-bg-tertiary);
    color: var(--app-text-primary);
    border-color: var(--app-border-color);
}

/* Tab (nav-tabs / nav-pills) scuri, attivo leggibile */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--app-border-color);
    --bs-nav-tabs-link-hover-border-color: var(--app-border-color) var(--app-border-color) transparent;
    --bs-nav-tabs-link-active-color: #fff;
    --bs-nav-tabs-link-active-bg: var(--app-bg-tertiary);
    --bs-nav-tabs-link-active-border-color: var(--app-border-color) var(--app-border-color) var(--app-bg-tertiary);
    border-bottom-color: var(--app-border-color);
}
.nav-tabs .nav-link {
    color: var(--app-text-secondary);
    background: transparent;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--app-text-primary);
    border-color: var(--app-border-color) var(--app-border-color) transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #fff;
    background-color: var(--app-bg-tertiary);
    border-color: var(--app-border-color) var(--app-border-color) var(--app-bg-tertiary);
}
.nav-pills .nav-link { color: var(--app-text-secondary); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--app-accent-secondary);
    color: #fff;
}
.tab-content { color: var(--app-text-primary); }

/* list-group scure */
.list-group {
    --bs-list-group-bg: var(--app-bg-card-solid);
    --bs-list-group-color: var(--app-text-primary);
    --bs-list-group-border-color: var(--app-border-color);
    --bs-list-group-action-color: var(--app-text-primary);
    --bs-list-group-action-hover-color: #fff;
    --bs-list-group-action-hover-bg: var(--app-bg-tertiary);
    --bs-list-group-action-active-color: #fff;
    --bs-list-group-action-active-bg: var(--app-bg-tertiary);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--app-accent-secondary);
    --bs-list-group-active-border-color: var(--app-accent-secondary);
    --bs-list-group-disabled-color: var(--app-text-muted);
    --bs-list-group-disabled-bg: var(--app-bg-card-solid);
}
.list-group-item {
    background-color: var(--app-bg-card-solid);
    color: var(--app-text-primary);
    border-color: var(--app-border-color);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--app-bg-tertiary);
    color: #fff;
}
.list-group-item.active {
    background-color: var(--app-accent-secondary);
    border-color: var(--app-accent-secondary);
    color: #fff;
}
.list-group-item.disabled,
.list-group-item:disabled {
    background-color: var(--app-bg-card-solid);
    color: var(--app-text-muted);
}

/* Testo di aiuto dei form: grigio chiaro, non grigio scuro */
.form-text { color: var(--app-text-secondary); }

/* select2 (tema bootstrap-5) scuro: campo, tendina, opzioni, chip */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--app-bg-secondary);
    border: 1px solid var(--app-border-color);
    color: var(--app-text-primary);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--app-text-primary);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-search__field::placeholder {
    color: var(--app-text-muted);
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--app-accent-primary);
    box-shadow: 0 0 0 0.2rem var(--app-accent-glow);
}
.select2-container--bootstrap-5.select2-container--disabled .select2-selection,
.select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection {
    background-color: var(--app-bg-tertiary);
    color: var(--app-text-muted);
}
.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--app-bg-secondary);
    border-color: var(--app-border-color);
    color: var(--app-text-primary);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-search__field {
    background-color: var(--app-bg-tertiary);
    border-color: var(--app-border-color);
    color: var(--app-text-primary);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--app-accent-primary);
    box-shadow: 0 0 0 0.2rem var(--app-accent-glow);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__group,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__message {
    color: var(--app-text-primary);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--app-bg-tertiary);
    color: #fff;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"],
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected {
    background-color: var(--app-accent-secondary);
    color: #fff;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled="true"] {
    color: var(--app-text-muted);
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: var(--app-bg-tertiary);
    border-color: var(--app-border-color);
    color: var(--app-text-primary);
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear {
    filter: invert(0.85);
}

/* === AREA: progetti === */
/* Lista Progetti: i 6 filtri principali si stringono per lasciare il blocco
   Avanzati · Reset · Filtra sulla stessa riga (da xl in su); il blocco non
   va mai a capo al suo interno (.app-filtri-azioni). */
@media (min-width: 1200px) {
    .progetti-filtri-principali > [class*="col-"]:not(.progetti-filtri-azioni) {
        flex: 1 1 0;
        width: auto;
        min-width: 100px;
    }
    .progetti-filtri-principali > .progetti-filtri-azioni {
        flex: 0 0 auto;
        width: auto;
    }
}
.progetti-filtri-azioni .app-filtri-azioni { justify-content: flex-end; }
/* Tabella progetti: celle compatte (11 colonne, di cui 7 senza a-capo) così
   Produttore / Destinatario / Note tengono spazio anche a ~1500 px;
   le colonne testuali vanno a capo alla parola, il resto no */
/* col prefisso body.app-body: senza, la regola globale del tema (1rem di
   padding, specificita' 0,2,2) vinceva e le celle restavano larghe */
body.app-body .progetti-tabella > :not(caption) > * > * { padding: .4rem .4rem; }
.progetti-tabella thead th { font-size: .8rem; }
.progetti-tabella td.small { font-size: .82rem; overflow-wrap: break-word; }
.progetti-tabella .app-lettera { font-size: 15px; }
/* Form Progetto: asterisco dei campi obbligatori (base + dovuti dallo stato) */
.campo-obbligatorio { color: #ef4444; margin-left: 2px; }
/* Scheda Carico */
.info-item {
    padding: .75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: .5rem;
    border: 1px solid var(--app-border-color);
    overflow: hidden;
}
/* RENTRI — viaggi da registrare: icone dei contatori */
.rentri-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.rentri-stat-icon--info { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.rentri-stat-icon--warning { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.rentri-stat-icon--danger { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
/* === /AREA: progetti === */

/* === AREA: scheda === */
/* Scheda Progetto (detail_progetto.html) — verifica Giacomo 2026-09 */

/* Badge tipo TFS/NAZ accanto al numero: piccolo e grigio (3.3.6) */
.scheda-badge-tipo,
.scheda-badge-neutro {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #475569;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .02em;
    vertical-align: middle;
    white-space: nowrap;
}
.scheda-badge-tipo { font-size: 12px; }

/* Tile KPI e tile residui fideiussione: colore per livello (unica funzione
   di soglia in progetti.services.avvisi), neutro = grigio */
.scheda-tile { border: 1px solid var(--app-border-color); }
/* Revisione 26/09: sulle tile KPI (che sono .card) la globale
   `body.app-body .card` (specificità 0,2,1) annullava la tinta: stesso
   prefisso qui, così tile KPI e tile residui hanno lo stesso colore. */
body.app-body .card.scheda-tile--success,
.scheda-tile--success { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.30); }
body.app-body .card.scheda-tile--info,
.scheda-tile--info { background: rgba(13, 202, 240, 0.10); border-color: rgba(13, 202, 240, 0.30); }
body.app-body .card.scheda-tile--warning,
.scheda-tile--warning { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.32); }
body.app-body .card.scheda-tile--danger,
.scheda-tile--danger { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.32); }
body.app-body .card.scheda-tile--secondary,
.scheda-tile--secondary { background: rgba(148, 163, 184, 0.10); border-color: rgba(148, 163, 184, 0.28); }
.scheda-tile .text-secondary,
.fid-kpi-riep .text-secondary { color: #94a3b8 !important; }

/* Fideiussione sforata (residui < 0): riga rossa nell'accordion (05_avvisi §G) */
.scheda-fid-sforata > .accordion-header > .accordion-button {
    background: rgba(220, 38, 38, 0.18) !important;
    box-shadow: inset 4px 0 0 #dc3545 !important;
}

/* Riga «Valore carico X/10 · Valore progetto Y/10 · Importanza» */
.scheda-valori {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    align-items: center;
}
.scheda-valori-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}
.scheda-segmenti {
    display: inline-flex;
    gap: 3px;
    vertical-align: middle;
}
.scheda-seg {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: rgba(148, 163, 184, 0.22);
    border: 1px solid rgba(148, 163, 184, 0.35);
}
.scheda-seg.on {
    background: #10b981;
    border-color: #10b981;
}

/* Barra della modalità Prenota (partial scuro, pulsanti a destra) */
.alert-banner.scheda-prenota-bar {
    align-items: center;
    gap: .75rem;
    margin: .75rem 1rem;
}
.scheda-prenota-bar .alert-banner-text { margin: 0; }

/* Tabella carichi del box: larghezza piena, niente scorrimento orizzontale
   sotto i 1550 px, numeri e intestazioni nowrap, campi inline compatti,
   colonna azioni con margine dal bordo (3.3.12 / 1.4 / #5.20) */
.scheda-carichi-wrap { overflow-x: auto; overflow-y: visible; }
/* Le regole globali `body.app-body .table …` hanno specificità più alta:
   qui si usa lo stesso prefisso (e !important sulle larghezze dei campi,
   che altrimenti seguono la larghezza intrinseca di select/date). */
body.app-body .scheda-carichi-table,
.scheda-carichi-table { font-size: .76rem; }
body.app-body .scheda-carichi-table th,
body.app-body .scheda-carichi-table td,
.scheda-carichi-table th,
.scheda-carichi-table td {
    padding: .2rem .25rem;
    vertical-align: middle;
}
body.app-body .scheda-carichi-table th,
.scheda-carichi-table th { white-space: nowrap; font-size: .72rem; }
.scheda-carichi-table td.num { white-space: nowrap; }
.scheda-carichi-table td.num .txt-jr { font-size: 11px; margin-left: 2px; }
/* Revisione 26/09: la globale `body.app-body .form-control, … input:not(…)`
   (specificità 0,3,2, padding .5rem .75rem) vinceva sul padding compatto:
   il campo Q. Reale mostrava «22,7» invece di «22,760». Qui stesso prefisso
   e !important (scoped alla tabella). */
body.app-body .scheda-carichi-table .form-control,
body.app-body .scheda-carichi-table .form-select,
body.app-body .scheda-carichi-table input:not([type="checkbox"]):not([type="radio"]),
body.app-body .scheda-carichi-table select,
.scheda-carichi-table .form-control,
.scheda-carichi-table .form-select {
    font-size: .72rem !important;
    padding: .15rem .25rem !important;
    line-height: 1.35;
    min-width: 0 !important;
    display: inline-block;
    box-sizing: border-box;
}
/* Niente frecce nel campo numerico: rubavano ~15 px al campo Q. Reale */
.scheda-carichi-table input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.scheda-carichi-table input[type="number"]::-webkit-inner-spin-button,
.scheda-carichi-table input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.scheda-carichi-table .scheda-in-data { width: 118px !important; }
.scheda-carichi-table .scheda-in-data::-webkit-calendar-picker-indicator { margin: 0; padding: 0 0 0 2px; }
body.app-body .scheda-carichi-table select.scheda-in-status,
.scheda-carichi-table .scheda-in-status { width: 112px !important; padding-right: 1.3rem !important; background-position: right .3rem center; }
body.app-body .scheda-carichi-table select.scheda-in-sped,
.scheda-carichi-table .scheda-in-sped { width: 110px !important; padding-right: 1.3rem !important; background-position: right .3rem center; }
.scheda-carichi-table .scheda-in-num { width: 72px !important; }
.scheda-carichi-table .scheda-in-vettore { width: 100px !important; }
.scheda-carichi-table .scheda-in-fir { width: 96px !important; }
.scheda-carichi-table th.scheda-col-check { width: 22px; }
body.app-body .scheda-carichi-table th.scheda-col-azioni,
body.app-body .scheda-carichi-table td:last-child,
.scheda-carichi-table th.scheda-col-azioni,
.scheda-carichi-table td:last-child { padding-right: .5rem; }
.scheda-carichi-table .app-actions { justify-content: center; gap: 3px; }

/* Fasi dell'iter notifica: tinte scure (prima sfondi chiari inline) */
.fase-badge {
    font-size: .72rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: .35rem;
    white-space: nowrap;
    display: inline-block;
}
.fase-dossier { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
.fase-italia { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
.fase-estero { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
.fase-timbro { background: rgba(139, 92, 246, 0.20); color: #c4b5fd; }
.fase-approv { background: rgba(236, 72, 153, 0.18); color: #f9a8d4; }
.fase-1b { background: rgba(99, 102, 241, 0.20); color: #a5b4fc; }
.fase-agg { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
/* === /AREA: scheda === */

/* === AREA: carichi === */
/* Verifica Giacomo 2026-09 — lista Carichi, Itinerari, Offerte trasporti. */

/* Pop-up Prenota (#2.23): overlay scuro, box centrata, elenco scorrevole */
.prenota-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
}
.prenota-modal[hidden] { display: none; }
.prenota-modal-box {
    width: min(560px, 92vw);
    max-height: 80vh;
    overflow: auto;
}
.prenota-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.prenota-lista .list-group-item { font-size: .85rem; }

/* Filtri (#3.8.6): griglia regolare, tendine multiple compatte */
.carichi-filtri select[multiple] { min-height: 6.5rem; }
.carichi-filtri .range-group .form-control { min-width: 0; }
/* Riga principale (revisione 3.8.6): i 6 campi si stringono per lasciare
   Avanzati · Reset · Filtra in coda alla STESSA riga da xl in su (stesso
   schema di Progetti / Fideiussioni). Se non ci stanno (portatile 1366 con
   sidebar aperta) il blocco passa da solo su una riga sua, a destra, e i
   campi riempiono tutta la riga: mai spazio vuoto a sinistra. */
@media (min-width: 1200px) {
    .carichi-filtri-principali > [class*="col-"]:not(.carichi-filtri-azioni) {
        flex: 1 1 0;
        width: auto;
        min-width: 110px;
    }
    /* la Selezione rapida ha le voci piu' lunghe ("Questa settimana
       (Prenotati + Rinviati)"): doppio spazio e minimo piu' alto */
    .carichi-filtri-principali > [class*="col-"].carichi-filtro-quick { flex: 2 1 0; min-width: 150px; }
}
/* tendine dei filtri: se il testo non ci sta, puntini invece del taglio secco */
.carichi-filtri-principali .form-select { text-overflow: ellipsis; }
@media (min-width: 1200px) {
    .carichi-filtri-principali > .carichi-filtri-azioni {
        flex: 0 0 auto;
        width: auto;
    }
}
.carichi-filtri-azioni .app-filtri-azioni { justify-content: flex-end; }

/* Calendario settimanale richiudibile (mail Giacomo 26/09) */
.calendario-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--app-text-primary);
    font: inherit;
    display: inline-flex;
    align-items: center;
}
.calendario-toggle:hover, .calendario-toggle:focus { color: #fff; outline: none; }
.vs-viaggio .app-badge-stato { font-size: .6rem; padding: 1px 5px; border-radius: 4px; }
.app-avatar.app-avatar-sm { width: 20px; height: 20px; flex-basis: 20px; font-size: 9px; }

/* Tabella (#3.8.8 + revisione): 11 colonne che stanno nella card senza
   scorrimento. Colonne fisse strette (Nr, Week, Data, Status, Q. Std,
   Azioni); Trasportatore e NC ELASTICHE (width:100% con un minimo): si
   allargano quando c'e' spazio, si stringono sui portatili e il title
   porta sempre il valore intero. */
.carichi-grid { font-size: 0.85rem; }
/* celle compatte: batte "body.app-body .table td" (1rem, specificita' 0,2,2) */
body.app-body .table.carichi-grid th,
body.app-body .table.carichi-grid td,
.carichi-grid > :not(caption) > * > * { padding: 0.3rem 0.25rem; vertical-align: middle; }
.carichi-grid th.sort-th { font-size: 0.8rem; }
/* le intestazioni "Nr. Notifica / Progetto" e "Data Carico" possono andare
   a capo (il partial sort_th mette text-nowrap): la riga di testata e' gia'
   su due righe, e "Data Carico" su una riga sola allargava la colonna
   oltre la data stessa (10/09/2026) */
.carichi-grid thead th:first-child,
.carichi-grid thead th.carichi-th-wrap { white-space: normal !important; }
/* la cella Progetto e' UN blocco che non va mai a capo: avatar + numero +
   numero interno + lettere F/N/C sulla stessa riga (rilievo revisione) */
.carichi-grid .carichi-progetto-unit {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    white-space: nowrap;
}
.carichi-grid .carichi-progetto-unit .app-avatar { margin-right: .2rem; }
.carichi-grid .carichi-progetto-unit .txt-jr { margin: 0 0 0 .15rem; }
/* controlli in riga: il padding deve battere "body.app-body input:not(...)"
   (0,3,2) e "body.app-body .form-select" (0,2,1), altrimenti restano i
   12px del tema e il testo si taglia (qui 0,4,0) */
body.app-body .table.carichi-grid .carichi-cell { font-size: 0.8rem; padding: 0.15rem 0.4rem; line-height: 1.4; }
/* niente frecce su/giu' nel numero: in griglia si scrive, e in Chromium la
   spin button ruba ~15px di testo anche quando e' invisibile */
.carichi-grid input.carichi-cell-qta::-webkit-inner-spin-button,
.carichi-grid input.carichi-cell-qta::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.carichi-grid input.carichi-cell-qta { -moz-appearance: textfield; appearance: textfield; }
/* Status: le select dell'app non hanno la freccia (il "background
   !important" globale azzera l'immagine di Bootstrap), quindi niente
   padding a destra per una freccia che non c'e': con 7rem ci sta anche
   "Da Assegnare" (88px di testo, 97 disponibili). Specificita' 0,4,2 per
   battere "body.app-body select" (0,2,2). */
body.app-body .table.carichi-grid select.carichi-cell-status {
    width: 7rem;
    min-width: 7rem;
    padding-right: 0.4rem;
}
/* NC e Trasportatore: elastiche con minimo; il title porta il valore intero
   (aggiornato via JS quando l'utente cambia valore) */
body.app-body .table.carichi-grid select.carichi-cell-nc,
body.app-body .table.carichi-grid input.carichi-cell-vettore {
    width: 100%;
    min-width: 5.5rem;
    padding-right: 0.4rem;
    text-overflow: ellipsis;
}
/* Q. Std: input + badge (ton. sec. / note interne) su UNA riga. La
   larghezza dell'input deve battere "body.app-body input:not(...)"
   (width:100%, specificita' 0,3,2): qui 0,4,2 + flex-basis fissa. */
.carichi-grid .carichi-qta-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}
body.app-body .table.carichi-grid input.carichi-cell-qta {
    width: 4.5rem;
    min-width: 4.5rem;
    flex: 0 0 4.5rem;
}
.carichi-grid .carichi-col-azioni { width: 4rem; }
.carichi-grid td.text-end .app-badge-num { vertical-align: middle; }
.carichi-grid .app-avatar { vertical-align: middle; }
/* Week: sotto i ~1.090px di card (portatile 1366 con sidebar aperta) la
   colonna Week si nasconde per non far scorrere la tabella; la settimana
   resta nel calendario e nel filtro "Settimana Carico". Container query:
   dipende dalla larghezza REALE della card, non della finestra (con la
   sidebar chiusa la colonna resta visibile anche a 1366). */
.carichi-table-wrap { container-type: inline-size; }
@container (max-width: 1090px) {
    .carichi-grid .carichi-col-week { display: none !important; }
}

/* Itinerari / Offerte: impianti e aziende col nickname su una riga, il resto
   (citta', ragione sociale) in grigio piccolo */
.tratte-grid td, .offerte-grid td { vertical-align: middle; }
.tratte-grid .txt-jr, .offerte-grid .txt-jr { margin-left: .25rem; }
/* === /AREA: carichi === */

/* === AREA: fideiussioni === */
/* Verifica Giacomo 2026-09 (3.5.5 / 3.6.4): barre Ton./Viaggi mancanti
   colorate per soglia SOLO se la fideiussione e' Attiva; negli altri stati
   la barra e' neutra (grigia), lo stato lo dice gia' il badge. */
.progress-bar.app-barra-neutra {
    background-color: rgba(148, 163, 184, 0.45);
    color: var(--app-text-primary);
}
/* Lettere N/C accanto al numero in lista/scheda: stesso markup della
   legenda (.app-lettera), con un respiro dal numero. */
.fid-lettere { display: inline-flex; gap: .35rem; margin-left: .5rem; vertical-align: middle; }
.fid-lettere .app-lettera { font-size: 15px; }
/* Box delle checkbox Stato/Origine nei filtri (bordo scuro, niente scroll) */
.fid-filtro-check {
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-sm, 6px);
    padding: .3rem .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .75rem;
    min-height: 31px;
    align-items: center;
}
.fid-filtro-check .form-check { margin: 0; }
.fid-filtro-check .form-check-label { font-size: .8rem; }
/* Header richiudibile delle card (Note): header cliccabile con chevron */
.fid-card-header-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    text-align: left;
}
/* Tabella lista: sta nella pagina, niente scorrimento orizzontale.
   Revisione 2026-09: a 1540 px con sidebar aperta la card e' larga ~1180 px
   e la tabella a 10 colonne ne misurava 1330 (16 px di padding per lato in
   ogni cella + intestazioni a due parole senza a-capo): la card tagliava
   Scadenza e Azioni. Celle compatte (come .progetti-tabella) e le due
   intestazioni "Ton. Mancanti" / "Viaggi Mancanti" su due righe. */
.fid-tabella td, .fid-tabella th { vertical-align: middle; }
body.app-body .fid-tabella > :not(caption) > * > * { padding: .45rem .4rem; }
.fid-tabella td.small { font-size: .82rem; }
.fid-tabella th.fid-th-wrap { white-space: normal; line-height: 1.15; }
.fid-tabella .fid-barra { min-width: 72px; }  /* 27/09: era 90, la tabella sforava a 1366 px */
/* Lista: i 3 filtri principali (Nr · Progetto · Stato) si stringono per
   lasciare il blocco Avanzati · Reset · Filtra sulla stessa riga da xl in su
   (stesso schema della lista Progetti); il blocco non va mai a capo al suo
   interno (.app-filtri-azioni) e sotto xl passa su una riga sua, a destra. */
@media (min-width: 1200px) {
    .fid-filtri-principali > [class*="col-"]:not(.fid-filtri-azioni) {
        flex: 1 1 0;
        width: auto;
        min-width: 140px;
    }
    /* (stessa specificita' della regola sopra, viene dopo: vince) */
    .fid-filtri-principali > [class*="col-"].fid-filtro-stato { flex: 3 1 0; }
    .fid-filtri-principali > .fid-filtri-azioni {
        flex: 0 0 auto;
        width: auto;
    }
}
.fid-filtri-azioni .app-filtri-azioni { justify-content: flex-end; }
/* Scadenze: periodo selezionato (30/60/90 giorni) evidenziato — la classe
   `active` di Bootstrap non ha regole sugli .app-btn */
.fid-periodo .app-btn-outline-secondary.active,
body.app-body .fid-periodo a.app-btn-outline-secondary.active {
    background: #64748b;
    border-color: #64748b;
    color: #fff;
}
/* === /AREA: fideiussioni === */

/* === AREA: contabilita === */
/* Verifica Giacomo 2026-09 — Contabilità: badge Tipo/Stato delle fatture in
   uscita (#1.9, leggibili: fondo chiaro del catalogo + testo scuro), Tipo/
   Stato delle fatture in ingresso (#3.22.2), tabelle senza scorrimento
   orizzontale, select2 compatto per il filtro Equipment (#3.12.3), riquadri
   info della scheda fattura (prima in un <style> nel template). */
.app-table-wrap { overflow-x: auto; overflow-y: hidden; }  /* vedi blocco "Tabelle nella card" in fondo */
.app-badge-fatt--fattura { background: #62B0DF; color: #212529; }
.app-badge-fatt--nc { background: #DF9162; color: #212529; }
.app-badge-fatt--creata { background: #808080; color: #fff; }
.app-badge-fatt--inviata { background: #DFC062; color: #212529; }
.app-badge-fatt--pagata { background: #72DF62; color: #212529; }
.app-badge-ff-tipo--trasporto { background: #62B0DF; color: #212529; }
.app-badge-ff-tipo--impianto { background: #72DF62; color: #212529; }
.app-badge-ff-tipo--ufficio { background: #DFC062; color: #212529; }
.app-badge-ff-tipo--notifica { background: #A162DF; color: #fff; }
.app-badge-ff-stato--bozza { background: #DFC062; color: #212529; }
.app-badge-ff-stato--registrata { background: #62B0DF; color: #212529; }
.app-badge-ff-stato--pagata { background: #72DF62; color: #212529; }
.app-badge-duplica { background: #0dcaf0; color: #212529; }
.app-badge-num--grigio { background: #808080; color: #fff; }
.app-riga-eliminata {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.4) !important;
}
.info-item {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    border: 1px solid var(--app-border-color);
}
/* select2 multiplo compatto (solo i select .js-select2-multi): altezza del
   form-control-sm, chip piccole */
select.js-select2-multi + .select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0 0.25rem;
    font-size: 0.875rem;
}
select.js-select2-multi + .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}
select.js-select2-multi + .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    font-size: 0.78rem;
    margin: 2px 2px 0 0;
    padding: 0 0.3rem;
}
/* === /AREA: contabilita === */

/* === AREA: reports === */
/* Verifica Giacomo 2026-09 — report a gruppi (Notifiche, Scadenze): UNA
   tabella per report con table-layout fixed + colgroup, così le colonne
   restano allineate fra un gruppo e l'altro; owner e sottogruppo sono righe
   di intestazione dentro la tabella; il ✓ (app-act) sta in una colonna a
   larghezza fissa e non viene mai tagliato. */
.app-report-table {
    width: 100%;
    table-layout: fixed;
}
.app-report-table th,
.app-report-table td {
    overflow-wrap: anywhere;
    vertical-align: middle;
}
.app-report-table th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-report-table .app-nowrap,
.app-report-table .app-avatar,
.app-report-table .app-act { overflow-wrap: normal; }
.app-report-table col.app-report-col-check { width: 64px; }
.app-report-table td:last-child { padding-right: .75rem; }
body.app-body .table tbody tr.app-report-owner td {
    background: rgba(59, 130, 246, 0.14);
    border-top: 1px solid var(--app-border-color);
    border-bottom: 1px solid var(--app-border-color);
    padding-top: .5rem;
    padding-bottom: .5rem;
}
body.app-body .table tbody tr.app-report-sottogruppo td {
    background: rgba(148, 163, 184, 0.10);
    color: var(--app-text-secondary);
    letter-spacing: .02em;
    padding-top: .35rem;
    padding-bottom: .35rem;
}
.app-report-sottogruppo a { color: var(--app-text-primary); text-decoration: none; }
.app-report-sottogruppo a:hover { color: var(--app-accent-tertiary); text-decoration: underline; }
.app-report-table .form-control-sm { min-width: 0; }

/* Pallino di fascia (legenda del Principale e card Generale) */
.app-report-pallino {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 11px;
    vertical-align: middle;
}

/* Report RENTRI: riga appena spuntata come registrata (era table-success,
   sfondo chiaro di Bootstrap) */
body.app-body .table tbody tr.app-report-riga-registrata td {
    background: rgba(16, 185, 129, 0.16);
    color: var(--app-text-muted);
    text-decoration: line-through;
}

/* 3.24.1 tab attivo del Cashflow bianco: sb-admin-2.min.css viene caricato
   DOPO app.css e ha una regola `.nav-tabs .nav-link.active` (sfondo #fff,
   testo grigio) con la stessa specificità dell'override globale, quindi
   vince. Qui la specificità è maggiore (body.app-body ...) e vale per tutti
   i nav-tabs dell'app. */
body.app-body .nav-tabs .nav-link.active,
body.app-body .nav-tabs .nav-item.show .nav-link {
    color: #fff;
    background-color: var(--app-bg-tertiary);
    border-color: var(--app-border-color) var(--app-border-color) var(--app-bg-tertiary);
}
body.app-body .nav-tabs .nav-link:not(.active) {
    color: var(--app-text-secondary);
    background: transparent;
}
body.app-body .nav-tabs .nav-link:not(.active):hover,
body.app-body .nav-tabs .nav-link:not(.active):focus {
    color: var(--app-text-primary);
    border-color: var(--app-border-color) var(--app-border-color) transparent;
}

/* 2.4 (revisione): le percentuali dei colgroup sommano all'80%, quindi con
   table-layout fixed «80% + 64px» supera il 100% solo con card più strette
   di 320px. Sotto i 576px la colonna del ✓ scende a 44px (app-act 28px +
   padding) e le celle si compattano: la soglia diventa 220px, sotto ogni
   telefono. Niente scorrimento orizzontale, mai. */
@media (max-width: 575.98px) {
    .app-report-table col.app-report-col-check { width: 44px; }
    .app-report-table th,
    .app-report-table td { padding-left: .3rem; padding-right: .3rem; }
    .app-report-table td:last-child { padding-right: .3rem; }
    /* su telefono una colonna al 20% è ~66px: il numero notifica in
       nowrap invadeva la cella accanto — qui può andare a capo */
    .app-report-table .app-nowrap { white-space: normal !important; overflow-wrap: anywhere; }
}

/* Report Fatturazione (report6, 1.7): colonna «Calc.» evidenziata con una
   tinta scura (era un giallo chiaro inline #fef3c7 / #fffbeb) e campi dei
   filtri compatti (era uno <style> in pagina con bordo chiaro #dee2e6). */
body.app-body .table th.app-report6-col-calc,
body.app-body .table td.app-report6-col-calc { background: rgba(245, 158, 11, 0.12); }
#report6-filter-form input[type="text"],
#report6-filter-form input[type="number"],
#report6-filter-form input[type="date"],
#report6-filter-form select {
    font-size: .8rem;
    padding: .2rem .4rem;
    width: 100%;
    border: 1px solid var(--app-border-color);
    border-radius: .25rem;
}
#report6-filter-form select[multiple] { min-height: 4rem; }
/* === /AREA: reports === */

/* === AREA: anagrafica === */
/* Verifica Giacomo 2026-09 — Aziende, Impianti, Home, menu, Modifica
   elenchi, Note, RENTRI registrazione. */

/* 3.1.3: un <a class="app-btn-outline-secondary"> deve avere lo stesso grigio
   del <button> con la stessa classe: `body.app-body a` (0,1,2) vinceva sulla
   classe (0,1,0) e colorava i link-pulsante con l'accent verde. */
body.app-body a.app-btn-outline-secondary { color: #64748b; }
body.app-body a.app-btn-outline-secondary:hover,
body.app-body a.app-btn-outline-secondary:focus { color: #fff; }

/* 3.33.3: un pulsante disabilitato DEVE sembrare disabilitato */
.app-btn[disabled],
.app-btn:disabled,
.app-btn.app-btn-disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* 3.1.2 Home: la lente sta accanto al campo (flex, non input-group) */
.home-cerca-notifica .form-control { min-width: 0; }

/* 1.10 / 3.14.4 / 3.17.2: filtri delle liste; da xl in su i campi si
   stringono per lasciare il blocco Avanzati · Reset · Filtra sulla stessa
   riga, sempre a destra e mai a capo al suo interno */
@media (min-width: 1200px) {
    .anag-filtri-principali > [class*="col-"]:not(.anag-filtri-azioni) {
        flex: 1 1 0;
        width: auto;
        min-width: 130px;
    }
    .anag-filtri-principali > .anag-filtri-azioni {
        flex: 0 0 auto;
        width: auto;
    }
}
.anag-filtri-azioni .app-filtri-azioni { justify-content: flex-end; }

/* 3.14.2-3: badge Relazione/Ruolo con etichetta completa, mai troncata;
   il gruppo va a capo badge per badge */
.anag-badge-tipo { white-space: nowrap; }
.anag-badge-tipo .bi { font-size: 11px; }
.anag-badge-gruppo {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    vertical-align: middle;
}

/* 3.17.3: header delle schede/form — titolo e pulsanti; sotto 1200 px i
   pulsanti scendono su una riga propria, il titolo non viene schiacciato */
.anag-scheda-titolo { min-width: 0; flex: 1 1 320px; }
.anag-scheda-titolo .app-page-title { overflow-wrap: anywhere; }
.anag-scheda-azioni { flex: 0 0 auto; }
@media (max-width: 1199.98px) {
    .anag-scheda-azioni { flex: 0 0 100%; }
}

/* 1.7: banner scuri compatti (avvisi in card, in home, in Modifica elenchi) */
.alert-banner.anag-banner-compatto {
    align-items: center;
    padding: .6rem 1rem;
    margin-bottom: 1rem;
}
.alert-banner.anag-banner-compatto .alert-banner-icon { font-size: 1.15rem; }

/* 3.17.2 Impianti: badge con il conteggio delle autorizzazioni (title =
   elenco tipi/numeri/scadenze) */
.anag-badge-aut { cursor: help; }

/* 3.11.2 Note: filtro Tipo a checkbox in linea */
.note-filtro-tipo {
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-sm, 6px);
    padding: .3rem .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .75rem;
    min-height: calc(1.5em + .5rem + 2px);
}
.note-filtro-tipo .form-check { margin: 0; }
.note-filtro-tipo .form-check-label { font-size: .8rem; }

/* 3.34.2 Modifica elenchi: azioni per riga su UNA riga (il form di elimina
   sta in linea accanto alla matita) */
.elenchi-azioni form { display: inline-flex; margin: 0; }

/* 3.33.3 RENTRI review: righe del report di validazione (al posto delle
   table-danger / table-warning chiare di Bootstrap) */
.rentri-riga-ko > td { background-color: rgba(239, 68, 68, 0.14); }
.rentri-riga-warn > td { background-color: rgba(245, 158, 11, 0.14); }

/* Rilievi del revisore (2026-09): anche i link-pulsante outline danger /
   success / info / warning (PDF ed Excel delle liste sono <a>) prendono il
   colore della loro classe, non l'accent verde di `body.app-body a` */
body.app-body a.app-btn-outline-danger { color: #dc2626; }
body.app-body a.app-btn-outline-danger:hover,
body.app-body a.app-btn-outline-danger:focus { color: #fff; }
body.app-body a.app-btn-outline-success { color: #059669; }
body.app-body a.app-btn-outline-success:hover,
body.app-body a.app-btn-outline-success:focus { color: #fff; }
body.app-body a.app-btn-outline-info { color: #0284c7; }
body.app-body a.app-btn-outline-info:hover,
body.app-body a.app-btn-outline-info:focus { color: #fff; }
body.app-body a.app-btn-outline-warning { color: #d97706; }
body.app-body a.app-btn-outline-warning:hover,
body.app-body a.app-btn-outline-warning:focus { color: #fff; }

/* Schede Azienda / Impianto / Contatto: box .info-item definito anche qui,
   cosi' l'area non dipende dal CSS delle aree progetti / contabilita */
.info-item {
    padding: .75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: .5rem;
    border: 1px solid var(--app-border-color);
}

/* RENTRI review: tag neutro (Estero, icona intermediario) al posto del
   badge Bootstrap bg-secondary; i numeri dei box usano .app-badge-num */
.rentri-tag {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid #64748b;
    border-radius: 4px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* Cover /anagrafica/: tre pulsanti di navigazione scuri, testo centrato */
.anag-cover { max-width: 720px; margin: 0 auto; padding: 2rem 0; }
.anag-cover-testo { max-width: 560px; }
.anag-cover-btn { min-width: 200px; justify-content: center; }
/* === /AREA: anagrafica === */

/* ==== Tabelle nella card e hover (test manuali di Domenico, 27/09 sera) ====
   1) La card ha overflow:hidden e tagliava le tabelle piu' larghe (Progetti,
      Offerte, Quotazioni Trasporto, Fatture in ingresso a ~1500 px): il
      contenitore .app-table-wrap si adatta e, SOLO se la tabella non ci sta,
      scorre al suo interno (mai la pagina, mai il taglio).
   2) Intestazioni lunghe su due righe (.app-th-wrap), colonna Note con
      larghezza minima e a capo per parola (.app-note), badge di stato che
      puo' andare a capo nelle liste strette (.app-badge-wrap), celle compatte
      (.app-table-compatta): cosi' le tabelle stanno nella card a 1540 px.
   3) Hover leggibile sulle righe di severita': Bootstrap 5.3 colora l'hover di
      .table-danger / -warning / -secondary con --bs-table-hover-bg CHIARO
      (box-shadow interno alle celle) e testo nero; col tema scuro la riga
      diventava rosa con testo chiaro. Le variabili si ridefiniscono sulla riga. */
.app-table-wrap { overflow-x: auto; overflow-y: hidden; }
.app-table-fit th.app-th-wrap { white-space: normal !important; line-height: 1.15; }
.app-table-fit td.app-note { min-width: 7.5rem; overflow-wrap: normal; word-break: normal; }
.app-table-fit .app-badge-stato.app-badge-wrap { white-space: normal; line-height: 1.2; text-align: center; }
body.app-body .app-table-compatta > :not(caption) > * > * { padding: .45rem .4rem; }
.app-table-compatta td.small { font-size: .82rem; }
body.app-body .table > tbody > tr:hover {
    --bs-table-hover-bg: rgba(16, 185, 129, 0.12);
    --bs-table-hover-color: var(--app-text-primary);
}
body.app-body .table > tbody > tr.table-danger,
body.app-body .table > tbody > tr.riga-scaduta {
    --bs-table-hover-bg: rgba(239, 68, 68, 0.30);
    --bs-table-hover-color: var(--app-text-primary);
}
body.app-body .table > tbody > tr.table-warning {
    --bs-table-hover-bg: rgba(245, 158, 11, 0.30);
    --bs-table-hover-color: var(--app-text-primary);
}
body.app-body .table > tbody > tr.table-secondary,
body.app-body .table > tbody > tr.riga-chiusa {
    --bs-table-hover-bg: rgba(148, 163, 184, 0.22);
    --bs-table-hover-color: var(--app-text-primary);
}
body.app-body .table > tbody > tr.riga-scaduta:hover > td,
body.app-body .table > tbody > tr.riga-chiusa:hover > td { color: var(--app-text-primary); }

/* ==== Icone supplementi / costi (catalogo 2026-09, verifica Giacomo 27/09) ====
   icon_suppl · icon_amm · icon_adr (+ fee esterne F1/F2): etichetta piena,
   colore = FONTE del prezzo: destino #0d6efd · trasporto #fd7e14 · nostra
   offerta #059669. Importo e nota nel tooltip (title). Helper unico:
   core.ui.voci_costo / {% icone_costo %}. */
.app-sup-gruppo { display: inline-flex; flex-wrap: wrap; gap: .15rem; vertical-align: middle; }
.app-sup {
    display: inline-block; min-width: 1.45rem; padding: .05rem .3rem;
    border-radius: .25rem; font-size: .68rem; font-weight: 700; line-height: 1.35;
    text-align: center; color: #fff; cursor: help; white-space: nowrap;
}
.app-sup--destino { background: #0d6efd; }
.app-sup--trasporto { background: #fd7e14; }
.app-sup--offerta { background: #059669; }


/* ==== AREA report contabilita progetto (verifica Giacomo 27/09, colonne contabilita) ====
   Report 7 (/report/contabilita-progetto/): box Offerte a 16 colonne (una
   riga per riga trasporto), Quotazioni Destino e Trasporto con le colonne
   della spec #7.05, note richiudibili sotto i box. #5.37.13: devono stare
   nella card a 1366 px col menu aperto (~1000 px utili) -> corpo piccolo,
   celle strette, intestazioni a capo; il prefisso body.app-body serve a
   battere 'body.app-body .table td' (padding 1rem). */
body.app-body .r7-tab > :not(caption) > * > * { padding: .4rem .3rem; }
body.app-body .r7-tab > tbody { font-size: .78rem; }
body.app-body .r7-tab > thead th { font-size: .72rem; font-weight: 600; line-height: 1.15; vertical-align: bottom; }
body.app-body .r7-tab > tbody > tr.r7-off-prima > td { border-top: 2px solid rgba(148, 163, 184, 0.55); }
/* Revisione: Offerte a 16 colonne, misurate a 1366 px col menu aperto (card
   957 px) con dati realistici (spedizioniere «Settentrionale», prezzo
   «media», S1-S3, «non accettata»): 943 px con .3rem ai lati, margine
   troppo sottile. Con .25rem: 918 px. */
body.app-body .r7-tab.r7-tab-16 > :not(caption) > * > * { padding-left: .25rem; padding-right: .25rem; }
.app-table-fit .txt-jr.r7-wrap { white-space: normal; font-size: 11px; }
/* testo a capo solo fra le parole (mai «A2Powe/r»): con overflow-wrap:anywhere
   la colonna di testo veniva schiacciata sotto la parola piu' lunga */
.app-table-fit.r7-tab td { overflow-wrap: break-word; }
.r7-tab .app-avatar { width: 22px; height: 22px; flex-basis: 22px; font-size: 10px; }
.r7-note { border-top: 1px solid var(--app-border-color); background: rgba(0, 0, 0, 0.1); }
.r7-note-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: .45rem 1rem; font-size: .82rem; color: var(--app-text-secondary);
}
.r7-note-lista { list-style: none; margin: 0; padding: 0 1rem .75rem; font-size: .82rem; color: var(--app-text-secondary); }
.r7-note-lista li + li { margin-top: .5rem; }
.r7-note-lista strong { color: var(--app-text-primary); }
@media print {
    .r7-note .collapse { display: block !important; }
    .r7-note .app-collapsible-chevron { display: none; }
}
/* ==== /AREA report contabilita progetto ==== */

/* ==== AREA liste contabilita (verifica Giacomo 27/09, colonne contabilita) ====
   Lista Quotazioni Trasporto: 11 colonne (vettore tra parentesi, ADR · S1 ·
   S2 · S3 sotto la somma, validita' su due righe). #5.37.13: a 1366 px col
   menu aperto la card offre ~957 px e le larghezze minime arrivavano a ~950:
   celle un filo piu' strette (0,25rem ai lati) per avere margine. Il
   prefisso body.app-body batte 'body.app-body .table td' (padding 1rem). */
body.app-body .app-table-compatta.app-lista-qt > :not(caption) > * > * { padding-left: .25rem; padding-right: .25rem; }
/* ==== /AREA liste contabilita ==== */

/* ==== BLOCCO 10 — FONDAMENTA (UI comune) ====================================
   Regole con il prefisso body.app-body o specificità >= 0,2,0: non devono
   dipendere dall'ordine nel file (trappola del #1.08, regola corretta
   annullata da una più in basso con la stessa specificità). */

/* (a) #10.01 — tasti a scelta (btn-check + label) PIENI quando scelti. Gli
   override `body.app-body .btn-outline-*` con background transparent
   !important (sopra) vincevano sulla regola Bootstrap: il tasto si
   riempiva solo in :focus/:active e poi tornava in contorno. Stessa
   soluzione del fix M9 (Attuale/Storico), estesa a tutte le varianti e
   agli stati hover/focus/active del tasto scelto. */
body.app-body .btn-check:checked + .btn-outline-success,
body.app-body .btn-check:checked + .btn-outline-success:hover,
body.app-body .btn-check:checked + .btn-outline-success:focus,
body.app-body .btn-check:checked + .btn-outline-success:active {
    background: #059669 !important; border-color: #059669 !important; color: #fff !important;
}
body.app-body .btn-check:checked + .btn-outline-danger,
body.app-body .btn-check:checked + .btn-outline-danger:hover,
body.app-body .btn-check:checked + .btn-outline-danger:focus,
body.app-body .btn-check:checked + .btn-outline-danger:active {
    background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important;
}
body.app-body .btn-check:checked + .btn-outline-warning,
body.app-body .btn-check:checked + .btn-outline-warning:hover,
body.app-body .btn-check:checked + .btn-outline-warning:focus,
body.app-body .btn-check:checked + .btn-outline-warning:active {
    background: #d97706 !important; border-color: #d97706 !important; color: #fff !important;
}
body.app-body .btn-check:checked + .btn-outline-info,
body.app-body .btn-check:checked + .btn-outline-info:hover,
body.app-body .btn-check:checked + .btn-outline-info:focus,
body.app-body .btn-check:checked + .btn-outline-info:active {
    background: #0284c7 !important; border-color: #0284c7 !important; color: #fff !important;
}
body.app-body .btn-check:checked + .btn-outline-primary,
body.app-body .btn-check:checked + .btn-outline-primary:hover,
body.app-body .btn-check:checked + .btn-outline-primary:focus,
body.app-body .btn-check:checked + .btn-outline-primary:active {
    background: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important;
}
body.app-body .btn-check:checked + .btn-outline-secondary,
body.app-body .btn-check:checked + .btn-outline-secondary:hover,
body.app-body .btn-check:checked + .btn-outline-secondary:focus,
body.app-body .btn-check:checked + .btn-outline-secondary:active {
    background: #64748b !important; border-color: #64748b !important; color: #fff !important;
}
/* anello di focus da tastiera sul tasto scelto, senza il bagliore chiaro */
body.app-body .btn-check:focus-visible + .btn {
    box-shadow: 0 0 0 .2rem rgba(148, 163, 184, .45) !important;
}

/* (b) #10.17-A — testata delle pagine: titolo a sinistra (può andare a
   capo), gruppo pulsanti SEMPRE in alto a destra. Causa del difetto: il
   contenitore è un flex con flex-wrap e il blocco del titolo non ha
   flex-basis, quindi la sua larghezza ipotetica è quella del sottotitolo
   su una riga: con un sottotitolo lungo (> ~185 caratteri) il gruppo dei
   pulsanti andava a capo e si allineava a SINISTRA. Vale per
   .page-header > .d-flex.justify-content-between (senza toccare i template)
   e per la classe nuova .app-testata sul div di testata dei template in
   stile report. Se il gruppo va comunque a capo, resta allineato a destra.
   Revisione F2: anche .page-header.d-flex.justify-content-between (il flex
   sullo stesso elemento: progetto_form, carico_form, detail_carico,
   modifica_elenchi), che il primo selettore non prendeva. */
.page-header > .d-flex.justify-content-between > :first-child,
.page-header.d-flex.justify-content-between > :first-child,
.app-testata > :first-child {
    flex: 1 1 20rem;
    min-width: 0;
    overflow-wrap: break-word;
}
.page-header > .d-flex.justify-content-between > :last-child:not(:first-child),
.page-header.d-flex.justify-content-between > :last-child:not(:first-child),
.app-testata > :last-child:not(:first-child) {
    flex: 0 1 auto;
    align-self: flex-start;
    margin-left: auto;
    justify-content: flex-end;
    text-align: right;
}
.app-testata {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
}
/* schede anagrafiche: sotto i 1200 px i pulsanti vanno su una riga
   propria (3.17.3) ma restano allineati a destra */
@media (max-width: 1199.98px) {
    .anag-scheda-header > .anag-scheda-azioni { justify-content: flex-end; }
}
/* #10.17 (controllo di completezza): sopra i 1200 px, a 1366 px col menu
   aperto il contenitore della scheda (col-xl-10) è ~775 px: titolo (base
   320 px) + 5 pulsanti non stanno su una riga, il gruppo va a capo e con
   space-between restava a SINISTRA sotto il titolo (schede e form Azienda /
   Sede, revisione RENTRI). margin-left:auto lo tiene sempre a destra. */
.anag-scheda-header > .anag-scheda-azioni { margin-left: auto; justify-content: flex-end; }

/* #10.17-C1 — intestazioni ordinabili: lo stile vive nel partial
   _partials/_ordinamento.html (inline, incluso nell'head da app_base). */

/* (#10.06) Riepilogo errori unico e messaggi di blocco (alert-banner scuri).
   Django 5.2 mette aria-invalid="true" sui campi con errore: bordo rosso
   senza toccare i template; per i select2 la casella visibile è subito
   dopo il <select>. */
.alert-banner.app-riepilogo-errori { scroll-margin-top: 5rem; }
.alert-banner.app-riepilogo-errori:focus { outline: none; }
.app-riepilogo-righe,
.app-avviso-righe {
    margin: .35rem 0 0;
    padding-left: 1.1rem;
    font-size: .85rem;
}
.app-riepilogo-righe li + li,
.app-avviso-righe li + li { margin-top: .15rem; }
.app-riepilogo-righe a,
.app-avviso-righe a { color: inherit; text-decoration: underline; }
.app-riepilogo-righe a:hover,
.app-avviso-righe a:hover { color: #fff; }
.app-riepilogo-compatto {
    display: inline-flex;
    align-items: center;
    color: #fca5a5;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}
.app-riepilogo-compatto:hover { color: #fecaca; text-decoration: underline; }
body.app-body input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
body.app-body select[aria-invalid="true"],
body.app-body textarea[aria-invalid="true"],
body.app-body select[aria-invalid="true"] + .select2-container .select2-selection {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 .15rem rgba(239, 68, 68, .2);
}
.alert-banner.app-avviso {
    align-items: center;
    padding: .6rem 1rem;
    margin-bottom: 1rem;
}
.alert-banner.app-avviso .alert-banner-icon { font-size: 1.15rem; }
.alert-banner.app-avviso .app-avviso-chiudi { flex: 0 0 auto; margin-left: auto; }
.alert-banner.app-avviso-vicino {
    flex-basis: 100%;
    width: 100%;
    margin: .5rem 0;
    text-align: left;
}

/* Finestra di conferma (_partials/_modal_conferma.html): tema scuro già da
   body.app-body .modal-content; qui solo icona e corpo. */
.app-conferma .app-conferma-icona--danger { color: #ef4444; }
.app-conferma .app-conferma-icona--warning { color: #f59e0b; }
.app-conferma .app-conferma-icona--success { color: #10b981; }
.app-conferma .app-conferma-icona--primary { color: #14b8a6; }
.app-conferma .app-conferma-corpo { color: var(--app-text-secondary); font-size: .9rem; }
.app-conferma .app-conferma-corpo:empty { display: none; }
/* ==== /BLOCCO 10 — FONDAMENTA (UI comune) ==== */

/* ==== BLOCCO 10 — REPORT (#10.01, #10.03) ==================================
   Report del lunedì: colonna risposta (Sì/No + nota) con sotto «chi ha
   risposto», riga in salvataggio, righe del Generale in ritardo. Report
   Notifiche: elenco «Righe nascoste» richiudibile. I tasti pieni Sì/No
   (btn-check:checked) sono già nel blocco FONDAMENTA. */
.app-report-risposta { max-width: 100%; }
.app-report-nota .form-control-sm { width: 160px; }
.app-report-chi {
    min-height: 1rem;
    margin-top: .2rem;
    font-size: .72rem;
    text-align: right;
}
.riga-report.app-report-salvataggio,
.riga-generale.app-report-salvataggio { opacity: .65; }
body.app-body .riga-generale.app-report-in-ritardo {
    background: rgba(220, 38, 38, 0.08);
}
.app-report-ultimo-consolidamento a { white-space: nowrap; }
.app-report-nascoste > summary {
    cursor: pointer;
    list-style: revert;
}
.app-report-nascoste[open] > summary { border-bottom: 1px solid var(--app-border-color); }
@media (max-width: 767.98px) {
    /* Su schermi stretti la risposta va sotto la domanda, senza sbordare. */
    .riga-report,
    .riga-generale { flex-wrap: wrap; }
    .app-report-risposta { width: 100%; }
    .app-report-nota { flex: 1 1 140px; }
    .app-report-nota .form-control-sm { width: 100%; }
    .app-report-chi { text-align: left; }
}
/* ==== /BLOCCO 10 — REPORT ==== */

/* ==== BLOCCO 10 — STATI (#10.04, #10.05) ===================================
   Finestra «dati presenti e mancanti» dell'iter (#2.21) e elenco dei
   passaggi successivi già spuntati nel «Sei sicuro?» del form progetto. */
.app-requisiti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem 1.25rem;
}
.app-requisiti-titolo {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--app-text-muted, #9ca3af);
    margin-bottom: .25rem;
}
.app-requisiti-elenco,
.app-passaggi-spuntati {
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: .85rem;
}
.app-requisiti-elenco li,
.app-passaggi-spuntati li { padding: .1rem 0; }
.app-passaggi-spuntati li::before {
    content: "\2713";
    margin-right: .4rem;
    color: var(--bs-success, #198754);
}
/* ==== /BLOCCO 10 — STATI ==== */

/* ==== BLOCCO 10 — FATTURAZIONE A (#10.10, #10.18) ==========================
   #10.10: termine di pagamento applicato, in grigio accanto alla scadenza
   «(30 gg)» (Fatture in uscita, scheda fattura, crea-fattura) e, nel report
   Fatturazione, la riga «scad. gg/mm/aaaa (30 gg)» sotto Data Fatt./Data
   Bal. (rossa se passata e non pagata).
   #10.18: azione quadrata gialla «Riporta a Creata» in Fatture in uscita. */
.app-termini-grigio {
    color: var(--app-text-secondary);
    font-size: .78em;
    font-weight: 400;
    margin-left: .25rem;
    white-space: nowrap;
}
.app-report6-scad {
    display: block;
    margin-top: .15rem;
    font-size: .72rem;
    line-height: 1.15;
    white-space: nowrap;
    color: var(--app-text-secondary);
}
.app-report6-scad.app-scaduta { color: #f87171; font-weight: 600; }
.app-act-warning { border-color: #d97706; color: #fbbf24; }
.app-act-warning:hover, .app-act-warning:focus { background: rgba(217, 119, 6, 0.18); color: #fcd34d; }
/* ==== /BLOCCO 10 — FATTURAZIONE A ==== */

/* ==== BLOCCO 10 — UI (#10.06, #10.07, #10.08, #10.09) =======================
   Specificità >= 0,2,0: non dipendono dall'ordine nel file. */

/* #10.06 — righe dei formset (contatti, autorizzazioni, trasporti) con
   errori: bordo rosso a sinistra, così la riga indicata dal riepilogo si
   trova subito anche in un elenco lungo. */
.row.app-formset-riga-errore,
.app-formset-riga-errore.cont-riga,
.app-formset-riga-errore.aut-riga {
    border-left: 3px solid #ef4444;
    padding-left: .5rem;
    border-radius: 2px;
    background: rgba(239, 68, 68, .06);
}
/* il richiamo «Non salvato: N problemi» vicino al Salva non deve spingere i
   pulsanti fuori dalla barra */
.d-flex > .app-riepilogo-compatto,
.d-flex .app-riepilogo-compatto { white-space: normal; }

/* #10.07 — pannello filtri: i menù a tendina non vengono MAI tagliati.
   Causa: `.app-card {overflow:hidden}` e soprattutto `.card, .app-card
   {overflow:hidden}` (sezione «Cards should adapt», più in basso nel file)
   annullavano il correttivo #1.08 `.app-card--overflow-visible` (stessa
   specificità 0,1,0, vince la regola più in basso). Qui 0,2,0.
   position + z-index: `.app-card` ha backdrop-filter (contesto di
   sovrapposizione), quindi senza z-index il menù finirebbe SOTTO la card
   della tabella che segue. 5 < topbar (100) < sidebar e modali (1000+). */
.app-card.app-filtri-pannello,
.card.app-filtri-pannello,
.app-card.app-card--overflow-visible {
    overflow: visible;
    position: relative;
    z-index: 5;
}
/* Regola globale anche senza la classe (liste della fatturazione, Cashflow
   e ogni pannello futuro che usa _partials/_filtri_azioni.html). Separata
   dalla precedente: un browser senza :has() scarterebbe l'intera lista. */
.app-card:has(.app-filtri-azioni),
.card:has(.app-filtri-azioni) {
    overflow: visible;
    position: relative;
    z-index: 5;
}
/* La colonna dei comandi Avanzati · Reset · Filtra non è mai più stretta
   del suo contenuto: a 1366 px con il menu aperto in alcune liste (es.
   Fatture in uscita) i pulsanti, allineati a destra in una col-lg-3,
   uscivano a sinistra e coprivano l'ultimo filtro. Se non ci sta, la
   colonna va a capo (la riga è flex-wrap). */
.row > *:has(> .app-filtri-azioni) {
    min-width: max-content;
}
/* menù lunghi (13 stati, 20+ referenti): altezza massima con scorrimento
   interno, niente scroll della pagina su una lista corta */
.dropdown-menu.filter-dd-menu {
    max-height: min(60vh, 24rem);
    overflow-y: auto;
}
/* Riga tra filtri normali e avanzati: UNA sola resa in tutte le liste
   (prima border-top / border-top border-secondary / <hr class="my-2">).
   Lo spazio sopra la riga lo dà il collapse (mt-3). */
.app-filtri-pannello .app-filtri-avanzati,
.collapse > .app-filtri-avanzati {
    border-top: 1px solid var(--app-border-color);
    padding-top: 1rem;
}
/* versione sulla .row: annulla il margine negativo della riga Bootstrap
   (in questa app il gutter verticale è 1.5rem per tutte le .row, anche con
   g-2) e porta il gutter a 1rem, così i campi stanno a 1rem dalla riga
   come nella lista Progetti (riferimento) */
.collapse > .app-filtri-avanzati.row {
    --bs-gutter-y: 1rem;
    margin-top: 0;
    padding-top: 0;
}
/* Revisione area UI (#10.07, verifica a 1366 px con il menu aperto): le
   coppie di date «da–al» (due input date in un .d-flex) non stanno in una
   colonna da 1/4. Il secondo campo copriva il filtro accanto (Progetti:
   «Fatturato da»; Offerte e Quotazioni: le date vicine; Fideiussioni e
   Note: la casella successiva) o usciva dal riquadro. La colonna non è mai
   più stretta della coppia; se non ci sta va a capo (la riga è flex-wrap).
   Regola da sola: un browser senza :has() la scarta e basta. */
.app-filtri-pannello .row > *:has(> .d-flex > input[type="date"] ~ input[type="date"]) {
    min-width: max-content;
}

/* #10.08 — casella «Nessuna» subito sotto il menù Transito del form
   progetto: senza lo spazio delle checkbox allineate ai campi (mt-md-4). */
.app-transito-nessuna > .form-check {
    margin-top: -.5rem !important;
}

/* Fatture in uscita (#5.37.13, segnalato dalla revisione dell'ondata 1): a
   1366 px con il menu aperto la tabella sbordava. Fino a 7 azioni quadrate
   per riga: vanno su due righe da 4 invece di allargare la colonna. */
.app-table-fit td.app-lista-fatture-azioni > .app-actions {
    flex-wrap: wrap;
    white-space: normal;
    max-width: 8.75rem;
    margin: 0 auto;
}
/* ==== /BLOCCO 10 — UI ==== */

/* ==== BLOCCO 10 — FATTURAZIONE B (#10.16, #10.17, #10.19) ==================
   Seleziona viaggi (13 colonne a 1366 px con il menù aperto, nessuno
   scorrimento orizzontale: tabella compatta, note troncate con tooltip),
   badge T. Sec. accanto a Q. Reale nella scheda progetto, box e fasce
   chiudibili del Cashflow. Specificità >= 0,2,0 o prefisso body.app-body:
   non dipendono dall'ordine nel file. */
body.app-body .sel-viaggi-table { font-size: .8rem; }
body.app-body .sel-viaggi-table > :not(caption) > * > * { padding: .35rem .3rem; }
.sel-viaggi-table th { white-space: nowrap; }
.sel-viaggi-table .sel-col-check { width: 2rem; text-align: center; }
.sel-viaggi-table .sel-col-apri { width: 2.2rem; text-align: center; }
.sel-viaggi-table td.sel-col-nota {
    max-width: 11rem;
    overflow-wrap: anywhere;
    line-height: 1.2;
}
.sel-viaggi-table .badge { font-size: .72rem; }
/* Revisione blocco 10: numero fideiussione (fino a 21 caratteri) a capo
   dentro il badge, così la colonna non allarga la tabella. */
.sel-viaggi-table .badge.sel-fid {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 6.5rem;
    text-align: left;
    line-height: 1.15;
}
.sel-viaggi-table .sel-delta-pos { color: #34d399; font-weight: 600; }
.sel-viaggi-table .sel-delta-neg { color: #f87171; font-weight: 600; }

/* Scheda progetto: input Q. Reale + badge verde T. Sec. su UNA riga (il
   badge sta fuori da .qty-real-slot, che rebuildQtyCell riscrive). */
.scheda-carichi-table .scheda-qreale-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    white-space: nowrap;
}
.scheda-carichi-table .qty-real-slot { display: inline-block; }

/* Cashflow: testate cliccabili (box società e fasce), chiuse di default. */
.cf-box .cf-box-testa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .75rem;
}
.cf-box .cf-box-testa:focus-visible,
.cf-tabella tr.app-row-fascia:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: -2px;
}
.cf-tabella tr.app-row-fascia { cursor: pointer; }
.cf-tabella tr.app-row-fascia[id] { scroll-margin-top: 5rem; }
.cf-box .cf-box-totali { text-align: right; }
.cf-asterisco { color: #fbbf24; font-weight: 700; margin-left: 1px; cursor: help; }
/* Tabelle compatte: con le frecce dell'ordinamento su 10-11 colonne la
   tabella di Da pagare superava la card a 1366 px con il menù aperto. */
body.app-body .cf-tabella > :not(caption) > * > * { padding: .35rem .3rem; }
body.app-body .cf-tabella th { font-size: .72rem; }
.cf-tabella td.cf-col-note,
.cf-tabella th.cf-col-note { min-width: 7rem; }
.cf-tabella td.cf-col-note .form-control { min-width: 6.5rem; }
/* ==== /BLOCCO 10 — FATTURAZIONE B ==== */