/* ==========================================================================
   Responsive: Desktop (>=1025px), Tablet (601–1024px), Mobile (<=600px)
   Layout: Sidebar + Topbar + Panel (SPA content area)

   Responsive media queries used in this file:
     1. @media (min-width: 1025px)
        Desktop-only modal sizing and alarm-table width behavior.
     2. @media (max-width: 1024px)
        Tablet/mobile bottom navigation, 3-column tablet grid, full-screen
        modals, compact topbar, and responsive Trends chart sizing.
     3. @media (max-width: 600px)
        Mobile grid, cards, tables, pagination, filters, controls, and
        compact PLC status display.
     4. @media (max-width: 600px) and (orientation: portrait)
        Portrait-phone chart sizing.
     5. @media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px)
        Short landscape tablet/phone Trends layout and filter behavior.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (easy theme adjustments)
   -------------------------------------------------------------------------- */
:root {
    --sidebar-width: 200px;
    --sidebar-bg: #1a1d23;
    --sidebar-hover: #2d3340;
    --sidebar-active: #3a4155;
    --sidebar-accent: #4a90d9; /* left active border */

    --topbar-height: 40px;
    --topbar-bg: #ffffff;
    --panel-bg: #f0f2f7;
    --card-bg: #ffffff;
    --card-border: #d0d5e0;
    --status-card-h: 100px;
    --text-primary: #1a1d23;
    --text-secondary: #5a6275;
    --text-accent: #2272c3;
    --indicator-on-green: #27ae60;
    --indicator-on-grey: #9b9b9b;
    --indicator-on-red: #e74c3c;
    --indicator-on-yellow: #f39c12;
	--indicator-on-cyan: #4a90d9;
    --indicator-off: #9B9B9B;
    --modal-bg: #ffffff;
    --modal-header-bg: #f0f2f7;
    --modal-border: #d0d5e0;
    --modal-min-w: 340px;
    --modal-max-w: 520px;
    --modal-btn-hover: #f0f0f0;
    /* Hover colors for semantic buttons */
    --btn-danger-hover: #c0392b; /* slightly darker red */
    --btn-warning-hover: #d89b2b; /* slightly darker yellow/orange */
    --btn-reset-hover: #a8a8a8; /* slightly darker yellow/orange */

    --alarm-table-hover: rgba(0, 0, 0, 0.04);
    --bottom-nav-h: 58px; /* tablet / mobile horizontal sidebar */
    --font: 'Segoe UI', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Trends tags table (replaces echarts legend)
   -------------------------------------------------------------------------- */
.trend-tags-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.trend-tags-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.trend-tags-table thead th { color: var(--text-secondary); font-weight: 600; border-bottom: 1px solid var(--card-border); }
.trend-tags-table tbody td { border-bottom: 1px solid rgba(0,0,0,0.04); padding: 6px 8px; vertical-align: middle; }
.trend-tags-table tbody tr:hover { background: var(--alarm-table-hover); }
.trend-tags-table .btn { padding: 4px 8px; font-size: 12px; }

.trend-color-swatch { width: 28px; height: 18px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.08); display: inline-block; }

/* Mobile: reduce columns to essential ones to avoid horizontal scrolling
   Hide Description (col 2) and Avg (col 6) to keep a compact view. */


/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--panel-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  overflow: hidden;                /* no body scroll — individual areas scroll */
}

/* --------------------------------------------------------------------------
   App shell: sidebar (left on desktop, bottom on tablet/mobile) + main area
   -------------------------------------------------------------------------- */
#app {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100vw;
}

/* --------------------------------------------------------------------------
   Left sidebar — Desktop
   -------------------------------------------------------------------------- */
#sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  border-right: 1px solid #353b47;
}

.sidebar-logo {
  padding: 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #353b47;
}
.sidebar-logo img { height: 28px; }
.sidebar-logo span { font-size: 24px; font-weight: 600; color: var(--text-accent); letter-spacing: .5px; }

.nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  border: none;
  background: transparent;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  font-size: 14px;
}
.nav-btn i { width: 18px; text-align: center; font-size: 15px; }
.nav-btn:hover { background: var(--sidebar-hover); color: var(--text-primary); }
.nav-btn.active {
  background: var(--sidebar-active);
  color: var(--text-primary);
  border-left-color: var(--sidebar-accent);
}
.nav-btn .nav-label { white-space: nowrap; overflow: hidden; }

/* Keep sidebar nav text light regardless of the global light theme */
#sidebar .nav-btn { color: #8b93a8; }
#sidebar .nav-btn:hover { color: #e0e4ee; }
#sidebar .nav-btn.active { color: #e0e4ee; }
#sidebar .sidebar-logo span { color: #4a90d9; }

