/*
 * Hearo UI foundation
 *
 * This is the composed sizing layer for the application shell and shared
 * primitives. The legacy bundle still supplies historical page-specific
 * visuals; shared typography, spacing, controls, grids, and dashboard density
 * belong here so a type change cannot leave the rest of the UI behind.
 */

:root {
    /*
     * Care Console owns theme selection through darkmode.js. The generated
     * foundation contract also contains OS-level dark tokens, so reassert the
     * application light palette here after that contract loads. This prevents
     * prefers-color-scheme from changing shared controls unless the user turns
     * on Hearo dark mode.
     */
    color-scheme: light;

    --cc-color-brand-primary: #3DBA84;
    --cc-color-brand-primary-strong: #259761;
    --cc-color-brand-muted: #DFF0E5;
    --cc-color-surface-canvas: #F3F3F3;
    --cc-color-surface-primary: #FFFFFF;
    --cc-color-surface-raised: #FFFFFF;
    --cc-color-border-subtle: #E4EBE8;
    --cc-color-text-primary: #1D2624;
    --cc-color-text-secondary: #667873;
    --cc-color-signal-emergency: #BA3D73;
    --cc-color-signal-health: #3DBA84;
    --cc-color-signal-door: #1F2A44;
    --cc-color-signal-motion: #4F6177;
    --cc-color-signal-doorbell: #C56A3A;
    --cc-color-signal-connectivity: #B58739;
    --cc-color-signal-medication: #56798A;
    --cc-color-signal-thermostat: #6A7F70;
    --cc-color-signal-automation: #6F5E8A;
    --cc-color-signal-lighting: #C9A227;
    --cc-color-signal-technical: #576D6B;
    --cc-color-signal-warning: #F2CD69;

    /* The old 88% body at 125% browser zoom resolves to a 17.6px body. */
    font-size: 125%;

    --hearo-type-body: .88rem;
    --hearo-type-9: .5625rem;
    --hearo-type-10: .625rem;
    --hearo-type-11: .6875rem;
    --hearo-type-12: .75rem;
    --hearo-type-13: .8125rem;
    --hearo-type-14: .875rem;
    --hearo-type-15: .9375rem;
    --hearo-type-16: 1rem;
    --hearo-type-17: 1.0625rem;
    --hearo-type-18: 1.125rem;
    --hearo-type-20: 1.25rem;
    --hearo-type-21: 1.3125rem;
    --hearo-type-22: 1.375rem;
    --hearo-type-24: 1.5rem;

    --hearo-space-1: .25rem;
    --hearo-space-2: .5rem;
    --hearo-space-3: .75rem;
    --hearo-space-4: 1rem;
    --hearo-space-5: 1.25rem;
    --hearo-space-6: 1.5rem;
    --hearo-space-8: 2rem;
    --hearo-space-10: 2.5rem;

    --hearo-page-gutter: clamp(1rem, 2.25vw, 2.25rem);
    --hearo-control-height: var(--cc-geometry-control-height);
    --hearo-control-height-small: var(--cc-geometry-control-height-small);
    --hearo-control-padding-x: .9rem;
    --hearo-radius-control: var(--cc-geometry-radius-control);
    --hearo-radius-surface: .75rem;

    --hearo-color-slate: #566c6a;
    --hearo-color-green: var(--cc-color-brand-primary);
    --hearo-color-mint: #e3f3ea;
    --hearo-color-line: var(--cc-color-border-subtle);
    --hearo-color-surface: var(--cc-color-surface-primary);
    --hearo-focus-ring: 0 0 0 2px rgba(61, 184, 131, .22);
}

body {
    font-size: var(--hearo-type-body);
}

button,
input,
select,
textarea {
    font-size: inherit;
}

h1 {
    font-size: var(--hearo-type-22) !important;
}

/* Application shell */
.site_header .top {
    min-height: 5rem;
    padding: var(--hearo-space-3) var(--hearo-page-gutter);
    font-size: var(--hearo-type-14);
}

