/* =============================================================================
 * PureLink PT-PSW-21HC-KVM-V2 - REDESIGN OVERRIDE LAYER
 * -----------------------------------------------------------------------------
 * - Match login.html design prototype (PT-PSW-21HC-KVM WebGUI standalone)
 * - Loaded AFTER css/style.css; overrides only, no base CSS edits
 * - Color tokens: runtime via app.js block; static fallback here (no-flash)
 * - Typography + component polish
 * Sections:
 *   1. Barlow @font-face fallback
 *   2. Typography tokens
 *   3. Color palette (light/dark)
 *   4-12. Base, cards, buttons, sidebar, login, scrollbars
 *   13. Console dock
 * ========================================================================== */

/* ---------- 1. Barlow @font-face fallback ------------------ */
/* CDN loads all weights; local TTF offline fallback. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Barlow'), url('../font/Barlow-Regular.ttf') format('truetype');
}

/* ---------- 2. Typography tokens -------------- */
:root {
  --font-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: var(--font-sans);

  /* Font weights */
  --fw-light: 300;  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Type scale (px) */
  --fs-9: 9px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-20: 20px; --fs-26: 26px; --fs-34: 34px;

  /* Border radii */
  --r: 12px; --rs: 8px; --r-pill: 20px;

  /* Layout constants */
  --header-h: 48px; --sidebar-w: 240px;

  /* Motion easing */
  --ease: .15s ease; --ease-toggle: .2s ease;
}

/* Keyframes: fadeUp, slideIn, blink */
@keyframes pl-fadeUp  { from { opacity: 0; transform: translateY(8px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes pl-slideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pl-blink   { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ---------- 3. Color palette ------------------ */
/* Cascade:
 * Palette: apps.purelink.de — neutral gray (HSL 0 0% 8/10/18%) + blue #005ae5
 */

/* === DARK (default) === */
html:not([data-theme="light"]) {
  /* Semantic tokens — apps.purelink.de app theme (slate dark, aus injizierter
     Theme-Funktion der Control-Apps: bg #0b1120 / card #151d2e / border weiß-alpha) */
  --bg: #0b1120 !important;      --bg-s: #1e293b !important; --bg-m: #334155 !important; --bg-d: #475569 !important;
  --card: #151d2e !important;    --border: rgba(255,255,255,.08) !important; --border-s: rgba(255,255,255,.14) !important;
  --card-border: rgba(255,255,255,.1) !important;
  --text: #f1f5f9 !important;    --text2: #94a3b8 !important; --text3: #94a3b8 !important;
  --green: #10b981 !important;   --gbg: rgba(16,185,129,.15) !important;
  --yellow: #f59e0b !important;  --ybg: rgba(245,158,11,.15) !important;
  --red: #ef4444 !important;     --rbg: rgba(239,68,68,.15) !important;
  --blue: #818cf8 !important;    --bbg: rgba(129,140,248,.15) !important;
  --btn-ghost-bg: rgba(255,255,255,.06) !important; --btn-ghost-color: #f1f5f9 !important;
  --primary: #005ae5;
  --accent: var(--primary); --accent2: color-mix(in srgb, var(--primary) 82%, #000);
  --accent-text: #fff; --ring: var(--primary);
  /* Legacy aliases */
  --dark: #0b1120 !important;    --light: #f1f5f9 !important; --white: #f1f5f9 !important;
  --gray: rgba(255,255,255,.08) !important; --light-gray: #94a3b8 !important; --light-left-gray: #94a3b8 !important;
  --muted: #94a3b8 !important;
  --secondary2: #151d2e !important; --input-co: #1e293b !important; --card-bg: #151d2e !important;
  --btn-box: #334155 !important; --btn-box2: #1e293b !important; --btn-input: #1e293b !important; --btn-box3: #e5e5e5 !important;
  --sidebar: #0b1120 !important; --sidebar-surface: #0b1120 !important;
  --grayuser: #334155 !important; --video_res: #94a3b8 !important; --titlelog: #f1f5f9 !important;
  --background: #0b1120 !important; --foreground: #f1f5f9 !important;
  --border-ref: rgba(255,255,255,.08) !important; --muted-fg: #94a3b8 !important; --control-bg: #1e293b !important;
  --success: #10b981 !important; --warning: #f59e0b !important; --danger: #ef4444 !important;
  --shadow: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2) !important;
  --shadow-btn: 0 1px 3px rgba(0,0,0,.2) !important;
  /* Login modal (dark) — Control-Apps slate */
  --login-surface: #0b1120 !important; --login-card: #151d2e !important; --login-form-bg: #151d2e !important;
  --login-card-border: rgba(255,255,255,.08) !important; --login-label: #94a3b8 !important;
  --login-control-bg: #1e293b !important; --login-control-border: rgba(255,255,255,.14) !important; --login-fg: #f1f5f9 !important;
}

/* === LIGHT ===================================== */
html[data-theme="light"] {
  /* apps.purelink.de app theme (light, Default der Vorgabe-Apps):
     bg/card #ffffff, Flächen #f8fafc/#f1f5f9, Border #e2e8f0 */
  --bg: #ffffff !important;      --bg-s: #f8fafc !important; --bg-m: #f1f5f9 !important; --bg-d: #e2e8f0 !important;
  --card: #ffffff !important;    --border: #e2e8f0 !important; --border-s: #cbd5e1 !important; --card-border: #e2e8f0 !important;
  --text: #0f172a !important;    --text2: #94a3b8 !important; --text3: #64748b !important;
  --green: #10b981 !important;   --gbg: #ecfdf5 !important;
  --yellow: #f59e0b !important;  --ybg: #fffbeb !important;
  --red: #ef4444 !important;     --rbg: #fef2f2 !important;
  --blue: #3b82f6 !important;    --bbg: #eff6ff !important;
  --btn-ghost-bg: rgba(0,0,0,.06) !important; --btn-ghost-color: #334155 !important;
  --primary: #005ae5;
  --accent: var(--primary); --accent2: color-mix(in srgb, var(--primary) 82%, #000);
  --accent-text: #fff; --ring: var(--primary);
  --dark: #ffffff !important;    --light: #0f172a !important; --white: #0f172a !important;
  --gray: #e2e8f0 !important;    --light-gray: #94a3b8 !important; --light-left-gray: #94a3b8 !important;
  --muted: #94a3b8 !important;
  --secondary2: #ffffff !important; --input-co: #ffffff !important; --card-bg: #ffffff !important;
  --btn-box: #f1f5f9 !important; --btn-box2: #f8fafc !important; --btn-input: #f8fafc !important; --btn-box3: #cbd5e1 !important;
  --sidebar: #ffffff !important; --sidebar-surface: #ffffff !important;
  --grayuser: #f1f5f9 !important; --video_res: #64748b !important; --titlelog: #0f172a !important;
  --background: #ffffff !important; --foreground: #0f172a !important;
  --border-ref: #e2e8f0 !important; --muted-fg: #94a3b8 !important; --control-bg: #f8fafc !important;
  --success: #10b981 !important; --warning: #f59e0b !important; --danger: #ef4444 !important;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06) !important;
  --shadow-btn: 0 1px 2px rgba(0,0,0,.08) !important;
  --login-surface: #ffffff !important; --login-card: #ffffff !important; --login-form-bg: #ffffff !important;
  --login-card-border: #e2e8f0 !important; --login-label: #94a3b8 !important;
  --login-control-bg: #f8fafc !important; --login-control-border: #cbd5e1 !important; --login-fg: #0f172a !important;
}

/* ---------- 4. Base / text rendering ------------------------------------- */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Technische Werte (IP, MAC, Firmware …) — ebenfalls Barlow, tabular-nums */
.ip_addr_top, .ip_das, .ip_infor, .sm_das, .sm_infor, .gw_das, .gw_infor,
.mac_dash, .mac_infor, .mcu_fw_top, .mcu_fw_infor, .gui_fw_top, .gui_fw_infor,
.telnetport_info, .user_res, .resdata, .res2data, .output_resdata,
.temp_data, .temp_infor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Table header labels: uppercase + letter-spacing */
.title_tab div, .routing-box.title_box > div {
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 11px;
  font-weight: 600;
}

/* ---------- 5. Cards ------------------------------------------------------ */
.dashboard-card,
.card-output-settings,
.card-video-routing,
.dashboard-card-box {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
/* Card header typography */
.title_size { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: 0; }
.login-subtitle { color: var(--text3); }

/* ---------- 6. Status pills -------------------------------------- */
/* Pill: radius 20px, tinted bg + colored text */
.online_box > div,
.network_action.user_action,
.power_action.user_action {
  border-radius: var(--r-pill);
  font-weight: 600;
}

/* ---------- 7. Buttons ----------------------------------------------------- */
.btn, .btn-box, .btn-primary, .login-btn {
  border-radius: var(--rs);
  font-weight: 600;
  font-family: var(--font-sans);
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.btn-primary, .login-btn {
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
}
.btn-primary:hover, .login-btn:hover { background: var(--accent2); border-color: var(--accent2); }

/* ---------- 8. Inputs / selects ------------------------------------------- */
.form-input, .login_input, .input_name, .output_name,
select.form-input, select.edid_input, .edid_input {
  border-radius: var(--rs);
  border: 1px solid var(--border-s);
  background: var(--bg-s);
  color: var(--text);
  font-family: var(--font-sans);
}
.form-input:focus, select.form-input:focus, .edid_input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 90, 229, .30);                    /* Fallback */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Mono inputs for technical values */
.input_name, .output_name { font-family: var(--font-sans); }

/* Global select styling - Video, EDID, Network, CEC; consistent border/bg/radius */
.content-container select,
.login-container select {
  border-radius: var(--rs);
  border: 1px solid var(--border-s);
  background: var(--bg-s);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 12px;
}
.content-container select:focus { outline: none; border-color: var(--accent); }

/* ---------- 9. Tables / routing boxes ----------------------------------- */
.routing-box.title_box {
  background: var(--bg-s);
}
.routing-box { border-color: var(--border); }

/* ---------- 10. Sidebar and header ------------------------------------------ */
.sidebar, .phone_sidebar { border-right: 1px solid var(--border); }
.top-header { background: var(--card); border-bottom: 1px solid var(--border); }
/* Active nav item: accent tint */
.nav-link.active {
  background: rgba(0, 90, 229, .14);                              /* Fallback */
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.nav-divider .divider-text {
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
}

/* ---------- 11. Login modal ----------------------------------------------- */
.login-container { border-radius: var(--r) !important; box-shadow: var(--shadow-pop) !important; }

/* ---------- 11b. Dashboard KPI row layout -------------- */
/* auto-fit minmax(176px) - all KPIs in first row; beats legacy minmax(200px) */
#dashboard-tab .dashboard-grid.row-1 {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}
#dashboard-tab .dashboard-grid.row-1 > .dashboard-card-box {
  height: auto !important;
  min-height: 92px !important;
  padding: 16px 20px !important;
  justify-content: flex-start !important;
}
/* KPI title: 12px/500 muted; value below */
#dashboard-tab .dashboard-grid.row-1 .dashboard-title,
#dashboard-tab .dashboard-grid.row-1 .card-title.dashboard-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 10px !important;
}
/* KPI status as tinted pills */
#dashboard-tab .dashboard-grid.row-1 .user_action,
#dashboard-tab .dashboard-grid.row-1 .user_inactive,
#dashboard-tab .dashboard-grid.row-1 .network_action,
#dashboard-tab .dashboard-grid.row-1 .offline_action {
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 12px; font-weight: 600;
}

/* ---------- 11c. CEC remote/grid toggle + grid --------- */
.cec-mode-switch {
  display: inline-flex;
  border: 1px solid var(--border-s);
  border-radius: var(--rs);
  overflow: hidden;
  flex-shrink: 0;
}
.cec-mode-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--text2);
  font: 600 12px var(--font-sans);
  cursor: pointer;
}
.cec-mode-btn.active { background: var(--accent); color: #fff; }
/* CEC view visibility; beats #cec-tab .rs232_box display:grid!important */
#cec-tab .cec-view.cec-hidden,
.cec-view.cec-hidden { display: none !important; }
.cec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cec-grid.cec-grid-out { grid-template-columns: repeat(3, 1fr); }
.cec-grid-btn {
  padding: 9px 8px;
  border: 1px solid var(--border-s);
  border-radius: var(--rs);
  background: var(--bg-s);
  color: var(--text);
  font: 600 12px var(--font-sans);
  cursor: pointer;
  text-transform: capitalize;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.cec-grid-btn:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 760px) {
  .cec-grid { grid-template-columns: repeat(3, 1fr); }
  .cec-grid.cec-grid-out { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
 * 11d. Template design primitives (Dashboard, Video, Settings)
 * Shapes/sizes from design template.
 * ========================================================================== */

/* Page head per screen; compact bottom margin;
 * next sibling margin-top:0 avoids collapse gap.
 *  */
.pl-page-head { margin-bottom: 12px; }
/* Specificity 1,2,0 + later source beats #tab .dashboard-grid,
 * first element after header has no extra top margin. */
#main-interface .tab-content > .pl-page-head + * { margin-top: 2px !important; }
.pl-page-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 2px; line-height: 1.2; }
.pl-page-sub { font-size: 13px; color: var(--text3); }
@media (max-width: 1024px) { .pl-page-head { margin-bottom: 10px; } }

/* Two-column grid 1fr 1fr; #dashboard-tab prefix beats legacy rule */
#dashboard-tab .pl-dash-2col,
.pl-dash-2col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; align-items: start !important; }
@media (max-width: 900px) {
  #dashboard-tab .pl-dash-2col,
  .pl-dash-2col { grid-template-columns: 1fr !important; }
}
/* Three-column grid: Display Power | Black Screen | Front Panel */
#dashboard-tab .pl-dash-3col,
.pl-dash-3col { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; align-items: start !important; }
@media (max-width: 900px) {
  #dashboard-tab .pl-dash-3col,
  .pl-dash-3col { grid-template-columns: 1fr !important; }
}
/* Active front-panel button state on dashboard */
.pl-dash-panel-unlock.front_selectactive,
.pl-dash-panel-lock.front_selectactive { background: var(--accent) !important; color: #fff !important; }

/* Quick-switch card grows with Sends/toggle rows (legacy height:156px clipped) */
#dashboard-tab .dashboard-quick-card { height: auto !important; min-height: 0 !important; }

/* Sends row + cmd chip */
.pl-sends-row { display: flex; align-items: center; gap: 8px; margin: 14px 18px 0; }
.pl-sends-label { font-size: 12px; color: var(--text2); }
.pl-cmdcode {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--accent);
  background: var(--bbg); border: 1px solid transparent;
  border-radius: 6px; padding: 2px 8px;
}

/* Toggle switch (pill) */
.pl-toggle {
  width: 44px; height: 24px; flex-shrink: 0; padding: 0;
  border-radius: var(--r-pill); border: 1px solid var(--border-s);
  background: var(--bg-d); position: relative; cursor: pointer;
  transition: background var(--ease-toggle), border-color var(--ease-toggle);
}
.pl-toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: left var(--ease-toggle);
}
.pl-toggle[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.pl-toggle[aria-checked="true"] .pl-toggle-knob { left: 22px; }

/* Labeled toggle row with divider */
.pl-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 14px 18px 4px; padding-top: 12px; border-top: 1px solid var(--border);
}
.pl-row-title { font-size: 13px; font-weight: 600; color: var(--text); }
.pl-row-sub { font-size: 11px; color: var(--text3); }

/* Key/value list (Device Information, etc.) */
.pl-di-body { padding: 6px 18px 14px; }
.pl-di-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pl-di-row:last-child { border-bottom: none; }
.pl-di-k { font-size: 12px; color: var(--text2); }
.pl-di-v { font-size: 13px; font-weight: 600; color: var(--text); }
.pl-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Template button variants */
.pl-power-actions { display: flex; gap: 12px; padding: 14px 18px; flex-wrap: wrap; }
.pl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--rs);
  font: 600 13px var(--font-sans); cursor: pointer;
  border: 1px solid transparent; transition: background var(--ease), border-color var(--ease), color var(--ease), filter var(--ease);
}
.pl-btn-primary { background: var(--accent); color: #fff; }
.pl-btn-success { background: var(--green); color: #fff; }
.pl-btn-danger  { background: var(--red);   color: #fff; }
.pl-btn-warning { background: var(--yellow); color: #151d2e; }
.pl-btn-primary:hover, .pl-btn-success:hover, .pl-btn-danger:hover, .pl-btn-warning:hover { filter: brightness(1.08); }
.pl-btn-outline { background: transparent; border-color: var(--border-s); color: var(--text); }
.pl-btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.pl-btn-ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-color); }
.pl-btn-ghost:hover { filter: brightness(1.1); }

/* Options select for new areas */
.pl-select {
  padding: 8px 12px; border-radius: var(--rs);
  border: 1px solid var(--border-s); background: var(--bg-s); color: var(--text);
  font: 500 13px var(--font-sans); cursor: pointer;
}
.pl-select:focus { outline: none; border-color: var(--accent); }

/* Accent swatches (Settings > Appearance) */
.pl-swatches { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px 18px; }
.pl-swatch { width: 32px; height: 32px; border-radius: 8px; cursor: pointer; border: none; box-shadow: 0 0 0 2px transparent; transition: box-shadow var(--ease); }
.pl-swatch.active { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
#settings-tab .color_box {
  grid-template-columns: 52px minmax(92px, 1fr) 100px;
}
#settings-tab .accent-hex-input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--input-bg, var(--card));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
}
#settings-tab .accent-hex-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
#settings-tab .accent-hex-input::placeholder { color: var(--text2); opacity: 0.75; }

/* ---------- 11e. Side-by-side cards ------------------------ */
/* Dashboard sub-grid .phone_box_da was 2-col;
 * I/O card forced full width via grid-column:1/-1;
 * reset -> I/O + Network side by side like template.
 *  */
@media (min-width: 1100px) {
  #dashboard-tab .phone_box_da > .dashboard-grid.row-2 { grid-column: auto !important; }
  #dashboard-tab .phone_box_da > .dashboard-grid.row-3 { grid-column: auto !important; margin: 0 !important; }
  #dashboard-tab .card-network.full-width { width: auto !important; }
  /* Compact I/O table - 6 cols in narrow column; overflow-x if needed */
  #dashboard-tab .pc_box .routing-box {
    min-width: 0 !important;
    grid-template-columns: minmax(56px,1fr) minmax(92px,1.1fr) minmax(76px,1fr) minmax(60px,.85fr) minmax(52px,.75fr) minmax(48px,.7fr) !important;
    gap: 6px 8px !important;
    padding-left: 14px !important; padding-right: 14px !important;
  }
  #dashboard-tab .pc_box .title_box > div { font-size: 10px !important; letter-spacing: .3px !important; }
}

