html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

html, body { height: 100%; margin: 0; overflow: hidden; }

.app-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 50px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 .5rem;
    background-color: var(--bs-body-bg, #fff); border-bottom: 1px solid #e5e5e5;
}
.app-header-left { justify-self: start; }
.app-title { text-align: center; font-weight: 500; }
.app-header-right { justify-self: end; display: flex; align-items: center; gap: .5rem; }
.theme-combo { width: 150px; flex: none; }
.user-menu { position: relative; }
.user-menu-popup {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 1100; min-width: 220px;
    display: flex; flex-direction: column; gap: .5rem; padding: .75rem;
    background-color: var(--bs-body-bg, #fff); border: 1px solid #e5e5e5; border-radius: 6px;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.15);
}
.app-user { opacity: .7; }

.app-drawer { margin-top: 50px; height: calc(100vh - 80px); overflow: hidden; }
.app-body { padding: .5rem; box-sizing: border-box; height: calc(100vh - 80px); overflow-y: auto; }

.app-footer {
    position: fixed; bottom: 0; width: 100%; line-height: 30px; padding: 0 1rem;
    white-space: nowrap; font-size: .8rem; z-index: 1000;
    background-color: var(--bs-body-bg, #fff); border-top: 1px solid #e5e5e5;
}

.dashboard-grid { height: calc(100vh - 220px); width: 100%; }

.legend { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 0; margin-top: .5rem; }
.legend-item { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding-left: .5rem; }
.legend-box { display: inline-block; width: 100px; padding: .25rem .5rem; border: 1px solid #ccc; border-radius: 4px; }

.tracking-filters {
    display: grid; grid-template-columns: 1fr 3fr 1fr 3fr 3fr; align-items: center;
    column-gap: .5rem; margin-bottom: .5rem;
}
.tracking-filters > :last-child { justify-self: start; }
@media (max-width: 991px) { .tracking-filters { grid-template-columns: 1fr; row-gap: .5rem; } }

.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 420px; padding: 2rem; text-align: center; border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 .25rem .75rem rgba(0,0,0,.05); }

.bg-red { background-color: #f07167 !important; }
.bg-orange { background-color: #f8961e !important; }
.bg-blue { background-color: #277da1 !important; }
.bg-green { background-color: #90be6d !important; }

#blazor-error-ui {
    display: none; position: fixed; bottom: 30px; left: 0; width: 100%; z-index: 2000;
    background: #ffffe0; padding: .6rem 1.25rem; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.remember-me { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-bottom: 1rem; }