:root{--primary: #2563eb;--primary-dark: #1d4ed8;--secondary: #64748b;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--background: #f8fafc;--card: #ffffff;--border: #e2e8f0;--text-main: #0f172a;--text-muted: #64748b;--sidebar-width: 260px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:var(--background);color:var(--text-main);overflow-x:hidden}.glass{background:#ffffffb3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}.card-shadow{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}#app{display:flex;width:100%}.main-content{flex:1;margin-left:var(--sidebar-width);padding:2rem;transition:all .3s ease}.sidebar{width:var(--sidebar-width);height:100vh;position:fixed;left:0;top:0;background:#1e293b;color:#fff;padding:1.5rem;display:flex;flex-direction:column;z-index:100}.nav-link{color:#94a3b8}.nav-link:hover{background-color:#33415566;color:#f1f5f9}.nav-link:hover .icon-box{background-color:#334155;color:#cbd5e1}.nav-link.active{background-color:#334155b3!important;color:#fff!important;box-shadow:0 1px 2px #0000000d}.nav-link.active .icon-box{background-color:#3b82f633!important;color:#60a5fa!important}.table-container{overflow-x:auto;background:var(--card);border-radius:12px;border:1px solid var(--border)}table{width:100%;border-collapse:collapse}th{text-align:left;padding:1rem;background:#f1f5f9;font-weight:600;font-size:.875rem;color:var(--text-muted)}td{padding:1rem;border-top:1px solid var(--border);font-size:.875rem}.badge{padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600}.badge-success{background:#dcfce7;color:#166534}.badge-warning{background:#fef9c3;color:#854d0e}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.5rem;margin-bottom:2rem}.stat-card{background:var(--card);padding:1.5rem;border-radius:12px;border:1px solid var(--border);display:flex;align-items:center}.charts-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:2rem}.chart-card{background:var(--card);padding:1.5rem;border-radius:12px;border:1px solid var(--border);min-height:300px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:none;justify-content:center;align-items:center;z-index:1000;padding:1rem}.modal-content{background:#fff;width:100%;max-width:1000px;max-height:90vh;border-radius:16px;overflow-y:auto;position:relative}.period-filter{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:6px;margin-bottom:1.5rem;box-shadow:0 1px 3px #0000000a,0 1px 2px #0000000f;display:flex;align-items:center;gap:8px;width:fit-content;margin-left:auto}.period-tabs{display:flex;gap:2px;background:#f1f5f9;border-radius:12px;padding:3px}.period-tab{display:flex;align-items:center;gap:6px;padding:7px 14px;border:none;border-radius:10px;background:transparent;color:#64748b;font-size:.8rem;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative}.period-tab:hover{color:#334155;background:#fff9}.period-tab.active{background:#fff;color:var(--primary);box-shadow:0 1px 3px #2563eb1f,0 1px 2px #0000000f}.period-tab.active i,.period-tab.active svg{color:var(--primary)}.period-controls{display:flex;align-items:center;gap:4px;padding:0 2px}.period-nav{display:flex;align-items:center;gap:4px}.period-nav-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:#475569;cursor:pointer;transition:all .2s ease;flex-shrink:0}.period-nav-btn:hover{background:#f1f5f9;color:var(--primary);border-color:#cbd5e1;transform:scale(1.05)}.period-nav-btn:active{transform:scale(.95)}.period-badge{padding:6px 16px;background:linear-gradient(135deg,#eff6ff,#f0f9ff);border:1px solid #bfdbfe;border-radius:10px;font-size:.8rem;font-weight:700;color:#1e40af;white-space:nowrap;letter-spacing:-.01em;min-width:140px;text-align:center;transition:all .3s ease;-webkit-user-select:none;user-select:none}.period-custom-inputs{display:flex;align-items:center;gap:8px}.period-date-input{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:6px 10px;font-size:.78rem;font-weight:600;font-family:Inter,sans-serif;color:#334155;outline:none;width:135px;transition:all .2s ease;-moz-appearance:none;appearance:none;-webkit-appearance:none}.period-date-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.period-date-sep{font-size:.65rem;font-weight:800;text-transform:uppercase;color:#94a3b8;letter-spacing:.05em}.period-clear-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:#94a3b8;cursor:pointer;transition:all .2s ease;flex-shrink:0}.period-clear-btn:hover{background:#fef2f2;color:#ef4444;border-color:#fecaca}@media (max-width: 1024px){.sidebar{transform:translate(-100%);transition:transform .3s ease-in-out;box-shadow:4px 0 24px #0003}.sidebar.open{transform:translate(0)}.main-content{margin-left:0;padding:4.5rem 1rem 1rem;width:100%;overflow-x:hidden}.charts-grid{grid-template-columns:1fr;gap:1rem}.chart-card{padding:1rem .75rem}.stat-card{padding:1rem}.stats-grid{gap:1rem}.period-filter{width:100%;flex-direction:column;gap:6px;padding:6px}.period-tabs{width:100%;justify-content:center}.period-tab span{display:none}.period-tab{padding:8px 16px;justify-content:center;flex:1}.period-controls,.period-nav{width:100%;justify-content:center}.period-badge{flex:1;min-width:0;font-size:.75rem}.period-custom-inputs{width:100%}.period-date-input{flex:1;width:auto;min-width:0}}.mobile-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90;opacity:0;visibility:hidden;transition:all .3s ease}.mobile-overlay.visible{opacity:1;visibility:visible}