/* Video tab: two-column cards Source + Auto-Switching.
 * .Video-switch-box prepared for this (628px, was commented out). */
@media (min-width: 1100px) {
  #video-tab .Video-switch-box { grid-template-columns: 1fr 1fr !important; align-items: start !important; }
}

/* ---------- 11f. Dashboard consolidation -------------------------------- */
/* Network card merged into Device Information - hide (keep in DOM for :eq DHCP) */
#dashboard-tab .card-network.full-width { display: none !important; }
/* Network hidden -> I/O area single column full width;
 * three I/O tiles side by side (overrides legacy 2fr|1fr). */
#dashboard-tab .phone_box_da { grid-template-columns: 1fr !important; }
/* Hide legacy wide I/O table; compact tiles; full view on Status tab */
#dashboard-tab .card-video-routing .pc_box,
#dashboard-tab .card-video-routing .pohne_box_status { display: none !important; }

/* Compact I/O tiles */
/* auto-fit statt fixer 3 Spalten: bei schmaler Card bricht die dritte Kachel
   (HDMI OUT) unter die erste um, statt abgeschnitten zu werden */
.pl-io-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; padding: 14px 18px; }
.pl-io-tile { background: var(--bg-s); border: 1px solid var(--border); border-radius: var(--rs); padding: 12px 14px; }
.pl-io-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.pl-io-sig { margin-bottom: 8px; min-height: 22px; }
.pl-io-res { font-family: var(--font-mono); font-size: 12px; color: var(--text2); }
/* Compact status pills in tiles */
.pl-io-tile .user_action,
.pl-io-tile .grayuser_inactive {
  display: inline-flex !important; align-items: center; gap: 6px;
  grid-template-columns: none !important; max-width: none !important; width: auto !important;
  padding: 2px 9px !important; border-radius: var(--r-pill) !important;
  font-size: 11px !important; font-weight: 600 !important;
}
.pl-io-tile .user_active_box, .pl-io-tile .user_inactive_box { width: 7px; height: 7px; border-radius: 50%; }
/* Single column tiles only on phone (<600px) */
@media (max-width: 600px) { .pl-io-tiles { grid-template-columns: 1fr; } }

/* ---------- 11g. Topbar-Power-Control ------------------------------------- */
.pl-topbar-power { display: inline-flex; height: 30px; border: 1px solid var(--border-s); border-radius: var(--rs); overflow: hidden; flex-shrink: 0; }
.pl-toppwr { padding: 0 12px; border: none; background: transparent; color: var(--text); font: 600 12px var(--font-sans); cursor: pointer; transition: background var(--ease), color var(--ease); }
.pl-toppwr + .pl-toppwr { border-left: 1px solid var(--border-s); }
.pl-toppwr:hover { background: var(--btn-ghost-bg); }
.pl-toppwr.pl-dash-poweron.pl-active { background: var(--green); color: #fff; }
.pl-toppwr.pl-dash-standby.pl-active { background: var(--red); color: #fff; }
/* Decorative power icon removed (On/Standby replaces) */
.top-right-info .power { display: none !important; }

/* Information nav hidden (content in Dashboard > Device Information) */
.pl-hidden-nav { display: none !important; }

/* ---------- 11h. Combined I/O + switch / sidebar color ------------------ */
/* Hide legacy I/O table + network card on dashboard;
 * compact Input/Output card; network in Device Information;
 *  stay in DOM for app.js :eq bindings.
 * signal/resolution classes untouched. */
#dashboard-tab .phone_box_da { display: none !important; }
/* Switch source: gleiche Card-Insets wie andere Dashboard-Cards */
.pl-switch-label {
  font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text3); margin: 0 !important;
  padding: 12px var(--card-inset-x, 16px) 8px !important;
}
.dashboard-quick-card .pl-io-tiles {
  padding: 14px var(--card-inset-x, 16px) !important;
}
#dashboard-tab .dashboard-quick-card .dashboard-input-switch {
  padding: 0 var(--card-inset-x, 16px) 14px !important;
  gap: 10px !important;
}
#dashboard-tab .dashboard-switch-input {
  min-width: 84px !important; height: 30px !important; min-height: 30px !important;
  line-height: 30px !important; padding: 0 12px !important; font-size: 13px !important;
}