/* --------------------------------------------------------------------------
   Main wrapper (everything except the left sidebar)
   -------------------------------------------------------------------------- */
#main-area {
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: calc(100vw - var(--sidebar-width));
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
#topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  background: var(--topbar-bg);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  border-bottom: 1px solid var(--card-border);
  z-index: 900;
  flex-shrink: 0;
}
#page-title {
  flex: 1;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#plc-status-area {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}
#plc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--indicator-on-red);
  flex-shrink: 0;
}
#plc-dot.connected { background: var(--indicator-on-green); }
#plc-ip { white-space: nowrap; }
#datetime-area {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: 8px;
}

/* --------------------------------------------------------------------------
   Panel — scrollable content area
   -------------------------------------------------------------------------- */
#panel {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px 0;
  background: var(--panel-bg);
}

/* --------------------------------------------------------------------------
   Main page card grid
   -------------------------------------------------------------------------- */
.grid-container { width: 100%; }

.cardGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* Each column stacks a status-card on top of a data-card */
.card-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Status card (small indicator bar at the top of each column)
   -------------------------------------------------------------------------- */
.status-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  /* Use a fixed height so status and plant cards render equal height. */
  height: var(--status-card-h);
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Inner body inside a status-card that holds controls (buttons, indicators).
   Use CSS Grid so buttons can form responsive columns (2-column desktop by
   default, fewer on narrow screens, more on wide screens). Grid ensures even
   distribution of items across rows and consistent gaps/margins. */
.status-card-body,
.plant-status-card-body {
  display: grid;
  /* Use a stable 2-column layout by default so desktop shows two buttons per row. */
  grid-template-columns: repeat(2, minmax(0, 1fr));

  width: auto;
  min-width: 0;
  align-items: center;
  align-content: center;
  justify-items: stretch;
  margin: 7px;
  /* Make the body fill the remaining height of the parent card and
     scroll if content overflows. */
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.plant-status-card-body {
  grid-template-columns: repeat(1, 1fr);
}

/* --------------------------------------------------------------------------
   Data card — mnemoscheme area
   -------------------------------------------------------------------------- */
.data-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  overflow: hidden;
}

.data-card-title {
  padding: 5px 5px 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--card-border);
}

/* Status card title: match data-card header style so both headers look identical
   and occupy full card width. Placed at the top of each status-card. */
/* status-card-title removed — headers are not shown on status cards */

/* Aspect ratio is driven by the intrinsic size of the SVG background image
   placed as a real <img> child element (class .data-card-bg).
   DO NOT set a fixed aspect-ratio or min-height here — that would force
   the container to a shape independent of the background image dimensions
   and cause distortion or cropping of the mnemoscheme. */
.data-card-body {
  position: relative;     /* positioning context for all absolute children */
  overflow: hidden;
  container-type: inline-size;
  line-height: 0;         /* remove inline-block gap below the img */
  font-size: 0;           /* belt-and-suspenders gap removal */
}

/* Background SVG image — drives the container height.
   width:100% makes it fill the card; height:auto preserves the SVG
   viewBox aspect ratio without any distortion.  pointer-events:none
   ensures clicks pass through to equipment icons above it. */
.data-card-bg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Equipment icon placed by JS (absolute, fraction-based position).
   left/top are set as percentages of .data-card-body so the icon
   moves proportionally when the container resizes. */
.data-card-body .equipment-icon {
  position: absolute;
  /* width is set per-icon via inline style (ui.w in equipment.json) */
  height: auto;        /* preserve SVG icon aspect ratio */
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: filter .2s;
  z-index: 10;
  font-size: initial;  /* reset the font-size:0 from parent */
  line-height: initial;
}

/* Icons inside status cards are handled by status-card-specific rules
   (status-card-body .equipment-icon.digital-btn-wrapper) which place
   controls into the grid flow. The absolute positioning and centering
   above apply only to icons inside .data-card-body. */

/* Image wrapper that holds an <img> plus an absolute label. The inner
   img fills the wrapper; the label can be positioned outside the wrapper
   using ui.label.dx/dy like other icons. */
.image-icon img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

/* --------------------------------------------------------------------------
   MonD div icon — discrete signal indicator (grey = off, red = on)
   -------------------------------------------------------------------------- */
