/* ============================================ */
/*   EcoCare Monitor — Mobile & Touch Enhance   */
/*   v8 — safe areas, scroll, touch targets     */
/* ============================================ */

:root {
    --monitor-safe-bottom: env(safe-area-inset-bottom, 0px);
    --monitor-safe-top: env(safe-area-inset-top, 0px);
    --monitor-touch-min: 44px;
}

/* Prevent horizontal page scroll */
#dashboard-section,
#login-section {
    overflow-x: hidden;
    max-width: 100vw;
}

#dashboard-section main {
    max-width: 100%;
    overflow-x: hidden;
}

/* Tables: horizontal scroll wrapper */
.st-v6-table-wrap,
.att-v6-log-table,
.rep-v6-table-wrap,
.tab-content .overflow-x-auto,
.tab-content table {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .st-v6-table-wrap,
    .att-v6-log-table {
        overflow-x: auto;
        margin-left: -4px;
        margin-right: -4px;
        padding-bottom: 4px;
    }

    /* Overview bed filters — stack & scroll */
    .ov-v6 .ov6-beds-head-actions {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
        width: 100%;
    }

    .ov-v6 .ov5-filters {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 4px;
        width: 100%;
        scrollbar-width: none;
    }

    .ov-v6 .ov5-filters::-webkit-scrollbar {
        display: none;
    }

    .ov-v6 .ov5-filters .ov-bed-filter-btn {
        min-height: var(--monitor-touch-min);
        padding: 8px 14px !important;
        flex-shrink: 0;
    }

    .ov-v6 .ov5-filters select {
        min-height: var(--monitor-touch-min);
        flex-shrink: 0;
    }

    .ov-v6 .ov6-history-link {
        align-self: flex-start;
        min-height: var(--monitor-touch-min);
        display: inline-flex;
        align-items: center;
    }

    /* KPI strip — horizontal scroll on very small screens */
    .ov-v6 .ov6-kpi-strip {
        margin-left: -4px;
        margin-right: -4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .ov-v6 .ov6-kpi-strip::-webkit-scrollbar {
        display: none;
    }

    .ov-v6 .ov6-kpi-grid {
        grid-template-columns: repeat(2, minmax(148px, 1fr)) !important;
        min-width: min(100%, 320px);
    }

    /* Workspace stacks on mobile */
    .ov-v6 .ov6-workspace-mosaic,
    .ov-v6 .ov6-ws-main,
    .ov-v6 .ov6-ws-side {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .ov-v6 .ov5-beds-card .ov-bed-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .ov-v6 .ov-bed-card {
        min-height: 92px !important;
        padding: 12px 8px !important;
    }

    /* Mobile menu — full width touch targets */
    .app-mobile-nav-btn {
        min-height: var(--monitor-touch-min);
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    .app-mobile-action-btn {
        min-height: var(--monitor-touch-min);
        padding: 12px !important;
    }

    .app-header-menu-btn {
        width: var(--monitor-touch-min);
        height: var(--monitor-touch-min);
    }

    /* Modals & drawers */
    #bed-detail-drawer,
    #bed-detail-modal > div,
    .life-subpanel,
    #life-profile-modal > div,
    #confirm-modal > div:last-child {
        max-width: calc(100vw - 24px) !important;
        margin-left: auto;
        margin-right: auto;
    }

    #bed-detail-drawer {
        max-height: 92vh !important;
    }

    /* Stats / filter bars — compact on mobile */
    .st-v6-header-filter,
    .st-v6-filter-grid,
    .rep-v6-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        align-items: end;
    }

    .st-v6-filter-label {
        margin-bottom: 3px;
        font-size: 9px;
        letter-spacing: 0.04em;
    }

    .st-v6-filter-input,
    .st-v6-filter-select,
    input[type="date"].st-v6-filter-input,
    input[type="month"].st-v6-filter-input,
    input[type="number"].st-v6-filter-input {
        height: 36px !important;
        min-height: 0 !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        border-radius: 7px !important;
    }

    .st-v6-filter-field,
    .st-v6-filter-field-wide,
    .st-v6-filter-field-medium {
        width: auto !important;
        flex: none !important;
        min-width: 0 !important;
    }

    /* Selects & user filter — full row */
    .st-v6-filter-field:has(select),
    .att-v6-filter-user,
    .st-v6-filter-field-wide,
    .st-v6-filter-field[style*="flex: 0 0 auto"] {
        grid-column: 1 / -1;
    }

    .st-v6-filter-btn {
        width: 100%;
        min-height: 38px;
        height: 38px;
        padding: 0 12px !important;
        font-size: 10px !important;
        border-radius: 7px !important;
    }

    /* Single action button spans full width */
    .st-v6-filter-grid > .st-v6-filter-btn:only-of-type,
    .st-v6-header-filter > .st-v6-filter-btn:only-of-type {
        grid-column: 1 / -1;
    }

    /* Pair of action buttons — side by side */
    .st-v6-filter-grid > .st-v6-filter-btn {
        grid-column: span 1;
        width: 100%;
    }

    .st-v6-filter-grid > .st-v6-filter-btn.ml-2 {
        margin-left: 0 !important;
    }

    /* Hero date filters (Stats, Nhật ký) */
    .st-v6-hero-aside .st-v6-header-filter {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .st-v6-hero-aside .st-v6-header-filter > .st-v6-filter-btn,
    .st-v6-hero-aside .att-v6-filter-user {
        grid-column: 1 / -1;
    }

    /* Analytics date bar */
    .an-v6-date-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .an-v6-date-bar__controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px !important;
        width: 100%;
    }

    .an-v6-date-bar__field {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 3px !important;
        min-width: 0;
    }

    .an-v6-date-bar__field label {
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ov6-text-muted, #64748b);
    }

    .an-v6-date-bar__field input {
        width: 100% !important;
        height: 36px !important;
        min-height: 0 !important;
        padding: 0 8px !important;
        font-size: 12px !important;
    }

    .an-v6-date-bar__btn {
        grid-column: 1 / -1;
        width: 100%;
        height: 38px !important;
        min-height: 38px !important;
    }

    .ov-v6 .ov6-hero-aside:has(.st-v6-header-filter) {
        padding: 10px !important;
        gap: 0 !important;
        align-self: stretch;
        flex-direction: column !important;
    }

    .ov-v6 .ov6-hero {
        padding: 12px 12px !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .st-v6-hero-aside {
        width: 100%;
    }

    .st-v6-filter-card .ov5-card-body,
    .st-v6-filter-card .st-v6-filter-body {
        padding: 10px 12px !important;
    }

    .st-v6-filter-card .ov5-card-head,
    .st-v6-filter-card .st-v6-filter-head {
        padding: 8px 12px !important;
    }

    /* Reports sub-tabs — horizontal scroll, compact */
    .rep-subtabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px !important;
        padding-bottom: 6px !important;
        margin-bottom: 12px !important;
        scrollbar-width: none;
    }

    .rep-subtabs::-webkit-scrollbar {
        display: none;
    }

    .rep-subtab-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        flex-shrink: 0;
        white-space: nowrap;
        gap: 5px !important;
    }

    .rep-subtab-btn i {
        font-size: 11px !important;
    }

    /* Timesheet controls */
    .att-v6-ts-controls {
        grid-template-columns: 1fr 88px !important;
    }

    .att-v6-ts-controls .st-v6-filter-btn {
        grid-column: 1 / -1;
    }

    /* Preset date chips in staff report — scroll row */
    .st-v6-filter-grid .flex.items-center.gap-1\.5 {
        grid-column: 1 / -1;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        height: auto !important;
        align-self: stretch;
    }

    .st-v6-filter-grid .flex.items-center.gap-1\.5 button {
        flex-shrink: 0;
        padding: 5px 8px !important;
        font-size: 10px !important;
    }

    /* Contact widget — compact on mobile */
    .contact-widget {
        bottom: calc(12px + var(--monitor-safe-bottom)) !important;
        right: 12px !important;
        gap: 8px !important;
    }

    .contact-widget .widget-btn,
    #scrollTopBtn {
        width: 44px !important;
        height: 44px !important;
    }

    /* Toast container */
    #alert-toast-container {
        top: calc(8px + var(--monitor-safe-top)) !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Login — single column already; tighten padding */
    .login-v6 {
        padding: 16px !important;
    }

    .login-v6-submit {
        min-height: var(--monitor-touch-min);
    }

    /* Tab content padding */
    main.flex-1 {
        padding: 10px 10px calc(16px + var(--monitor-safe-bottom)) !important;
    }

    /* LIFE / Admin grids */
    .life-v6 .grid,
    .adm-v6 .grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 399px) {
    .ov-v6 .ov6-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .ov-v6 .ov-kpi-value {
        font-size: 1.05rem !important;
    }

    .app-header-brand {
        max-width: 110px !important;
    }

    .app-header-company {
        font-size: 10px !important;
    }
}

