/*
 * UI/UX HANDOFF — global PWO presentation stylesheet.
 * What it does: controls shared layout, mobile-first responsive styling, and
 * reusable `pwo-` components. Scope: any HTML class in ui/views; it has no
 * backend dependency. Example: `.pwo-door-list__item { border-radius: 1rem; }`.
 * Expectation: keep mobile rules as the default and add larger-screen changes in
 * a min-width media query. Prefix new component classes with `pwo-`.
 * Need more? Add a class in the relevant UI template. If the desired behavior
 * needs data, a permission, or a server-side state change, ask backend first.
 */
:root {
    color-scheme: light;
    font-family: system-ui, sans-serif;
    color: #17202a;
    background: #f7f9fc;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: .75rem;
}

/* Shared header: compact, touch-friendly mobile default. */
.pwo-header {
    margin-bottom: .75rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d5dce5;
    border-radius: .75rem;
}

.pwo-header__topline {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 3.5rem;
    padding: .65rem .75rem;
}

.pwo-brand { color: #17202a; font-weight: 800; text-decoration: none; }
.pwo-header__title { overflow: hidden; flex: 1; color: #536170; font-size: .9rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

.pwo-navigation {
    display: flex;
    gap: .25rem;
    padding: .45rem .75rem .65rem;
    overflow-x: auto;
    border-top: 1px solid #edf0f4;
    -webkit-overflow-scrolling: touch;
}

.pwo-navigation a {
    flex: 0 0 auto;
    padding: .55rem .65rem;
    color: #1f5f8b;
    font-size: .9rem;
    text-decoration: none;
}

.pwo-account-trigger, .pwo-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.75rem;
    margin: 0;
    padding: .4rem .55rem;
    background: #fff;
    color: #17202a;
    border: 1px solid #9ca9b8;
    border-radius: .45rem;
}

.pwo-account-trigger__label { display: none; }

.pwo-avatar, .pwo-account-panel__avatar {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #6f42c1;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
}

/* Shared content container. */
.pwo-shell {
    padding: 1rem;
    background: #fff;
    border: 1px solid #d5dce5;
    border-radius: .75rem;
    box-shadow: 0 1px 3px rgb(23 32 42 / 6%);
}

label { display: block; margin-top: 1rem; font-weight: 600; }
input, select, button { font: inherit; }
input, select { display: block; width: 100%; min-height: 2.75rem; margin-top: .35rem; padding: .65rem; border: 1px solid #9ca9b8; border-radius: .3rem; }
button { min-height: 2.75rem; margin-top: 1.25rem; padding: .65rem 1rem; cursor: pointer; border: 0; border-radius: .3rem; background: #1f5f8b; color: #fff; }
button:hover { background: #17496b; }
.notice { padding: .85rem; background: #f4f7fb; border-radius: .4rem; }
.error { color: #a51d2d; }

/* Tables remain usable on narrow screens instead of overflowing the shell. */
table { display: block; width: 100%; margin-top: 1rem; overflow-x: auto; border-collapse: collapse; white-space: nowrap; }
th, td { padding: .5rem; text-align: left; border: 1px solid #d5dce5; }
.google-map { width: 100%; height: 16rem; margin-top: .75rem; overflow: hidden; background: #e7edf3; border-radius: .5rem; }
.place-autocomplete { display: block; margin-top: .35rem; }
.place-autocomplete gmp-place-autocomplete { display: block; width: 100%; }

/* Door list component: a mobile-friendly replacement for a dense table. */
.pwo-action-link { display: inline-block; padding: .65rem .85rem; color: #fff; background: #1f5f8b; border-radius: .35rem; text-decoration: none; }
.pwo-door-list { display: grid; gap: .55rem; }
.pwo-door-list__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.1rem; padding: .75rem; color: #17202a; font-weight: 650; text-decoration: none; background: #f8fafc; border: 1px solid #d5dce5; border-radius: .45rem; }
.pwo-door-list__item small { color: #8f2633; font-weight: 700; }

/* Admin quota snapshot component. Values are stored snapshots, not live polling. */
.pwo-quota-list { display: grid; gap: .75rem; margin-top: 1rem; }
.pwo-quota-card { padding: 1rem; background: #f8fafc; border: 1px solid #d5dce5; border-radius: .5rem; }
.pwo-quota-card h3, .pwo-quota-card p { margin: 0; }
.pwo-quota-card__service { margin-top: .35rem !important; color: #536170; font-size: .85rem; overflow-wrap: anywhere; }
.pwo-quota-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0; }
.pwo-quota-card dt { color: #536170; font-size: .78rem; }.pwo-quota-card dd { margin: .2rem 0 0; font-weight: 750; }
.pwo-quota-meter { height: .5rem; overflow: hidden; background: #dce5ee; border-radius: 999px; }.pwo-quota-meter span { display: block; height: 100%; background: #1f5f8b; border-radius: inherit; }

/* Account panel: bottom sheet on mobile, controlled by public/ui/app.js. */
.pwo-dialog-backdrop { position: fixed; inset: 0; z-index: 10; background: rgb(23 32 42 / 48%); }
.pwo-account-panel { position: fixed; z-index: 11; right: 0; bottom: 0; left: 0; max-height: min(80vh, 34rem); padding: 1.25rem; overflow-y: auto; background: #fff; border-radius: 1rem 1rem 0 0; box-shadow: 0 -1rem 3rem rgb(23 32 42 / 25%); }
.pwo-account-panel__heading { display: flex; align-items: center; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid #d5dce5; }
.pwo-account-panel__heading h2, .pwo-account-panel__heading p { margin: 0; }
.pwo-account-panel__avatar { width: 3rem; height: 3rem; }
.pwo-icon-button { width: 2.75rem; margin-left: auto; font-size: 1.5rem; }
.pwo-account-panel__links { display: grid; gap: .75rem; padding: 1rem 0; }
.pwo-account-panel__links a { padding: .75rem 0; color: #17202a; font-weight: 600; }
.pwo-sign-out { width: 100%; background: #8f2633; }
.pwo-sign-out:hover { background: #6f1d27; }

/* Shared footer. */
.pwo-footer { display: flex; flex-direction: column; gap: .5rem; padding: 1rem .25rem; color: #536170; font-size: .9rem; }
.pwo-footer p { margin: 0; }
.pwo-footer a { color: #1f5f8b; }

/* Desktop enhancement only; the mobile layout remains the functional baseline. */
@media (min-width: 48rem) {
    body { max-width: 60rem; margin: 2rem auto; padding: 0 1rem; }
    .pwo-header { display: flex; align-items: center; justify-content: space-between; padding: .65rem 1rem; }
    .pwo-header__topline { flex: 1; min-width: 0; padding: 0; }
    .pwo-navigation { flex: 1; justify-content: center; padding: 0; overflow: visible; border: 0; }
    .pwo-account-trigger__label { display: inline; }
    .pwo-shell { padding: 1.5rem; }
    .google-map { height: 18rem; }
    table { display: table; white-space: normal; }
    .pwo-account-panel { top: 1rem; right: 1rem; bottom: auto; left: auto; width: min(24rem, calc(100vw - 2rem)); border-radius: .75rem; box-shadow: 0 1rem 3rem rgb(23 32 42 / 25%); }
    .pwo-footer { flex-direction: row; align-items: center; justify-content: space-between; }
}