/* ════════════════════════════════════════════════════════════
   Server Manager 2004 - Windows XP / SCADA Theme
   ════════════════════════════════════════════════════════════ */

:root {
  /* XP Classic colors */
  --xp-bg: #ECE9D8;
  --xp-face: #ECE9D8;
  --xp-light: #FFFFFF;
  --xp-mid: #ACA899;
  --xp-dark: #716F64;
  --xp-darker: #404040;
  --xp-window: #FFFFFF;
  --xp-highlight: #316AC5;
  --xp-highlight-text: #FFFFFF;
  --xp-title-active: #0A246A;
  --xp-title-grad: #3A6EA5;
  --xp-tab-active: #ECE9D8;
  --xp-tab-inactive: #D4D0C8;
  --xp-text: #000000;
  --xp-text-disabled: #ACA899;

  /* SCADA/Industrial accents */
  --led-green: #00CC00;
  --led-green-glow: #00FF00;
  --led-red: #CC0000;
  --led-red-glow: #FF0000;
  --led-orange: #CC8800;
  --led-orange-glow: #FFAA00;
  --led-off: #555555;
  --progress-green: #37B44A;

  --font: Tahoma, 'MS Sans Serif', Geneva, sans-serif;
  --font-mono: 'Lucida Console', 'Courier New', monospace;
}

/* ── Reset ────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

body.xp {
  font-family: var(--font);
  font-size: 11px;
  color: var(--xp-text);
  background: var(--xp-bg);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  user-select: none;
  cursor: default;
}

/* ── 3D Border Helpers ────────────────────── */

.border-raised {
  border: 2px solid;
  border-color: var(--xp-light) var(--xp-dark) var(--xp-dark) var(--xp-light);
}

.border-sunken {
  border: 2px solid;
  border-color: var(--xp-dark) var(--xp-light) var(--xp-light) var(--xp-dark);
}

/* ── Toolbar ──────────────────────────────── */