/* Motion disabled — no tab/card entrance animations */
.animate-fade-in {
    animation: none !important;
}

#login-section .login-v6-brand,
.app-header .logo-text,
.ov-live-dot,
.item-badge.hot-blink::before {
    animation: none !important;
}

/* GSAP removed: legacy block kept harmless if class is absent */
html.gsap-monitor-ready .ov-kpi-card,
html.gsap-monitor-ready .ov5-card,
html.gsap-monitor-ready .tab-content,
html.gsap-monitor-ready .life-v6-sub-btn,
html.gsap-monitor-ready .life-subpanel,
html.gsap-monitor-ready .rep-subtab-btn,
html.gsap-monitor-ready .rep-subcontent-section,
html.gsap-monitor-ready .tab-btn-pill,
html.gsap-monitor-ready .an-v6-date-bar {
    transition: none;
}

/* Desktop: never show mobile drawer (e.g. after resize from phone) */
@media (min-width: 1024px) {
    #mobile-menu {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.gsap-monitor-ready .ov-kpi-card,
    html.gsap-monitor-ready .ov5-card,
    html.gsap-monitor-ready .tab-content,
    html.gsap-monitor-ready .login-v6-brand,
    html.gsap-monitor-ready .login-v6-card,
    html.gsap-monitor-ready .life-v6-sub-btn,
    html.gsap-monitor-ready .life-subpanel,
    html.gsap-monitor-ready .rep-subtab-btn,
    html.gsap-monitor-ready .rep-subcontent-section,
    html.gsap-monitor-ready .tab-btn-pill,
    html.gsap-monitor-ready .an-v6-date-bar {
        opacity: 1 !important;
        transform: none !important;
    }

    .ov-v6 .ov-bed-card-alert {
        animation: none !important;
    }
}