/* Sidebar bg = Seitenhintergrund (wie Vorgabe: nav background var(--bg)) */
html[data-theme="dark"] .sidebar, html[data-theme="dark"] .phone_sidebar,
html[data-theme="light"] .sidebar, html[data-theme="light"] .phone_sidebar,
html:not([data-theme]) .sidebar, html:not([data-theme]) .phone_sidebar {
  background: var(--bg) !important;
}

/* ---------- 11i. Command tab fixes --------------------------------- */
/* API tester: wrap category buttons instead of horizontal scroll
 * (legacy flex-wrap:nowrap clipped buttons). */
#command-tab .api_mode_box {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  gap: 8px !important;
}
/* API tester: 2 fields + button, bottom-aligned */
#command-tab .api_mode_command_box { grid-template-columns: minmax(200px,1fr) minmax(200px,1fr) auto !important; align-items: end !important; }

/* Update 2026-07-03: Command table: no inner scroll, page scrolls only
 * (legacy inner scroll caused double scrollbars;
 * desktop #commandContainer + mobile #commandContainer_phone).
 *  */
#command-tab #commandContainer,
#command-tab #commandContainer_phone {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* TCP/IP + RS-232 console: command row vertically centered */
#command-tab .serial_box_row,
#rs232-tab .serial_box_row { align-items: center !important; }
#command-tab .serial_box_row > div:first-child,
#rs232-tab .serial_box_row > div:first-child { display: flex; align-items: center; }

/* ---------- 11j. I/O box controls + bit depth ------------------------- */
/* Compact control rows */
/* No top border on controls (title-box border above);
 * avoids double line under description. */
.pl-io-ctrls { padding: 6px 18px 6px; }
.pl-io-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.pl-io-ctrl:last-child { border-bottom: none; }
.pl-io-ctrl-label { font-size: 13px; font-weight: 600; color: var(--text); }
.pl-io-btns { display: flex; gap: 6px; flex-shrink: 0; }
.pl-io-btns .btn-box,
.pl-io-btns .audio_signal { min-width: 54px; text-align: center; justify-content: center; }
/* Bit depth after resolution in tiles */
.pl-io-depth { color: var(--text3); margin-left: 6px; font-family: var(--font-mono); }

/* ---------- 11k. Topbar logo background --------------------------------- */
/* Topbar + logo box unified to card surface; beats var(--secondary2) rules */
#main-interface .top-header,
#main-interface .top-header .sidebar-header,
#main-interface .header-left_phone .sidebar-header {
  background: var(--card) !important;
}
/* Topbar logo align left to nav-icon column (not group labels).
 * Icon X = sidebar-nav pad (12) + nav-link margin-left (8) + nav-link pad-left (10) = 30px.
 * Group labels (ADMIN/TOOLS) start at 20px (nav-pad + divider-pad). */
:root {
  --pl-sidebar-nav-pad: 12px;
  --pl-nav-link-inset: 8px;
  --pl-nav-link-pad-x: 10px;
  --pl-logo-inset-x: calc(var(--pl-sidebar-nav-pad) + var(--pl-nav-link-inset) + var(--pl-nav-link-pad-x));
}
#main-interface .top-left-info > .sidebar-header,
#main-interface .header-left .sidebar-header {
  padding-left: var(--pl-logo-inset-x) !important;
}
/* WebGUI info block align to content column (276px);
 * Logo header 250px + 12px gap + 14px margin.
 */
#main-interface .top-left-info .sidebar-header + .info-item {
  margin-left: 14px !important;
}
/* WebGUI row vertically centered;
 * all topbar info-items. */
#main-interface .top-left-info .info-item {
  align-items: center !important;
}
/* Update 2026-07-03: Values are block divs inside inline span -> vertical offset;
 * inline-flex + align-items:center fixes alignment.
 * 
 *  */
#main-interface .top-left-info .info-item {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
}
#main-interface .top-left-info .info-item > *,
#main-interface .top-left-info .info-item sapn,
#main-interface .top-left-info .info-item span {
  display: inline-flex !important; align-items: center !important;
}
#main-interface .top-left-info .info-item div {
  display: inline-flex !important; align-items: center !important; line-height: 1 !important;
}
/* Update 2026-07-03: Mono values ~1px high vs sans labels;
 * nudge down 1px for optical alignment.
 *  */
/* Nudge div mono values only; .mode_name unchanged.
 *  */
#main-interface .top-left-info .info-item .gui_fw_top,
#main-interface .top-left-info .info-item .mcu_fw_top,
#main-interface .top-left-info .info-item .ip_addr_top,
#main-interface .top-left-info .info-item .temp_data {
  position: relative !important; top: 1px !important;
}
#main-interface .top-left-info .info-divider { display: inline-flex !important; align-items: center !important; }
/* Update 2026-07-03: .top-left-info overflow:hidden clipped status pill;
 * overflow:visible + padding-right shows full pill.
 * 
 * 
 *  */
#main-interface .top-left-info {
  overflow: visible !important;
  padding-right: 6px !important;
  align-items: center !important;
}
/* No display override; app.js toggles pills via .hide()/.show();
 * align-self:center only. */
#main-interface .top-left-info .online_box,
#main-interface .top-left-info .offline_action.networkoff {
  align-items: center !important;
  align-self: center !important;
}
/* Update 2026-07-03: New PNG logos have no transparent padding;
 * reset background-position left center (no -7px nudge).
 * 
 *  */
html[data-theme="dark"] #main-interface .header-left .sidebar-logo {
  background-position: left center !important;
}
html[data-theme="dark"] .login-container .kit-login-logo.sidebar-logo {
  background-position: left center !important;
}
/* Update 2026-07-03: App shell logo clickable -> Dashboard (app.js).
 * Shell logos only, not login logo. */
#main-interface .header-left .sidebar-logo,
.header-left_phone .sidebar-logo {
  cursor: pointer !important;
}
/* Light mode: force dark nav icon sprite on active item;
 * light active sprite invisible on light bg.
 * 
 * Active row highlight still shows state. */
html[data-theme="light"] .nav-icon.placeholder-icon_active_light,
html[data-theme="light"] .nav-icon.placeholder-icon_active {
  background-image: url(../img/36CAC77117B3E932D9F58673ECF49BF9.png) !important;
}
/* Login header flush with form fields (275px).
 * No offset; logo, subtitle, fields share left edge.
 *  */
.login-container .login-header { margin-left: 0 !important; }

/* ---------- 11l. Mobile menu: burger -> X, keep logo ------------- */
/* Open: hide burger ::before (3 lines), show X via ::after */
body.phone-nav-open .NavigationButton::before {
  box-shadow: none !important;
  background: transparent !important;
}
body.phone-nav-open .NavigationButton::after {
  content: "\2715"; /* ✕ */
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; font-size: 20px; line-height: 1; color: var(--text);
}
/* Keep collapsed header logo visible when open;
 * hide drawer header duplicate logo. */
body.phone-nav-open .header-left_phone .sidebar-logo { visibility: visible !important; }
.phone_sidebar .phone-drawer-header { display: none !important; }

/* ---------- 11m. Login: clean mobile stack ----------------------------- */
/* Legacy fixed 820px card / 438px form ->
 * Role/Password overflow on narrow screens.
 * Stack card, full-width form, photo banner on top.
 * 768px breakpoint matches legacy column switch;
 * fixes dark gap beside panel. */
