/*
 * LifeHUD shared half-width and mobile viewport rules.
 * These rules keep headers left-aligned and keep header actions on the same plane
 * instead of dropping buttons into oversized stacked rows.
 */
.standard-page-header,
.hud-command-header {
    align-items: flex-start !important;
    justify-content: space-between;
    text-align: left;
}

.standard-title-block,
.standard-panel-header > div,
.standard-section-header > div,
.panel-header > div {
    min-width: 0;
    text-align: left;
}

.standard-title-row {
    justify-content: flex-start;
}

.standard-page-actions,
.hud-page-actions {
    align-self: flex-start;
    align-items: flex-start;
    justify-content: flex-end;
    margin-left: auto;
    padding: 0;
    background: transparent !important;
}

.standard-page-actions .btn,
.standard-page-actions a,
.hud-page-actions .btn,
.hud-page-actions a {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

.standard-panel-header,
.standard-section-header,
.panel-header {
    align-items: flex-start !important;
    justify-content: space-between;
}

.standard-panel-header > .btn,
.standard-panel-header > a.btn,
.standard-panel-header > button,
.standard-panel-header > a:not(:first-child),
.standard-panel-header > .button-row,
.standard-panel-header > form,
.standard-section-header > .btn,
.standard-section-header > a.btn,
.standard-section-header > button,
.standard-section-header > .button-row,
.panel-header > .btn,
.panel-header > a.btn,
.panel-header > button,
.panel-header > .button-row {
    align-self: flex-start;
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 1160px) {
    .standard-page-content {
        padding: 14px;
        gap: 12px;
    }

    .standard-title-icon {
        width: 30px;
        height: 30px;
    }

    .standard-title-block h1,
    .standard-title-block h2 {
        font-size: 23px;
        line-height: 1.05;
    }

    .standard-page-subtitle {
        margin-top: 5px;
        font-size: 12.5px;
        line-height: 1.3;
    }

    .standard-metric-grid {
        gap: 8px;
    }

    .standard-metric-card {
        grid-template-columns: 28px minmax(0, 1fr);
        min-height: 52px;
        padding: 8px 10px;
        gap: 8px;
    }

    .metric-icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .metric-value {
        font-size: 17px;
    }

    .metric-label {
        margin-top: 2px;
        font-size: 10.5px;
        line-height: 1.15;
    }

    .standard-panel-header,
    .standard-section-header,
    .panel-header {
        min-height: 44px;
        padding: 9px 11px;
        gap: 9px;
    }

    .standard-panel-header h2,
    .standard-panel-header h3,
    .standard-section-header h3,
    .panel-header h2,
    .panel-header h3 {
        font-size: 15px;
        line-height: 1.15;
    }

    .standard-panel-body,
    .standard-section-body,
    .panel-body {
        padding: 11px;
    }

    .standard-kicker {
        font-size: 10.5px;
        line-height: 1.2;
    }

    .btn.btn-small,
    .standard-panel-header .btn,
    .standard-section-header .btn,
    .panel-header .btn {
        min-height: 32px;
        padding: 6px 9px;
        font-size: 11.5px;
    }
}

@media (max-width: 760px) {
    .standard-page-header,
    .hud-command-header {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 10px;
        flex-wrap: wrap;
    }

    .standard-title-block {
        flex: 1 1 220px;
    }

    .standard-page-actions,
    .hud-page-actions {
        display: flex !important;
        flex: 0 0 auto;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
        margin-left: auto;
    }

    .standard-page-actions .btn:not(.standard-icon-btn),
    .standard-page-actions a,
    .hud-page-actions .btn:not(.standard-icon-btn),
    .hud-page-actions a {
        flex: 0 0 auto;
        width: auto;
    }

    .standard-panel-header,
    .standard-section-header,
    .panel-header {
        flex-direction: row !important;
        align-items: flex-start !important;
    }

    .standard-panel-header > div,
    .standard-section-header > div,
    .panel-header > div {
        flex: 1 1 auto;
    }
}

@media (max-width: 520px) {
    .standard-page-content {
        padding: 10px;
        gap: 10px;
    }

    .standard-title-block {
        flex-basis: 170px;
    }

    .standard-title-block h1,
    .standard-title-block h2 {
        font-size: 21px;
    }

    .standard-page-actions .btn,
    .standard-page-actions a,
    .hud-page-actions .btn,
    .hud-page-actions a,
    .standard-panel-header .btn,
    .standard-section-header .btn,
    .panel-header .btn {
        min-height: 30px;
        padding: 6px 8px;
        font-size: 11px;
    }

    .standard-panel-body,
    .standard-section-body,
    .panel-body {
        padding: 10px;
    }
}

/* V3 mobile density pass: keep cards usable at phone/half-page widths without giant stacked blocks. */
@media (max-width: 760px) {
    .standard-metric-grid,
    .standard-metric-grid.is-two,
    .standard-metric-grid.is-three,
    .standard-metric-grid.is-five,
    .hud-metric-grid.standard-metric-grid.is-five,
    .standard-metric-grid.is-five.hud-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .standard-metric-card {
        grid-template-columns: 23px minmax(0, 1fr) !important;
        min-height: 42px !important;
        padding: 6px 7px !important;
        gap: 6px !important;
    }

    .metric-icon {
        width: 23px !important;
        height: 23px !important;
        font-size: 11px !important;
    }

    .metric-value {
        font-size: 14px !important;
        line-height: 1.05 !important;
    }

    .metric-label {
        margin-top: 1px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 8.8px !important;
        line-height: 1.05 !important;
    }

    .standard-panel-body .standard-view-grid,
    .standard-section-body.standard-view-grid,
    .standard-section-body .standard-view-grid,
    .standard-panel-body .detail-pairs-grid,
    .standard-section-body .detail-pairs-grid,
    .standard-panel-body .standard-summary-grid,
    .standard-section-body .standard-summary-grid,
    .standard-panel-body .standard-info-grid,
    .standard-section-body .standard-info-grid,
    .hud-stat-grid,
    .hud-grocery-grid,
    .hud-food-macro-grid,
    .hud-health-grid,
    .hud-budget-grid,
    .hud-doc-grid,
    .hud-vehicle-grid,
    .hud-weather-days,
    .vehicle-summary-grid.standard-view-grid,
    .health-latest-grid.standard-view-grid,
    .auto-plan-summary-grid.standard-view-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .standard-view-field,
    .hud-stat-grid > div,
    .hud-weather-day,
    .hud-subpanel,
    .hud-budget-card,
    .hud-doc-card,
    .hud-vehicle-card {
        min-height: 40px !important;
        padding: 6px 7px !important;
    }

    .standard-view-label,
    .hud-stat-grid span {
        margin-bottom: 2px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 8.8px !important;
        line-height: 1.05 !important;
    }

    .standard-view-value,
    .hud-stat-grid strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10.5px !important;
        line-height: 1.15 !important;
    }

    .hud-alert-item,
    .hud-agenda-item,
    .hud-mini-card {
        padding: 7px 8px !important;
    }

    .hud-panel .standard-panel-header {
        min-height: 38px !important;
        padding: 7px 9px !important;
    }

    .hud-panel .standard-panel-body {
        gap: 7px !important;
        padding: 8px !important;
    }
}

