/* ==========================================
   GLOBAL STYLESHEET — foundations / components / page styles
   Unified CSS for all MiFID pages
   ========================================== */
/* ==========================================
   CSS VARIABLES & COLOR SYSTEM
   ========================================== */
:root {
    /* Brand vars — FULL fallback set, mirrors DEFAULT_TENANT.
       OVERWRITTEN by mifid/_tenant_brand.html, which is always included
       after this stylesheet. Keep ALL the same vars here so the UI degrades
       gracefully even when the tenant cascade fails (e.g. an ScfData record
       with empty fields, a missing context processor on a new dev's machine,
       a standalone page that forgets to include the partial). Values must
       stay in sync with advisor/mifid/tenancy/defaults.py. */
    --contract-primary:      #475569;        /* slate-600 */
    --contract-primary-dark: #28303b;        /* DefaultTenant.primary_color_dark */
    --contract-primary-light:#8494ac;        /* DefaultTenant.primary_color_light */
    --brand-primary-rgb:     71, 85, 105;    /* matches #475569 for rgba() use */
    --brand-on-primary:      #ffffff;        /* white text on slate bg (WCAG OK) */
    --brand-on-light:        #28303b;        /* slate-dark text on white card */
    --brand-secondary:       #334155;        /* slate-700 decorative */
    --brand-accent:          #64748b;        /* slate-500 decorative */
    --brand-gradient-start:  #475569;        /* = primary */
    --brand-gradient-end:    #28303b;        /* = primary_color_dark */
    --bs-primary:            #475569;        /* Bootstrap utility classes */

    /* Digital-onboarding theme palette — light defaults. The html.tenant-theme-dark
       override is applied by _tenant_brand.html (dark theme remains tenant-driven). */
    --do-bg:                  #f8fafc;
    --do-card-bg:             #ffffff;
    --do-text:                #1e293b;
    --do-text-muted:          #475569;
    --do-progress-track-bg:   rgba(0, 0, 0, 0.08);
    --do-progress-track-border: rgba(0, 0, 0, 0.12);

    /* Semantic palette — NOT brand-overridable.
       Success/info/warning/privacy are universal status colors, not tenant-customizable.
       Kept hardcoded here as the single source of truth for status styling. */
    --contract-success-bg: #ecfdf5;
    --contract-success-color: #059669;
    --contract-success-border: #10b981;

    --contract-info-bg: #eff6ff;
    --contract-info-color: #2563eb;
    --contract-info-border: #3b82f6;

    --contract-warning-bg: #fffbeb;
    --contract-warning-color: #d97706;
    --contract-warning-border: #f59e0b;

    --contract-privacy-bg: #faf5ff;
    --contract-privacy-color: #7c3aed;
    --contract-privacy-border: #8b5cf6;

    /* Danger completa la serie: mancava, e i due punti che avevano bisogno del
       rosso di stato (`.status-missing`, `.pmf-table-btn` in errore) se lo sono
       scritti a mano. Stessa scala degli altri (bg tenue → color testo →
       border). */
    --contract-danger-bg: #fef2f2;
    --contract-danger-color: #b91c1c;
    --contract-danger-border: #ef4444;

    /* Grays */
    --contract-gray-50: #f9fafb;
    --contract-gray-100: #f3f4f6;
    --contract-gray-200: #e5e7eb;
    --contract-gray-300: #d1d5db;
    --contract-gray-600: #6b7280;
    --contract-gray-700: #374151;
    --contract-gray-900: #1f2937;

    /* Semantic grays */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;

    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;

    /* Note: --do-* (digital-onboarding theme) vars live in mifid/_tenant_brand.html
       so they're available even on standalone pages (verify_otp) that load only
       this stylesheet without the rest of mifid-complete.css cascade. */

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* Transitions */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.2s ease;
    --transition-slow: all 0.3s ease;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 50%;
}
/* ==========================================
   RESET & BASE STYLES
   ========================================== */

.app-body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html {
    scroll-behavior: smooth;
}
/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Transitions */

/* Border radius */

/* Hover effects */


/* Container utilities */
.app-container {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}


/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }

/* Border utilities */




/* Size utilities */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* Overflow utilities */
/* ==========================================
   APP HEADER (shell)
   ========================================== */

/* .app-header {
    background: #2d3748;
    border-bottom: 1px solid #4a5568;
    position: sticky;
    top: 0;
    z-index: 1020;
} */

/* Navbar/header — theme-aware (light by default, dark via html.tenant-theme-dark).
   Same theme switch as the auth pages: tenant.login_theme drives both. */
.app-header {
    /* Light theme defaults */
    --nav-bg: #ffffff;
    --nav-border: #e5e7eb;
    --nav-icon-bg: #4a5568;
    --nav-icon-color: #e2e8f0;
    --nav-icon-hover-bg: #5a6c7d;
    --nav-icon-hover-color: #ffffff;
    --nav-account-bg: #4a5568;
    --nav-account-color: #e2e8f0;
    --nav-account-border: #5a6c7d;
    --nav-account-hover-bg: #5a6c7d;
    --nav-account-hover-border: #6b7c8d;

    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

html.tenant-theme-dark .app-header {
    --nav-bg: #0f172a;            /* slate-950 */
    --nav-border: #334155;        /* slate-700 */
    --nav-icon-bg: transparent;
    --nav-icon-color: #e2e8f0;    /* slate-200 */
    --nav-icon-hover-bg: #334155; /* slate-700 */
    --nav-icon-hover-color: #ffffff;
    --nav-account-bg: transparent;
    --nav-account-color: #e2e8f0;
    --nav-account-border: #334155;
    --nav-account-hover-bg: #334155;
    --nav-account-hover-border: #475569;
}

.app-header .navbar {
    padding: 1rem 0;
}

.app-header .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.app-logo {
    height: 28px;
    width: auto;
    transition: var(--transition-base);
}

.app-logo:hover {
    transform: scale(1.05);
}
/* ==========================================
   NAVIGATION ELEMENTS
   ========================================== */

/* Unified icon button style */
.app-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--nav-icon-bg);
    color: var(--nav-icon-color);
    text-decoration: none;
    font-size: 1.1rem;
    position: relative;
    transition: var(--transition-base);
    border-radius: var(--radius-full) !important;
}

.app-nav-icon:hover {
    background: var(--nav-icon-hover-bg);
    color: var(--nav-icon-hover-color);
    transform: translateY(-1px);
}

.app-nav-icon.dropdown-toggle::after {
    display: none;
}

.app-notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: var(--radius-full) !important;
}

/* Account button */
.app-account-btn {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--nav-account-bg);
    border: 1px solid var(--nav-account-border);
    text-decoration: none;
    color: var(--nav-account-color);
    font-weight: 500;
    transition: var(--transition-base);
    border-radius: var(--radius-md) !important;
}

.app-account-btn:hover {
    background: var(--nav-account-hover-bg);
    border-color: var(--nav-account-hover-border);
    color: var(--nav-icon-hover-color);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Unified avatar styles */
.avatar, .app-user-avatar {
    background: var(--contract-primary) !important;
    color: var(--brand-on-primary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600 !important;
    text-transform: uppercase;
    border-radius: var(--radius-full);
}

.avatar {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
}

.avatar.avatar-xs,
.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.app-user-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
    margin-right: 10px;
}

.avatar {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

.app-user-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e2e8f0;
}

/* Dropdown + notification list styles moved to:
     frontend/css/components/dropdowns.css   (shared .app-dropdown)
     frontend/css/notifications/notifications.css  (.notif-* + .notif-dd-*)
   Trigger button styles (.app-account-btn, .app-nav-icon, badge) and
   avatar styles stay here because they style the navbar trigger surfaces. */

/* Login button */
.app-login-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--contract-primary-dark);
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition-base);
}

.app-login-btn:hover {
    background: #1d4ed8;
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Mobile navbar */
.navbar-toggler {
    border: none;
    padding: 8px;
    background: #4a5568;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28226, 232, 240, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler.active .navbar-toggler-icon {
    transform: rotate(90deg);
    transition: var(--transition-slow);
}



.app-mobile-action {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: white;
    color: var(--contract-gray-700);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-fast);
}