@media (max-width: 768px) {
  .login-container {
    flex-direction: column !important;
    width: 94vw !important;
    max-width: 94vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .login-container > .login-form-section {
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 30px 22px !important;
    order: 2 !important;
  }
  .login-photo {
    width: 100% !important;
    height: 140px !important;
    min-height: 0 !important;
    flex: none !important;
    order: 1 !important;
    border-left: none !important;
    border-bottom: 1px solid var(--login-card-border) !important;
  }
  /* Form elements full card width (not capped at 350px) */
  .login-container .login-header,
  .login-container .form-group,
  .login-container .input-wrapper,
  .login-container .login-btn {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .login-container .form-input,
  .login-container select.form-input,
  .login-container input.form-input,
  .login-container input#password,
  .login-container select#username {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ---------- 11n. Topbar narrow screens: no squeeze/overlap -- */
/* Fix: theme button squeezed under logo <430px; limit logo, fixed tap sizes, no shrink */
@media (max-width: 600px) {
  .top-header { overflow: visible !important; }
  .header-left_phone { flex-shrink: 1 !important; min-width: 0 !important; }
  .header-left_phone .sidebar-logo,
  .header-left_phone .sidebar-header .sidebar-logo {
    min-width: 0 !important; max-width: 64px !important; width: 64px !important;
    background-size: contain !important; background-position: left center !important; background-repeat: no-repeat !important;
  }
  /* Keep burger padding (legacy 52px); logo must not slide under burger */
  .header-left_phone .sidebar-header { padding-left: 50px !important; padding-right: 8px !important; }
  /* Burger above drawer so X close stays clickable */
  .NavigationButton { z-index: 210 !important; }
  /* Open: backdrop starts below header; logo stays visible */
  .mainZhezhao { top: 48px !important; height: calc(100% - 48px) !important; }
  .top-header { z-index: 200 !important; }
  /* Drawer z-205 above header backdrop; burger z-210; drawer starts top:48 */
  .phone_sidebar { z-index: 205 !important; }
  /* header-left_phone must not overlay right buttons */
  .header-left_phone { z-index: auto !important; width: auto !important; flex: 0 0 auto !important; }
  .header-right { margin-left: 6px !important; margin-right: 8px !important; flex-shrink: 0 !important; }
  .top-right-info { gap: 5px !important; }
  .top-right-info > * { flex-shrink: 0 !important; position: relative; z-index: 2; }
  .style-toggle-btn,
  .top-right-info .load {
    width: 30px !important; min-width: 30px !important; height: 30px !important;
    padding: 0 !important; display: flex !important; align-items: center; justify-content: center;
  }
  .pl-topbar-power { height: 30px !important; }
  .pl-toppwr { padding: 0 9px !important; }
  #logout-btn { padding: 0 11px !important; }
}
/* Very narrow (<=380px): shorten power control labels */
@media (max-width: 380px) {
  .header-left_phone .sidebar-logo { max-width: 66px !important; }
  .pl-toppwr { padding: 0 7px !important; font-size: 11px !important; }
}

/* ---------- 11o. Status tab: pills no overlap (narrow) ------ */
/* Status pills max-width:130px overlapped resolution; constrained here */
#status-tab .pohne_box_status .user_action,
#status-tab .pohne_box_status .grayuser_inactive,
#dashboard-tab .pohne_box_status .user_action,
#dashboard-tab .pohne_box_status .grayuser_inactive {
  max-width: 100% !important;
  grid-template-columns: 12px auto !important;
  width: auto !important;
}
#status-tab .pohne_box_status .user_res,
#status-tab .pohne_box_status .user_inactive_title {
  white-space: nowrap;
}
#status-tab .pohne_box_status_li_box { min-width: 0 !important; }

/* ---------- 11p. Hide redundant toggle text labels ------------------ */
/* Pill toggle shows state via knob; hide extra On/Off text label */
.switch_active,
.autopower_active,
.cec_active { display: none !important; }
/* Label was 2nd grid col (36px) - toggle cell enough */

/* ---------- 11q. Command table responsive --------------------------------- */
/* Desktop: pc_box table; mobile: phone cards; legacy 920px table clipped */
@media (min-width: 901px) {
  #command-tab #commandContainer_phone { display: none !important; }
}
@media (max-width: 900px) {
  /* Match legacy selectors (:last-of-type / :nth-of-type(4)) */
  #command-tab > .dashboard-card:last-of-type .pc_box,
  #command-tab > .dashboard-card:nth-of-type(4) .pc_box,
  #command-tab .dashboard-card .pc_box,
  #command-tab .pc_box { display: none !important; }
  #command-tab #commandContainer_phone,
  #command-tab .data_box_lin.pohne_box_status { display: block !important; }
  /* API tester: stack Comhead/Parameters/Send */
  #command-tab .api_mode_command_box { grid-template-columns: 1fr !important; gap: 10px !important; }
  #command-tab .api_mode_command { grid-template-rows: auto auto !important; }
  #command-tab #get_data_send { width: 100% !important; margin-top: 0 !important; }
}

/* ---------- 11r. Toggle rows: Beschreibung UNTER dem Namen ---------- */
.pl-toggle-row, .pl-io-ctrl { align-items: center; gap: 12px; }
.pl-toggle-row > div:first-child, .pl-io-ctrl > div:first-child { min-width: 0; padding-right: 10px; }
.pl-toggle-row .pl-toggle, .pl-io-ctrl .pl-toggle { flex-shrink: 0; }
.pl-row-title { display: block; font-weight: 600; color: var(--text); }
.pl-row-sub {
  display: block; margin-left: 0; margin-top: 2px;
  color: var(--text3); font-weight: 400; font-size: 11px;
}

/* ---------- 11s. Mobile: console send + card spacing ------------------- */
@media (max-width: 600px) {
  /* Console rows: hide label, full input, reachable Send */
  #command-tab .serial_box_row,
  #rs232-tab .serial_box_row {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    margin-left: 12px !important; margin-right: 12px !important;
    grid-column-gap: 8px !important;
  }
  #command-tab .serial_box_row > div:first-child,
  #rs232-tab .serial_box_row > div:first-child { display: none !important; }
  #command-tab .serial_box_row input,
  #rs232-tab .serial_box_row input { width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; }
  .tcp_console_send, .Console_send { white-space: nowrap; padding: 0 16px !important; }

  /* Reduce card spacing; even padding */
  .tab-content, .tab-content.active { padding: 12px 12px 14px !important; }
  .dashboard-card, .card-output-settings, .card-video-routing, .dashboard-card-box { margin-bottom: 12px !important; }
  .dashboard-grid, .pl-dash-2col, .pl-dash-3col, .rs232-tab-grid,
  .Video-switch-box, .setting_device, .system_box, .rs232_box, .rs232_box_big,
  #dashboard-tab .pl-dash-2col, #dashboard-tab .pl-dash-3col {
    gap: 12px !important; grid-column-gap: 12px !important; grid-row-gap: 12px !important;
  }
  #dashboard-tab .dashboard-grid.row-1 { gap: 10px !important; }
}

/* ---------- 11t. Settings: Actions & Controls beside Device/Firmware ------- */
/* Left: Device Info + Firmware stacked; right: Actions & Controls */
/* Same specificity as legacy #settings-tab .system_box display:block rule */
#settings-tab .settings_box[style*="display: block"] .system_box,
#settings-tab .settings_box[style*="display:block"] .system_box,
#settings-tab .system_box {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}
#settings-tab .setting_device {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  align-items: start !important;
}
#settings-tab .system_box > .card-video-routing.page_1280_ { margin-bottom: 0 !important; }
@media (max-width: 900px) {
  #settings-tab .system_box,
  #settings-tab .setting_device { grid-template-columns: 1fr !important; }
}

/* ---------- 11u. Status dots: centered + tight gap (global) ------------ */
.user_action,
.grayuser_inactive {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1 !important;
  vertical-align: middle;
}
/* jQuery .hide() / inline display:none muss weiterhin greifen
   (Active/Inactive- und Signal-Pills werden von app.js umgeschaltet) */
.user_action[style*="display: none"],
.user_action[style*="display:none"],
.grayuser_inactive[style*="display: none"],
.grayuser_inactive[style*="display:none"],
.user_inactive[style*="display: none"],
.user_inactive[style*="display:none"],
.management_active[style*="display: none"],
.management_inactive[style*="display: none"] {
  display: none !important;
}
.user_active_box,
.user_inactive_box,
.user_inactive_box_ye {
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0;
  align-self: center;
  width: 7px;
  height: 7px;
}
.user_inactive_title {
  float: none !important;
  line-height: 1 !important;
}
.pl-io-sig .user_action,
.pl-io-sig .grayuser_inactive { gap: 5px !important; }

/* ---------- 11v. Network: hide off/on label behind DHCP toggle ---- */
#network-tab .mode_active { display: none !important; }

/* ---------- 11w. CEC: hide divider above Custom Command (Hex) --- */
#cec-tab .dashboard-card > .login-subtitle[style*="margin-left: 16px"] {
  border-top: none !important; padding-top: 0 !important;
}

/* ---------- 11x. Command table fills card height (desktop) ----- */
/* Kein Innen-Scroll — nur Seiten-Scroll; verhindert Doppel-Scroll + Mikro-Balken */
@media (min-width: 901px) {
  #command-tab .pc_box {
    display: block !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
  #command-tab #commandContainer {
    flex: none !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* ---------- 11y. Video: Source Routing + Input Setting side by side ------ */
/* Cards width:100% broke 2-col grid; force width:auto for 1fr tracks */
#video-tab .pl-dash-2col > .dashboard-card,
#video-tab .pl-dash-2col > .card-output-settings,
#video-tab .pl-dash-2col > .pl-video-col { width: auto !important; min-width: 0 !important; }
/* Column wrapper: cards stacked with even gap */
.pl-video-col, .pl-dash-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pl-video-col > .dashboard-card, .pl-dash-col > .dashboard-card { margin-bottom: 0 !important; width: auto !important; }
@media (max-width: 900px) { .pl-video-col, .pl-dash-col { gap: 12px; } }
/* Dashboard 2col: column wrapper/cards must not overflow grid column */
#dashboard-tab .pl-dash-2col > .dashboard-card,
#dashboard-tab .pl-dash-2col > .pl-dash-col { width: auto !important; min-width: 0 !important; }

/* ---------- 11z. Hide front panel in Settings (now on dashboard) --- */
.pl-fp-hide { display: none !important; }

/* ---------- 11z2. I/O tile: resolution + bit depth no overlap ---------- */
.pl-io-tile .pl-io-res {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0 5px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.35;
  white-space: nowrap; overflow: visible;
}
/* Resolution as plain text in tile - saves width */
.pl-io-tile .pl-io-res .user_res {
  border: none !important; background: transparent !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; max-width: 100% !important; color: var(--text) !important;
  display: inline !important;
}
.pl-io-tile .pl-io-res .user_res_no { padding: 0 !important; margin: 0 !important; }
.pl-io-tile .pl-io-depth { margin-left: 0 !important; }

/* ---------- 11z3. Video: uniform input fields + layout -------------- */
/* .setting-item had inconsistent grid cols; grid label|1fr for uniform field width */
/* Fix: fields were fixed 180px; grid [label|1fr] fills column uniformly */
#video-tab .card-output-settings .setting-item {
  display: grid !important;
  /* Fixed label col 160px; field 1fr; equal width across cards in 2col grid */
  grid-template-columns: 160px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 18px !important;
}
#video-tab .card-output-settings .setting-item > div:first-child { min-width: 0; }
#video-tab .card-output-settings .setting-item > select,
#video-tab .card-output-settings .setting-item > input[type="text"],
#video-tab .card-output-settings .setting-item select,
#video-tab .card-output-settings .setting-item input[type="text"] {
  width: 100% !important; max-width: none !important; box-sizing: border-box !important;
}
/* Auto-switch row: toggle right in field column */
#video-tab .card-output-settings .setting-item > div:last-child[style*="grid-template-columns"] {
  display: flex !important; justify-content: flex-end !important; align-items: center !important;
  width: auto !important; grid-column-gap: 10px;
}
@media (max-width: 600px) {
  /* Very narrow: stack label over field, full width */
  #video-tab .card-output-settings .setting-item { grid-template-columns: 1fr !important; gap: 6px !important; }
}

/* ---------- 11z4. CEC remote: gap last row to border ---------- */
/* .cec_box border-bottom; padding-bottom gaps last button row */
#cec-tab .cec_box { padding-bottom: 22px !important; }
/* Custom command row stuck to card bottom; padding-bottom on CEC cards */
#cec-tab .cec-view .dashboard-card { padding-bottom: 18px !important; }
/* CEC grid: cards height = content; compact vertical rhythm */
#cec-tab .cec-view-grid .rs232_box {
  align-items: start !important;
}
#cec-tab .cec-view-grid .rs232_box > .dashboard-card {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  margin-bottom: 0 !important;
  padding-bottom: 12px !important;
}
#cec-tab .cec-view-grid .pl-cec-sel-wrap {
  margin: 12px var(--card-inset-x, 16px) 0 !important;
  padding: 0 !important;
}
#cec-tab .cec-view-grid .cec-grid {
  margin: 14px var(--card-inset-x, 16px) 0 !important;
}
#cec-tab .cec-view-grid .pl-cec-cmd-label {
  margin: 14px var(--card-inset-x, 16px) 0 !important;
  padding: 0 !important;
}
#cec-tab .cec-view-grid .pl-cec-cmd-row {
  margin: 8px var(--card-inset-x, 16px) 0 !important;
  padding: 0 !important;
}

