/* OcppTool — app-specific overrides
   Design tokens, third-party bridges and content styling
   are provided by blazortoolkit-design.css */

/* OcppTool uses MudLayout (not .btk-app), so body must scroll */
html, body {
    overflow: auto;
    height: auto;
}

/* MudChart grid lines — make them more visible */
.mud-chart .mud-chart-line .mud-chart-gridlines line,
.mud-chart line[stroke] {
    stroke-opacity: 0.25 !important;
    stroke-width: 0.5 !important;
}

/* Responsive: hide on mobile, show on desktop */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .mobile-overlay {
        position: fixed !important;
        top: 48px;
        left: 0;
        bottom: 0;
        z-index: 1200;
        width: 280px !important;
        min-width: 280px !important;
    }
    .mobile-overlay-backdrop {
        position: fixed;
        top: 48px;
        left: 280px;
        right: 0;
        bottom: 0;
        z-index: 1199;
        background: rgba(0,0,0,0.4);
    }
    .main-content {
        padding: 8px !important;
    }
    .msg-payload-col { display: none !important; }
    .msg-table th, .msg-table td { padding: 4px 6px !important; font-size: 0.78rem !important; }
    .msg-time { font-size: 0.7rem !important; }
    .msg-dir-col { width: 20px !important; }
    .pinned-inspector {
        display: none !important;
    }
    .builder-layout {
        flex-direction: column !important;
        height: auto !important;
    }
    .builder-response {
        width: 100% !important;
        min-width: 0 !important;
    }
    .inspector-overlay {
        width: 100% !important;
    }
    .inspector-overlay-backdrop {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .msg-time, .msg-dir-col { display: none !important; }
}

@media (min-width: 769px) {
    .show-mobile-only { display: none !important; }
    .mobile-overlay-backdrop { display: none !important; }
}