.app-mobile-action:hover {
    background: var(--bg-tertiary);
    color: var(--contract-primary-dark);
    text-decoration: none;
}

.app-mobile-action.text-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}
/* ==========================================
   MAIN CONTENT & LAYOUT
   ========================================== */

.app-main {
    flex: 1;
    padding: 0;
    background-color: var(--bg-secondary);
}


.app-messages .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 1rem;
}

.app-footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-primary);
    padding: var(--spacing-xl) 0;
    margin-top: auto;
}

.app-footer .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
}

.app-footer p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}
/* ==========================================
   UNIFIED BUTTON SYSTEM
   ========================================== */

/* Base button styles — visual properties apply at all sizes.
   The canonical action buttons (primary/success/outline-primary) share ONE
   house size so filled and outline variants never differ in height. */
.btn-primary,
.btn-success,
.btn-outline-primary,
.pmf-createnewclient-button,
.pmf-table-btn,
.pmf-form-button,
.pmf-form-button-save {
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

/* Default padding — skip .btn-sm so Bootstrap's small-size padding wins
   when callers explicitly opt into compact buttons. */
.btn-primary:not(.btn-sm),
.btn-success:not(.btn-sm),
.btn-outline-primary:not(.btn-sm),
.pmf-createnewclient-button:not(.btn-sm),
.pmf-table-btn,
.pmf-form-button,
.pmf-form-button-save {
    padding: 0.75rem 1.5rem;
}

.btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--brand-on-light) !important;
    color: var(--brand-on-light) !important;
}

.btn-outline-primary:hover {
    background: var(--brand-on-light) !important;
    border-color: var(--brand-on-light) !important;
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-1px);
}

.pmf-createnewclient-button,
.pmf-table-btn {
    background: var(--contract-primary) !important;
    border: 1px solid var(--contract-primary) !important;
    color: var(--brand-on-primary) !important;
}

.pmf-createnewclient-button:hover,
.pmf-table-btn:hover {
    background: var(--contract-primary-dark) !important;
    border-color: var(--contract-primary-dark) !important;
    color: var(--brand-on-primary) !important;
    text-decoration: none;
    transform: translateY(-1px);
}

.pmf-table-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.pmf-form-button {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    color: #475569 !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
}

.pmf-form-button:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    transform: translateY(-1px) !important;
}

.pmf-form-button-save {
    background: var(--contract-primary) !important;
    border: none !important;
    color: var(--brand-on-primary) !important;
    padding: 10px 16px !important;
}

.pmf-form-button-save:hover {
    transform: translateY(-1px) !important;
}


/* Focus styles for accessibility */
.app-nav-icon:focus,
.app-account-btn:focus,
.app-login-btn:focus,
.pmf-createnewclient-button:focus,
.pmf-table-btn:focus {
    outline: 2px solid var(--contract-primary-dark);
    outline-offset: 2px;
}
/* ==========================================
   UNIFIED CARD SYSTEM
   ========================================== */

.card,
.pmf-card,
.pmf-card-bg,
.contract-card,
.info-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    transition: var(--transition-base);
}

/* !important: overrides Bootstrap's .shadow-sm/.shadow utilities, which ship
   box-shadow as !important themselves. */
.card:hover,
.pmf-card:hover {
    box-shadow: var(--shadow-md) !important;
}

.pmf-card.h-100 {
    transition: var(--transition-slow);
}

.pmf-card.h-100:hover {
    box-shadow: var(--shadow-md) !important;
}

/* Card with left border accent */
.contract-card,
.info-card {
    border-left: 3px solid var(--contract-gray-300);
    padding: 1.25rem var(--spacing-lg);
    margin-bottom: 1.25rem;
}
/* ==========================================
   UNIFIED BADGE & STATUS SYSTEM
   ========================================== */

.badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.text-primary {
    color: var(--contract-primary-dark) !important;
}

/* Status badges */
.status-badge {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem !important;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}


.status-completed {
    background: #dcfce7;
    color: #166534;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

/* Dai token, da quando esistono: era l'unico rosso di stato scritto a mano in
   questo blocco. `.status-completed` e `.status-pending` sopra restano coi loro
   hex di proposito — sono rese in lista clienti, e cambiarne il valore sarebbe
   un cambio visivo, non una pulizia. */
.status-missing {
    background: var(--contract-danger-bg);
    color: var(--contract-danger-color);
}

.status-badge:hover {
    transform: translateY(-2px);
}

.badge.bg-success {
    background: var(--contract-success-border) !important;
}

.badge.bg-warning {
    background: var(--contract-warning-border) !important;
    color: white !important;
}

.badge.bg-primary {
    background: var(--contract-primary) !important;
}

/* Contract status */
.status-yes {
    background: var(--contract-success-bg);
    color: var(--contract-success-color);
    border: 2px solid var(--contract-success-border);
}

.status-no {
    background: var(--contract-gray-100);
    color: var(--contract-gray-600);
    border: 2px solid var(--contract-gray-300);
}
/* ==========================================
   FORM STYLES
   ========================================== */

.nav-tabs {
    border-bottom: 2px solid var(--border-primary) !important;
    margin-bottom: var(--spacing-xl);
}

.nav-tabs .nav-link {
    border: none !important;
    margin-bottom: -2px;
    padding: 12px 20px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    transition: var(--transition-base) !important;
    position: relative;
}

.nav-tabs .nav-link:hover {
    background: var(--bg-tertiary) !important;
    color: #475569 !important;
}

.nav-tabs .nav-link.active {
    background: white !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--contract-primary) !important;
    font-weight: 600 !important;
}

.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--contract-primary);
}

.section-title text::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--contract-primary);
    margin-right: 0.75rem;
    display: inline-block;
}

.section-title hr,
.section-header {
    border: none !important;
    height: 1px !important;
    background: var(--border-primary) !important;
    margin: var(--spacing-xs) 0 var(--spacing-lg) 0 !important;
}

.section-header.main-section {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.pmf-label {
    font-weight: 500 !important;
    color: var(--contract-gray-700) !important;
    margin-bottom: var(--spacing-xs) !important;
}

.form-control,
.form-select {
    border: 1px solid var(--contract-gray-300) !important;
    padding: 10px 12px !important;
    transition: var(--transition-base) !important;
    font-size: 0.95rem !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--contract-primary) !important;
}

.form-control:hover,
.form-select:hover {
    border-color: #9ca3af !important;
}

/* Provincia imposta a "EE": il luogo è estero, non c'è una provincia da
   scegliere. Il select resta abilitato — un <select disabled> non verrebbe
   inviato nel POST — quindi il blocco va reso visibile. */
.form-select.provincia-estero {
    background-color: var(--contract-gray-100, #f3f4f6) !important;
    cursor: not-allowed;
}

span[style*="color:red"] {
    color: #ef4444 !important;
    font-weight: 600;
}

#row-domicilio,
#row-corrispondenza {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    padding: var(--spacing-lg);
    margin-top: 1rem;
    transition: var(--transition-slow);
}

.tab-content {
    min-height: 300px;
    padding-top: 20px;
}

.tab-pane {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.tab-pane.active {
    opacity: 1;
}
/* ==========================================
   MODAL STYLES
   ========================================== */

.modal-content {
    border: none;
}

/* Senza bordo NÉ ombra la modale si confonde con la pagina sotto: su fondo chiaro
   il pannello bianco non ha alcuno stacco. Variante opt-in invece di cambiare
   `.modal-content` per tutta l'app (sarebbe un ridisegno di ogni modale). */
.modal-content--raised {
    border: 1px solid var(--border-primary);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

.modal-header {
    border-bottom: 1px solid var(--border-primary);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
}

.modal-body {
    padding: var(--spacing-lg);
    color: var(--contract-gray-700);
    line-height: 1.6;
}

.modal-footer {
    border-top: 1px solid var(--border-primary);
    padding: 1rem var(--spacing-lg);
    background: var(--bg-secondary);
}

#uploadConfirmModal .modal-header,
#editConfirmModal .modal-header {
    background: var(--bg-secondary);
}

#uploadConfirmModal .btn-warning {
    background: var(--contract-warning-border);
    border: none;
    color: white;
    font-weight: 600;
    padding: var(--spacing-xs) 1rem;
    transition: var(--transition-base);
}