/* ---------- 11z5. Command tab: console height + table columns ------------ */
/* Legacy :nth-of-type(4) hits console card after pl-page-head; reset height */
#main-interface #command-tab > .dashboard-card:nth-of-type(4),
#main-interface #command-tab > .dashboard-card:last-of-type {
  height: auto !important; max-height: none !important; min-height: 0 !important;
  display: block !important; overflow: visible !important;
  flex: 0 0 auto !important; /* no flex shrink (console was 2px) */
}
/* Command list class-based; header + rows same width; columns align */
/* Desktop pc_box only on desktop; <=1024 uses phone list */
@media (min-width: 1025px) {
  #command-tab .pl-cmd-list .pc_box { display: block !important; overflow: visible !important; }
  #command-tab .pl-cmd-list #commandContainer {
    width: 100% !important; max-height: none !important; height: auto !important;
    overflow: visible !important;
  }
  #command-tab .pl-cmd-list .command_title { width: 100% !important; }
  #command-tab .pl-cmd-list .command_title > * { min-width: 0 !important; }
}
/* Mobile: flex-shrink:0 on cards so tab grows and scrolls */
@media (max-width: 1024px) {
  #command-tab .dashboard-card { flex-shrink: 0 !important; }
}

/* ---------- 11z6. EDID load: equal field + button size ----------------- */
/* 3-Spalten: Label | Feld | Aktion (104px) — Download/Upload/Reset bündig */
#edid-tab .edid-item {
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) 104px !important;
  column-gap: 12px !important;
  align-items: center !important;
}
#edid-tab .edid-item .btn-box {
  width: 104px !important; min-width: 104px !important;
  text-align: center !important; box-sizing: border-box !important;
  justify-self: end !important;
}
/* Reset-Zeile hat nur 2 Kinder → Button in Spalte 3 (gleiche Flucht wie Upload/Download) */
#edid-tab .edid-item.pl-edid-reset-row .reset_edid {
  grid-column: 3 !important;
}

/* ---------- 11z7. Mobile: logo section bg = topbar --------- */
/* .header-left_phone gray bg vs topbar --card; unify to --card */
#main-interface .header-left_phone,
#main-interface .header-left_phone .sidebar-header {
  background: var(--card) !important;
}

/* ---------- 11z8. Active nav: blue left accent ------ */
#main-interface a.nav-link.active,
.phone_sidebar a.nav-link-phone.active { position: relative; }
#main-interface a.nav-link.active::before,
.phone_sidebar a.nav-link-phone.active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--accent); border-radius: 0 3px 3px 0;
}

/* ---------- 11z10. Mobile topbar: buttons vertically centered --------------- */
/* Right buttons were display:block misaligned; flex center fixes axis */
@media (max-width: 1024px) {
  #main-interface .top-header .header-right,
  #main-interface .top-header .top-right-info {
    display: flex !important; align-items: center !important;
  }
  /* Uniform icon button height; frames align in one row */
  #main-interface .top-header .header-right .style-toggle-btn,
  #main-interface .top-header .header-right .load,
  #main-interface .top-header .header-right .logout-btn,
  #main-interface .top-header .header-right .pl-topbar-power {
    height: 30px !important; box-sizing: border-box !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
}

/* ---------- 11z11. Topbar Power/Icons + Select-Pfeile --------------------- */
/* Topbar buttons vertically centered at all widths (container was display:block) */
#main-interface .top-header .header-right,
#main-interface .top-header .top-right-info {
  display: flex !important; align-items: center !important;
}
/* Fix: .header-right flex without justify-content; flex-end aligns buttons right */
#main-interface .top-header .header-right {
  justify-content: flex-end !important;
}
/* Fix: #status-tab 2-col grid without align-content:start caused row stretch gaps */
#main-interface #status-tab.tab-content.active {
  align-content: start !important;
}
/* Output/Rename card spans full width like the I/O status card (was half). */
#main-interface #status-tab.tab-content.active > .card-output-settings {
  grid-column: 1 / -1 !important;
}
/* .front_select buttons (Save + On/Off segment toggles) were block, h36, text not
 * centered. Style the shared CLASS once -> every .front_select stays consistent and
 * future changes apply to all of them automatically (same rule as action buttons). */
#main-interface .front_select {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-height: 32px !important; height: auto !important; width: auto !important;
  padding: 5px 16px !important; line-height: 1.1 !important; box-sizing: border-box !important;
}
/* Mobile status-tab gap 16px vs other tabs 14px; unify to 14px */
@media (max-width: 760px) {
  #main-interface #status-tab.tab-content.active {
    gap: 14px !important;
  }
}
/* Icon buttons: centered glyph, uniform height */
#main-interface .top-header .style-toggle-btn,
#main-interface .top-header .load,
#main-interface .top-header .logout-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: 30px !important; box-sizing: border-box !important;
}
/* Fix: reload glyph in inner div line-height:0; flex-center SVG */
#main-interface .top-header .load { position: relative !important; }
#main-interface .top-header .load > div {
  position: absolute !important; inset: 0 !important;
  width: auto !important; height: auto !important; font-size: 0 !important; line-height: 0 !important;
}
#main-interface .top-header .load > div > svg {
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important; margin: 0 !important; display: block !important;
}
/* Fix: hide ::before text glyph; SVG only (no double reload icons) */
#main-interface .top-header .load > div::before,
#main-interface .top-header .load > div::after {
  content: none !important; display: none !important;
}
/* Theme toggle: SVG via CSS mask; core still uses moon/sun text (font-size:0) */
#main-interface .top-header .style-toggle-btn {
  font-size: 0 !important; line-height: 0 !important; position: relative !important;
}
/* ::before absolutely centered; no flex interaction with hidden glyph text */
#main-interface .top-header .style-toggle-btn::before {
  content: "" !important; display: block !important;
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 17px !important; height: 17px !important;
  background-color: currentColor !important;
  -webkit-mask: var(--pl-theme-ico) center / 17px 17px no-repeat !important;
  mask: var(--pl-theme-ico) center / 17px 17px no-repeat !important;
  /* Default (dark): sun icon (Material wb_sunny) */
  --pl-theme-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z'/></svg>");
}
html[data-theme="light"] #main-interface .top-header .style-toggle-btn::before {
  /* Light theme: moon icon, centered;
   * not crescent arc confusion. */
  --pl-theme-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
}
/* On/Standby pill: clip active fill to rounded corners */
#main-interface .top-header .pl-topbar-power {
  overflow: hidden !important; height: 30px !important;
  display: inline-flex !important; align-items: stretch !important;
}
#main-interface .top-header .pl-topbar-power > * { display: inline-flex !important; align-items: center !important; }
/* Fix: mobile pl-topbar-power align-items:center prevented full-height active fill */
#main-interface .top-header .header-right .pl-topbar-power {
  align-items: stretch !important;
}
#main-interface .top-header .header-right .pl-topbar-power > .pl-toppwr {
  height: 100% !important; align-self: stretch !important;
  display: inline-flex !important; align-items: center !important;
}

/* ---------- 11z16. RS-232 Power-Command-Zeilen (alle Breiten) -------------- */
/* Fix: RS-232 power command rows - label full row; 3 cols [select|input|send] */
#main-interface #rs232-tab .auto_power_command_row {
  grid-template-columns: minmax(72px, 110px) minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  /* Remove row padding-left:16px; align with card title */
  padding-left: 0 !important;
}
#main-interface #rs232-tab .auto_power_command_row > div:first-child {
  grid-column: 1 / -1 !important;
}
#main-interface #rs232-tab .auto_power_command_row select,
#main-interface #rs232-tab .auto_power_command_row input {
  width: 100% !important; min-width: 0 !important;
}
#main-interface #rs232-tab .auto_power_command_row > .btn-box {
  width: auto !important; min-width: 0 !important;
  padding: 0 18px !important; white-space: nowrap !important;
}
/* Fix: .btn-box display:block -> flex center; compact height globally */
#main-interface .btn-box {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1.1 !important; box-sizing: border-box !important;
}
/* RS-232 command rows: compact 32px controls; no inflated min-height */
#main-interface #rs232-tab .auto_power_command_row,
#main-interface #rs232-tab .serial_box_row,
#main-interface #rs232-tab .rs232_command_local {
  min-height: 0 !important;
}
#main-interface #rs232-tab .auto_power_command_row > .btn-box,
#main-interface #rs232-tab .auto_power_command_row select,
#main-interface #rs232-tab .auto_power_command_row input,
#main-interface #rs232-tab .serial_box_row > .btn-box,
#main-interface #rs232-tab .rs232_command_local > .btn-box {
  height: 32px !important; min-height: 32px !important;
}

/* ---------- 11z17. EDID: compact spacing -------------------------------- */
#main-interface #edid-tab .dashboard-card {
  padding-bottom: 10px !important;
}
#main-interface #edid-tab .dashboard-card + .dashboard-card {
  margin-top: 12px !important;
}
#edid-tab .routing-box.input_box {
  padding: 8px 16px !important;
}
#edid-tab .routing-box.input_box:last-child {
  padding-bottom: 4px !important;
  border-bottom: none !important;
}
#edid-tab .edid-settings-body {
  padding-bottom: 0 !important;
}

/* All selects: visible dropdown caret (appearance:none without arrow) */
#main-interface select, .login-container select {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 9px center !important;
  padding-right: 28px !important;
}
/* Update 2026-07-03: Der ausgewaehlte Wert im Select war oben leicht abgeschnitten und
 * nicht vertikal zentriert (padding 8/8 + line-height 18.2 in 36px border-box = zu eng).
 * Vertikales Padding entfernen + line-height:normal -> Browser zentriert den Wert
 * sauber, kein Clip oben. */
#main-interface select, .login-container select {
  line-height: normal !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
/* Update 2026-07-03: Session-Restore ohne Login-Blitz. app.js setzt data-pl-restore
 * synchron beim Laden, wenn die Tab-Session eingeloggt war -> Login sofort aus, Main
 * sofort an (bevor der Kern in ready() kurz die Login-Seite zeigt). */
html[data-pl-restore] #login-page { display: none !important; }
html[data-pl-restore] #main-interface { display: grid !important; }
/* Fix: command list parameter selects (select.x_data) center displayed value */
/* Fix: .mainZhezhao busy overlay white flash in dark mode */
html:not([data-theme="light"]) .mainZhezhao { background-color: #0b1120 !important; }

/* Fix: command list parameter selects — linksbündig, keine Mikro-Scrollbalken */
#command-tab select.x_data,
#command-tab select.y_data,
#command-tab select.z_data {
  text-align: left !important;
  text-align-last: left !important;
}

/* ---------- 11z12. Tip message: shadow only when visible ----------------- */
/* #tipmessage_box shadow only when visible (.show) */
#tipmessage_box, #tipnotmessage_box { box-shadow: none !important; }
#tipmessage.show #tipmessage_box,
#tipnotmessage.show #tipnotmessage_box { box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }
/* Fix: min-height:44px on hidden tip box left visible empty area */
#tipmessage:not(.show) #tipmessage_box,
#tipnotmessage:not(.show) #tipnotmessage_box {
  min-height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ---------- 12. Scrollbars ------------------------------------------------- */
.content-container::-webkit-scrollbar,
.command-table::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar { width: 10px; height: 10px; }
.content-container::-webkit-scrollbar-thumb,
.command-table::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--bg-m);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.content-container::-webkit-scrollbar-track { background: transparent; }