.site_header .title h1 {
    margin: 0;
    font-size: var(--hearo-type-14) !important;
}

.site_header .logo img {
    width: 10rem;
}

.site_header .user {
    gap: var(--hearo-space-3);
}

.site_header .user figure,
.site_header .profile-context-dropdown .context-menu-trigger img,
.site_header .profile-context-dropdown .context-menu-trigger .name_circle {
    width: 3.125rem;
    height: 3.125rem;
}

.site_header .user figure {
    margin-left: var(--hearo-space-8);
}

.site_nav {
    min-height: 2.25rem;
    height: auto;
    gap: var(--hearo-space-1);
    padding: 0 var(--hearo-page-gutter);
    font-size: var(--hearo-type-14);
}

.site_nav a {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    margin: 0;
    padding: var(--hearo-space-2) var(--hearo-space-2);
}

.site_nav a.current::after {
    height: .15rem;
}

/* Main page header, toolbar, and gutters */
.admin_header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--hearo-space-4);
    padding: var(--hearo-space-6) var(--hearo-page-gutter) var(--hearo-space-4);
}

.admin_header h1 {
    width: auto;
    margin: 0;
    font-size: var(--hearo-type-24) !important;
    line-height: 1.2;
}

.admin_header .empty {
    min-width: 0;
}

.pad {
    padding-right: var(--hearo-page-gutter);
    padding-left: var(--hearo-page-gutter);
}

.main_nav_toolbar,
.admin_header_controls {
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: var(--hearo-space-1);
    padding: .3rem .4rem;
    border-radius: var(--hearo-radius-control);
    background: var(--hearo-color-surface);
}

.main_nav_toolbar .search,
.main_nav_toolbar .search_control,
.admin_header_controls .search {
    min-width: 14rem;
    margin: 0;
}

.main_nav_toolbar .search_control,
.main_nav_toolbar wa-input,
.admin_header_controls wa-input {
    display: block;
    width: 100%;
}

.admin_header_controls .add a {
    display: inline-flex;
    min-height: var(--hearo-control-height);
    align-items: center;
    gap: var(--hearo-space-2);
    margin-right: var(--hearo-space-2);
    padding: 0 var(--hearo-space-2);
    color: #70807b;
    font-size: var(--hearo-type-13);
}

.admin_header_controls .add a span {
    margin-left: 0;
    white-space: nowrap;
}

.admin_header_controls .add img {
    width: 2rem;
    height: 2rem;
}

.main_nav_toolbar wa-input {
    --wa-input-border-color-focus: var(--hearo-color-green);
    --wa-input-border-radius: .45rem;
}

.main_nav_toolbar wa-input::part(base),
.admin_header_controls wa-input::part(base) {
    min-height: var(--hearo-control-height);
    gap: 0;
    padding-inline: var(--hearo-space-3) var(--hearo-space-2);
}

.main_nav_toolbar wa-input::part(input),
.admin_header_controls wa-input::part(input) {
    padding-inline: 0 var(--hearo-space-1);
    font-size: var(--hearo-type-14);
}

.main_nav_toolbar wa-input::part(base):focus-within,
.admin_header_controls wa-input::part(base):focus-within {
    border-color: var(--hearo-color-green) !important;
    outline: none !important;
    box-shadow: var(--hearo-focus-ring) !important;
}

.main_nav_toolbar wa-input [slot="end"],
.admin_header_controls wa-input [slot="end"] {
    position: static;
    display: inline-flex;
    width: auto;
    align-items: center;
    margin: 0 var(--hearo-space-1);
    color: #6f807d;
    font-size: var(--hearo-type-13);
    line-height: 1;
    pointer-events: none;
    inset: auto;
    transform: none;
}

/* Controls and buttons */
.button,
.e-btn,
.e-css.e-btn,
.cc-btn,
.sh-btn,
.rem-btn,
.ind-btn {
    display: inline-flex;
    min-height: var(--hearo-control-height);
    align-items: center;
    justify-content: center;
    gap: var(--hearo-space-2);
    padding: .55rem var(--hearo-control-padding-x);
    border-radius: var(--hearo-radius-control);
    font-size: var(--hearo-type-14);
    line-height: 1.2;
    white-space: nowrap;
}