.mond-icon {
  aspect-ratio: 1 / 1;          /* square by default; override with ui.h */
  border-radius: 4px;
  background: var(--indicator-off);
  border: 2px solid #9aa0b0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, border-color .25s;
  /* allow the label to be positioned outside the icon element
     (mona-icon uses overflow: visible for its PV label) */
  overflow: visible;
}
.mond-icon.active {
  background: var(--indicator-on-red);
  border-color: #c0392b;
}
.mond-id-label {
  position: absolute;
  font-size: 12px;
  font-size: clamp(8px, 3.2cqi, 16px);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 12; /* sit above the icon's background */
}

/* --------------------------------------------------------------------------
   MonA div icon — analog level bar
   -------------------------------------------------------------------------- */
.mona-icon {
  aspect-ratio: 1 / 4.1;        /* portrait by default; override with ui.h */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  overflow: visible;             /* allow PV label to stick out */
}
.mona-id-label {
  font-size: 12px;
  font-size: clamp(8px, 3.2cqi, 16px);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}

/* Positionable ID label for MonA: allow absolute placement using ui["id-label"].dx/dy */
.mona-icon .mona-id-label {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 12;
}
.mona-track {
  flex: 1;
  width: 55%;
  background: #fff;
  border-radius: 4px;
  border: 1.5px solid #b0b8c8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}
.mona-fill {
  width: 100%;
  height: 0%;
  background: var(--indicator-on-green);
  transition: height .45s ease, background .45s ease;
  border-radius: 2px 2px 0 0;
}
/* PV value label — positioned absolutely relative to the .mona-icon div    */
/* Default position (dx/dy) is set in equipment-view.js; override via       */
/* ui.pvLabel: { dx: "115%", dy: "35%" } in equipment.json                  */
.mona-pv-label {
  position: absolute;
  font-size: 16px;
  font-size: clamp(10px, 4.27cqi, 22px);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  background: rgba(255,255,255,0.88);
  padding: 1px 5px;
  padding: 0.27cqi 1.33cqi;
  border-radius: 3px;
  border: 1px solid var(--card-border);
  z-index: 20; /* ensure PV label sits above image icons */
}

.vlva-pv-label,
.motvfd-pa-label {
    position: absolute;
    font-size: 16px;
    font-size: clamp(10px, 4.27cqi, 22px);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    background: rgba(255,255,255,0.88);
    padding: 1px 5px;
    padding: 0.27cqi 1.33cqi;
    border-radius: 3px;
    border: 1px solid var(--card-border);
    z-index: 20; /* ensure PV label sits above image icons */
}
.equipment-status-icon-container {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 21;
}
.equipment-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.equipment-status-icon[hidden] { display: none; }
.equipment-status-icon.ilk-label { color: var(--indicator-on-red); }
.equipment-status-icon.mode-label { color: var(--indicator-on-yellow); }
.data-card-body .equipment-icon:hover { filter: brightness(1.3); }

/* --------------------------------------------------------------------------
   Right sidebar cards (5th column — trend charts)
   -------------------------------------------------------------------------- */
.right-sidebar-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch; /* ensure child chart containers stretch to full width */
  flex: 1;
  min-width: 0;
}
.right-sidebar-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.right-sidebar-card canvas { width: 100% !important; }

/* Ensure the immediate child container (div) used as echarts host stretches
   to the available width in all responsive layouts. This prevents the chart
   element from receiving a narrower intrinsic width on mobile devices. */
.right-sidebar-card > div {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   General card / section inside panel (used by alarm, trend, report pages)
   -------------------------------------------------------------------------- */
.page-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
margin-bottom: 14px;
  margin-top: 10px;
}

/* Sidebar+table layout for alarm / trend / report pages */
.page-layout {
  display: flex;
  flex-direction: row;
  gap: 14px;
  width: 100%;
  align-items: flex-start;
}
.page-layout#alarms-page {
  /* Alarms page: arrange sidebar above the table and make both
     occupy the full available width so the table appears below the
     filters on all screen sizes. */
  flex-direction: column;
}
.page-layout#alarms-page .page-sidebar,
.page-layout#alarms-page .page-content {
  width: 100%;
}

/* Trends page: same single-column layout as alarms.html, but stretched to
   fill all available vertical space so the chart is as tall as possible. */
.page-layout#trends-page {
  flex-direction: column;
  height: calc(100vh - var(--topbar-height) - 32px);
}
.page-layout#trends-page .page-sidebar,
.page-layout#trends-page .page-content {
  width: 100%;
}
.page-layout#trends-page .page-sidebar {
  flex-shrink: 0;
}
.page-layout#trends-page .page-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#trend-chart-wrap {
  flex: 1;
  min-height: 0;
}
#trend-status {
  flex-shrink: 0;
}

