/* ========================================================== Gestion Pack - UI Premium Globale Versione pulita e consolidata Nessuna modifica richiesta al ========================================================== */ body > .wrapper > .main-panel { background: #f4f7fb; } /* ========================================================== CARD GENERALI ========================================================== */ body > .wrapper > .main-panel > .content .card { border-radius: 20px; border: 1px solid rgba(38, 50, 56, .07); box-shadow: 0 14px 36px rgba(31, 45, 61, .08); overflow: visible !important; background: #fff; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; } body > .wrapper > .main-panel > .content .card:hover { box-shadow: 0 22px 46px rgba(31, 45, 61, .12); border-color: rgba(0, 188, 212, .18); } /* Header normali: escludo card-header-icon, che è il box icona flottante */ body > .wrapper > .main-panel > .content .card > .card-header:not(.card-header-icon) { margin: 0 !important; padding: 22px 24px !important; border-radius: 20px 20px 0 0 !important; box-shadow: none !important; background: linear-gradient(135deg, #1b2a41, #6a1b9a) !important; position: relative; overflow: hidden !important; } body > .wrapper > .main-panel > .content .card > .card-header:not(.card-header-icon):after { content: ""; position: absolute; right: -55px; top: -55px; width: 150px; height: 150px; border-radius: 100%; background: rgba(255,255,255,.13); } body > .wrapper > .main-panel > .content .card > .card-header:not(.card-header-icon) .title, body > .wrapper > .main-panel > .content .card > .card-header:not(.card-header-icon) h4 { color: #fff !important; margin: 0 0 6px; font-weight: 700; letter-spacing: -.2px; position: relative; z-index: 2; } body > .wrapper > .main-panel > .content .card > .card-header:not(.card-header-icon) .category, body > .wrapper > .main-panel > .content .card > .card-header:not(.card-header-icon) p { color: rgba(255,255,255,.78) !important; margin: 0; font-size: 14px; line-height: 1.45; position: relative; z-index: 2; } body > .wrapper > .main-panel > .content .card .card-content { padding: 24px; } /* ========================================================== CARD PROFILE / AVATAR ========================================================== */ body > .wrapper > .main-panel > .content .card.card-profile { overflow: visible !important; margin-top: 75px; text-align: center; border-radius: 20px; } body > .wrapper > .main-panel > .content .card.card-profile .card-avatar { width: 118px; height: 118px; margin: -60px auto 20px; border-radius: 50%; overflow: hidden; background: #fff; border: 4px solid #fff; box-shadow: 0 16px 34px rgba(31,45,61,.18); position: relative; z-index: 5; } body > .wrapper > .main-panel > .content .card.card-profile .card-avatar img, body > .wrapper > .main-panel > .content .card.card-profile .card-avatar .img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; } body > .wrapper > .main-panel > .content .card.card-profile > .content { padding: 0 28px 30px !important; } body > .wrapper > .main-panel > .content .card.card-profile .category { margin-top: 5px; margin-bottom: 24px; color: #8a94a3 !important; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } body > .wrapper > .main-panel > .content .card.card-profile p.card-content { max-width: 760px; margin: 0 auto 22px; padding: 0; color: #455a64; line-height: 1.65; font-size: 15px; } body > .wrapper > .main-panel > .content .card.card-profile .alert { border-radius: 16px; box-shadow: none; margin-top: 18px; } /* ========================================================== CARD HEADER ICON / GRAFICI / STATISTICHE ========================================================== */ body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon { width: 62px !important; height: 62px !important; min-width: 62px !important; min-height: 62px !important; margin: -22px 0 0 18px !important; padding: 0 !important; border-radius: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; float: left !important; position: relative !important; z-index: 10 !important; overflow: visible !important; box-shadow: 0 14px 28px rgba(0,0,0,.18) !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon:after { display: none !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon i { width: 62px !important; height: 62px !important; margin: 0 !important; padding: 0 !important; line-height: 62px !important; text-align: center !important; font-size: 30px !important; color: #fff !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon[data-background-color="red"] { background: linear-gradient(135deg, #ef5350, #c62828) !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon[data-background-color="purple"] { background: linear-gradient(135deg, #ab47bc, #6a1b9a) !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon[data-background-color="blue"] { background: linear-gradient(135deg, #26c6da, #0277bd) !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon[data-background-color="green"] { background: linear-gradient(135deg, #66bb6a, #2e7d32) !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon[data-background-color="orange"] { background: linear-gradient(135deg, #ffa726, #ef6c00) !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon[data-background-color="rose"] { background: linear-gradient(135deg, #ec407a, #ad1457) !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon + .card-content { padding: 24px 24px 14px 105px !important; min-height: 86px; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon + .card-content .card-title, body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon + .card-content h4 { margin: 0 !important; color: #263238 !important; font-weight: 700; line-height: 1.35; } /* ========================================================== FORM ========================================================== */ body > .wrapper > .main-panel > .content .form-group { margin-top: 18px; } body > .wrapper > .main-panel > .content .form-control { border-radius: 10px; } body > .wrapper > .main-panel > .content .form-group label.control-label { color: #607d8b; font-weight: 600; } body > .wrapper > .main-panel > .content textarea.form-control { min-height: 110px; } body > .wrapper > .main-panel > .content .cke { border-radius: 14px !important; overflow: hidden; border-color: #dfe7ef !important; } /* ========================================================== BOTTONI Nota: .btn-xs NON viene più trasformato in cerchio. Se vuoi un bottone solo icona perfettamente tondo, aggiungi class="btn-icon". ========================================================== */ body > .wrapper > .main-panel > .content .btn { border-radius: 50px; font-weight: 600; box-shadow: 0 8px 18px rgba(0,0,0,.10); text-transform: none; position: relative; } body > .wrapper > .main-panel > .content .btn:hover, body > .wrapper > .main-panel > .content .btn:focus { box-shadow: 0 12px 24px rgba(0,0,0,.15); } body > .wrapper > .main-panel > .content .btn.btn-xs, body > .wrapper > .main-panel > .content a.btn.btn-xs, body > .wrapper > .main-panel > .content button.btn.btn-xs, body > .wrapper > .main-panel > .content input.btn.btn-xs, body > .wrapper > .main-panel > .content div.btn.btn-xs, body > .wrapper > .main-panel > .content .table .btn.btn-xs, body > .wrapper > .main-panel > .content .table a.btn.btn-xs, body > .wrapper > .main-panel > .content .table button.btn.btn-xs, body > .wrapper > .main-panel > .content .table div.btn.btn-xs { width: auto !important; max-width: none !important; height: auto !important; min-width: 36px !important; min-height: 34px !important; padding: 8px 14px !important; border-radius: 50px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; vertical-align: middle !important; text-align: center !important; } body > .wrapper > .main-panel > .content .btn.btn-xs i.material-icons, body > .wrapper > .main-panel > .content .btn.btn-xs i.fa, body > .wrapper > .main-panel > .content .btn.btn-xs i.glyphicon { position: static !important; width: auto !important; height: auto !important; min-width: 17px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; font-size: 17px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; } body > .wrapper > .main-panel > .content .btn.btn-xs.btn-block, body > .wrapper > .main-panel > .content .btn.btn-xs.w-100, body > .wrapper > .main-panel > .content .table .btn.btn-xs.btn-block, body > .wrapper > .main-panel > .content .table .btn.btn-xs.w-100 { width: 100% !important; min-width: 100% !important; } body > .wrapper > .main-panel > .content a > div.btn.btn-xs { text-decoration: none !important; } /* Da usare solo quando il bottone contiene esclusivamente un'icona */ body > .wrapper > .main-panel > .content .btn.btn-xs.btn-icon, body > .wrapper > .main-panel > .content .btn.btn-xs.btn-icon-only, body > .wrapper > .main-panel > .content .table .btn.btn-xs.btn-icon, body > .wrapper > .main-panel > .content .table .btn.btn-xs.btn-icon-only { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 50% !important; gap: 0 !important; } body > .wrapper > .main-panel > .content .btn.btn-xs .ripple-container { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; } body > .wrapper > .main-panel > .content .table .btn-group { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; vertical-align: middle !important; } body > .wrapper > .main-panel > .content .table .btn-group > .btn, body > .wrapper > .main-panel > .content .table .btn-group > .btn:first-child, body > .wrapper > .main-panel > .content .table .btn-group > .btn:last-child { margin: 0 !important; border-radius: 50px !important; } /* ========================================================== TABELLE ========================================================== */ body > .wrapper > .main-panel > .content .table-responsive { border-radius: 0 0 20px 20px; } body > .wrapper > .main-panel > .content .table { margin-bottom: 0; } body > .wrapper > .main-panel > .content .table > thead > tr > th, body > .wrapper > .main-panel > .content .table > thead > th, body > .wrapper > .main-panel > .content table.table > thead > tr > th, body > .wrapper > .main-panel > .content table.table > thead > th { color: #263238 !important; font-size: 11px; text-transform: uppercase; letter-spacing: 0px; font-weight: 700 !important; border-bottom: 1px solid #eef1f5 !important; text-shadow: none !important; } body > .wrapper > .main-panel > .content .table > thead > tr > th a, body > .wrapper > .main-panel > .content .table > thead > th a, body > .wrapper > .main-panel > .content table.table > thead > tr > th a, body > .wrapper > .main-panel > .content table.table > thead > th a { color: #263238 !important; font-weight: 700 !important; } body > .wrapper > .main-panel > .content .table > tbody > tr { transition: background .2s ease; } body > .wrapper > .main-panel > .content .table > tbody > tr:hover { background: #e7e7e7; } body > .wrapper > .main-panel > .content .table > tbody > tr > td { vertical-align: middle !important; color: #455a64; border-color: #eef1f5; } body > .wrapper > .main-panel > .content .table select.form-control { height: 34px; padding: 4px 8px; border-radius: 8px; } body > .wrapper > .main-panel > .content .table > tbody > tr.warning > td { background-color: #fff8e1 !important; } body > .wrapper > .main-panel > .content .table tr.small td { padding-top: 12px !important; padding-bottom: 12px !important; } body > .wrapper > .main-panel > .content .table tr.small .btn.btn-xs { margin: 2px !important; } body > .wrapper > .main-panel > .content .table tr.small td.text-center { text-align: center !important; vertical-align: middle !important; } body > .wrapper > .main-panel > .content .table tr.small .label { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; border-radius: 50px; padding: 5px 9px; } /* Da usare sugli header tabella colorati: */ body > .wrapper > .main-panel > .content .table > thead.wp-thead-blue > tr > th, body > .wrapper > .main-panel > .content .table > thead.wp-thead-blue > th { color: #fff !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0,0,0,.22); } body > .wrapper > .main-panel > .content .table > thead.wp-thead-blue > tr > th a, body > .wrapper > .main-panel > .content .table > thead.wp-thead-blue > th a, body > .wrapper > .main-panel > .content .table > thead.wp-thead-blue > tr > th i, body > .wrapper > .main-panel > .content .table > thead.wp-thead-blue > th i { color: #fff !important; } /* ========================================================== NAVBAR / SIDEBAR ========================================================== */ body > .wrapper > .main-panel .navbar .label.label-info { border-radius: 50px; padding: 8px 13px; background: linear-gradient(135deg, #012970, #00bcd4); box-shadow: 0 8px 18px rgba(0,0,0,.10); } body > .wrapper > .sidebar .logo, body > .wrapper > .sidebar .logo-mini { border-bottom: 1px solid rgba(255,255,255,.12); } body > .wrapper > .sidebar .nav li > a { border-radius: 10px; margin: 4px 10px; } body > .wrapper > .sidebar .nav li.active > a { box-shadow: 0 10px 24px rgba(0,0,0,.18); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 991px) { body > .wrapper > .main-panel > .content .card .card-content { padding: 20px; } } @media (max-width: 767px) { body > .wrapper > .main-panel > .content .card { border-radius: 16px; } body > .wrapper > .main-panel > .content .card > .card-header:not(.card-header-icon) { border-radius: 16px 16px 0 0 !important; padding: 20px !important; } body > .wrapper > .main-panel > .content .card .card-content { padding: 16px; } body > .wrapper > .main-panel > .content .card.card-profile { margin-top: 62px; } body > .wrapper > .main-panel > .content .card.card-profile .card-avatar { width: 96px; height: 96px; margin-top: -48px; } body > .wrapper > .main-panel > .content .card.card-profile > .content { padding: 0 18px 24px !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; margin: -18px 0 0 16px !important; border-radius: 14px !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon i { width: 56px !important; height: 56px !important; line-height: 56px !important; font-size: 27px !important; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon + .card-content { padding: 22px 18px 14px 88px !important; min-height: 76px; } body > .wrapper > .main-panel > .content .card > .card-header.card-header-icon + .card-content .card-title { font-size: 16px; line-height: 1.3; } body > .wrapper > .main-panel > .content .btn.pull-right { float: none !important; width: 100%; margin-top: 10px; } body > .wrapper > .main-panel > .content .table-responsive { border: 0; } } /* ========================================================== FIX celle azioni con più pulsanti Evita che Modifica/Cancella vadano uno sotto l'altro ========================================================== */ body > .wrapper > .main-panel > .content .table td:has(> a.btn.btn-xs) { white-space: nowrap !important; } body > .wrapper > .main-panel > .content .table td > a.btn.btn-xs { display: inline-flex !important; vertical-align: middle !important; margin: 2px 3px !important; } body > .wrapper > .main-panel > .content .table td > a.btn.btn-xs + a.btn.btn-xs { margin-left: 4px !important; } /* Celle azioni: larghezza minima per 2 pulsanti piccoli */ body > .wrapper > .main-panel > .content .table td.text-center:has(> a.btn.btn-xs + a.btn.btn-xs) { min-width: 92px !important; }