/* * ═══════════════════════════════════════════════════════════════ * LAZARUS — AdminLTE / Bootstrap Override v1.0 * Importa DOPO bootstrap.css e adminlte.css nel . * * * * Compatibile con AdminLTE 3.x (Bootstrap 4) e AdminLTE 4.x (Bootstrap 5). * ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); /* ═══════════════════════════════════════════════════════════════ 1. TOKEN BOOTSTRAP 5 (--bs-*) ═══════════════════════════════════════════════════════════════ */ :root { /* Palette primaria */ --bs-primary: #3E6B8C; --bs-primary-rgb: 62, 107, 140; --bs-secondary: #5E6368; --bs-secondary-rgb: 94, 99, 104; --bs-success: #2E7D5A; --bs-success-rgb: 46, 125, 90; --bs-info: #3E6B8C; --bs-info-rgb: 62, 107, 140; --bs-warning: #9A6C00; --bs-warning-rgb: 154, 108, 0; --bs-danger: #B83232; --bs-danger-rgb: 184, 50, 50; --bs-light: #F8F7F4; --bs-light-rgb: 248, 247, 244; --bs-dark: #1E2022; --bs-dark-rgb: 30, 32, 34; /* Typography */ --bs-font-sans-serif: 'Barlow', 'Helvetica Neue', Arial, sans-serif; --bs-font-monospace: 'JetBrains Mono', 'Courier New', monospace; --bs-body-font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif; --bs-body-font-size: 15px; --bs-body-font-weight: 400; --bs-body-line-height: 1.55; --bs-body-color: #2C2F32; --bs-body-bg: #F8F7F4; /* Link */ --bs-link-color: #3E6B8C; --bs-link-hover-color: #2C4F6A; --bs-link-color-rgb: 62, 107, 140; /* Border */ --bs-border-color: #E0DDD6; --bs-border-radius: 8px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 12px; --bs-border-radius-xl: 16px; --bs-border-radius-pill: 9999px; /* Shadow */ --bs-box-shadow: 0 4px 12px rgba(30,32,34,0.10), 0 2px 4px rgba(30,32,34,0.06); --bs-box-shadow-sm: 0 2px 4px rgba(30,32,34,0.08), 0 1px 2px rgba(30,32,34,0.04); --bs-box-shadow-lg: 0 8px 24px rgba(30,32,34,0.12), 0 4px 8px rgba(30,32,34,0.06); /* Lazarus tokens (riusati nel file) */ --laz-charcoal-900: #1E2022; --laz-charcoal-800: #2C2F32; --laz-charcoal-700: #3A3D41; --laz-charcoal-600: #474B4F; --laz-charcoal-500: #5E6368; --laz-charcoal-400: #878C91; --laz-charcoal-300: #B0B5BA; --laz-charcoal-200: #D4D7DA; --laz-charcoal-100: #ECEDEF; --laz-charcoal-50: #F5F5F6; --laz-blue-700: #2C4F6A; --laz-blue-500: #3E6B8C; --laz-blue-300: #6FA1C0; --laz-blue-100: #C8DFF0; --laz-blue-50: #EBF4FA; --laz-gold-700: #957632; --laz-gold-500: #B8A065; --laz-gold-50: #F8F4EA; --laz-color-border: #E0DDD6; --laz-shadow-sm: 0 2px 4px rgba(30,32,34,0.08), 0 1px 2px rgba(30,32,34,0.04); --laz-shadow-md: 0 4px 12px rgba(30,32,34,0.10), 0 2px 4px rgba(30,32,34,0.06); --laz-shadow-lg: 0 8px 24px rgba(30,32,34,0.12), 0 4px 8px rgba(30,32,34,0.06); --laz-transition-fast: 150ms ease-out; --laz-transition-base: 200ms ease-out; /* Sidebar brand logo (responsive cap) */ --laz-sidebar-logo-max-h: clamp(48px, 9vw, 72px); --laz-sidebar-logo-max-w: min(246px, calc(100% - 4px)); } /* ═══════════════════════════════════════════════════════════════ 2. BASE & TYPOGRAPHY ═══════════════════════════════════════════════════════════════ */ html { -webkit-text-size-adjust: 100%; } body { font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif !important; font-size: 15px !important; font-weight: 400; line-height: 1.55; color: #2C2F32; background-color: #F8F7F4 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; color: #2C2F32; letter-spacing: -0.01em; } h1, .h1 { font-size: 48px; } h2, .h2 { font-size: 38px; } h3, .h3 { font-size: 30px; } h4, .h4 { font-size: 24px; } h5, .h5 { font-size: 20px; font-weight: 600; } h6, .h6 { font-size: 17px; font-weight: 600; } p { line-height: 1.55; } a { color: #3E6B8C; transition: color var(--laz-transition-fast); } a:hover { color: #2C4F6A; text-decoration: underline; } code, pre, kbd, samp { font-family: 'JetBrains Mono', 'Courier New', monospace; } small, .small { font-size: 13px; } .text-muted { color: #878C91 !important; } hr { border: none; border-top: 1px solid #E0DDD6; margin: 16px 0; opacity: 1; } /* ═══════════════════════════════════════════════════════════════ 3. ADMINLTE LAYOUT ═══════════════════════════════════════════════════════════════ */ /* Wrapper */ .wrapper, .layout-fixed .wrapper { background-color: #F8F7F4; } /* Content wrapper */ .content-wrapper { background-color: #F8F7F4 !important; margin-left: 250px; } .content-wrapper > .content { padding: 24px; } .content-header { padding: 16px 24px 8px; } .content-header h1 { font-size: 22px; font-weight: 700; color: #2C2F32; margin: 0; } /* Footer */ .main-footer { background: #ffffff !important; border-top: 1px solid #E0DDD6 !important; color: #878C91 !important; font-size: 13px; padding: 12px 24px; } /* Preloader + Pace.js (plugin “center-radar” theme uses #2299dd by default) */ #loading-bar, .pace .pace-progress { background: var(--laz-blue-500); } .pace .pace-activity { border-color: var(--laz-blue-500) transparent transparent; } .pace .pace-activity::before { border-color: var(--laz-blue-500) transparent transparent; } /* AdminLTE .preloader is display:flex with default align-items:stretch, which vertically stretches the logo img to 100vh — fix layout + preserve aspect ratio */ .preloader { align-items: center; justify-content: center; } .preloader img { align-self: center; flex-shrink: 0; object-fit: contain; object-position: center; /* Grande a schermo intero, ma mai più largo/alto del viewport */ width: min(420px, 88vmin); height: min(420px, 88vmin); } /* ═══════════════════════════════════════════════════════════════ 4. TOPBAR / MAIN HEADER (AdminLTE .main-header) ═══════════════════════════════════════════════════════════════ */ .main-header, .main-header.navbar { background-color: #ffffff !important; border-bottom: 1px solid #E0DDD6 !important; box-shadow: none !important; min-height: 52px; padding: 0 24px; } .main-header .navbar-nav > .nav-item > .nav-link, .main-header .nav-link { color: #5E6368 !important; font-size: 13px; font-weight: 500; padding: 0 12px; height: 52px; display: flex; align-items: center; transition: color var(--laz-transition-fast); } .main-header .nav-link:hover, .main-header .navbar-nav > .nav-item > .nav-link:hover { color: #2C2F32 !important; background: transparent !important; } .main-header .navbar-brand { padding: 0; margin-right: 16px; } /* Hamburger / pushmenu */ [data-widget="pushmenu"] { color: #878C91 !important; } /* Search form in header */ .main-header .form-inline .form-control { background: #F8F7F4; border: 1.5px solid #E0DDD6; border-radius: 4px; font-size: 13px; color: #2C2F32; height: 34px; padding: 0 12px; transition: border-color var(--laz-transition-fast); } .main-header .form-inline .form-control:focus { border-color: #3E6B8C; box-shadow: 0 0 0 3px rgba(62,107,140,0.12); outline: none; } /* User dropdown in topbar */ .main-header .navbar-nav .user-panel { display: flex; align-items: center; gap: 8px; } /* ═══════════════════════════════════════════════════════════════ 5. SIDEBAR (AdminLTE .main-sidebar / .sidebar) ═══════════════════════════════════════════════════════════════ */ .main-sidebar, .main-sidebar.sidebar-dark-primary, .main-sidebar.sidebar-dark-blue, .main-sidebar.sidebar-dark-navy, .main-sidebar.sidebar-dark-info { background-color: #1E2022 !important; box-shadow: none !important; border-right: none !important; width: 250px; } /* Logo area */ .main-sidebar .brand-link, .brand-link { background-color: #1E2022 !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; padding: 3px 6px !important; display: flex; align-items: center; gap: 6px; min-height: 72px; position: relative; box-sizing: border-box; } .logo-xl.brand-image-xs, .logo-xs.brand-image-xs { left: unset !important; top: unset !important; } .main-sidebar .brand-link .brand-image, .main-sidebar .brand-link .brand-image-xs, .main-sidebar .brand-link .brand-image-xl, .main-sidebar .brand-link img { float: none !important; margin: 0 !important; width: auto !important; height: auto !important; max-width: var(--laz-sidebar-logo-max-w) !important; max-height: var(--laz-sidebar-logo-max-h) !important; object-fit: contain !important; object-position: left center !important; display: block !important; } @media (max-width: 575.98px) { :root { --laz-sidebar-logo-max-h: clamp(42px, 12vw, 58px); --laz-sidebar-logo-max-w: min(236px, calc(100vw - 28px)); } .main-sidebar .brand-link, .brand-link { padding: 2px 5px !important; min-height: 64px; } } .brand-link:hover { background-color: #1E2022 !important; } .brand-link .brand-text, .brand-text { font-family: 'Barlow', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: 0.01em; } /* Sidebar inner */ .sidebar { background-color: #1E2022 !important; padding: 6px 0; } /* User panel */ .sidebar .user-panel { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; gap: 10px; } .sidebar .user-panel .info a { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85) !important; } .sidebar .user-panel .info p { font-size: 11px; color: rgba(255,255,255,0.38) !important; margin: 0; } /* Nav */ .nav-sidebar { padding: 6px 0; } .nav-sidebar .nav-header { font-size: 9px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; color: rgba(255,255,255,0.25) !important; padding: 10px 16px 4px !important; background: transparent !important; } .nav-sidebar > .nav-item > .nav-link, .nav-sidebar .nav-link { font-family: 'Barlow', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: rgba(255,255,255,0.55) !important; padding: 8px 16px !important; border-radius: 0 !important; border-right: 2px solid transparent; display: flex; align-items: center; gap: 10px; transition: all var(--laz-transition-fast) !important; background: transparent !important; } .nav-sidebar > .nav-item > .nav-link:hover, .nav-sidebar .nav-link:hover { background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.88) !important; text-decoration: none; } .nav-sidebar > .nav-item.menu-open > .nav-link, .nav-sidebar > .nav-item > .nav-link.active, .nav-sidebar .nav-link.active { background: rgba(62,107,140,0.28) !important; color: #ffffff !important; font-weight: 600 !important; /* border-right-color: #3E6B8C !important; */ } /* Icon in nav */ .nav-sidebar .nav-link .nav-icon, .nav-sidebar .nav-icon { color: rgba(255,255,255,0.4) !important; font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; } .nav-sidebar .nav-link.active .nav-icon, .nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: #6FA1C0 !important; } /* Treeview sub-menu */ .nav-sidebar .nav-treeview { background: rgba(0,0,0,0.15) !important; padding: 4px 0; } .nav-sidebar .nav-treeview > .nav-item > .nav-link { padding-left: 42px !important; font-size: 12px !important; color: rgba(255,255,255,0.45) !important; } .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover { color: rgba(255,255,255,0.75) !important; } .nav-sidebar .nav-treeview > .nav-item > .nav-link.active { color: #6FA1C0 !important; background: rgba(62,107,140,0.18) !important; } /* Sidebar mini */ .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) { width: 60px !important; } .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link span, .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-header, .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-text { display: none; } /* ═══════════════════════════════════════════════════════════════ 6. CARDS (.card, .card-*) ═══════════════════════════════════════════════════════════════ */ .card { background-color: #ffffff !important; border: 1px solid #E0DDD6 !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(30,32,34,0.08), 0 1px 2px rgba(30,32,34,0.04) !important; margin-bottom: 20px; } .card-header { background-color: #ffffff !important; border-bottom: 1px solid #ECEDEF !important; padding: 14px 20px !important; display: flex; align-items: center; justify-content: space-between; border-radius: 8px 8px 0 0 !important; } .card-title, .card-header .card-title { font-family: 'Barlow', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; color: #2C2F32 !important; margin: 0; } .card-body { padding: 20px !important; } .card-footer { background-color: #F8F7F4 !important; border-top: 1px solid #E0DDD6 !important; padding: 12px 20px !important; border-radius: 0 0 8px 8px !important; } /* Card tools */ .card-tools { display: flex; align-items: center; gap: 4px; } .card-tools .btn-tool { color: #878C91 !important; background: transparent !important; border: none !important; padding: 4px 6px !important; border-radius: 4px !important; font-size: 13px; transition: color var(--laz-transition-fast), background var(--laz-transition-fast) !important; } .card-tools .btn-tool:hover { color: #2C2F32 !important; background: #ECEDEF !important; } /* Card variants */ .card.card-primary { border-top: 2px solid #3E6B8C !important; } .card.card-secondary { border-top: 2px solid #5E6368 !important; } .card.card-success { border-top: 2px solid #2E7D5A !important; } .card.card-warning { border-top: 2px solid #9A6C00 !important; } .card.card-danger { border-top: 2px solid #B83232 !important; } .card.card-info { border-top: 2px solid #3E6B8C !important; } .card.card-dark { border-top: 2px solid #1E2022 !important; } /* Collapsed card */ .card.collapsed-card .card-body, .card.collapsed-card .card-footer { display: none; } /* ═══════════════════════════════════════════════════════════════ 7. BUTTONS (.btn, .btn-*) ═══════════════════════════════════════════════════════════════ */ .btn { font-family: 'Barlow', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; padding: 6px 12px !important; border-radius: 4px !important; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color var(--laz-transition-base), border-color var(--laz-transition-base), color var(--laz-transition-base), box-shadow var(--laz-transition-base) !important; white-space: nowrap; user-select: none; line-height: 1; text-decoration: none !important; } .btn:focus, .btn.focus { outline: none !important; box-shadow: 0 0 0 3px rgba(62,107,140,0.20) !important; } /* Button groups — spacing between buttons (overrides Bootstrap flush join) */ .btn-toolbar { flex-wrap: wrap !important; gap: 5px !important; } .btn-group, .btn-group-vertical { gap: 5px !important; } .btn-group > .btn, .btn-group > .btn-group > .btn { margin-left: 0 !important; } .btn-group-vertical > .btn { margin-left: 0 !important; margin-top: 0 !important; } .btn-group > .btn, .btn-group-vertical > .btn { border-radius: 4px !important; } .btn-group-lg > .btn, .btn-group-lg > .btn-group > .btn { border-radius: 8px !important; } .btn-group-sm > .btn, .btn-group-sm > .btn-group > .btn { border-radius: 4px !important; } /* Sizes */ .btn-xs, .btn-group-xs > .btn { font-size: 11px !important; padding: 5px 10px !important; } .btn-sm, .btn-group-sm > .btn { font-size: 12px !important; padding: 6px 10px !important; } .btn-lg, .btn-group-lg > .btn { font-size: 15px !important; padding: 11px 26px !important; border-radius: 8px !important; } /* Primary */ .btn-primary { background-color: #3E6B8C !important; border-color: #3E6B8C !important; color: #ffffff !important; } .btn-primary:hover { background-color: #2C4F6A !important; border-color: #2C4F6A !important; } .btn-primary:active { background-color: #22435C !important; } .btn-outline-primary { background-color: transparent !important; border: 1.5px solid #3E6B8C !important; color: #3E6B8C !important; } .btn-outline-primary:hover { background-color: #EBF4FA !important; } /* Secondary */ .btn-secondary { background-color: #5E6368 !important; border-color: #5E6368 !important; color: #ffffff !important; } .btn-secondary:hover { background-color: #474B4F !important; } .btn-outline-secondary { background-color: transparent !important; border: 1.5px solid #D4D7DA !important; color: #474B4F !important; } .btn-outline-secondary:hover { background-color: #F5F5F6 !important; border-color: #B0B5BA !important; } /* Success */ .btn-success { background-color: #2E7D5A !important; border-color: #2E7D5A !important; color: #ffffff !important; } .btn-success:hover { background-color: #235f44 !important; } .btn-outline-success { background-color: transparent !important; border: 1.5px solid #2E7D5A !important; color: #2E7D5A !important; } .btn-outline-success:hover { background-color: #EAF5F0 !important; } /* Warning */ .btn-warning { background-color: #9A6C00 !important; border-color: #9A6C00 !important; color: #ffffff !important; } .btn-warning:hover { background-color: #7a5500 !important; } .btn-outline-warning { background-color: transparent !important; border: 1.5px solid #9A6C00 !important; color: #9A6C00 !important; } .btn-outline-warning:hover { background-color: #FFF5D6 !important; } /* Danger */ .btn-danger { background-color: #B83232 !important; border-color: #B83232 !important; color: #ffffff !important; } .btn-danger:hover { background-color: #9A2828 !important; } .btn-outline-danger { background-color: transparent !important; border: 1.5px solid #B83232 !important; color: #B83232 !important; } .btn-outline-danger:hover { background-color: #FCEAEA !important; } /* Info */ .btn-info { background-color: #3E6B8C !important; border-color: #3E6B8C !important; color: #ffffff !important; } .btn-info:hover { background-color: #2C4F6A !important; } /* Light / Dark */ .btn-light { background-color: #F8F7F4 !important; border: 1.5px solid #E0DDD6 !important; color: #2C2F32 !important; } .btn-light:hover { background-color: #ECEDEF !important; } .btn-dark { background-color: #1E2022 !important; border-color: #1E2022 !important; color: #ffffff !important; } .btn-dark:hover { background-color: #3A3D41 !important; } /* Default (AdminLTE 3 specific) */ .btn-default { background-color: #ffffff !important; border: 1.5px solid #D4D7DA !important; color: #474B4F !important; } .btn-default:hover { background-color: #F5F5F6 !important; } /* App (AdminLTE) */ .btn-app { background-color: #ffffff !important; border: 1px solid #E0DDD6 !important; border-radius: 8px !important; color: #5E6368 !important; padding: 12px 16px !important; font-size: 12px !important; } .btn-app:hover { background-color: #F8F7F4 !important; color: #3E6B8C !important; } /* Disabled */ .btn:disabled, .btn.disabled { opacity: 0.45 !important; cursor: not-allowed !important; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════ 8. FORM ELEMENTS ═══════════════════════════════════════════════════════════════ */ .form-control, .custom-select, .form-select { font-family: 'Barlow', sans-serif !important; font-size: 13px !important; font-weight: 400; color: #2C2F32 !important; background-color: #ffffff !important; border: 1.5px solid #D4D7DA !important; border-radius: 4px !important; padding: 8px 12px !important; height: auto !important; line-height: 1.55; transition: border-color var(--laz-transition-fast), box-shadow var(--laz-transition-fast) !important; box-shadow: none !important; -webkit-appearance: none; } .form-control::placeholder { color: #B0B5BA; } .form-control:hover, .custom-select:hover { border-color: #B0B5BA !important; } .form-control:focus, .custom-select:focus, .form-select:focus { border-color: #3E6B8C !important; box-shadow: 0 0 0 3px rgba(62,107,140,0.12) !important; outline: none !important; background-color: #ffffff !important; color: #2C2F32 !important; } /* States */ .form-control.is-valid, .was-validated .form-control:valid { border-color: #2E7D5A !important; background-image: none !important; } .form-control.is-valid:focus { box-shadow: 0 0 0 3px rgba(46,125,90,0.12) !important; } .form-control.is-invalid, .was-validated .form-control:invalid { border-color: #B83232 !important; background-image: none !important; } .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(184,50,50,0.12) !important; } .valid-feedback { color: #2E7D5A !important; font-size: 12px; } .invalid-feedback { color: #B83232 !important; font-size: 12px; } /* Input group */ .input-group-text { font-family: 'Barlow', sans-serif !important; font-size: 13px; background-color: #F8F7F4 !important; border: 1.5px solid #D4D7DA !important; color: #878C91 !important; border-radius: 4px !important; padding: 8px 12px !important; } /* Form label */ .form-label, .col-form-label, label { font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #878C91; margin-bottom: 4px; } .form-text, .form-text.text-muted { font-size: 11px; color: #878C91 !important; margin-top: 4px; } /* Checkbox & radio */ .form-check-input { width: 16px !important; height: 16px !important; margin-top: 3px; accent-color: #3E6B8C; cursor: pointer; } .form-check-input:checked { background-color: #3E6B8C !important; border-color: #3E6B8C !important; } .form-check-input:focus { box-shadow: 0 0 0 3px rgba(62,107,140,0.12) !important; border-color: #3E6B8C !important; } .form-check-label { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #2C2F32; cursor: pointer; } /* Switch */ .form-switch .form-check-input { width: 32px !important; height: 18px !important; border-radius: 9999px !important; } /* Range */ .form-range { accent-color: #3E6B8C; } /* Select2 (common plugin in AdminLTE) */ .select2-container { width: 100% !important; max-width: 100% !important; } .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .select2-container--bootstrap-5 .select2-selection--single, .select2-container--bootstrap-5 .select2-selection--multiple { background-color: #ffffff !important; border: 1.5px solid #D4D7DA !important; border-radius: 4px !important; min-height: 42px; height: auto !important; font-family: 'Barlow', sans-serif; font-size: 13px; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 4px 6px !important; width: 100% !important; box-sizing: border-box !important; } .select2-container--default .select2-selection--multiple .select2-selection__rendered::after { content: ""; display: block; clear: both; } .select2-container--default .select2-selection--multiple .select2-search--inline { float: left !important; width: auto !important; min-width: 0 !important; } .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { margin-top: 5px !important; width: 8em !important; min-width: 8em !important; max-width: 100% !important; } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #3E6B8C !important; box-shadow: 0 0 0 3px rgba(62,107,140,0.12) !important; } .select2-dropdown { border: 1px solid #E0DDD6 !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(30,32,34,0.12) !important; font-family: 'Barlow', sans-serif; font-size: 13px; } .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #EBF4FA !important; color: #3E6B8C !important; } .select2-container--default .select2-results__option--selected { background-color: #F8F7F4 !important; color: #2C2F32 !important; font-weight: 600; } /* Tag multi-select: blu tema Lazarus, testo bianco */ .select2-container--default .select2-selection--multiple .select2-selection__choice, .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { background-color: #3E6B8C !important; border: 1px solid #2C4F6A !important; color: #ffffff !important; border-radius: 4px !important; font-family: 'Barlow', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; float: left !important; display: inline-flex !important; align-items: center !important; flex-direction: row !important; gap: 0.4rem !important; margin: 5px 5px 0 0 !important; padding: 4px 10px 4px 6px !important; line-height: 1.3 !important; white-space: nowrap !important; box-sizing: border-box !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #ffffff !important; float: none !important; position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; order: 0 !important; width: auto !important; height: auto !important; margin: 0 0.15rem 0 0 !important; padding: 0 0.45rem 0 0 !important; border-right: 1px solid rgba(255, 255, 255, 0.35) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; opacity: 1 !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #EBF4FA !important; background-color: transparent !important; } /* Bootstrap-5 theme: la X è un'icona SVG in background, non testo */ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove { color: #ffffff !important; float: none !important; position: static !important; flex: 0 0 0.85rem !important; order: 0 !important; width: 0.85rem !important; height: 0.85rem !important; min-width: 0.85rem !important; margin: 0 0.35rem 0 0 !important; padding: 0 !important; overflow: hidden !important; text-indent: -9999px !important; white-space: nowrap !important; border-right: 1px solid rgba(255, 255, 255, 0.35) !important; padding-right: 0.45rem !important; margin-right: 0.35rem !important; opacity: 1 !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 0.65rem 0.65rem !important; } .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display { flex: 1 1 auto !important; padding-left: 0 !important; } .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover { color: #ffffff !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EBF4FA'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; } .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice .select2-selection__choice__display, .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice span { color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════ 9. TABLES (.table) ═══════════════════════════════════════════════════════════════ */ .table { font-family: 'Barlow', sans-serif !important; font-size: 13px; color: #2C2F32; border-collapse: collapse !important; width: 100%; --bs-table-bg: transparent; --bs-table-striped-bg: #F8F7F4; --bs-table-hover-bg: #F8F7F4; } .table thead th, .table > thead > tr > th { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; color: #878C91 !important; background-color: #F5F5F6 !important; border-bottom: 1px solid #E0DDD6 !important; padding: 10px 16px !important; white-space: nowrap; vertical-align: middle !important; } .table tbody td, .table > tbody > tr > td { padding: 11px 16px !important; border-bottom: 1px solid #ECEDEF !important; vertical-align: middle !important; color: #2C2F32; } .table tbody tr:last-child td { border-bottom: none !important; } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover { background-color: #F8F7F4 !important; --bs-table-hover-bg: #F8F7F4; } .table-striped > tbody > tr:nth-of-type(odd) > td, .table-striped > tbody > tr:nth-of-type(odd) { background-color: #FAFAF9 !important; } .table-bordered, .table-bordered th, .table-bordered td { border: 1px solid #ECEDEF !important; } .table-sm th, .table-sm td { padding: 6px 12px !important; } .table-dark { background-color: #1E2022 !important; color: rgba(255,255,255,0.85) !important; } .table-dark th, .table-dark td { border-color: rgba(255,255,255,0.08) !important; } /* DataTables (plugin often used with AdminLTE) */ table.dataTable thead th { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; color: #878C91 !important; } table.dataTable thead th.sorting::after, table.dataTable thead th.sorting_asc::after, table.dataTable thead th.sorting_desc::after { opacity: 0.6; color: #3E6B8C; } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { font-family: 'Barlow', sans-serif; font-size: 13px; border: 1.5px solid #D4D7DA; border-radius: 4px; padding: 6px 10px; color: #2C2F32; } .dataTables_wrapper .dataTables_filter input:focus { border-color: #3E6B8C; box-shadow: 0 0 0 3px rgba(62,107,140,0.12); outline: none; } .dataTables_wrapper .dataTables_paginate .paginate_button { font-family: 'Barlow', sans-serif !important; font-size: 13px !important; border-radius: 4px !important; color: #5E6368 !important; border: 1px solid #E0DDD6 !important; padding: 4px 10px !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #3E6B8C !important; border-color: #3E6B8C !important; color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════ 10. BADGES (.badge) ═══════════════════════════════════════════════════════════════ */ .badge { font-family: 'Barlow', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 10px !important; border-radius: 9999px !important; letter-spacing: 0.01em; } .badge.bg-primary, .badge-primary { background-color: #EBF4FA !important; color: #3E6B8C !important; } .badge.bg-secondary,.badge-secondary{ background-color: #ECEDEF !important; color: #5E6368 !important; } .badge.bg-success, .badge-success { background-color: #EAF5F0 !important; color: #2E7D5A !important; } .badge.bg-warning, .badge-warning { background-color: #FFF5D6 !important; color: #9A6C00 !important; } .badge.bg-danger, .badge-danger { background-color: #FCEAEA !important; color: #B83232 !important; } .badge.bg-info, .badge-info { background-color: #EBF4FA !important; color: #3E6B8C !important; } .badge.bg-light, .badge-light { background-color: #ECEDEF !important; color: #5E6368 !important; } .badge.bg-dark, .badge-dark { background-color: #2C2F32 !important; color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════ 11. ALERTS (.alert) ═══════════════════════════════════════════════════════════════ */ .alert { font-family: 'Barlow', sans-serif; font-size: 13px; border-radius: 4px !important; border: 1px solid !important; padding: 14px 16px !important; display: flex; align-items: flex-start; gap: 10px; } .alert-primary { background: #EBF4FA !important; border-color: #C8DFF0 !important; color: #3E6B8C !important; } .alert-secondary{ background: #F5F5F6 !important; border-color: #D4D7DA !important; color: #474B4F !important; } .alert-success { background: #EAF5F0 !important; border-color: #B2D8C8 !important; color: #2E7D5A !important; } .alert-warning { background: #FFF5D6 !important; border-color: #F0D880 !important; color: #9A6C00 !important; } .alert-danger { background: #FCEAEA !important; border-color: #F0B0B0 !important; color: #B83232 !important; } .alert-info { background: #EBF4FA !important; border-color: #C8DFF0 !important; color: #3E6B8C !important; } .alert-light { background: #F8F7F4 !important; border-color: #E0DDD6 !important; color: #5E6368 !important; } .alert-dark { background: #2C2F32 !important; border-color: #1E2022 !important; color: rgba(255,255,255,0.85) !important; } .alert .btn-close { filter: none; opacity: 0.5; } .alert .btn-close:hover { opacity: 1; } .alert-dismissible .btn-close { padding: 14px 16px !important; } /* ═══════════════════════════════════════════════════════════════ 12. MODAL (.modal) ═══════════════════════════════════════════════════════════════ */ .modal-backdrop { background-color: rgba(30, 32, 34, 0.52) !important; } .modal-backdrop.show { opacity: 1 !important; } .modal-content { border: none !important; border-radius: 12px !important; box-shadow: 0 16px 40px rgba(30,32,34,0.14), 0 6px 12px rgba(30,32,34,0.08) !important; background: #ffffff !important; } .modal-header { padding: 18px 24px !important; border-bottom: 1px solid #E0DDD6 !important; border-radius: 12px 12px 0 0 !important; background: #ffffff !important; } .modal-title { font-family: 'Barlow', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #2C2F32 !important; } .modal-body { padding: 24px !important; font-size: 14px; } .modal-footer { padding: 14px 24px !important; border-top: 1px solid #E0DDD6 !important; border-radius: 0 0 12px 12px !important; background: #ffffff !important; gap: 8px; } .btn-close { opacity: 0.45; transition: opacity var(--laz-transition-fast); } .btn-close:hover { opacity: 0.85; } /* ═══════════════════════════════════════════════════════════════ 13. DROPDOWN (.dropdown) ═══════════════════════════════════════════════════════════════ */ .dropdown-menu { background: #ffffff !important; border: 1px solid #E0DDD6 !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(30,32,34,0.12) !important; padding: 4px 0 !important; font-family: 'Barlow', sans-serif; font-size: 13px; min-width: 180px; } .dropdown-item { font-family: 'Barlow', sans-serif !important; font-size: 13px !important; font-weight: 400; color: #2C2F32 !important; padding: 8px 16px !important; transition: background var(--laz-transition-fast) !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: #F8F7F4 !important; color: #2C2F32 !important; } .dropdown-item:active { background-color: #EBF4FA !important; color: #3E6B8C !important; } .dropdown-item.active { background-color: #EBF4FA !important; color: #3E6B8C !important; font-weight: 600; } .dropdown-item.disabled, .dropdown-item:disabled { color: #B0B5BA !important; } .dropdown-divider { border-top: 1px solid #E0DDD6 !important; margin: 4px 0 !important; } .dropdown-header { font-family: 'Barlow', sans-serif !important; font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #878C91 !important; padding: 6px 16px 4px !important; } /* ═══════════════════════════════════════════════════════════════ 14. PAGINATION (.pagination) ═══════════════════════════════════════════════════════════════ */ .pagination { gap: 4px; } .page-link { font-family: 'Barlow', sans-serif !important; font-size: 13px !important; font-weight: 500; color: #5E6368 !important; background-color: #ffffff !important; border: 1px solid #E0DDD6 !important; border-radius: 4px !important; padding: 6px 12px !important; transition: all var(--laz-transition-fast) !important; text-decoration: none !important; } .page-link:hover { background-color: #F8F7F4 !important; border-color: #B0B5BA !important; color: #2C2F32 !important; } .page-link:focus { box-shadow: 0 0 0 3px rgba(62,107,140,0.12) !important; outline: none !important; } .page-item.active .page-link { background-color: #3E6B8C !important; border-color: #3E6B8C !important; color: #ffffff !important; } .page-item.disabled .page-link { color: #B0B5BA !important; background-color: #F5F5F6 !important; border-color: #ECEDEF !important; } /* ═══════════════════════════════════════════════════════════════ 15. BREADCRUMB (.breadcrumb) ═══════════════════════════════════════════════════════════════ */ .breadcrumb { background-color: transparent !important; padding: 0 !important; margin: 0 !important; font-family: 'Barlow', sans-serif; font-size: 13px; } .breadcrumb-item { color: #878C91; } .breadcrumb-item a { color: #878C91 !important; text-decoration: none; transition: color var(--laz-transition-fast); } .breadcrumb-item a:hover { color: #3E6B8C !important; } .breadcrumb-item.active { color: #2C2F32 !important; font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { color: #B0B5BA !important; content: "/" !important; } /* ═══════════════════════════════════════════════════════════════ 16. PROGRESS (.progress) ═══════════════════════════════════════════════════════════════ */ .progress { background-color: #ECEDEF !important; border-radius: 9999px !important; height: 6px !important; box-shadow: none !important; overflow: hidden; } .progress-bar { background-color: #3E6B8C !important; border-radius: 9999px !important; transition: width 300ms ease-out !important; } .progress-bar.bg-success { background-color: #2E7D5A !important; } .progress-bar.bg-warning { background-color: #9A6C00 !important; } .progress-bar.bg-danger { background-color: #B83232 !important; } .progress-bar.bg-info { background-color: #3E6B8C !important; } .progress-sm { height: 4px !important; } .progress-lg { height: 12px !important; } .progress-xl { height: 16px !important; } /* Progress with text label */ .progress-bar[aria-valuenow] { font-size: 10px; font-weight: 700; } /* ═══════════════════════════════════════════════════════════════ 17. NAV TABS & PILLS (.nav-tabs, .nav-pills) ═══════════════════════════════════════════════════════════════ */ .nav-tabs { border-bottom: 1px solid #E0DDD6 !important; } .nav-tabs .nav-link { font-family: 'Barlow', sans-serif !important; font-size: 13px !important; font-weight: 500; color: #878C91 !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: 10px 18px !important; margin-bottom: -1px; transition: color var(--laz-transition-fast), border-color var(--laz-transition-fast) !important; background: transparent !important; } .nav-tabs .nav-link:hover { color: #2C2F32 !important; border-color: transparent !important; background: transparent !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #3E6B8C !important; font-weight: 600 !important; border-bottom-color: #3E6B8C !important; background: transparent !important; } .tab-content > .tab-pane { padding-top: 20px; } /* Pills */ .nav-pills { /* background: #ECEDEF; */ border-radius: 8px; padding: 4px; gap: 2px; } .nav-pills .nav-link { font-family: 'Barlow', sans-serif !important; font-size: 13px !important; font-weight: 500; color: #5E6368 !important; border-radius: 6px !important; padding: 6px 16px !important; transition: all var(--laz-transition-fast) !important; background: transparent !important; } .nav-pills .nav-link:hover { color: #2C2F32 !important; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #ffffff !important; color: #2C2F32 !important; font-weight: 600 !important; box-shadow: 0 1px 3px rgba(30,32,34,0.08) !important; } /* ═══════════════════════════════════════════════════════════════ 18. ACCORDION (.accordion) ═══════════════════════════════════════════════════════════════ */ .accordion { border: 1px solid #E0DDD6; border-radius: 8px; overflow: hidden; } .accordion-item { background-color: #ffffff !important; border: none !important; border-top: 1px solid #E0DDD6 !important; } .accordion-item:first-child { border-top: none !important; } .accordion-header { margin: 0; } .accordion-button { font-family: 'Barlow', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #2C2F32 !important; background: #ffffff !important; padding: 14px 18px !important; border: none !important; box-shadow: none !important; transition: background var(--laz-transition-fast) !important; } .accordion-button:not(.collapsed) { background: #EBF4FA !important; color: #3E6B8C !important; box-shadow: none !important; } .accordion-button::after { filter: none; opacity: 0.5; } .accordion-button:not(.collapsed)::after { opacity: 1; } .accordion-button:hover { background: #F8F7F4 !important; } .accordion-button:focus { box-shadow: none !important; outline: none; } .accordion-body { padding: 14px 18px !important; font-size: 13px; color: #5E6368; background: #ffffff; border-top: 1px solid #E0DDD6; } /* ═══════════════════════════════════════════════════════════════ 19. TOASTS (.toast) ═══════════════════════════════════════════════════════════════ */ .toast { font-family: 'Barlow', sans-serif !important; font-size: 13px; background-color: #ffffff !important; border: 1px solid #E0DDD6 !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(30,32,34,0.12) !important; } .toast-header { background-color: #ffffff !important; border-bottom: 1px solid #E0DDD6 !important; font-weight: 700; color: #2C2F32 !important; padding: 10px 14px !important; border-radius: 8px 8px 0 0 !important; } .toast-body { padding: 12px 14px !important; color: #5E6368; } /* ═══════════════════════════════════════════════════════════════ 20. ADMINLTE SPECIFIC: Small-box, Info-box, Callout ═══════════════════════════════════════════════════════════════ */ /* Small box */ .small-box { background: #ffffff !important; border: 1px solid #E0DDD6 !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(30,32,34,0.08) !important; padding: 18px 20px !important; overflow: hidden; position: relative; margin-bottom: 20px; } .small-box > .inner { padding: 0 !important; z-index: 1; position: relative; } .small-box > .inner h3 { font-size: 32px !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; color: inherit; margin: 0 0 4px !important; } .small-box > .inner p { font-size: 13px !important; color: inherit; opacity: 0.8; margin: 0; } .small-box .icon { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font-size: 70px; opacity: 0.1; color: inherit; pointer-events: none; } .small-box > a, .small-box .small-box-footer { display: block; margin: 12px -20px -18px; padding: 8px 20px; background: rgba(0,0,0,0.08) !important; font-size: 12px; font-weight: 600; color: inherit !important; text-align: right; text-decoration: none; transition: background var(--laz-transition-fast) !important; } .small-box > a:hover { background: rgba(0,0,0,0.15) !important; } /* Color variants — tinted with Lazarus colors */ .small-box.bg-info, .bg-info { background: #EBF4FA !important; color: #2C4F6A !important; border-color: #C8DFF0 !important; } .small-box.bg-success, .bg-success { background: #EAF5F0 !important; color: #1f5a3f !important; border-color: #B2D8C8 !important; } .small-box.bg-warning, .bg-warning { background: #FFF5D6 !important; color: #7a5500 !important; border-color: #F0D880 !important; } .small-box.bg-danger, .bg-danger { background: #FCEAEA !important; color: #9A2828 !important; border-color: #F0B0B0 !important; } .small-box.bg-primary, .bg-primary { background: #EBF4FA !important; color: #2C4F6A !important; border-color: #C8DFF0 !important; } .small-box.bg-dark, .bg-dark { background: #1E2022 !important; color: rgba(255,255,255,0.85) !important; border-color: #1E2022 !important; } /* Info box */ .info-box { background: #ffffff !important; border: 1px solid #E0DDD6 !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(30,32,34,0.08) !important; display: flex; min-height: auto !important; padding: 14px 16px !important; gap: 14px; align-items: center; margin-bottom: 16px; } .info-box-icon { width: 48px !important; height: 48px !important; border-radius: 8px !important; display: flex; align-items: center; justify-content: center; font-size: 22px !important; flex-shrink: 0; background: var(--laz-blue-50) !important; color: #3E6B8C !important; } .info-box .info-box-icon.bg-info { background: #EBF4FA !important; color: #3E6B8C !important; } .info-box .info-box-icon.bg-success { background: #EAF5F0 !important; color: #2E7D5A !important; } .info-box .info-box-icon.bg-warning { background: #FFF5D6 !important; color: #9A6C00 !important; } .info-box .info-box-icon.bg-danger { background: #FCEAEA !important; color: #B83232 !important; } .info-box .info-box-icon.bg-primary { background: #EBF4FA !important; color: #3E6B8C !important; } .info-box-content { padding: 0 !important; flex: 1; } .info-box-text { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; color: #878C91 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .info-box-number { font-size: 22px !important; font-weight: 800 !important; color: #2C2F32 !important; line-height: 1.1; } /* Callout */ .callout { border-radius: 4px !important; border-left: 4px solid #E0DDD6 !important; background: #F8F7F4 !important; padding: 14px 18px !important; margin-bottom: 16px; font-family: 'Barlow', sans-serif; font-size: 13px; box-shadow: none !important; } .callout h4, .callout .callout-title { font-size: 14px !important; font-weight: 700 !important; margin-bottom: 6px !important; } .callout-info { border-left-color: #3E6B8C !important; background: #EBF4FA !important; color: #2C4F6A !important; } .callout-success { border-left-color: #2E7D5A !important; background: #EAF5F0 !important; color: #1f5a3f !important; } .callout-warning { border-left-color: #9A6C00 !important; background: #FFF5D6 !important; color: #7a5500 !important; } .callout-danger { border-left-color: #B83232 !important; background: #FCEAEA !important; color: #9A2828 !important; } .callout-primary { border-left-color: #3E6B8C !important; background: #EBF4FA !important; color: #2C4F6A !important; } /* ═══════════════════════════════════════════════════════════════ 21. LIST GROUP (.list-group) ═══════════════════════════════════════════════════════════════ */ .list-group-item { font-family: 'Barlow', sans-serif; font-size: 13px; padding: 10px 16px !important; border-color: #E0DDD6 !important; color: #2C2F32; background-color: #ffffff !important; transition: background var(--laz-transition-fast); } .list-group-item:hover { background-color: #F8F7F4 !important; } .list-group-item.active { background-color: #EBF4FA !important; border-color: #C8DFF0 !important; color: #3E6B8C !important; font-weight: 600; } .list-group-item-action:focus, .list-group-item-action:hover { background-color: #F8F7F4 !important; color: #2C2F32 !important; } .list-group-item-primary { background: #EBF4FA !important; color: #2C4F6A !important; border-color: #C8DFF0 !important; } .list-group-item-success { background: #EAF5F0 !important; color: #1f5a3f !important; border-color: #B2D8C8 !important; } .list-group-item-warning { background: #FFF5D6 !important; color: #7a5500 !important; border-color: #F0D880 !important; } .list-group-item-danger { background: #FCEAEA !important; color: #9A2828 !important; border-color: #F0B0B0 !important; } /* ═══════════════════════════════════════════════════════════════ 22. TOOLTIPS & POPOVERS ═══════════════════════════════════════════════════════════════ */ .tooltip-inner { font-family: 'Barlow', sans-serif !important; font-size: 12px !important; font-weight: 500; background-color: #1E2022 !important; border-radius: 4px !important; padding: 5px 10px !important; max-width: 240px; } .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #1E2022 !important; } .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #1E2022 !important; } .tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: #1E2022 !important; } .tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: #1E2022 !important; } .popover { font-family: 'Barlow', sans-serif !important; font-size: 13px; border: 1px solid #E0DDD6 !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(30,32,34,0.12) !important; } .popover-header { background-color: #F8F7F4 !important; border-bottom: 1px solid #E0DDD6 !important; font-size: 13px !important; font-weight: 700 !important; color: #2C2F32 !important; border-radius: 8px 8px 0 0 !important; padding: 10px 14px !important; } .popover-body { font-size: 13px !important; color: #5E6368 !important; padding: 12px 14px !important; } /* ═══════════════════════════════════════════════════════════════ 23. SPINNER (.spinner-*) ═══════════════════════════════════════════════════════════════ */ .spinner-border { color: #3E6B8C; } .spinner-grow { color: #3E6B8C; } .spinner-border-sm, .spinner-grow-sm { width: 1rem; height: 1rem; } /* ═══════════════════════════════════════════════════════════════ 24. UTILITIES OVERRIDE ═══════════════════════════════════════════════════════════════ */ /* Background colors */ .bg-primary { background-color: #3E6B8C !important; } .bg-secondary { background-color: #5E6368 !important; } .bg-success { background-color: #2E7D5A !important; } .bg-warning { background-color: #9A6C00 !important; } .bg-danger { background-color: #B83232 !important; } .bg-info { background-color: #3E6B8C !important; } .bg-light { background-color: #F8F7F4 !important; } .bg-dark { background-color: #1E2022 !important; } .bg-white { background-color: #ffffff !important; } /* Text colors */ .text-primary { color: #3E6B8C !important; } .text-secondary { color: #5E6368 !important; } .text-success { color: #2E7D5A !important; } .text-warning { color: #9A6C00 !important; } .text-danger { color: #B83232 !important; } .text-info { color: #3E6B8C !important; } .text-light { color: #F8F7F4 !important; } .text-dark { color: #1E2022 !important; } .text-white { color: #ffffff !important; } .text-muted { color: #878C91 !important; } /* Border */ .border { border-color: #E0DDD6 !important; } .border-primary { border-color: #3E6B8C !important; } .border-secondary { border-color: #5E6368 !important; } .border-success { border-color: #2E7D5A !important; } .border-warning { border-color: #9A6C00 !important; } .border-danger { border-color: #B83232 !important; } /* Shadows */ .shadow-sm { box-shadow: 0 2px 4px rgba(30,32,34,0.08) !important; } .shadow { box-shadow: 0 4px 12px rgba(30,32,34,0.10) !important; } .shadow-lg { box-shadow: 0 8px 24px rgba(30,32,34,0.12) !important; } .shadow-none { box-shadow: none !important; } /* Border radius */ .rounded { border-radius: 8px !important; } .rounded-sm { border-radius: 4px !important; } .rounded-lg { border-radius: 12px !important; } .rounded-pill { border-radius: 9999px !important; } .rounded-0 { border-radius: 0 !important; } /* ═══════════════════════════════════════════════════════════════ 25. SCROLLBAR ═══════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #D4D7DA; border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: #B0B5BA; } /* ═══════════════════════════════════════════════════════════════ 26. RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 991px) { .content-wrapper { margin-left: 0; } }