/* ---------- 13. Console dock --------------------------- */
/* Fixed bottom console dock; left = Sidebar-Breite (--sidebar-width 250px Desktop) */
.pl-dock {
  position: fixed; left: var(--sidebar-width, 250px); right: 0; bottom: 0; z-index: 180;
  background: var(--card); border-top: 1px solid var(--border);
  box-shadow: none;
  display: flex; flex-direction: column; transition: left .25s ease;
  font-family: var(--font-sans);
  box-sizing: border-box;
}
/* Collapsed head: --footer-h inkl. border-top am Parent → Head 1px kuerzer (Eckpunkt buendig) */
.pl-dock-head {
  height: calc(var(--footer-h, 61px) - 1px);
  min-height: calc(var(--footer-h, 61px) - 1px);
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 0 18px; cursor: pointer; user-select: none;
  box-sizing: border-box;
}
.pl-dock-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text); flex-shrink: 0; }
.pl-dock-tabs { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.pl-dock-tab {
  padding: 5px 12px; border: none; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 600; background: transparent; color: var(--text2);
}
.pl-dock-tab-active { background: var(--accent); color: #fff; }
.pl-dock-proto-pill {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); flex-shrink: 0;
}
.pl-dock-hint {
  font-size: 11px; color: var(--text3); font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.pl-dock-chevron { font-size: 15px; color: var(--text2); transform: rotate(180deg); transition: transform .2s; flex-shrink: 0; }
.pl-dock.pl-dock-open .pl-dock-chevron { transform: rotate(0deg); }

.pl-dock-body { display: none; height: 280px; flex-direction: column; border-top: 1px solid var(--border); }
.pl-dock.pl-dock-open .pl-dock-body { display: flex; }
.pl-dock-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Traffic log */
.pl-dock-log {
  flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: 12.5px; background: var(--bg);
}
/* Fix: .tcp_printf fixed height on dock log; reset so flex:1 fills body */
.pl-dock .pl-dock-log.tcp_printf {
  height: auto !important; min-height: 0 !important; max-height: none !important;
  flex: 1 1 0% !important;
}
.pl-dock-log li {
  display: grid; grid-template-columns: 78px 52px 1fr; gap: 10px;
  padding: 6px 18px; border-bottom: 1px solid var(--border);
}
.pl-dock-log li.pl-dock-empty { display: block; padding: 40px; text-align: center; color: var(--text3); font-size: 13px; font-family: var(--font-sans); border: none; }
.pl-dock-log .sertime { color: var(--text3); }
.pl-dock-log .serfrom { font-weight: 700; }
.pl-dock-log .serfrom.tx { color: #818cf8; }
.pl-dock-log .serfrom.rx { color: #10b981; }
.pl-dock-log li > span:last-child { color: var(--text); word-break: break-word; }

/* Input row */
.pl-dock-inputrow {
  flex-shrink: 0; border-top: 1px solid var(--border); padding: 12px 18px;
  display: flex; gap: 10px; align-items: center; background: var(--card);
}
.pl-dock-proto { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.pl-dock-proto-btn {
  padding: 8px 14px; border: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; background: transparent; color: var(--text2);
}
.pl-dock-proto-active { background: var(--accent); color: #fff; }
.pl-dock-input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 13px;
}
.pl-dock-input:focus { outline: none; border-color: var(--accent); }
.pl-dock .pl-dock-send, .pl-dock .pl-dock-clear {
  flex-shrink: 0; height: 36px; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; cursor: pointer;
}
.pl-dock .pl-dock-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border); }

/* System logs */
.pl-dock-syslog { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.pl-dock-syslog li {
  display: grid; grid-template-columns: 150px 84px 1fr; gap: 10px; align-items: center;
  padding: 9px 18px; border-bottom: 1px solid var(--border);
}
.pl-dock-syslog .syslog-time { color: var(--text3); font-family: var(--font-mono); font-size: 12px; }
.pl-dock-syslog .syslog-msg { font-size: 13px; color: var(--text); }
.pl-dock-syslog .syslog-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pl-dock-syslog .syslog-badge.info { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.pl-dock-syslog .syslog-badge.warn { background: #f59e0b22; color: #f59e0b; }
.pl-dock-syslog .syslog-badge.error { background: #ef444422; color: #ef4444; }
.pl-dock-sysfoot { justify-content: flex-end; }
.pl-dock-sysnote { font-size: 12px; color: var(--text3); margin-right: auto; }

/* Content padding so last card not hidden behind collapsed dock head */
.content-container { padding-bottom: 60px; }
/* Fix: nested scroll on .tab-content + .content-container; tab overflow visible only */
#main-interface .tab-content,
#main-interface .tab-content.active {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  height: auto !important;
}
/* Fix: fixed dock hides last card on tablet/mobile; extra tab bottom padding */
@media (max-width: 1024px) {
  #main-interface .tab-content.active { padding-bottom: 72px !important; }
}

/* Tablet/mobile: dock full width; head 48px gesamt inkl. Parent-border-top */
@media (max-width: 1024px) {
  .pl-dock { left: 0 !important; right: 0 !important; width: 100% !important; }
  .pl-dock-head { height: 47px !important; min-height: 47px !important; }
}
/* Drawer z-index above console dock (<=1024px burger menu) */
@media (max-width: 1024px) {
  .top-header { z-index: 200 !important; }
  .phone_sidebar { z-index: 205 !important; }
  .NavigationButton { z-index: 210 !important; }
  .mainZhezhao { top: 48px !important; height: calc(100% - 48px) !important; }
  /* Console behind drawer while menu open */
  body.phone-nav-open #pl-console-dock { z-index: 60 !important; }
  /* Drawer width 250px (= desktop sidebar) */
  .phone_sidebar { width: 250px !important; box-sizing: border-box !important; }
  /* Remove drawer shadow (z-205 over header caused blur tint) */
  .phone_sidebar { box-shadow: none !important; }
}
/* Tablet: logo section 250px column with border aligned to drawer edge */
@media (min-width: 601px) and (max-width: 1024px) {
  #main-interface .header-left_phone {
    width: 250px !important; flex: 0 0 250px !important; box-sizing: border-box !important;
    border-right: 1px solid var(--border) !important;
  }
}
/* Narrow mobile: remove logo section border; drawer edge is the line at 250px */
@media (max-width: 600px) {
  .header-left_phone { border-right: none !important; }
}
/* Tablet/mobile: zero direct tab child margins; flex gap 14px only */
@media (max-width: 1024px) {
  #main-interface .tab-content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  #main-interface .tab-content > .pl-page-head { margin-bottom: 0 !important; }
  #main-interface .tab-content > .pl-page-head + * { margin-top: 0 !important; }
  /* Beat legacy margins that add to 14px flex gap */
  html #dashboard-tab .dashboard-grid.row-1 { margin: 0 !important; }
  #main-interface #command-tab .dashboard-card,
  #main-interface #settings-tab .system_box > * { margin-top: 0 !important; }
}
@media (max-width: 600px) {
  .pl-dock-hint, .pl-dock-proto-pill { display: none; }
  .pl-dock-body { height: 62vh; }
  .pl-dock-inputrow { flex-wrap: wrap; }
  .pl-dock-input { flex: 1 1 100%; order: 3; }
  .pl-dock-log li { grid-template-columns: 64px 44px 1fr; }
}

/* Logo text fallback: compact spacing */
.logo_text .login-subtitle {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}
#settings-tab .logo_text {
  padding-bottom: 12px !important;
}
body, button, input, select, textarea, .login-container {
  font-family: var(--font-sans) !important;
}
.font-mono, code, pre, .pl-mono,
.ip_addr_top, .ip_das, .ip_infor, .sm_das, .sm_infor, .gw_das, .gw_infor,
.mac_dash, .mac_infor, .mcu_fw_top, .mcu_fw_infor, .gui_fw_top, .gui_fw_infor,
.telnetport_info, .user_res, .resdata, .res2data, .output_resdata,
.temp_data, .temp_infor, .ip_action, .command_box, .description_box, .api_mode,
.inputcolor1, .inputcolor2, .outputcolor, .input_depth1, .input_depth2, .output_depth1,
.hdcp_input_, .output_hdcp_, .phonecommand_box, #command-tab .command_title, .value,
.pl-io-res, .pl-io-depth, .pl-dock-syslog .syslog-time {
  font-family: var(--font-sans) !important;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Time & Schedules tab (additive) + topbar Uptime
   ============================================================ */
/* Topbar uptime readout — styled exactly like the other left info items */
.pl-uptime-item .temp_data { font-variant-numeric: tabular-nums; }

/* Current date/time/day readout (NTP sanity check) */
#schedule-tab .pl-now { border: 1px solid var(--card-border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px; }
#schedule-tab .pl-now-main { display: flex; align-items: baseline; gap: 10px; }
#schedule-tab .pl-now-day { font-size: 15px; font-weight: 700; color: var(--text); }
#schedule-tab .pl-now-time { font-size: 20px; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums; margin-left: auto; }
#schedule-tab .pl-now-date { font-size: 13px; color: var(--text2); margin-top: 2px; }
#schedule-tab .pl-now-hint { font-size: 11px; color: var(--text3); margin-top: 6px; }

/* New nav item icon (custom class so core .nav-icon :eq() count stays 14).
   Match the sprite icons exactly: 14x18 block, no margin (spacing = link gap). */
.pl-sched-navicon { display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 18px; margin: 0; color: currentColor; flex: 0 0 auto; }
.pl-sched-navicon svg { display: block; width: 15px; height: 15px; }

/* Page + cards */
#schedule-tab .pl-ts-top { margin-bottom: 18px; }
#schedule-tab .pl-ts-card { padding: 20px 22px; }
#schedule-tab .pl-ts-cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
#schedule-tab .pl-ts-cardbody { display: flex; flex-direction: column; }
#schedule-tab .pl-ts-flabel { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text3); margin-bottom: 8px; }

/* Fields */
#schedule-tab .pl-ts-field { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 14px; margin-bottom: 14px; }
#schedule-tab .pl-ts-field > label { font-size: 13px; color: var(--text2); display: flex; flex-direction: column; gap: 2px; }
#schedule-tab .pl-ts-hint { font-size: 11px; color: var(--text3); font-weight: 400; }
#schedule-tab .pl-ts-input,
#schedule-tab .pl-ts-select {
  height: 40px; border: 1px solid var(--card-border); background: var(--input-bg, var(--card));
  color: var(--text); border-radius: 10px; padding: 0 12px; font-family: var(--font-sans) !important;
  font-size: 14px; width: 100%; box-sizing: border-box;
}
#schedule-tab .pl-ts-select { -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
#schedule-tab .pl-dis { opacity: .5; pointer-events: none; }

/* Source segmented control */
#schedule-tab .pl-ts-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px;
  border: 1px solid var(--card-border); border-radius: 12px; margin-bottom: 16px; }
#schedule-tab .pl-ts-segbtn { height: 36px; border: none; background: transparent; color: var(--text2);
  border-radius: 8px; font-family: var(--font-sans) !important; font-size: 13px; font-weight: 600; cursor: pointer; }
#schedule-tab .pl-ts-segbtn.active { background: var(--primary); color: #fff; }

/* Buttons */
#schedule-tab .pl-ts-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
#schedule-tab .pl-ts-btn { height: 36px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--card-border);
  background: var(--card); color: var(--text); font-family: var(--font-sans) !important; font-size: 13px; font-weight: 600; cursor: pointer; }
#schedule-tab .pl-ts-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
#schedule-tab .pl-ts-btn:disabled { opacity: .55; cursor: default; }
#schedule-tab .pl-ts-note { font-size: 12px; color: var(--accent, #f59e0b); margin: 2px 0 8px; }
#schedule-tab .pl-clk-note { min-height: 16px; }

/* Toggle switch */
.pl-ts-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; }
.pl-ts-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pl-ts-switch span { position: absolute; inset: 0; background: var(--card-border); border-radius: 999px; transition: .15s; }
.pl-ts-switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .15s; }
.pl-ts-switch input:checked + span { background: var(--primary); }
.pl-ts-switch input:checked + span::before { transform: translateX(18px); }
.pl-ts-switch-lg { width: 46px; height: 24px; }
.pl-ts-switch-lg span::before { width: 18px; height: 18px; }
.pl-ts-switch-lg input:checked + span::before { transform: translateX(22px); }