#uploadConfirmModal .btn-warning:hover,
#editConfirmModal .btn-primary:hover {
    transform: translateY(-1px);
}

#editConfirmModal .btn-primary {
    background: var(--contract-primary);
    border: none;
    color: white;
    font-weight: 600;
    padding: var(--spacing-xs) 1rem;
    transition: var(--transition-base);
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}
/* ==========================================
   ASSIGN CLIENTS MODAL
   ========================================== */

/* Container lista clienti con scroll */
.client-selection-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
}

/* Singolo item cliente nella lista */
.client-checkbox-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-primary);
    transition: var(--transition-fast);
    cursor: pointer;
}

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

.client-checkbox-item:hover {
    background: var(--bg-secondary);
}

/* Checkbox custom styling */
.client-checkbox-item .form-check-input {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--border-secondary);
    border-radius: 4px;
}

.client-checkbox-item .form-check-input:checked {
    background-color: var(--contract-primary);
    border-color: var(--contract-primary);
}

.client-checkbox-item .form-check-input:focus {
    border-color: var(--contract-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25);
}

.client-checkbox-item .form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Label dentro checkbox item */
.client-checkbox-item .form-check-label {
    flex: 1;
    margin: 0;
    cursor: pointer;
}

/* Avatar nel modal */
.client-checkbox-item .avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--contract-primary) 0%, var(--contract-primary-dark) 100%);
    color: white;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.875rem;
}

/* Info cliente nel modal */
.client-checkbox-item .fw-600 {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.client-checkbox-item small.text-muted {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Badge "già assegnato" */
.client-checkbox-item .badge.bg-warning {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    white-space: nowrap;
}

/* Stato disabled dell'item */
.client-checkbox-item:has(.form-check-input:disabled) {
    opacity: 0.7;
    cursor: not-allowed;
}

.client-checkbox-item:has(.form-check-input:disabled):hover {
    background: transparent;
}

/* Search input nel modal */
#clientSearchModal {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

#clientSearchModal:focus {
    border-color: var(--contract-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.15);
    outline: none;
}

/* Counter clienti selezionati */
#selectedClientsCount {
    font-weight: 600;
    color: var(--contract-primary);
}

/* Scrollbar custom per la lista */
.client-selection-list::-webkit-scrollbar {
    width: 6px;
}

.client-selection-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.client-selection-list::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 3px;
}

.client-selection-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}
/* ==========================================
   CONSULTANT ACTION BUTTONS
   ========================================== */

/* Container bottoni azioni */
.consultant-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Bottone base azioni consulente */
.consultant-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition-fast);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

.consultant-action-btn i {
    font-size: 1rem;
}

.consultant-action-btn span {
    margin-left: 0.375rem;
}

/* Bottone Assegna - Primary */
.consultant-action-btn.action-assign {
    background: var(--contract-primary);
    color: white;
    border-color: var(--contract-primary);
}

.consultant-action-btn.action-assign:hover {
    background: var(--contract-primary-dark);
    border-color: var(--contract-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.3);
}

/* Bottone Pausa - Warning */
.consultant-action-btn.action-pause {
    background: transparent;
    color: var(--contract-warning-color);
    border-color: var(--contract-warning-border);
}

.consultant-action-btn.action-pause:hover {
    background: var(--contract-warning-bg);
    transform: translateY(-1px);
}

/* Bottone Pausa quando account è in pausa - mostra play */
.consultant-action-btn.action-pause.is-paused {
    background: var(--contract-warning-bg);
    color: var(--contract-success-color);
    border-color: var(--contract-success-border);
}

.consultant-action-btn.action-pause.is-paused:hover {
    background: var(--contract-success-bg);
}

/* Bottone Dettagli - Secondary */
.consultant-action-btn.action-view {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-secondary);
}

.consultant-action-btn.action-view:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
    transform: translateY(-1px);
}

