:root {
  --bg: #071019;
  --bg2: #0b1722;
  --panel: #101d28;
  --panel2: #142635;
  --panel3: #0c1823;
  --text: #dbe8f0;
  --muted: #8fa4b5;
  --line: #254052;
  --line2: #1a3244;
  --accent: #16a9d4;
  --accent2: #0d6f8f;
  --ok: #20c878;
  --warn: #e5b738;
  --fault: #ff4f55;
  --offline: #6d7d89;
  --shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
  --app-bg: #071019;
  --app-bg-end: #0a141d;
  --top-bg: #f4f8fb;
  --top-text: #0b2232;
  --top-muted: #1f394d;
  --top-border: rgba(22, 169, 212, 0.55);
  --sidebar-bg: #0c1924;
  --menu-text: #aebfcb;
  --menu-active-bg: #132838;
  --menu-active-border: #274c60;
  --dropdown-bg: #0c1924;
  --user-hover-bg: #e6f2f7;
  --canvas-bg: #08131c;
  --grid-line: #1d3446;
  --chart-label: #7f94a3;
  --control-bg: #0f2e3d;
  --control-disabled-bg: #101b25;
  --input-bg: #08131c;
  --text-primary: #dbe8f0;
  --text-secondary: #b8c7d2;
  --text-muted: #8fa4b5;
  --value-text: #e9fbff;
  --button-text: #dff8ff;
  --disabled-text: #607380;
  --menu-active-text: #ffffff;
  --legend-bg: rgba(8, 19, 28, 0.45);
}

html[data-theme="LIGHT"] {
  --bg: #eef3f7;
  --panel: #ffffff;
  --panel2: #f3f7fa;
  --panel3: #f8fbfd;
  --text: #102b3d;
  --muted: #5d7180;
  --line: #cad8e1;
  --line2: #dce6ec;
  --shadow: 0 10px 24px rgba(14, 42, 60, 0.12);
  --app-bg: #eef3f7;
  --app-bg-end: #e7eef3;
  --top-bg: #f7fafc;
  --top-text: #0b2232;
  --top-muted: #1f394d;
  --top-border: rgba(22, 169, 212, 0.60);
  --sidebar-bg: #edf3f7;
  --menu-text: #334b5e;
  --menu-active-bg: #dceff7;
  --menu-active-border: #82cce1;
  --dropdown-bg: #ffffff;
  --user-hover-bg: #e6f2f7;
  --canvas-bg: #f7fbfd;
  --grid-line: #d9e5ec;
  --chart-label: #607889;
  --control-bg: #e7f6fb;
  --control-disabled-bg: #edf1f4;
  --input-bg: #ffffff;
  --text-primary: #102b3d;
  --text-secondary: #31495b;
  --text-muted: #4f6474;
  --value-text: #0b2232;
  --button-text: #0b4c63;
  --disabled-text: #627381;
  --menu-active-text: #0b2232;
  --legend-bg: rgba(235, 243, 248, 0.88);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; max-width: 100%; background: var(--app-bg); color: var(--text-primary); font-family: Arial, Helvetica, sans-serif; font-size: 14px; letter-spacing: 0; overflow-x: clip; }