/* Schedules rows */
#schedule-tab .pl-ts-schedbtns { display: flex; gap: 8px; }
#schedule-tab .pl-sched-row { display: grid;
  grid-template-columns: 46px minmax(180px, 1fr) auto auto 36px;
  align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--card-border); }
#schedule-tab .pl-sched-row:first-child { border-top: none; }
#schedule-tab .pl-sched-time { display: flex; align-items: center; gap: 6px; }
#schedule-tab .pl-sched-time .pl-ts-select { width: 68px; }
#schedule-tab .pl-sched-colon { color: var(--text3); }
#schedule-tab .pl-sched-days { display: flex; gap: 5px; }
#schedule-tab .pl-day { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--card-border);
  background: var(--card); color: var(--text2); font-family: var(--font-sans) !important; font-size: 12px; font-weight: 600; cursor: pointer; }
#schedule-tab .pl-day.active { background: var(--primary); border-color: var(--primary); color: #fff; }
#schedule-tab .pl-sched-del { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--card-border);
  background: transparent; color: var(--accent, #ef4444); font-size: 18px; line-height: 1; cursor: pointer; }
#schedule-tab .pl-sched-sum { grid-column: 2 / -1; font-size: 12px; color: var(--text3); margin-top: -6px; }

/* Responsive */
@media (max-width: 900px) {
  #schedule-tab .pl-sched-row { grid-template-columns: 46px 1fr 36px; grid-auto-rows: auto; }
  #schedule-tab .pl-sched-time { grid-column: 1 / -1; }
  #schedule-tab .pl-sched-days { grid-column: 1 / -1; flex-wrap: wrap; }
  #schedule-tab .pl-sched-sum { grid-column: 1 / -1; }
  #schedule-tab .pl-ts-field { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- 14. Reference surface enforcement (wins over style.css v6.x) -------- */
html:not([data-theme="light"]) body,
html:not([data-theme="light"]) #main-interface,
html:not([data-theme="light"]) .main-content,
html:not([data-theme="light"]) .tab-content,
html:not([data-theme="light"]) .tab-content.active,
html:not([data-theme="light"]) .content-container {
  background-color: #0b1120 !important;
  background: #0b1120 !important;
}

html:not([data-theme="light"]) .dashboard-card,
html:not([data-theme="light"]) .dashboard-card-box,
html:not([data-theme="light"]) .card-output-settings,
html:not([data-theme="light"]) .card-video-routing,
html:not([data-theme="light"]) .top-header,
html:not([data-theme="light"]) .login-container,
html:not([data-theme="light"]) #changpassword {
  background-color: #151d2e !important;
  background: #151d2e !important;
  border-color: rgba(255,255,255,.08) !important;
}

html:not([data-theme="light"]) #login-page.login-wrapper {
  background-color: #0b1120 !important;
  background: #0b1120 !important;
}

/* Sidebar der Vorgabe = Seitenhintergrund (--bg), nicht Card-Fläche */
html:not([data-theme="light"]) .sidebar,
html:not([data-theme="light"]) .phone_sidebar,
html:not([data-theme="light"]) .sidebar-header,
html:not([data-theme="light"]) .sidebar-footer {
  background-color: #0b1120 !important;
  background: #0b1120 !important;
  border-color: rgba(255,255,255,.08) !important;
}

html[data-theme="light"] body,
html[data-theme="light"] #main-interface,
html[data-theme="light"] .main-content,
html[data-theme="light"] .tab-content,
html[data-theme="light"] .tab-content.active,
html[data-theme="light"] .content-container {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .dashboard-card-box,
html[data-theme="light"] .card-output-settings,
html[data-theme="light"] .card-video-routing,
html[data-theme="light"] .top-header,
html[data-theme="light"] .login-container,
html[data-theme="light"] #changpassword {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] #login-page.login-wrapper {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .phone_sidebar,
html[data-theme="light"] .sidebar-header,
html[data-theme="light"] .sidebar-footer {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Light login: beat style.css hardcoded slate overrides (apps.purelink.de measured) */
html[data-theme="light"] .login-container,
html[data-theme="light"] .login-container > .login-form-section {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .login-container .form-label,
html[data-theme="light"] #login-page .login-subtitle {
  color: #94a3b8 !important;
}
html[data-theme="light"] .login-container input.form-input,
html[data-theme="light"] .login-container select.form-input {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .login-container .login-btn {
  background-color: #005ae5 !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* ---------- 15. Shell text/chrome — reference neutral (login excluded) -------- */
html[data-theme="light"] #main-interface .top-left-info,
html[data-theme="light"] #main-interface .info-divider,
html[data-theme="light"] #main-interface .info-item > span:first-child {
  color: #64748b !important;
}

html[data-theme="light"] #main-interface .top-header .sidebar-header,
html[data-theme="light"] #main-interface .header-left .sidebar-header,
html[data-theme="light"] #main-interface .header-left_phone .sidebar-header {
  color: #0f172a !important;
}

html[data-theme="light"] #main-interface .logout-btn {
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] #main-interface .grayuser_inactive {
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] #main-interface .NavigationButton {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] #main-interface .phone_sidebar .nav-link-phone,
html[data-theme="light"] #main-interface .phone_sidebar .sidebar-user-name {
  color: #0f172a !important;
}

html[data-theme="light"] #main-interface .phone_sidebar .divider-text,
html[data-theme="light"] #main-interface .phone_sidebar .login_username {
  color: #64748b !important;
}

html[data-theme="light"] #main-interface .top-header,
html[data-theme="light"] #main-interface .header-left_phone,
html[data-theme="light"] #main-interface .content-container,
html[data-theme="light"] #main-interface .tab-content.active {
  color: #0f172a !important;
}

html:not([data-theme="light"]) #main-interface .logout-btn {
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ---------- 15. Vorgabe-Angleichung (apps.purelink.de Control-Apps) ---------- */
/* Logo wie Referenz-Screenshot: 119×24px in 48px-Topbar (≈ halbe Header-Hoehe) */
#main-interface .sidebar-header .sidebar-logo,
#main-interface .header-left .sidebar-logo,
#main-interface .header-left_phone .sidebar-logo,
#main-interface .top-left-info .sidebar-logo,
.phone_sidebar .phone-drawer-logo {
  height: 24px !important;
  line-height: 24px !important;
  width: 119px !important;
  min-width: 119px !important;
  max-width: 119px !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
}

/* Nav-Icons: Lucide-SVGs als mask-image (folgen currentColor -> s/w bzw. Akzent).
   Sprite-Klassen (placeholder-icon_active…) bleiben fuer app.js bestehen,
   werden aber visuell neutralisiert. */
#main-interface .nav-link .nav-icon.placeholder-icon,
#main-interface .nav-link-phone .nav-icon.placeholder-icon {
  background-image: none !important;
  background-color: currentColor !important;
  width: 16px !important;
  height: 18px !important;
  margin-top: 0 !important;
  display: inline-block !important;
  -webkit-mask: var(--pl-navico) center / 15px 15px no-repeat;
  mask: var(--pl-navico) center / 15px 15px no-repeat;
}
#main-interface .nav-link[data-tab="dashboard"] .nav-icon,
#main-interface .nav-link-phone[data-tab="dashboard"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='9' x='3' y='3' rx='1'/><rect width='7' height='5' x='14' y='3' rx='1'/><rect width='7' height='9' x='14' y='12' rx='1'/><rect width='7' height='5' x='3' y='16' rx='1'/></svg>"); }
#main-interface .nav-link[data-tab="control"] .nav-icon,
#main-interface .nav-link-phone[data-tab="control"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' x2='14' y1='4' y2='4'/><line x1='10' x2='3' y1='4' y2='4'/><line x1='21' x2='12' y1='12' y2='12'/><line x1='8' x2='3' y1='12' y2='12'/><line x1='21' x2='16' y1='20' y2='20'/><line x1='12' x2='3' y1='20' y2='20'/><line x1='14' x2='14' y1='2' y2='6'/><line x1='8' x2='8' y1='10' y2='14'/><line x1='16' x2='16' y1='18' y2='22'/></svg>"); }
#main-interface .nav-link[data-tab="information"] .nav-icon,
#main-interface .nav-link-phone[data-tab="information"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>"); }
#main-interface .nav-link[data-tab="status"] .nav-icon,
#main-interface .nav-link-phone[data-tab="status"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-4l-3 9L9 3l-3 9H2'/></svg>"); }
#main-interface .nav-link[data-tab="edid"] .nav-icon,
#main-interface .nav-link-phone[data-tab="edid"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='14' x='2' y='3' rx='2'/><line x1='8' x2='16' y1='21' y2='21'/><line x1='12' x2='12' y1='17' y2='21'/></svg>"); }
#main-interface .nav-link[data-tab="video"] .nav-icon,
#main-interface .nav-link-phone[data-tab="video"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m22 8-6 4 6 4V8Z'/><rect width='14' height='12' x='2' y='6' rx='2'/></svg>"); }
#main-interface .nav-link[data-tab="audio"] .nav-icon,
#main-interface .nav-link-phone[data-tab="audio"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 5 6 9H2v6h4l5 4V5Z'/><path d='M15.54 8.46a5 5 0 0 1 0 7.07'/><path d='M19.07 4.93a10 10 0 0 1 0 14.14'/></svg>"); }
#main-interface .nav-link[data-tab="cec"] .nav-icon,
#main-interface .nav-link-phone[data-tab="cec"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22v-5'/><path d='M9 8V2'/><path d='M15 8V2'/><path d='M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z'/></svg>"); }
#main-interface .nav-link[data-tab="usb"] .nav-icon,
#main-interface .nav-link-phone[data-tab="usb"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10' cy='7' r='1'/><circle cx='4' cy='20' r='1'/><path d='M4.7 19.3 19 5'/><path d='m21 3-3 1 2 2Z'/><path d='M9.26 7.68 5 12l2 5'/><path d='m10 14 5 2 3.5-3.5'/><path d='m18 12 1-1 1 1-1 1Z'/></svg>"); }
#main-interface .nav-link[data-tab="rs232"] .nav-icon,
#main-interface .nav-link-phone[data-tab="rs232"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 17 10 11 4 5'/><line x1='12' x2='20' y1='19' y2='19'/></svg>"); }
#main-interface .nav-link[data-tab="network"] .nav-icon,
#main-interface .nav-link-phone[data-tab="network"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='16' y='16' width='6' height='6' rx='1'/><rect x='2' y='16' width='6' height='6' rx='1'/><rect x='9' y='2' width='6' height='6' rx='1'/><path d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3'/><path d='M12 12V8'/></svg>"); }
#main-interface .nav-link[data-tab="settings"] .nav-icon,
#main-interface .nav-link-phone[data-tab="settings"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>"); }
#main-interface .nav-link[data-tab="command"] .nav-icon,
#main-interface .nav-link-phone[data-tab="command"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' x2='21' y1='6' y2='6'/><line x1='8' x2='21' y1='12' y2='12'/><line x1='8' x2='21' y1='18' y2='18'/><line x1='3' x2='3.01' y1='6' y2='6'/><line x1='3' x2='3.01' y1='12' y2='12'/><line x1='3' x2='3.01' y1='18' y2='18'/></svg>"); }
#main-interface .nav-link[data-tab="device"] .nav-icon,
#main-interface .nav-link-phone[data-tab="device"] .nav-icon { --pl-navico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='8' height='4' x='8' y='2' rx='1' ry='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='M12 11h4'/><path d='M12 16h4'/><path d='M8 11h.01'/><path d='M8 16h.01'/></svg>"); }

