/* ─── App-wide theme tweaks to match Solar Turbines mockups ─── */
:root {
    --tde-accent: #ffb300;
    --tde-primary: #1976d2;
    --tde-primary-dark: #1565c0;
    --tde-dark: #1a1a1a;
    --tde-status-bg: #2d2d2d;

    /* ── Light theme tokens (default) ── */
    --tde-bg: #f5f5f5;            /* page background */
    --tde-surface: #ffffff;       /* cards / panels */
    --tde-surface-alt: #fafafa;   /* toolbars / subtle fills */
    --tde-text: #333333;          /* primary readable text */
    --tde-text-muted: #666666;    /* secondary text */
    --tde-border: #e0e0e0;        /* borders / dividers */
    --tde-nav-link: #bbbbbb;      /* inactive nav link */
    --tde-nav-link-active: var(--tde-accent);
    --tde-nav-link-active-bg: rgba(255, 179, 0, .1);
}

/* ── Dark theme overrides ──
   Scoped to .dark-theme on the shell wrapper so only colors change — the
   existing responsive layout rules remain untouched. */
.dark-theme {
    --tde-dark: #0f0f0f;
    --tde-status-bg: #181818;

    --tde-bg: #121212;
    --tde-surface: #1e1e1e;
    --tde-surface-alt: #262626;
    --tde-text: #e8e8e8;
    --tde-text-muted: #b0b0b0;
    --tde-border: #3a3a3a;
    --tde-nav-link: #cccccc;
    --tde-nav-link-active: var(--tde-accent);
    --tde-nav-link-active-bg: rgba(255, 179, 0, .18);
}

/* Map core surfaces to the theme tokens so both themes stay in sync. */
.dark-theme { background: var(--tde-bg); color: var(--tde-text); }
.dark-theme .tde-main { background: var(--tde-bg); }
.dark-theme .tde-section,
.dark-theme .dp-grid-section,
.dark-theme .dp-panel,
.dark-theme .ctx-banner,
.dark-theme .hw-column,
.dark-theme .dp-status-filter-bar,
.dark-theme .dp-stats-bar { background: var(--tde-surface); border-color: var(--tde-border); color: var(--tde-text); }
.dark-theme .dp-grid-toolbar,
.dark-theme .hw-col-header,
.dark-theme .dp-table thead tr,
.dark-theme .dp-table tbody tr { background: var(--tde-surface-alt); }
.dark-theme .tde-section-title,
.dark-theme .dp-panel-title,
.dark-theme .dp-grid-info { color: var(--tde-text-muted); }
.dark-theme .nav-link,
.dark-theme .tde-nav-link { color: var(--tde-nav-link); }
.dark-theme .tde-nav-link.active { color: var(--tde-nav-link-active); background: var(--tde-nav-link-active-bg); }