/* Filter sidebars: mobile-only collapsible via native details/summary.
   The <details> element wraps its contents in an internal shadow container, so
   the flex layout of .page-sidebar cannot reach the controls directly. Keep the
   details as a plain block (card visuals come from .page-sidebar: background,
   border, padding) and let .sidebar-body reproduce the original flex layout. */
/*#trend-sidebar,
#alarm-sidebar,
#report-sidebar,
#plc-log-sidebar { display: block; }*/
.page-sidebar .sidebar-filter-header { display: none; }

#trend-sidebar > .sidebar-body,
#alarm-sidebar > .sidebar-body,
#report-sidebar > .sidebar-body,
#plc-log-sidebar > .sidebar-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
  align-items: center;
}



/* Report page: stack sidebar above content and make both full-width */
.page-layout#report-page {
  flex-direction: column;
}
.page-layout#report-page .page-sidebar,
.page-layout#report-page .page-content {
  width: 100%;
}

/* PLC fast logging page should use the same layout as report page */
.page-layout#plc-fast-logging-page {
  flex-direction: column;
}
.page-layout#plc-fast-logging-page .page-sidebar,
.page-layout#plc-fast-logging-page .page-content {
  width: 100%;
}
.page-sidebar {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
align-items: center;
  flex-shrink: 0;
}
.page-content { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   Form elements (uniform label | control two-column layout)
   -------------------------------------------------------------------------- */
.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.form-label {
  width: auto;
  min-width: 20px;
  color: var(--text-secondary);
  font-size: 13px;
}
.form-control {
  flex: 1;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 5px 8px;
  font-size: 13px;
  font-family: var(--font);
  min-width: 0;
}
/* Ensure native datetime pickers use the same app font where possible */
input[type="datetime-local"].form-control,
input[type="datetime-local"] {
  font-family: var(--font);
}
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-second-field {
  font-family: var(--font);
}
input[type="datetime-local"]::-moz-datetime-edit {
  font-family: var(--font);
}
.form-control:focus { outline: none; border-color: var(--sidebar-accent); }
select.form-control { cursor: pointer; }

.trend-live-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
  transition: background .15s, border-color .15s;
  min-height: 31px;
}
.btn-primary { background: var(--sidebar-accent); color: #fff; border-color: var(--sidebar-accent); }
.btn-primary:hover { background: #3a7bbf; }
.btn-secondary { background: transparent; color: var(--text-secondary); border-color: var(--card-border); }
.btn-secondary:hover { background: var(--modal-btn-hover); color: var(--text-primary); }
.btn-danger { background: var(--indicator-on-red); color: #fff; }
.btn-danger:hover { background: var(--btn-danger-hover); }
.btn-warning { background: var(--indicator-on-grey); color: #fff; }
.btn-warning:hover { background: var(--btn-reset-hover); }
.btn-success { background: var(--indicator-on-green); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 14px; width:100%; height: 31px;}

/* Digital button styling (used for DigitalBtn equipment) */
.digital-btn {
  min-width: 100px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--topbar-bg);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.digital-btn:hover {
  background: var(--modal-btn-hover);
  color: var(--text-primary);
  border-color: #c8cdd6;
}
.digital-btn.active {
  background: var(--indicator-on-cyan);
  color: #fff;
  border-color: var(--indicator-on-cyan);
}

/* Digital button wrappers */
.data-card-body .digital-btn-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.status-card .digital-btn-wrapper,
.status-card-body .digital-btn-wrapper,
.plant-status-card-body .digital-btn-wrapper,
.plant-status-card .digital-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: calc(100% - 4px);
  min-width: 0;
  padding: 2px;
  justify-self: stretch;
  align-self: stretch;
}
.status-card-body .digital-btn,
.plant-status-card-body .digital-btn,
.plant-status-card-body .btn-sm {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 32px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Data table (Pages: Alarms, SCADA logging, PLC logging)
   -------------------------------------------------------------------------- */
.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - var(--topbar-height) - 140px);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th, .data-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--card-border);
  text-align: left;
  white-space: nowrap;
}
.data-table th { background: var(--topbar-bg); color: var(--text-secondary); font-weight: 600; position: sticky; top: 0; }
.data-table tr:hover td { background: var(--alarm-table-hover); }
.data-table tr.selectable-row { cursor: pointer; }
.data-table tr.selectable-row.selected td { background: rgba(74, 144, 217, 0.2); }
#plc-fast-logging-page #report-table th { cursor: pointer; }
#plc-fast-logging-page #report-table .selected-column { background: rgba(74, 144, 217, 0.3) !important; }
#plc-fast-logging-page #report-table th.selected-column { background: #c7def3 !important; }

/* Alarm class and direction highlighting */
.alarm-class-classAlarm.alarm-incoming td { background: rgba(231, 76, 60, 0.6) !important; }
.alarm-class-classAlarm.alarm-outgoing td { background: rgba(231, 76, 60, 0.2) !important; }
.alarm-class-classWarning.alarm-incoming td { background: rgba(241, 196, 15, 0.4) !important; }
#alarm-table tr.selectable-row.selected td { background: rgba(74, 144, 217, 0.45) !important; }

/* Pagination controls */
.pagination { display: flex; align-items: center; gap: 8px; padding-top: 10px; justify-content: center }

/*.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;*/
/*    background: var(--card-bg);*/
    /*position: fixed;
    left: 0;
    right: 0;
    bottom: var(--bottom-nav-h);*/ /* directly above bottom nav */
    /*z-index: 500;*/
    /*justify-content: center;*/
/*    height: 48px;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.06);*/
/*}*/

    /* Excel icon */
    .fa-solid.fa-file-excel {
        color: green;
    }
    /* --------------------------------------------------------------------------
   Modal system
   -------------------------------------------------------------------------- */
    .modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2000;
        pointer-events: none; /* overlay is just a plane; individual modals are clickable */
    }

    .modal-window {
        position: fixed;
        background: var(--modal-bg);
        border: 1px solid var(--modal-border);
        border-radius: 8px;
        min-width: var(--modal-min-w);
        max-width: var(--modal-max-w);
        width: var(--modal-min-w);
        pointer-events: all;
        box-shadow: 0 8px 32px rgba(0,0,0,.55);
        display: flex;
        flex-direction: column;
        z-index: 2010;
        user-select: none;
    }

        .modal-window.hidden {
            display: none;
        }

    .modal-header {
        background: var(--modal-header-bg);
        border-radius: 8px 8px 0 0;
        padding: 10px 14px;
        display: flex;
        flex-direction: column;
        cursor: move;
        border-bottom: 1px solid var(--modal-border);
        gap: 2px;
    }

    .modal-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .modal-tag {
        font-size: 11px;
        color: var(--text-accent);
    }

    .modal-close-btn {
        position: absolute;
        top: 8px;
        right: 10px;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        padding: 2px 5px;
        border-radius: 3px;
    }

        .modal-close-btn:hover {
            color: var(--text-primary);
            background: var(--sidebar-hover);
        }
    /* Modal tabs */
    .modal-tabs {
        display: flex;
        border-bottom: 1px solid var(--modal-border);
        padding: 0 14px;
        background: var(--modal-header-bg);
    }

    .modal-tab-btn {
        padding: 7px 8px;
        border: none;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 14px;
        font-family: var(--font);
        margin-bottom: -1px;
        flex: 1; /* fill available width equally */
        text-align: center; /* center the label */
        min-width: 0; /* allow shrinking in narrow modals */
    }

        .modal-tab-btn.active {
            color: var(--text-accent);
            border-bottom-color: var(--sidebar-accent);
        }

    .modal-body {
        padding: 14px;
        overflow-y: auto;
        max-height: 60vh;
    }

    .modal-tab-content {
        display: none;
    }

        .modal-tab-content.active {
            display: block;
        }
    /* Modal section (status / control / settings) */
    .modal-section {
        margin-bottom: 14px;
    }

    .modal-section-title {
        font-size: 11px;
        text-transform: uppercase;
        color: var(--text-secondary);
        letter-spacing: .7px;
        /* center text with horizontal rules on both sides */
        margin: 8px 0 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        white-space: nowrap;
    }

        .modal-section-title::before,
        .modal-section-title::after {
            content: "";
            flex: 1 1 0;
            height: 1px;
            background: var(--card-border);
            min-width: 20px;
        }

        .modal-section-title::before {
            margin-right: 10px;
        }

        .modal-section-title::after {
            margin-left: 10px;
        }
    /* Two-column form inside modal */
    .modal-form {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .modal-form-status {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .modal-form-settings {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .modal-form-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .modal-form-label {
        width: 250px;
        min-width: 100px;
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.3;
    }

    .modal-form-control {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        width: 100%;
    }

    .modal-form-button {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .modal-form-input {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .modal-form-output {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .modal-form-ind {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    /* Re-arrange elements (ResAlarm and EmergStop control buttons) to take 2 columns (all table width) */
    [data-view="ValveA-control"] .modal-form-row {
        grid-column: 1 / -1;
    }

    [data-view="ValveD-control"] .modal-form-row {
        grid-column: 1 / -1;
    }

    [data-view="MotDOL-control"] .modal-form-row {
        grid-column: 1 / -1;
    }

    [data-view="MotVFD-control"] .modal-form-row {
        grid-column: 1 / -1;
    }

    [data-view="MonD-control"] .modal-form-row {
        grid-column: 1 / -1;
    }

    [data-view="MonA-control"] .modal-form-row {
        grid-column: 1 / -1;
    }
    /* Indicator element */
    .indicator {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--indicator-off);
        display: inline-block;
        flex-shrink: 0;
    }

        .indicator.green {
            background: var(--indicator-on-green);
        }

        .indicator.red {
            background: var(--indicator-on-red);
        }

        .indicator.yellow {
            background: var(--indicator-on-yellow);
        }

        .indicator.cyan {
            background: var(--indicator-on-cyan);
        }
    /* Output (read-only value display) */
    .tag-output {
        font-size: 14px;
        color: var(--text-accent);
        font-weight: 600;
    }
    /* Alarm table inside modal */
    .modal-alarm-table {
        width: 100%;
        font-size: 12px;
        border-collapse: collapse;
    }

        .modal-alarm-table th, .modal-alarm-table td {
            padding: 5px 8px;
            border-bottom: 1px solid var(--card-border);
            text-align: left;
        }

        .modal-alarm-table th {
            background: var(--topbar-bg);
            color: var(--text-secondary);
        }
        /* modal alarm table header */
        .modal-alarm-table tbody tr.alarm-class-classAlarm.alarm-incoming > td {
            background: rgba(231, 76, 60, 0.6) !important;
        }

        .modal-alarm-table tbody tr.alarm-class-classAlarm.alarm-outgoing > td {
            background: rgba(231, 76, 60, 0.2) !important;
        }

        .modal-alarm-table tbody tr.alarm-class-classWarning.alarm-incoming > td {
            background: rgba(241, 196, 15, 0.4) !important;
        }
    /* Desktop: make modal adapt to alarm table width to avoid horizontal scrolling
   - On wide screens allow the modal to size to table content (width:auto) but cap
     at the viewport width minus margins. Keep vertical scrolling inside modal-body.
   - On mobile/tablet behavior remains as before (modals fill available area). */
    /* Landscape phones have enough width to leave the narrow-screen breakpoint,
   but still need the collapsible trend filter and a full-screen chart canvas. */
    /* Keep mobile/tablet trends content scrollable instead of compressing the chart
   to fit the panel. Size the chart to the viewport between the topbar and nav. */
    /* ==========================================================================
   Responsive
   All breakpoint-specific rules live here so responsive behavior is easy to
   audit and each breakpoint has a single source of truth.
   ========================================================================== */
    /* @media (min-width: 1025px) */
    @media (min-width: 1025px) {
        .modal-window {
            width: auto; /* size to content (table) when possible */
            max-width: calc(100vw - 80px); /* ensure modal never exceeds viewport */
            min-width: var(--modal-min-w);
        }

        .modal-body {
            overflow-y: auto; /* keep vertical scrolling */
            overflow-x: visible; /* allow content to determine width */
        }
        /* Let the alarm table determine required width instead of forcing 100% */
        .modal-alarm-table {
            width: auto;
            table-layout: auto;
            white-space: nowrap;
        }

            .modal-alarm-table th, .modal-alarm-table td {
                white-space: nowrap;
            }
    }
    /* @media (max-width: 1024px) */
    @media (max-width: 1024px) {
        #alarms-page .data-table,
        #report-page .data-table {
            width: 100%;
            min-width: 0;
            table-layout: auto;
        }

        #alarms-page .data-table th,
        #alarms-page .data-table td,
        #report-page .data-table th,
        #report-page .data-table td {
            padding: 5px 8px;
            white-space: normal;
/*            overflow-wrap: anywhere;*/
        }

        .modal-alarm-table {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            table-layout: fixed;
            white-space: normal;
        }

        .modal-alarm-table th,
        .modal-alarm-table td {
            padding: 4px 3px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        #app {
            flex-direction: column;
        }

        #trends-page .trend-live-control {
            min-width: 44px;
            min-height: 31px;
            flex: 0 0 auto;
            justify-content: center;
        }

        #trends-page #trend-live-chk {
            width: 24px;
            height: 24px;
            margin: 0;
            accent-color: var(--sidebar-accent);
        }

        #trends-page .trend-controls-row > .btn {
            min-height: 31px;
        }
        /* Sidebar goes to the bottom */
        #sidebar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            top: auto;
            width: 100%;
            height: var(--bottom-nav-h);
            flex-direction: row;
            border-right: none;
            border-top: 1px solid var(--card-border);
            z-index: 1000;
        }

        .sidebar-logo {
            display: none;
        }

        .nav-btn {
            flex-direction: column;
            gap: 3px;
            padding: 8px 0;
            flex: 1;
            justify-content: center;
            border-left: none;
            border-top: 3px solid transparent;
            font-size: 10px;
        }

            .nav-btn.active {
                border-left-color: transparent;
                border-top-color: var(--sidebar-accent);
            }

        .nav-label {
            display: none;
        }

        .nav-btn i {
            width: 18px;
            text-align: center;
            font-size: 28px;
        }

        #main-area {
            margin-left: 0;
            width: 100vw;
            height: 100vh;
            padding-bottom: var(--bottom-nav-h);
        }
        /* 3 columns on tablet */
        .cardGrid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        /* Modals fill screen between topbar and bottom nav */
        .modal-window {
            position: fixed !important;
            left: 0 !important;
            right: 0 !important;
            top: 0 !important;
            bottom: var(--bottom-nav-h) !important;
            width: 100% !important;
            max-width: 100% !important;
            border-radius: 0;
        }

        .modal-body {
            max-height: calc(100vh - var(--topbar-height) - var(--bottom-nav-h) - 100px);
        }

        .page-layout {
            flex-direction: column;
        }

        #datetime-area {
            display: none;
        }
        /* Rules merged from another original block using the same breakpoint. */
        .page-layout#trends-page {
            height: auto;
            min-height: 0;
        }

            .page-layout#trends-page .page-content {
                flex: 0 0 auto;
                min-height: 0;
                overflow: visible;
            }

        #trend-chart-wrap {
            flex: 0 0 auto;
            width: 100%;
            height: calc(100dvh - var(--topbar-height) - var(--bottom-nav-h)) !important;
            min-height: calc(100dvh - var(--topbar-height) - var(--bottom-nav-h));
        }
    }
    /* @media (max-width: 600px) */
    @media (max-width: 600px) {
        .form-row .btn-primary, .form-row .btn-secondary  {
            width: 100%
        }

        .trend-tags-table {
            min-width: 700px;
        }
            /* Hide Description (4) and Avg (8) on small screens to avoid horizontal scroll */
            .trend-tags-table thead th:nth-child(4),
            .trend-tags-table tbody td:nth-child(4),
            .trend-tags-table thead th:nth-child(8),
            .trend-tags-table tbody td:nth-child(8) {
                display: none;
            }
            /* Make Tag column (2) compact with ellipsis */
            .trend-tags-table thead th:nth-child(2),
            .trend-tags-table tbody td:nth-child(2) {
                max-width: 140px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            /* Align numeric columns to right for readability */
            .trend-tags-table thead th:nth-child(5),
            .trend-tags-table tbody td:nth-child(5) {
                text-align: right;
            }
        /* Rules merged from another original block using the same breakpoint. */
        .page-sidebar .sidebar-filter-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
            list-style: none;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 600;
            user-select: none;
        }

            .page-sidebar .sidebar-filter-header::-webkit-details-marker {
                display: none;
            }

            .page-sidebar .sidebar-filter-header::marker {
                content: "";
            }
            /* CSS-only chevron: points down when collapsed, up when expanded */
            .page-sidebar .sidebar-filter-header::after {
                content: "";
                width: 8px;
                height: 8px;
                border-right: 2px solid var(--text-secondary);
                border-bottom: 2px solid var(--text-secondary);
                transform: rotate(45deg);
                margin-right: 4px;
            }

        .page-sidebar[open] .sidebar-filter-header::after {
            transform: rotate(-135deg);
        }
        /* Thin separator between the header and the controls when expanded */
        .page-sidebar[open] .sidebar-filter-header {
            padding-bottom: 20px;
        }
        /* On mobile the controls stack in a column, reproducing the mobile layout
     that previously targeted .page-sidebar directly */
        #trend-sidebar > .sidebar-body,
        #alarm-sidebar > .sidebar-body,
        #report-sidebar > .sidebar-body,
        #plc-log-sidebar > .sidebar-body {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
        }
        /* Rules merged from another original block using the same breakpoint. */
        /* 1 column, full width, no horizontal padding */
        .cardGrid {
            grid-template-columns: minmax(0, 1fr);
            gap: 0;
        }

        .data-card {
            border-radius: 0;
            border-left: none;
            border-right: none;
            margin: 5px 10px;
        }

        .status-card {
            border-radius: 0;
            border-left: none;
            border-right: none;
            margin: 5px 10px;
        }

        .card-column {
            gap: 0;
        }

        .nav-btn i {
            width: 18px;
            text-align: center;
            font-size: 28px;
        }
        /* Ensure panel content is not hidden behind the bottom navigation on small screens
     Add sufficient bottom padding to the main area and panel so the last card/chart
     remains fully visible and scrollable. */
        #main-area {
            padding-bottom: var(--bottom-nav-h);
        }

        #panel {
            padding: 12px 0px 80px;
        }

        .form-row {
            width: 100%
        }

        #trends-page .trend-controls-row {
            justify-content: space-between;
            flex-wrap: nowrap;
            gap: 6px;
        }

            #trends-page .trend-controls-row > .btn {
                white-space: nowrap;
            }

        #plc-ip, #plc-status-area span:not(#plc-dot) {
            display: none;
        }

        #plc-dot {
            width: 14px;
            height: 14px;
        }
        /* For reports and plc_fast_logging tables on narrow screens:
       - Allow the table (including header) to horizontally scroll inside its wrapper
       - Prevent cell values from wrapping so long values remain readable
       - Do not enable page-level horizontal scrolling; only the table scrolls when needed
    */
        .data-table-wrap {
            overflow-x: auto; /* enable horizontal scroll for the table only when it overflows */
            -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
        }

        .data-table {
            table-layout: auto; /* let table size itself based on content */
            width: auto; /* allow table to be wider than container when needed */
            min-width: 100%; /* ensure table is at least as wide as its container */
        }

            .data-table th,
            .data-table td {
                white-space: nowrap; /* avoid splitting values across multiple lines */
                padding: 6px 8px;
            }

        .page-sidebar {
            display: flex;
            flex-direction: column;
        }
        /* show sidebar on narrow screens */
        .page-content {
            width: 100%;
            display: flex;
            flex-direction: column;
            /* allow the table area to grow and scroll while pagination stays visible */
        }

            .page-content .data-table-wrap {
                /* let table area take remaining height and be scrollable vertically
           add extra bottom padding so content doesn't get hidden behind pagination + bottom nav
           Increased from 48px to 64px to ensure 2 rows remain visible on small screens.
           Also include safe-area inset for devices with home indicator areas. */
                flex: 1 1 auto;
                max-height: none !important; /* override inline max-height on fragments */
                overflow-y: auto;
/*                padding-bottom: calc(64px + var(--bottom-nav-h) + env(safe-area-inset-bottom));*/
            }
        /* Keep pagination fixed above the bottom horizontal menu so its order is:
       bottom nav -> pagination -> table -> other content */
        .pagination {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 5px;
 /*           background: var(--card-bg);
            position: fixed;
            left: 0;
            right: 0;*/
            bottom: var(--bottom-nav-h); /* directly above bottom nav */
            z-index: 500;
            justify-content: center;
/*            height: 48px;*/
/*            box-shadow: 0 -1px 4px rgba(0,0,0,0.06);*/
        }
            /* Keep pagination content width aligned with main content on narrow screens */
            .pagination > * {
                flex-shrink: 0;
            }

        .form-label {
            min-width: 50px;
        }
    }
    /* @media (max-width: 600px) and (orientation: portrait) */
    @media (max-width: 600px) and (orientation: portrait) {
        .cardGrid > .card-column:last-child > .right-sidebar-card {
            height: 280px;
            flex: 0 0 auto;
        }

        #trend-short,
        #trend-long {
            height: 230px !important;
            min-height: 230px;
        }
    }
    /* @media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) */
    @media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) {
        /* --------------------------------------------------------------------------
   Panel — scrollable content area
   -------------------------------------------------------------------------- */
        #panel {
            padding: 12px 0px 80px;
        }

        .pagination {
            padding-bottom: 10px
        }

        .data-table-wrap {
            max-height: max-content
        }

        #trend-sidebar > .sidebar-filter-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
            list-style: none;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 600;
            user-select: none;
        }

            #trend-sidebar > .sidebar-filter-header::-webkit-details-marker {
                display: none;
            }

            #trend-sidebar > .sidebar-filter-header::marker {
                content: "";
            }

            #trend-sidebar > .sidebar-filter-header::after {
                content: "";
                width: 8px;
                height: 8px;
                border-right: 2px solid var(--text-secondary);
                border-bottom: 2px solid var(--text-secondary);
                transform: rotate(45deg);
                margin-right: 4px;
            }

        #trend-sidebar[open] > .sidebar-filter-header::after {
            transform: rotate(-135deg);
        }

        #trend-sidebar[open] > .sidebar-filter-header {
            padding-bottom: 8px;
        }

        .page-layout#trends-page {
            width: 100vw;
            height: auto;
            min-height: 0;
/*            margin-left: -16px;*/
        }

            .page-layout#trends-page .page-content {
                flex: 0 0 auto;
                overflow: visible;
            }
    }