/* ═══════════════════════════════════════════════════════════
   NETSENSE IOT - MOBILE PWA LAYOUT
   Dedicated mobile experience for PWA
   Breakpoint: <= 768px
   ════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES - MOBILE SPECIFIC
   ════════════════════════════════════════════════════════════ */
:root {
    --mobile-header-height: 56px;
    --mobile-bottom-nav-height: 64px;
    --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
}


/* Hide mobile elements by default (desktop) */
.mobile-header,
.mobile-bottom-nav,
.mobile-dashboard,
.mobile-assets,
.mobile-alerts,
.mobile-events {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE LAYOUT ACTIVATION
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Hide desktop elements */
    body.mobile-active .sidebar,
    body.mobile-active .mobile-menu-toggle,
    body.mobile-active .mobile-overlay {
        display: none !important;
    }

    /* Adjust main content for mobile layout */
    body.mobile-active .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
        padding-top: var(--mobile-header-height) !important;
        padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom) + 20px) !important;
        min-height: 100vh;
        min-height: 100dvh;
    }

    body.mobile-active .page-content {
        padding: 16px !important;
    }

    /* Hide desktop page headers in mobile */
    body.mobile-active .page-header {
        display: none !important;
    }

    /* Fix viewport height */
    body.mobile-active {
        height: 100%;
        overflow-x: hidden;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE HEADER
   ════════════════════════════════════════════════════════════ */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mobile-header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    z-index: 9999;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    body.mobile-active .mobile-header {
        display: flex !important;
    }
}

.mobile-header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-header-logo svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
}

.mobile-header-logo span {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0.5px;
}

.mobile-header-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-header-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mobile-header-btn:hover,
.mobile-header-btn:active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.mobile-header-btn svg {
    width: 22px;
    height: 22px;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION
   ════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom));
    padding-bottom: var(--mobile-safe-area-bottom);
    background: var(--bg-secondary);
    background-color: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-primary);
    z-index: 9999;
}

@media (max-width: 768px) {
    body.mobile-active .mobile-bottom-nav {
        display: flex !important;
    }
}

.mobile-nav-items {
    display: flex;
    width: 100%;
    height: var(--mobile-bottom-nav-height);
}

.mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 8px 4px;
    position: relative;
}

.mobile-nav-item svg {
    width: 24px;
    height: 24px;
    transition: transform 0.15s ease;
}

.mobile-nav-item span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.mobile-nav-item:active {
    background: var(--bg-hover);
}

.mobile-nav-item:active svg {
    transform: scale(0.9);
}

.mobile-nav-item.active {
    color: var(--primary);
}

.mobile-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: var(--primary);
    border-radius: 0 0 3px 3px;
}

