/* Theme 2 only: consistent dark surfaces and space for the installed-app status bar. */
:root {
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
}

body,
body.role-cliente,
body.role-barbeiro,
body.role-admin {
    --bg: #080808;
    --bg-soft: #0e0e0f;
    --surface: #131314;
    --surface-2: #1a1a1c;
    --surface-3: #222224;
    background-color: var(--bg);
}

.panel-card,
.list-card,
.data-table-card,
.chart-card,
.queue-list {
    background: linear-gradient(145deg, #19191b, #111112);
}

.welcome-content h2,
.barber-day-copy h2,
.admin-control-copy h2 {
    font-family: inherit;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.08;
    letter-spacing: -.05em;
}

.welcome-hero,
.barber-day-hero,
.admin-control-hero {
    background-position: center 53%;
}

body .topbar {
    height: calc(88px + var(--app-safe-top));
    padding-top: var(--app-safe-top);
    background: rgba(8, 8, 8, .97);
}

body.role-barbeiro .topbar {
    height: calc(74px + var(--app-safe-top));
    padding-top: var(--app-safe-top);
}

.topbar > div:first-child { min-width: 0; }
.topbar .top-actions { flex-shrink: 0; flex-wrap: nowrap; }
.topbar .avatar { flex-shrink: 0; }
.topbar h1,
.topbar .mobile-kicker {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.role-barbeiro .topbar h1 { font-family: inherit; font-weight: 700; }

.role-cliente.view-agendar .booking-topbar {
    height: calc(82px + var(--app-safe-top));
    padding-top: var(--app-safe-top);
}
.role-cliente.view-agendar .booking-content {
    padding-top: calc(82px + var(--app-safe-top));
}

.v2-login .auth-shell { padding-top: var(--app-safe-top); }

@media (max-width: 760px) {
    body .topbar,
    body.role-barbeiro .topbar {
        height: calc(68px + var(--app-safe-top));
        padding: calc(10px + var(--app-safe-top)) 16px 10px;
        gap: 12px;
    }
    .topbar .mobile-kicker { max-width: 100%; }
    .topbar .top-actions { gap: 8px; }

    .role-cliente.view-agendar .booking-topbar {
        height: calc(54px + var(--app-safe-top));
        padding: calc(6px + var(--app-safe-top)) 15px 6px;
    }
    .role-cliente.view-agendar .booking-content {
        padding-top: calc(54px + var(--app-safe-top));
    }
    .role-cliente.view-agendar .booking-layout {
        min-height: calc(100dvh - 54px - var(--app-safe-top));
    }
    .role-cliente .picker-sheet.calendar-mode > section {
        padding-top: calc(12px + var(--app-safe-top));
        padding-bottom: calc(12px + var(--app-safe-bottom));
    }
    .picker-sheet:not(.calendar-mode) > section {
        max-height: calc(100dvh - var(--app-safe-top) - 12px);
    }
}

/* Safari zooms focused fields below 16px. Keep pinch zoom available. */
@media (max-width: 1024px), (pointer: coarse) {
    body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
    body textarea,
    body select,
    body [contenteditable="true"] {
        font-size: 16px !important;
    }
}