/* ================================================================
   PERSONAL ERP D5.1 — MOBILE REAL-DEVICE POLISH
   Based on screenshots from installed Android PWA.
   ================================================================ */

/* ---------------------------------------------------------------
   Global mobile rhythm
   --------------------------------------------------------------- */

@media (max-width: 649px) {
    .erp-main .page {
        padding:
            11px
            12px
            calc(
                86px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    .eyebrow {
        letter-spacing: .08em !important;
    }

    .content-card {
        border-radius: 14px !important;
    }
}

/* ---------------------------------------------------------------
   Today / Workspace home
   --------------------------------------------------------------- */

@media (max-width: 649px) {
    .workspace-home-shell {
        gap: 8px !important;
    }

    .workspace-home-hero {
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        box-shadow: var(--ui-shadow-sm) !important;
    }

    .workspace-home-hero::after {
        top: -112px !important;
        right: -92px !important;
        width: 190px !important;
        height: 190px !important;
        border-width: 21px !important;
        opacity: .72;
    }

    .workspace-home-hero-copy .eyebrow {
        margin: 0 0 1px !important;
        font-size: .64rem !important;
    }

    .workspace-home-hero h1 {
        margin: 0 0 4px !important;
        font-size: 2rem !important;
        line-height: .98 !important;
    }

    .workspace-home-intro {
        max-width: 100% !important;
        font-size: .78rem !important;
        line-height: 1.38 !important;
    }

    .workspace-home-actions {
        margin-top: 1px !important;
    }

    .workspace-home-customize {
        min-height: 36px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
    }

    .workspace-home-customize span {
        font-size: .88rem !important;
    }

    .workspace-home-customize strong {
        font-size: .75rem !important;
    }

    .workspace-home-pulse {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .workspace-pulse-item {
        grid-template-columns:
            auto minmax(0, 1fr) !important;
        justify-items: stretch !important;
        gap: 6px !important;
        min-height: 48px !important;
        padding: 6px 7px !important;
        text-align: left !important;
        border-radius: 10px !important;
    }

    .workspace-pulse-item > span {
        width: 27px !important;
        height: 27px !important;
        flex-basis: 27px !important;
        border-radius: 8px !important;
        font-size: .72rem !important;
    }

    .workspace-pulse-item small {
        max-width: none !important;
        font-size: .59rem !important;
        line-height: 1.15 !important;
    }

    .workspace-pulse-item strong {
        margin-top: 1px !important;
        font-size: .88rem !important;
    }

    .workspace-home-dashboard {
        gap: 8px !important;
    }

    .workspace-home-dashboard .workspace-widget {
        padding: 10px !important;
        border-radius: 14px !important;
    }

    .workspace-home-dashboard .workspace-widget-header {
        margin-bottom: 7px !important;
    }

    .workspace-widget-kind-icon {
        width: 31px !important;
        height: 31px !important;
        flex-basis: 31px !important;
        border-radius: 9px !important;
        font-size: .78rem !important;
    }

    .workspace-widget-heading-copy {
        gap: 7px !important;
    }

    .workspace-widget-heading-copy .eyebrow {
        margin-bottom: 1px !important;
        font-size: .57rem !important;
    }

    .workspace-home-dashboard .workspace-widget-header h2 {
        font-size: .92rem !important;
        line-height: 1.12 !important;
    }

    .workspace-widget-header-actions {
        gap: 3px !important;
    }

    .workspace-home-dashboard .workspace-widget-open {
        min-height: 26px !important;
        padding: 0 4px !important;
        font-size: .62rem !important;
    }

    .workspace-home-dashboard .workspace-widget-settings {
        width: 31px !important;
        height: 31px !important;
        min-height: 31px !important;
        border-radius: 9px !important;
        font-size: .66rem !important;
    }

    .workspace-home-dashboard
    .workspace-type-attention
    .workspace-attention-grid {
        gap: 5px !important;
    }

    .workspace-home-dashboard .workspace-attention-item {
        min-height: 43px !important;
        padding: 6px 7px !important;
        border-radius: 10px !important;
    }

    .workspace-home-dashboard .workspace-attention-item strong {
        min-width: 30px !important;
        font-size: .9rem !important;
    }

    .workspace-home-dashboard .workspace-attention-item span {
        font-size: .75rem !important;
    }

    .workspace-task-row {
        min-height: 44px !important;
        gap: 7px !important;
        padding: 4px 2px !important;
    }

    .workspace-task-check {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
    }

    .workspace-task-main strong {
        font-size: .78rem !important;
    }

    .workspace-task-main small {
        font-size: .63rem !important;
    }

    .workspace-schedule-row {
        grid-template-columns:
            42px 13px minmax(0, 1fr) auto !important;
        min-height: 48px !important;
        gap: 5px !important;
        padding-inline: 2px !important;
    }

    .workspace-schedule-time strong {
        font-size: .68rem !important;
    }

    .workspace-schedule-time small {
        font-size: .57rem !important;
    }

    .workspace-project-progress-row {
        min-height: 58px !important;
    }

    .workspace-project-progress-meta small {
        font-size: .61rem !important;
    }

    .workspace-home-dashboard .workspace-quick-actions {
        gap: 5px !important;
    }

    .workspace-home-dashboard .workspace-quick-actions > a {
        min-height: 44px !important;
        padding: 6px !important;
        border-radius: 9px !important;
    }
}

/* ---------------------------------------------------------------
   More
   --------------------------------------------------------------- */

@media (max-width: 649px) {
    .d35-more-hero {
        gap: 7px !important;
        margin-bottom: 10px !important;
    }

    .d35-more-hero .eyebrow {
        margin: 0 !important;
        font-size: .66rem !important;
    }

    .d35-more-hero h1 {
        margin: 0 0 4px !important;
        font-size: 2rem !important;
        line-height: 1 !important;
    }

    .d35-more-hero p:not(.eyebrow) {
        max-width: 36rem !important;
        font-size: .78rem !important;
        line-height: 1.4 !important;
    }

    .d35-more-hero > a {
        width: auto !important;
        min-height: 38px !important;
        justify-self: start !important;
        padding: 0 13px !important;
        border-radius: 10px !important;
        font-size: .76rem !important;
    }

    .d35-more-group {
        margin-top: 14px !important;
    }

    .d35-more-group .d35-section-heading {
        margin-bottom: 6px !important;
    }

    .d35-more-group .d35-section-heading .eyebrow {
        font-size: .62rem !important;
    }

    .d35-more-group .d35-section-heading h2 {
        margin-top: 1px !important;
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
    }

    .d35-more-grid {
        gap: 6px !important;
    }

    .d35-more-grid > a {
        min-height: 57px !important;
        gap: 8px !important;
        padding: 7px 8px !important;
        border-radius: 11px !important;
    }

    .d35-more-grid > a > span {
        width: 34px !important;
        height: 34px !important;
        border-radius: 9px !important;
        font-size: .84rem !important;
    }

    .d35-more-grid strong {
        font-size: .82rem !important;
        line-height: 1.15 !important;
    }

    .d35-more-grid small {
        margin-top: 2px !important;
        font-size: .66rem !important;
        line-height: 1.22 !important;
    }

    .d35-more-grid i {
        font-size: .92rem !important;
    }
}

/* ---------------------------------------------------------------
   Quick Create — compact real bottom sheet
   --------------------------------------------------------------- */

@media (max-width: 649px) {
    .ui-modal-backdrop {
        align-items: end !important;
        padding:
            10px
            10px
            calc(
                10px
                + env(safe-area-inset-bottom)
            ) !important;
        backdrop-filter: blur(8px) !important;
    }

    .quick-create-sheet {
        width: 100% !important;
        max-width: 520px !important;
        max-height:
            min(
                72dvh,
                610px
            ) !important;
        margin: 0 auto !important;
        padding: 10px !important;
        overscroll-behavior: contain;
        border-radius: 20px !important;
    }

    .quick-create-sheet > header {
        position: sticky;
        z-index: 2;
        top: -10px;
        margin:
            -10px
            -10px
            8px !important;
        padding:
            11px
            10px
            9px !important;
        border-bottom: 1px solid var(--ui-border);
        background:
            color-mix(
                in srgb,
                var(--ui-surface-raised) 96%,
                transparent
            );
        backdrop-filter: blur(14px);
    }

    .quick-create-sheet > header .eyebrow {
        margin-bottom: 1px !important;
        font-size: .61rem !important;
    }

    .quick-create-sheet h2 {
        font-size: 1.08rem !important;
        line-height: 1.1 !important;
    }

    .quick-create-sheet .ui-icon-button {
        width: 33px !important;
        height: 33px !important;
        min-height: 33px !important;
        border-radius: 9px !important;
        font-size: 1.15rem !important;
    }

    .quick-create-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .quick-create-grid > a {
        min-width: 0;
        min-height: 64px !important;
        gap: 8px !important;
        padding: 8px !important;
        border-radius: 11px !important;
    }

    .quick-create-icon {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
        border-radius: 9px !important;
        font-size: .82rem !important;
    }

    .quick-create-grid > a > span:last-child {
        min-width: 0;
    }

    .quick-create-grid strong {
        overflow: hidden;
        font-size: .76rem !important;
        line-height: 1.15 !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-create-grid small {
        display: -webkit-box !important;
        overflow: hidden;
        margin-top: 2px !important;
        font-size: .61rem !important;
        line-height: 1.2 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }
}

@media (max-width: 349px) {
    .quick-create-grid {
        grid-template-columns: 1fr !important;
    }

    .quick-create-sheet {
        max-height: 74dvh !important;
    }
}

/* ---------------------------------------------------------------
   Bottom navigation + FAB
   --------------------------------------------------------------- */

@media (max-width: 1039px) {
    :root {
        --pwa-nav-height: 66px;
    }

    .mobile-bottom-nav {
        min-height: 66px !important;
        padding:
            5px
            3px
            calc(
                5px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    .mobile-nav-item {
        min-height: 52px !important;
        gap: 2px !important;
        border-radius: 9px !important;
        font-size: .66rem !important;
        line-height: 1 !important;
    }

    .mobile-nav-icon {
        width: 28px !important;
        height: 25px !important;
        font-size: 1rem !important;
    }

    .mobile-nav-item.active .mobile-nav-icon {
        border-radius: 8px !important;
    }

    .mobile-create-fab {
        right: 13px !important;
        bottom:
            calc(
                71px
                + env(safe-area-inset-bottom)
            ) !important;
        width: 50px !important;
        height: 50px !important;
        border-width: 3px !important;
        font-size: 1.45rem !important;
    }

    body.d51-no-fab .mobile-create-fab {
        display: none !important;
    }

    body.d51-no-fab
    .pwa-update-banner,
    body.d51-no-fab
    .pwa-toast-container {
        right: 10px !important;
    }
}

/* ---------------------------------------------------------------
   PWA center
   --------------------------------------------------------------- */

@media (max-width: 649px) {
    .pwa029-hero,
    .pwa029-page-hero {
        gap: 7px !important;
        margin-bottom: 9px !important;
    }

    .pwa029-hero .eyebrow,
    .pwa029-page-hero .eyebrow {
        font-size: .64rem !important;
    }

    .pwa029-hero h1,
    .pwa029-page-hero h1 {
        margin: 0 0 4px !important;
        font-size: 2rem !important;
        line-height: 1 !important;
    }

    .pwa029-hero p:not(.eyebrow),
    .pwa029-page-hero p:not(.eyebrow) {
        font-size: .78rem !important;
        line-height: 1.4 !important;
    }

    .pwa029-install-actions {
        gap: 5px !important;
    }

    .pwa029-install-actions > * {
        width: auto !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        font-size: .73rem !important;
    }

    .pwa029-status-grid {
        gap: 5px !important;
        margin-bottom: 8px !important;
    }

    .pwa029-status-grid > article {
        min-height: 66px !important;
        padding: 7px 8px !important;
        border-radius: 11px !important;
    }

    .pwa029-status-grid small {
        font-size: .58rem !important;
    }

    .pwa029-status-grid strong {
        margin: 2px 0 !important;
        font-size: .96rem !important;
    }

    .pwa029-status-grid span {
        font-size: .56rem !important;
        line-height: 1.18 !important;
    }

    .pwa029-grid {
        gap: 7px !important;
    }

    .pwa029-card {
        padding: 9px !important;
    }

    .pwa029-section-heading {
        margin-bottom: 7px !important;
    }

    .pwa029-section-heading .eyebrow {
        font-size: .59rem !important;
    }

    .pwa029-section-heading h2 {
        font-size: .98rem !important;
    }

    .pwa029-section-heading > span {
        width: 33px !important;
        height: 33px !important;
        border-radius: 9px !important;
        font-size: .9rem !important;
    }

    .pwa029-capture-form {
        gap: 6px !important;
    }

    .pwa029-capture-form textarea {
        min-height: 92px !important;
        max-height: 180px !important;
        padding: 10px !important;
        font-size: .9rem !important;
        line-height: 1.35 !important;
    }

    .pwa029-kind {
        gap: 5px !important;
    }

    .pwa029-kind span {
        min-height: 38px !important;
        padding: 0 6px !important;
        font-size: .69rem !important;
        white-space: nowrap;
    }

    .pwa029-capture-form
    > button[type="submit"] {
        min-height: 42px !important;
    }

    .pwa029-action-grid {
        gap: 5px !important;
    }

    .pwa029-action-grid > a {
        min-height: 68px !important;
        gap: 2px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    .pwa029-action-grid > a > span {
        font-size: .88rem !important;
    }

    .pwa029-action-grid strong {
        font-size: .76rem !important;
    }

    .pwa029-action-grid small {
        font-size: .61rem !important;
        line-height: 1.2 !important;
    }

    .pwa029-info-list {
        gap: 5px !important;
    }

    .pwa029-info-list > article {
        gap: 7px !important;
        padding: 7px !important;
        border-radius: 9px !important;
    }

    .pwa029-info-list > article > span {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
        font-size: .69rem !important;
    }

    .pwa029-info-list strong {
        font-size: .72rem !important;
    }

    .pwa029-info-list small {
        margin-top: 1px !important;
        font-size: .6rem !important;
        line-height: 1.25 !important;
    }

    .pwa029-local-actions {
        gap: 5px !important;
    }

    .pwa029-local-actions button {
        min-height: 38px !important;
        padding-inline: 10px !important;
        font-size: .68rem !important;
    }

    .pwa029-upload-card {
        padding: 10px !important;
    }

    .pwa029-upload-form {
        gap: 7px !important;
    }

    .pwa029-upload-form
    input[type="file"] {
        min-height: 46px !important;
    }
}

/* ---------------------------------------------------------------
   Theme-specific application shell
   --------------------------------------------------------------- */

html[data-theme="dark"] .mobile-bottom-nav {
    border-top-color:
        color-mix(
            in srgb,
            var(--ui-border-strong) 72%,
            transparent
        ) !important;
    background:
        color-mix(
            in srgb,
            var(--ui-surface) 91%,
            transparent
        ) !important;
}

html[data-theme="warm"] .mobile-bottom-nav {
    background:
        color-mix(
            in srgb,
            var(--ui-surface) 95%,
            transparent
        ) !important;
}

html[data-theme="bold"] .mobile-bottom-nav {
    box-shadow:
        0 -8px 24px
        color-mix(
            in srgb,
            var(--ui-primary) 10%,
            transparent
        ) !important;
}

/* ---------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------- */

html[data-motion="reduce"]
.quick-create-sheet,
html[data-motion="reduce"]
.mobile-create-fab {
    transition: none !important;
}