: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%;
      }
      .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; }

      /* 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);
      }

      /* Mobile responsive navbar */
      .navbar-brand {
        position: static !important;
        transform: none !important;
      }
      
      @media (min-width: 768px) {
        .navbar-brand {
          position: absolute !important;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%) !important;
        }
      }

      /* Mobile navigation improvements */
      @media (max-width: 767.98px) {
        .navbar {
          padding: 0.5rem 1rem;
        }
        
        .navbar-nav .dropdown-menu {
          position: static;
          float: none;
          width: auto;
          margin-top: 0;
          background-color: transparent;
          border: none;
          box-shadow: none;
        }
        
        .mobile-nav-controls {
          flex-direction: column;
          gap: 0.5rem;
          width: 100%;
        }
        
        .mobile-nav-controls .btn,
        .mobile-nav-controls .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 on narrow screens */
      .pg-navbar-breadcrumb {
        max-width: min(42vw, 11rem);
        overflow: hidden;
      }

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

      .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: 8rem;
      }

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

        .pg-navbar-breadcrumb .breadcrumb-item:last-child {
          display: none;
        }
      }

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

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

        .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 on all screen sizes */
      .modebar-container {
        top: auto !important;
        bottom: 4px !important;
        right: 5px !important;
      }
      .modebar {
        background: transparent !important;
      }

      /* 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: -5px;
        right: -5px;
        background-color: #dc3545;
        color: white;
        font-size: 10px;
        border-radius: 50%;
        padding: 2px 5px;
        min-width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }
    
      .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-y: auto;
      }

      /* 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;
         }
       }