/** * GPL Log - Custom Styles * * Stili personalizzati che estendono Tailwind CSS */ /* ============================================ CSS Variables - Colori principali ============================================ */ :root { /* DaisyUI theme tokens */ --p: #2563EB; --pf: #fff; --s: #10B981; --sf: #fff; --a: #F59E0B; --af: #fff; --b1: #FFFFFF; --b2: #F8FAFC; --b3: #DBEAFE; --bc: #1E293B; --in: #6366F1; --su: #22C55E; --er: #EF4444; --primary: #2563EB; --primary-hover: #1D4ED8; --primary-light: #DBEAFE; --background: #FFFFFF; --background-alt: #F8FAFC; --text: #1E293B; --text-secondary: #64748B; --text-muted: #64748B; --border: #E2E8F0; --gpl-color: #10B981; --benzina-color: #F59E0B; --diesel-color: #6366F1; --error: #EF4444; --success: #22C55E; /* Surface/card colors */ --surface: #FFFFFF; --surface-alt: #111827; --input-bg: #FFFFFF; --input-border: #E2E8F0; --input-text: #1E293B; /* Badge colors */ --badge-gpl-bg: #D1FAE5; --badge-gpl-text: #065F46; --badge-benzina-bg: #FEF3C7; --badge-benzina-text: #92400E; --badge-diesel-bg: #E0E7FF; --badge-diesel-text: #3730A3; /* Table */ --table-header-bg: var(--background-alt); --table-row-hover: var(--primary-light); --table-row-odd: transparent; --table-border: var(--border); /* Glass card */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.45); /* Sidebar/header */ --sidebar-bg: var(--surface); --header-bg: var(--surface); --menu-hover: var(--primary-light); } body.theme-dark { --background: #0f172a; --background-alt: #020617; --text: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --border: #334155; --primary-light: rgba(37, 99, 235, 0.15); --surface: #111827; --input-bg: #0b1220; --input-border: #334155; --input-text: #e5e7eb; --badge-gpl-bg: rgba(16, 185, 129, 0.2); --badge-gpl-text: #6ee7b7; --badge-benzina-bg: rgba(245, 158, 11, 0.2); --badge-benzina-text: #fcd34d; --badge-diesel-bg: rgba(99, 102, 241, 0.2); --badge-diesel-text: #a5b4fc; --table-header-bg: #111827; --table-row-hover: #1e293b; --table-row-odd: rgba(15, 23, 42, 0.5); --table-border: #1f2937; --glass-bg: rgba(17, 24, 39, 0.45); --glass-border: rgba(255, 255, 255, 0.06); --sidebar-bg: #111827; --header-bg: #111827; --menu-hover: #1e293b; } /* Anti-flash: applicato subito da theme-init.js prima che il body venga renderizzato. Imposta il background scuro sull'elemento html così il primo paint è già nella tonalità corretta, evitando il lampo bianco prima che applyTheme() aggiunga theme-dark a . */ html.theme-dark-init { background-color: #020617; color-scheme: dark; } html.theme-dark-init body { background: radial-gradient(circle at top right, #1e293b 0%, #020617 50%, #020617 100%) !important; color: #e2e8f0 !important; } html.theme-dark-init .bg-gray-50 { background-color: #020617 !important; } /* ============================================ Base Styles ============================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* DaisyUI theme variables for data-theme="fueltrack" */ [data-theme="fueltrack"] { --color-primary: #2563EB; --color-primary-content: #ffffff; --color-secondary: #10B981; --color-secondary-content: #ffffff; --color-accent: #F59E0B; --color-accent-content: #ffffff; --color-base-100: #FFFFFF; --color-base-200: #F8FAFC; --color-base-300: #DBEAFE; --color-base-content: #1E293B; --color-info: #6366F1; --color-success: #22C55E; --color-error: #EF4444; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--background-alt); color: var(--text); min-height: 100vh; } body.theme-dark { background: radial-gradient(circle at top right, #1e293b 0%, #020617 50%, #020617 100%); color: var(--text); } /* Surface overrides via CSS variables (eliminates per-class dark overrides) */ body.theme-dark .bg-white { background-color: var(--surface) !important; } body.theme-dark .bg-gray-50 { background-color: var(--background-alt) !important; } body.theme-dark .bg-gray-100 { background-color: #1f2937 !important; } body.theme-dark .text-gray-800, body.theme-dark .text-gray-700, body.theme-dark .text-gray-900 { color: var(--input-text) !important; } body.theme-dark .text-gray-600, body.theme-dark .text-gray-500, body.theme-dark .text-gray-400 { color: var(--text-secondary) !important; } body.theme-dark .border-gray-200, body.theme-dark .border-gray-300, body.theme-dark .border-gray-100 { border-color: var(--border) !important; } /* Input visibility in dark mode (unified) */ body.theme-dark input, body.theme-dark select, body.theme-dark textarea, body.theme-dark .form-input, body.theme-dark .dataTables_wrapper .dataTables_filter input { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important; -webkit-text-fill-color: var(--input-text) !important; } body.theme-dark select option { background-color: var(--input-bg); color: var(--input-text); } body.theme-dark input:focus, body.theme-dark select:focus, body.theme-dark textarea:focus { box-shadow: 0 0 0 3px rgba(37,99,235,0.12); outline: none; } body.theme-dark input::placeholder, body.theme-dark textarea::placeholder { color: var(--text-muted) !important; } /* Make calendar picker icon visible in dark mode */ body.theme-dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(2) !important; } input[type="date"]::-webkit-calendar-picker-indicator { filter: none; } body.theme-dark .menu-item:hover { background-color: var(--menu-hover) !important; } body.theme-dark #recent-refuelings tr:hover { background-color: var(--table-row-hover) !important; } /* Statistics table dark mode */ body.theme-dark #statistics-summary-table thead { background-color: var(--table-header-bg) !important; } body.theme-dark #statistics-summary-table tbody tr { background-color: var(--input-bg); } body.theme-dark #statistics-summary-table tbody tr:hover { background-color: var(--table-row-hover) !important; } body.theme-dark #statistics-summary-table tbody tr.bg-blue-50 { background-color: #1e3a8a !important; } body.theme-dark #statistics-summary-table tbody, body.theme-dark #statistics-summary-table tbody tr, body.theme-dark #statistics-summary-table td, body.theme-dark #statistics-summary-table th { border-color: var(--border) !important; } body.theme-dark #statistics-summary-table td, body.theme-dark #statistics-summary-table th { color: var(--input-text); } body.theme-dark .stat-card:hover { box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.9); } /* ============================================ Sidebar Styles ============================================ */ .sidebar { transition: transform 0.3s ease-in-out; } .sidebar.closed { transform: translateX(-100%); } @media (min-width: 1024px) { .sidebar { transform: translateX(0) !important; } } /* Overlay per mobile: overlay uses an #id (sidebar-overlay) in markup; keep id-based rules inlined where needed. */ /* ============================================ Card Styles ============================================ */ .stat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } /* Glass effect for cards */ .glass-card, .bg-white.rounded-xl.shadow-sm, .bg-white.rounded-2xl.shadow-xl { background: var(--glass-bg) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--glass-border); } body.theme-dark .glass-card, body.theme-dark .bg-white.rounded-xl.shadow-sm, body.theme-dark .bg-white.rounded-2xl.shadow-xl { background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; } /* Make small containers slightly more pronounced */ .glass-card .chart-container, .glass-card .overflow-x-auto { background: transparent !important; } /* ============================================ Fuel Type Colors ============================================ */ .fuel-gpl { color: var(--gpl-color); } .fuel-benzina { color: var(--benzina-color); } .bg-gpl { background-color: var(--gpl-color); } .bg-benzina { background-color: var(--benzina-color); } .badge-gpl { background-color: var(--badge-gpl-bg); color: var(--badge-gpl-text); white-space: nowrap; display: inline-block; min-width: 3.5rem; text-align: center; } .badge-benzina { background-color: var(--badge-benzina-bg); color: var(--badge-benzina-text); white-space: nowrap; display: inline-block; min-width: 3.5rem; text-align: center; } .badge-diesel { background-color: var(--badge-diesel-bg); color: var(--badge-diesel-text); white-space: nowrap; display: inline-block; min-width: 3.5rem; text-align: center; } .fuel-diesel { color: var(--diesel-color); } .bg-diesel { background-color: var(--diesel-color); } .border-diesel { border-color: var(--diesel-color); } .text-diesel { color: var(--diesel-color); } .hover\:border-diesel:hover { border-color: var(--diesel-color); } .hover\:text-diesel:hover { color: var(--diesel-color); } /* ============================================ Form Styles ============================================ */ .form-input { transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); outline: none; } /* Normalize date input sizing on small screens to avoid visual overflow on iOS/Android native pickers which can change control height. */ @media (max-width: 640px) { input[type="date"].form-input { height: 44px; /* match other inputs */ padding-left: 2.5rem; /* keep space for calendar icon */ padding-right: 1rem; font-size: 16px; line-height: 1.2; -webkit-appearance: textfield; /* normalize on iOS without removing picker */ } /* ensure relative containers don't clip the native picker UI */ .relative { overflow: visible; } } /* Prevent inputs from causing horizontal overflow on small screens */ @media (max-width: 640px) { .form-input { max-width: 100%; min-width: 0; /* allow shrinking inside flex containers */ box-sizing: border-box; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[type="date"].form-input { /* ensure the visible text truncates instead of expanding the control */ padding-right: 1.5rem; } } /* iOS-specific fixes when the app is installed as PWA / Web App Target Safari/WebKit engines to avoid native date formatter expanding the control */ @supports (-webkit-touch-callout: none) { @media (max-width: 640px) { input[type="date"].form-input { -webkit-appearance: none; appearance: none; height: 44px; line-height: 44px; /* vertically center the displayed date */ font-size: 16px; padding-left: 2.5rem; padding-right: 1.25rem; padding-top: 0; padding-bottom: 0; text-align: left; box-sizing: border-box; border-radius: 0.5rem; } /* Ensure the internal date-edit parts don't overflow the control */ input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-datetime-edit-fields-wrapper, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-year-field { display: inline-block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; vertical-align: middle !important; line-height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Reduce the indicator size so it doesn't push the layout */ input[type="date"]::-webkit-calendar-picker-indicator { height: 20px !important; width: 20px !important; margin-right: 6px !important; vertical-align: middle !important; opacity: 0.9; } /* Prevent the container from clipping visible native UI in PWA mode */ .relative { overflow: visible; } } } /* Fix: ensure date inner fields don't expand control on iOS/Android */ @media (max-width: 640px) { input[type="date"].form-input { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Limit internal date-edit pseudo elements that can push width */ input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-datetime-edit-fields-wrapper, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-year-field, input[type="date"]::-webkit-datetime-edit-hour-field, input[type="date"]::-webkit-datetime-edit-minute-field { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } } /* ============================================ Button Animations ============================================ */ .btn-primary { transition: all 0.2s ease; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4); } .btn-primary:active { transform: translateY(0); } /* ============================================ Menu Item Hover ============================================ */ .menu-item { transition: all 0.2s ease; } .menu-item:hover { background-color: var(--primary-light); } .menu-item.active { background-color: var(--primary); color: white; } /* iOS-like theme switch used in the sidebar */ .ios-switch { position: relative; display: inline-block; width: 48px; height: 28px; } .ios-switch input { opacity: 0; width: 0; height: 0; } .ios-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #e5e7eb; transition: 0.2s; border-radius: 999px; box-shadow: 0 2px 6px rgba(2,6,23,0.08) inset; } .ios-switch .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 4px 8px rgba(2,6,23,0.12); transition: 0.2s; } .ios-switch input:checked + .slider { background: var(--primary); } .ios-switch input:checked + .slider:before { transform: translateX(20px); } /* ============================================ Skeleton Loaders ============================================ */ .skeleton { background: linear-gradient(90deg, var(--background-alt) 25%, var(--border) 50%, var(--background-alt) 75%); background-size: 200% 100%; animation: skeleton-pulse 1.5s ease-in-out infinite; border-radius: 0.375rem; } .skeleton-text { height: 1rem; width: 60%; margin-bottom: 0.5rem; } .skeleton-card { height: 6rem; border-radius: 0.75rem; } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================ App Footer ============================================ */ .app-footer { text-align: center; padding: 1rem 0; color: var(--text-muted); font-size: 0.75rem; border-top: 1px solid var(--border); margin-top: 2rem; } /* ============================================ Loading Spinner ============================================ */ .spinner { border: 3px solid var(--border); border-top: 3px solid var(--primary); border-radius: 50%; width: 24px; height: 24px; animation: spin 0.8s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ============================================ Fade Animations ============================================ */ .fade-in { animation: fadeIn 0.3s ease-in-out; } .anim-delay-100 { animation-delay: 0.1s; } .anim-delay-200 { animation-delay: 0.2s; } .anim-delay-300 { animation-delay: 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ Slide Animations ============================================ */ .slide-in-up { animation: slideInUp 0.3s ease-out; } @keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ============================================ DataTables Custom Styles ============================================ */ .dataTables_wrapper { padding: 0; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin-bottom: 1rem; } .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem 1rem; margin-left: 0.5rem; } .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-light); } table.dataTable { border-collapse: collapse !important; } table.dataTable thead th { background-color: var(--background-alt); border-bottom: 2px solid var(--border) !important; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--text-secondary); } table.dataTable tbody tr { transition: background-color 0.15s ease; } table.dataTable tbody tr:hover { background-color: var(--primary-light) !important; } table.dataTable tbody td { padding: 1rem 0.75rem; border-bottom: 1px solid var(--border); } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 0.375rem !important; margin: 0 2px; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--primary) !important; border-color: var(--primary) !important; color: white !important; } /* Dark mode DataTables overrides */ body.theme-dark table.dataTable tbody tr { background-color: transparent !important; } body.theme-dark table.dataTable tbody tr.odd { background-color: var(--table-row-odd) !important; } body.theme-dark table.dataTable tbody tr.even { background-color: transparent !important; } body.theme-dark table.dataTable tbody tr:hover, body.theme-dark table.dataTable tbody tr.odd:hover, body.theme-dark table.dataTable tbody tr.even:hover { background-color: var(--table-row-hover) !important; } body.theme-dark table.dataTable thead th { background-color: var(--table-header-bg) !important; color: var(--text-secondary) !important; border-bottom-color: var(--border) !important; } body.theme-dark table.dataTable tbody td { border-bottom-color: var(--table-border) !important; color: var(--input-text) !important; } body.theme-dark .dataTables_wrapper .dataTables_info, body.theme-dark .dataTables_wrapper .dataTables_length label, body.theme-dark .dataTables_wrapper .dataTables_filter label { color: var(--text-secondary) !important; } body.theme-dark .dataTables_wrapper .dataTables_length select { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important; } body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-secondary) !important; border-color: transparent !important; } body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--table-row-hover) !important; border-color: var(--border) !important; color: var(--input-text) !important; } body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current, body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } /* ============================================ Chart Container ============================================ */ .chart-container { position: relative; height: 300px; width: 100%; } @media (min-width: 768px) { .chart-container { height: 350px; } } /* ============================================ Toast Customization ============================================ */ .toastify { border-radius: 0.5rem !important; font-family: inherit !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2) !important; } /* ============================================ Scrollbar Styles ============================================ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--background-alt); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } /* ============================================ Mobile Specific ============================================ */ @media (max-width: 768px) { .hide-mobile { display: none !important; } .stat-card { padding: 1rem; } /* Riduzione spazi tabella riepilogo in statistics */ #statistics-summary-table td, #statistics-summary-table th { padding: 0.5rem 0.25rem !important; font-size: 0.75rem !important; } /* Riduzione spazi colonne per cifre a 5 caratteri (es 123,45) */ .col-gpl, .col-benzina, .col-diesel { min-width: 65px; } } /* colonne tipo carburante — larghezza minima anche su desktop */ .col-gpl, .col-benzina, .col-diesel { min-width: 72px; white-space: nowrap; } /* ============================================ Print Styles ============================================ */ @media print { .sidebar { display: none !important; } } /* ============================================ Expenses: note expand/collapse ============================================ */ .expense-note { max-height: 3.6rem; /* approx 2 lines */ overflow: hidden; transition: max-height 0.28s ease, opacity 0.18s linear; cursor: pointer; opacity: 0.98; } .expense-note.expanded { max-height: 600px; /* large enough to show full note */ } .expense-note::after { content: ''; display: block; height: 0.5rem; margin-top: 0.125rem; } /* 'Mostra altro' link for truncated expense notes */ .note-more { display: inline-block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--primary); background: none; border: none; padding: 0; cursor: pointer; } .note-more:focus { outline: none; text-decoration: underline; } /* ============================================ Global interactive cursor ============================================ */ button:not(:disabled), [data-click]:not(:disabled), [data-action]:not(:disabled), [role="button"], .btn, select, label[for], a[href] { cursor: pointer; } /* ============================================ Button hover brightness (fallback for custom buttons) ============================================ */ .btn:not(:disabled):hover { filter: brightness(0.93); } /* ============================================ DataTables: selected row highlight ============================================ */ table.dataTable tbody tr.selected > td, table.dataTable tbody tr.selected:hover > td { background-color: var(--primary-light) !important; color: var(--primary) !important; } /* ============================================ Table action buttons (delete / edit) ============================================ */ [data-action="delete"], [data-action="delete-expense"], [data-action="delete-pending"] { color: #9ca3af; transition: color 0.15s ease; } [data-action="delete"]:hover, [data-action="delete-expense"]:hover, [data-action="delete-pending"]:hover { color: #ef4444; } [data-action="edit"], [data-action="edit-expense"] { color: #9ca3af; transition: color 0.15s ease; } [data-action="edit"]:hover, [data-action="edit-expense"]:hover { color: #2563eb; } /* ============================================ Form inputs: forza larghezza full su contenitori flex/grid ============================================ */ input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="tel"], input[type="password"], textarea, select:not([class*="badge"]) { min-width: 0; box-sizing: border-box; }