/* ── User profile popover (dark) ── */
.dark-theme .tde-profile-popover { background: var(--tde-surface); box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4); }
.dark-theme .tde-profile-popover::before { background: var(--tde-surface); box-shadow: -2px -2px 4px rgba(0,0,0,.3); }
.dark-theme .tde-profile-popover-section { border-bottom-color: var(--tde-border); }
.dark-theme .tde-profile-popover-section-title,
.dark-theme .tde-profile-popover-row-label,
.dark-theme .tde-profile-popover-stat-label { color: var(--tde-text-muted); }
.dark-theme .tde-profile-popover-row { color: var(--tde-text); }
.dark-theme .tde-profile-popover-row .mud-icon-root { color: var(--tde-text-muted); }
.dark-theme .tde-profile-popover-row-value { color: var(--tde-text); }
.dark-theme .tde-profile-popover-row-value-highlight { color: #64b5f6; }
.dark-theme .tde-profile-popover-stat { background: var(--tde-surface-alt); }
.dark-theme .tde-profile-popover-footer { background: var(--tde-surface-alt); border-top-color: var(--tde-border); }
.dark-theme .tde-profile-popover-signout { background: var(--tde-surface); color: #ef9a9a; border-color: var(--tde-border); }
.dark-theme .tde-profile-popover-signout:hover { background: rgba(211,47,47,.18); border-color: #ef9a9a; }

/* Theme toggle placed inside the profile popover should follow the popover text color */
.tde-profile-popover .tde-theme-toggle-label { color: var(--tde-text-muted); }
.tde-profile-popover .tde-theme-toggle-track { background: rgba(0,0,0,.18); }
.dark-theme .tde-profile-popover .tde-theme-toggle-track { background: rgba(255,255,255,.2); }

/* ── Dark-theme interactive states ──
   The default hover/selected rules use near-white fills (#f5f5f5, #f9f9f9,
   #e3f2fd …) which wash out dark-mode text. Re-point them to subtle, readable
   tints so hovered rows stay legible instead of hiding the data beneath. */

/* Hover tints (subtle light overlay instead of near-white) */
.dark-theme .hw-col-item:hover,
.dark-theme .dp-table tbody tr:hover,
.dark-theme .dp-desc-item:hover { background: rgba(255, 255, 255, .06); color: var(--tde-text); }

/* Selected rows/items — keep the blue accent but darker + readable text */
.dark-theme .hw-col-item.selected,
.dark-theme .dp-table tbody tr.selected { background: rgba(25, 118, 210, .28); color: #e8f1fc; }
.dark-theme .dp-table tbody tr.selected:hover,
.dark-theme .hw-col-item.selected:hover { background: rgba(25, 118, 210, .38); }

/* Table cell text + header separators */
.dark-theme .dp-table th { color: var(--tde-text-muted); border-bottom-color: var(--tde-border); }
.dark-theme .dp-table tbody tr { border-bottom-color: var(--tde-border); }
.dark-theme .dp-table td,
.dark-theme .dp-col-engsn { color: var(--tde-text); }
.dark-theme .dp-col-timestamp,
.dark-theme .dp-col-notes { color: var(--tde-text-muted); }

/* Search / text inputs and date pickers */
.dark-theme .hw-col-search input,
.dark-theme .dp-grid-search,
.dark-theme .dp-desc-search,
.dark-theme .dp-date-input,
.dark-theme .hw-col-picker select,
.dark-theme .hw-col-picker,
.dark-theme .hw-col-search { background: var(--tde-surface-alt); border-color: var(--tde-border); color: var(--tde-text); }
.dark-theme .hw-col-search input,
.dark-theme .dp-grid-search input,
.dark-theme .dp-desc-search input { color: var(--tde-text); }
.dark-theme input::placeholder { color: #777; }

/* Footer surfaces and sub-panels that used hard-coded light fills */
.dark-theme .hw-col-header,
.dark-theme .dp-grid-toolbar,
.dark-theme .dp-table thead tr,
.dark-theme .hw-col-select-all { background: var(--tde-surface-alt); color: var(--tde-text); }
.dark-theme .hw-col-select-all { border-top-color: var(--tde-border); }
.dark-theme .hw-col-select-all:hover:not(:disabled) { background: rgba(25, 118, 210, .22); color: #e8f1fc; }
.dark-theme .hw-col-select-all:disabled { color: #666; }
.dark-theme .dp-btn-outline,
.dark-theme .dp-btn-nav.outline { background: var(--tde-surface); color: var(--tde-text); border-color: var(--tde-border); }
.dark-theme .dp-btn-outline:hover,
.dark-theme .dp-btn-nav.outline:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }

/* Section/panel dividers and muted labels */
.dark-theme .dp-panel-label,
.dark-theme .dp-grid-info,
.dark-theme .ctx-label,
.dark-theme .dp-status-filter-label { color: var(--tde-text-muted); }
.dark-theme .dp-profile-popover-section,
.dark-theme .tde-section-title { border-color: var(--tde-border); }

/* ── SelectParameters & FilterDatapoints left/center/right panels ──
   These keep hard-coded white fills; without overrides the inherited light
   text color sits on white and becomes invisible in dark mode. */
.dark-theme .param-list-section,
.dark-theme .sp-tree-panel,
.dark-theme .sp-available-panel,
.dark-theme .sp-selected-panel,
.dark-theme .operator-section { background: var(--tde-surface); border-color: var(--tde-border); color: var(--tde-text); }
.dark-theme .sp-tree-header,
.dark-theme .sp-available-header,
.dark-theme .sp-selected-header,
.dark-theme .sp-avail-toolbar,
.dark-theme .sp-section-label,
.dark-theme .param-search-box { background: var(--tde-surface-alt); border-color: var(--tde-border); }
.dark-theme .sp-tree-header,
.dark-theme .sp-avail-title,
.dark-theme .sp-sel-title,
.dark-theme .sp-param-name,
.dark-theme .param-item { color: var(--tde-text); }
.dark-theme .sp-avail-count,
.dark-theme .sp-param-desc,
.dark-theme .param-list-empty { color: var(--tde-text-muted); }

/* Search / input boxes inside those panels */
.dark-theme .param-search-box input,
.dark-theme .sp-avail-search,
.dark-theme .sp-avail-search input { background: var(--tde-surface-alt); border-color: var(--tde-border); color: var(--tde-text); }

/* Row hover / selected states (were near-white / light blue) */
.dark-theme .param-item:hover,
.dark-theme .sp-param-item:hover,
.dark-theme .sp-sel-item:hover { background: rgba(255, 255, 255, .06); }
.dark-theme .param-item.selected,
.dark-theme .sp-param-item.selected-item { background: rgba(25, 118, 210, .28); color: #e8f1fc; }
.dark-theme .sp-param-item { border-bottom-color: var(--tde-border); }
.dark-theme .sp-sel-item { border-bottom-color: var(--tde-border); }

/* Operator & transfer buttons */
.dark-theme .op-btn,
.dark-theme .sp-transfer-btn { background: var(--tde-surface); border-color: var(--tde-border); color: var(--tde-text); }
.dark-theme .op-btn:hover,
.dark-theme .sp-transfer-btn:hover { background: rgba(25, 118, 210, .22); border-color: var(--tde-primary); color: #e8f1fc; }

/* SelectParameters stats bar (footer) — hard-coded white fill hides text in dark mode */
.dark-theme .sp-stats-bar { background: var(--tde-surface); border-color: var(--tde-border); color: var(--tde-text);
                            box-shadow: 0 -1px 3px rgba(0, 0, 0, .4); }
.dark-theme .sp-stat-label,
.dark-theme .sp-stat-suffix { color: var(--tde-text-muted); }
.dark-theme .sp-stat-detail { color: #888; }
.dark-theme .sp-stat-matrix-badge { background: rgba(25, 118, 210, .25); color: #cfe3fb; }

/* Selected Parameters panel — item names / order / reorder footer */
.dark-theme .sp-sel-name { color: var(--tde-text); }
.dark-theme .sp-sel-order,
.dark-theme .sp-reorder-label { color: var(--tde-text-muted); }
.dark-theme .sp-sel-item { border-bottom-color: var(--tde-border); }
.dark-theme .sp-sel-item:hover,
.dark-theme .sp-sel-item.active-sel { background: rgba(25, 118, 210, .28); }
.dark-theme .sp-sel-item:hover .sp-sel-name,
.dark-theme .sp-sel-item.active-sel .sp-sel-name { color: #e8f1fc; }
.dark-theme .sp-reorder-buttons { background: var(--tde-surface-alt); border-top-color: var(--tde-border); }
.dark-theme .sp-reorder-btn { background: var(--tde-surface); border-color: var(--tde-border); color: var(--tde-text); }
.dark-theme .sp-reorder-btn:hover { background: rgba(25, 118, 210, .22); border-color: var(--tde-primary); color: #e8f1fc; }

/* Module selector chips (MudChip) — default/disabled chips wash out in dark mode */
.dark-theme .mud-chip.mud-chip-color-default { background-color: var(--tde-surface-alt); color: var(--tde-text); }
.dark-theme .mud-chip.mud-chip-color-default .mud-chip-content { color: var(--tde-text); }
.dark-theme .mud-chip.mud-disabled { opacity: .55; color: var(--tde-text-muted); cursor: not-allowed; }
.dark-theme .mud-chip.mud-disabled .mud-chip-content { color: var(--tde-text-muted); }

/* Parameter Groups tree (MudTreeView) — item text + expand/collapse arrows
   default to dark colors and disappear on the dark surface. */
.dark-theme .sp-tree-content .mud-treeview-item-content,
.dark-theme .sp-tree-content .mud-treeview-item-label { color: var(--tde-text); }
.dark-theme .sp-tree-content .mud-treeview-item-arrow .mud-icon-root,
.dark-theme .sp-tree-content .mud-treeview-item-expand-button .mud-icon-root { color: var(--tde-text-muted); }
.dark-theme .sp-tree-content .mud-treeview-item-content:hover { background-color: rgba(255, 255, 255, .06); }
.dark-theme .sp-tree-content .mud-treeview-item-content.mud-treeview-item-selected { background-color: rgba(25, 118, 210, .28); }

html, body { font-family: 'Roboto', sans-serif; margin: 0; background: var(--tde-bg); color: var(--tde-text);
             height: 100%; overflow: hidden; }

/* Loading splash shown until Blazor boots */
.tde-app-loading {
    height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px; color: #666;
}
.tde-app-loading .spinner {
    width: 36px; height: 36px;
    border: 4px solid #e0e0e0; border-top-color: var(--tde-primary);
    border-radius: 50%; animation: tde-spin .8s linear infinite;
}
@keyframes tde-spin { to { transform: rotate(360deg); } }

/* Blazor error banner — hidden globally.
   All user-facing errors are surfaced via MudDialog / ISnackbar; the default
   Blazor "An unhandled error has occurred. Reload" bar is redundant and can
   flash for framework-level noise even when we catch the exception ourselves.
   !important is required because Blazor's runtime sets an inline
   `display: block` when it detects an error. */
#blazor-error-ui {
    background: #b71c1c; color: #fff; display: none !important;
    padding: 0.7rem 1rem; position: fixed; left: 0; right: 0; bottom: 32px;
    z-index: 1000; box-shadow: 0 -1px 4px rgba(0,0,0,0.2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* Top navigation */
.tde-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.tde-top-nav { background: var(--tde-dark); color: #fff; height: 48px; padding: 0 20px; flex-shrink: 0; position: relative !important; }
.tde-brand-bar { width: 3px; height: 24px; background: var(--tde-accent); border-radius: 2px; }
.tde-env-badge { padding: 2px 10px; border-radius: 4px; font-size: 11px; font-weight: 500;
                 letter-spacing: .5px; background: rgba(76,175,80,.2); color: #4caf50; }
.tde-nav-link { padding: 6px 16px; border-radius: 4px; color: #bbb; text-decoration: none;
                font-size: 13px; font-weight: 500; letter-spacing: .5px; }
.tde-nav-link:hover:not(.disabled) { color: #fff; background: rgba(255,255,255,.1); }
.tde-nav-link.active { color: var(--tde-accent); background: rgba(255,179,0,.1); }
.tde-nav-link.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.tde-user-menu-backdrop { position: fixed; inset: 0; border: none; background: transparent; padding: 0; margin: 0; z-index: 1200; }
.tde-user-menu { position: relative; display: flex; align-items: center; gap: 8px; }
.tde-user-menu-trigger { display: flex; align-items: center; gap: 6px; background: transparent;
                         border: none; color: inherit; padding: 0; cursor: pointer; font: inherit; }
.tde-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--tde-accent);
                   display: flex; align-items: center; justify-content: center;
                    font-size: 12px; font-weight: 700; color: var(--tde-dark); transition: box-shadow .2s; }
.tde-user-avatar:hover { box-shadow: 0 0 0 2px rgba(255,179,0,.5); }
.tde-user-menu-name { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.tde-user-menu-display { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: #ccc; }
.tde-user-menu-auth-source { font-size: 10px; color: #888; }
.tde-user-menu-dropdown-icon { font-size: 18px; color: #888; transition: transform .2s; }
.tde-user-menu.open .tde-user-menu-dropdown-icon { transform: rotate(180deg); }
.tde-profile-popover { position: absolute; top: calc(100% + 10px); right: 0; width: 320px; z-index: 1250;
                       background: #fff; border-radius: 12px; overflow: hidden;
                       box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); }
.tde-profile-popover::before { content: ''; position: absolute; top: -6px; right: 18px;
                               width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
                               box-shadow: -2px -2px 4px rgba(0,0,0,.06); }
.tde-profile-popover-header { padding: 20px; background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
                              color: #fff; display: flex; gap: 14px; align-items: center; }
.tde-profile-popover-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--tde-accent);
                              display: flex; align-items: center; justify-content: center; flex-shrink: 0;
                              font-size: 18px; font-weight: 700; color: var(--tde-dark); }
.tde-profile-popover-identity { min-width: 0; }
.tde-profile-popover-name { font-size: 16px; font-weight: 500; }
.tde-profile-popover-email { font-size: 12px; color: #aaa; margin-top: 2px; word-break: break-all; }
.tde-profile-popover-auth-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
                                  font-size: 10px; font-weight: 600; color: #fff;
                                  background: rgba(243,229,245,.15); border: 1px solid rgba(225,190,231,.3);
                                  border-radius: 4px; padding: 2px 8px; letter-spacing: .3px; }
.tde-profile-popover-auth-badge .mud-icon-root { font-size: 12px; }
.tde-profile-popover-section { padding: 12px 20px; border-bottom: 1px solid #f0f0f0; }
.tde-profile-popover-section:last-of-type { border-bottom: none; }
.tde-profile-popover-section-title { font-size: 10px; font-weight: 600; color: #999; text-transform: uppercase;
                                     letter-spacing: .5px; margin-bottom: 8px; }
.tde-profile-popover-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; color: #555; }
.tde-profile-popover-row .mud-icon-root { font-size: 16px; color: #bbb; width: 20px; text-align: center; }
.tde-profile-popover-row-label { color: #999; min-width: 80px; font-size: 12px; }
.tde-profile-popover-row-value { color: #333; font-weight: 400; }
.tde-profile-popover-row-value-highlight { color: #1976d2; font-weight: 500; }
.tde-profile-popover-session-status { display: flex; align-items: center; gap: 6px; }
.tde-profile-popover-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf50;
                                  box-shadow: 0 0 4px rgba(76,175,80,.4); }
.tde-profile-popover-stats { display: flex; gap: 16px; }
.tde-profile-popover-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 12px;
                            background: #f8f9fa; border-radius: 8px; flex: 1; }
.tde-profile-popover-stat-value { font-size: 20px; font-weight: 700; color: #1976d2; }
.tde-profile-popover-stat-label { font-size: 10px; color: #999; margin-top: 2px; text-transform: uppercase; letter-spacing: .3px; }
.tde-profile-popover-footer { padding: 12px 20px; background: #fafafa; border-top: 1px solid #eee; display: flex; justify-content: flex-end; }
.tde-profile-popover-signout { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border: 1px solid #e0e0e0;
                               border-radius: 6px; background: #fff; color: #d32f2f; font-size: 13px; font-weight: 500;
                               cursor: pointer; transition: all .15s; }
.tde-profile-popover-signout:hover { background: #ffebee; border-color: #ef9a9a; }
.tde-profile-popover-signout .mud-icon-root { font-size: 16px; }

/* Status bar (footer) */
.tde-status-bar { height: 28px; flex-shrink: 0;
                  background: var(--tde-status-bg); color: #ccc; display: flex; align-items: center;
                  padding: 0 16px; font-size: 11px; gap: 14px; z-index: 200; }
.tde-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4caf50; }

/* Step indicator */
.tde-steps { display: flex; gap: 4px; user-select: none; margin: 8px 0px 6px 0px !important; flex-shrink: 0; }
.tde-step { display: flex; align-items: center; gap: 6px; padding: 6px 14px;
            border-radius: 16px; font-size: 12px; font-weight: 500; color: #999; background: #e8e8e8; }
.tde-step.active { background: var(--tde-primary); color: #fff; }
.tde-step.done { background: #43a047; color: #fff; }
.tde-step[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; }
/* Ensure upcoming/current steps visually appear readonly and do not respond to clicks */
.tde-step.upcoming { opacity: .9; background: #e8e8e8; color: #999; }
.tde-step .num { width: 20px; height: 20px; border-radius: 50%;
                 display: flex; align-items: center; justify-content: center;
                 font-size: 11px; font-weight: 700; background: rgba(0,0,0,.1); color: inherit; }
.tde-step.active .num { background: rgba(255,255,255,.25); }
.tde-step.done .num { background: rgba(255,255,255,.25); }
.tde-step-arrow { color: #ccc; font-size: 16px; padding: 0 2px; align-self: center; }

/* Section cards */
.tde-section { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
               padding: 8px 16px; margin-bottom: 6px; flex-shrink: 0; }
.tde-section-title { font-size: 13px; font-weight: 500; color: #666;
                     text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }

/* Cascading hardware columns
   Supports up to 10 slots that appear progressively (see HardwareSelection).
   Desktop: single row with horizontal scroll + snap.
   Tablet:  wrap into rows (3-up, then 2-up).
   Phone:   full-width stacked cards. */
.hw-columns { display: flex; gap: 6px; overflow-x: auto; align-items: stretch;
              padding-bottom: 4px; scroll-snap-type: x mandatory;
              scrollbar-width: thin; flex: 1; min-height: 0; }
.hw-columns::-webkit-scrollbar { height: 8px; }
.hw-columns::-webkit-scrollbar-thumb { background: #cfd8dc; border-radius: 4px; }
.hw-column { min-width: 120px; max-width: 260px; border: 1px solid #e0e0e0; border-radius: 6px;
             background: #fff; display: flex; flex-direction: column; flex: 1 1 0;
             transition: opacity .25s ease; scroll-snap-align: start; }
.hw-column.has-selection { border-color: var(--tde-primary);
                           box-shadow: 0 0 0 1px rgba(25,118,210,.15); }
.hw-col-header { display: flex; justify-content: space-between; align-items: center;
                 padding: 8px 10px; background: #fafafa; border-bottom: 1px solid #e0e0e0;
                 border-radius: 6px 6px 0 0; font-size: 12px; font-weight: 600; color: var(--tde-primary); }
.hw-col-count { font-size: 11px; color: #999; font-weight: 400; }
.hw-col-search { padding: 6px; border-bottom: 1px solid #f0f0f0; }
.hw-col-search input { width: 100%; padding: 4px 8px; border: 1px solid #e0e0e0;
                       border-radius: 4px; font-size: 12px; font-family: inherit; outline: none; }
.hw-col-search input:focus { border-color: var(--tde-primary); }
.hw-col-values { overflow-y: auto; flex: 1; min-height: 0; }
.hw-col-item { padding: 5px 10px; font-size: 12px; cursor: pointer; user-select: none;
               display: flex; align-items: center; gap: 6px; }
.hw-col-item:hover { background: #f5f5f5; }
.hw-col-item.selected { background: #e3f2fd; color: #1565c0; font-weight: 500; }
.hw-col-arrow { display: flex; align-items: center; color: #bbb; font-size: 18px;
                align-self: center; padding: 0 4px; flex-shrink: 0; }

/* Column-picker dropdown at the top of each slot (5-slot hardware grid) */
.hw-col-picker { padding: 6px; border-bottom: 1px solid #f0f0f0; background: #fff;
                 border-radius: 6px 6px 0 0; }
.hw-col-picker select { width: 100%; padding: 4px 8px; font-size: 12px;
                        border: 1px solid #ccc; border-radius: 4px; background: #fff;
                        font-family: inherit; outline: none; cursor: pointer; }
.hw-col-picker select:focus { border-color: var(--tde-primary);
                              box-shadow: 0 0 0 2px rgba(25,118,210,.15); }

/* Footer 'Select All' button on each slot */
.hw-col-select-all { width: 100%; padding: 6px 8px; font-size: 12px; font-weight: 500;
                     background: #fafafa; color: var(--tde-primary);
                     border: none; border-top: 1px solid #e0e0e0;
                     border-radius: 0 0 6px 6px; cursor: pointer;
                     font-family: inherit; text-decoration: underline; }
.hw-col-select-all:hover:not(:disabled) { background: #f0f7ff; }
.hw-col-select-all:disabled { color: #bbb; cursor: not-allowed; text-decoration: none; }

/* Status chips for datapoints */
.dp-status-chip { display: inline-block; padding: 1px 8px; margin: 1px 2px;
                  border-radius: 10px; font-size: 10px; font-weight: 600;
                  background: #e0e0e0; color: #555; }
.dp-status-chip.on { background: #e3f2fd; color: #1565c0; }

/* ─── Datapoint Selection page (mockup 02-P1-datapoint-selection) ─── */

/* Hardware context banner */
.ctx-banner { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
              border-left: 4px solid var(--tde-primary);
              padding: 8px 20px; margin-bottom: 8px; flex-shrink: 0;
              display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
              font-size: 13px; color: #555; }
.ctx-banner .material-icons { font-size: 16px; color: #90caf9; }
.ctx-item { display: flex; align-items: center; gap: 6px; }
.ctx-label { color: #999; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.ctx-value { font-weight: 500; color: #1565c0; }
.ctx-empty { color: #999; font-style: italic; }

/* Two-column layout: grid + side panel */
.dp-layout { display: flex; gap: 16px; align-items: stretch; flex: 1; min-height: 0; }
.dp-grid-section { flex: 1; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
                   overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dp-side-panel { width: 240px; display: flex; flex-direction: column; gap: 12px; flex-shrink: 0;
                 overflow-y: auto; min-height: 0; }

/* Grid toolbar */
.dp-grid-toolbar { display: flex; justify-content: space-between; align-items: center;
                   padding: 10px 16px; background: #fafafa; border-bottom: 1px solid #e0e0e0; }
.dp-grid-search { display: flex; align-items: center; border: 1px solid #e0e0e0;
                  border-radius: 4px; padding: 0 10px; background: #fff;
                  transition: border-color .2s; }
.dp-grid-search:focus-within { border-color: var(--tde-primary); }
.dp-grid-search .material-icons { font-size: 16px; color: #bbb; }
.dp-grid-search input { padding: 6px 8px; border: none; font-size: 13px; width: 240px;
                        font-family: inherit; outline: none; background: transparent; }
.dp-grid-search input::placeholder { color: #bbb; }
.dp-grid-info { font-size: 12px; display: flex; gap: 4px; align-items: center; }
.dp-grid-info .material-icons { font-size: 14px; }

/* Data table */
.dp-table-container { overflow-y: auto; flex: 1; min-height: 0; }
.dp-table { width: 100%; border-collapse: collapse; }
.dp-table thead tr { background: #fafafa; position: sticky; top: 0; z-index: 1; }
.dp-table th { padding: 10px 12px; font-size: 12px; font-weight: 600; color: #555;
               text-align: left; border-bottom: 2px solid #e0e0e0; text-transform: uppercase;
               user-select: none; }
.dp-table tbody tr { border-bottom: 1px solid #f0f0f0; cursor: pointer;
                     transition: background .15s; user-select: none; }
.dp-table tbody tr:hover { background: #f9f9f9; }
.dp-table tbody tr.selected { background: #e3f2fd; }
.dp-table tbody tr.selected:hover { background: #d0e8fc; }
.dp-table td { padding: 8px 12px; font-size: 13px; }
.dp-sort-header { appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer;
                  display: inline-flex; align-items: center; gap: 4px; padding: 0; font: inherit;
                  text-align: left; text-transform: inherit; }
.dp-sort-header:hover .dp-sort-icon { color: var(--tde-primary); }
.dp-sort-icon { color: #b0b0b0; font-size: 16px; line-height: 1; }
.dp-sort-icon.active { color: var(--tde-primary); }
.dp-col-select { width: 44px; text-align: center; }
.dp-col-row-num { width: 44px; text-align: center; font-size: 12px; color: #bbb; }
.dp-col-engsn { width: 180px; font-weight: 500; color: #333; }
.dp-col-timestamp { width: 200px; font-family: 'Roboto Mono', monospace; font-size: 12px; color: #555; }
.dp-col-notes { min-width: 240px; color: #444; }
.dp-col-status { width: 110px; }
.dp-table input[type="checkbox"] { accent-color: var(--tde-primary); width: 16px; height: 16px; cursor: pointer; }

/* Status badges */
.dp-status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px;
                   font-size: 10px; font-weight: 600; text-transform: uppercase;
                   letter-spacing: .3px; margin: 1px 2px; }
.dp-status-badge.buyoff   { background: #e8f5e9; color: #2e7d32; }
.dp-status-badge.heatrun  { background: #fff3e0; color: #e65100; }
.dp-status-badge.fullload { background: #e3f2fd; color: #1565c0; }
.dp-status-badge.noload   { background: #f3e5f5; color: #7b1fa2; }
.dp-status-badge.vib      { background: #fce4ec; color: #c62828; }

/* Side panel cards */
.dp-panel { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
            padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.dp-panel-title { font-size: 12px; font-weight: 600; color: #555; text-transform: uppercase;
                  letter-spacing: .3px; }
.dp-panel-label { font-size: 12px; font-weight: 500; color: #777; }
.dp-btn { border: none; border-radius: 4px; padding: 8px 0; font-size: 13px; font-weight: 500;
          cursor: pointer; width: 100%; font-family: inherit; transition: all .2s;
          display: flex; align-items: center; justify-content: center; gap: 6px; }
.dp-btn .material-icons { font-size: 16px; }
.dp-btn-primary { background: var(--tde-primary); color: #fff; }
.dp-btn-primary:hover { background: #1565c0; }
.dp-btn-outline { background: #fff; color: #555; border: 1px solid #ccc; }
.dp-btn-outline:hover { background: #f5f5f5; }
.dp-date-input { padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px;
                 width: 100%; font-family: inherit; transition: border-color .2s; }
.dp-date-input:focus { outline: none; border-color: var(--tde-primary);
                       box-shadow: 0 0 0 2px rgba(25,118,210,.1); }

/* DP Description multi-select list */
.dp-desc-search { display: flex; align-items: center; border: 1px solid #e0e0e0;
                  border-radius: 4px; padding: 0 8px; background: #fff;
                  transition: border-color .2s; }
.dp-desc-search:focus-within { border-color: var(--tde-primary); }
.dp-desc-search .material-icons { font-size: 16px; color: #bbb; }
.dp-desc-search input { width: 100%; padding: 6px 8px; border: none; font-size: 12px;
                        font-family: inherit; outline: none; background: transparent; }
.dp-desc-search input::placeholder { color: #bbb; }
.dp-desc-list { max-height: min(calc(10 * 32px + 16px), 100vh - 350px); overflow-y: auto; display: flex; flex-direction: column;
                gap: 6px; border: 1px solid #e0e0e0; border-radius: 4px; padding: 8px; }
.dp-desc-item { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.dp-desc-item input[type="checkbox"] { accent-color: var(--tde-primary); width: 14px; height: 14px; }
.dp-desc-empty { font-size: 12px; color: #999; font-style: italic; text-align: center; padding: 8px 0; }

/* Status filter bar (below grid) */
.dp-status-filter-bar { display: flex; align-items: center; gap: 14px; padding: 6px 20px;
                        background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
                        margin: 6px 0px; flex-wrap: wrap; flex-shrink: 0; }
.dp-status-filter-label { font-size: 12px; font-weight: 600; color: #555;
                          text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.dp-status-filter-item { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.dp-status-filter-item input[type="checkbox"] { accent-color: var(--tde-primary); width: 14px; height: 14px; }

/* Stats bar */
.dp-stats-bar { display: flex; gap: 24px; padding: 14px 20px; font-size: 14px; color: #555;
                background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
                margin-top: 16px; align-items: center; flex-wrap: wrap; }
.dp-stats-bar .dp-stat { display: flex; align-items: center; gap: 6px; }
.dp-stats-bar .dp-stat .material-icons { font-size: 18px; color: #90caf9; }
.dp-stats-bar strong { color: var(--tde-primary); font-size: 16px; }
.dp-stat-divider { width: 1px; height: 20px; background: #e0e0e0; }
.dp-stat-highlight { background: #e3f2fd; padding: 4px 12px; border-radius: 16px;
                     font-weight: 500; color: #1565c0; font-size: 13px; }

/* Actions row */
.dp-actions { display: flex; justify-content: space-between; align-items: center;
              margin-top: 8px; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.dp-actions-right { display: flex; gap: 10px; align-items: center; }
.dp-btn-nav { border: none; border-radius: 4px; padding: 10px 22px; font-size: 14px;
              font-weight: 500; cursor: pointer; font-family: inherit; transition: all .2s;
              display: inline-flex; align-items: center; gap: 8px; }
.dp-btn-nav.primary { background: var(--tde-primary); color: #fff; }
.dp-btn-nav.primary:hover:not(:disabled) { background: #1565c0; box-shadow: 0 2px 8px rgba(21,101,192,.25); }
.dp-btn-nav.primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.dp-btn-nav.outline { background: #fff; color: #555; border: 1px solid #ccc; }
.dp-btn-nav.outline:hover:not(:disabled) { background: #f5f5f5; }
.dp-btn-nav .material-icons { font-size: 18px; }

/* Empty state */
.dp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 60px 20px; color: #999; }
.dp-empty .material-icons { font-size: 48px; color: #e0e0e0; margin-bottom: 12px; }
.dp-empty h3 { font-size: 16px; font-weight: 400; margin-bottom: 6px; color: #666; }
.dp-empty p { font-size: 13px; }

/* Required tags (mockup-style labels) */
.req-tag { display: inline-block; font-size: 9px; font-weight: 600; color: var(--tde-primary);
           background: #e3f2fd; border: 1px solid #bbdefb; border-radius: 3px;
           padding: 1px 5px; margin-left: 6px; vertical-align: middle; letter-spacing: .3px; }
.req-tag.group { background: #fff3e0; color: #e65100; border-color: #ffe0b2; }

/* Fill remaining viewport between nav and status bar */
.tde-main { flex: 1; padding-bottom: 0 !important; min-height: 0; overflow: hidden; }
.tde-main .mud-container { padding: 6px 24px 8px !important; display: flex; flex-direction: column;
                           height: 100%; min-height: 0; overflow: hidden; }

/* Hardware columns section: fill remaining space in the page */
.hw-columns-section { flex: 1; display: flex; flex-direction: column; min-height: 320px; overflow: hidden;
                      margin-bottom: 0 !important; }

/* Scrollable middle section for Hardware page */
.hw-middle-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex;
                    flex-direction: column; scrollbar-width: thin; }
.hw-middle-scroll::-webkit-scrollbar { width: 6px; }
.hw-middle-scroll::-webkit-scrollbar-thumb { background: #cfd8dc; border-radius: 3px; }

/* Compact MudBlazor controls inside tde-section cards */
.tde-section .mud-radio-group { margin: 0 !important; }
.tde-section .mud-radio { padding: 2px 8px 2px 0 !important; }
.tde-section .mud-checkbox { margin: 0 !important; }
.tde-section .mud-input-control { margin: 0 !important; }

/* Hardware filter options layout */
.hw-filter-options-section { width: 100%; }
.hw-filter-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}
.hw-filter-group {
    min-width: 0;
    flex: 0 1 auto;
}
.hw-date-range-group {
    flex: 0 1 350px;
    min-width: 350px;
}
.hw-date-controls {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
}
.hw-date-control {
    display: flex;
    flex: 0 0 171px;
    min-width: 171px;
    flex-direction: column;
    gap: 3px;
    color: #666;
    font-size: 11px;
}
.hw-date-control input[type="date"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 7px 10px;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font: 14px 'Roboto', sans-serif;
}
.hw-date-control input[type="date"]:focus {
    outline: none;
    border-color: var(--tde-primary);
    box-shadow: 0 0 0 1px var(--tde-primary);
}
.hw-include-group {
    flex: 0 1 auto;
    margin-left: 0;
}
.hw-include-controls {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
@media (max-width: 960px) {
    .hw-filter-options {
        gap: 18px;
    }
    .hw-date-controls {
        flex-wrap: wrap;
    }
    .hw-include-group {
        margin-left: 0;
    }
}
@media (max-width: 600px) {
    .hw-filter-options {
        gap: 14px;
    }
    .hw-date-controls {
        flex-direction: column;
    }
    .hw-date-range-group {
        min-width: 100%;
    }
    .hw-date-control {
        width: 100%;
        min-width: 0;
    }
    .hw-include-controls {
        gap: 10px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYER
   Breakpoints mirror MudBlazor:
     xs <  600px  (phones)
     sm <  960px  (large phones / small tablets)
     md < 1280px  (tablets / small laptops)
     lg < 1920px  (desktops)
     xl ≥ 1920px  (large desktops)
   Mobile-first overrides progressively scale layout up.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --bp-sm: 600px;
    --bp-md: 960px;
    --bp-lg: 1280px;

    /* Fluid container padding (used by .tde-main) */
    --tde-pad-x: clamp(10px, 2.5vw, 24px);
}

/* Responsive typography (apply to MudText overrides). Falls back gracefully. */
.mud-typography-h5 { font-size: clamp(1.05rem, 1.4vw + .6rem, 1.5rem) !important; }
.mud-typography-h6 { font-size: clamp(.95rem, 1.1vw + .55rem, 1.25rem) !important; }
.mud-typography-body2 { font-size: clamp(.78rem, .25vw + .72rem, .875rem) !important; }

/* Make MudContainer padding responsive on small screens */
.tde-main .mud-container { padding-left: var(--tde-pad-x) !important;
                           padding-right: var(--tde-pad-x) !important; }

/* ─── MudBlazor dialog: fullscreen on phones ──────────────────────── */
@media (max-width: 600px) {
    .mud-dialog-container .mud-dialog {
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
    .mud-dialog-container .mud-dialog-content { padding: 12px !important; }
    .mud-dialog-container .mud-dialog-actions { padding: 8px 12px !important; flex-wrap: wrap; gap: 6px; }
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 1 — Shell (top nav, footer, step indicator)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .tde-top-nav { padding: 0 8px; }
    .tde-top-nav .mud-typography-h6 { font-size: 14px !important; }
    .tde-user-avatar { width: 28px; height: 28px; font-size: 11px; }
    .tde-user-menu-trigger { gap: 6px; }
    .tde-user-dropdown { right: -4px; width: min(280px, calc(100vw - 16px)); }

    /* Hide non-essential top-nav text on phones; keep avatar + menu */
    .tde-top-nav-userinfo { display: none !important; }
    .tde-user-menu-chevron { margin-left: -2px; }

    /* Status bar (footer): collapse to essentials */
    .tde-status-bar { padding: 0 8px; gap: 8px; font-size: 10px; }
    .tde-status-bar .tde-env-badge[data-secondary] { display: none; }
    .tde-status-bar .tde-status-date { display: none; }
}

/* Step indicator: wrap and shrink on small screens */
.tde-steps { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 600px) {
    .tde-steps { margin: 16px 0 12px 0 !important; gap: 4px; }
    .tde-step { padding: 4px 8px; font-size: 11px; }
    .tde-step .num { width: 16px; height: 16px; font-size: 10px; }
    .tde-step-arrow { font-size: 12px; padding: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 2 — Page reflow (layouts, headers, toolbars)
   ════════════════════════════════════════════════════════════════════ */

/* Datapoint Selection: flex layout fills viewport; side panel collapses under 960px. */
.dp-layout { display: flex; gap: 16px; align-items: stretch; flex: 1; min-height: 0; }
@media (max-width: 960px) {
    .dp-layout { flex-direction: column; gap: 12px; flex: unset; }
    .dp-side-panel { width: 100%; flex-direction: row; flex-wrap: wrap; overflow-y: visible; }
    .dp-side-panel > .dp-panel { flex: 1 1 240px; }
}
@media (max-width: 600px) {
    .dp-side-panel { flex-direction: column; }
    .dp-side-panel > .dp-panel { flex: 1 1 100%; }
}

/* Page header rows (Razor pages use inline flex with space-between). */
.tde-page-header { display: flex; justify-content: space-between; align-items: flex-end;
                   margin-bottom: 4px; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.tde-page-header > * { min-width: 0; }
@media (max-width: 600px) {
    .tde-page-header { margin-bottom: 10px; gap: 8px; }
}

/* Toolbar / search bar inside grid section: stack on phones */
@media (max-width: 600px) {
    .dp-grid-toolbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
    .dp-grid-search input { width: 100%; }
    .dp-grid-search { width: 100%; }
}

/* Actions row */
@media (max-width: 600px) {
    .dp-actions { flex-direction: column-reverse; align-items: stretch; }
    .dp-actions > .dp-btn-nav,
    .dp-actions-right { width: 100%; }
    .dp-actions-right { display: flex; }
    .dp-actions-right > .dp-btn-nav { flex: 1; justify-content: center; }
}

/* Drop fixed widths on Mud inputs that use inline min-width — scoped to
   the cases that overflow on small screens. */
@media (max-width: 600px) {
    .tde-responsive-select { min-width: 0 !important; width: 100% !important; }
}

/* Filter Datapoints — Rule rows: stack on phones */
.tde-rule-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
@media (max-width: 600px) {
    .tde-rule-row { gap: 6px; }
    .tde-rule-row > * { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }
}

/* ─── Filter Datapoints (mockup 03-filter-datapoints) ─────────────── */
.filter-layout { display: flex; gap: 16px; flex: 1; min-height: 0; align-items: stretch; }

.param-list-section {
    width: 220px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
    display: flex; flex-direction: column; flex-shrink: 0;
}
.param-search-box { padding: 8px; border-bottom: 1px solid #e0e0e0; }
.param-search-box input {
    width: 100%; padding: 8px 10px; border: 1px solid #e0e0e0; border-radius: 4px;
    font-size: 13px; font-family: 'Roboto', sans-serif; outline: none;
}
.param-search-box input:focus { border-color: var(--tde-primary); }
.param-list { flex: 1; overflow-y: auto; min-height: 0; }
.param-item {
    padding: 6px 12px; font-size: 13px; font-family: 'Roboto Mono', monospace;
    cursor: pointer; transition: background .15s; user-select: none;
}
.param-item:hover { background: #f5f5f5; }
.param-item.selected { background: #e3f2fd; color: #1565c0; font-weight: 500; }
.param-list-empty { padding: 12px; font-size: 12px; color: #999; font-style: italic; }

.operator-section { width: 250px; display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; }
.operator-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.op-btn {
    padding: 14px; border: 1px solid #e0e0e0; border-radius: 6px; background: #fff;
    font-size: 15px; font-weight: 500; cursor: pointer; transition: all .15s;
    font-family: 'Roboto', sans-serif; text-align: center;
}
.op-btn:hover { background: #f5f5f5; border-color: var(--tde-primary); }
.op-btn:active { background: #e3f2fd; }
.op-btn.logical { font-size: 13px; color: var(--tde-primary); font-weight: 600; }

.expression-section { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.expression-label {
    font-size: 12px; font-weight: 600; color: #555; text-transform: uppercase;
    letter-spacing: .3px;
}
.expression-area {
    padding: 14px; border: 1px solid #e0e0e0; border-radius: 8px;
    font-family: 'Roboto Mono', monospace; font-size: 14px; resize: vertical;
    height: 120px; min-height: 80px; color: #333; line-height: 1.6; outline: none;
    background: #fff;
}
.expression-area:focus { border-color: var(--tde-primary); }
.expression-area.invalid { border-color: #c62828; background: #fffafa; }
.expression-area.invalid:focus { border-color: #c62828; box-shadow: 0 0 0 2px rgba(198,40,40,.12); }
.expression-actions { display: flex; gap: 8px; justify-content: flex-end; }
.expression-examples {
    margin-top: 4px; padding: 10px 14px; background: #f9f9f9; border: 1px solid #eee;
    border-radius: 6px; font-size: 12px; color: #666;
}
.expression-examples-title { font-weight: 600; margin-bottom: 6px; color: #555; }
.expression-examples-title span { font-weight: 400; color: #888; text-transform: none; }
.expression-examples code {
    display: inline-block; font-family: 'Roboto Mono', monospace; font-size: 11px;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 4px;
    padding: 2px 8px; margin: 3px 6px 3px 0; color: #333; cursor: default;
    user-select: text;
}
.expression-examples code:hover { border-color: #e0e0e0; color: #333; }
.filter-result {
    padding: 10px 14px; background: #e8f5e9; border-radius: 6px;
    font-size: 14px; color: #2e7d32; display: flex; align-items: center; gap: 8px;
}
.filter-result.error { background: #ffebee; color: #c62828; }
.filter-result.info { background: #e3f2fd; color: #1565c0; }
.expression-validation-message { margin-top: -2px; }
.filter-result strong { font-weight: 600; }
.filter-result .material-icons { font-size: 18px; }

/* Responsive: stack sections on tablets/phones */
@media (max-width: 960px) {
    .filter-layout { flex-wrap: wrap; }
    .param-list-section { width: 100%; }
    .operator-section { width: 100%; }
    .expression-section { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 3 — Tables & hardware cascade
   ════════════════════════════════════════════════════════════════════ */

/* Allow the datapoint table to scroll horizontally before it reflows. */
.dp-table-container { overflow-x: auto; }
@media (max-width: 960px) {
    .dp-table-container { max-height: none; }
}

/* On phones, reflow the datapoint table rows into vertical cards.
   Uses data-label attributes on <td> elements for column headers. */
@media (max-width: 600px) {
    .dp-table thead { display: none; }
    .dp-table, .dp-table tbody, .dp-table tr, .dp-table td { display: block; width: 100%; }
    .dp-table tr {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin: 8px;
        padding: 8px 12px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    .dp-table tr.selected { border-color: var(--tde-primary); background: #e3f2fd; }
    .dp-table td {
        padding: 4px 0;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-size: 13px;
    }
    .dp-table td::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 600;
        color: #888;
        text-transform: uppercase;
        letter-spacing: .3px;
        flex-shrink: 0;
    }
    /* Hide row number on cards — redundant. */
    .dp-table td.dp-col-row-num { display: none; }
    /* Checkbox cell sits as a top-right action */
    .dp-table td.dp-col-select { justify-content: flex-end; padding-bottom: 6px; border-bottom: 1px dashed #eee; margin-bottom: 6px; }
    .dp-table td.dp-col-select::before { content: "SELECT"; }
    .dp-table td.dp-col-status { flex-wrap: wrap; }
}

/* Hardware cascade columns: stack vertically on phones */
@media (max-width: 1280px) {
    .hw-columns { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
    .hw-column { flex: 1 1 calc(33.333% - 6px); max-width: none; min-width: 0; }
    .hw-col-arrow { display: none; }
}
@media (max-width: 960px) {
    .hw-column { flex: 1 1 calc(50% - 6px); }
}
@media (max-width: 600px) {
    .hw-column { flex: 1 1 100%; }
    .hw-col-values { flex: 1; min-height: 0; }
}

/* Section card padding shrinks on phones */
@media (max-width: 600px) {
    .tde-section { padding: 10px 12px; }
    .ctx-banner { padding: 10px 12px; gap: 12px; }
}

/* Status filter bar / stats bar: smaller gaps on phones */
@media (max-width: 600px) {
    .dp-status-filter-bar,
    .dp-stats-bar { padding: 10px 12px; gap: 10px; font-size: 12px; }
    .dp-stats-bar strong { font-size: 14px; }
    .dp-stat-divider { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 4 — Typography, touch targets, polish
   ════════════════════════════════════════════════════════════════════ */

/* Enlarge interactive targets on touch viewports for accessibility (≥44px). */
@media (max-width: 600px), (pointer: coarse) {
    .dp-table input[type="checkbox"],
    .dp-desc-item input[type="checkbox"],
    .dp-status-filter-item input[type="checkbox"] {
        width: 20px; height: 20px;
    }
    .hw-col-item { padding: 10px 12px; font-size: 13px; }
    .hw-col-select-all { padding: 12px 8px; font-size: 13px; }
    .dp-btn,
    .dp-btn-nav { padding: 12px 16px; min-height: 44px; font-size: 14px; }
    .dp-date-input { padding: 12px 10px; font-size: 13px; min-height: 44px; }
    .hw-col-picker select { padding: 10px 8px; min-height: 40px; }
    .hw-col-search input { padding: 8px; min-height: 36px; }
    .dp-grid-search input { padding: 10px 8px; }
}

/* Tablet-only tweaks */
@media (min-width: 601px) and (max-width: 960px) {
    .dp-side-panel { width: 220px; }
}

/* ─── Laptop viewport height compaction ─── */
@media (max-height: 820px) {
    .tde-steps { margin: 4px 0 4px 0 !important; }
    .tde-step { padding: 4px 10px; font-size: 11px; }
    .tde-step .num { width: 17px; height: 17px; font-size: 10px; }
    .tde-page-header { margin-bottom: 2px; }
    .mud-typography-h5 { font-size: 1.05rem !important; }
    .mud-typography-body2 { font-size: .75rem !important; }
    .tde-section { padding: 5px 14px; margin-bottom: 4px; }
    .tde-section-title { font-size: 11px; margin-bottom: 2px; }
    .hw-col-header { padding: 5px 8px; font-size: 11px; }
    .hw-col-search { padding: 3px 6px; }
    .hw-col-search input { padding: 3px 6px; font-size: 11px; }
    .hw-col-item { padding: 3px 8px; font-size: 11px; }
    .hw-col-picker { padding: 4px; }
    .hw-col-picker select { padding: 3px 6px; font-size: 11px; }
    .hw-col-select-all { padding: 4px 6px; font-size: 11px; }
    .hw-columns-section { min-height: 240px; }
    .dp-actions { margin-top: 4px; }
    .ctx-banner { padding: 5px 16px; margin-bottom: 4px; font-size: 12px; }
    .dp-status-filter-bar { padding: 4px 16px; margin: 4px 0; }
    .dp-grid-toolbar { padding: 6px 12px; }
    /* Filter page compaction */
    .filter-layout { gap: 10px; }
    .param-list-section { width: 180px; }
    .param-search-box { padding: 5px; }
    .param-search-box input { padding: 5px 8px; font-size: 12px; }
    .param-item { padding: 4px 10px; font-size: 12px; }
    .operator-section { width: 200px; }
    .operator-grid { gap: 5px; }
    .op-btn { padding: 8px; font-size: 13px; }
    .op-btn.logical { font-size: 11px; }
    .expression-area { padding: 10px; font-size: 13px; min-height: 80px; }
    .expression-label { font-size: 11px; }
    .footer-info { padding: 6px 0 !important; font-size: 12px !important; }
    /* Select Parameters page compaction */
    .sp-tree-panel { width: 200px; }
    .sp-tree-header { padding: 8px 12px; font-size: 12px; }
    .sp-available-header { padding: 6px 12px; }
    .sp-avail-title { font-size: 12px; }
    .sp-avail-toolbar { padding: 5px 12px; }
    .sp-param-item { padding: 4px 12px; font-size: 12px; }
    .sp-section-label { padding: 6px 12px 3px; font-size: 10px; }
    .sp-selected-header { padding: 6px 12px; }
    .sp-sel-item { padding: 4px 10px; font-size: 12px; }
    .sp-reorder-buttons { padding: 6px 12px; }
    .sp-reorder-btn { width: 28px; height: 26px; }
    .sp-transfer-btn { width: 34px; height: 30px; }
    .sp-selected-panel { width: 260px; }
    .dp-stats-bar { padding: 8px 14px; margin-top: 8px; font-size: 12px; }
}

/* Utility: visually hide on small viewports (mobile-friendly fallback) */
.tde-hide-xs { }
@media (max-width: 600px) { .tde-hide-xs { display: none !important; } }
.tde-hide-sm { }
@media (max-width: 960px) { .tde-hide-sm { display: none !important; } }

/* Trend chart dialog: stack and shrink on phones */
@media (max-width: 600px) {
    .tde-trend-paramlist {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        max-height: 30vh !important;
    }
    .tde-trend-canvas {
        flex: 1 1 100% !important;
        height: 45vh !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   SELECT PARAMETERS PAGE (P2.1) — mockup 03-P2-parameter-selection
   ════════════════════════════════════════════════════════════════════ */
.sp-layout { display: flex; gap: 0; flex: 1; min-height: 0; }

/* ─── Tree panel (left) ─── */
.sp-tree-panel {
    width: 260px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px 0 0 8px;
    display: flex; flex-direction: column; flex-shrink: 0;
}
.sp-tree-header {
    padding: 12px 16px; border-bottom: 1px solid #e0e0e0; background: #fafafa;
    font-size: 13px; font-weight: 600; color: #555; display: flex; align-items: center; gap: 8px;
    border-radius: 8px 0 0 0;
}
.sp-tree-content { flex: 1; overflow-y: auto; padding: 8px 0; }

/* ─── Available panel (center) ─── */
.sp-available-panel {
    flex: 1; background: #fff; border: 1px solid #e0e0e0; border-left: none;
    display: flex; flex-direction: column; min-width: 280px;
}
.sp-available-header {
    padding: 10px 16px; border-bottom: 1px solid #e0e0e0; background: #fafafa;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sp-avail-title { font-size: 13px; font-weight: 600; color: #555; white-space: nowrap; }
.sp-avail-count { font-size: 12px; color: #999; }
.sp-avail-search {
    display: flex; align-items: center; border: 1px solid #e0e0e0; border-radius: 4px;
    padding: 0 10px; background: #fff; flex: 1; max-width: 280px; transition: border-color .2s;
}
.sp-avail-search:focus-within { border-color: var(--tde-primary); }
.sp-avail-search input {
    padding: 6px 8px; border: none; font-size: 13px; width: 100%;
    font-family: 'Roboto', sans-serif; outline: none; background: transparent;
}
.sp-avail-search input::placeholder { color: #bbb; }

.sp-avail-toolbar {
    padding: 8px 16px; border-bottom: 1px solid #f0f0f0;
    display: flex; align-items: center; gap: 12px; background: #fdfdfd;
}

.sp-section-label {
    font-size: 11px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: .3px;
    padding: 8px 16px 4px; background: #fff;
}
.sp-section-label.sp-header-section { border-top: 1px solid #e0e0e0; margin-top: 4px; color: #e65100; }

.sp-param-list { flex: 1; overflow-y: auto; }
.sp-param-item {
    display: flex; align-items: center; gap: 10px; padding: 6px 16px;
    font-size: 13px; transition: background .15s; cursor: pointer; border-bottom: 1px solid #fafafa;
    user-select: none; -webkit-user-select: none;
}
.sp-param-item:hover { background: #f5f5f5; }
.sp-param-item.selected-item { background: #e3f2fd; }
.sp-param-name { flex: 1; font-weight: 400; color: #333; }
.sp-param-desc { font-size: 11px; color: #999; max-width: 200px; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.sp-header-badge {
    font-size: 9px; font-weight: 600; background: #fff3e0; color: #e65100;
    border: 1px solid #ffe0b2; padding: 1px 5px; border-radius: 3px; white-space: nowrap;
}

/* ─── Transfer buttons ─── */
.sp-transfer-buttons {
    display: flex; flex-direction: column; gap: 8px; padding: 16px 8px;
    justify-content: center; align-items: center;
}
.sp-transfer-btn {
    width: 40px; height: 36px; border: 1px solid #ccc; border-radius: 4px;
    background: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #666; transition: all .2s; font-size: 0;
}
.sp-transfer-btn:hover { background: #e3f2fd; border-color: var(--tde-primary); color: var(--tde-primary); }
.sp-transfer-btn:active { background: #bbdefb; }
.sp-transfer-btn .material-icons { font-size: 20px; }

/* ─── Selected panel (right) ─── */
.sp-selected-panel {
    width: 320px; background: #fff; border: 1px solid #e0e0e0; border-radius: 0 8px 8px 0;
    display: flex; flex-direction: column; flex-shrink: 0;
}
.sp-selected-header {
    padding: 10px 16px; border-bottom: 1px solid #e0e0e0; background: #fafafa;
    display: flex; align-items: center; gap: 12px; border-radius: 0 8px 0 0;
}
.sp-sel-title { font-size: 13px; font-weight: 600; color: #555; white-space: nowrap; }
.sp-sel-count {
    font-size: 11px; font-weight: 600; background: var(--tde-primary); color: #fff;
    padding: 2px 8px; border-radius: 10px;
}
.sp-selected-list { flex: 1; overflow-y: auto; }
.sp-sel-item {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px;
    font-size: 13px; border-bottom: 1px solid #f5f5f5; transition: background .15s; cursor: default;
}
.sp-sel-item:hover { background: #f9f9f9; }
.sp-sel-item.active-sel { background: #e3f2fd; }
.sp-sel-order { width: 24px; text-align: center; font-size: 11px; color: #bbb; font-weight: 500; }
.sp-sel-name { flex: 1; color: #333; display: flex; align-items: center; gap: 6px; }
.sp-sel-remove {
    font-size: 16px; color: #ccc; cursor: pointer; transition: color .15s;
    display: flex; align-items: center;
}
.sp-sel-remove:hover { color: #ef5350; }
.sp-sel-remove .material-icons { font-size: 16px; }

.sp-reorder-buttons {
    display: flex; gap: 6px; padding: 10px 16px; border-top: 1px solid #e0e0e0;
    background: #fafafa; align-items: center;
}
.sp-reorder-btn {
    border: 1px solid #ccc; border-radius: 4px; background: #fff;
    width: 32px; height: 30px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #666; transition: all .15s;
}
.sp-reorder-btn:hover { background: #e3f2fd; color: var(--tde-primary); border-color: var(--tde-primary); }
.sp-reorder-btn .material-icons { font-size: 18px; }
.sp-reorder-label { font-size: 11px; color: #999; margin-left: auto; }

/* ─── SelectParameters Stats Bar ─── */
/* CSS grid guarantees the three stats always sit on one row and truncate their
   own detail text before spilling into the next cell. */
.sp-stats-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 8px 16px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e0e7ef;
    border-radius: 8px;
    font-size: 13px;
    color: #444;
    position: relative;
    z-index: 5;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}
.sp-stat-item { 
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
.sp-stat-item:first-child { padding-left: 0;  }
.sp-stat-icon { font-size: 18px; color: #90caf9; flex-shrink: 0; }
.sp-stat-label { color: #555; white-space: nowrap; flex-shrink: 0; }
.sp-stat-value { color: var(--tde-primary); font-size: 15px; white-space: nowrap; flex-shrink: 0; font-weight: 600; }
.sp-stat-suffix { color: #555; white-space: nowrap; flex-shrink: 0; }
.sp-stat-detail {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.sp-stat-divider { display: none;  }
.sp-stat-matrix-badge {
    background: #e8f0fe;
    color: #1a56db;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ─── req-tag green variant ─── */
.req-tag.green { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }

/* ─── Responsive: stack on tablet/phone ─── */
@media (max-width: 1280px) {
    /* Keep the layout as a flex column at narrow widths so panels retain bounded
       heights and their inner content scrolls — otherwise tree items overflow
       past the layout and visually collide with the stats bar below. */
    .sp-layout {
        flex-wrap: wrap;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    .sp-tree-panel { width: 100%; border-radius: 8px; max-height: 200px; flex-shrink: 0; overflow: hidden; }
    .sp-available-panel { border-left: 1px solid #e0e0e0; border-radius: 8px; min-height: 240px; flex: 1 1 auto; min-width: 0; }
    .sp-selected-panel { width: 100%; border-radius: 8px; min-height: 180px; max-height: 260px; flex-shrink: 0; }
    .sp-transfer-buttons { flex-direction: row; padding: 8px 16px; }

    /* Drop the parenthetical detail so the three primary counters comfortably fit
       one row at split-screen widths. The full breakdown is still on the tooltip. */
    .sp-stat-detail { display: none; }
    .sp-stats-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); padding: 8px 12px; }
}

@media (max-width: 900px) {
    .sp-stats-bar { font-size: 12px; gap: 4px 10px; padding: 8px 10px; }
    .sp-stat-value { font-size: 14px; }
    .sp-stat-matrix-badge { padding: 2px 8px; font-size: 11px; }
}

@media (max-width: 600px) {
    .sp-available-header { flex-direction: column; align-items: stretch; }
    .sp-avail-search { max-width: 100%; }

    /* Below phone width, drop the icon so labels + values still fit on one row. */
    .sp-stats-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 8px; }
    .sp-stat-icon { display: none; }
    .sp-stat-suffix { display: none; }
}

/* ─── Theme toggle switch (checkbox styled as a sliding toggle) ─── */
.tde-theme-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
                    user-select: none; margin-right: 8px; }
.tde-theme-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.tde-theme-toggle-track { position: relative; width: 40px; height: 22px; border-radius: 11px;
                          background: rgba(255,255,255,.25); transition: background .2s;
                          flex-shrink: 0; }
.tde-theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
                          border-radius: 50%; background: #fff; transition: transform .2s;
                          display: flex; align-items: center; justify-content: center;
                          font-size: 12px; line-height: 1; }
.tde-theme-toggle input:checked + .tde-theme-toggle-track { background: var(--tde-accent); }
.tde-theme-toggle input:checked + .tde-theme-toggle-track .tde-theme-toggle-thumb { transform: translateX(18px); }
.tde-theme-toggle input:focus-visible + .tde-theme-toggle-track { box-shadow: 0 0 0 2px rgba(255,179,0,.6); }
.tde-theme-toggle-label { font-size: 11px; color: #ccc; letter-spacing: .3px; }

@media (max-width: 600px) {
    .tde-theme-toggle-label { display: none; }
}