.time-range-picker{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;flex-direction:column;gap:1rem;padding:1rem;display:flex}.time-range-controls{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.date-input-group{align-items:center;gap:.5rem;display:flex}.date-input-group label{color:#000;white-space:nowrap;font-weight:500}.date-input{background-color:#fff;border:1px solid #d1d5db;border-radius:4px;min-width:150px;padding:.5rem;font-size:.875rem;color:#000!important}.date-input::-webkit-calendar-picker-indicator{filter:invert(0);cursor:pointer}.date-input::-webkit-datetime-edit-text{color:#000!important}.date-input::-webkit-datetime-edit-month-field{color:#000!important}.date-input::-webkit-datetime-edit-day-field{color:#000!important}.date-input::-webkit-datetime-edit-year-field{color:#000!important}.date-input:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.preset-buttons{flex-wrap:wrap;gap:.5rem;display:flex}.preset-btn{cursor:pointer;color:#000;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;transition:all .2s}.preset-btn:hover{background:#f3f4f6;border-color:#9ca3af}.preset-btn:active{background:#e5e7eb}.date-error{color:#dc2626;margin-top:-.5rem;font-size:.875rem}@media (max-width:640px){.time-range-controls,.date-input-group{flex-direction:column;align-items:stretch}.date-input{width:100%}}
.analytics-chart-card{background:var(--card-background,#fff);border:1px solid var(--border-light,#e0e0e0);box-shadow:var(--shadow-sm,0 1px 3px #0000000f);border-radius:14px;padding:1.5rem}.chart-header{flex-direction:column;gap:.25rem;margin-bottom:1.5rem;display:flex}.chart-header h3{color:#111827;margin:0;font-size:1.125rem;font-weight:600}.chart-subtitle{color:#6b7280;font-size:.875rem}.chart-content{min-height:300px}.chart-loading,.chart-error,.chart-empty{color:#6b7280;flex-direction:column;justify-content:center;align-items:center;min-height:300px;display:flex}.chart-loading{gap:1rem}.chart-loading .spinner{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.chart-error{color:#dc2626}.chart-empty p{margin:0;font-size:.875rem}