.consultant-action-btn.action-remove {
    background: transparent;
    color: var(--bs-danger, #dc3545);
    border-color: var(--bs-danger, #dc3545);
}

.consultant-action-btn.action-remove:hover {
    background: var(--bs-danger, #dc3545);
    color: #fff;
    transform: translateY(-1px);
}

/* Spinner loading state */
.consultant-action-btn .spinner-border {
    width: 1rem;
    height: 1rem;
}

/* Tooltip custom per i bottoni */
.consultant-action-btn[title] {
    position: relative;
}
/* ==========================================
   PROGRESS BARS
   ========================================== */

.completion-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.completion-progress-bar {
    width: 120px;
    height: 8px;
    background: var(--border-primary);
    overflow: hidden;
}

.completion-progress-fill {
    height: 100%;
    background: #28a745 !important;
    transition: width 0.5s ease;
}

.completion-percentage-text {
    font-weight: 600;
    color: var(--contract-gray-700);
    font-size: 0.875rem;
    min-width: 40px;
}
/* ==========================================
   SEARCH & TABLE STYLES
   ========================================== */

.client-search-container {
    position: relative;
    max-width: 400px;
}

.client-search-input {
    padding: 0.75rem 1rem;
    padding-right: 3rem;
    border: 1px solid var(--contract-gray-300);
    font-size: 0.875rem;
    transition: var(--transition-base);
}

.client-search-input:focus {
    outline: none;
    border-color: var(--contract-primary-dark);
}

.client-search-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.status-grid-inline {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.header-text {
    font-weight: 600;
    color: var(--contract-gray-700);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table thead th {
    vertical-align: middle;
    border-bottom: 2px solid var(--border-primary);
}

.table thead th:first-child {
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
}

.table thead th:not(:first-child) {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.table tbody td:first-child {
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
}

.table tbody td:not(:first-child) {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.sortable-header {
    cursor: pointer;
    user-select: none;
    transition: var(--transition-base);
}

.sortable-header:hover {
    color: var(--contract-primary-dark);
}

.sort-icons {
    display: flex;
    flex-direction: column;
    margin-left: 0.25rem;
}

.sort-up,
.sort-down {
    font-size: 0.625rem;
    color: #9ca3af;
    line-height: 1;
}

.sort-active .sort-up,
.sort-active .sort-down {
    color: var(--contract-primary-dark);
}
/* ==========================================
   ANIMATIONS
   ========================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gentle-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

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

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}
/* ============================
   PASSWORD TOGGLE
   ============================ */

.password-input-wrapper {
    position: relative;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--auth-text-muted);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.password-toggle-btn:hover {
    color: var(--auth-text);
    transform: translateY(-50%) scale(1.1);
}

.password-toggle-btn:focus {
    outline: none;
    color: var(--auth-text);
}

.password-toggle-btn i {
    font-size: 1.2rem;
}

/* Adjust input padding to make room for toggle button */
.password-input-wrapper .auth-form-control {
    padding-right: 45px;
}
/* ==========================================
   CLIENT DETAILS PAGE STYLES
   ========================================== */

.client-details-container,




/* Timeline component */




/* Mobile responsiveness */
@media (max-width: 768px) {
    .client-details-gap-fix {
        flex-direction: column;
    }

    .client-details-gap-fix > * {
        width: 100%;
    }
}
/* ==========================================
   CLIENT SECTIONS MENU
   ========================================== */





.client-section-item:hover .section-arrow {
    transform: translateX(4px);
    color: var(--contract-primary);
}

.section-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-right: 1rem;
    transition: var(--transition-base);
}

.section-icon-primary {
    background: #eef2ff;
    color: var(--contract-primary);
}

.section-icon-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.section-icon-warning {
    background: #fef3c7;
    color: var(--contract-warning-border);
}

.section-icon-success {
    background: #d1fae5;
    color: var(--contract-success-border);
}

.section-icon-info {
    background: #dbeafe;
    color: var(--contract-primary);
}

.client-section-item:hover .section-icon {
    transform: scale(1.05);
}

.section-content {
    flex: 1;
}

.section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.section-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.section-arrow {
    color: var(--text-tertiary);
    font-size: 1.1rem;
    transition: var(--transition-base);
}
/* ==========================================
   QUESTIONNAIRE STYLES
   ========================================== */



.questionnaire-status .badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
}

.questionnaire-info .badge.bg-info {
    background: #0ea5e9 !important;
    color: white;
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
}

.questionnaire-card .pmf-actions-link,
.pmf-actions-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--contract-primary);
    text-decoration: none;
    transition: var(--transition-base);
}

.questionnaire-card .pmf-actions-link:hover,
.pmf-actions-link:hover {
    background: var(--contract-primary);
    color: white;
    transform: scale(1.1);
}

.pmf-actions-link {
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    color: var(--contract-gray-600);
    font-size: 0.875rem;
    border-radius: var(--radius-md);
}

.pmf-actions-link:hover {
    background: var(--border-primary);
    color: var(--contract-gray-700);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Risk Profile Badges */







/* Current/Historical questionnaires */



.historical-questionnaire-item {
    background: var(--bg-secondary);
}

/* ==========================================
   MIFID QUESTIONNAIRE PAGE
   ========================================== */

.mifid-questionnaire-container {
    max-width: 100%;
}

.questionnaire-header {
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-primary);
}

.questionnaire-title .title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
}

.step-counter {
    background: var(--contract-primary-dark);
    color: white;
    padding: 0.75rem var(--spacing-lg);
    font-weight: 600;
    font-size: 0.9rem;
}

.mifid-questionnaire-card {
    overflow: hidden;
    background: white;
}

.questionnaire-card-header {
    background: var(--text-primary);
    border: none;
    padding: var(--spacing-lg) var(--spacing-xl);
    color: white;
}

.questionnaire-progress {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.questionnaire-progress-bar {
    background: var(--contract-success-border);
    transition: width 0.5s ease;
}

.progress-text {
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.pmf-mifid-btn-option {
    background: var(--bg-secondary);
    border: 2px solid var(--border-primary);
    border-radius: 8px;
    color: var(--contract-gray-700);
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    padding: 1.25rem var(--spacing-lg);
    transition: var(--transition-slow);
    position: relative;
    overflow: hidden;
}

.pmf-mifid-btn-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(var(--brand-primary-rgb), 0.05);
    transition: left 0.5s ease;
}

.pmf-mifid-btn-option:hover::before {
    left: 100%;
}

.pmf-mifid-btn-option:hover {
    border-color: var(--contract-primary);
    background: #dbeafe;
    transform: translateY(-2px);
}

.pmf-mifid-btn-option.selected {
    background: var(--contract-primary);
    border-color: #1d4ed8;
    color: white;
    transform: scale(1.02);
}

.pmf-mifid-question {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: var(--spacing-xl);
    line-height: 1.4;
}

.main-illustration {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.1));
    transition: var(--transition-slow);
}

.main-illustration:hover {
    transform: scale(1.05);
}

.questionnaire-card-footer {
    background: var(--bg-secondary);
    border: none;
    padding: var(--spacing-lg) var(--spacing-xl);
}

.questionnaire-nav-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.questionnaire-btn {
    padding: 0.75rem var(--spacing-xl);
    font-weight: 600;
    border: none;
    transition: var(--transition-slow);
    cursor: pointer;
    font-size: 0.95rem;
    min-width: 140px;
}

.questionnaire-btn-back {
    background: var(--bg-tertiary);
    color: #475569;
    border: 1px solid var(--border-primary);
}

.questionnaire-btn-back:hover, .questionnaire-btn-secondary:hover, .questionnaire-btn-submit:hover {
    transform: translateY(-2px);
}


.questionnaire-btn-secondary {
    background: var(--contract-primary);
    color: white;
}

.questionnaire-btn-submit {
    background: var(--contract-success-border);
    color: white;
}

/* Choice Cards */
.choice-card {
    border-color: var(--border-primary) !important;
    transition: var(--transition-slow);
    cursor: pointer;
}

.choice-card:hover {
    border-color: var(--contract-primary) !important;
    transform: translateY(-2px);
}

.choice-option[data-choice="start-questionnaire"] .choice-card:hover {
    border-color: var(--contract-success-border) !important;
}

.choice-option[data-choice="generate-link"] .choice-card:hover {
    border-color: var(--contract-primary) !important;
}

.choice-icon {
    transition: var(--transition-base);
}

.choice-card:hover .choice-icon {
    transform: scale(1.1);
}

.continue-highlight {
    animation: gentle-pulse 2s ease-in-out infinite;
}

.continue-highlight:hover {
    animation: none;
    transform: scale(1.05) !important;
}

@media (max-width: 768px) {
    .questionnaire-header {
        padding: var(--spacing-lg);
    }

    .questionnaire-title .title {
        font-size: 1.5rem;
    }

    .pmf-mifid-question {
        font-size: 1.2rem;
    }

    .main-illustration {
        width: 60px;
        height: 60px;
    }

    .questionnaire-nav-buttons {
        flex-direction: column;
    }

    .questionnaire-btn {
        width: 100%;
    }
}
/* ==========================================
   QUESTIONNAIRE DETAIL STYLES
   ========================================== */

/* Profile Card */






/* Section Navigation */

.questionnaire-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: max-content;
}





/* Integrated Nav with Profile Badge */

.questionnaire-nav-integrated .questionnaire-nav {
    align-items: center;
}







/* Hide old large profile card when using integrated nav */

/* Sections Container */

/* Accordion styles */

/* Individual Section */

/* Section Header */


/* Accordion chevron */

.q-accordion-item.expanded .q-accordion-chevron {
    transform: rotate(180deg);
}

/* Accordion body - collapsed by default */

.q-accordion-item.expanded .q-accordion-body {
    max-height: 5000px;
}

.q-accordion-item.expanded .q-section-header {
    border-bottom: 1px solid var(--border-primary);
}