.button.smaller,
.e-btn.smaller,
.e-css.e-btn.smaller,
.cc-btn.smaller,
.sh-btn.smaller,
.rem-btn.smaller,
.ind-btn.small {
    min-height: var(--hearo-control-height-small);
    padding: .4rem .7rem;
    font-size: var(--hearo-type-13);
    line-height: 1.2;
}

wa-button::part(base) {
    min-height: var(--hearo-control-height);
    padding-inline: var(--hearo-control-padding-x);
    border-radius: var(--hearo-radius-control);
    font-size: var(--hearo-type-14);
}

wa-button[size="small"]::part(base) {
    min-height: var(--hearo-control-height-small);
    padding-inline: .7rem;
    font-size: var(--hearo-type-13);
}

.form_label,
.checkbox label,
.search_control i {
    font-size: var(--hearo-type-13);
}

/* Web Awesome filter controls used above shared grids. */
.reminder-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hearo-space-2);
    margin: var(--hearo-space-2) 0 var(--hearo-space-4);
}

.reminder-filters wa-combobox {
    width: 15rem;
}

.reminder-filters wa-select {
    width: 10.5rem;
}

.reminder-filters wa-combobox::part(combobox),
.reminder-filters wa-select::part(combobox),
.ac-hearo wa-combobox::part(combobox),
.ac-hearo wa-select::part(combobox) {
    min-height: var(--hearo-control-height);
    padding-inline: var(--hearo-space-3);
    font-size: var(--hearo-type-14);
}

/* Activity dashboard */
#activity-search-pill.activity_search_pill {
    width: min(1690px, calc(100% - 2 * var(--hearo-page-gutter)));
    max-width: 1690px;
    margin-top: var(--hearo-space-3);
}

#dashboard-app.cards {
    grid-template-columns: repeat(auto-fit, 550px);
    justify-content: center;
    gap: var(--hearo-space-4);
    padding: var(--hearo-space-3) var(--hearo-page-gutter) var(--hearo-space-4);
}

.cards .card_wrapper {
    padding-top: 1.375rem;
}

.cards .card_wrapper > .card {
    border-radius: var(--hearo-radius-surface);
    padding: .9375rem 0;
}

.card .location-card-header {
    padding: .25rem var(--hearo-space-4) var(--hearo-space-3);
}

.location-card-header__identity {
    gap: .6875rem;
}

.location-card-header__identity .location_figure {
    width: 2.875rem;
    min-width: 2.875rem;
    height: 2.875rem;
}

.location-card-header__name,
.activity_feed_card li h3,
.activity_empty_state p {
    font-size: var(--hearo-type-16);
}

.location-card-person,
.location-card-header__no-residents,
.location-card-health__issues,
.location-card-health-menu__hub span,
.location-card-health-issue span,
.activity_feed_card li time,
.activity_feed_card .log-notes ul li.log-note .note__tag,
.activity_feed_card .log-notes ul li.log-note .note__date,
.activity-note-label,
.signal-details__eyebrow,
.signal-details__monospace {
    font-size: var(--hearo-type-11) !important;
}

.location-card-roster-menu__heading,
.location-card-health-menu__section-label,
.location-card-health-menu__screenshots > div:first-child,
.location-card-health-menu__screenshot strong,
.activity-admin-note small,
.signal-details__field dt {
    font-size: var(--hearo-type-10);
}

.location-card-health,
.location-card-health strong,
.location-card-action {
    min-height: 2.125rem;
    font-size: .78125rem;
}

.location-card-action {
    padding: .45rem .6rem;
}

.location-card-health-menu__heading,
.location-card-health-issue strong,
.location-card-health-menu__clear,
.location-card-health-menu__check,
.location-card-overflow-person,
.activity-note-intro div > span,
.activity-admin-note span,
.signal-details__raw summary {
    font-size: var(--hearo-type-12);
}