.xp-toolbar {
  background: var(--xp-face);
  border-bottom: 1px solid var(--xp-mid);
  padding: 3px 4px;
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

.xp-tbtn {
  background: transparent;
  border: 1px solid transparent;
  padding: 3px 8px;
  font: inherit;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: var(--xp-text);
}

.xp-tbtn:hover {
  border-color: var(--xp-highlight);
  background: #C1D2EE;
}

.xp-tbtn:active {
  border-color: var(--xp-highlight);
  background: #98B5E2;
}

/* Disjoncteur / Circuit Breaker Switch */
.breaker-box {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  user-select: none;
}
.breaker-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.breaker-label-on { color: #27ae60; }
.breaker-label-off { color: #888; }
.breaker-track {
  width: 22px;
  height: 40px;
  background: linear-gradient(180deg, #2c2c2c 0%, #4a4a4a 40%, #3a3a3a 100%);
  border: 2px solid #666;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.1);
}
.breaker-track:hover {
  border-color: #888;
}
.breaker-lever {
  width: 16px;
  height: 18px;
  background: linear-gradient(180deg, #e74c3c 0%, #c0392b 50%, #a93226 100%);
  border: 1px solid #922b21;
  border-radius: 2px;
  position: absolute;
  left: 1px;
  top: 1px;
  transition: top 0.15s ease-in-out, background 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.breaker-lever::after {
  content: '';
  display: block;
  width: 10px;
  height: 2px;
  background: rgba(255,255,255,0.3);
  margin: 4px auto 0;
  border-radius: 1px;
}
.breaker-lever.on {
  top: 1px;
  background: linear-gradient(180deg, #2ecc71 0%, #27ae60 50%, #1e8449 100%);
  border-color: #1e8449;
}
.breaker-lever.off {
  top: 17px;
  background: linear-gradient(180deg, #e74c3c 0%, #c0392b 50%, #a93226 100%);
  border-color: #922b21;
}

/* Overlay d'arrêt SM */
#shutdownOverlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 10, 20, 0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shutdown-content {
  text-align: center;
  color: #e0e0e0;
  font-family: 'Segoe UI', sans-serif;
}
.shutdown-content h2 { margin: 12px 0 8px; font-size: 1.4rem; }
.shutdown-content p { color: #888; font-size: 0.95rem; }

.xp-tb-sep {
  width: 1px;
  height: 22px;
  margin: 0 3px;
  border-left: 1px solid var(--xp-mid);
  border-right: 1px solid var(--xp-light);
}

.xp-tb-label {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  color: #555;
  font-size: 10px;
}

/* ── Toolbar Icons (CSS-only) ─────────────── */

.ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  flex-shrink: 0;
}

.ico-play-all::before {
  content: '';
  position: absolute;
  top: 2px; left: 3px;
  border: 6px solid transparent;
  border-left: 8px solid #228B22;
}
.ico-play-all::after {
  content: '';
  position: absolute;
  top: 2px; left: 8px;
  border: 6px solid transparent;
  border-left: 8px solid #228B22;
}

.ico-stop-all::before {
  content: '';
  position: absolute;
  top: 3px; left: 2px;
  width: 10px; height: 10px;
  background: #CC2222;
}

.ico-refresh::before {
  content: '\21BB';
  font-size: 14px;
  color: #2255AA;
  position: absolute;
  top: -1px; left: 1px;
}

/* ── Workspace (main split) ───────────────── */

.xp-workspace {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── Sidebar / Tree ───────────────────────── */

.xp-sidebar {
  width: 210px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  background: var(--xp-face);
  border-right: 1px solid var(--xp-mid);
}

.xp-sidebar-title {
  padding: 4px 8px;
  font-weight: bold;
  font-size: 11px;
  background: linear-gradient(180deg, var(--xp-title-grad), var(--xp-title-active));
  color: white;
}

.xp-tree {
  flex: 1;
  background: var(--xp-window);
  border: 2px solid;
  border-color: var(--xp-dark) var(--xp-light) var(--xp-light) var(--xp-dark);
  margin: 4px;
  overflow-y: auto;
  padding: 2px 0;
}

.tree-group-label {
  padding: 3px 8px;
  font-weight: bold;
  font-size: 10px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tree-item {
  padding: 3px 8px 3px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  white-space: nowrap;
}

.tree-item:hover {
  background: #E8E8E0;
}

.tree-item.selected {
  background: var(--xp-highlight);
  color: var(--xp-highlight-text);
}

.tree-item .tree-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid #333;
}

.tree-item .tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-item-system {
  margin-top: 4px;
  border-top: 1px solid var(--xp-mid);
  padding-top: 6px;
}

/* ── Resizer ──────────────────────────────── */

.xp-resizer {
  width: 5px;
  cursor: col-resize;
  background: var(--xp-face);
  border-left: 1px solid var(--xp-mid);
  border-right: 1px solid var(--xp-mid);
  flex-shrink: 0;
}

/* ── Content Area ─────────────────────────── */

.xp-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--xp-face);
}

/* ── Tabs ─────────────────────────────────── */

.xp-tabbar {
  display: flex;
  padding: 4px 4px 0;
  gap: 1px;
  background: var(--xp-face);
}

.xp-tab {
  padding: 4px 14px;
  background: var(--xp-tab-inactive);
  border: 1px solid var(--xp-mid);
  border-bottom: none;
  cursor: default;
  position: relative;
  top: 1px;
}

.xp-tab:hover {
  background: #DDD8CC;
}

.xp-tab.active {
  background: var(--xp-tab-active);
  border-bottom: 1px solid var(--xp-tab-active);
  font-weight: bold;
  z-index: 1;
}

.xp-tabpanel {
  flex: 1;
  border: 1px solid var(--xp-mid);
  border-top: 1px solid var(--xp-mid);
  margin: 0 4px 4px;
  background: var(--xp-face);
  overflow-y: auto;
  padding: 8px;
}

/* ── Empty state ──────────────────────────── */

.xp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--xp-text-disabled);
  font-size: 12px;
}

.xp-empty-icon::before {
  content: '\2190';
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
}

/* ── XP Buttons ───────────────────────────── */

.xp-btn {
  font: inherit;
  padding: 3px 12px;
  background: var(--xp-face);
  border: 2px solid;
  border-color: var(--xp-light) var(--xp-dark) var(--xp-dark) var(--xp-light);
  cursor: default;
  white-space: nowrap;
  color: var(--xp-text);
}

.xp-btn:hover {
  background: #E8E4D8;
}

.xp-btn:active {
  border-color: var(--xp-dark) var(--xp-light) var(--xp-light) var(--xp-dark);
  padding: 4px 11px 2px 13px;
}

.xp-btn:disabled {
  color: var(--xp-text-disabled);
  cursor: default;
}

.xp-btn-xs {
  padding: 1px 6px;
  font-size: 10px;
  border-width: 1px;
}

.xp-btn-start { color: #006600; font-weight: bold; }
.xp-btn-stop { color: #CC0000; font-weight: bold; }
.xp-btn-restart { color: #886600; font-weight: bold; }

/* ── Group Box (fieldset) ─────────────────── */

.xp-group {
  border: 1px solid var(--xp-mid);
  padding: 10px 10px 8px;
  margin: 0 0 8px;
}

.xp-group legend {
  font-size: 11px;
  color: #003399;
  padding: 0 4px;
  font-weight: normal;
}

/* ── Info Table ───────────────────────────── */

.xp-info-table {
  border-collapse: collapse;
  width: 100%;
}

.xp-info-table td {
  padding: 2px 4px;
  vertical-align: top;
}

.xp-info-table .lbl {
  width: 130px;
  color: #444;
  white-space: nowrap;
}

.xp-info-table .val {
  font-weight: bold;
  word-break: break-all;
}

/* ── LED Indicators ───────────────────────── */

.led {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #333;
  vertical-align: middle;
  flex-shrink: 0;
}

.led-green {
  background: radial-gradient(circle at 35% 30%, #66FF66, var(--led-green) 60%);
  box-shadow: 0 0 4px var(--led-green-glow);
}

.led-red {
  background: radial-gradient(circle at 35% 30%, #FF6666, var(--led-red) 60%);
  box-shadow: 0 0 4px var(--led-red-glow);
}

.led-orange {
  background: radial-gradient(circle at 35% 30%, #FFCC44, var(--led-orange) 60%);
  box-shadow: 0 0 4px var(--led-orange-glow);
}

.led-off {
  background: radial-gradient(circle at 35% 30%, #888, var(--led-off) 60%);
  box-shadow: none;
}

.led-blink { animation: led-blink 0.8s infinite; }

@keyframes led-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Progress Bars (XP Green Blocks) ──────── */

.xp-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.xp-progress-label {
  width: 40px;
  text-align: right;
  font-weight: bold;
  font-size: 10px;
  color: #444;
}

.xp-progress {
  flex: 1;
  height: 17px;
  background: var(--xp-window);
  border: 2px solid;
  border-color: var(--xp-dark) var(--xp-light) var(--xp-light) var(--xp-dark);
  padding: 1px;
  position: relative;
}

.xp-progress-fill {
  height: 100%;
  background-color: var(--progress-green);
  background-image: repeating-linear-gradient(
    90deg,
    var(--progress-green) 0px,
    var(--progress-green) 7px,
    #2D9B3C 7px,
    #2D9B3C 8px,
    transparent 8px,
    transparent 10px
  );
  transition: width 0.5s;
}

.xp-progress-fill.high {
  --progress-green: #CC3333;
  background-image: repeating-linear-gradient(
    90deg,
    #CC3333 0px, #CC3333 7px,
    #AA2222 7px, #AA2222 8px,
    transparent 8px, transparent 10px
  );
}

.xp-progress-value {
  width: 80px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
}

/* ── Action Buttons Row ───────────────────── */

.xp-actions {
  display: flex;
  gap: 6px;
  padding: 4px 0;
}

/* ── Server Status Row ────────────────────── */

.status-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-text {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.status-text.running { color: #006600; }
.status-text.stopped { color: #888; }
.status-text.starting, .status-text.stopping { color: #886600; }
.status-text.error { color: #CC0000; }

/* ── Log Viewer (inside tab) ──────────────── */

.xp-log-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 2px 0;
}

.xp-input {
  font: 11px var(--font);
  padding: 2px 4px;
  border: 2px solid;
  border-color: var(--xp-dark) var(--xp-light) var(--xp-light) var(--xp-dark);
  background: var(--xp-window);
}

.xp-input:focus {
  outline: none;
  border-color: var(--xp-highlight);
}

.xp-log-view {
  background: var(--xp-window);
  border: 2px solid;
  border-color: var(--xp-dark) var(--xp-light) var(--xp-light) var(--xp-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  overflow-y: auto;
  height: calc(100% - 30px);
  padding: 2px;
}

.log-line {
  padding: 0 4px;
  white-space: pre-wrap;
  word-break: break-all;
  display: flex;
  gap: 8px;
}

.log-line:hover {
  background: #F0F0E8;
}

.log-line.hidden { display: none; }

.log-ts {
  color: #888;
  flex-shrink: 0;
  user-select: none;
}

.log-type-badge {
  width: 36px;
  text-align: center;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: bold;
  padding: 0 2px;
}

.log-type-badge.stdout { color: #333; }
.log-type-badge.stderr { color: #CC0000; background: #FFE0E0; }
.log-type-badge.system { color: #003399; background: #E0E8FF; }
.log-type-badge.warn { color: #886600; background: #FFF4CC; }

.log-msg {
  flex: 1;
  min-width: 0;
}

.log-line.stderr .log-msg { color: #CC0000; }
.log-line.system .log-msg { color: #003399; }
.log-line.warn .log-msg { color: #886600; }

/* ── Event Log (Bottom Panel) ─────────────── */

.xp-eventlog {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 2px solid;
  border-color: var(--xp-light) var(--xp-dark) var(--xp-dark) var(--xp-light);
}

.xp-eventlog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 8px;
  background: linear-gradient(180deg, var(--xp-title-grad), var(--xp-title-active));
  color: white;
  font-weight: bold;
  font-size: 11px;
}

.xp-eventlog-actions {
  display: flex;
  gap: 4px;
}

.xp-eventlog-actions .xp-btn-xs {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.3);
}

.xp-eventlog-actions .xp-btn-xs:hover {
  background: rgba(255,255,255,0.15);
}

.xp-eventlog-body {
  height: 120px;
  overflow-y: auto;
  background: var(--xp-window);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  padding: 2px;
}

.xp-eventlog-body.collapsed {
  height: 0;
  overflow: hidden;
}

.evt-line {
  padding: 0 4px;
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.evt-line:hover { background: #F0F0E8; }
.evt-line .evt-ts { color: #888; flex-shrink: 0; }
.evt-line .evt-src { color: #003399; width: 120px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; font-weight: bold; }
.evt-line .evt-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.evt-line.stderr .evt-msg { color: #CC0000; }
.evt-line.warn .evt-msg { color: #886600; }

/* ── Status Bar ───────────────────────────── */

.xp-statusbar {
  display: flex;
  background: var(--xp-face);
  border-top: 1px solid var(--xp-light);
  flex-shrink: 0;
}

.xp-sb-panel {
  padding: 2px 8px;
  border: 1px solid;
  border-color: var(--xp-dark) var(--xp-light) var(--xp-light) var(--xp-dark);
  font-size: 11px;
  white-space: nowrap;
}

.xp-sb-main {
  flex: 1;
}

.xp-sb-clock {
  font-family: var(--font-mono);
  font-weight: bold;
  min-width: 65px;
  text-align: center;
}

/* ── XP Scrollbars ────────────────────────── */

::-webkit-scrollbar {
  width: 17px;
  height: 17px;
}

::-webkit-scrollbar-track {
  background: #F1EFE2;
}

::-webkit-scrollbar-thumb {
  background: var(--xp-face);
  border: 1px solid;
  border-color: var(--xp-light) var(--xp-dark) var(--xp-dark) var(--xp-light);
}

::-webkit-scrollbar-thumb:hover {
  background: #D8D4C8;
}

::-webkit-scrollbar-button {
  background: var(--xp-face);
  border: 1px solid;
  border-color: var(--xp-light) var(--xp-dark) var(--xp-dark) var(--xp-light);
  width: 17px;
  height: 17px;
}

::-webkit-scrollbar-corner {
  background: var(--xp-face);
}

/* ── Response time coloring ───────────────── */

.rt-good { color: #006600; }
.rt-warn { color: #886600; }
.rt-bad { color: #CC0000; }

/* ── System monitor special ───────────────── */

.sys-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sys-overview .xp-group {
  margin: 0;
}

/* ── Digital readout (SCADA style) ─────────── */

.xp-readout {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: bold;
  color: #00CC00;
  background: #111;
  border: 2px solid;
  border-color: var(--xp-dark) var(--xp-light) var(--xp-light) var(--xp-dark);
  padding: 4px 10px;
  text-align: center;
  text-shadow: 0 0 6px #00FF0066;
  letter-spacing: 2px;
}

.xp-readout.warn { color: #FFAA00; text-shadow: 0 0 6px #FFAA0066; }
.xp-readout.bad { color: #FF3333; text-shadow: 0 0 6px #FF333366; }

/* ── Server card in general tab ───────────── */

.server-readouts {
  display: flex;
  gap: 8px;
  margin: 6px 0;
}

.server-readout-box {
  text-align: center;
  flex: 1;
}

.server-readout-box .readout-label {
  font-size: 9px;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 2px;
}

.server-readout-box .xp-readout {
  font-size: 16px;
  padding: 3px 6px;
}

/* ── Checkbox style ───────────────────────── */

.xp-check-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: default;
  font-size: 11px;
}

.xp-check-label input[type="checkbox"] {
  margin: 0;
}

/* ── Dashboard Grid ──────────────────────── */

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dash-card {
  background: var(--xp-face);
  border: 2px solid;
  border-color: var(--xp-light) var(--xp-dark) var(--xp-dark) var(--xp-light);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s;
}

.dash-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: linear-gradient(180deg, #F6F3EB, #E8E4D8);
  border-bottom: 1px solid var(--xp-mid);
}

.dash-card-header .led {
  width: 10px;
  height: 10px;
}

.dash-card-name {
  font-weight: bold;
  font-size: 11px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-card-badge {
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border: 1px solid;
}

.dash-card-badge.running {
  color: #006600;
  background: #E0FFE0;
  border-color: #88CC88;
}

.dash-card-badge.stopped {
  color: #666;
  background: #EFEFEF;
  border-color: #BBB;
}

.dash-card-badge.starting, .dash-card-badge.stopping {
  color: #886600;
  background: #FFF8E0;
  border-color: #CCAA44;
}

.dash-card-badge.error {
  color: #CC0000;
  background: #FFE0E0;
  border-color: #CC8888;
}

.dash-card-body {
  padding: 6px 8px;
  flex: 1;
}

.dash-card-readouts {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.dash-card-readouts .server-readout-box {
  flex: 1;
  text-align: center;
}

.dash-card-readouts .readout-label {
  font-size: 8px;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 1px;
}

.dash-card-readouts .xp-readout {
  font-size: 12px;
  padding: 2px 4px;
  letter-spacing: 1px;
}

.dash-card-info {
  font-size: 10px;
  color: #555;
  margin-bottom: 4px;
  display: flex;
  gap: 10px;
}

.dash-card-info span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-card-info .info-label {
  color: #888;
}

.dash-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-top: 1px solid var(--xp-mid);
  background: #F0EDE2;
}

.dash-card-actions .xp-btn {
  padding: 2px 8px;
  font-size: 10px;
}

.dash-card-actions .dash-details-link {
  margin-left: auto;
  color: var(--xp-highlight);
  text-decoration: underline;
  font-size: 10px;
  cursor: pointer;
}

.dash-card-actions .dash-details-link:hover {
  color: #4488DD;
}

/* Color accents on card left border based on status */
.dash-card.status-running {
  border-left: 3px solid var(--led-green);
}

.dash-card.status-stopped {
  border-left: 3px solid var(--xp-mid);
}

.dash-card.status-starting, .dash-card.status-stopping {
  border-left: 3px solid var(--led-orange);
}

.dash-card.status-error {
  border-left: 3px solid var(--led-red);
}

/* Dashboard tree item style */
.tree-item-dashboard {
  border-bottom: 1px solid var(--xp-mid);
  padding-bottom: 4px;
  margin-bottom: 2px;
}

.tree-item-dashboard .tree-dash-icon {
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, #316AC5, #6CA0DC);
  border: 1px solid #1a3a6a;
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── Login Screen (Windows XP Welcome) ───── */

.login-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #002B5C 0%, #0A246A 20%, #3A6EA5 50%, #6CA0DC 80%, #89B4E0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
}

.login-overlay.hidden {
  display: none;
}

.login-dialog {
  width: 420px;
  background: var(--xp-face);
  border: 2px solid;
  border-color: var(--xp-light) var(--xp-dark) var(--xp-dark) var(--xp-light);
  box-shadow: 4px 4px 16px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.1);
}

.login-titlebar {
  background: linear-gradient(180deg, #0A246A 0%, #245DAE 50%, #3A6EA5 100%);
  color: white;
  font-weight: bold;
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

.login-titlebar-icon {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 35% 30%, #66FF66, #00AA00 60%);
  border: 1px solid #006600;
  border-radius: 2px;
  flex-shrink: 0;
}

.login-body {
  display: flex;
  padding: 20px 20px 12px;
  gap: 20px;
}

.login-icon {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.login-icon-monitor {
  width: 56px;
  height: 44px;
  background: #2a2a2a;
  border: 3px solid #555;
  border-radius: 4px 4px 2px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
}

.login-icon-screen {
  width: 42px;
  height: 30px;
  background: linear-gradient(135deg, #0A246A 0%, #3A6EA5 50%, #6CA0DC 100%);
  border: 1px solid #111;
  position: relative;
  overflow: hidden;
}

.login-icon-screen::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px; right: 2px; bottom: 2px;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.05) 2px,
    rgba(0,0,0,0.05) 4px
  );
}

.login-icon-led {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: var(--led-green);
  border-radius: 50%;
  box-shadow: 0 0 3px var(--led-green-glow);
}

.login-icon-stand {
  width: 24px;
  height: 8px;
  background: #555;
  border-radius: 0 0 4px 4px;
  margin-top: 6px;
}

.login-form {
  flex: 1;
}

.login-field {
  margin-bottom: 10px;
}

.login-field label {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  color: #333;
}

.login-field .xp-input {
  width: 100%;
  padding: 4px 6px;
  font-size: 12px;
}

.login-error {
  color: #CC0000;
  font-size: 11px;
  min-height: 16px;
  margin-bottom: 6px;
  font-weight: bold;
}

.login-actions {
  text-align: right;
}

.login-submit-btn {
  min-width: 100px;
  padding: 4px 16px !important;
  font-weight: bold;
  font-size: 12px;
}

.login-submit-btn:disabled {
  color: var(--xp-text-disabled);
}

.login-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: linear-gradient(180deg, #E8E4D8, #D8D4C8);
  border-top: 1px solid var(--xp-mid);
  font-size: 10px;
  color: #555;
}

.login-footer .led {
  width: 8px;
  height: 8px;
}

/* ── Toolbar Auth Icons ──────────────────── */

.ico-user::before {
  content: '\263A';
  font-size: 13px;
  color: #316AC5;
  position: absolute;
  top: 0; left: 1px;
}

.ico-logout::before {
  content: '\2192';
  font-size: 14px;
  color: #CC2222;
  position: absolute;
  top: -1px; left: 2px;
}

#authIndicator {
  font-weight: bold;
  color: #003399;
  font-size: 11px;
}

/* ── External Process Badge ─────────────── */

.badge-external {
  display: inline-block;
  font-size: 8px;
  font-weight: bold;
  color: #FFFFFF;
  background: #886600;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}