:root{--md-sys-color-primary:#6750a4;--md-sys-color-on-primary:#fff;--md-sys-color-primary-container:#eaddff;--md-sys-color-on-primary-container:#21005d;--md-sys-color-surface-container-lowest:#fff;--md-sys-color-surface-container-low:#f7f2fa;--md-sys-color-surface-container:#f3edf7;--md-sys-color-on-surface:#1d1b20;--md-sys-color-on-surface-variant:#49454f;--md-sys-color-outline:#79747e;--md-sys-color-outline-variant:#cac4d0;--md-sys-color-background:#fef7ff}body{background-color:var(--md-sys-color-background);color:var(--md-sys-color-on-surface);font-family:Roboto,sans-serif;margin:0}.page-container{background-color:var(--md-sys-color-surface-container-low);display:flex}.side-nav-page-container{height:100vh}.side-nav{background-color:var(--md-sys-color-surface-container);flex-direction:column;flex-shrink:0;overflow-y:hidden;padding:16px;width:280px}.side-nav ul:hover{scrollbar-color:var(--md-sys-color-outline-variant) transparent}.side-nav ul::-webkit-scrollbar{width:8px}.side-nav ul::-webkit-scrollbar-track{background:transparent}.side-nav ul::-webkit-scrollbar-thumb{background-color:transparent;border-radius:4px}.side-nav ul:hover::-webkit-scrollbar-thumb{background-color:var(--md-sys-color-outline-variant)}.side-nav-title{border-bottom:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant);flex:0 0 auto;font-size:.875rem;font-weight:700;padding:8px 0 8px 16px;text-transform:uppercase}.side-nav ul{flex:1 1 0;list-style:none;margin:0;overflow-y:auto;padding:8px 0 0;scrollbar-color:transparent transparent;scrollbar-width:thin}.side-nav button{background-color:transparent;border:none;border-radius:24px;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font-size:.95rem;padding:12px 16px;text-align:left;transition:background-color .2s,color .2s;width:100%}.side-nav button.active{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);font-weight:500}.side-nav button:hover:not(.active){background-color:#0000000a}.main-content{flex-grow:1;overflow-y:auto;padding:24px 32px}.main-header{align-items:center;display:flex;gap:16px;justify-content:space-between;margin-bottom:24px}.search-bar{flex-grow:1}.search-bar input{background-color:var(--md-sys-color-surface-container);border:1px solid var(--md-sys-color-outline-variant);border-radius:28px;box-sizing:border-box;color:var(--md-sys-color-on-surface);font-size:1rem;padding:12px 18px;width:100%}.search-bar input:focus{border-color:var(--md-sys-color-primary);outline:1px solid var(--md-sys-color-primary)}.location-nav button{background-color:transparent;border:1px solid var(--md-sys-color-outline);border-radius:28px;color:var(--md-sys-color-primary);cursor:pointer;font-size:.9rem;font-weight:700;margin-left:8px;padding:12px 28px;transition:background-color .2s}.location-nav button:hover:not(:disabled){background-color:var(--md-sys-color-primary-container)}.location-nav button:disabled{cursor:not-allowed;opacity:.5}.location-title{color:var(--md-sys-color-on-surface);font-size:2rem;font-weight:400;margin:0 0 24px 4px}.select-wrapper{flex-grow:1;position:relative}.select-label{background-color:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);font-size:1rem;left:15px;padding:0 6px;pointer-events:none;position:absolute;top:12px;transition:all .2s ease-out;z-index:1}.filter-select:focus+.select-label,.select-label.active{color:var(--md-sys-color-primary);font-size:.75rem;left:10px;top:-8px}.filter-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--md-sys-color-surface-container-low);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2349454f' d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:20px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;color:var(--md-sys-color-on-surface);cursor:pointer;font-size:1rem;padding:16px 15px 8px;width:100%}.filter-select:focus{border-color:var(--md-sys-color-primary);outline:2px solid var(--md-sys-color-primary)}@media (min-width:769px){.desktop-only{display:flex}.mobile-only{display:none}}@media (max-width:768px){.desktop-only{display:none}.mobile-only{display:block;width:100%}.page-container{flex-direction:column;height:auto}.side-nav{border-bottom:1px solid var(--md-sys-color-outline-variant);border-right:none;padding:12px;width:100%}.side-nav-title{margin:8px 0 12px 8px}.side-nav button{font-size:.9rem;padding:10px 12px}.main-content{padding:16px}.main-header{align-items:stretch;flex-direction:column;gap:12px;margin-bottom:16px}.search-bar input{font-size:.9rem;padding:10px 15px;width:100%}.location-nav{display:flex;gap:8px;justify-content:space-around;width:100%}.location-nav button{background-color:var(--md-sys-color-surface-container);border:1px solid var(--md-sys-color-outline-variant);border-radius:24px;color:var(--md-sys-color-on-surface);cursor:pointer;flex-grow:1;font-size:.9rem;padding:10px 15px;transition:background-color .2s}.location-nav button:disabled{cursor:not-allowed;opacity:.6}.location-nav button:hover:not(:disabled){background-color:#0000000a}.location-title{font-size:1.5rem;margin:0 0 16px}}