*{box-sizing:border-box;margin:0;padding:0}:root{--sidebar-w:260px;--sidebar-collapsed-w:80px;--bg-color:#f4f7fa;--sidebar-bg:#0f172a;--primary:#3b82f6;--text-main:#1e293b;--text-muted:#64748b;--white:#fff;--border:#e2e8f0}body{background-color:var(--bg-color);color:var(--text-main);min-height:100vh;font-family:Outfit,Inter,sans-serif}.app-container{flex-direction:column;width:100%;min-height:100vh}.top-navbar{background-color:var(--sidebar-bg);z-index:1000;justify-content:space-between;align-items:center;height:70px;padding:0 1.5rem;display:flex;position:sticky;top:0;box-shadow:0 4px 6px -1px #0000001a}.nav-brand{color:var(--white);white-space:nowrap;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:800;display:flex}.nav-links{align-items:center;gap:.5rem;height:100%;display:flex}.top-nav-item{color:#94a3b8;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:.5rem;align-items:center;gap:.5rem;height:40px;padding:.5rem .75rem;font-size:.85rem;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.top-nav-item:hover{color:var(--white);background:#ffffff1a}.top-nav-item.active{background:var(--primary);color:var(--white);box-shadow:0 2px 4px #0003}.user-menu{align-items:center;display:flex}.main-content{flex:1;width:100%;padding:2rem 1.5rem;margin-left:0!important}.content-container{max-width:1400px;margin:0 auto}.card{background:var(--white);border:1px solid var(--border);border-radius:1rem;margin-bottom:2rem;padding:2rem;box-shadow:0 1px 3px #0000000d}.chart-container{width:100%;height:320px}.page-header{margin-bottom:2rem}.page-title{color:#0f172a;margin-bottom:.25rem;font-size:1.5rem;font-weight:700}.page-subtitle{color:var(--text-muted);font-size:.875rem}.tabs{border-bottom:1px solid var(--border);gap:2rem;margin-bottom:2rem;display:flex}.tab{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:.75rem .25rem;font-size:.875rem;font-weight:600;position:relative}.tab.active{color:var(--primary)}.tab.active:after{content:"";background-color:var(--primary);height:2px;position:absolute;bottom:-1px;left:0;right:0}.controls-row{background:var(--white);border:1px solid var(--border);border-radius:1rem;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1.25rem;display:flex}.search-wrapper{flex:1;min-width:250px;max-width:400px;position:relative}.date-filters{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.search-icon{color:#94a3b8;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.input-field{border:1px solid var(--border);background:#f8fafc;border-radius:.75rem;outline:none;width:100%;padding:.75rem 1rem .75rem 2.5rem;font-size:.875rem;transition:all .2s}.input-field:focus{border-color:var(--primary);background:var(--white);box-shadow:0 0 0 3px #3b82f61a}.select-field{border:1px solid var(--border);appearance:none;cursor:pointer;background:#f8fafc;border-radius:.75rem;min-width:150px;padding:.75rem 2.5rem .75rem 1rem;font-size:.875rem}.btn-pdf{color:var(--white);background:var(--sidebar-bg);cursor:pointer;white-space:nowrap;border:none;border-radius:.75rem;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.875rem;font-weight:700;transition:all .2s;display:flex}.btn-pdf:hover{background:#1e293b;transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a}.data-table-wrapper{border:1px solid var(--border);border-radius:.75rem;overflow-x:auto}.data-table{border-collapse:collapse;width:100%}.data-table th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);background:#f8fafc;padding:.6rem 1rem;font-size:.7rem;font-weight:700}.data-table td{border-bottom:1px solid var(--border);padding:.5rem 1rem;font-size:.85rem}.text-bold{color:#0f172a;font-weight:700}.badge{background:#f1f5f9;border-radius:.375rem;padding:.25rem .5rem;font-size:.7rem;font-weight:700}.success-text{color:#10b981;font-weight:600}.error-text{color:#ef4444;font-weight:600}.results-count{color:#94a3b8;text-transform:uppercase;margin-bottom:1rem;font-size:.75rem;font-weight:700}.hidden{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}