/* Aktiver Nav-Eintrag: Icon in Akzentfarbe (Vorgabe) */
#main-interface .nav-link.active .nav-icon.placeholder-icon,
#main-interface .nav-link-phone.active .nav-icon.placeholder-icon {
  color: var(--accent) !important;
}

/* Topbar-Header wie Vorlage: Label grau/regular, Wert fett, eine Basislinie */
#main-interface .top-left-info { font-size: 13px !important; gap: 14px !important; }
#main-interface .top-left-info .info-item {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  grid-template-columns: none !important;
}
#main-interface .top-left-info .info-item > span:first-child {
  color: var(--text2) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}
#main-interface .top-left-info .mode_name,
#main-interface .top-left-info .mcu_fw_top,
#main-interface .top-left-info .ip_addr_top,
#main-interface .top-left-info .temp_data,
#main-interface .top-left-info .info-item sapn,
#main-interface .top-left-info .info-item > span:last-child {
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
}
/* WebGUI: Label fett, Versionsnummer regular/grau (wie Referenz) */
#main-interface .top-left-info .info-item.pl-info-webgui > .pl-info-webgui-label {
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
#main-interface .top-left-info .info-item.pl-info-webgui .gui_fw_top {
  color: var(--text2) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
}
#main-interface .top-left-info .info-divider { color: var(--border-s) !important; }

/* Legacy-Toggles (.btn-tab) vereinheitlicht auf pl-toggle-Look:
   AUS = grau, Knopf links · AN = blau, Knopf rechts.
   Inline margin-left (app.js) bleibt lesbar (Handler pruefen sie),
   wirkt aber nur noch als Knopf-Verschiebung auf der absoluten Position. */
#main-interface .btn-tab {
  width: 44px !important; height: 24px !important;
  border-radius: 9999px !important;
  background: var(--bg-d) !important;
  border: 1px solid var(--border-s) !important;
  position: relative !important;
  transition: background .2s ease, border-color .2s ease;
}
#main-interface .btn-tab .btn-tab-chang {
  position: absolute !important; top: 2px !important; left: 2px !important;
  width: 18px !important; height: 18px !important;
  margin-top: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: margin-left .2s ease;
}
#main-interface .btn-tab.pl-on {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
#main-interface .btn-tab.tab-off { background: var(--bg-d) !important; }

/* Buttons wie Vorgabe-Apps: 13px/600, padding 7px 14px, Radius 8px.
   solid = Akzent + weiss + dezenter Schatten · sekundaer = ghost (transparent + Border) */
#main-interface .btn-box,
#main-interface .input_switch_box {
  height: auto !important; min-height: 0 !important;
  padding: 7px 14px !important;
  font-size: 13px !important; font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  border-radius: var(--rs) !important;
  background: var(--btn-ghost-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#main-interface .btn-box:hover,
#main-interface .input_switch_box:hover { background: var(--bg-m) !important; }
#main-interface .btn-box.front_selectactive,
#main-interface .input_switch_box.front_selectactive {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
#main-interface .btn-primary,
#main-interface .login-btn {
  padding: 7px 14px !important;
  font-size: 13px !important; font-weight: 600 !important;
  border-radius: var(--rs) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
#login-page .login-btn {
  box-shadow: none !important;
}
#main-interface .logout-btn,
#main-interface .style-toggle-btn {
  background: var(--btn-ghost-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--rs) !important;
}

/* Sidebar-Footer: User-Zeile vertikal zentriert (Avatar + Meta) */
.sidebar-footer { display: flex !important; align-items: center !important; }
.sidebar-footer .sidebar-user { padding: 0 !important; width: 100%; align-items: center !important; }
.sidebar-footer .sidebar-user-meta { display: flex; flex-direction: column; justify-content: center; }

/* System-Tab: Aktions-Buttons linksbuendig (nicht zentriert) */
#settings-tab .setting_btn_box .btn-box,
#settings-tab .setting_btn_box button {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Command-Tab: Abstaende wie bei den uebrigen Cards (16px Innenabstand unten) */
#command-tab .pl-cmd-list { padding-bottom: 12px !important; }
#command-tab .serial_box_row { margin: 0 16px !important; }
#command-tab .tcpcommand { padding-bottom: 12px !important; }
#command-tab .api_mode_command_box { padding-bottom: 16px !important; }
#command-tab .pl-cmd-console-block { padding-bottom: 16px !important; }
/* API Tester + TCP Console: Send wie RS-232 (32px, Primary, buendig zur Eingabezeile) */
#command-tab #get_data_send.get_data_send,
#command-tab .tcp_console_send {
  height: 32px !important;
  min-height: 32px !important;
  min-width: 60px !important;
  margin-top: 0 !important;
  padding: 0 16px !important;
}
#command-tab .api_mode_command input {
  height: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
}
/* Tabellenzeilen: Inhalte vertikal zentriert */
#commandContainer .command_title,
#commandContainer_phone .command_title {
  align-items: center !important;
  min-height: 40px;
}
#commandContainer .command_title > div,
#commandContainer_phone .command_title > div {
  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
}

/* Command-Referenz: Parameter-Dropdowns skalieren mit Inhalt/Zoom
   (fixe 72px-Breite schnitt Inhalte ab, bei hohem Browser-Zoom unlesbar) */
#command-tab select.x_data,
#command-tab select.y_data,
#command-tab select.z_data {
  width: auto !important;
  min-width: 64px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 22px 4px 8px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

/* Gemeinsame Footer-Hoehe: Sidebar-Footer und Console-Dock-Leiste buendig (alle Viewports) */
:root { --footer-h: 61px; }
.sidebar-footer,
.phone_sidebar .sidebar-footer {
  height: var(--footer-h) !important;
  min-height: var(--footer-h) !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  border-top: 1px solid var(--border) !important;
}

/* User-Management: rechte Spalte sauber ausgerichtet (Badge / Password / Toggle / X) */
#settings-tab .user_permission {
  grid-template-columns: 30px 1fr auto auto auto auto !important;
  column-gap: 12px !important;
  align-items: center !important;
}
#settings-tab .user_permission > *:nth-child(n+3) { justify-self: end; }
#settings-tab .user_permission .pl-user-pw { white-space: nowrap; }
#settings-tab .user_permission .user_close {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  border-radius: 8px; font-size: 14px; line-height: 1;
  cursor: pointer;
}
/* Design-Platzhalter-Zeilen (mit Select) ausblenden — nur Admin + user1-Slot sichtbar */
#settings-tab .user_permission:has(select) { display: none !important; }
/* User-Management-Header ohne Add-User-Button */
#settings-tab .user-box {
  grid-template-columns: 1fr !important;
  justify-content: start !important;
}
/* Passwort-Card: bei Einzelansicht einspaltig */
#pl-pw-card[data-who] .page_1280_box { grid-template-columns: 1fr !important; }

/* Inline display:none (Initialzustand + jQuery .hide()) gewinnt auch fuer
   Auflösungs-Pills ('—'-Platzhalter) gegen die inline-grid !important-Regel */
.user_res_no[style*="display: none"],
.user_res_no[style*="display:none"],
.user_res[style*="display: none"],
.user_res[style*="display:none"] {
  display: none !important;
}

/* CEC-Pad: Sprite immer passend zum Theme (initialer Hellmodus zeigte Dark-Sprite,
   bis einmal umgeschaltet wurde). !important schlaegt das per JS gesetzte Inline-Bild. */
html[data-theme="light"] .cec-img {
  background-image: url(../img/21F1B499D3D04BE20CC8DF20E63B2ED5.png) !important;
}
html:not([data-theme="light"]) .cec-img {
  background-image: url(../img/70D9060A30F058AA40DCE8B062EE8C49.png) !important;
}

/* User-Management: Inactive-Badge ohne Punkt (Active hat auch keinen) */
#settings-tab .management_inactive .user_inactive_box_ye { display: none !important; }

/* ---------- 17. Command table — keine Mikro-Scrollbalken, responsives Grid -------- */
#command-tab .pc_box,
#command-tab .pl-cmd-list .pc_box {
  overflow: visible !important;
  max-width: 100% !important;
}
#command-tab #commandContainer,
#command-tab #commandContainer_phone {
  overflow: visible !important;
  overflow-x: hidden !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
}
#command-tab .command_title {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  grid-template-columns:
    minmax(68px, 84px)
    minmax(88px, 1.05fr)
    minmax(0, 1.35fr)
    minmax(120px, 1fr)
    minmax(36px, 52px)
    minmax(60px, 72px)
    minmax(92px, 108px) !important;
  gap: 8px !important;
  padding: 8px 16px !important;
}
#command-tab .command_title .command_box,
#command-tab .command_title .description_box {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#command-tab .command_title .parameter_box {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 4px !important;
  overflow: visible !important;
  max-height: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  scrollbar-width: auto !important;
}
#command-tab .command_title .parameter_box .data_box {
  display: grid !important;
  grid-template-columns: 14px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
#command-tab .command_title .parameter_box .data_box.hide-item {
  display: none !important;
}
#command-tab select.x_data,
#command-tab select.y_data,
#command-tab select.z_data {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px 20px 2px 6px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  text-align-last: left !important;
}
#command-tab .command_title .rw_box,
#command-tab .command_title .action_box {
  min-width: 0 !important;
  overflow: visible !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
#command-tab .command_title .action_box .btn-box {
  padding: 4px 8px !important;
  font-size: 11px !important;
}