.location-card-health-menu__hub strong,
.location-card-health-issue > i,
.activity-row-menu__item,
.activity-note-current,
.signal-details__field dd {
    font-size: var(--hearo-type-13);
}

.activity_feed_card {
    padding-inline: var(--hearo-space-4);
}

.activity_feed_card li .color_overlay {
    margin-bottom: 1.5rem;
    padding: var(--hearo-space-1);
}

.activity_feed_card li .icon {
    width: 3.125rem;
    height: 3.125rem;
    margin-right: var(--hearo-space-5);
}

.activity_feed_card li i {
    font-size: 1.6875rem;
}

.activity-note-intro strong {
    font-size: var(--hearo-type-15);
}

.activity-action-dialog::part(title) {
    font-size: var(--hearo-type-20);
}

.signal-details__header h2 {
    font-size: var(--hearo-type-21);
}

.signal-details__description {
    font-size: var(--hearo-type-17);
}

/* General legacy typography bridges outside the shared CRUD tables. */
.auth_area,
.content_card,
.error-layout p {
    font-size: var(--hearo-type-16);
}

.auth_area h1,
.auth_area h2,
.auth_area h3,
.content_card h1,
.individual .individual__contact .individual__name {
    font-size: var(--hearo-type-22);
}

.hearo-admin__header p,
.hearo-admin__details-table td,
.hearo-admin__table tbody td,
.hearo-admin__textarea,
.device .device__content p.device__application,
.sensor__info h4 {
    font-size: var(--hearo-type-14);
}

.hearo-admin__tile-body p,
.hearo-admin__details-table code,
.hearo-admin__form-field label,
.hearo-admin__attr-row code,
.dashboard-btn-native {
    font-size: var(--hearo-type-13);
}

.hearo-admin__table thead th,
.hearo-admin__attr-values-inner table code,
.sensor__info h5,
.sensor__info h6,
.last-reported {
    font-size: var(--hearo-type-12);
}

.hearo-admin__attr-values-inner table th,
.sensor__values .sensor-values__time-since {
    font-size: var(--hearo-type-11);
}

.hearo-admin__tile-body h3 {
    font-size: var(--hearo-type-16);
}

.hearo-admin__card-header h2 {
    font-size: var(--hearo-type-20);
}

.hearo-admin__empty p {
    font-size: var(--hearo-type-15);
}

@media (max-width: 768px) {
    .site_header .top {
        min-height: 3.625rem;
        padding: .35rem .6rem;
    }

    .site_header .logo img,
    .site_header .logo svg {
        width: 5.4rem;
    }

    .site_header .profile-context-dropdown .context-menu-trigger,
    .site_header .profile-context-dropdown .context-menu-trigger img,
    .site_header .profile-context-dropdown .context-menu-trigger .name_circle {
        width: 2rem;
        height: 2rem;
    }

    body .site_header .site_nav.mobile {
        padding: var(--hearo-space-2) .6rem;
    }

    .admin_header {
        grid-template-columns: 1fr;
        gap: var(--hearo-space-3);
        padding: var(--hearo-space-4) var(--hearo-space-3) var(--hearo-space-3);
    }

    .admin_header .empty {
        display: none;
    }

    .main_nav_toolbar,
    .admin_header_controls {
        max-width: 100%;
        flex-wrap: wrap;
        width: 100%;
    }

    .main_nav_toolbar .search,
    .main_nav_toolbar .search_control,
    .admin_header_controls .search {
        min-width: 0 !important;
    }

    .main_nav_toolbar > .search,
    .admin_header_controls > .search {
        flex: 1 1 100% !important;
    }

    .pad {
        padding-right: var(--hearo-space-3);
        padding-left: var(--hearo-space-3);
    }

    .reminder-filters wa-combobox,
    .reminder-filters wa-select {
        width: 100%;
    }

    #activity-search-pill.activity_search_pill {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    #dashboard-app.cards {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--hearo-space-3);
    }
}