:root {
        --bs-body-bg: #ffffff;
        --bs-body-color: #212529;
        --bs-border-color: #dee2e6;
        --sensor-card-hover: rgba(0,0,0,0.1);
        --plotly-bg: #ffffff;
        --plotly-grid: #e5e5e5;
        --plotly-text: #2a3f5f;
      }

      [data-bs-theme="dark"] {
        --bs-body-bg: #212529;
        --bs-body-color: #adb5bd;
        --bs-border-color: #495057;
        --sensor-card-hover: rgba(255,255,255,0.1);
        --plotly-bg: #343a40;
        --plotly-grid: #495057;
        --plotly-text: #adb5bd;
      }

      body {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
        transition: background-color 0.3s ease, color 0.3s ease;
      }

      .skip-link {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
        z-index: 9999;
      }
      .skip-link:focus {
        position: fixed;
        left: 1rem;
        top: 1rem;
        width: auto;
        height: auto;
        padding: 0.5rem 1rem;
        background: var(--bs-primary);
        color: #fff;
        border-radius: 0.375rem;
        outline: none;
      }

      a:focus-visible,
      button:focus-visible,
      .accordion-button:focus-visible,
      .nav-link:focus-visible {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
      }

      /* Plotly chart outer wrappers — prefer classes over inline height */
      .pg-chart {
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        overflow: visible;
      }
      .pg-chart--110 { height: 110px; }
      .pg-chart--150 { height: 150px; }
      .pg-chart--200 { height: 200px; }
      .pg-chart--220 { height: 220px; }
      .pg-chart--240 { height: 240px; }
      .pg-chart--260 { height: 260px; }
      .pg-chart--300 { height: 300px; }
      .pg-chart--400 { height: 400px; }
      .pg-chart--500 { height: 500px; }
      .pg-chart--550 { height: 550px; }
      .pg-chart--fullscreen {
        min-height: calc(100vh - 7rem);
        height: calc(100vh - 7rem);
        max-height: calc(100dvh - 5.5rem);
        overflow: hidden;
      }

      .pg-chart-fullscreen-target canvas {
        display: block;
        width: 100% !important;
        height: 100% !important;
      }

      /* Chart wrapper + expand control (PUM-96) */
      .pg-chart-wrap {
        position: relative;
      }

      .pg-chart-wrap-actions {
        position: absolute;
        top: 2px;
        right: 2px;
        z-index: 6;
        pointer-events: none;
      }

      .pg-chart-expand-btn {
        pointer-events: auto;
        padding: 0.1rem 0.4rem;
        font-size: 0.72rem;
        line-height: 1.2;
        opacity: 0.65;
        background: var(--bs-body-bg);
      }

      .pg-chart-wrap:hover .pg-chart-expand-btn,
      .pg-chart-expand-btn:focus-visible {
        opacity: 1;
      }

      .fft-chart-container.pg-chart-wrap,
      .fft-chart-container .pg-chart-wrap {
        margin-bottom: 0;
      }

      /* Mobile-first responsive styles */
      .sensor-card {
        min-width: 280px;
        transition: box-shadow 0.3s ease;
      }
      
      .sensor-card img {
        height: 64px;
        margin: auto;
      }
      
      .sensor-card:hover {
        box-shadow: 0 0 0.5rem var(--sensor-card-hover);
      }

      /* Dashboard navbar — logo left, actions right */
      .pg-navbar {
        min-height: 3.25rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
      }

      .pg-navbar-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.5rem;
        padding: 0;
      }

      .pg-navbar-start {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .pg-navbar-brand {
        position: static !important;
        transform: none !important;
        margin: 0;
        padding: 0;
        flex-shrink: 0;
        line-height: 1;
      }

      .pg-nav-sales-start {
        flex-shrink: 0;
      }

      .pg-navbar-toggler {
        margin-left: auto;
        flex-shrink: 0;
      }

      .pg-navbar-end {
        flex: 1 1 100%;
      }

      .pg-navbar-actions {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        width: 100%;
      }

      .pg-nav-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 0.35rem;
        white-space: nowrap;
        line-height: 1.25;
        padding: 0.35rem 0.55rem !important;
        font-size: 0.8125rem;
      }

      .pg-nav-icon-btn {
        padding: 0.35rem 0.5rem !important;
      }

      .pg-nav-btn-label {
        display: none;
      }

      .pg-nav-tz-label {
        display: inline-block;
        max-width: 6.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
      }

      @media (min-width: 768px) {
        .pg-navbar-inner {
          flex-wrap: nowrap;
        }

        .pg-navbar-start {
          flex: 1 1 auto;
          justify-content: flex-start;
          max-width: 55%;
        }

        .pg-navbar-toggler {
          display: none;
        }

        .pg-navbar-end {
          flex: 0 0 auto;
          margin-left: auto;
          width: auto;
          max-width: 100%;
          min-width: 0;
          display: flex !important;
        }

        .pg-navbar-actions {
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-end;
          gap: 0.2rem;
          width: auto;
          max-width: 100%;
        }

        .pg-navbar-actions > .nav-item {
          flex-shrink: 0;
        }

        .pg-navbar-actions > .nav-item .pg-nav-btn-label {
          max-width: 5.5rem;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .pg-nav-btn-label--always {
        display: inline;
        max-width: none;
      }

      @media (max-width: 1399.98px) {
        .pg-nav-tz-label {
          display: none !important;
        }

        .pg-nav-btn-label:not(.pg-nav-btn-label--always) {
          display: none;
        }
      }

      @media (min-width: 1400px) {
        .pg-nav-btn-label {
          display: inline;
        }

        .pg-nav-tz-label {
          display: inline-block;
          max-width: 7rem;
        }
      }

      .pg-nav-sales-btn {
        font-weight: 600;
      }

      .notification-badge {
        font-size: 0.65rem;
        min-width: 1.1rem;
        height: 1.1rem;
        line-height: 1.1rem;
        padding: 0 0.2rem;
      }
      .pg-navbar-start .pg-navbar-breadcrumb {
        width: 100%;
      }

      /* Mobile navigation improvements */
      @media (max-width: 767.98px) {
        .pg-navbar {
          padding: 0.5rem 0.75rem;
        }

        .pg-navbar-inner {
          row-gap: 0.5rem;
        }

        .pg-navbar-brand {
          order: 0;
          width: auto;
          text-align: left;
        }

        .pg-navbar-start {
          order: 0;
          flex: 1 1 auto;
          justify-content: flex-start;
        }

        .pg-navbar-toggler {
          order: 0;
        }
        
        .navbar-nav .dropdown-menu {
          position: static;
          float: none;
          width: auto;
          margin-top: 0;
          background-color: transparent;
          border: none;
          box-shadow: none;
        }
        
        .mobile-nav-controls,
        .pg-navbar-actions {
          flex-direction: column;
          gap: 0.5rem;
          width: 100%;
        }
        
        .mobile-nav-controls .btn,
        .mobile-nav-controls .dropdown-toggle,
        .pg-navbar-actions .btn,
        .pg-navbar-actions .dropdown-toggle {
          justify-content: flex-start;
          width: 100%;
          text-align: left;
        }
        
        /* Hide some elements on mobile to save space */
        .d-none-mobile {
          display: none !important;
        }
      }

      /* Button groups: keep horizontal on phones; scroll when many options */
      @media (max-width: 767.98px) {
        .btn-group-scroll {
          display: inline-flex;
          flex-wrap: nowrap;
          max-width: 100%;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          vertical-align: top;
        }

        .btn-group-scroll > .btn,
        .btn-group-scroll > .btn-group {
          flex-shrink: 0;
        }

        .pm-toolbar .btn-group,
        .graph-card .btn-group,
        .indicator-card .btn-group,
        .sensor-tabs {
          flex-wrap: nowrap;
        }

        .graph-card .btn-group,
        .indicator-card .btn-group {
          max-width: 100%;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }

        .pg-nav-tabs-scroll {
          display: flex;
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          border-bottom: 1px solid var(--bs-border-color);
        }

        .pg-nav-tabs-scroll .nav-item {
          flex-shrink: 0;
        }

        .pg-chart-toolbar {
          flex-wrap: wrap;
          gap: 0.35rem;
        }

        .pg-notification-title {
          flex-wrap: wrap;
          gap: 0.35rem;
          min-width: 0;
        }

        .pg-notification-title h6 {
          flex: 1 1 auto;
          min-width: 0;
          overflow-wrap: anywhere;
        }

        .sensor-tabs {
          display: flex;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }

        .sensor-tabs .nav-item {
          flex-shrink: 0;
        }

        .fft-display-toolbar {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          align-items: center;
        }

        .fft-display-toolbar .btn-group-scroll {
          max-width: 100%;
        }
      }

      /* Navbar breadcrumb — truncate in left column */
      .pg-navbar-breadcrumb {
        max-width: 100%;
        overflow: hidden;
        min-width: 0;
      }

      @media (min-width: 768px) {
        .pg-navbar-breadcrumb {
          max-width: min(36vw, 22rem);
        }
      }

      @media (min-width: 1200px) {
        .pg-navbar-breadcrumb {
          max-width: min(40vw, 28rem);
        }
      }

      .pg-navbar-breadcrumb .breadcrumb {
        flex-wrap: nowrap;
        margin-bottom: 0;
      }

      .pg-navbar-breadcrumb .breadcrumb-item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 6rem;
      }

      @media (min-width: 768px) {
        .pg-navbar-breadcrumb .breadcrumb-item {
          max-width: 9rem;
        }

        .pg-navbar-breadcrumb .breadcrumb-item:last-child {
          max-width: 13rem;
        }
      }

      @media (max-width: 575.98px) {
        .pg-navbar-breadcrumb {
          max-width: min(55vw, 12rem);
        }

        .pg-navbar-breadcrumb .breadcrumb-item:last-child {
          max-width: 8rem;
        }
      }

      /* FFT Chart.js containers */
      @media (max-width: 767.98px) {
        .fft-chart-container:not(.pg-chart) {
          min-height: 220px;
        }

        .fft-chart-container canvas {
          max-height: none;
        }

        .pg-toolbar-scroll {
          display: flex;
          flex-wrap: nowrap;
          gap: 0.5rem;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          padding-bottom: 0.25rem;
        }

        .pg-toolbar-scroll > * {
          flex-shrink: 0;
        }

        .clickable-fft::after {
          content: attr(data-tap-hint);
          display: block;
          font-size: 0.7rem;
          color: var(--bs-secondary);
          margin-top: 0.25rem;
        }
      }

      /* Metrics: gauges / pump info before charts on phones */
      @media (max-width: 767.98px) {
        .pm-charts-col {
          order: 2;
        }

        .pm-side-col {
          order: 1;
        }

        #velocityGaugesContainer .col-4 {
          flex: 0 0 50%;
          max-width: 50%;
        }
      }

      /* Notification list rows stack on narrow screens */
      @media (max-width: 767.98px) {
        .pg-notification-row {
          flex-direction: column !important;
          gap: 0.75rem;
        }

        .pg-notification-actions {
          width: 100%;
          text-align: left !important;
        }

        .pg-page-actions-bar {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .pg-page-actions-bar .btn {
          flex: 1 1 auto;
        }
      }

      /* Hierarchy accordion labels */
      @media (max-width: 767.98px) {
        .hierarchy-home .accordion-button {
          font-size: 0.9rem;
          padding: 0.65rem 0.75rem;
        }

        .hierarchy-home .accordion-button .hierarchy-label {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 55vw;
          display: inline-block;
          vertical-align: bottom;
        }
      }

      /* Login page touch targets (when shell CSS linked) */
      .pg-login-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-end;
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0.75rem) 0 0;
      }

      @media (max-width: 767.98px) {
        .pg-login-card .btn,
        .pg-login-card .form-control {
          min-height: 44px;
        }
      }

      .theme-toggle {
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        padding: 0.375rem 0.75rem;
        border-radius: 0.375rem;
        transition: all 0.15s ease-in-out;
        min-height: 44px; /* Better touch target for mobile */
      }

      .theme-toggle:hover {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
        transform: scale(1.05);
      }

      [data-bs-theme="dark"] .theme-toggle:hover {
        background-color: rgba(255, 255, 255, 0.2);
      }

      /* Improve touch targets for mobile */
      @media (max-width: 767.98px) {
        .btn, .dropdown-toggle {
          min-height: 44px;
          padding: 0.75rem 1rem;
        }
        
        .btn-sm {
          min-height: 38px;
          padding: 0.5rem 0.75rem;
        }
      }

      /* Responsive sensor cards */
      @media (max-width: 575.98px) {
        .sensor-card {
          min-width: 100%;
        }
        
        .sensor-cards-container {
          gap: 1rem !important;
        }
      }

      /* Dark mode adjustments for cards and alerts */
      [data-bs-theme="dark"] .card {
        background-color: #343a40;
        border-color: var(--bs-border-color);
      }

      [data-bs-theme="dark"] .alert-secondary {
        background-color: #495057;
        border-color: #6c757d;
        color: #f8f9fa;
      }

      [data-bs-theme="dark"] .alert-warning {
        background-color: #664d03;
        border-color: #997404;
        color: #ffecb5;
      }

      [data-bs-theme="dark"] .alert-info {
        background-color: #055160;
        border-color: #087990;
        color: #b3d4fc;
      }

      /* Plotly theme adjustments */
      [data-bs-theme="dark"] .plotly-graph-div {
        background-color: var(--plotly-bg) !important;
      }

      /* Plotly modebar – bottom-right below plot area; JS sets top from _fullLayout._size */
      .js-plotly-plot {
        position: relative !important;
      }
      .js-plotly-plot .svg-container {
        position: relative !important;
      }
      .js-plotly-plot > .modebar-container,
      .js-plotly-plot .modebar-container,
      .plotly-graph-div .modebar-container {
        position: absolute !important;
        top: auto !important;
        bottom: 8px !important;
        right: 6px !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
        z-index: 20;
      }
      .js-plotly-plot .modebar-container > .modebar,
      .plotly-graph-div .modebar-container > .modebar {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
        padding: 2px 3px !important;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12) !important;
      }
      .js-plotly-plot > .modebar:not(.modebar-container .modebar),
      .plotly-graph-div > .modebar:not(.modebar-container .modebar) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
        padding: 2px 3px !important;
      }
      .js-plotly-plot .modebar-group,
      .plotly-graph-div .modebar-group {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        float: none !important;
        vertical-align: middle !important;
        margin: 0 !important;
      }
      .js-plotly-plot .modebar.modebar--vertical,
      .plotly-graph-div .modebar.modebar--vertical {
        flex-direction: row !important;
      }
      .js-plotly-plot > .modebar:not(.modebar-container .modebar),
      .plotly-graph-div > .modebar {
        position: absolute !important;
        top: auto !important;
        bottom: 8px !important;
        right: 6px !important;
        left: auto !important;
        transform: none !important;
        z-index: 20;
      }
      .js-plotly-plot .modebar-container > .modebar,
      .plotly-graph-div .modebar-container > .modebar {
        background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.92) !important;
      }
      [data-bs-theme="dark"] .js-plotly-plot .modebar,
      [data-bs-theme="dark"] .plotly-graph-div .modebar {
        background: rgba(52, 58, 64, 0.95) !important;
        border: 1px solid #6c757d;
      }
      .modebar-btn {
        color: #6c757d !important;
      }
      .modebar-btn:hover,
      .modebar-btn.active {
        color: #0d6efd !important;
      }
      [data-bs-theme="dark"] .modebar-btn {
        color: #dee2e6 !important;
      }
      [data-bs-theme="dark"] .modebar-btn:hover,
      [data-bs-theme="dark"] .modebar-btn.active {
        color: #60a5fa !important;
      }
      [data-bs-theme="dark"] .modebar-btn svg path {
        fill: currentColor !important;
      }

      /* datetime-local / date inputs in dark mode */
      [data-bs-theme="dark"] input[type="datetime-local"],
      [data-bs-theme="dark"] input[type="date"],
      [data-bs-theme="dark"] input[type="time"] {
        color-scheme: dark;
        background-color: #2b3035;
        color: #e9ecef;
        border-color: #6c757d;
      }
      [data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
      [data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(0.85);
      }

      /* Mobile chart improvements */
      @media (max-width: 767.98px) {
        /* Plotly chart responsive sizing */
        .plotly-graph-div {
          height: 250px !important;
          margin-bottom: 1rem !important;
        }
        
        .modebar-btn {
          width: 24px !important;
          height: 24px !important;
          font-size: 12px !important;
        }
        
        /* Better touch interaction */
        .plotly-graph-div {
          touch-action: manipulation;
        }
        
        /* Touch mode visual indicators */
        .plotly-graph-div[data-touch-enabled="true"] {
          cursor: grab !important;
        }
        
        .plotly-graph-div[data-touch-enabled="true"]:active {
          cursor: grabbing !important;
        }
        
        /* Improve touch responsiveness */
        .plotly-graph-div * {
          touch-action: manipulation;
        }

        .pg-chart .plotly-graph-div {
          height: 100% !important;
          margin-bottom: 0 !important;
        }

        .pg-chart.pg-chart--550 { height: 280px !important; }
        .pg-chart.pg-chart--500 { height: 260px !important; }
        .pg-chart.pg-chart--400 { height: 240px !important; }
        .pg-chart.pg-chart--300 { height: 200px !important; }
        .pg-chart.pg-chart--260 { height: 200px !important; }
        .pg-chart.pg-chart--240 { height: 180px !important; }
        .pg-chart.pg-chart--220 { height: 200px !important; }
        .pg-chart.pg-chart--200 { height: 160px !important; }
        .pg-chart.pg-chart--150 { height: 100px !important; }
        .pg-chart.pg-chart--110 { height: 100px !important; }

        /* Legacy inline-styled containers (pages not yet using .pg-chart) */
        [style*="height: 400px"] { height: 250px !important; }
        [style*="height: 300px"] { height: 200px !important; }
        [style*="height: 260px"] { height: 200px !important; }
        [style*="height: 200px"] { height: 160px !important; }
        [style*="height: 150px"] { height: 100px !important; }
        
        /* Gauge-specific improvements */
        .gauge-container {
          height: 100px !important;
          margin-bottom: 0.5rem !important;
        }
        
        /* Chart container improvements */
        .card-body {
          padding: 1rem 0.75rem;
        }
        
        /* Combined view charts */
        #velocity_combined,
        #acceleration_combined,
        #displacement_combined,
        #temperature_combined {
          height: 200px !important;
          margin-bottom: 1rem !important;
        }
        
        /* Individual chart containers */
        .velocity-chart,
        .acceleration-chart,
        .displacement-chart,
        .temperature-chart {
          margin-bottom: 1rem !important;
        }
        
        /* Badge improvements for mobile */
        .badge {
          font-size: 0.75rem !important;
          margin-bottom: 0.25rem !important;
        }
        
        /* Reduce chart margins */
        .mb-4 {
          margin-bottom: 1.5rem !important;
        }
        
        .mb-3 {
          margin-bottom: 1rem !important;
        }
      }
      
      /* Extra small screens (very small phones) */
      @media (max-width: 575.98px) {
        .plotly-graph-div {
          height: 200px !important;
        }

        .pg-chart.pg-chart--550 { height: 240px !important; }
        .pg-chart.pg-chart--500 { height: 220px !important; }
        .pg-chart.pg-chart--400 { height: 200px !important; }
        .pg-chart.pg-chart--260 { height: 180px !important; }
        .pg-chart.pg-chart--240 { height: 160px !important; }
        .pg-chart.pg-chart--220 { height: 180px !important; }
        .pg-chart.pg-chart--200 { height: 140px !important; }
        .pg-chart.pg-chart--150 { height: 80px !important; }
        .pg-chart.pg-chart--110 { height: 90px !important; }

        [style*="height: 400px"],
        [style*="height: 300px"],
        [style*="height: 260px"] { height: 180px !important; }
        [style*="height: 200px"] { height: 140px !important; }
        [style*="height: 150px"] { height: 80px !important; }
        
        #velocity_combined,
        #acceleration_combined,
        #displacement_combined,
        #temperature_combined {
          height: 180px !important;
        }
      }
      
      /* Status indicator styles */
      .status-indicator {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      }
      
      .status-green {
        background-color: #28a745;
      }
    
      .status-yellow {
        background-color: #ffc107;
      }
    
      .status-red {
        background-color: #dc3545;
      }

      /* Notification styles */
      .notification-badge {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(35%, -35%);
        background-color: #dc3545;
        color: white;
        font-size: 10px;
        border-radius: 999px;
        padding: 0 4px;
        min-width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        line-height: 1;
        border: 2px solid #212529;
        pointer-events: none;
      }
    
      .notification-item {
        border-left: 3px solid;
        background-color: var(--bs-body-bg);
        transition: background-color 0.2s;
      }
    
      .notification-item:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }
    
      [data-bs-theme="dark"] .notification-item:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }
    
      .notification-item.notification-red {
        border-left-color: #dc3545;
      }
    
      .notification-item.notification-yellow {
        border-left-color: #ffc107;
      }
    
      .notification-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
      }
    
      .notification-icon.notification-red {
        background-color: #dc3545;
      }
    
      .notification-icon.notification-yellow {
        background-color: #ffc107;
      }

      .pg-notifications-menu {
        width: min(350px, calc(100vw - 2rem));
        max-height: min(400px, 70vh);
        overflow: hidden;
        padding-bottom: 0;
      }

      /* Only flex when open — plain display:flex overrides Bootstrap's display:none */
      .pg-notifications-menu.show {
        display: flex;
        flex-direction: column;
      }

      .pg-notifications-menu__actions {
        flex: 0 0 auto;
      }

      .pg-notifications-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        max-height: min(320px, 55vh);
      }

      /* Mobile notification dropdown improvements */
      @media (max-width: 767.98px) {
        .dropdown-menu {
          width: calc(100vw - 2rem) !important;
          max-width: 350px;
          left: auto !important;
          right: 1rem !important;
        }
      }

      /* Additional mobile improvements */
      @media (max-width: 767.98px) {
        /* Ensure proper spacing on mobile */
        .container-fluid {
          padding-left: 1rem;
          padding-right: 1rem;
        }
        
        /* Better card spacing on mobile */
        .card {
          margin-bottom: 1rem;
        }
        
        /* Improve form elements on mobile */
        .form-control, .form-select {
          min-height: 44px;
          font-size: 1rem;
        }
        
        /* Better alert spacing */
        .alert {
          margin-bottom: 1rem;
        }
        
        /* Improve navbar brand on mobile */
        .navbar-brand img {
          height: 28px;
        }
        
        /* Better table responsiveness */
        .table-responsive {
          font-size: 0.875rem;
        }
        
        /* Improve badge readability */
        .badge {
          font-size: 0.75rem;
          padding: 0.35em 0.65em;
        }
        
        /* ISO Reference Panel mobile improvements */
        #velocityGaugesContainer .col-lg-3 {
          margin-top: 1rem;
        }
        
        #velocityGaugesContainer .card {
          min-height: auto;
        }
        
        #velocityGaugesContainer .card-body {
          padding: 0.75rem;
        }
      }

             /* Landscape orientation improvements */
       @media (max-width: 767.98px) and (orientation: landscape) {
         .navbar {
           padding: 0.25rem 1rem;
         }
         
         .navbar-brand img {
           height: 24px;
         }
       }

       /* Fix mobile scrolling and overflow issues */
       @media (max-width: 767.98px) {
         body {
           overflow-x: hidden;
         }
         
         .container-fluid {
           max-width: 100vw;
           overflow-x: hidden;
         }
         
         /* Prevent chart overflow */
         .plotly-graph-div {
           max-width: 100%;
           overflow: hidden;
         }
         
         /* Improve mobile chart responsiveness */
         .chart-container {
           width: 100%;
           overflow-x: auto;
         }
         
         /* Better mobile card layout */
         .card-body {
           padding: 0.75rem;
         }
         
         .card-header {
           padding: 0.75rem;
         }
         
         /* Improve mobile table display */
         .table-responsive {
           border: none;
           margin-bottom: 0;
         }
       }