@media (max-width: 380px) {
    .standard-metric-grid,
    .standard-metric-grid.is-two,
    .standard-metric-grid.is-three,
    .standard-metric-grid.is-five,
    .hud-metric-grid.standard-metric-grid.is-five,
    .standard-metric-grid.is-five.hud-metric-grid,
    .standard-panel-body .standard-view-grid,
    .standard-section-body.standard-view-grid,
    .standard-section-body .standard-view-grid,
    .standard-panel-body .detail-pairs-grid,
    .standard-section-body .detail-pairs-grid,
    .standard-panel-body .standard-summary-grid,
    .standard-section-body .standard-summary-grid,
    .standard-panel-body .standard-info-grid,
    .standard-section-body .standard-info-grid,
    .hud-stat-grid,
    .hud-grocery-grid,
    .hud-food-macro-grid,
    .hud-health-grid,
    .hud-budget-grid,
    .hud-doc-grid,
    .hud-vehicle-grid,
    .hud-weather-days,
    .vehicle-summary-grid.standard-view-grid,
    .health-latest-grid.standard-view-grid,
    .auto-plan-summary-grid.standard-view-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Optional mobile table strategy hooks. Add these classes to table headers/cells as we convert tables. */
@media (max-width: 760px) {
    .standard-table.is-mobile-dense {
        min-width: 0 !important;
        table-layout: fixed;
        font-size: 10.5px;
    }

    .standard-table.is-mobile-dense th,
    .standard-table.is-mobile-dense td {
        padding: 5px 6px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .standard-table .mobile-priority-low,
    .standard-table .mobile-hide-portrait {
        display: none !important;
    }
}