.questionnaire-section .q-section-icon.bg-primary { background: var(--contract-primary); }
.questionnaire-section .q-section-icon.bg-info { background: var(--contract-info-color); }
.questionnaire-section .q-section-icon.bg-success { background: var(--contract-success-color); }
.questionnaire-section .q-section-icon.bg-warning { background: var(--contract-warning-color); }
.questionnaire-section .q-section-icon.bg-danger { background: #dc3545; }
.questionnaire-section .q-section-icon.bg-secondary { background: var(--text-secondary); }
.questionnaire-section .q-section-icon.bg-dark { background: var(--text-primary); }



/* Questions Container */
.section-questions {
    padding: 0;
}

/* Question Card */



.question-number {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}


.question-text {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}


/* Answer Badges */
.answer-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.answer-badge.answer-yes {
    background: var(--contract-success-bg);
    color: var(--contract-success-color);
}

.answer-badge.answer-no {
    background: #fef2f2;
    color: #dc2626;
}

.answer-badge.answer-empty {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

/* Answer Text (for non-boolean answers) */

/* Responsive adjustments */
@media (max-width: 768px) {
    .questionnaire-profile-card {
        padding: 1.5rem;
    }

    .profile-card-content {
        flex-direction: column;
        text-align: center;
    }

    .profile-value {
        font-size: 1.5rem;
    }

    .questionnaire-nav-item span {
        display: none;
    }

    .questionnaire-nav-item {
        padding: 0.75rem;
    }

    .questionnaire-nav-item i {
        font-size: 1.25rem;
    }

    .questionnaire-section .q-section-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .questionnaire-section .q-section-title {
        flex: 0 0 100%;
        order: 2;
        font-size: 1rem;
    }

    .questionnaire-section .q-section-count {
        order: 3;
    }

    .question-card {
        padding: 1rem;
    }

    .question-text {
        font-size: 0.9rem;
    }
}
/* ==========================================
   QUESTIONNAIRE DETAIL - ENHANCED NAVIGATION
   ========================================== */

/* Sticky Navigation Bar */


/* Active nav item (scrollspy) */
.questionnaire-nav-item.active {
    background: var(--contract-primary);
    color: white;
    border-color: var(--contract-primary);
}

.questionnaire-nav-item.active i {
    color: white;
}

/* Search Input in Navigation */





/* Quick Action Buttons */




/* Section with matches highlight */

/* Question match highlight */

.question-card.search-match .question-text {
    color: var(--text-primary);
}

/* Hide non-matching questions during search */

/* Section hidden when no matches */

/* Search results counter */

.search-results-counter.visible {
    display: flex;
}

.search-results-counter .count {
    font-weight: 600;
    color: var(--contract-primary);
}



/* Progress indicator */



/* Comparison mode specific styles */



.question-checkbox-wrapper .form-check-input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
}

.question-card.is-selected {
    background-color: rgba(var(--contract-primary-rgb, 37, 99, 235), 0.08);
    border-left: 3px solid var(--contract-primary);
}

.cursor-pointer {
    cursor: pointer;
}



/* Selection counter badge in navigation */



/* Mobile responsive adjustments */
@media (max-width: 991.98px) {
    .questionnaire-nav-sticky {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .questionnaire-search-input {
        width: 150px;
    }

    .questionnaire-search-input:focus {
        width: 180px;
    }

    .questionnaire-quick-btn span {
        display: none;
    }

    .questionnaire-quick-btn {
        padding: 0.5rem;
    }
}

@media (max-width: 767.98px) {

}
/* ==========================================
   QUESTIONNAIRE DETAIL - CARD GRID UI
   ========================================== */

/* Search and Summary Toolbar */
.section-toolbar {
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
}

.section-search-wrapper {
    position: relative;
    flex-shrink: 0;
}

.section-search-input {
    padding: 0.625rem 1rem;
    padding-left: 2.5rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    width: 280px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.section-search-input:focus {
    outline: none;
    border-color: var(--contract-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.section-search-input::placeholder {
    color: var(--text-tertiary);
}

.section-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 1rem;
    pointer-events: none;
}

.section-summary-badge {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.section-summary-badge i {
    color: var(--contract-primary);
}

.section-summary-badge strong {
    color: var(--contract-primary);
    font-size: 1.1rem;
}

.section-summary-selection {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--contract-primary);
}

/* Section Cards Grid */
.section-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.section-card:hover {
    border-color: var(--contract-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.section-card.has-search-match {
    border-color: #ffc107;
    background: rgba(255, 193, 7, 0.05);
}

.section-card.has-search-match::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 8px;
    height: 8px;
    background: #ffc107;
    border-radius: 50%;
}

.section-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.section-card-icon i {
    font-size: 1.5rem;
    color: white;
}

/* Section card icon colors */
.section-card-icon.bg-primary { background: var(--contract-primary); }
.section-card-icon.bg-success { background: #10b981; }
.section-card-icon.bg-warning { background: #f59e0b; }
.section-card-icon.bg-info { background: #06b6d4; }
.section-card-icon.bg-danger { background: #ef4444; }
.section-card-icon.bg-secondary { background: #6b7280; }
.section-card-icon.bg-purple { background: #8b5cf6; }
.section-card-icon.bg-pink { background: #ec4899; }
.section-card-icon.bg-indigo { background: #6366f1; }
.section-card-icon.bg-teal { background: #14b8a6; }
.section-card-icon.bg-orange { background: #f97316; }
.section-card-icon.bg-cyan { background: #22d3ee; }

.section-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
    line-height: 1.3;
}

.section-card-count {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.section-card-selected {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.7rem;
    min-width: 20px;
    height: 20px;
    padding: 0 0.5rem;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
}

.section-card-selected.visible {
    display: flex;
}

/* Section Modal Styles */
.section-modal .modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.section-modal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.section-modal .modal-body {
    padding: 1rem;
    background: var(--bg-primary);
}

.section-modal .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

/* Question Items in Modal */
.modal-question-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.modal-question-item:last-child {
    margin-bottom: 0;
}

.modal-question-selectable {
    cursor: pointer;
}

.modal-question-selectable:hover {
    background: rgba(37, 99, 235, 0.04);
    border-color: var(--border-primary);
}

.modal-question-item.is-selected {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--contract-primary);
    border-left: 3px solid var(--contract-primary);
}

.modal-question-checkbox {
    flex-shrink: 0;
    margin-right: 0.75rem;
    padding-top: 2px;
}

.modal-question-checkbox .form-check-input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
}

.modal-question-content {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.modal-question-number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.875rem;
}

.modal-question-text-wrapper {
    flex: 1;
    min-width: 0;
}

.modal-question-text {
    display: block;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.modal-question-answer {
    margin-top: 0.25rem;
}

.modal-answer-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Answer badges (reuse existing) */
.answer-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 500;
}

.answer-yes {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.answer-no {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.answer-empty {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Mobile Responsive */
@media (max-width: 767.98px) {
    .section-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .section-search-input {
        width: 100%;
    }

    .section-summary-badge {
        justify-content: center;
    }

    .section-card {
        padding: 1rem;
    }

    .section-card-icon {
        width: 48px;
        height: 48px;
    }

    .section-card-icon i {
        font-size: 1.25rem;
    }

    .section-card-title {
        font-size: 0.85rem;
    }

    .modal-question-item {
        padding: 0.875rem;
    }

    .modal-question-number {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }

    .modal-question-text {
        font-size: 0.85rem;
    }
}
/* ==========================================
   DOCUMENT MANAGEMENT
   ========================================== */

.document-type-badge .badge,
.questionnaire-badge .badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
}

.questionnaire-badge .badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
}

.upload-zone {
    background-color: rgba(25, 153, 218, 0.03);
    border-color: rgba(25, 153, 218, 0.2) !important;
    transition: var(--transition-slow);
    cursor: pointer;
}

.upload-zone:hover {
    background-color: rgba(25, 153, 218, 0.08);
    border-color: rgba(25, 153, 218, 0.4) !important;
}

.upload-zone.drag-over {
    background-color: rgba(25, 153, 218, 0.15);
    border-color: rgba(25, 153, 218, 0.6) !important;
    transform: scale(1.02);
}

.pmf-card-title h5 {
    color: var(--blue);
    font-weight: 600;
}

.form-label.text-primary {
    color: var(--blue) !important;
    font-size: 0.9rem;
}

.text-danger {
    color: #dc3545 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.d-flex.gap-2 {
    gap: var(--spacing-xs) !important;
}
/* ==========================================
   CONTRACT DETAIL PAGE
   ========================================== */

.contract-header-sticky {
    position: sticky;
    top: 80px;
    z-index: 1010;
    background: white;
    padding: var(--spacing-lg);
    border: 2px solid var(--contract-primary);
    margin-bottom: var(--spacing-xl);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.contract-header-sticky h1 {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.contract-header-sticky .text-muted {
    color: var(--text-secondary) !important;
}

.contract-header-sticky .text-dark {
    color: var(--text-primary) !important;
}

.contract-header-sticky .btn-light {
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    color: #475569;
}

.contract-header-sticky .btn-light:hover {
    background: var(--border-primary);
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.contract-header-sticky .btn-dark {
    background: var(--contract-primary);
    border: 1px solid var(--contract-primary);
    color: white;
}

.contract-header-sticky .btn-dark:hover {
    background: var(--contract-primary-dark);
    border-color: var(--contract-primary-dark);
    color: white;
}

.contract-sections {
    max-width: 1200px;
    margin: 0 auto;
}

.contract-section {
    background: white;
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: var(--transition-slow);
}

.contract-section-header {
    padding: 1.25rem var(--spacing-lg);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-primary);
    transition: var(--transition-slow);
    user-select: none;
}

.contract-section-header:hover {
    background: var(--bg-tertiary);
}

.contract-section-header h6 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.contract-section-header i {
    color: var(--text-secondary);
    transition: var(--transition-slow);
    font-size: 1.2rem;
}

.contract-section-header[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.contract-section-body {
    padding: var(--spacing-xl) var(--spacing-lg);
    background: white;
}

@media (max-width: 991.98px) {
    .contract-header-sticky {
        top: 65px;
        padding: 1.25rem;
    }

    .contract-section-header {
        padding: 1rem 1.25rem;
    }

    .contract-section-body {
        padding: var(--spacing-lg) 1.25rem;
    }
}
/* ==========================================
   UNIFIED CONTRACT DOCUMENT STYLES
   ========================================== */

/* Typography */
.contract-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--contract-gray-900);
    margin-bottom: 1rem;
    line-height: 1.3;
}


/* Headers */
.contract-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
}

.allegato-header {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    background: white;
    border: 3px solid var(--contract-primary);
    margin-bottom: var(--spacing-xl);
}

.allegato-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--contract-primary);
    letter-spacing: 2px;
}

.allegato-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: var(--spacing-xs) 0;
    color: var(--contract-gray-900);
}

.allegato-subtitle {
    font-size: 1rem;
    margin: var(--spacing-xs) 0 0 0;
    color: var(--contract-gray-600);
}



.main-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--contract-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--contract-gray-900);
    margin: 0 0 1rem 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--contract-gray-200);
}

.article-header {
    margin-top: var(--spacing-xl);
    margin-bottom: 1rem;
}

.article-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--contract-gray-900);
    margin: 0;
}

/* Content Sections */

.content-section {
    margin-bottom: var(--spacing-xl);
}

.contract-content {
    line-height: 1.7;
    color: var(--contract-gray-700);
}

.contract-content p {
    margin-bottom: 1rem;
}

.contract-content p strong {
    color: var(--contract-gray-900);
    font-weight: 600;
}

/* Icon Cards */








/* Detail Rows */
.detail-row {
    display: flex;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--contract-gray-100);
    align-items: baseline;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    flex: 0 0 220px;
    font-weight: 500;
    color: var(--contract-gray-600);
    font-size: 0.95rem;
}

.detail-value {
    flex: 1;
    font-weight: 600;
    color: var(--contract-gray-900);
    font-size: 0.95rem;
}

.detail-value strong {
    font-weight: 700;
}

/* Variante a piena larghezza di .detail-row per valori lunghi da campo libero
   (condizioni economiche dell'Allegato C): etichetta sopra, valore su tutta la
   larghezza. Tiene la preview a schermo allineata al PDF (css/pdf/contract.css). */
.detail-block {
    padding: 0.75rem 0;
}

.detail-block .detail-label {
    display: block;
    margin-bottom: 0.35rem;
}

.detail-block .detail-value {
    display: block;
}

/* Lists */
.content-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.content-list-item {
    padding: var(--spacing-xs) 0;
}

.content-list.numbered-list .content-list-item {
    padding-left: var(--spacing-lg);
    position: relative;
}

.content-list.numbered-list .content-list-item::before {
    content: counter(item) ". ";
    counter-increment: item;
    position: absolute;
    left: 0;
    font-weight: 600;
    color: var(--contract-primary);
}

/* Company & Client Info */
.company-info-card,
.client-info-card {
    background: var(--contract-gray-50);
    border-left: 4px solid var(--contract-primary);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.company-header,
.client-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: 1rem;
}

.company-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--contract-primary);
    margin: 0;
}

.company-badge {
    background: var(--contract-primary);
    color: white;
    padding: var(--spacing-xs) 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}


.company-details,
.client-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.detail-group {
    margin-bottom: 1rem;
}

.registration-info {
    margin-top: var(--spacing-lg);
    padding-top: 1rem;
    border-top: 1px solid var(--contract-gray-300);
    font-size: 0.9rem;
    font-style: italic;
    color: var(--contract-gray-600);
}

/* Delegate Cards */
.delegate-card {
    background: white;
    border-left: 4px solid var(--contract-info-border);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.delegate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--contract-gray-200);
}

.delegate-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--contract-info-color);
}

.delegate-role {
    background: var(--contract-info-bg);
    color: var(--contract-info-color);
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.delegate-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--contract-gray-900);
    margin-bottom: 1rem;
}