button { font: inherit; }
.app-shell { width: 100%; max-width: 100vw; height: 100vh; min-height: 680px; display: grid; grid-template-columns: 188px minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr); background: linear-gradient(180deg, var(--app-bg) 0%, var(--app-bg-end) 100%); overflow-x: clip; }
.top-bar { grid-column: 1 / 3; display: grid; grid-template-columns: 188px minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 18px; min-width: 0; padding: 0 14px; background: var(--top-bg); border-bottom: 2px solid var(--top-border); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); color: var(--top-text); }
.brand-slot { display: flex; align-items: center; min-width: 0; }
.brand-slot img { width: clamp(118px, 10vw, 172px); max-width: 100%; max-height: 50px; object-fit: contain; display: block; }
.system-status { display: flex; align-items: baseline; justify-content: center; gap: 12px; min-width: 0; font-size: 16px; overflow: hidden; }
.system-status span { color: var(--top-muted); }
.system-status strong { font-size: 20px; }
.top-user-area { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; }
.language-select { display: flex; gap: 7px; }
.language-select button {
  width: 38px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 1px solid #bccad3;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 32, 48, 0.12);
}
.language-select button:hover { border-color: #6faec2; background: #edf8fb; }
.language-select button.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(22, 169, 212, 0.18), 0 1px 3px rgba(10, 32, 48, 0.16);
  background: #f7fdff;
}
.flag { width: 28px; height: 18px; display: block; overflow: hidden; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.flag-pl { background: linear-gradient(to bottom, #fff 0 50%, #dc143c 50% 100%); }
.flag-de { background: linear-gradient(to bottom, #000 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66% 100%); }
.flag-en { position: relative; background: #012169; }
.flag-en::before { content: ''; position: absolute; inset: 0; background: linear-gradient(32deg, transparent 0 42%, #fff 42% 49%, #c8102e 49% 53%, #fff 53% 60%, transparent 60%), linear-gradient(148deg, transparent 0 42%, #fff 42% 49%, #c8102e 49% 53%, #fff 53% 60%, transparent 60%); }
.flag-en::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, transparent 0 39%, #fff 39% 45%, #c8102e 45% 55%, #fff 55% 61%, transparent 61%), linear-gradient(to bottom, transparent 0 34%, #fff 34% 42%, #c8102e 42% 58%, #fff 58% 66%, transparent 66%); }
.user-menu { position: relative; }
.user-box { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #102b3d; white-space: nowrap; cursor: pointer; }
.user-box:hover, .user-box.open { border-color: #bfd5df; background: #e6f2f7; }
.user-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--accent2); position: relative; color: var(--accent2); font-size: 12px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.user-icon::after { content: none; }
.user-box span:nth-child(3) { display: none; }
.chevron { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #466173; }
.user-dropdown { position: absolute; top: 40px; right: 0; z-index: 20; width: 174px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--dropdown-bg); box-shadow: var(--shadow); }
.user-dropdown button { width: 100%; min-height: 34px; border: 0; border-radius: 4px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.user-dropdown button:hover { background: var(--menu-active-bg); }
.left-menu { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; background: var(--sidebar-bg); border-right: 1px solid var(--line); }
.left-menu button { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--menu-text); text-align: left; cursor: pointer; }
.left-menu button.active, .left-menu button:hover { border-color: var(--menu-active-border); background: var(--menu-active-bg); color: var(--menu-active-text); }
.content { grid-column: 2; grid-row: 2; display: grid; grid-template-rows: 58px minmax(270px, 1fr) auto; gap: 12px; min-width: 0; min-height: 0; padding: 12px; overflow-x: clip; overflow-y: auto; }
.status-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; min-width: 0; }
.status-item, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.status-item { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 8px 12px; }
.status-item span, .panel-header span, .active-recipe span { color: var(--text-muted); font-size: 12px; }
.status-item strong { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-grid { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 238px); gap: 12px; }
.bottom-grid { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(280px, 1.35fr) minmax(250px, 0.9fr) minmax(250px, 0.92fr); align-items: stretch; gap: 12px; }
.panel { min-width: 0; max-width: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.panel-header { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--panel2); }
h1, h2 { margin: 0; font-size: 15px; font-weight: 700; }
.profile-header { align-items: center; }
.profile-stats { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 14px; min-width: 0; color: var(--text-muted); font-size: 12px; }
.profile-stats b { font-weight: 400; color: var(--text-muted); }
.profile-stats strong { color: var(--text-primary); }
.live-indicator { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); }
.live-indicator i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px rgba(32, 200, 120, 0.8); }
.profile-panel canvas { width: 100%; height: 100%; min-height: 242px; display: block; background: var(--canvas-bg); }
.active-recipe { display: grid; gap: 4px; margin: 14px 14px 0; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 4px; background: var(--panel3); color: var(--text); text-align: left; cursor: pointer; }
.active-recipe strong { color: var(--value-text); }
.quick-actions { display: grid; gap: 10px; padding: 14px; }
.quick-actions button { min-height: 42px; border: 1px solid #2c6075; border-radius: 4px; background: var(--control-bg); color: var(--button-text); cursor: pointer; }
.quick-actions button:disabled { border-color: var(--line2); background: var(--control-disabled-bg); color: var(--disabled-text); cursor: not-allowed; }
.sensor-panel { display: flex; flex-direction: column; }
.sensor-dot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); gap: 9px 8px; padding: 12px 12px 18px; align-items: end; overflow: hidden; }
.sensor-dot-cell { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.sensor-dot-cell span { color: var(--text-secondary); font-size: 10px; line-height: 1; }
.dot { width: 12px; height: 12px; display: inline-block; border-radius: 50%; border: 1px solid transparent; }
.dot.hollow { background: transparent; border-color: var(--offline); }
.sensor-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: auto; padding: 10px 12px 12px; border-top: 1px solid var(--line2); color: var(--text-secondary); font-size: 11px; background: var(--legend-bg); }
.sensor-legend span { display: inline-flex; align-items: center; gap: 5px; }
.servo-table, .power-table { display: grid; gap: 8px; padding: 8px; overflow: visible; min-width: 0; }
.table-head, .table-row { display: grid; align-items: center; gap: 6px; min-width: 0; }
.servo-table .table-head, .servo-table .table-row { grid-template-columns: minmax(24px, 0.34fr) minmax(54px, 0.68fr) minmax(150px, 1.65fr) minmax(58px, 0.72fr); }
.power-table .table-head, .power-table .table-row { grid-template-columns: minmax(24px, 0.35fr) minmax(58px, 1fr) minmax(58px, 1fr) minmax(62px, 1fr) minmax(54px, 0.9fr); }
.table-head { color: var(--text-secondary); font-size: 11px; border-bottom: 1px solid var(--line2); padding: 0 4px 4px; }
.table-row { min-height: 42px; padding: 5px 4px; border: 1px solid var(--line2); border-radius: 4px; background: var(--panel3); }
.table-head span, .table-row span, .table-row strong { min-width: 0; overflow-wrap: anywhere; }
.position-value { display: block; color: var(--value-text); font-size: 15px; font-weight: 700; white-space: nowrap; }
.position-bar { position: relative; height: 7px; margin-top: 5px; border-radius: 999px; background: #1b3343; }
.position-bar::before { content: ''; position: absolute; left: 50%; top: -3px; width: 1px; height: 13px; background: #496475; }
.position-fill { position: absolute; top: 0; bottom: 0; left: 50%; border-radius: 999px; background: var(--accent); }
.position-marker { position: absolute; top: -4px; width: 7px; height: 15px; border-radius: 3px; background: #dff8ff; transform: translateX(-50%); }
.servo-position-shell, .hardware-servo-card { display: block; min-width: 0; width: 100%; padding: 7px 8px; border: 1px solid var(--line2); border-radius: 5px; background: var(--panel3); overflow: visible; }
.servo-position-card { display: grid; gap: 8px; min-width: 0; width: 100%; overflow: visible; }
.servo-data-row { display: grid; grid-template-columns: minmax(28px, 0.35fr) minmax(86px, 1fr) minmax(78px, 0.75fr) minmax(70px, 0.65fr); align-items: center; gap: 10px; min-width: 0; padding-bottom: 7px; border-bottom: 1px solid var(--line2); }
.servo-data-row > span, .servo-data-row > strong { min-width: 0; overflow-wrap: anywhere; }
.servo-position-readout { display: grid; gap: 1px; min-width: 0; }
.servo-position-readout strong { color: var(--value-text); font-size: 16px; font-weight: 800; white-space: nowrap; }
.servo-position-readout small { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.servo-position-scale { display: grid; gap: 4px; width: 100%; min-width: 0; color: var(--text-primary); overflow: visible; }
.servo-scale-labels, .servo-scale-values { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; min-width: 0; color: var(--text-muted); font-size: 10px; line-height: 1.1; }
.servo-scale-labels span:nth-child(2), .servo-scale-values span:nth-child(2) { justify-self: center; text-align: center; transform: translateX(0); }
.servo-scale-labels span:nth-child(1), .servo-scale-values span:nth-child(1) { text-align: left; }
.servo-scale-labels span:nth-child(3), .servo-scale-values span:nth-child(3) { text-align: right; }
.servo-scale { position: relative; height: 11px; border-radius: 999px; background: linear-gradient(to right, rgba(38, 194, 255, 0.2), rgba(38, 194, 255, 0.08)); border: 1px solid var(--line2); min-width: 0; }
.servo-scale::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line2); transform: translateY(-50%); }
.servo-center-marker { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; border-radius: 2px; background: var(--text-secondary); transform: translateX(-50%); z-index: 1; }
.servo-current-marker { position: absolute; left: var(--marker-percent); top: 50%; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--panel-bg); background: var(--accent); box-shadow: 0 0 0 2px rgba(38, 194, 255, 0.35); transform: translate(-50%, -50%); z-index: 2; }
.servo-scale-values span, .servo-scale-labels span { min-width: 0; white-space: nowrap; }
.servo-position-scale.range-warning .servo-position-readout strong, .servo-position-card:has(.range-warning) .servo-position-readout strong { color: var(--warn); }
.servo-card-actions { justify-content: flex-end; padding-top: 1px; }
.servo-test-mode-card { border-color: rgba(22, 169, 212, 0.65); box-shadow: 0 0 0 1px rgba(22, 169, 212, 0.20), var(--shadow); }
.servo-test-active .servo-scale { cursor: pointer; }
.servo-test-active .servo-current-marker { cursor: grab; box-shadow: 0 0 0 3px rgba(22, 169, 212, 0.38); }
.servo-test-active .servo-current-marker:active { cursor: grabbing; }
.servo-test-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 7px; min-width: 0; padding: 7px 8px; border: 1px solid rgba(22, 169, 212, 0.28); border-radius: 5px; background: rgba(22, 169, 212, 0.08); color: var(--text-secondary); font-size: 11px; }
.servo-test-details strong { color: var(--accent); overflow-wrap: anywhere; }
.servo-test-details span { min-width: 0; overflow-wrap: anywhere; }
.servo-test-fine { display: flex; justify-content: flex-end; gap: 5px; }
.servo-test-fine button { min-width: 32px; min-height: 26px; border: 1px solid #2c6075; border-radius: 4px; background: var(--control-bg); color: var(--button-text); cursor: pointer; }
.servo-test-reason { display: block; font-size: 11px; text-align: right; }
.code-ok { color: var(--ok); }
.code-warning { color: var(--warn); }
.code-critical, .code-fault { color: var(--fault); }
.code-offline, .code-not-tested { color: var(--offline); }
.bg-ok { background: var(--ok); }
.bg-warning { background: var(--warn); }
.bg-critical, .bg-fault { background: var(--fault); }
.bg-offline, .bg-not-tested { background: var(--offline); }
.modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); }
.modal { width: min(360px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--dropdown-bg); box-shadow: var(--shadow); }
.modal h2 { margin-bottom: 10px; }
.modal p { color: var(--text-secondary); line-height: 1.4; }
.modal button { min-height: 36px; padding: 0 14px; border: 1px solid #2c6075; border-radius: 4px; background: var(--control-bg); color: var(--button-text); cursor: pointer; }
.left-menu button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.modal label {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  color: var(--muted);
  font-size: 12px;
}
.modal input,
.modal select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text);
  padding: 0 9px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.choice-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.choice-list button {
  width: 100%;
  text-align: left;
}
#loginMessage {
  min-height: 18px;
  color: var(--fault);
}
@media (max-width: 1199px) {
  .app-shell { height: auto; min-height: 100vh; }
  .content { grid-template-rows: auto auto auto; }
  .status-bar { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .main-grid { grid-template-columns: minmax(0, 1fr); }
  .bottom-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-panel canvas { height: 320px; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); }
  .top-bar, .left-menu, .content { grid-column: 1; }
  .top-bar { grid-row: 1; grid-template-columns: minmax(104px, auto) minmax(0, 1fr); align-items: center; padding: 8px 10px; gap: 10px; }
  .system-status { justify-content: flex-start; }
  .top-user-area { grid-column: 1 / 3; flex-wrap: wrap; justify-content: flex-start; }
  .left-menu { grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 8px; overflow: visible; }
  .left-menu button { width: auto; flex: 1 1 118px; min-width: 0; min-height: 36px; text-align: center; }
  .content { grid-row: 3; padding: 10px; }
  .status-bar { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .profile-header { align-items: flex-start; flex-direction: column; padding: 8px 12px; }
}

@media (max-width: 767px) {
  body { font-size: 13px; }
  .app-shell { min-height: 0; }
  .top-bar { grid-template-columns: 1fr; }
  .brand-slot img { width: clamp(96px, 32vw, 138px); max-height: 38px; }
  .top-user-area { grid-column: 1; }
  .system-status strong { font-size: 17px; }
  .content { gap: 10px; padding: 8px; }
  .status-bar { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
  .main-grid, .bottom-grid { gap: 10px; }
  .profile-panel canvas { height: 260px; min-height: 220px; }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sensor-dot-grid { grid-template-columns: repeat(auto-fit, minmax(18px, 1fr)); gap: 8px 5px; }
  .servo-table, .power-table { font-size: 12px; padding: 7px; }
  .servo-data-row { grid-template-columns: minmax(24px, 0.32fr) minmax(70px, 0.85fr) minmax(70px, 0.72fr) minmax(58px, 0.65fr); gap: 7px; }
  .power-table .table-head, .power-table .table-row { grid-template-columns: minmax(24px, 0.35fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(54px, 1fr) minmax(48px, 0.85fr); }
  .servo-position-readout strong { font-size: 14px; }
  .servo-test-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .servo-test-fine { justify-content: flex-start; }
  .table-row { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
}





.theme-group {
  display: grid;
  gap: 5px;
  padding: 7px 6px 4px;
}
.theme-group > span {
  color: var(--muted);
  font-size: 11px;
}
.theme-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.theme-options button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  text-align: center;
}
.theme-options button.active {
  border-color: var(--accent);
  background: rgba(22, 169, 212, 0.16);
  color: var(--accent2);
}
.dropdown-separator {
  height: 1px;
  margin: 5px 4px;
  background: var(--line2);
}


.page-view { min-width: 0; min-height: 0; }
.dashboard-view { display: contents; }
.process-view { grid-row: 2 / 4; align-self: start; display: grid; grid-template-rows: auto auto; gap: 12px; min-width: 0; min-height: 0; }
.process-view[hidden] { display: none !important; }
.process-side-grid, .process-lower-grid { display: grid; gap: 12px; min-width: 0; }
.process-side-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.process-lower-grid { grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); }
.process-card { min-height: 0; }
.process-card .panel-header strong { font-size: 12px; }
.process-card-body { display: grid; gap: 12px; padding: 14px; min-width: 0; }
.process-mini-profile { height: 58px; border: 1px solid var(--line2); border-radius: 4px; background: var(--panel3); position: relative; overflow: hidden; }
.process-mini-profile i { position: absolute; bottom: 0; width: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }
.process-facts { display: grid; gap: 8px; margin: 0; }
.process-facts div { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.process-facts dt { color: var(--text-muted); font-size: 12px; }
.process-facts dd { margin: 0; color: var(--text-primary); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.process-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.process-card button, .recipe-list button { min-height: 36px; border: 1px solid #2c6075; border-radius: 4px; background: var(--control-bg); color: var(--button-text); cursor: pointer; }
.process-card button:disabled, .recipe-list button:disabled { border-color: var(--line2); background: var(--control-disabled-bg); color: var(--disabled-text); cursor: not-allowed; }
.process-actions-row button { flex: 1 1 118px; padding: 0 10px; }
.recipe-list { display: grid; gap: 8px; padding: 14px 14px 0; min-width: 0; }
.recipe-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 12px; text-align: left; }
.recipe-list button.active { border-color: var(--accent); background: var(--menu-active-bg); color: var(--menu-active-text); }
.recipe-actions { padding: 14px; }
.parameter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; min-width: 0; }
.parameter-grid label { display: grid; gap: 5px; min-width: 0; color: var(--text-muted); font-size: 12px; }
.parameter-grid input, .parameter-grid select { width: 100%; min-width: 0; min-height: 34px; border: 1px solid var(--line); border-radius: 4px; background: var(--input-bg); color: var(--text-primary); padding: 0 9px; }
.parameter-grid input:disabled, .parameter-grid select:disabled { color: var(--disabled-text); background: var(--control-disabled-bg); }
@media (max-width: 1199px) {
  .process-view { grid-template-rows: auto auto; }
    .process-lower-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .process-side-grid { grid-template-columns: minmax(0, 1fr); }
  .parameter-grid { grid-template-columns: minmax(0, 1fr); }
  }
.hardware-view { grid-row: 2 / 4; align-self: start; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-areas: "sensors servos" "sensors power" "sensors io" "sensors interfaces"; grid-template-rows: auto auto auto auto; gap: 12px; min-width: 0; min-height: 0; }
.hardware-view[hidden] { display: none !important; }
.hardware-section { min-height: 0; }
.hardware-sensors { grid-area: sensors; }
.hardware-servos { grid-area: servos; }
.hardware-power { grid-area: power; }
.hardware-io { grid-area: io; }
.hardware-interfaces { grid-area: interfaces; }
.hardware-toolbar { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px 0; }
.hardware-toolbar button, .hardware-action { min-height: 30px; border: 1px solid #2c6075; border-radius: 4px; background: var(--control-bg); color: var(--button-text); cursor: pointer; padding: 0 10px; }
.hardware-toolbar button:disabled, .hardware-action:disabled { border-color: var(--line2); background: var(--control-disabled-bg); color: var(--disabled-text); cursor: not-allowed; }
.hardware-sensor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; padding: 12px; min-width: 0; }
.hardware-sensor-card { display: grid; gap: 4px; min-width: 0; padding: 8px; border: 1px solid var(--sensor-tile-border, var(--line2)); border-radius: 5px; background: var(--sensor-tile-bg, var(--panel3)); color: var(--sensor-tile-text, var(--text-primary)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); }
.hardware-sensor-card strong { color: var(--sensor-tile-strong, var(--sensor-tile-text, var(--text-primary))); }
.hardware-sensor-card span { color: var(--sensor-tile-muted, var(--text-muted)); font-size: 11px; overflow-wrap: anywhere; }
.hardware-sensor-card .sensor-status-text { color: var(--sensor-tile-status, var(--sensor-tile-strong, var(--text-primary))); font-weight: 800; }
.hardware-sensor-card.sensor-status-ok { --sensor-tile-bg: #123323; --sensor-tile-border: rgba(32, 200, 120, 0.42); --sensor-tile-text: #e4f8ef; --sensor-tile-muted: #a9d8c1; --sensor-tile-status: #9df0c2; }
.hardware-sensor-card.sensor-status-warning { --sensor-tile-bg: #3a2e10; --sensor-tile-border: rgba(229, 183, 56, 0.48); --sensor-tile-text: #fff5d6; --sensor-tile-muted: #e0c986; --sensor-tile-status: #ffd86a; }
.hardware-sensor-card.sensor-status-fault { --sensor-tile-bg: #3a161b; --sensor-tile-border: rgba(255, 91, 111, 0.52); --sensor-tile-text: #ffe4e8; --sensor-tile-muted: #e3a2ac; --sensor-tile-status: #ff8d9d; }
.hardware-sensor-card.sensor-status-offline { --sensor-tile-bg: #252c33; --sensor-tile-border: rgba(143, 164, 181, 0.34); --sensor-tile-text: #d8e1e8; --sensor-tile-muted: #9aa9b4; --sensor-tile-status: #bac6cf; }
.hardware-sensor-card.sensor-status-not-tested { --sensor-tile-bg: #1b2d3c; --sensor-tile-border: rgba(105, 151, 180, 0.38); --sensor-tile-text: #e3eef6; --sensor-tile-muted: #9fbbc9; --sensor-tile-status: #c4d7e4; }
.hardware-sensor-card.sensor-status-disabled { --sensor-tile-bg: #181d22; --sensor-tile-border: rgba(96, 115, 128, 0.26); --sensor-tile-text: #aeb9c1; --sensor-tile-muted: #73818b; --sensor-tile-status: #8f9aa3; opacity: 0.86; }
html[data-theme="LIGHT"] .hardware-sensor-card.sensor-status-ok { --sensor-tile-bg: #dff7e9; --sensor-tile-border: #86d7ad; --sensor-tile-text: #123d28; --sensor-tile-muted: #426b53; --sensor-tile-status: #0c7d42; }
html[data-theme="LIGHT"] .hardware-sensor-card.sensor-status-warning { --sensor-tile-bg: #fff2c9; --sensor-tile-border: #d9ae30; --sensor-tile-text: #4b3a0b; --sensor-tile-muted: #776232; --sensor-tile-status: #9b7100; }
html[data-theme="LIGHT"] .hardware-sensor-card.sensor-status-fault { --sensor-tile-bg: #ffe2e7; --sensor-tile-border: #ef9aa8; --sensor-tile-text: #5a1722; --sensor-tile-muted: #8a4a55; --sensor-tile-status: #c8243e; }
html[data-theme="LIGHT"] .hardware-sensor-card.sensor-status-offline { --sensor-tile-bg: #e6eaee; --sensor-tile-border: #b8c2cb; --sensor-tile-text: #26323b; --sensor-tile-muted: #61707c; --sensor-tile-status: #53606a; }
html[data-theme="LIGHT"] .hardware-sensor-card.sensor-status-not-tested { --sensor-tile-bg: #e6eef5; --sensor-tile-border: #b8cadd; --sensor-tile-text: #21384a; --sensor-tile-muted: #5c7285; --sensor-tile-status: #42677f; }
html[data-theme="LIGHT"] .hardware-sensor-card.sensor-status-disabled { --sensor-tile-bg: #dde2e7; --sensor-tile-border: #c3ccd4; --sensor-tile-text: #3d454c; --sensor-tile-muted: #737d86; --sensor-tile-status: #69727a; opacity: 0.86; }
.hardware-table { display: grid; gap: 8px; padding: 12px; min-width: 0; }
.hardware-row { display: grid; align-items: center; gap: 6px; min-width: 0; min-height: 38px; padding: 7px 8px; border: 1px solid var(--line2); border-radius: 5px; background: var(--panel3); }
.hardware-row span, .hardware-row strong { min-width: 0; overflow-wrap: anywhere; }
.hardware-row small { color: var(--text-muted); }
.hardware-servos .hardware-row { grid-template-columns: minmax(28px, 0.34fr) minmax(92px, 0.8fr) minmax(190px, 1.65fr) minmax(70px, 0.62fr) minmax(110px, 0.85fr); }
.hardware-power .hardware-row { grid-template-columns: minmax(46px, 0.45fr) minmax(78px, 0.75fr) minmax(78px, 0.75fr) minmax(78px, 0.75fr) minmax(76px, 0.7fr) minmax(70px, 0.7fr); }
.hardware-io .hardware-row { grid-template-columns: minmax(72px, 0.8fr) minmax(74px, 0.75fr) minmax(110px, 1fr) minmax(84px, 0.8fr) minmax(90px, 0.8fr); }
.hardware-row.header { min-height: 0; padding-top: 0; padding-bottom: 5px; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: transparent; color: var(--text-secondary); font-size: 11px; }
.hardware-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.threshold-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; padding: 0 12px 12px; }
.threshold-grid div { display: grid; gap: 3px; padding: 8px; border: 1px solid var(--line2); border-radius: 5px; background: var(--panel3); }
.threshold-grid span { color: var(--text-muted); font-size: 11px; }
.threshold-grid strong { color: var(--text-primary); }
.interface-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; padding: 12px; }
.interface-card { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line2); border-radius: 5px; background: var(--panel3); }
.interface-card strong { color: var(--text-primary); }
.interface-card span { color: var(--text-muted); font-size: 11px; }
@media (max-width: 1199px) {
  .hardware-view { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: auto; }
  .hardware-sensors, .hardware-servos, .hardware-power, .hardware-io, .hardware-interfaces { grid-area: auto; }
}
@media (max-width: 767px) {
  .hardware-sensor-grid { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; padding: 10px; }
  .hardware-servos .hardware-row, .hardware-power .hardware-row, .hardware-io .hardware-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hardware-servo-card .servo-data-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .servo-data-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hardware-row.header { display: none; }
  .hardware-actions { grid-column: 1 / -1; }
}
.diagnostics-view { grid-row: 2 / 4; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "health health" "sensors communication" "sensors chain" "faults events"; gap: 12px; min-width: 0; min-height: 0; }
.diagnostics-view[hidden] { display: none !important; }
.diagnostics-health-panel { grid-area: health; display: grid; grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.5fr) auto; align-items: center; gap: 12px; padding: 14px; }
.diagnostics-health-main { display: grid; gap: 6px; min-width: 0; }
.diagnostics-health-main h1 { font-size: 15px; color: var(--text-muted); }
.diagnostics-health-main strong { font-size: 26px; }
.diagnostics-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; min-width: 0; }
.diagnostics-health-item, .diagnostics-chain-item { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line2); border-radius: 5px; background: var(--panel3); min-width: 0; }
.diagnostics-health-item span, .diagnostics-chain-item span { color: var(--text-muted); font-size: 11px; }
.diagnostics-health-item strong, .diagnostics-chain-item strong { color: var(--text-primary); overflow-wrap: anywhere; }
.diagnostics-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
.diagnostics-actions button { min-height: 32px; border: 1px solid #2c6075; border-radius: 4px; background: var(--control-bg); color: var(--button-text); cursor: pointer; padding: 0 10px; }
.diagnostics-actions button:disabled { border-color: var(--line2); background: var(--control-disabled-bg); color: var(--disabled-text); cursor: not-allowed; }
.diagnostics-card { min-height: 0; }
.diagnostics-sensors-panel { grid-area: sensors; }
.diagnostics-communication-panel { grid-area: communication; }
.diagnostics-servo-chain-panel { grid-area: chain; }
.diagnostics-faults-panel { grid-area: faults; }
.diagnostics-events-panel { grid-area: events; }
.diagnostics-sensor-dots { display: grid; grid-template-columns: repeat(auto-fit, minmax(24px, 1fr)); gap: 8px 6px; padding: 12px; min-width: 0; }
.diagnostics-sensor-dot { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.diagnostics-sensor-dot span { color: var(--text-secondary); font-size: 10px; line-height: 1; }
.diagnostics-legend { margin-top: 0; }
.diagnostics-table { display: grid; gap: 7px; padding: 12px; min-width: 0; }
.diagnostics-row { display: grid; align-items: center; gap: 7px; min-width: 0; min-height: 36px; padding: 7px 8px; border: 1px solid var(--line2); border-radius: 5px; background: var(--panel3); }
.diagnostics-row span, .diagnostics-row strong { min-width: 0; overflow-wrap: anywhere; }
.diagnostics-row.header { min-height: 0; padding-top: 0; padding-bottom: 5px; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: transparent; color: var(--text-secondary); font-size: 11px; }
.diagnostics-sensor-issues .diagnostics-row, #diagnosticsSensorIssues .diagnostics-row { grid-template-columns: minmax(52px, 0.55fr) minmax(56px, 0.55fr) minmax(80px, 0.8fr) minmax(74px, 0.75fr) minmax(72px, 0.75fr); }
#diagnosticsCommunicationList .diagnostics-row { grid-template-columns: minmax(110px, 1fr) minmax(80px, 0.75fr) minmax(70px, 0.65fr) minmax(96px, 0.9fr); }
#diagnosticsServoPower .diagnostics-row { grid-template-columns: minmax(52px, 0.45fr) minmax(78px, 0.75fr) minmax(78px, 0.75fr) minmax(78px, 0.75fr) minmax(92px, 0.85fr); }
#diagnosticsFaults .diagnostics-row, #diagnosticsEvents .diagnostics-row { grid-template-columns: minmax(64px, 0.65fr) minmax(74px, 0.72fr) minmax(130px, 1fr) minmax(96px, 0.9fr); }
.diagnostics-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; padding: 12px 12px 0; }
@media (max-width: 1199px) {
  .diagnostics-view { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .diagnostics-health-panel, .diagnostics-sensors-panel, .diagnostics-communication-panel, .diagnostics-servo-chain-panel, .diagnostics-faults-panel, .diagnostics-events-panel { grid-area: auto; }
  .diagnostics-health-panel { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .diagnostics-actions { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .diagnostics-row.header { display: none; }
  #diagnosticsSensorIssues .diagnostics-row, #diagnosticsCommunicationList .diagnostics-row, #diagnosticsServoPower .diagnostics-row, #diagnosticsFaults .diagnostics-row, #diagnosticsEvents .diagnostics-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .diagnostics-sensor-dots { grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); gap: 7px 5px; }
}
.configuration-view { grid-row: 2 / 4; align-self: start; display: grid; min-width: 0; min-height: 0; }
.configuration-view[hidden] { display: none !important; }
.configuration-shell-panel { overflow: visible; }
.configuration-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); background: var(--panel2); }
.configuration-topline h1 { font-size: 17px; }
.configuration-topline span { color: var(--text-muted); font-size: 12px; }
.unsaved-badge { padding: 6px 9px; border: 1px solid var(--warn); border-radius: 999px; color: var(--warn); background: rgba(229, 183, 56, 0.12); font-size: 12px; white-space: nowrap; }
.configuration-tabs { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel3); }
.configuration-tabs button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 4px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.configuration-tabs button.active, .configuration-tabs button:hover { border-color: var(--accent); background: var(--menu-active-bg); color: var(--menu-active-text); }
.configuration-body { display: grid; min-width: 0; padding: 14px; }
.config-pane { display: none; min-width: 0; }
.config-pane.active { display: grid; gap: 14px; }
.config-grid { display: grid; gap: 12px; min-width: 0; }
.config-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.config-grid.compact-grid { grid-template-columns: minmax(160px, 240px); }
.config-grid label, .config-table label, .config-card-list label { display: grid; gap: 5px; min-width: 0; color: var(--text-muted); font-size: 12px; }
.config-grid input, .config-grid select, .config-table input, .config-table select, .config-card-list input, .config-card-list select { width: 100%; min-width: 0; min-height: 34px; border: 1px solid var(--line); border-radius: 4px; background: var(--input-bg); color: var(--text-primary); padding: 0 9px; }
.config-grid input:disabled, .config-grid select:disabled, .config-table input:disabled, .config-table select:disabled, .config-card-list input:disabled, .config-card-list select:disabled { color: var(--disabled-text); background: var(--control-disabled-bg); }
.readonly-field input { color: var(--text-secondary); background: var(--control-disabled-bg); }
.config-actions-inline, .configuration-footer, .config-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; min-width: 0; }
.config-actions-inline button, .configuration-footer button, .config-section-header button { min-height: 34px; padding: 0 12px; border: 1px solid #2c6075; border-radius: 4px; background: var(--control-bg); color: var(--button-text); cursor: pointer; }
.config-actions-inline button:disabled, .configuration-footer button:disabled, .config-section-header button:disabled { border-color: var(--line2); background: var(--control-disabled-bg); color: var(--disabled-text); cursor: not-allowed; }
.network-state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; min-width: 0; }
.network-state-grid div, .config-card, .config-sensor-card, .config-table-row { min-width: 0; padding: 10px; border: 1px solid var(--line2); border-radius: 5px; background: var(--panel3); }
.network-state-grid span, .config-card span, .config-sensor-card span { display: block; color: var(--text-muted); font-size: 11px; }
.network-state-grid strong, .config-card strong, .config-sensor-card strong { color: var(--text-primary); overflow-wrap: anywhere; }
.config-table, .config-card-list { display: grid; gap: 9px; min-width: 0; }
.config-table-row { display: grid; gap: 8px; align-items: end; min-width: 0; }
.config-table-row.io-row { grid-template-columns: minmax(76px, 0.7fr) minmax(78px, 0.6fr) minmax(96px, 0.7fr) minmax(130px, 1fr) minmax(120px, 0.85fr) minmax(86px, 0.65fr); }
.config-table-row.header { align-items: center; min-height: 0; padding-top: 0; padding-bottom: 6px; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: transparent; color: var(--text-secondary); font-size: 11px; }
.config-sensor-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 8px; min-width: 0; }
.config-sensor-card { display: grid; gap: 5px; }
.config-sensor-card.disabled { opacity: 0.58; }
.config-sensor-card label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 12px; }
.config-card { display: grid; gap: 12px; }
.config-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; min-width: 0; }
.config-readonly-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.config-readonly-grid div { padding: 8px; border: 1px solid var(--line2); border-radius: 4px; background: var(--panel2); }
.safety-warning { padding: 10px 12px; border: 1px solid var(--warn); border-radius: 5px; background: rgba(229, 183, 56, 0.10); color: var(--text-primary); }
.toggle-row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.toggle-row input { width: auto; min-height: auto; }
.configuration-footer { padding: 12px 14px; border-top: 1px solid var(--line); background: var(--panel2); }
.configuration-footer span { color: var(--text-muted); }
@media (max-width: 1199px) {
  .config-grid.two-col { grid-template-columns: minmax(0, 1fr); }
  .config-table-row.io-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .config-table-row.header { display: none; }
}
@media (max-width: 767px) {
  .configuration-topline { align-items: flex-start; flex-direction: column; }
  .configuration-tabs button { flex: 1 1 120px; }
  .config-table-row.io-row { grid-template-columns: minmax(0, 1fr); }
  .config-sensor-list { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .configuration-footer { align-items: stretch; flex-direction: column; }
  .configuration-footer div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}
.users-view { grid-row: 2 / 4; align-self: start; align-content: start; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, 0.9fr); gap: 12px; min-width: 0; min-height: 0; }
.users-view[hidden] { display: none !important; }
.users-panel, .users-sessions-panel { align-self: start; overflow: visible; }
.users-topline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); background: var(--panel2); }
.users-topline h1 { font-size: 17px; }
.users-topline span, .users-sessions-panel .panel-header span { color: var(--text-muted); font-size: 12px; }
.users-topline button, .users-action, .session-action, .first-setup button { min-height: 32px; padding: 0 10px; border: 1px solid #2c6075; border-radius: 4px; background: var(--control-bg); color: var(--button-text); cursor: pointer; }
.users-topline button:disabled, .users-action:disabled, .session-action:disabled { border-color: var(--line2); background: var(--control-disabled-bg); color: var(--disabled-text); cursor: not-allowed; }
.access-denied, .first-setup { margin: 14px; padding: 12px; border: 1px solid var(--warn); border-radius: 5px; background: rgba(229, 183, 56, 0.10); color: var(--text-primary); }
.first-setup { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.users-table, .sessions-table { display: grid; gap: 8px; padding: 14px; min-width: 0; }
.user-row, .session-row { display: grid; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line2); border-radius: 5px; background: var(--panel3); }
.user-row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr) minmax(0, 0.66fr) minmax(0, 0.48fr) minmax(0, 0.5fr) minmax(0, 0.82fr) minmax(210px, 1.55fr); }
.session-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sessions-table .session-row.header { display: none; }
.user-row.header, .session-row.header { min-height: 0; padding-top: 0; padding-bottom: 6px; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: transparent; color: var(--text-secondary); font-size: 11px; }
.user-row.disabled-user { opacity: 0.58; }
.user-row span, .user-row strong, .session-row span, .session-row strong { min-width: 0; overflow-wrap: anywhere; }
.user-actions { display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 5px; min-width: 0; }
.user-actions .users-action { min-width: 0; height: auto; min-height: 32px; padding: 3px 7px; font-size: 11px; line-height: 1.18; text-align: center; white-space: normal; overflow-wrap: normal; word-break: normal; }
.session-action { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.users-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 0 7px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel2); color: var(--text-secondary); font-size: 11px; }
.users-badge.enabled { border-color: rgba(32, 200, 120, 0.5); color: var(--ok); }
.users-badge.disabled { color: var(--offline); }
.user-editor-modal #userEditorMessage { min-height: 18px; color: var(--fault); }
@media (max-width: 1199px) {
  .users-view { grid-template-columns: minmax(0, 1fr); }
  .user-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .session-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-row.header, .session-row.header { display: none; }
  .user-actions { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(110px, 1fr)); }
}
@media (max-width: 767px) {
  .users-topline { align-items: flex-start; flex-direction: column; }
  .user-row, .session-row { grid-template-columns: minmax(0, 1fr); }
  .user-actions { grid-column: auto; grid-template-columns: repeat(2, minmax(112px, 1fr)); }
}
.user-editor-modal {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
}
.user-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
  border-bottom: 1px solid var(--line2);
  padding-bottom: 8px;
}
.user-editor-tabs button {
  min-height: 32px;
  border: 1px solid var(--line2);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
}
.user-editor-tabs button.active {
  border-color: var(--accent);
  background: var(--menu-active-bg);
  color: var(--menu-active-text);
}
.user-editor-tabs button:disabled {
  color: var(--disabled-text);
  cursor: not-allowed;
}
.user-editor-pane { display: none; min-width: 0; }
.user-editor-pane.active { display: grid; gap: 8px; }
.permissions-matrix {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.permission-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line2);
  border-radius: 5px;
  background: var(--panel3);
}
.permission-row.header {
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line2);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
}
.permission-row strong {
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.permission-row > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.permission-check {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px !important;
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 11px !important;
}
.permission-check input {
  width: 16px !important;
  min-height: 16px !important;
  accent-color: var(--accent);
}
.permission-check span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.permission-empty {
  color: var(--text-muted);
  font-size: 12px;
}
.user-row small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-weight: 400;
  font-size: 11px;
}
@media (max-width: 1199px) {
  .user-editor-modal { width: min(760px, calc(100vw - 28px)); }
  .permission-row { grid-template-columns: minmax(0, 1fr); }
  .permission-row.header { display: none; }
  .permission-row > div::before {
    display: block;
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
  }
  .permission-row > div:nth-child(2)::before { content: 'View'; }
  .permission-row > div:nth-child(3)::before { content: 'Change'; }
  .permission-row > div:nth-child(4)::before { content: 'Execute'; }
}
@media (max-width: 767px) {
  .user-editor-modal { width: calc(100vw - 18px); padding: 14px; }
  .user-actions { grid-template-columns: minmax(0, 1fr); }
}