/* ============================================================================ daterangepicker - Preline skin (brand-aware) ---------------------------------------------------------------------------- Override "a parte": NON modifica il CSS vendor (daterangepicker.css). DEVE essere incluso SUBITO DOPO il vendor css (vedi daterangepicker-css.html), altrimenti il vendor - caricato spesso a fine body - vince per ordine di cascata. Tenerlo in custom.css NON funziona perché custom.css è nel , prima del vendor. Tutto è scopato sotto .daterangepicker. I colori usano le variabili di tema Preline/Tailwind (--color-primary-*), quindi il picker assume automaticamente il colore del brand attivo (Ducati rosso, Harley arancio, ecc.). Fallback neutro se assenti. ============================================================================ */ .daterangepicker { /* Default neutro scuro (nero/gray-800). Il BE non ha data-theme sull' e il primario base di Preline è blu: qui vogliamo invece il nero, coerente col resto del BE. Il colore del brand viene applicato solo sull'FE (regola [data-theme] qui sotto). */ --drp-primary: #1f2937; --drp-primary-hover: #111827; --drp-ring: #374151; border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: 0.75rem; /* rounded-xl */ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05); padding: 0.25rem; font-family: inherit; color: var(--color-gray-800, #1f2937); } /* FE pubblico: l' ha data-theme="". Il picker usa il colore del brand attivo (Ducati rosso, Harley arancio, ecc.). Nel BE questa regola non matcha (nessun data-theme) e resta il nero del default qui sopra. */ [data-theme] .daterangepicker { --drp-primary: var(--color-primary-600, #1f2937); --drp-primary-hover: var(--color-primary-700, #111827); --drp-ring: var(--color-primary-500, #374151); } /* Nasconde la freccia/caret del vendor: look "card" Preline pulito */ .daterangepicker:before, .daterangepicker:after { display: none; } .daterangepicker .drp-calendar { max-width: none; padding: 0.5rem; } /* Il vendor mette padding solo a sinistra su .left (pensato per il range a due calendari): per il single picker rende il calendario sbilanciato. Padding simmetrico. */ .daterangepicker .drp-calendar.left, .daterangepicker .drp-calendar.right { padding: 0.5rem; } .daterangepicker .calendar-table { border: 0; border-radius: 0.5rem; background-color: #fff; } /* Intestazione giorni della settimana */ .daterangepicker .calendar-table th { color: var(--color-gray-400, #9ca3af); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; } /* Celle giorno */ .daterangepicker .calendar-table td { color: var(--color-gray-700, #374151); border-radius: 0.5rem; transition: background-color .12s ease, color .12s ease; } .daterangepicker td.available:hover, .daterangepicker th.available:hover { background-color: var(--color-gray-100, #f3f4f6); border-color: transparent; border-radius: 0.5rem; } /* Frecce prev/next */ .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { border-color: var(--color-gray-500, #6b7280); } .daterangepicker td.in-range { background-color: color-mix(in oklch, var(--drp-primary) 12%, white); color: var(--color-gray-900, #111827); } .daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--drp-primary); color: #fff; border-radius: 0.5rem; } .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { color: var(--color-gray-300, #d1d5db); } /* ---------------------------------------------------------------------------- Dropdown mese / anno (showDropdowns: true) - stile