/* Signature Sections */
.signature-section {
    margin-top: 3rem;
    page-break-inside: avoid;
}

.signature-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.signature-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--contract-gray-900);
    margin: 0;
}

.signature-intro,
.identification-text,
.clause-approval {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--contract-gray-700);
    line-height: 1.6;
}

.clause-text {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.signature-card {
    background: white;
    border-left: 3px solid var(--contract-gray-300);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.signature-card.primary {
    border-left-color: var(--contract-primary);
}

.signature-card.secondary {
    border-left-color: var(--contract-info-border);
}

.signature-card.consultant {
    border-left-color: var(--contract-success-border);
}

.signature-card.final {
    background: white;
    border-left: 4px solid var(--contract-primary);
}

.signature-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: var(--spacing-lg);
    padding-bottom: 1rem;
}

.signature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--contract-primary);
    color: white;
    font-size: 1.3rem;
}

.signature-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--contract-gray-900);
    margin: 0;
}

.signature-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.signature-fields.dual-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.signature-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.signature-field-label {
    font-weight: 600;
    color: var(--contract-gray-700);
    font-size: 0.95rem;
}

.signature-line {
    border-bottom: 2px solid var(--contract-gray-900);
    height: 40px;
    width: 100%;
}

.signature-line.large {
    height: 60px;
}

.signature-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.signature-label {
    font-weight: 600;
    color: var(--contract-gray-700);
    font-size: 0.9rem;
    margin-top: var(--spacing-xs);
}





/* Laundering/Antiriciclaggio Specific */

.laundering-section .main-section-title {
    color: var(--contract-warning-color);
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--contract-gray-50);
}

.status-label {
    font-weight: 500;
    color: var(--contract-gray-700);
}

.status-value {
    font-weight: 600;
    padding: 0.4rem 0.8rem;
}








/* Privacy Specific */









.privacy-consent-options {
    display: flex;
    gap: var(--spacing-xl);
    justify-content: center;
    margin: var(--spacing-xl) 0;
}

.privacy-consent-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 1rem;
    border-left: 3px solid;
}

.privacy-consent-yes {
    background: var(--contract-success-bg);
    border-color: var(--contract-success-border);
}

.privacy-consent-yes .privacy-consent-icon {
    font-size: 1.5rem;
    color: var(--contract-success-color);
}

.privacy-consent-yes .privacy-consent-text {
    font-weight: 600;
    color: var(--contract-success-color);
}

.privacy-consent-no {
    background: var(--contract-gray-100);
    border-color: var(--contract-gray-300);
}

.privacy-consent-no .privacy-consent-icon {
    font-size: 1.5rem;
    color: var(--contract-gray-600);
}

.privacy-consent-no .privacy-consent-text {
    font-weight: 600;
    color: var(--contract-gray-600);
}

/* Responsive for contracts */
@media (max-width: 768px) {
    .allegato-content {
        padding: 0 1rem;
    }

    .detail-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .detail-label {
        flex: none;
    }

    .signature-fields.dual-column,
    .signature-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .company-header,
    .client-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .section-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1.1rem;
    }

    .completion-progress-bar {
        width: 80px;
    }

    /* Contracts list mobile */
    .complete-contract-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .contract-main-info {
        text-align: left;
    }

    .contract-status-info,
    .contract-main-actions {
        text-align: center;
    }

    .primary-contract-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .contract-btn {
        width: auto;
        min-width: 140px;
    }
}

@media (max-width: 480px) {


    .contract-title {
        font-size: 1.1rem !important;
    }




}

/* Print/PDF Specific */
@media print {
    .contract-section {
        border: 1px solid var(--contract-gray-200);
    }

    .signature-section {
        page-break-inside: avoid;
    }

    .allegato-content {
        max-width: 100%;
    }

    .privacy-consent-options {
        page-break-inside: avoid;
    }
}
/* ==========================================
   CONTRACTS LIST SPECIFIC STYLES
   ========================================== */

/* Complete contract row */





.contract-details h4.contract-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}



.contract-date,


/* Contract status info */



