/* ========================================================================= TEMA GLOBALE — "Institutional Ledger" aesthetic Palette blu notte + oro antico, tono bancario/istituzionale su carta avorio. Font moderni: Sora (titoli) + Manrope (interfaccia/tabelle). Scope: qualunque pagina con classe "app-theme" su . Selettori generici (.btn, .form-control, table.table, .modal, ecc.) cosi' il tema si applica a qualsiasi modulo senza dover toccare markup/ID specifici di ogni pagina. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap'); body.app-theme { --caf-paper: #F1EFE6; --caf-paper-deep: #E4E1D2; --caf-surface: #FFFFFF; --caf-ink: #1B2436; --caf-ink-soft: #51617D; --caf-primary: #16305C; --caf-primary-dark: #0B1D3A; --caf-primary-soft: #E3E8F2; --caf-accent: #B8872E; --caf-accent-soft: #F2E6C8; --caf-danger: #953F3B; --caf-danger-soft: #F1E0DD; --caf-line: #D3CEBC; background: var(--caf-paper); background-image: radial-gradient(circle at 4px 4px, rgba(22,48,92,0.06) 1px, transparent 0); background-size: 22px 22px; color: var(--caf-ink); font-family: 'Manrope', -apple-system, sans-serif; font-size: 13px; } body.app-theme .h_title, body.app-theme h2, body.app-theme h3, body.app-theme h4 { font-family: 'Sora', -apple-system, sans-serif; color: var(--caf-primary-dark); } /* ---------- Menu di navigazione principale ------------------------------ */ body.app-theme nav.navbar { background: linear-gradient(135deg, var(--caf-primary) 0%, var(--caf-primary-dark) 100%) !important; box-shadow: 0 2px 16px rgba(11,29,58,0.28); padding: 6px 20px; font-family: 'Manrope', sans-serif; border-bottom: 2px solid var(--caf-accent); } body.app-theme nav.navbar img[src*="logo"] { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.35); } body.app-theme .navbar-light .navbar-nav .nav-link, body.app-theme .navbar-nav .nav-link { color: rgba(244,239,225,0.82) !important; font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; padding: 10px 14px !important; margin: 0 1px; border-radius: 7px; transition: background-color .15s ease, color .15s ease; } body.app-theme .navbar-nav .nav-link .fa { margin-right: 6px; color: var(--caf-accent); font-size: 12px; } body.app-theme .navbar-light .navbar-nav .nav-link:hover, body.app-theme .navbar-light .navbar-nav .nav-link:focus, body.app-theme .navbar-light .navbar-nav .show > .nav-link { color: #FFFFFF !important; background-color: rgba(255,255,255,0.1); } body.app-theme .navbar-nav .dropdown-menu { border: none; border-radius: 10px; box-shadow: 0 14px 30px rgba(11,29,58,0.3); padding: 6px; margin-top: 8px; font-size: 11.5px; } body.app-theme .dropdown-item { font-weight: 500; color: var(--caf-ink); border-radius: 6px; padding: 8px 12px; } body.app-theme .dropdown-item:hover, body.app-theme .dropdown-item:focus { background-color: var(--caf-primary-soft); color: var(--caf-primary-dark); } body.app-theme .dropdown-item .fa { margin-right: 7px; color: var(--caf-accent); width: 14px; display: inline-block; text-align: center; } body.app-theme .dropdown-divider { border-top-color: var(--caf-line); margin: 4px 2px; } body.app-theme .navbar-toggler { border-color: rgba(244,239,225,0.4); padding: 4px 8px; } body.app-theme .navbar-toggler-icon { filter: brightness(0) invert(1); } body.app-theme .user-icon { color: var(--caf-accent); margin-right: 3px; } /* Sovrascrive lo style inline "color:#333" del toggle utente (illeggibile su navbar scura) */ body.app-theme .navbar-nav a[style*="color: #333"], body.app-theme .navbar-nav a[style*="color:#333"] { color: rgba(244,239,225,0.9) !important; } /* ---------- Titolo pagina / banner ------------------------------------ */ body.app-theme .container-fluid > div:first-child { text-align: center; padding: 6px 0 2px; } body.app-theme .container-fluid > div:first-child img { filter: drop-shadow(0 2px 3px rgba(11,29,58,0.2)); } body.app-theme .h_title, body.app-theme h2[style*="text-align"] { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; position: relative; display: inline-block; padding: 0 6px 8px; margin: 4px auto 14px; } body.app-theme .h_title::after, body.app-theme h2[style*="text-align"]::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 3px; border-radius: 3px; background: var(--caf-accent); } body.app-theme h3[style*="text-align"] { font-weight: 500; color: var(--caf-ink-soft); font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; } /* ---------- Barra filtri come "scheda timbro" -------------------------- */ body.app-theme .container-fluid > table:first-of-type { background: var(--caf-surface); border: 1px solid var(--caf-line); border-radius: 10px; padding: 18px 22px; box-shadow: 0 6px 16px rgba(27,36,54,0.08); margin-bottom: 6px; } body.app-theme .container-fluid > table:first-of-type label { font-family: 'Manrope', sans-serif; font-weight: 600; color: var(--caf-ink-soft); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } body.app-theme .container-fluid > table:first-of-type td { padding: 6px 14px 6px 0; } /* ---------- Form controls (select/input) ------------------------------- */ body.app-theme .form-control, body.app-theme .bootstrap-select > .btn { border: 1px solid var(--caf-line); border-radius: 6px; background-color: var(--caf-surface); color: var(--caf-ink); font-family: 'Manrope', sans-serif; font-size: 12px; transition: border-color .15s ease, box-shadow .15s ease; } body.app-theme .form-control:focus, body.app-theme .bootstrap-select > .btn:focus { border-color: var(--caf-primary); box-shadow: 0 0 0 3px var(--caf-primary-soft); } /* ---------- Pulsanti ----------------------------------------------------- */ body.app-theme .btn { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.02em; border-radius: 7px; padding: 7px 16px; border: none; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; } body.app-theme .btn:active { transform: translateY(1px); } body.app-theme .btn-success { background: var(--caf-primary); } body.app-theme .btn-success:hover { background: var(--caf-primary-dark); box-shadow: 0 4px 10px rgba(22,48,92,0.3); } body.app-theme .btn-info { background: var(--caf-ink-soft); } body.app-theme .btn-info:hover { background: var(--caf-ink); box-shadow: 0 4px 10px rgba(27,36,54,0.25); } body.app-theme .btn-danger { background: var(--caf-danger); } body.app-theme .btn-danger:hover { background: #722e2b; box-shadow: 0 4px 10px rgba(149,63,59,0.3); } body.app-theme .btn-secondary { background: transparent; color: var(--caf-ink-soft); border: 1px solid var(--caf-line); } body.app-theme .btn-secondary:hover { background: var(--caf-paper-deep); color: var(--caf-ink); } body.app-theme #but_nuovo::before, body.app-theme #but_new::before { content: "+ "; } body.app-theme .btn-success img[src*="whatsapp"] { height: 16px; vertical-align: -3px; margin-right: 4px; } /* ---------- Contenitori dinamici (tabelle caricate via AJAX) ------------ */ /* NB: solo "opacity", mai "transform": alcuni moduli caricano via AJAX, dentro lo stesso contenitore, anche delle modali. Un transform sull'ancestor creerebbe un nuovo containing block per gli elementi position:fixed, intrappolando le modali invece di farle coprire l'intero schermo (bug osservato nel modulo CAF). */ body.app-theme #table_container, body.app-theme .dataTables_wrapper { animation: caf-fade-in .35s ease both; } @keyframes caf-fade-in { from { opacity: 0; } to { opacity: 1; } } body.app-theme table.table { background: var(--caf-surface); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(27,36,54,0.1); border: 1px solid var(--caf-line); } body.app-theme table.table thead th { background: var(--caf-primary); color: #EFE9D6; font-family: 'Manrope', sans-serif; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border: none; padding: 10px 9px; white-space: nowrap; } body.app-theme table.table.dataTable thead .sorting:after, body.app-theme table.table.dataTable thead .sorting_asc:after, body.app-theme table.table.dataTable thead .sorting_desc:after { opacity: .7; } body.app-theme table.table tbody td { border-color: var(--caf-line); padding: 7px 9px; font-size: 11.5px; vertical-align: middle; } body.app-theme table.table-striped tbody tr:nth-of-type(odd) { background-color: var(--caf-paper-deep); } body.app-theme table.table tbody tr { transition: background-color .12s ease; } body.app-theme table.table tbody tr:hover { background-color: var(--caf-primary-soft) !important; } body.app-theme table.table tbody td a { color: var(--caf-primary-dark); font-weight: 600; border-bottom: 1px dashed var(--caf-primary); } body.app-theme table.table tbody td a:hover { color: var(--caf-accent); border-color: var(--caf-accent); } body.app-theme table.table tfoot th { background: var(--caf-accent-soft); border-top: 2px solid var(--caf-accent); } /* Icone azione riga (modifica / elimina / whatsapp / dettaglio...) */ body.app-theme table.table td img.hand { padding: 5px; border-radius: 6px; transition: background-color .12s ease, transform .12s ease; } body.app-theme table.table td img.hand:hover { background-color: var(--caf-paper-deep); transform: scale(1.12); } /* Badge di stato: riusa gli inline-style color:red/green gia' emessi da PHP in tutti i moduli (SI/NO di Elaborata, Pagata, FENPI, FNUA, ecc.) */ body.app-theme table.table td[style*="color:green"], body.app-theme table.table td[style*="color: green"] { background: var(--caf-primary-soft) !important; border-radius: 20px !important; font-size: 9.5px !important; letter-spacing: .04em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(22,48,92,0.3); } body.app-theme table.table td[style*="color:red"], body.app-theme table.table td[style*="color: red"] { background: var(--caf-danger-soft) !important; border-radius: 20px !important; font-size: 9.5px !important; letter-spacing: .04em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(149,63,59,0.2); } /* DataTables controls (search box / pagination / length) */ body.app-theme .dataTables_wrapper .dataTables_filter input, body.app-theme .dataTables_wrapper .dataTables_length select { border: 1px solid var(--caf-line); border-radius: 6px; background: var(--caf-surface); } body.app-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--caf-primary) !important; border-color: var(--caf-primary) !important; color: #fff !important; border-radius: 6px; } body.app-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--caf-primary-soft) !important; border-color: var(--caf-primary-soft) !important; color: var(--caf-primary-dark) !important; border-radius: 6px; } /* ---------- Modali (tutte, in qualunque modulo) -------------------------- */ body.app-theme .modal .modal-content { border: none; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(11,29,58,0.32); } /* Fallback per markup Bootstrap 3 senza wrapper .modal-content (alcune modali legacy hanno modal-header/body/footer diretti in .modal) */ body.app-theme .modal:not(:has(.modal-content)) { border: none; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(11,29,58,0.32); background: var(--caf-surface); } body.app-theme .modal-header { background: linear-gradient(135deg, var(--caf-primary) 0%, var(--caf-primary-dark) 100%); border-bottom: 3px solid var(--caf-accent); padding: 16px 24px; } body.app-theme .modal-title, body.app-theme .modal-header h5 { font-family: 'Sora', sans-serif; color: #F4EFE1; font-size: 16px; font-weight: 600; letter-spacing: .01em; } body.app-theme .modal-header .close { color: #F4EFE1; opacity: .8; text-shadow: none; } body.app-theme .modal-header .close:hover { opacity: 1; } body.app-theme .modal-body { background: var(--caf-surface); padding: 18px 22px; font-size: 12px; } body.app-theme .modal-body label { font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--caf-ink-soft); } body.app-theme .modal-body .form-control, body.app-theme .modal-body .bootstrap-select > .btn { border: 1px solid var(--caf-line); border-radius: 6px; background-color: #FFFFFF; } body.app-theme .modal-body .form-control:focus { border-color: var(--caf-primary); box-shadow: 0 0 0 3px var(--caf-primary-soft); } body.app-theme .modal-body .form-group.row { border-bottom: 1px dashed var(--caf-line); padding-bottom: 10px; margin-bottom: 10px !important; } body.app-theme .modal-body .form-group.row:last-child { border-bottom: none; } body.app-theme .modal-body #tr_fenpi, body.app-theme .modal-body #tr_fnua, body.app-theme .modal-body #tr_fidelity_card, body.app-theme .modal-body #div_cliente_moroso { font-weight: 600; font-size: 11px; border-bottom: none !important; } body.app-theme .modal-footer { background: var(--caf-paper-deep); border-top: 1px solid var(--caf-line); padding: 14px 24px; } /* Modal ricevuta/documento: aspetto "carta intestata" (se presente il testo) */ body.app-theme .modal-body[id*="ricevuta"], body.app-theme #dialog_ricevuta_caf .modal-body { background-image: repeating-linear-gradient( 0deg, var(--caf-surface) 0px, var(--caf-surface) 27px, var(--caf-paper-deep) 28px, var(--caf-paper-deep) 28px ); } /* Modal WhatsApp (qualunque modulo): header verde coerente col brand del canale */ body.app-theme .modal[id*="whatsapp"] .modal-header { background: linear-gradient(135deg, #1E8E5A 0%, #0E5B44 100%); }