/* Badge for alerts count */
.mobile-nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 20px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-badge:empty,
.mobile-nav-badge[data-count="0"] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE CARDS - BASE STYLES
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mobile-card {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
    }

    .mobile-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .mobile-card-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-card-title svg {
        width: 18px;
        height: 18px;
        color: var(--text-muted);
    }

    .mobile-card-value {
        font-size: 36px;
        font-weight: 700;
        color: var(--text-primary);
        font-family: var(--font-mono);
        line-height: 1.1;
    }

    .mobile-card-value.critical {
        color: var(--danger);
    }

    .mobile-card-value.warning {
        color: var(--warning);
    }

    .mobile-card-value.success {
        color: var(--success);
    }

    .mobile-card-subtitle {
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 4px;
    }

    .mobile-card-footer {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border-primary);
        font-size: 12px;
        color: var(--text-muted);
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE DASHBOARD
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body.mobile-active #page-dashboard .dashboard-v4 {
        padding: 0;
    }

    /* Hide desktop dashboard elements */
    body.mobile-active #page-dashboard .dash-header,
    body.mobile-active #page-dashboard .hero-strip,
    body.mobile-active #page-dashboard .assets-section,
    body.mobile-active #page-dashboard .events-section {
        display: none !important;
    }

    /* Mobile dashboard container */
    .mobile-dashboard {
        display: none;
        flex-direction: column;
        gap: 12px;
    }

    body.mobile-active .mobile-dashboard {
        display: flex;
    }

    /* KPI Cards in mobile dashboard */
    .mobile-kpi-card {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .mobile-kpi-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mobile-kpi-icon svg {
        width: 24px;
        height: 24px;
    }

    .mobile-kpi-icon.runout {
        background: var(--warning-light);
        color: var(--warning);
    }

    .mobile-kpi-icon.risk {
        background: var(--danger-light);
        color: var(--danger);
    }

    .mobile-kpi-icon.health {
        background: var(--success-light);
        color: var(--success);
    }

    .mobile-kpi-content {
        flex: 1;
        min-width: 0;
    }

    .mobile-kpi-label {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 4px;
    }

    .mobile-kpi-value {
        font-size: 28px;
        font-weight: 700;
        color: var(--text-primary);
        font-family: var(--font-mono);
        line-height: 1.2;
    }

    .mobile-kpi-value.critical {
        color: var(--danger);
    }

    .mobile-kpi-value.warning {
        color: var(--warning);
    }

    .mobile-kpi-sub {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    /* Assets at risk list */
    .mobile-risk-list {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        overflow: hidden;
    }

    .mobile-risk-header {
        padding: 16px;
        border-bottom: 1px solid var(--border-primary);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-risk-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-risk-title svg {
        width: 18px;
        height: 18px;
        color: var(--warning);
    }

    .mobile-risk-count {
        font-size: 12px;
        color: var(--text-muted);
        background: var(--bg-secondary);
        padding: 4px 10px;
        border-radius: 12px;
    }

    .mobile-risk-item {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-primary);
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .mobile-risk-item:last-child {
        border-bottom: none;
    }

    .mobile-risk-item:active {
        background: var(--bg-hover);
    }

    .mobile-risk-indicator {
        width: 4px;
        height: 40px;
        border-radius: 2px;
        flex-shrink: 0;
    }

    .mobile-risk-indicator.critical {
        background: var(--danger);
    }

    .mobile-risk-indicator.warning {
        background: var(--warning);
    }

    .mobile-risk-info {
        flex: 1;
        min-width: 0;
    }

    .mobile-risk-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-risk-site {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    .mobile-risk-metrics {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .mobile-risk-chip {
        font-size: 12px;
        font-family: var(--font-mono);
        padding: 4px 8px;
        border-radius: 6px;
        background: var(--bg-secondary);
        color: var(--text-secondary);
    }

    .mobile-risk-chip.critical {
        background: var(--danger-light);
        color: var(--danger);
    }

    .mobile-risk-chip.warning {
        background: var(--warning-light);
        color: var(--warning);
    }

    /* Recent events mini list */
    .mobile-events-card {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        overflow: hidden;
    }

    .mobile-events-header {
        padding: 16px;
        border-bottom: 1px solid var(--border-primary);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-events-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-events-title svg {
        width: 18px;
        height: 18px;
        color: var(--info);
    }

    .mobile-events-link {
        font-size: 13px;
        color: var(--primary);
        text-decoration: none;
    }

    .mobile-event-item {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-primary);
        display: flex;
        align-items: flex-start;
        gap: 12px;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .mobile-event-item:last-child {
        border-bottom: none;
    }

    .mobile-event-item:active {
        background: var(--bg-hover);
    }

    .mobile-event-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 4px;
    }

    .mobile-event-dot.critical {
        background: var(--danger);
    }

    .mobile-event-dot.warning {
        background: var(--warning);
    }

    .mobile-event-dot.info {
        background: var(--info);
    }

    .mobile-event-content {
        flex: 1;
        min-width: 0;
    }

    .mobile-event-asset {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .mobile-event-msg {
        font-size: 13px;
        color: var(--text-secondary);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-event-time {
        font-size: 12px;
        color: var(--text-muted);
        flex-shrink: 0;
    }

    .mobile-events-empty {
        padding: 32px 16px;
        text-align: center;
        color: var(--text-muted);
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE ASSETS LIST
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Hide desktop assets table */
    body.mobile-active #page-assets .table-enhanced-container {
        display: none !important;
    }

    /* Mobile assets container */
    .mobile-assets {
        display: none;
    }

    body.mobile-active .mobile-assets {
        display: block;
    }

    /* Search and filters */
    .mobile-assets-filters {
        margin-bottom: 16px;
    }

    .mobile-assets-search {
        width: 100%;
        padding: 14px 16px;
        padding-left: 44px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        font-size: 16px;
        color: var(--text-primary);
        outline: none;
        transition: border-color 0.15s ease;
    }

    .mobile-assets-search:focus {
        border-color: var(--primary);
    }

    .mobile-assets-search-wrapper {
        position: relative;
    }

    .mobile-assets-search-wrapper svg {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        color: var(--text-muted);
    }

    .mobile-assets-chips {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-assets-chips::-webkit-scrollbar {
        display: none;
    }

    .mobile-filter-chip {
        flex-shrink: 0;
        padding: 8px 16px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 20px;
        font-size: 13px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
    }

    .mobile-filter-chip:active {
        transform: scale(0.95);
    }

    .mobile-filter-chip.active {
        background: var(--primary);
        border-color: var(--primary);
        color: white;
    }

    /* Asset cards */
    .mobile-assets-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-asset-card {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .mobile-asset-card:active {
        background: var(--bg-hover);
        transform: scale(0.98);
    }

    .mobile-asset-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .mobile-asset-info {
        flex: 1;
        min-width: 0;
    }

    .mobile-asset-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-asset-site {
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    .mobile-asset-status {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 4px 10px;
        border-radius: 6px;
        flex-shrink: 0;
    }

    .mobile-asset-status.ok {
        background: var(--success-light);
        color: var(--success);
    }

    .mobile-asset-status.warning {
        background: var(--warning-light);
        color: var(--warning);
    }

    .mobile-asset-status.critical {
        background: var(--danger-light);
        color: var(--danger);
    }

    .mobile-asset-status.offline {
        background: var(--bg-secondary);
        color: var(--text-muted);
    }

    .mobile-asset-metrics {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .mobile-asset-metric {
        flex: 1;
    }

    .mobile-asset-metric-label {
        font-size: 11px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin-bottom: 4px;
    }

    .mobile-asset-metric-value {
        font-size: 20px;
        font-weight: 700;
        font-family: var(--font-mono);
        color: var(--text-primary);
    }

    .mobile-asset-metric-value.critical {
        color: var(--danger);
    }

    .mobile-asset-metric-value.warning {
        color: var(--warning);
    }

    /* Level bar */
    .mobile-asset-level-bar {
        height: 8px;
        background: var(--bg-secondary);
        border-radius: 4px;
        overflow: hidden;
        margin-top: 12px;
    }

    .mobile-asset-level-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.3s ease;
    }

    .mobile-asset-level-fill.ok {
        background: var(--success);
    }

    .mobile-asset-level-fill.warning {
        background: var(--warning);
    }

    .mobile-asset-level-fill.critical {
        background: var(--danger);
    }

    .mobile-asset-level-fill.offline {
        background: var(--text-muted);
    }

    /* Empty state */
    .mobile-assets-empty {
        padding: 48px 24px;
        text-align: center;
    }

    .mobile-assets-empty svg {
        width: 48px;
        height: 48px;
        color: var(--text-muted);
        margin-bottom: 16px;
    }

    .mobile-assets-empty-text {
        font-size: 16px;
        color: var(--text-muted);
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE ALERTS LIST
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Hide desktop alerts elements */
    body.mobile-active #page-alerts .report-config-card,
    body.mobile-active #page-alerts .table-enhanced-container {
        display: none !important;
    }

    /* Mobile alerts container */
    .mobile-alerts {
        display: none;
    }

    body.mobile-active .mobile-alerts {
        display: block;
    }

    /* Summary pills */
    .mobile-alerts-summary {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
    }

    .mobile-alert-pill {
        flex: 1;
        padding: 12px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 10px;
        text-align: center;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .mobile-alert-pill:active {
        transform: scale(0.95);
    }

    .mobile-alert-pill.active {
        border-color: var(--primary);
        background: var(--primary-light);
    }

    .mobile-alert-pill-count {
        font-size: 24px;
        font-weight: 700;
        font-family: var(--font-mono);
        line-height: 1;
    }

    .mobile-alert-pill.critical .mobile-alert-pill-count {
        color: var(--danger);
    }

    .mobile-alert-pill.warning .mobile-alert-pill-count {
        color: var(--warning);
    }

    .mobile-alert-pill.info .mobile-alert-pill-count {
        color: var(--info);
    }

    .mobile-alert-pill-label {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 4px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Alert cards */
    .mobile-alerts-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-alert-card {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        padding: 14px 16px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .mobile-alert-card:active {
        background: var(--bg-hover);
    }

    .mobile-alert-severity {
        width: 6px;
        height: 100%;
        min-height: 48px;
        border-radius: 3px;
        flex-shrink: 0;
    }

    .mobile-alert-severity.critical {
        background: var(--danger);
    }

    .mobile-alert-severity.warning {
        background: var(--warning);
    }

    .mobile-alert-severity.info {
        background: var(--info);
    }

    .mobile-alert-content {
        flex: 1;
        min-width: 0;
    }

    .mobile-alert-asset {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .mobile-alert-site {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    .mobile-alert-message {
        font-size: 14px;
        color: var(--text-secondary);
        margin-top: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-alert-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
    }

    .mobile-alert-time {
        font-size: 12px;
        color: var(--text-muted);
    }

    .mobile-alert-status {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        padding: 3px 8px;
        border-radius: 4px;
    }

    .mobile-alert-status.active {
        background: var(--danger-light);
        color: var(--danger);
    }

    .mobile-alert-status.resolved {
        background: var(--success-light);
        color: var(--success);
    }

    .mobile-alerts-empty {
        padding: 48px 24px;
        text-align: center;
        color: var(--text-muted);
    }

    .mobile-alerts-empty svg {
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
        color: var(--success);
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE EVENTS LIST
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Hide desktop events elements */
    body.mobile-active #page-events .report-config-card,
    body.mobile-active #page-events .events-detail-grid {
        display: none !important;
    }

    /* Mobile events container */
    .mobile-events {
        display: none;
    }

    body.mobile-active .mobile-events {
        display: block;
    }

    /* Simplified filters */
    .mobile-events-filters {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-events-filters::-webkit-scrollbar {
        display: none;
    }

    /* Event cards */
    .mobile-events-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-event-card {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        padding: 14px 16px;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .mobile-event-card:active {
        background: var(--bg-hover);
    }

    .mobile-event-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .mobile-event-type-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mobile-event-type-icon svg {
        width: 18px;
        height: 18px;
    }

    .mobile-event-type-icon.refill {
        background: var(--success-light);
        color: var(--success);
    }

    .mobile-event-type-icon.anomaly {
        background: var(--warning-light);
        color: var(--warning);
    }

    .mobile-event-type-icon.offline {
        background: var(--bg-secondary);
        color: var(--text-muted);
    }

    .mobile-event-type-icon.alert {
        background: var(--danger-light);
        color: var(--danger);
    }

    .mobile-event-card-info {
        flex: 1;
        min-width: 0;
    }

    .mobile-event-card-asset {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .mobile-event-card-type {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    .mobile-event-card-time {
        font-size: 12px;
        color: var(--text-muted);
        flex-shrink: 0;
    }

    .mobile-event-card-summary {
        font-size: 14px;
        color: var(--text-secondary);
        margin-top: 4px;
    }

    .mobile-events-empty {
        padding: 48px 24px;
        text-align: center;
        color: var(--text-muted);
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE ASSET DETAIL PANEL (from dashboard-v4.js)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Backdrop - full black */
    body.mobile-active .asset-detail-backdrop {
        background: var(--bg-primary) !important;
    }

    body.mobile-active .asset-detail-backdrop.open {
        z-index: 10000 !important;
        opacity: 1 !important;
    }

    /* Panel - fullscreen */
    body.mobile-active .asset-detail-panel {
        z-index: 10001 !important;
    }

    body.mobile-active .asset-detail-panel.open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        box-shadow: none !important;
    }

    /* Header */
    body.mobile-active .asset-detail-header {
        padding: 16px !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--bg-secondary) !important;
        z-index: 10 !important;
        border-bottom: 1px solid var(--border-primary) !important;
    }

    body.mobile-active .asset-detail-title {
        font-size: 18px !important;
    }

    body.mobile-active .asset-detail-close {
        width: 36px !important;
        height: 36px !important;
    }

    /* Body */
    body.mobile-active .asset-detail-body {
        padding: 16px !important;
        padding-bottom: 100px !important;
        overflow-y: auto !important;
        background: var(--bg-primary) !important;
    }

    /* Grid - keep 2 columns but with better spacing */
    body.mobile-active .asset-detail-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    body.mobile-active .asset-detail-section {
        margin-bottom: 20px !important;
        padding: 16px !important;
        background: var(--bg-secondary) !important;
        border-radius: 12px !important;
        border: 1px solid var(--border-primary) !important;
    }

    body.mobile-active .asset-detail-section-title {
        font-size: 12px !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid var(--border-primary) !important;
    }

    body.mobile-active .asset-detail-label {
        font-size: 11px !important;
    }

    body.mobile-active .asset-detail-value {
        font-size: 14px !important;
    }

    body.mobile-active .asset-detail-value.large {
        font-size: 36px !important;
    }

    /* Footer with button - only show when panel is open */
    body.mobile-active .asset-detail-footer {
        display: none !important;
    }

    body.mobile-active .asset-detail-panel.open .asset-detail-footer {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 16px !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--bg-secondary) !important;
        border-top: 1px solid var(--border-primary) !important;
        z-index: 10002 !important;
    }

    body.mobile-active .asset-detail-link {
        padding: 16px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE ASSET DETAIL MODAL (from app.js - #assetDetailModal)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Modal container - fixed fullscreen */
    body.mobile-active #assetDetailModal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 10000 !important;
        overflow: hidden !important;
    }

    body.mobile-active #assetDetailModal .modal-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: var(--bg-primary) !important;
    }

        body.mobile-active #assetDetailModal .modal-card,
        body.mobile-active #assetDetailModal .modal-content-wide {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            height: 100% !important;
            height: 100dvh !important;
            max-height: 100% !important;
            max-height: 100dvh !important;
            margin: 0 !important;
            border-radius: 0 !important;
            border: none !important;
            overflow-y: auto !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
            align-items: stretch !important;
        }

    /* Header */
    body.mobile-active #assetDetailModal .asset-modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: var(--bg-secondary) !important;
        padding: 16px !important;
        border-bottom: 1px solid var(--border-primary) !important;
        flex-shrink: 0 !important;
    }

    body.mobile-active #assetDetailModal .asset-modal-title {
        font-size: 18px !important;
    }

    /* Body - single column, fills remaining space */
        body.mobile-active #assetDetailModal .asset-modal-body {
            padding: 16px !important;
            overflow-y: auto !important;
            flex-grow: 1 !important;
            height: auto !important;
            min-height: calc(100% - 76px) !important;
            background: var(--bg-primary) !important;
        }
  

    body.mobile-active #assetDetailModal .asset-status-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    body.mobile-active #assetDetailModal .asset-col {
        width: 100% !important;
        min-width: 100% !important;
        padding: 16px !important;
        background: var(--bg-secondary) !important;
        border-radius: 12px !important;
        border: 1px solid var(--border-primary) !important;
    }

    /* Tank visualization */
    body.mobile-active #assetDetailModal .tank-svg-wrapper {
        max-width: 120px !important;
        margin: 0 auto 12px auto !important;
    }

    body.mobile-active #assetDetailModal .asset-volume-display {
        text-align: center !important;
    }

    body.mobile-active #assetDetailModal .asset-volume-value {
        font-size: 32px !important;
    }

    /* Health doughnut */
    body.mobile-active #assetDetailModal .health-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    body.mobile-active #assetDetailModal .health-doughnut-container {
        margin: 0 auto !important;
    }

    body.mobile-active #assetDetailModal .health-details {
        width: 100% !important;
        text-align: center !important;
    }

    /* Tech items grid */
    body.mobile-active #assetDetailModal .tech-items {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Chart section */
    body.mobile-active #assetDetailModal .asset-chart-section {
        padding: 16px !important;
        margin-top: 16px !important;
    }

    body.mobile-active #assetDetailModal .asset-chart-tabs {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    body.mobile-active #assetDetailModal .asset-chart-tab {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    body.mobile-active #assetDetailModal .chart-container,
    body.mobile-active #assetDetailModal .asset-chart-container {
        height: 250px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR HIDE FOR MOBILE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body.mobile-active ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    body.mobile-active {
        -webkit-overflow-scrolling: touch;
    }
}

/* ═══════════════════════════════════════════════════════════
   TOUCH FEEDBACK
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .touch-feedback {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .touch-feedback:active {
        opacity: 0.7;
    }
}
/* ═══════════════════════════════════════════════════════════
   FIX FOR MOBILE VIEWPORT HEIGHT
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body.mobile-active {
        height: 100%;
        overflow: hidden;
    }

    body.mobile-active .main-content {
        height: calc(100vh - var(--mobile-header-height) - var(--mobile-bottom-nav-height));
        height: calc(100dvh - var(--mobile-header-height) - var(--mobile-bottom-nav-height));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 768px) {

    /* Prevent overscroll showing wrong background */
    body.mobile-active #assetDetailModal {
        overscroll-behavior: contain;
    }

    body.mobile-active #assetDetailModal .modal-card,
    body.mobile-active #assetDetailModal .modal-content-wide {
        overscroll-behavior: contain;
    }

    /* Ensure body background matches when overscrolling */
    html,
    body {
        background: var(--bg-primary);
        background-color: var(--bg-primary);
    }
}
/* ═══════════════════════════════════════════════════════════
   PRESSURE MOBILE V2 - OPERATIVE APP EXPERIENCE
   Mobile-first layer; desktop Pressure remains untouched.
   ════════════════════════════════════════════════════════════ */

.mobile-pressure {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --mobile-header-height: 64px;
        --mobile-bottom-nav-height: 66px;
    }

    body.mobile-active #page-pressure .pressure-shell,
    body.mobile-active #page-pressure .page-header {
        display: none !important;
    }

    body.mobile-active .mobile-pressure {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 14px 0 18px;
    }

    /* Header V2 */
    .mobile-header {
        height: var(--mobile-header-height);
        padding: 0 10px 0 12px;
        background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .mobile-header-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        flex: 1;
    }

    .mobile-brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        background: var(--primary-light);
        border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
        flex-shrink: 0;
    }

    .mobile-brand-mark svg {
        width: 22px;
        height: 22px;
    }

    .mobile-brand-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.1;
    }

    .mobile-brand-name {
        color: var(--text-primary);
        font-weight: 800;
        font-size: 14px;
        letter-spacing: .01em;
        white-space: nowrap;
    }

    .mobile-header-title {
        position: static;
        transform: none;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-top: 2px;
    }

    .mobile-header-actions {
        flex-shrink: 0;
        gap: 4px;
    }

    .mobile-header-btn {
        width: 34px;
        height: 34px;
        border: 1px solid var(--border-primary);
        background: var(--bg-tertiary);
    }

    .mobile-header-btn svg {
        width: 18px;
        height: 18px;
    }

    .mobile-header-btn.active {
        color: var(--primary);
        background: var(--primary-light);
        border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    }

    .mobile-header-btn-danger {
        color: var(--text-muted);
    }

    .mobile-header-btn-danger:active {
        color: var(--danger);
        background: var(--danger-light);
        border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    }

    .mobile-header-btn.is-loading svg,
    .mp-icon-button.is-loading svg {
        animation: mobileSpin .7s linear infinite;
    }

    @keyframes mobileSpin {
        to { transform: rotate(360deg); }
    }

    /* Bottom nav: make Pressure feel first-class */
    .mobile-nav-item[data-page="pressure"].active {
        color: var(--primary);
    }

    /* Pressure V2 components */
    .mp-hero,
    .mp-detail-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px;
        border: 1px solid var(--border-primary);
        border-radius: 16px;
        background: linear-gradient(135deg, var(--bg-tertiary), color-mix(in srgb, var(--bg-tertiary) 78%, var(--primary) 10%));
        box-shadow: var(--shadow-sm);
    }

    .mp-detail-head.critical {
        border-color: color-mix(in srgb, var(--danger) 55%, transparent);
    }

    .mp-detail-head.warning {
        border-color: color-mix(in srgb, var(--warning) 55%, transparent);
    }

    .mp-detail-head.ok {
        border-color: color-mix(in srgb, var(--success) 40%, transparent);
    }

    .mp-eyebrow {
        font-size: 10px;
        font-weight: 800;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: .12em;
        margin-bottom: 4px;
    }

    .mp-hero h1,
    .mp-detail-head h1 {
        margin: 0;
        color: var(--text-primary);
        font-size: 22px;
        line-height: 1.1;
        font-weight: 800;
    }

    .mp-hero p,
    .mp-detail-head p {
        margin: 4px 0 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.25;
    }

    .mp-icon-button,
    .mp-back {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        border: 1px solid var(--border-primary);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        cursor: pointer;
    }

    .mp-icon-button svg {
        width: 20px;
        height: 20px;
    }

    .mp-back {
        font-size: 22px;
        font-weight: 700;
    }

    .mp-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .mp-kpi-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-kpi {
        min-width: 0;
        padding: 12px 10px;
        border-radius: 14px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
    }

    .mp-kpi-value {
        font-size: 24px;
        font-weight: 850;
        line-height: 1;
        color: var(--text-primary);
        font-family: var(--font-mono);
    }

    .mp-kpi-label {
        font-size: 10px;
        line-height: 1.2;
        color: var(--text-muted);
        margin-top: 7px;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .mp-kpi.critical .mp-kpi-value { color: var(--danger); }
    .mp-kpi.warning .mp-kpi-value { color: var(--warning); }
    .mp-kpi.ok .mp-kpi-value { color: var(--success); }

    .mp-search-wrap {
        position: relative;
    }

    .mp-search-wrap svg {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        color: var(--text-muted);
        pointer-events: none;
    }

    .mp-search-wrap input {
        width: 100%;
        min-height: 46px;
        border-radius: 14px;
        border: 1px solid var(--border-primary);
        background: var(--bg-tertiary);
        color: var(--text-primary);
        padding: 12px 14px 12px 42px;
        font-size: 15px;
        outline: none;
    }

    .mp-search-wrap input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-light);
    }

    .mp-section {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .mp-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 2px;
        padding: 0 2px;
    }

    .mp-section-head h2 {
        margin: 0;
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .01em;
    }

    .mp-section-head span {
        min-width: 26px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        border-radius: 999px;
        background: var(--bg-tertiary);
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
        border: 1px solid var(--border-primary);
    }

    .mp-alert-card,
    .mp-work-card,
    .mp-install-row {
        width: 100%;
        text-align: left;
        border: 1px solid var(--border-primary);
        background: var(--bg-tertiary);
        color: inherit;
        border-radius: 16px;
        cursor: pointer;
        transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }

    .mp-alert-card:active,
    .mp-work-card:active,
    .mp-install-row:active {
        transform: scale(.985);
        background: var(--bg-hover);
    }

    .mp-alert-card {
        display: flex;
        gap: 12px;
        padding: 13px;
    }

    .mp-alert-card.critical { border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
    .mp-alert-card.warning { border-color: color-mix(in srgb, var(--warning) 42%, transparent); }

    .mp-alert-marker {
        width: 5px;
        border-radius: 999px;
        background: var(--warning);
        flex-shrink: 0;
    }

    .mp-alert-card.critical .mp-alert-marker {
        background: var(--danger);
    }

    .mp-alert-body {
        flex: 1;
        min-width: 0;
    }

    .mp-alert-top {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: baseline;
        margin-bottom: 3px;
    }

    .mp-alert-top strong {
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 850;
    }

    .mp-alert-top span {
        color: var(--text-muted);
        font-size: 11px;
        white-space: nowrap;
    }

    .mp-alert-title {
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: 650;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mp-alert-text {
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.35;
        margin-top: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mp-work-card {
        display: block;
        padding: 14px;
    }

    .mp-work-card.critical { border-color: color-mix(in srgb, var(--danger) 48%, transparent); }
    .mp-work-card.warning { border-color: color-mix(in srgb, var(--warning) 48%, transparent); }
    .mp-work-card.ok { border-color: color-mix(in srgb, var(--success) 25%, transparent); }

    .mp-work-main {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mp-work-name {
        color: var(--text-primary);
        font-size: 16px;
        font-weight: 850;
        line-height: 1.15;
    }

    .mp-work-site {
        color: var(--text-muted);
        font-size: 12px;
        margin-top: 3px;
    }

    .mp-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 5px 9px;
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .06em;
        text-transform: uppercase;
        white-space: nowrap;
        background: var(--bg-secondary);
        color: var(--text-muted);
        border: 1px solid var(--border-primary);
    }

    .mp-status.critical { background: var(--danger-light); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
    .mp-status.warning { background: var(--warning-light); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
    .mp-status.testing { background: var(--info-light); color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
    .mp-status.ok { background: var(--success-light); color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }

    .mp-work-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mp-work-metrics div {
        min-width: 0;
        background: var(--bg-secondary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        padding: 9px;
    }

    .mp-work-metrics span {
        display: block;
        color: var(--text-muted);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-bottom: 5px;
    }

    .mp-work-metrics strong {
        display: block;
        color: var(--text-primary);
        font-size: 12px;
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mp-work-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        color: var(--text-muted);
        font-size: 11px;
    }

    .mp-work-footer span {
        background: var(--bg-secondary);
        border: 1px solid var(--border-primary);
        border-radius: 999px;
        padding: 4px 8px;
    }

    .mp-footer-alert {
        color: var(--warning) !important;
        border-color: color-mix(in srgb, var(--warning) 35%, transparent) !important;
        background: var(--warning-light) !important;
    }

    .mp-ok-card {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 14px;
        border-radius: 14px;
        border: 1px dashed var(--border-primary);
        background: color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
        color: var(--text-muted);
        font-size: 13px;
    }

    .mp-ok-card span {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--success);
        flex-shrink: 0;
    }

    .mp-installation-list {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .mp-install-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px;
    }

    .mp-install-row.critical { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
    .mp-install-row.warning,
    .mp-install-row.stale { border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
    .mp-install-row.ok { border-color: color-mix(in srgb, var(--success) 28%, transparent); }

    .mp-install-code {
        color: var(--text-primary);
        font-size: 15px;
        font-weight: 850;
    }

    .mp-install-name {
        color: var(--text-muted);
        font-size: 12px;
        margin-top: 3px;
        max-width: 190px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mp-install-right {
        text-align: right;
        min-width: 98px;
    }

    .mp-install-right strong {
        display: block;
        color: var(--text-primary);
        font-size: 15px;
        font-weight: 850;
        font-family: var(--font-mono);
    }

    .mp-install-right span {
        display: block;
        color: var(--text-muted);
        font-size: 11px;
        margin-top: 3px;
    }

    .mp-reading-card {
        padding: 18px;
        border-radius: 18px;
        border: 1px solid var(--border-primary);
        background: var(--bg-tertiary);
        text-align: center;
    }

    .mp-reading-card.critical { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
    .mp-reading-card.warning { border-color: color-mix(in srgb, var(--warning) 55%, transparent); }
    .mp-reading-card.ok { border-color: color-mix(in srgb, var(--success) 35%, transparent); }

    .mp-reading-label {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .mp-reading-value {
        margin-top: 7px;
        color: var(--text-primary);
        font-size: 44px;
        font-weight: 900;
        line-height: 1;
        font-family: var(--font-mono);
    }

    .mp-reading-sub {
        margin-top: 8px;
        color: var(--text-muted);
        font-size: 12px;
    }

    .mp-facts {
        display: grid;
        gap: 8px;
    }

    .mp-fact {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 12px;
        border-radius: 12px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
    }

    .mp-fact span {
        color: var(--text-muted);
        font-size: 12px;
    }

    .mp-fact strong {
        color: var(--text-primary);
        font-size: 13px;
        text-align: right;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mp-loading-card,
    .mp-empty-state {
        min-height: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        color: var(--text-muted);
        border: 1px solid var(--border-primary);
        border-radius: 16px;
        background: var(--bg-tertiary);
        padding: 24px;
        text-align: center;
    }

    .mp-empty-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--warning-light);
        color: var(--warning);
        font-weight: 900;
    }

    .mp-empty-title {
        color: var(--text-primary);
        font-weight: 750;
    }

    /* Avoid older desktop modal being the main mobile path for Pressure */
    body.mobile-active #page-pressure .pressure-workspace.open {
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   PRESSURE MOBILE V2.1 - navigation and hierarchy refinements
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mp-kpi {
        appearance: none;
        text-align: left;
        cursor: pointer;
        color: inherit;
        box-shadow: none;
        transition: transform .12s ease, border-color .12s ease, background .12s ease;
    }

    .mp-kpi:active {
        transform: scale(.985);
        background: var(--bg-hover);
    }

    .mp-kpi.active {
        border-color: color-mix(in srgb, var(--primary) 45%, transparent);
        background: color-mix(in srgb, var(--primary-light) 60%, var(--bg-tertiary));
    }

    .mp-filter-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
        border: 1px solid var(--border-primary);
        border-radius: 14px;
        background: var(--bg-tertiary);
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 650;
    }

    .mp-filter-reset {
        appearance: none;
        border: none;
        background: transparent;
        color: var(--primary);
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        padding: 6px 4px;
    }

    .mp-section-compact {
        gap: 7px;
    }

    .mp-section-compact .mp-alert-card.compact,
    .mp-alert-card.compact {
        border-radius: 13px;
        padding: 9px 10px;
        gap: 9px;
    }

    .mp-alert-card.compact .mp-alert-marker {
        width: 4px;
    }

    .mp-alert-card.compact .mp-alert-top {
        margin-bottom: 1px;
    }

    .mp-alert-card.compact .mp-alert-top strong {
        font-size: 12px;
    }

    .mp-alert-card.compact .mp-alert-title {
        font-size: 12px;
    }

    .mp-alert-card.compact .mp-alert-text {
        font-size: 11px;
        margin-top: 2px;
        -webkit-line-clamp: 1;
    }

    .mp-install-row.stale .mp-install-right strong {
        color: var(--text-muted);
    }
}

@media (max-width: 768px) {
    .mp-hero-slim {
        padding: 14px 15px;
    }

    .mp-section-link {
        appearance: none;
        border: 1px solid var(--border-primary);
        background: var(--bg-tertiary);
        color: var(--primary);
        border-radius: 999px;
        padding: 5px 9px;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
    }

    .mp-alert-compact-list {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .mp-work-card {
        position: relative;
    }

    .mp-work-installations {
        display: flex;
        flex-direction: column;
        gap: 7px;
        margin: 10px 0 11px;
    }

    .mp-install-chip {
        appearance: none;
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(82px, 1fr) auto;
        grid-template-areas:
            "code value"
            "state state";
        gap: 2px 10px;
        align-items: center;
        text-align: left;
        border: 1px solid var(--border-primary);
        background: var(--bg-secondary);
        color: inherit;
        border-radius: 12px;
        padding: 9px 10px;
        cursor: pointer;
    }

    .mp-install-chip:active {
        background: var(--bg-hover);
        transform: scale(.99);
    }

    .mp-install-chip.critical {
        border-color: color-mix(in srgb, var(--danger) 45%, transparent);
        background: color-mix(in srgb, var(--danger-light) 45%, var(--bg-secondary));
    }

    .mp-install-chip.warning,
    .mp-install-chip.stale {
        border-color: color-mix(in srgb, var(--warning) 42%, transparent);
        background: color-mix(in srgb, var(--warning-light) 35%, var(--bg-secondary));
    }

    .mp-install-chip.ok {
        border-color: color-mix(in srgb, var(--success) 30%, transparent);
    }

    .mp-install-chip-code {
        grid-area: code;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--text-primary);
        font-size: 12px;
        font-weight: 850;
        letter-spacing: .01em;
    }

    .mp-install-chip strong {
        grid-area: value;
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 900;
        font-family: var(--font-mono);
        justify-self: end;
        white-space: nowrap;
    }

    .mp-install-chip.stale strong {
        color: var(--text-muted);
    }

    .mp-install-chip em {
        grid-area: state;
        color: var(--text-muted);
        font-size: 11px;
        line-height: 1.2;
        font-style: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mp-work-empty-line,
    .mp-work-more {
        color: var(--text-muted);
        font-size: 12px;
        padding: 8px 10px;
        border-radius: 10px;
        background: var(--bg-secondary);
        border: 1px dashed var(--border-primary);
    }

    .mp-work-more {
        border-style: solid;
        color: var(--primary);
        font-weight: 750;
    }
}

/* ═══════════════════════════════════════════════════════════
   PRESSURE MOBILE V2.3 - startup, ordering and pressure mini bars
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body.mobile-pressure-booting #page-dashboard,
    body.mobile-pressure-booting #page-assets,
    body.mobile-pressure-booting #page-alerts,
    body.mobile-pressure-booting #page-events,
    body.mobile-pressure-booting #page-settings {
        display: none !important;
    }

    body.mobile-pressure-booting #page-pressure {
        display: block !important;
    }

    .mp-alerts-below {
        margin-top: 2px;
    }

    .mp-install-chip {
        grid-template-columns: minmax(0, 1fr) 82px;
        grid-template-areas: "main meter";
        gap: 10px;
        align-items: center;
        min-height: 58px;
    }

    .mp-install-chip-main {
        grid-area: main;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mp-install-chip-main .mp-install-chip-code,
    .mp-install-chip .mp-install-chip-code {
        grid-area: auto;
        display: block;
    }

    .mp-install-chip-main em,
    .mp-install-chip em {
        grid-area: auto;
        display: block;
    }

    .mp-pressure-mini {
        grid-area: meter;
        width: 82px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }

    .mp-pressure-track {
        display: block;
        width: 100%;
        height: 8px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text-muted) 18%, transparent);
        overflow: hidden;
    }

    .mp-pressure-fill {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--success);
        min-width: 3px;
    }

    .mp-pressure-mini.critical .mp-pressure-fill { background: var(--danger); }
    .mp-pressure-mini.warning .mp-pressure-fill,
    .mp-pressure-mini.stale .mp-pressure-fill { background: var(--warning); }
    .mp-pressure-mini.ok .mp-pressure-fill { background: var(--success); }

    .mp-pressure-mini.stale .mp-pressure-fill {
        width: 0 !important;
        min-width: 0;
    }

    .mp-pressure-mini strong {
        font-size: 12px;
        font-weight: 900;
        font-family: var(--font-mono);
        text-align: right;
        color: var(--text-primary);
        line-height: 1;
        white-space: nowrap;
    }

    .mp-pressure-mini.stale strong {
        color: var(--text-muted);
    }
}

/* ═══════════════════════════════════════════════════════════
   PRESSURE MOBILE V2.4 - installation mini bars and detail gauge
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mp-install-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 92px;
        gap: 12px;
        align-items: center;
    }

    .mp-install-row-main {
        min-width: 0;
    }

    .mp-install-row .mp-install-name {
        max-width: none;
    }

    .mp-install-right.with-meter {
        min-width: 92px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        text-align: right;
    }

    .mp-install-right.with-meter .mp-pressure-mini {
        width: 92px;
    }

    .mp-install-right.with-meter .mp-pressure-mini strong {
        font-size: 12px;
    }

    .mp-install-right.with-meter > span {
        display: block;
        color: var(--text-muted);
        font-size: 11px;
        line-height: 1.15;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mp-reading-card {
        padding: 18px 16px 16px;
    }

    .mp-mobile-gauge {
        position: relative;
        max-width: 240px;
        margin: 10px auto 0;
        padding-top: 2px;
        text-align: center;
    }

    .mp-mobile-gauge-svg {
        width: 100%;
        height: 118px;
        display: block;
        overflow: visible;
    }

    .mp-mobile-gauge-base,
    .mp-mobile-gauge-fill {
        fill: none;
        stroke-width: 13;
        stroke-linecap: round;
    }

    .mp-mobile-gauge-base {
        stroke: color-mix(in srgb, var(--text-muted) 23%, transparent);
    }

    .mp-mobile-gauge-fill {
        stroke: var(--success);
        transition: stroke-dasharray .35s ease, stroke .2s ease;
    }

    .mp-mobile-gauge.critical .mp-mobile-gauge-fill {
        stroke: var(--danger);
    }

    .mp-mobile-gauge.warning .mp-mobile-gauge-fill,
    .mp-mobile-gauge.stale .mp-mobile-gauge-fill {
        stroke: var(--warning);
    }

    .mp-mobile-gauge.stale .mp-mobile-gauge-fill {
        stroke-dasharray: 0 100 !important;
    }

    .mp-mobile-gauge-center {
        position: absolute;
        left: 0;
        right: 0;
        top: 54px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .mp-mobile-gauge-center strong {
        font-family: var(--font-mono);
        font-size: 34px;
        line-height: 1;
        font-weight: 950;
        color: var(--text-primary);
        letter-spacing: -0.04em;
    }

    .mp-mobile-gauge-center span {
        margin-top: 7px;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .mp-mobile-gauge.critical .mp-mobile-gauge-center span {
        color: var(--danger);
    }

    .mp-mobile-gauge.warning .mp-mobile-gauge-center span,
    .mp-mobile-gauge.stale .mp-mobile-gauge-center span {
        color: var(--warning);
    }

    .mp-mobile-gauge.ok .mp-mobile-gauge-center span {
        color: var(--success);
    }

    .mp-mobile-gauge.stale .mp-mobile-gauge-center strong {
        color: var(--text-muted);
        letter-spacing: 0;
    }

    .mp-mobile-gauge-thresholds {
        margin-top: -2px;
        color: var(--text-muted);
        font-size: 11px;
        line-height: 1.35;
    }
}