.main-status-badge.status-complete {
    background: var(--contract-success-bg);
    color: var(--contract-success-color);
    border-color: #bbf7d0;
}

.main-status-badge.status-pending {
    background: var(--contract-warning-bg);
    color: var(--contract-warning-color);
    border-color: #fde68a;
}

.status-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Contract action buttons */













/* Allegato management */
.allegato-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.25rem var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

.allegato-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
/* ==========================================
   DIGITAL ONBOARDING PAGE
   ========================================== */

.onboarding-page .navbar,
.onboarding-page header {
    display: none !important;
}

.digital-onboarding-container {
    background: var(--do-bg);
    min-height: 100vh;
    padding: var(--spacing-xl) 0;
}

.onboarding-main-card {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.onboarding-main-card .client-header {
    color: var(--text-primary);
    border-bottom: 1px solid #f1f5f9;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: 0;
}

.client-header-brand {
    display: flex;
    align-items: center;
}

.client-header-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.client-header-name i {
    color: var(--brand-on-light);
    font-size: 1.5rem;
}

.onboarding-content-wrapper {
    display: flex;
    gap: 0;
    min-height: auto;
}

.onboarding-sidebar {
    background: #fafbfc;
    border-right: 1px solid var(--border-primary);
    width: 300px;
    padding: var(--spacing-xl) var(--spacing-lg);
    position: relative;
}

.step-item {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    position: relative;
    transition: var(--transition-slow);
    margin-bottom: var(--spacing-xs);
}

.step-item:not(:last-child)::after,
.step-item.complete:not(:last-child)::after {
    content: none;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    margin-right: 1rem;
    position: relative;
    z-index: 2;
    transition: var(--transition-slow);
}

.step-item.complete .step-circle {
    background: var(--contract-success-border);
    color: white;
}

.step-item.active .step-circle {
    background: var(--contract-primary);
    color: white;
    transform: scale(1.05);
}

.step-item.pending .step-circle {
    background: #f8fafc;
    color: var(--text-tertiary);
    border: 1px solid var(--border-primary);
    font-weight: 600;
}

.step-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
}

.step-item.active .step-label {
    color: var(--contract-primary);
    font-weight: 700;
}

.step-item.complete .step-label {
    color: var(--contract-success-border);
    font-weight: 600;
}

.step-content-area {
    flex: 1;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
}

.step-content-card {
    text-align: center;
    max-width: 500px;
    animation: fadeInUp 0.6s ease-out;
}


/* Bootstrap icon variant — inherits the tenant brand color via --brand-on-light
   so it's legible on white card whatever the tenant palette is. */
.step-icon {
    display: block;
    margin: 0 auto var(--spacing-md);
    font-size: 4rem;
    line-height: 1;
    color: var(--brand-on-light);
}

/* Confirm checkbox — soft brand-tinted card with the checkbox label aligned
   nicely. Used in steps that require user acknowledgement (e.g. disclosure). */
.confirm-check {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1.25rem auto 0;
    padding: 0.65rem 1.1rem;
    background: rgba(var(--brand-primary-rgb), 0.06);
    border: 2px solid rgba(var(--brand-primary-rgb), 0.55);
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.08);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    max-width: 100%;
}

.confirm-check:hover {
    background: rgba(var(--brand-primary-rgb), 0.1);
    border-color: rgba(var(--brand-primary-rgb), 0.8);
}

.confirm-check-input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--contract-primary);
}

.confirm-check-text {
    font-size: 0.875rem;
    color: var(--do-text);
    line-height: 1.4;
    text-align: left;
}

.step-content-card .step-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    text-align: center;
    justify-content: center;
}

.step-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    font-weight: 500;
    /* `balance` (Chrome 114+, Safari 17.5+) bilances line widths.
       `pretty` (Chrome 117+, Safari 17.5+, FF 121+) additionally avoids
       orphan words at end of paragraphs — upgraded via @supports below. */
    text-wrap: balance;
}

.step-description {
    color: #475569;
    margin-bottom: 1.5rem;
    line-height: 1.55;
    font-size: 0.95rem;
    text-wrap: balance;
}

@supports (text-wrap: pretty) {
    .step-subtitle,
    .step-description { text-wrap: pretty; }
}

.step-action-btn {
    background: var(--contract-primary);
    border: none;
    border-radius: 12px;
    padding: 1rem 2.5rem;
    color: var(--brand-on-primary);
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: var(--transition-slow);
    box-shadow: none;
}

.step-action-btn:hover {
    background: var(--contract-primary-dark);
    color: var(--brand-on-primary);
    transform: translateY(-2px);
    box-shadow: none;
}

.step-action-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

@media (max-width: 768px) {
    .digital-onboarding-container {
        padding: 1rem;
    }

    .onboarding-content-wrapper {
        flex-direction: column;
    }

    .onboarding-sidebar {
        width: 100%;
        padding: var(--spacing-lg);
        border-right: none;
        border-bottom: 1px solid var(--border-primary);
    }

    .step-content-area {
        padding: var(--spacing-xl) var(--spacing-lg);
    }


    .step-item {
        padding: 0.75rem 0;
        margin-bottom: 0.25rem;
    }

    .step-circle {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .step-item:not(:last-child)::after {
        left: 18px;
        height: 15px;
        bottom: -5px;
    }
}
/* ==========================================
   LINK CREATED SUCCESS PAGE
   ========================================== */



















.copy-feedback.show {
    opacity: 1;
}



.step-item {
    position: relative;
    padding: 1.1rem 1.4rem;
    background: var(--do-card-bg);
    border: none;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    counter-increment: step-counter;
    transition: box-shadow 0.2s ease;
}

.step-item:hover {
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.08);
}

.step-content {
    margin-left: 0;
}

.step-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

/* Numbering removed - titles no longer show step numbers */
.step-title::before {
    content: none;
}

.step-description {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 1rem;
}

.step-description em {
    color: var(--contract-primary);
    font-weight: 600;
    font-style: normal;
}

.step-description strong {
    color: var(--text-primary);
    font-weight: 600;
}

@media (max-width: 768px) {





    .step-item::before {
        position: relative;
        margin-bottom: var(--spacing-xs);
    }

    .step-content {
        margin-left: 0;
    }
}
/* ==========================================
   PMF / ID-VIDEOS (legacy page styles)
   ========================================== */

.pmf-section-title .title {
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--brand-on-light);
    position: relative;
    display: inline-block;
    padding-left: 1rem;
    border-left: 4px solid var(--brand-on-light);
    line-height: 1.3;
}

.pmf-section-title p {
    font-size: 1rem;
    color: var(--contract-gray-600);
    margin: var(--spacing-xs) 0 0 1rem;
}

/* Lightens Bootstrap's own .table-hover row background (default
   rgba(0,0,0,.075), quite dark) via its own CSS variable. */
.pmf-table-col {
    --bs-table-hover-bg: rgba(0, 0, 0, 0.02);
}

.pmf-table-name {
    text-decoration: none;
    color: #1f2937;
    font-weight: 600;
}

.pmf-table-name:hover {
    color: var(--contract-primary-dark);
    text-decoration: none;
}

.pmf-nav-item {
    color: var(--dark-light-blue) !important;
}
/* ==========================================
   DIGITAL ONBOARDING - AUTHENTICATION PAGES
   ========================================== */

/* Background Gradients - tenant-brandable via --brand-gradient-{start,end} */
.bg-gradient-purple {
    background: linear-gradient(135deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
}

.bg-gradient-dark {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

/* Onboarding Page Body — for the customer-facing digital onboarding flow
   (token-public pages). Auth pages (login/signup/etc.) use .auth-page instead.
   Neutralized: page bg is now theme-aware (light slate-50 / dark slate-950)
   instead of gradient brand. Brand color remains as accent on buttons/badges. */
.onboarding-page {
    background: var(--do-bg);
    min-height: 100vh;
}

.onboarding-page .header-nav,
.onboarding-page .navbar,
.onboarding-page .app-header {
    display: none !important;
}
/* ==========================================
   AUTH PAGES — login / signup / password reset / etc.
   Theme-aware: default = light; html.auth-theme-dark switches to dark.
   The brand color (var(--contract-primary)) stays as accent in both themes
   (buttons, focus rings, links).
   ========================================== */
.auth-page {
    /* Light theme defaults — match scfdata.LOGIN_THEME_LIGHT */
    --auth-bg: #ffffff;
    --auth-card-bg: #f8fafc;          /* slate-50, off-white card */
    --auth-text: #1e293b;             /* slate-800 */
    --auth-text-muted: #64748b;       /* slate-500 */
    --auth-input-bg: #ffffff;
    --auth-input-border: #cbd5e1;     /* slate-300 */
    --auth-input-placeholder: #94a3b8;/* slate-400 */
    --auth-divider-border: #e2e8f0;   /* slate-200 */
    --auth-error-bg: rgba(220, 38, 38, 0.06);
    --auth-error-border: rgba(220, 38, 38, 0.18);
    --auth-error-text: #991b1b;       /* red-800 */
    --auth-error-icon: #dc2626;       /* red-600 */

    background: var(--auth-bg);
    min-height: 100vh;
}

html.tenant-theme-dark .auth-page {
    --auth-bg: #0f172a;               /* slate-950 */
    --auth-card-bg: #1e293b;          /* slate-800 */
    --auth-text: #f1f5f9;             /* slate-100 */
    --auth-text-muted: #94a3b8;       /* slate-400 */
    --auth-input-bg: rgba(255, 255, 255, 0.05);
    --auth-input-border: #334155;     /* slate-700 */
    --auth-input-placeholder: #64748b;/* slate-500 */
    --auth-divider-border: #334155;
    --auth-error-bg: rgba(248, 113, 113, 0.10);
    --auth-error-border: rgba(248, 113, 113, 0.25);
    --auth-error-text: #fecaca;       /* red-200 */
    --auth-error-icon: #f87171;       /* red-400 */
}

.auth-page .header-nav,
.auth-page .navbar,
.auth-page .app-header,
.auth-page .app-footer {
    display: none !important;
}

/* Layout: vertically center the auth card, but fall back to top-aligned when
   content (signup with reCAPTCHA, error states) exceeds viewport height.
   `safe center` prevents the flexbox-center quirk where overflowing content
   gets clipped above the scroll origin. */
.auth-page > .container-fluid {
    align-items: safe center !important;
    padding-block: 2rem;
}

/* Auth Card */
.auth-card {
    border-radius: 20px;
    background: var(--auth-card-bg);
    color: var(--auth-text);
    /* Overrides Bootstrap's own .shadow-lg utility class on this element
       (0 1rem 3rem rgba(0,0,0,.175) !important, quite heavy) with a lighter
       resting shadow so the hover state has a smaller step down. */
    box-shadow: var(--shadow-lg) !important;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.auth-card:hover {
    box-shadow: var(--shadow-md) !important;
}

/* Text color overrides — auth templates inherited `.text-white`/`.text-light`
   classes from the original dark design. Re-route them to the theme's auth-text
   variable so light mode is readable without touching 11 templates. */
.auth-card .text-white,
.auth-card .text-light {
    color: var(--auth-text) !important;
}
.auth-card .text-muted {
    color: var(--auth-text-muted) !important;
}

/* Google Sign In Button */
.btn-google {
    border-radius: 12px;
    transition: all 0.3s ease;
}

.btn-google:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
}

/* Divider */
.auth-divider {
    border-color: var(--auth-divider-border) !important;
}

.auth-divider-text {
    background: var(--auth-card-bg);
    color: var(--auth-text-muted);
}

/* Form Controls - Auth Pages */
.auth-form-control {
    border-radius: 10px;
    border: 2px solid var(--auth-input-border);
    background: var(--auth-input-bg);
    color: var(--auth-text);
}

.auth-form-control:focus {
    border-color: var(--contract-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25) !important;
    background: var(--auth-input-bg) !important;
    color: var(--auth-text) !important;
}

.auth-form-control::placeholder {
    color: var(--auth-input-placeholder) !important;
}

/* Form Check - Auth Pages */
.auth-form-check-input {
    background-color: var(--auth-input-bg);
    border-color: var(--auth-input-border);
}

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

.auth-form-check-input:focus {
    border-color: var(--contract-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
}

/* Alert - Auth Pages */
.auth-alert {
    border-radius: 10px;
}

/* A POST form's button that reads as the text link around it (logout) */
.link-button {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: underline;
}

/* Button Submit - Auth Pages */
.btn-auth-submit {
    border-radius: 12px;
}

/* Error States - Auth Pages */
.auth-form-control.is-invalid {
    border-color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.1);
    animation: shake 0.3s ease-in-out;
}

.auth-form-control.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background: rgba(220, 53, 69, 0.15) !important;
}

/* Field Error Message */
.auth-field-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(220, 53, 69, 0.15);
    border-left: 3px solid #dc3545;
    border-radius: 6px;
    color: #ff6b6b;
    font-size: 0.875rem;
    animation: slideDown 0.3s ease-out;
}

.auth-field-error i {
    color: #dc3545;
    font-size: 1rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.auth-field-error-text {
    flex: 1;
    line-height: 1.4;
}

/* Form Error Alert (non-field errors) */
.auth-form-error-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: var(--auth-error-bg);
    border: 1px solid var(--auth-error-border);
    border-radius: 8px;
    margin-bottom: 1.25rem;
    animation: slideDown 0.25s ease-out;
}

.auth-form-error-content {
    flex: 1;
    min-width: 0;
}

.auth-form-error-title {
    font-weight: 600;
    color: var(--auth-error-text);
    margin-bottom: 0.125rem;
    font-size: 0.875rem;
}

.auth-form-error-message {
    color: var(--auth-error-text);
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 0;
}

.auth-form-error-list {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0 0;
}

.auth-form-error-list li {
    color: var(--auth-error-text);
    font-size: 0.8125rem;
    line-height: 1.45;
    padding: 0.125rem 0;
}

.auth-form-error-list li:before {
    content: "•";
    color: var(--auth-error-icon);
    font-weight: 600;
    display: inline-block;
    width: 1em;
    margin-right: 0.25rem;
}

/* Animations */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

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

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

/* Success States - For validation feedback */
.auth-form-control.is-valid {
    border-color: #28a745 !important;
    background: rgba(40, 167, 69, 0.1);
}

.auth-form-control.is-valid:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
    background: rgba(40, 167, 69, 0.15) !important;
}

/* Responsive - Auth Pages */
@media (max-width: 768px) {
    .auth-card .card-body {
        padding: 2rem !important;
    }

    .auth-field-error {
        padding: 0.5rem;
        font-size: 0.8125rem;
    }
}
/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

@media (max-width: 991.98px) {
    .app-header .navbar {
        padding: 0.75rem 0;
    }

    .app-logo {
        height: 24px;
    }

    .app-footer {
        padding: var(--spacing-lg) 0;
        text-align: center;
    }

    .pmf-section-title .title {
        font-size: 1.875rem;
    }
}

@media (max-width: 576px) {
    .app-header .navbar {
        padding: var(--spacing-xs) 0;
    }

    .app-logo {
        height: 22px;
    }



    .app-footer {
        padding: 1rem 0;
    }

    .pmf-section-title .title {
        font-size: 1.5rem;
    }
}

/* ========================================
   PORTFOLIO LAYOUT — .ptf-* containers shared across portfolio pages.
   Layout glue (grids, chart wrapper); the card/list widgets live in
   components/ and page-specific bits in pages/.
======================================== */

.ptf-kpi-strip {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .ptf-kpi-strip {
        grid-template-columns: 1fr 1fr;
    }
    .ptf-kpi-card--total {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .ptf-kpi-strip {
        grid-template-columns: 1fr;
    }
    .ptf-kpi-card--total {
        grid-column: span 1;
    }
}

.ptf-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .ptf-main-grid {
        grid-template-columns: 1fr;
    }
}

.ptf-donut-wrap {
    position: relative;
    height: 220px;
    width: 100%;
}