real-world-css-libraries 1.0.2 → 1.0.4

package/libs/proxmorph-v2.7.3.css

@@ -0,0 +1,3952 @@
+/* https://github.com/IT-BAER/proxmorph/blob/main/themes/theme-unifi.css */
+/*!UniFi*/
+/*
+ * ProxMorph Theme: UniFi
+ * Authentic recreation of Ubiquiti UniFi Network Application UI
+ * Version: 5.94
+ * Author: N.E.S.T. / Dr. Dranglog
+ * 
+ * UniFi Color Palette (extracted from live instance):
+ * 
+ * BACKGROUNDS:
+ * - Base/Body: #131416 (rgb 19,20,22) - main dark background
+ * - Header: #282B2F (rgb 40,43,47) - top navigation bar
+ * - Hover solid: #34383D (rgb 52,56,61) - button hover
+ * - Hover subtle: rgba(249, 250, 250, 0.02) - row hover
+ * - Hover medium: rgba(249, 250, 250, 0.04) - tertiary hover
+ * - Hover strong: rgba(249, 250, 250, 0.07) - input hover
+ * 
+ * TEXT COLORS:
+ * - Primary: #DEE0E3 (rgb 222,224,227) - main text
+ * - Secondary: #B7BCC2 (rgb 183,188,194) - labels
+ * - Bright: #F9FAFA (rgb 249,250,250) - headings/emphasis
+ * - Muted: rgba(255, 255, 255, 0.65) - sidebar text
+ * - Tertiary: #737C87 (rgb 115,124,135) - disabled/hints
+ * 
+ * ACCENT COLORS:
+ * - Primary Blue: #006EFF - links, active states
+ * - Blue Hover: #4797FF (rgb 71,151,255)
+ * - Success: #37BE5F (rgb 55,190,95)
+ * - Warning: #f5a623
+ * - Danger: #f03a3e
+ * 
+ * CSS VARIABLES (official Ubiquiti):
+ * - --ubnt-color-DN60: #151725 (darkest neutral)
+ * - --ubnt-color-DN50: #242635 (card background)
+ * - --ubnt-color-primary: #006fff
+ */
+
+/* =====================================================
+   CSS VARIABLES
+   ===================================================== */
+:root {
+    /* UniFi design tokens (only the ones actually used) */
+    --ubnt-color-primary: #006fff;
+    --ubnt-color-danger: #f03a3e;
+    --ubnt-color-warning: #f5a623;
+    --ubnt-color-success: #39cc64;
+
+    /* ProxMorph semantic variables */
+    --pm-accent: #006EFF;
+    --pm-accent-hover: #4797FF;
+    --pm-accent-active: #0058cc;
+
+    --pm-success: #37BE5F;
+    --pm-warning: var(--ubnt-color-warning);
+    --pm-error: var(--ubnt-color-danger);
+
+    /* Base palette tuned to Proxmox UI (keeps existing theme look) */
+    --pm-bg-base: #131416;
+    --pm-bg-surface: #282B2F;
+    --pm-bg-elevated: #34383D;
+
+    --pm-border: #34383D;
+    --pm-border-strong: #444444;
+
+    --pm-text: #DEE0E3;
+    --pm-text-dim: #B7BCC2;
+    --pm-text-muted: #B7BCC2;
+    --pm-text-disabled: #737C87;
+    --pm-text-bright: #F9FAFA;
+
+    --pm-hover-subtle: rgba(249, 250, 250, 0.02);
+    --pm-hover-medium: rgba(249, 250, 250, 0.04);
+    --pm-hover-strong: rgba(249, 250, 250, 0.07);
+
+    --pm-radius-sm: 4px;
+    --pm-radius-md: 6px;
+    --pm-radius-lg: 8px;
+    --pm-radius-xl: 12px;
+
+    --pm-focus-ring-color: rgba(0, 111, 255, 0.15);
+
+    /* Proxmox widget toolkit variables */
+    --pwt-panel-background: var(--pm-bg-base);
+    --pwt-text-color: var(--pm-text-dim);
+    --pwt-gauge-default: var(--pm-accent-hover);
+    --pwt-gauge-back: var(--pm-bg-elevated);
+    --pwt-gauge-warn: var(--pm-warning);
+    --pwt-gauge-crit: var(--pm-error);
+    --pwt-chart-primary: var(--pm-success);
+    --pwt-chart-grid-stroke: var(--pm-border);
+
+    color-scheme: dark;
+}
+
+/* =====================================================
+   GLOBAL BORDER-BOX ROUNDED CORNERS (UniFi style)
+   ===================================================== */
+.x-border-box,
+.x-border-box * {
+    border-radius: var(--pm-radius-lg);
+}
+
+/* Remove rounded corners from grids/tables/lists (Tasks, logs) */
+.x-grid,
+.x-grid *,
+.x-grid-header-ct,
+.x-grid-header-ct *,
+.x-grid-view,
+.x-grid-view *,
+.x-column-header,
+.x-column-header *,
+.x-grid-item,
+.x-grid-cell,
+.x-grid-cell-inner,
+.x-grid-row,
+table,
+table *,
+tr,
+td,
+th,
+/* Legend elements - no rounded corners */
+.x-legend,
+.x-legend *,
+.x-legend-container,
+.x-legend-container *,
+.x-legend-item,
+.x-legend-horizontal .x-legend-item,
+.x-legend-vertical .x-legend-item,
+.x-legend-horizontal .x-legend-item:first-child,
+.x-legend-horizontal .x-legend-item:last-child,
+.x-legend-vertical .x-legend-item:first-child,
+.x-legend-vertical .x-legend-item:last-child,
+/* Tool icons - no rounded corners */
+.x-tool,
+.x-tool-tool-el,
+.x-tool-default,
+.x-tool-img {
+    border-radius: 0 !important;
+}
+
+/* Form elements - exclude from global 8px, apply 4px (UniFi style) */
+/* Reset ALL form-related parent containers to prevent 8px inheritance */
+.x-form-item,
+.x-form-item-default,
+.x-form-item-body,
+.x-form-item-body-default,
+.x-form-text-field-body,
+.x-form-text-field-body-default,
+.x-form-fieldcontainer,
+.x-field,
+.x-field-default,
+.x-form-type-text {
+    border-radius: 0 !important;
+}
+
+/* Reset layout containers that clip form elements with overflow:hidden + 8px radius */
+.x-box-layout-ct,
+.x-panel-bodyWrap,
+.x-panel-bodyWrap-default,
+.x-autocontainer-innerCt,
+.x-autocontainer-outerCt,
+.x-panel.x-tabpanel-child,
+.x-panel.x-box-item,
+.x-box-inner,
+.x-box-target,
+.x-container,
+.x-container-default,
+/* Window/dialog inner bodies - prevent 8px clipping on form elements */
+.x-window .x-panel-body,
+.x-window .x-window-body,
+.x-window .x-window-bodyWrap {
+    border-radius: 0 !important;
+}
+
+/* Restore right border for grids inside windows (fixed v5.4 over-reach) */
+.x-window .x-panel-body.x-grid-body {
+    border-right: 1px solid #34383D !important;
+}
+
+/* =====================================================
+   v5.73: WINDOW/MODAL BORDER-RADIUS CONSISTENCY
+   Reset all children to 0, then re-apply specific radii
+   to ensure consistent 8px corners on login/modals
+   ===================================================== */
+
+/* 1. Reset everything inside windows to 0 - overrides global x-border-box rule */
+.x-window *,
+.x-window .x-autocontainer-innerCt,
+.x-window .x-autocontainer-outerCt,
+.x-window .x-form-layout-wrap,
+.x-window .x-form-layout-auto-label,
+.x-window .x-form-layout-colgroup,
+.x-window .x-form-layout-column,
+.x-window .x-field,
+.x-window .x-form-item,
+.x-window .x-form-item-body {
+    border-radius: 0 !important;
+}
+
+/* 2. Window container - consistent 8px with overflow hidden */
+.x-window {
+    border-radius: 8px !important;
+    overflow: hidden !important;
+    min-width: 295px !important;
+    /* v5.85: Match Proxmox default to prevent scrollbars */
+}
+
+/* v5.86: Fix dialog header/body not matching dialog width when min-width is applied
+   Root cause: ExtJS sets inline width on header/body that's smaller than min-width forces.
+   Solution: Force header/body to use 100% width so they inherit parent's computed width. */
+.x-window > .x-window-header,
+.x-window > .x-window-body,
+.x-window > .x-window-bodyWrap,
+.x-window-bodyWrap > .x-window-body {
+    width: 100% !important;
+}
+
+/* Ensure box containers inside header use full width */
+.x-window-header > .x-box-inner,
+.x-window-header > .x-box-inner > .x-box-target {
+    width: 100% !important;
+}
+
+/* Header title should expand appropriately */
+.x-window-header-title {
+    width: auto !important;
+    flex: 1 !important;
+    max-width: calc(100% - 30px) !important;
+}
+
+/* 3. Window header - top corners only */
+.x-window-header,
+.x-window-header-default {
+    border-radius: 8px 8px 0 0 !important;
+}
+
+/* 4. Re-apply button styling inside windows (6px) */
+.x-window .x-btn {
+    border-radius: 6px !important;
+}
+
+/* 5. Re-apply checkbox styling inside windows (4px) */
+.x-window .x-form-checkbox {
+    border-radius: 4px !important;
+}
+
+/* 6. Re-apply form inputs inside windows (4px with split corners) */
+.x-window .x-form-trigger-wrap,
+.x-window .x-form-trigger-wrap-default {
+    border-radius: 4px !important;
+}
+
+.x-window .x-form-text-wrap,
+.x-window .x-form-text {
+    border-radius: 4px 0 0 4px !important;
+}
+
+.x-window .x-form-arrow-trigger {
+    border-radius: 0 4px 4px 0 !important;
+}
+
+.x-form-trigger-wrap,
+.x-form-trigger-wrap *,
+.x-form-text-wrap,
+.x-form-text-wrap *,
+.x-form-text,
+.x-form-trigger {
+    border-radius: 0 !important;
+}
+
+/* Form element containers - 4px radius (UniFi consistent) */
+.x-form-trigger-wrap,
+.x-form-trigger-wrap-default {
+    border-radius: 4px !important;
+    overflow: hidden !important;
+}
+
+/* Constrain autocontainer width (Moved from L3450) */
+.x-window .x-autocontainer-outerCt {
+    max-width: 100% !important;
+}
+
+/* Form text wrap - left side rounded */
+.x-form-text-wrap,
+.x-form-text-wrap-default {
+    border-radius: 4px 0 0 4px !important;
+}
+
+/* Form input text - left side rounded */
+.x-form-text,
+.x-form-text-default {
+    border-radius: 4px 0 0 4px !important;
+}
+
+/* Form trigger button - right side rounded */
+.x-form-trigger,
+.x-form-trigger-default,
+.x-form-arrow-trigger,
+.x-form-arrow-trigger-default {
+    border-radius: 0 4px 4px 0 !important;
+}
+
+/* Cursor styles for combobox/dropdown elements (pointer indicates clickable) */
+.x-form-trigger-wrap,
+.x-form-text-wrap,
+.x-form-field[role="combobox"],
+input.x-form-text[readonly],
+.x-form-trigger,
+.x-form-arrow-trigger {
+    cursor: pointer !important;
+}
+
+/* Cursor for dropdown list items */
+.x-boundlist-item,
+.x-boundlist-item-over,
+.x-boundlist-selected {
+    cursor: pointer !important;
+}
+
+/* =====================================================
+   BASE / BODY - Authentic UniFi dark background
+   ===================================================== */
+.x-body {
+    color: var(--pm-text);
+    background-color: var(--pm-bg-base);
+}
+
+.x-viewport>.x-body {
+    background-color: var(--pm-bg-base);
+}
+
+body.x-border-layout-ct,
+div.x-border-layout-ct {
+    background-color: var(--pm-bg-base);
+}
+
+/* =====================================================
+   LEGEND / CHARTS - Ensure chart visibility
+   ===================================================== */
+.x-legend-container {
+    background-color: var(--pm-bg-base);
+    border-radius: 0 !important;
+}
+
+.x-legend-horizontal .x-legend-item,
+.x-legend-item {
+    background-color: var(--pm-bg-base);
+    color: var(--pm-text-muted);
+    border: none !important;
+    border-radius: 0 !important;
+}
+
+/* Legend color marker (dot) - keep circular */
+.x-legend-item-marker {
+    border-radius: 50% !important;
+}
+
+/* Chart canvas and SVG visibility */
+.x-chart,
+.rrd-chart canvas,
+canvas.x-surface {
+    opacity: 1 !important;
+}
+
+/* Chart grid lines */
+.x-chart-grid-horizontal line,
+.x-chart-grid-vertical line {
+    stroke: #34383D !important;
+    stroke-opacity: 1 !important;
+}
+
+/* Chart axis text */
+.x-chart-axis-label {
+    fill: #B7BCC2 !important;
+}
+
+/* RRDTool charts (Proxmox specific) - ensure PNG charts are visible */
+img.rrdimage,
+.rrd-chart img,
+div[class*="rrd"] img {
+    filter: none !important;
+    opacity: 1 !important;
+}
+
+/* =====================================================
+   MASKS & OVERLAYS
+   ===================================================== */
+.x-mask {
+    /* v5.48: Background blur + 0.5 opacity */
+    backdrop-filter: blur(4px) !important;
+    -webkit-backdrop-filter: blur(4px) !important;
+    background-color: rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Disabled field-groups: keep the native "reduced opacity" look (no black mask overlay) */
+.x-item-disabled.x-masked-relative>.x-mask {
+    background-color: transparent !important;
+}
+
+.x-tool .x-mask {
+    backdrop-filter: blur(4px);
+    background-color: #131416;
+    opacity: 0.6;
+}
+
+/* v5.50: Hide ExtJS shadow element - use pure CSS shadow on window instead */
+.x-css-shadow {
+    display: none !important;
+}
+
+/* =====================================================
+   ICONS - Inverted for dark mode
+   ===================================================== */
+/* General icons - gray color */
+.fa-tags::before,
+.fa-file-o::before,
+.fa-building::before,
+.x-action-col-icon::before,
+.fa-shield::before,
+.fa-file-text-o::before,
+.fa-clock-o::before,
+.x-tab-icon-el-default,
+.pve-icon-verify-lettering::after,
+.x-tree-icon-custom.lock-migrate::after,
+.x-grid-icon-custom.lock-migrate::after,
+.x-tree-icon-leaf:not(.x-tree-icon-custom)::before,
+.x-tree-icon-parent:not(.x-tree-icon-custom)::before,
+.x-tree-icon-parent-expanded:not(.x-tree-icon-custom)::before,
+.x-grid-filters-filtered-column .x-column-header-text::after {
+    color: #B7BCC2;
+}
+
+/* VM/CT icons - default gray, NOT green */
+.x-tree-icon-custom,
+.x-grid-icon-custom {
+    color: #B7BCC2;
+}
+
+.x-tree-icon-parent:not(.x-tree-icon-custom)::before,
+.x-tree-icon-parent-expanded:not(.x-tree-icon-custom)::before {
+    filter: invert(90%);
+}
+
+.fa-ceph::before,
+.fa-sdn::before,
+.fa-network-wired::before,
+.pve-itype-treelist-item-icon-cdrom,
+.fa-chevron-right::before,
+.x-grid-row-console,
+.x-box-scroller-toolbar-default.x-box-scroller,
+.x-tree-elbow-img,
+.pve-itype-icon-qemu,
+.x-tree-node-computer,
+.x-grid-tree-node-expanded .x-tree-node-computer,
+.pbs-icon-tape,
+.pbs-icon-tape-drive,
+.x-tree-icon-leaf:not(.x-tree-icon-custom),
+.x-tree-icon-parent:not(.x-tree-icon-custom),
+.x-tree-icon-parent-expanded:not(.x-tree-icon-custom) {
+    filter: invert(90%);
+}
+
+/* v5.37: Resource grid icon inversion - tree node icons only
+   Harddisk tree nodes are SVG background images that need inversion for dark themes */
+.x-tree-node-harddisk,
+.x-grid-tree-node-expanded .x-tree-node-harddisk {
+    filter: invert(90%);
+}
+
+/* Fix #27: Resource grid cells (td.pve-itype-icon-* / td.pmx-itype-icon-*) — remove
+   filter from TD so text is NOT inverted. Strip original background-image and reconstruct
+   icon via ::before pseudo-element on .x-grid-cell-inner with filter applied to icon only.
+   Includes pmx-itype-icon-processor/memory used by LXC Resources tab (PVE 9.x). */
+td.pve-itype-icon-cpu,
+td.pve-itype-icon-memory,
+td.pve-itype-icon-cdrom,
+td.pve-itype-icon-pci,
+td.pve-itype-icon-serial,
+td.pve-itype-icon-die,
+td.pmx-itype-icon-processor,
+td.pmx-itype-icon-memory {
+    filter: none !important;
+    background-image: none !important;
+    padding-left: 0px !important;
+}
+
+/* Match FA row inner padding (4px) */
+td.pve-itype-icon-cpu > .x-grid-cell-inner,
+td.pve-itype-icon-memory > .x-grid-cell-inner,
+td.pve-itype-icon-cdrom > .x-grid-cell-inner,
+td.pve-itype-icon-pci > .x-grid-cell-inner,
+td.pve-itype-icon-serial > .x-grid-cell-inner,
+td.pve-itype-icon-die > .x-grid-cell-inner,
+td.pmx-itype-icon-processor > .x-grid-cell-inner,
+td.pmx-itype-icon-memory > .x-grid-cell-inner {
+    padding-left: 4px !important;
+}
+
+/* Inline-block pseudo-element icons — invert only the icon, not the text */
+td.pve-itype-icon-cpu > .x-grid-cell-inner::before,
+td.pve-itype-icon-memory > .x-grid-cell-inner::before,
+td.pve-itype-icon-cdrom > .x-grid-cell-inner::before,
+td.pve-itype-icon-pci > .x-grid-cell-inner::before,
+td.pve-itype-icon-serial > .x-grid-cell-inner::before,
+td.pve-itype-icon-die > .x-grid-cell-inner::before,
+td.pmx-itype-icon-processor > .x-grid-cell-inner::before,
+td.pmx-itype-icon-memory > .x-grid-cell-inner::before {
+    content: '' !important;
+    display: inline-block !important;
+    width: 14px !important;
+    height: 14px !important;
+    vertical-align: middle !important;
+    margin-right: 4px !important;
+    background-size: 14px 14px !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    filter: invert(90%) !important;
+}
+
+/* Individual icon URLs — pve-itype-icon-* classes are PVE-specific, so use /pve2/images/
+   (icon-cpu.svg exists in /pwt/images/ too, but memory/cdrom/pci/serial/die do NOT) */
+td.pve-itype-icon-cpu > .x-grid-cell-inner::before {
+    background-image: url('/pve2/images/icon-cpu.svg') !important;
+}
+td.pve-itype-icon-memory > .x-grid-cell-inner::before {
+    background-image: url('/pve2/images/icon-memory.svg') !important;
+}
+td.pve-itype-icon-cdrom > .x-grid-cell-inner::before {
+    background-image: url('/pve2/images/icon-cd-drive.svg') !important;
+}
+td.pve-itype-icon-pci > .x-grid-cell-inner::before {
+    background-image: url('/pve2/images/icon-pci.svg') !important;
+}
+td.pve-itype-icon-serial > .x-grid-cell-inner::before {
+    background-image: url('/pve2/images/icon-serial.svg') !important;
+}
+td.pve-itype-icon-die > .x-grid-cell-inner::before {
+    background-image: url('/pve2/images/icon-die.svg') !important;
+}
+/* pmx-itype-icon-* use relative paths for PVE+PBS compatibility */
+td.pmx-itype-icon-processor > .x-grid-cell-inner::before {
+    background-image: url('../images/icon-cpu.svg') !important;
+}
+td.pmx-itype-icon-memory > .x-grid-cell-inner::before {
+    background-image: url('../images/icon-ram.svg') !important;
+}
+
+/* v5.38: Summary panel icons (i elements) - reset to original Proxmox styling */
+i.pmx-itype-icon-processor,
+i.pmx-itype-icon-memory,
+.pmx-icon.pmx-itype-icon-processor,
+.pmx-icon.pmx-itype-icon-memory {
+    filter: invert(90%) !important;
+    background-repeat: no-repeat !important;
+    background-position: 3px center !important;
+    background-size: 14px 14px !important;
+    padding-left: 18px !important;
+    position: static !important;
+}
+
+/* v5.94: Use relative paths for PVE+PBS compatibility
+   PVE serves from /pwt/themes/ → ../images/ resolves to /pwt/images/
+   PBS serves from /widgettoolkit/themes/ → ../images/ resolves to /widgettoolkit/images/ */
+i.pmx-itype-icon-processor,
+.pmx-icon.pmx-itype-icon-processor {
+    background-image: url('../images/icon-cpu.svg') !important;
+}
+
+i.pmx-itype-icon-memory,
+.pmx-icon.pmx-itype-icon-memory {
+    background-image: url('../images/icon-ram.svg') !important;
+}
+
+/* Disable ::before pseudo-elements on Summary panel icons */
+i.pmx-itype-icon-processor::before,
+i.pmx-itype-icon-memory::before,
+.pmx-icon.pmx-itype-icon-processor::before,
+.pmx-icon.pmx-itype-icon-memory::before {
+    content: none !important;
+    display: none !important;
+}
+
+/* v5.38: Summary panel SWAP and Bootdisk FontAwesome icons - consistent sizing */
+.left-aligned .fa.fa-refresh,
+.left-aligned .fa.fa-hdd-o {
+    font-size: 14px !important;
+}
+
+/* v5.88: Fix "More" button position in IPs section of Summary panel
+   Move button next to "IPs" label, vertically centered with IP addresses.
+   Parent containers need overflow:visible because transform moves button outside bounds.
+   
+   Key insight: ExtJS positions button at container's right edge (after IP addresses).
+   Solution: Anchor to top: 0, then use transform to shift button left to "IPs" label.
+   Value -242px moves button from right edge to just after the 35px "IPs" label.
+   NOTE: This value may need adjustment if Proxmox UI layout changes. */
+[id^="pveIPViewLXC-"] .x-box-inner,
+[id^="pveIPViewLXC-"] > .x-box-inner {
+    overflow: visible !important;
+}
+
+[id^="pveIPViewLXC-"] [id^="button-"].x-btn {
+    top: 0 !important;
+    transform: translate(-242px, 5px) !important;
+}
+
+/* Cell inner content alignment — handled by Fix #27 td.pve-itype-icon-* rules above */
+
+/* v5.37: FontAwesome icons in resource grid (Swap, Root Disk) */
+.pve-itype-fa .x-grid-cell-inner {
+    padding-left: 4px !important;
+}
+
+.pve-itype-fa .pve-grid-fa,
+.pve-itype-fa .pve-grid-fa.fa,
+.x-grid-item .pve-itype-fa .fa {
+    color: #DEE0E3 !important;
+    margin-right: 4px !important;
+}
+
+.x-tree-icon-custom,
+.x-grid-icon-custom {
+    color: #B7BCC2;
+}
+
+/* Running VMs/CTs - type icon neutral; status indicator handled separately */
+.x-tree-icon-custom.running,
+.x-grid-icon-custom.running {
+    color: #B7BCC2;
+}
+
+.x-tree-icon-custom::after,
+.x-grid-icon-custom::after {
+    color: #B7BCC2;
+    text-shadow: none;
+}
+
+.x-tree-icon-custom.stopped,
+.x-tree-icon-custom.offline,
+.x-grid-icon-custom.stopped,
+.x-grid-icon-custom.offline {
+    color: #737C87;
+}
+
+.x-tree-icon-custom.lxc::after,
+.x-tree-icon-custom.qemu::after,
+.x-grid-icon-custom.lxc::after,
+.x-grid-icon-custom.qemu::after {
+    background-color: #131416;
+    color: #B7BCC2;
+}
+
+/* v5.55: Fix LXC/QEMU icon ::after in treelist navigation */
+.x-treelist-item-icon.lxc::after,
+.x-treelist-item-icon.qemu::after {
+    background-color: transparent !important;
+    color: #B7BCC2 !important;
+    margin-top: 4px !important;
+}
+
+.x-tree-arrows .x-tree-expander {
+    filter: brightness(200%);
+}
+
+/* =====================================================
+   v5.6: Custom tree expander arrows (FontAwesome chevrons)
+   Replaces default sprite arrows with larger, animated icons
+   ===================================================== */
+
+/* Base expander styling - replace sprite with FA icon */
+.x-tree-expander {
+    background-image: none !important;
+    position: relative !important;
+    width: 18px !important;
+    height: 18px !important;
+    margin-right: 4px !important;
+    vertical-align: middle !important;
+}
+
+/* Arrow icon using FontAwesome chevron-right */
+.x-tree-expander::before {
+    content: "\f054" !important;
+    /* FA chevron-right */
+    font-family: "FontAwesome" !important;
+    font-size: 11px !important;
+    color: #737C87 !important;
+    /* UniFi tertiary/muted color */
+    position: absolute !important;
+    top: -2px !important;
+    left: 3px !important;
+    transition: transform 0.2s ease, color 0.15s ease !important;
+}
+
+/* Expanded state - arrow rotates 90 degrees */
+.x-grid-tree-node-expanded .x-tree-expander::before {
+    transform: rotate(90deg) !important;
+    color: #B7BCC2 !important;
+    /* UniFi secondary text */
+}
+
+/* Collapsed state - no rotation */
+tr:not(.x-grid-tree-node-expanded) .x-tree-expander::before {
+    transform: rotate(0deg) !important;
+}
+
+/* Hover effect - UniFi blue accent */
+.x-tree-expander:hover::before {
+    color: #006EFF !important;
+}
+
+/* Gap before node icon */
+.x-tree-icon-parent,
+.x-tree-icon-leaf,
+.x-tree-icon {
+    margin-left: 2px !important;
+}
+
+/* Empty elbows - no extra margin */
+.x-tree-elbow-empty,
+.x-tree-elbow {
+    margin-right: 0 !important;
+}
+
+/* =====================================================
+   v5.36: CHECKBOXES & RADIO BUTTONS - UniFi Authentic
+   Extracted from live UniFi Network Application
+   ===================================================== */
+
+/* Remove the old filter-based styling */
+.x-form-checkbox-default,
+.x-form-radio-default,
+.x-column-header-checkbox .x-column-header-checkbox::after,
+.x-grid-checkcolumn::after,
+.x-menu-item-checked .x-menu-item-icon-default.x-menu-item-checkbox,
+.x-menu-item-unchecked .x-menu-item-icon-default.x-menu-item-checkbox {
+    filter: none !important;
+}
+
+/* The actual INPUT element that receives clicks - needs pointer cursor */
+.x-form-cb-input {
+    cursor: pointer !important;
+}
+
+/* CHECKBOXES - Base styling (SPAN element - visual display) */
+.x-form-checkbox,
+.x-form-checkbox-default {
+    display: inline-block !important;
+    width: 16px !important;
+    min-width: 16px !important;
+    height: 16px !important;
+    min-height: 16px !important;
+    border-radius: 4px !important;
+    border: 0.8px solid #737C87 !important;
+    background-color: rgba(0, 0, 0, 0.01) !important;
+    background-image: none !important;
+    cursor: pointer !important;
+    transition: border-color 0.2s linear, background-color 0.2s linear !important;
+    position: relative !important;
+    box-sizing: border-box !important;
+}
+
+/* Checkbox - Checked state */
+.x-form-cb-checked .x-form-checkbox {
+    border-color: #4797FF !important;
+    background-color: #4797FF !important;
+    background-image: none !important;
+}
+
+/* Checkbox checkmark using ::after pseudo-element */
+.x-form-cb-checked .x-form-checkbox::after {
+    content: '✓' !important;
+    position: absolute !important;
+    color: white !important;
+    font-size: 12px !important;
+    font-weight: bold !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    pointer-events: none !important;
+}
+
+/* Checkbox - Hover state */
+.x-form-checkbox:hover,
+.x-form-cb:hover .x-form-checkbox,
+.x-form-cb-wrap:hover .x-form-checkbox {
+    border-color: #4797FF !important;
+}
+
+/* RADIO BUTTONS - Base styling */
+.x-form-radio,
+.x-form-radio-default {
+    display: inline-block !important;
+    width: 16px !important;
+    min-width: 16px !important;
+    height: 16px !important;
+    min-height: 16px !important;
+    border-radius: 50% !important;
+    border: 0.8px solid #737C87 !important;
+    background-color: rgba(0, 0, 0, 0.01) !important;
+    background-image: none !important;
+    cursor: pointer !important;
+    position: relative !important;
+    transition: border-color 0.2s linear !important;
+    box-sizing: border-box !important;
+}
+
+/* Radio - Checked state border */
+.x-form-cb-checked .x-form-radio {
+    border-color: #4797FF !important;
+    background-color: rgba(0, 0, 0, 0.01) !important;
+    background-image: none !important;
+}
+
+/* Radio - Inner dot using ::after pseudo-element */
+.x-form-radio::after {
+    content: '' !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    width: 6px !important;
+    height: 6px !important;
+    border-radius: 50% !important;
+    background-color: transparent !important;
+    transform: translate(-50%, -50%) scale(0) !important;
+    transition: transform 0.2s ease, background-color 0.2s ease !important;
+    pointer-events: none !important;
+}
+
+/* Radio - Checked inner dot */
+.x-form-cb-checked .x-form-radio::after {
+    background-color: #4797FF !important;
+    transform: translate(-50%, -50%) scale(1) !important;
+}
+
+/* Radio - Hover state */
+.x-form-radio:hover,
+.x-form-cb-wrap:hover .x-form-radio {
+    border-color: #4797FF !important;
+}
+
+/* =====================================================
+   BUTTONS - Clean, minimal style (UniFi authentic)
+   ===================================================== */
+/* v5.88: Respect inline display:none - Proxmox hides buttons dynamically and !important was overriding */
+.x-btn-default-small[style*="display: none"],
+.x-btn-default-small[style*="display:none"] {
+    display: none !important;
+}
+
+.x-btn-default-small {
+    background-color: #006EFF;
+    border: none;
+    border-radius: 6px;
+    padding: 5px 10px !important;
+    min-height: 26px !important;
+    /* v5.29: Header buttons (Create VM, Create CT, root@pam) - consistent 28px height with vertical centering */
+    /* Exclude tag edit buttons (display:none when hidden, :has(.fa-check) for checkmark) */
+    height: 28px !important;
+    min-height: 28px !important;
+    display: flex !important;
+    align-items: center !important;
+    padding: 3px 8px !important;
+}
+
+.x-btn-default-small .x-btn-inner {
+    color: #ffffff;
+    padding: 2px 4px !important;
+    display: inline-flex !important;
+    align-items: center !important;
+}
+
+/* Flex container logic (Merged from L3242) */
+.x-btn.x-btn-default-small .x-btn-button {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+
+.x-btn.x-btn-default-small .x-btn-icon-el {
+    justify-content: center !important;
+}
+
+.x-btn-default-small.x-btn-over,
+.x-keyboard-mode .x-btn-default-small.x-btn-focus {
+    background-color: #338BFF;
+}
+
+/* Pressed state */
+.x-btn-default-small.x-btn-pressed,
+.x-btn-default-small.x-btn-menu-active {
+    background-color: #0056CC;
+}
+
+/* Fix #29: Disabled buttons — explicit muted colors instead of opacity */
+.x-btn-default-small.x-btn.x-btn-disabled {
+    opacity: 1 !important;
+    background-color: #003A80 !important;
+    border-color: #002D66 !important;
+}
+.x-btn-default-small.x-btn.x-btn-disabled .x-btn-inner {
+    color: #8A9099 !important;
+}
+
+/* Toolbar Buttons - Compact & Transparent */
+.x-btn-default-toolbar-small {
+    background-color: transparent;
+    border: 1px solid #34383D !important;
+    padding: 4px 8px !important;
+    border-radius: 4px;
+}
+
+.x-btn-default-toolbar-small .x-btn-inner-default-toolbar-small {
+    color: #B7BCC2;
+}
+
+.x-btn-default-toolbar-small .x-btn-icon-el-default-toolbar-small {
+    color: #B7BCC2;
+}
+
+/* v5.8: Toolbar button icon vertical centering fix */
+.x-btn-wrap.x-btn-wrap-default-toolbar-small {
+    align-items: center !important;
+}
+
+.x-btn-icon-el.x-btn-icon-el-default-toolbar-small {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    line-height: 16px !important;
+    height: 16px !important;
+}
+
+.x-btn-inner.x-btn-inner-default-toolbar-small {
+    display: flex !important;
+    align-items: center !important;
+}
+
+.x-btn-default-toolbar-small .x-btn-wrap-default-toolbar-small.x-btn-arrow-right::after,
+.x-btn-default-toolbar-small .x-btn-wrap-default-toolbar-small.x-btn-split-right::after {
+    filter: brightness(150%);
+}
+
+.x-btn-default-toolbar-small.x-btn-over,
+.x-keyboard-mode .x-btn-default-toolbar-small.x-btn-focus {
+    background-color: #34383D;
+}
+
+.x-btn-default-toolbar-small.x-btn.x-btn-disabled {
+    opacity: 1 !important;
+    background-color: rgba(40, 43, 47, 0.5) !important;
+    border-color: #282B2F !important;
+}
+.x-btn-default-toolbar-small.x-btn.x-btn-disabled .x-btn-inner {
+    color: #555B63 !important;
+}
+
+.x-btn-default-toolbar-small.x-btn.x-btn-menu-active,
+.x-btn-default-toolbar-small.x-btn.x-btn-pressed {
+    background-color: #006EFF;
+    padding: 4px 8px !important; /* Fix #30: prevent width change when dropdown opens */
+}
+
+.x-btn-default-toolbar-small.x-btn.x-btn-pressed .x-btn-inner-default-toolbar-small,
+.x-btn-default-toolbar-small.x-btn.x-btn-pressed .x-btn-icon-el-default-toolbar-small {
+    color: #ffffff;
+}
+
+/* Server View cogwheel button height - match adjacent combobox (28px) */
+.x-box-target:has(#view)>.x-btn {
+    height: 28px !important;
+    min-height: 28px !important;
+}
+
+/* Header buttons (Create VM, Create CT, root@pam) - consistent 28px height with vertical centering */
+/* v5.29: Exclude tag edit buttons (display:none when hidden, :has(.fa-check) for checkmark) */
+.x-btn.x-btn-default-small:not(.x-btn-default-toolbar-small):not([style*="display: none"]):not([style*="display:none"]):not(:has(.fa-check)) {
+    height: 28px !important;
+    min-height: 28px !important;
+    display: flex !important;
+    align-items: center !important;
+    padding: 3px 8px !important;
+}
+
+.x-btn.x-btn-default-small:not(.x-btn-default-toolbar-small):not([style*="display: none"]):not([style*="display:none"]):not(:has(.fa-check)) .x-btn-wrap {
+    display: flex !important;
+    align-items: center !important;
+}
+
+.x-btn.x-btn-default-small:not(.x-btn-default-toolbar-small):not([style*="display: none"]):not([style*="display:none"]):not(:has(.fa-check)) .x-btn-inner {
+    display: flex !important;
+    align-items: center !important;
+}
+
+/* Fix dropdown arrows on split/arrow buttons */
+.x-btn-wrap.x-btn-arrow-right::after,
+.x-btn-wrap.x-btn-split-right::after {
+    height: 16px !important;
+    min-height: 16px !important;
+    width: 20px !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+/* v5.27: Fix icon-only buttons - hide   inner element when button has no text */
+/* ExtJS adds x-btn-no-text class to buttons with only an icon */
+.x-btn-no-text .x-btn-inner,
+.x-btn-button.x-btn-no-text .x-btn-inner,
+.x-btn-button-default-toolbar-small.x-btn-no-text .x-btn-inner-default-toolbar-small,
+.x-btn-button-default-small.x-btn-no-text .x-btn-inner-default-small,
+.x-btn-button-default-small.x-btn-no-text>.x-btn-inner-default-small {
+    display: none !important;
+}
+
+/* =====================================================
+   v5.8: TOOLBOX SCROLL ARROWS FIX
+   ExtJS behavior: 
+   - Sets inline display:none when content NOT scrollable
+   - Adds x-box-scroller-disabled class at boundary
+   - No inline style when scrollable (show arrow)
+   ===================================================== */
+
+/* Hide disabled scrollers (at boundary) */
+.x-box-scroller.x-box-scroller-disabled {
+    display: none !important;
+}
+
+/* Hide scrollers when ExtJS sets inline display:none (not scrollable) */
+/* Note: ExtJS uses "display:none" without space, check both formats */
+.x-box-scroller.x-box-scroller-toolbar[style*="display:none"],
+.x-box-scroller.x-box-scroller-toolbar[style*="display: none"] {
+    display: none !important;
+}
+
+/* Show scrollers when content is scrollable (no inline display style, not disabled) */
+.x-toolbar-vertical .x-box-scroller-top:not(.x-box-scroller-disabled):not([style*="display"]),
+.x-toolbar-vertical .x-box-scroller-bottom:not(.x-box-scroller-disabled):not([style*="display"]) {
+    display: flex !important;
+}
+
+/* Style the vertical toolbar scrollers - arrow only, no background */
+.x-toolbar-vertical .x-box-scroller-top,
+.x-toolbar-vertical .x-box-scroller-bottom {
+    width: 100% !important;
+    height: 16px !important;
+    left: 0 !important;
+    right: 0 !important;
+    background: transparent !important;
+    background-image: none !important;
+    filter: none !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer !important;
+    opacity: 1 !important;
+    z-index: 100 !important;
+    border: none !important;
+}
+
+.x-toolbar-vertical .x-box-scroller-top {
+    top: 0 !important;
+}
+
+.x-toolbar-vertical .x-box-scroller-bottom {
+    bottom: 0 !important;
+}
+
+/* Arrow icons */
+.x-toolbar-vertical .x-box-scroller-top::before {
+    content: '▲' !important;
+    font-size: 10px !important;
+    color: #B7BCC2 !important;
+}
+
+.x-toolbar-vertical .x-box-scroller-bottom::before {
+    content: '▼' !important;
+    font-size: 10px !important;
+    color: #B7BCC2 !important;
+}
+
+/* Hover states */
+.x-toolbar-vertical .x-box-scroller-top:hover::before,
+.x-toolbar-vertical .x-box-scroller-bottom:hover::before {
+    color: #F9FAFA !important;
+}
+
+/* Re-hide disabled scrollers after styling */
+.x-toolbar-vertical .x-box-scroller.x-box-scroller-disabled {
+    display: none !important;
+}
+
+/* =====================================================
+   FORM ELEMENTS - Clean inputs (UniFi authentic)
+   ===================================================== */
+.x-form-trigger-default {
+    background-color: transparent;
+}
+
+/* Boundlist dropdown popup - UniFi style 4px radius */
+.x-boundlist {
+    background-color: #282B2F;
+    border: 1px solid #34383D;
+    border-radius: 4px !important;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+    padding: 2px;
+}
+
+.x-boundlist-item {
+    background-color: transparent;
+    border: none;
+    border-radius: 4px !important;
+    color: #DEE0E3;
+    padding: 2px 8px;
+}
+
+.x-boundlist-selected {
+    background-color: rgba(249, 250, 250, 0.07);
+    color: #F9FAFA;
+}
+
+.x-boundlist-item-over {
+    background-color: rgba(249, 250, 250, 0.04);
+    color: #DEE0E3;
+}
+
+/* v5.38: Fix boundlist inner container inheriting 8px radius from global rule */
+.x-boundlist-list-ct {
+    border-radius: 4px !important;
+}
+
+/* Dropdown/floating grid pickers (e.g. ISO selector): readable column headers */
+.x-layer.x-grid .x-grid-header-ct,
+.x-layer.x-grid .x-column-header,
+.x-boundlist .x-grid-header-ct,
+.x-boundlist .x-column-header {
+    background-color: var(--pm-bg-surface) !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
+}
+
+.x-layer.x-grid .x-column-header-inner,
+.x-layer.x-grid .x-column-header-text,
+.x-layer.x-grid .x-column-header-text-inner,
+.x-layer.x-grid .x-column-header-text-default,
+.x-boundlist .x-column-header-inner,
+.x-boundlist .x-column-header-text,
+.x-boundlist .x-column-header-text-inner,
+.x-boundlist .x-column-header-text-default {
+    color: var(--pm-text-bright) !important;
+    font-weight: 700 !important;
+}
+
+.x-layer.x-grid .x-column-header-trigger,
+.x-boundlist .x-column-header-trigger {
+    border-left-color: rgba(255, 255, 255, 0.08) !important;
+}
+
+.x-form-display-field-default {
+    color: #B7BCC2;
+}
+
+.x-form-text-default {
+    background-color: transparent;
+    color: #F9FAFA;
+    border-radius: 4px 0 0 4px !important;
+    padding: 6px 10px !important;
+}
+
+.x-form-trigger-wrap-default {
+    border-color: var(--pm-border);
+    border-radius: 4px !important;
+    background-color: var(--pm-hover-medium);
+}
+
+.x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
+    border-color: var(--pm-accent);
+    box-shadow: 0 0 0 3px var(--pm-focus-ring-color);
+}
+
+.x-form-item-label-default {
+    color: #B7BCC2;
+}
+
+.x-form-spinner-default {
+    background-color: #282B2F;
+}
+
+/* v5.59: Make spinner buttons fill container with FontAwesome arrows */
+.x-form-spinner-up,
+.x-form-spinner-down {
+    height: 13px !important;
+    background-image: none !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
+    font-weight: 900 !important;
+    font-size: 7px !important;
+    color: #B7BCC2 !important;
+}
+
+.x-form-spinner-up::before {
+    content: '\f077' !important;
+    display: block !important;
+}
+
+.x-form-spinner-down::before {
+    content: '\f078' !important;
+    display: block !important;
+}
+
+/* v5.64: Dialog form field alignment - let ExtJS handle natural sizing */
+.x-window .x-container .x-form-trigger-wrap,
+.x-window .x-form-item-body .x-form-trigger-wrap {
+    width: 100% !important;
+    max-width: none !important;
+}
+
+/* Ensure input fills the trigger wrap */
+.x-window .x-container .x-form-trigger-wrap input.x-form-field {
+    width: calc(100% - 2px) !important;
+}
+
+/* v5.63: Removed v5.61 margin-left rule that caused form alignment issues */
+
+.x-form-cb-label-default {
+    color: #B7BCC2;
+}
+
+/* v5.41: Reduce gap between checkbox/radio and label */
+/* Label after checkbox - reduce left padding */
+.x-form-cb-label-after {
+    padding-left: 6px !important;
+}
+
+/* Label before checkbox - reduce right padding */
+.x-form-cb-label-before {
+    padding-right: 6px !important;
+}
+
+.x-fieldset-default {
+    border-color: #34383D;
+}
+
+.x-fieldset-header-default>.x-fieldset-header-text {
+    color: #F9FAFA;
+}
+
+/* =====================================================
+   GRID / TABLE - UniFi authentic row hover
+   ===================================================== */
+.x-column-header {
+    border-color: transparent !important;
+    background-color: transparent !important;
+}
+
+/* Header Text - Bright White */
+.x-column-header-inner,
+.x-column-header-text {
+    color: #F9FAFA !important;
+    font-weight: 700 !important;
+    font-size: 13px !important;
+}
+
+.x-grid-item,
+.x-column-header-default,
+.x-grid-cell-row-numberer {
+    color: #DEE0E3 !important;
+    background-color: transparent !important;
+    border-color: transparent !important;
+    font-size: 13px !important;
+}
+
+.x-column-header-trigger {
+    border-color: transparent !important;
+}
+
+.x-grid-cell-special {
+    border-color: transparent !important;
+}
+
+.x-grid-group-hd {
+    background-color: transparent !important;
+    border-color: transparent !important;
+}
+
+.x-grid-group-title {
+    color: #F9FAFA !important;
+    font-weight: 700 !important;
+}
+
+.x-grid-header-ct {
+    border: none !important;
+    background-color: transparent !important;
+}
+
+/* Row separators (use td borders; more reliable than box-shadow on <tr>) */
+.x-grid td,
+.x-grid-td,
+.x-grid-cell,
+td.x-grid-cell {
+    border: none !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
+}
+
+/* v5.53: Vertically center text in grid table cells */
+.x-grid-cell {
+    vertical-align: middle !important;
+}
+
+/* Keep rows themselves flat; separators handled above */
+.x-grid-item {
+    box-shadow: none !important;
+}
+
+/* Slightly roomier rows (matches UniFi table density) */
+.x-grid-cell-inner {
+    padding-top: 6px !important;
+    padding-bottom: 6px !important;
+}
+
+/*
+   Tasks + Cluster Log: compact rows (validated via DevTools)
+   - Tasks: 4px top/bottom
+   - Cluster Log: 4.5px top/bottom
+   - Keep line-height stable and prevent action-column icons from inflating row height
+*/
+
+/* Tasks grid (bottom Tasks panel) */
+div[id^="pveTaskViewer-"] .x-grid-cell-inner,
+div[id^="pveClusterTasks-"] .x-grid-cell-inner,
+[aria-label="Tasks"] .x-grid-view .x-grid-cell-inner {
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
+    line-height: 15px !important;
+}
+
+/* Tasks action-column (chevron) can inflate row height unless centered */
+div[id^="pveTaskViewer-"] .x-grid-cell-inner-action-col,
+div[id^="pveClusterTasks-"] .x-grid-cell-inner-action-col,
+[aria-label="Tasks"] .x-grid-view .x-grid-cell-inner-action-col {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
+    line-height: 15px !important;
+}
+
+/* Cluster Log grid */
+div[id^="pveClusterLog-"] .x-grid-cell-inner,
+div[id^="pveLogView-"] .x-grid-cell-inner,
+[aria-label="Cluster Log"] .x-grid-view .x-grid-cell-inner {
+    padding-top: 4.5px !important;
+    padding-bottom: 4.5px !important;
+    line-height: 15px !important;
+}
+
+.x-grid-item-alt {
+    background-color: transparent !important;
+}
+
+/* Ensure alternating rows have readable text */
+.x-grid-item-alt .x-grid-cell-inner,
+.x-grid-item-alt .x-grid-cell {
+    color: #DEE0E3 !important;
+}
+
+.x-grid-with-row-lines .x-grid-item {
+    border-bottom: none !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+/* Optional: no trailing divider after the last row */
+.x-grid-with-row-lines .x-grid-item:last-child td.x-grid-cell,
+.x-grid-with-row-lines .x-grid-item:last-child .x-grid-td {
+    border-bottom: none !important;
+}
+
+.x-grid-with-row-lines .x-grid-item.x-grid-item-over {
+    background-color: var(--pm-hover-subtle) !important;
+    border: none !important;
+}
+
+.x-grid-with-row-lines .x-grid-item.x-grid-item-selected {
+    background-color: rgba(0, 110, 255, 0.08) !important;
+    box-shadow: rgba(71, 151, 255, 0.1) 0px 0px 0px 1000px inset !important;
+    border: none !important;
+}
+
+.x-grid-item-over {
+    background-color: hsla(214, 8%, 98%, 0.02) !important;
+}
+
+.x-grid-item-over .x-grid-cell {
+    background-color: transparent !important;
+}
+
+/* Keep row separators stable on hover/selection (prevents 1px shift) */
+.x-grid-item-over .x-grid-cell,
+.x-grid-item-over .x-grid-td,
+.x-grid-item-over td.x-grid-cell,
+.x-grid-item-selected .x-grid-cell,
+.x-grid-item-selected .x-grid-td,
+.x-grid-item-selected td.x-grid-cell {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
+}
+
+.x-grid-item-selected {
+    background-color: rgba(0, 110, 255, 0.08) !important;
+    box-shadow: rgba(71, 151, 255, 0.1) 0px 0px 0px 1000px inset !important;
+}
+
+.x-grid-item-selected .x-grid-cell-inner {
+    color: hsla(0, 0%, 100%, 1) !important;
+}
+
+/* v5.16: Remove background highlight from parent nodes (folders/servers) when focused/selected via arrow */
+/* Only leaf nodes (VMs/CTs) should show the selection/focus background */
+.x-grid-item:not(.x-grid-tree-node-leaf).x-grid-item-focused,
+.x-grid-item:not(.x-grid-tree-node-leaf).x-grid-item-selected {
+    background-color: transparent !important;
+}
+
+/* More visible hover state */
+.x-grid-item-over .x-grid-cell-inner,
+.x-grid-item-over .x-grid-cell {
+    color: #F9FAFA !important;
+}
+
+.x-column-header-over,
+.x-column-header-open {
+    background-color: #34383D;
+}
+
+.x-column-header-sort-ASC,
+.x-column-header-sort-DESC {
+    background-color: #1b384c;
+}
+
+.x-grid-row-summary .x-grid-cell,
+.x-grid-row-summary .x-grid-rowwrap,
+.x-grid-row-summary .x-grid-cell-rowbody {
+    background-color: #131416 !important;
+    border-color: #34383D;
+}
+
+.x-grid-with-col-lines .x-grid-cell,
+.x-grid-with-col-lines .x-grid-item-over .x-grid-cell,
+.x-grid-with-col-lines .x-grid-item-selected .x-grid-cell {
+    border-color: hsla(214, 8%, 98%, 0.07) !important;
+    border-right-color: transparent !important;
+}
+
+.x-dd-drag-proxy {
+    background-color: #282B2F;
+    border: 1px solid #34383D;
+    color: #B7BCC2;
+}
+
+.x-keyboard-mode .x-grid-item-focused {
+    background-color: rgba(249, 250, 250, 0.07);
+    color: #F9FAFA;
+}
+
+.x-keyboard-mode .x-grid-item-focused .x-grid-cell-inner::before {
+    border-color: #006EFF;
+}
+
+.x-grid-empty {
+    background-color: #131416;
+    color: #737C87;
+}
+
+/* =====================================================
+   MENUS - Floating, clean (UniFi authentic)
+   ===================================================== */
+.x-menu-default {
+    border: 1px solid #34383D;
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
+.x-menu-body-default {
+    background-color: #282B2F;
+}
+
+.x-menu-header {
+    background-color: #006EFF;
+}
+
+.x-menu-item-default.x-menu-item-separator {
+    background-color: #282B2F;
+    border-color: #34383D;
+}
+
+.x-menu-item-default.x-menu-item-focus,
+.x-menu-item-default.x-menu-item-active {
+    background-color: rgba(249, 250, 250, 0.07) !important;
+    color: #F9FAFA;
+}
+
+.x-menu-item-text-default {
+    color: #DEE0E3;
+}
+
+.x-menu-item-icon-default {
+    color: #B7BCC2;
+}
+
+.x-menu-icon-separator-default {
+    background-color: transparent;
+    border-color: #34383D;
+}
+
+/* =====================================================
+   PANELS - Card-like containers (UniFi authentic)
+   ===================================================== */
+.x-panel-header-default {
+    background-color: #131416;
+    border: none;
+}
+
+.x-panel-header-default .x-tool-tool-el {
+    background-color: transparent;
+}
+
+.x-tool-img {
+    filter: brightness(175%);
+}
+
+.x-tool-over .x-tool-img {
+    filter: brightness(200%);
+}
+
+/* v5.39: Replace pixelated close button sprite with crisp FontAwesome icon */
+.x-tool-tool-el.x-tool-close,
+.x-tool-img.x-tool-close {
+    background-image: none !important;
+    font-family: "FontAwesome" !important;
+    font-size: 20px !important;
+    line-height: 16px !important;
+    text-align: center !important;
+    color: #737C87 !important;
+    transition: color 0.15s ease !important;
+    filter: none !important;
+    width: 16px !important;
+    height: 16px !important;
+}
+
+.x-tool-tool-el.x-tool-close::before,
+.x-tool-img.x-tool-close::before {
+    content: "\f00d" !important;
+}
+
+.x-tool:hover .x-tool-tool-el.x-tool-close,
+.x-tool:hover .x-tool-img.x-tool-close {
+    color: #DEE0E3 !important;
+}
+
+.x-panel-header-title-default {
+    color: #F9FAFA;
+}
+
+/* Panel header text (VM/Container titles in toolbar) */
+.x-panel-header-text,
+.x-panel-header-text-default,
+.x-panel-header-text.x-box-item,
+.x-toolbar .x-panel-header-text,
+.x-toolbar-item.x-panel-header-text {
+    color: #F9FAFA !important;
+}
+
+/* Title text general */
+.x-title-text,
+.x-title-text-default {
+    color: #F9FAFA !important;
+    overflow: visible !important;
+}
+
+/* Panel header container - ensure proper visibility */
+.x-panel-header,
+.x-panel-header-default {
+    overflow: visible !important;
+}
+
+.x-panel-body-default {
+    background-color: var(--pm-bg-base);
+    border-color: var(--pm-border);
+    color: var(--pm-text-muted);
+}
+
+div[id^="pveResourceTree-"][id$="-body"] {
+    border-color: var(--pm-bg-base);
+}
+
+/* =====================================================
+   PROGRESS BARS - Clean, rounded (UniFi authentic)
+   v5.17: Consolidated - removed duplicate section at end of file
+   ===================================================== */
+/* Fix: Widget containers need overflow visible to not clip progress bars */
+.x-container[id^="pmxInfoWidget"],
+.x-container.x-box-layout-ct {
+    overflow: visible !important;
+}
+
+/* v5.32: Add padding gap to progress bar rows (CPU/Memory/SWAP/Bootdisk)
+   Only targets containers with VISIBLE progress bars (excludes Status/HA State/Node/Unprivileged) */
+/* v5.94: Reduced vertical padding from 5px to 3px to prevent PBS summary panel clipping
+   (ExtJS calculates body height before CSS padding → overflow hidden clips bottom rows) */
+.x-container[id^="pmxInfoWidget"].x-box-layout-ct:has(.x-progress:not([style*="display: none"]):not([style*="display:none"])) {
+    padding: 3px 25px !important;
+}
+
+/* v5.51: Fix horizontal padding alignment for rows with HIDDEN progress bars
+   (Load average, KSM sharing, CPU(s), Kernel Version, Boot Mode, Manager Version)
+   Only adjusts horizontal padding to match visible progress bar rows, keeps vertical minimal */
+.x-container[id^="pmxInfoWidget"].x-box-layout-ct:has(.x-progress[style*="display: none"]),
+.x-container[id^="pmxInfoWidget"].x-box-layout-ct:has(.x-progress[style*="display:none"]) {
+    padding-left: 25px !important;
+    padding-right: 25px !important;
+}
+
+/* v5.51: Repository Status row uses different ID pattern */
+.x-container[id^="pmxNodeInfoRepoStatus"].x-box-layout-ct {
+    padding-left: 25px !important;
+    padding-right: 25px !important;
+}
+
+/* v5.94: Fix PBS summary panel clipping - reduce body padding to fit all rows
+   PBS panel has 9 info widgets in a smaller body (243px); default 15px top/bottom
+   padding causes scrollHeight to exceed clientHeight → bottom rows clipped */
+div[id^="pbsNodeInfoPanel"][id$="-body"] {
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+}
+
+/* v5.22: Removed height:inherit - only min-height:auto is needed */
+/* height:inherit was breaking widget containers, ExtJS inline heights work without it */
+.x-container[id^="pmxInfoWidget"] .x-box-inner,
+.x-container.x-box-layout-ct .x-box-inner {
+    min-height: auto !important;
+}
+
+/* v5.22: Fix pmxInfoWidget container heights - need 24px to fit 8px progress bars */
+[id^="pmxInfoWidget"][id$="-innerCt"] {
+    min-height: 24px !important;
+    overflow: visible !important;
+}
+
+/* Progress bar outer container (track) */
+.x-progress,
+.x-progress-default {
+    height: 8px !important;
+    min-height: 8px !important;
+    max-height: 8px !important;
+    border-radius: 5px !important;
+    overflow: hidden !important;
+    background-color: var(--pwt-gauge-back) !important;
+    border: none !important;
+    padding: 0 !important;
+}
+
+/* Progress bar inner fill - v5.31: Updated to UniFi blue #4797FF */
+.x-progress-bar,
+.x-progress-bar-default,
+.x-progress-default .x-progress-bar-default {
+    height: 8px !important;
+    min-height: 8px !important;
+    max-height: 8px !important;
+    border-radius: 5px !important;
+    border: none !important;
+    background-color: var(--pwt-gauge-default) !important;
+    background-image: none !important;
+}
+
+/* Hide progress text overlay */
+.x-progress-text,
+.x-progress-default .x-progress-text {
+    display: none !important;
+}
+
+/* Warning state */
+.x-progress.warning .x-progress-bar,
+.x-progress.warning .x-progress-bar-default {
+    background-color: var(--pwt-gauge-warn) !important;
+}
+
+/* Critical state */
+.x-progress.critical .x-progress-bar,
+.x-progress.critical .x-progress-bar-default {
+    background-color: var(--pwt-gauge-crit) !important;
+}
+
+/* =====================================================
+   SPLITTERS - Minimal
+   ===================================================== */
+.x-splitter {
+    background-color: var(--pm-bg-base);
+}
+
+/* Horizontal splitter (between main content and Tasks panel) - visible divider line */
+.x-splitter-horizontal,
+.x-splitter[aria-orientation="horizontal"] {
+    background-color: transparent !important;
+    border-top: 1px solid var(--pm-border) !important;
+}
+
+/* Vertical splitter - gap with visible line */
+.x-splitter-vertical {
+    width: 7px !important;
+    min-width: 7px !important;
+    background-color: transparent !important;
+    border-right: 1px solid #444444 !important;
+    z-index: 10 !important;
+}
+
+.x-keyboard-mode .x-splitter-focus::after {
+    border-color: #006EFF;
+}
+
+/* =====================================================
+   TABS - Clean, flat (UniFi authentic)
+   ===================================================== */
+.x-tab-bar-default {
+    background-color: #131416;
+}
+
+.x-tab-default.x-tab-over {
+    background-color: rgba(249, 250, 250, 0.04);
+    border: none;
+}
+
+/* Remove white focus border/outline from tabs (v5.46) */
+.x-tab:focus,
+.x-tab.x-tab-focus,
+.x-tab.x-tab-active:focus,
+.x-keyboard-mode .x-tab:focus,
+.x-keyboard-mode .x-tab-focus,
+.x-keyboard-mode .x-tab-active.x-tab-focus,
+.x-tab-default:focus,
+.x-tab-default.x-tab-focus,
+.x-tab-bar .x-tab:focus,
+.x-tab-bar .x-tab.x-tab-focus {
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: transparent !important;
+}
+
+.x-tab:focus::before,
+.x-tab:focus::after,
+.x-tab.x-tab-focus::before,
+.x-tab.x-tab-focus::after,
+.x-keyboard-mode .x-tab:focus::before,
+.x-keyboard-mode .x-tab:focus::after {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.x-tab-default.x-tab.x-tab-active {
+    background-color: #006EFF;
+    border: none;
+}
+
+.x-tab-default.x-tab.x-tab-disabled {
+    background-color: transparent;
+    border: none;
+    color: #737C87;
+}
+
+.x-keyboard-mode .x-tab-default.x-tab-focus,
+.x-keyboard-mode .x-tab-default.x-tab-focus.x-tab-active {
+    background-color: #006EFF;
+    border: none;
+}
+
+.x-tab-default-top {
+    background-color: #131416;
+    border: none;
+}
+
+.x-tab-inner-default {
+    color: #B7BCC2;
+}
+
+.x-tab-active .x-tab-inner-default {
+    color: #ffffff;
+}
+
+/* =====================================================
+   TOOLTIPS (UniFi authentic)
+   ===================================================== */
+.x-tip-default {
+    background-color: #282B2F;
+    border: 1px solid #34383D;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.x-tip-body-default {
+    color: #DEE0E3;
+}
+
+.x-tip-form-invalid {
+    background-color: #282B2F;
+    border-color: #f03a3e;
+}
+
+.x-tip-body-form-invalid {
+    color: #f03a3e;
+}
+
+/* =====================================================
+   TOOLBARS - Minimal borders (UniFi authentic)
+   ===================================================== */
+.x-toolbar {
+    background-color: #131416;
+}
+
+.x-toolbar-default {
+    background-color: #131416;
+    border: none;
+}
+
+.x-toolbar-default.x-docked-top {
+    border: none;
+    border-bottom: 1px solid #282B2F;
+}
+
+.x-toolbar-default .x-toolbar-separator {
+    border-color: #34383D;
+}
+
+.x-toolbar-text-default {
+    color: #B7BCC2;
+}
+
+/* =====================================================
+   TREE LIST - Sidebar navigation (UniFi authentic)
+   ===================================================== */
+.x-treelist-item,
+.x-treelist-item-tool {
+    background-color: #131416;
+    border-radius: 4px !important;
+}
+
+/* v5.84: Fix horizontal scrollbar in resource tree
+   ExtJS sets inline 'overflow: hidden auto' which causes 1px horizontal scroll.
+   Force overflow-x: hidden while preserving vertical scroll.
+   Note: Must use .x-fit-item compound selector to win over rule at line ~3365 */
+[id^="pveResourceTree"] .x-tree-view,
+[id^="pveResourceTree"] .x-tree-view.x-fit-item {
+    overflow-x: hidden !important;
+}
+
+/* Add spacing between tree items - v5.33: Reduced padding for compactness */
+.x-treelist-row,
+.x-tree-cell,
+.x-grid-cell-treecolumn {
+    padding: 0px 8px !important;
+}
+
+/* v5.9: UniFi-STYLE SELECTED ITEM (matching UniFi Controller)
+   Uses subtle background + blue icon AND text with ::before pseudo-element */
+
+.x-treelist-item-text,
+.x-treelist-item-icon {
+    color: rgba(255, 255, 255, 0.75);
+}
+
+/* Remove ALL old hover/selected background styles */
+.x-treelist-row,
+.x-treelist-row:hover,
+.x-treelist-row-over,
+.x-treelist-item-selected>.x-treelist-row,
+.x-treelist-item-selected>.x-treelist-row:hover,
+.x-treelist-item-expanded>.x-treelist-row,
+.x-treelist-item-expanded>.x-treelist-row-over,
+.x-treelist-item-expandable>.x-treelist-row,
+.x-treelist-item-expandable>.x-treelist-row-over {
+    background: none !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    border-left: none !important;
+    position: relative !important;
+    z-index: 1 !important;
+    border-radius: 4px !important;
+}
+
+/* Pseudo-element for ALL background effects */
+.x-treelist-row::before {
+    content: '' !important;
+    display: block !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 4px !important;
+    background: transparent !important;
+    opacity: 0 !important;
+    transform: scale(0.95) !important;
+    transition: opacity 0.15s ease, transform 0.15s ease !important;
+    z-index: -1 !important;
+    pointer-events: none !important;
+}
+
+/* Hover state - ONLY via :hover pseudo-class */
+.x-treelist-row:hover::before {
+    background: rgb(40, 43, 47) !important;
+    opacity: 0.5 !important;
+    transform: scale(1) !important;
+}
+
+/* DISABLE the x-treelist-row-over class effect (ExtJS adds this to parents) */
+.x-treelist-row-over::before {
+    opacity: 0 !important;
+}
+
+/* But if it's ALSO being hovered directly, show the effect */
+.x-treelist-row-over:hover::before {
+    background: rgb(40, 43, 47) !important;
+    opacity: 0.5 !important;
+    transform: scale(1) !important;
+}
+
+/* Selected state background */
+.x-treelist-item-selected>.x-treelist-row::before {
+    background: rgb(40, 43, 47) !important;
+    opacity: 1 !important;
+    transform: scale(1) !important;
+}
+
+/* Selected + hover - slightly lighter */
+.x-treelist-item-selected>.x-treelist-row:hover::before {
+    background: rgb(50, 53, 57) !important;
+    opacity: 1 !important;
+}
+
+/* Selected item text - BLUE like UniFi */
+.x-treelist-item-selected>.x-treelist-row .x-treelist-item-text {
+    color: rgb(71, 151, 255) !important;
+}
+
+/* Selected item icon - BLUE like UniFi */
+.x-treelist-item-selected>.x-treelist-row .x-treelist-item-icon {
+    color: rgb(71, 151, 255) !important;
+}
+
+/* Parent item containing selected child - WHITE text and icon */
+.x-treelist-item:has(.x-treelist-item-selected)>.x-treelist-row .x-treelist-item-text {
+    color: #F9FAFA !important;
+}
+
+.x-treelist-item:has(.x-treelist-item-selected)>.x-treelist-row .x-treelist-item-icon {
+    color: #F9FAFA !important;
+}
+
+/* Reset non-selected child items */
+.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected):not(:has(.x-treelist-item-selected))>.x-treelist-row::before {
+    opacity: 0 !important;
+}
+
+.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected):not(:has(.x-treelist-item-selected))>.x-treelist-row:hover::before {
+    opacity: 0.5 !important;
+}
+
+.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected):not(:has(.x-treelist-item-selected)) .x-treelist-item-text,
+.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected):not(:has(.x-treelist-item-selected)) .x-treelist-item-icon {
+    color: #B7BCC2 !important;
+}
+
+.x-treelist-pve-nav {
+    background-color: #131416;
+    border: none;
+}
+
+/* =====================================================
+   WINDOWS / DIALOGS (UniFi authentic)
+   ===================================================== */
+/* v5.50: Reduced shadow intensity for cleaner look */
+.x-window-default {
+    background-color: #131416;
+    border: 1px solid #34383D;
+    border-radius: 8px;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
+}
+
+.x-window-header-default {
+    background-color: #282B2F;
+    border: none;
+    border-radius: 8px 8px 0 0;
+}
+
+.x-window-header-default .x-mask {
+    background-color: rgba(40, 43, 47, 0.7);
+}
+
+.x-window-header-title-default {
+    color: #F9FAFA;
+}
+
+.x-window-body-default {
+    background-color: #131416;
+    border: none;
+    color: #B7BCC2;
+}
+
+.x-window-ghost {
+    background-color: #131416;
+}
+
+.x-window-header-default .x-tool-img {
+    background-color: transparent;
+}
+
+.x-message-box .x-window-body {
+    background-color: #282B2F;
+}
+
+/* =====================================================
+   v5.17 FIX: Dialog button overlap fix
+   ExtJS uses absolute positioning for buttons, but theme's
+   display:flex !important was overriding inline display:none
+   on hidden buttons (OK/Cancel in Yes/No dialogs)
+   ===================================================== */
+/* Respect ExtJS inline display:none on hidden dialog buttons */
+.x-message-box .x-btn.x-btn-default-small[style*="display: none"],
+.x-message-box .x-btn.x-btn-default-small[style*="display:none"],
+.x-window .x-toolbar-footer .x-btn[style*="display: none"],
+.x-window .x-toolbar-footer .x-btn[style*="display:none"] {
+    display: none !important;
+}
+
+/* =====================================================
+   v5.37 FIX: Create Wizard footer clipping
+   Some wizards position their footer toolbar with inline top/height.
+   If theme tweaks change control heights/padding, the footer can extend
+   past the window bottom and get clipped (the window has overflow:hidden).
+   Anchor wizard footers to bottom to keep Back/Next/Advanced visible.
+   ===================================================== */
+.x-window[id^="pveQemuCreateWizard-"] .x-toolbar-footer,
+.x-window[id^="pveLxcCreateWizard-"] .x-toolbar-footer {
+    top: auto !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: auto !important;
+    box-sizing: border-box !important;
+    padding: 8px 16px !important;
+    height: auto !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+/* Dialog footer - use flexbox for proper button spacing */
+.x-message-box .x-toolbar-footer {
+    display: flex !important;
+    justify-content: flex-end !important;
+    align-items: center !important;
+    gap: 8px !important;
+    padding: 12px 16px !important;
+}
+
+.x-message-box .x-toolbar-footer .x-box-inner,
+.x-message-box .x-toolbar-footer .x-box-inner {
+    display: flex !important;
+    justify-content: flex-end !important;
+    align-items: center !important;
+    gap: 8px !important;
+    width: 100% !important;
+    height: auto !important;
+}
+
+.x-message-box .x-toolbar-footer .x-box-target,
+.x-message-box .x-toolbar-footer .x-box-target {
+    display: flex !important;
+    justify-content: flex-end !important;
+    align-items: center !important;
+    gap: 8px !important;
+    position: relative !important;
+    width: auto !important;
+    height: auto !important;
+}
+
+/* Override absolute positioning on dialog buttons */
+.x-message-box .x-toolbar-footer .x-btn,
+.x-message-box .x-toolbar-footer .x-btn {
+    position: relative !important;
+    left: auto !important;
+    top: auto !important;
+    margin: 0 !important;
+}
+
+/* =====================================================
+   v5.49: LOGIN MODAL / DIALOG FORM FIXES
+   - Form fields stretch to full width (override inline 380px)
+   - Footer checkbox/button gap fixed (was -7px overlap)
+   - Footer toolbar takes full width (override inline 374px)
+   v5.65: Fix mainPanel width constraint - ExtJS calculates based on
+          original parent width before CSS override, causing 549px instead
+          of ~580px. Force direct child panels to use full available width.
+   ===================================================== */
+
+/* =====================================================
+   v5.74: DIALOG LAYOUT FIXES - REMOVED OVERRIDES
+   Removed all forced width/padding rules for panel bodies 
+   Removed forced width/padding rules for panel bodies to prevent layout cutoff.
+   ===================================================== */
+
+/* Only ensure the footer toolbar behaves correctly */
+.x-window .x-toolbar-footer {
+    width: 100% !important;
+    padding-right: 10px !important;
+    box-sizing: border-box !important;
+}
+
+.x-window .x-toolbar-footer .x-box-inner {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+    gap: 12px !important;
+    width: 100% !important;
+}
+
+.x-window .x-toolbar-footer .x-box-target {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+    gap: 12px !important;
+    width: 100% !important;
+}
+
+/* Remove absolute positioning from footer items */
+.x-window .x-toolbar-footer .x-form-type-checkbox,
+.x-window .x-toolbar-footer .x-btn {
+    position: relative !important;
+    left: auto !important;
+    top: auto !important;
+    margin: 0 !important;
+}
+
+/* Auto-width for checkbox label in footer */
+.x-window .x-toolbar-footer .x-form-type-checkbox .x-form-item-label {
+    width: auto !important;
+}
+
+/* v5.75: Fix Help button alignment in dialog footers */
+/* The help button is an inline button and should be on the left */
+.x-window .x-toolbar-footer .proxmox-inline-button:first-child {
+    margin-right: auto !important;
+}
+
+/* =====================================================
+   PROXMOX LOGO - Invert for dark
+   ===================================================== */
+img[id^="proxmoxlogo-"][id$="-img"] {
+    filter: invert(1) hue-rotate(180deg);
+}
+
+img[id^="proxmoxLogoSvg-"][id$="-img"] {
+    filter: invert(1) hue-rotate(180deg);
+}
+
+div[id^="versioninfo-"]+div[id^="panel-"]>div[id^="panel-"][id$="-bodyWrap"]>div,
+div.eol-notice+div[id^="panel-"]>div[id^="panel-"][id$="-bodyWrap"]>div {
+    background-color: transparent;
+    border: none;
+}
+
+/* =====================================================
+   PROXMOX SPECIFIC (UniFi authentic)
+   ===================================================== */
+.proxmox-invalid-row {
+    background-color: rgba(240, 58, 62, 0.15);
+}
+
+.x-keyboard-mode .proxmox-invalid-row .x-grid-item-focused {
+    background-color: rgba(240, 58, 62, 0.25);
+}
+
+.proxmox-warning-row {
+    background-color: rgba(245, 166, 35, 0.15);
+}
+
+.proxmox-disabled-row td {
+    color: #737C87;
+}
+
+.pmx-hint {
+    background-color: rgba(245, 166, 35, 0.15);
+    white-space: nowrap !important;
+}
+
+/* Allow pmx-hint text to expand beyond parent container width */
+.x-container:has(> .x-box-inner > .x-box-target > .pmx-hint) .x-box-inner {
+    overflow: visible !important;
+}
+
+.pmx-hint a {
+    color: #006EFF;
+}
+
+.proxmox-inline-button {
+    background-color: #34383D;
+    border: none;
+    color: #B7BCC2;
+}
+
+.proxmox-inline-button.x-btn-over {
+    background-color: rgba(249, 250, 250, 0.07);
+}
+
+.proxmox-inline-button .x-btn-inner,
+.proxmox-inline-button .x-btn-icon-el {
+    color: #B7BCC2;
+}
+
+/* Loading indicators */
+.x-grid-row-loading,
+.x-treelist-item-loading .x-treelist-item-icon,
+.x-mask-msg-text,
+.x-grid-tree-loading .x-tree-icon {
+    filter: invert(90%);
+}
+
+.x-mask-msg {
+    background-color: #282B2F;
+    border: 1px solid #34383D;
+    border-radius: 8px;
+}
+
+/* Markdown content */
+.pmx-md code {
+    background-color: #131416;
+}
+
+.pmx-md pre code {
+    border-color: #34383D;
+}
+
+.pmx-md tbody tr td {
+    border-color: #34383D;
+}
+
+.pmx-md tbody tr:nth-of-type(2n) {
+    background-color: rgba(249, 250, 250, 0.02);
+}
+
+.pmx-md tbody tr:hover td {
+    background-color: rgba(249, 250, 250, 0.04);
+}
+
+.pmx-md a {
+    color: #006EFF;
+}
+
+/* APT repos */
+.proxmox-apt-repos .x-grid-group-hd {
+    background-color: #131416;
+    border: none;
+}
+
+.proxmox-apt-repos .x-grid-group-title {
+    color: #F9FAFA;
+}
+
+/* Status colors */
+.info-blue {
+    color: #006EFF !important;
+}
+
+.critical {
+    color: #f03a3e !important;
+}
+
+/* Tags - Native contrast detection with proper visibility */
+.pve-edit-tag.editable span {
+    background-color: #282B2F;
+    color: #B7BCC2;
+    border-color: #34383D;
+}
+
+/* Tags with LIGHT text (dark backgrounds like blue tags) */
+.pve-edit-tag.proxmox-tag-light,
+.pve-edit-tag.proxmox-tag-light span {
+    color: #FFFFFF !important;
+}
+
+/* Tags with DARK text (bright backgrounds like pink/yellow tags) - non-edit mode only */
+.pve-edit-tag.proxmox-tag-dark:not(.editable),
+.pve-edit-tag.proxmox-tag-dark:not(.editable) span {
+    color: #1C1E21 !important;
+}
+
+/* v5.88: In edit mode, force light text on ALL tags for better visibility */
+.pve-edit-tag.editable.proxmox-tag-dark,
+.pve-edit-tag.editable.proxmox-tag-dark span {
+    color: #F9FAFA !important;
+}
+
+/* Individual tag styling */
+.pve-edit-tag {
+    display: inline-flex !important;
+    align-items: center !important;
+    padding: 2px 8px !important;
+    border-radius: 6px !important;
+}
+
+/* v5.30: Tree view tags - match header tag styling */
+.x-tree-node-text .proxmox-tag-dark,
+.x-tree-node-text .proxmox-tag-light,
+.x-grid-cell-inner .proxmox-tag-dark,
+.x-grid-cell-inner .proxmox-tag-light,
+span.proxmox-tag-dark,
+span.proxmox-tag-light {
+    border-radius: 6px !important;
+    padding: 2px 8px !important;
+    display: inline-flex !important;
+    align-items: center !important;
+}
+
+/* v5.52: Make resource tree tags match search table tag height (19px) */
+.x-tree-node-text .proxmox-tag-dark,
+.x-tree-node-text .proxmox-tag-light {
+    padding-top: 1px !important;
+    padding-bottom: 1px !important;
+}
+
+/* v5.52: Force tree row height to stay at 25px when tags have reduced padding */
+.x-tree-panel .x-grid-row {
+    height: 25px !important;
+}
+
+/* Pencil button for editing tags */
+/* v5.28: Removed display override - let Proxmox control visibility via inline style */
+.pve-tag-inline-button {
+    /* display controlled by inline style (none when not hovering, flex when editing) */
+    align-items: center !important;
+    justify-content: center !important;
+    width: 20px !important;
+    height: 20px !important;
+    background: transparent !important;
+    cursor: pointer !important;
+}
+
+.pve-tag-inline-button .fa-pencil,
+.pve-tag-inline-button .x-fa.fa-pencil {
+    color: #8A919A !important;
+}
+
+.pve-tag-inline-button:hover .fa-pencil {
+    color: #F9FAFA !important;
+}
+
+/* v5.29: Checkmark button in tag edit - match toolbar button size */
+/* The checkmark has x-btn-default-small (not toolbar-small) so we need specific sizing */
+.x-btn.x-btn-default-small:has(.fa-check) {
+    min-height: 24px !important;
+    height: 24px !important;
+    padding: 3px 8px !important;
+    border-radius: 4px !important;
+    background-color: #006EFF !important;
+    border: none !important;
+}
+
+/* Disabled checkmark - gray/transparent */
+.x-btn.x-btn-default-small:has(.fa-check).x-btn-disabled {
+    background-color: transparent !important;
+    border: 1px solid #34383D !important;
+    opacity: 0.5 !important;
+}
+
+/* Checkmark icon - white when enabled */
+.x-btn.x-btn-default-small:has(.fa-check) .fa-check {
+    color: #ffffff !important;
+}
+
+/* Disabled checkmark icon - gray */
+.x-btn.x-btn-default-small:has(.fa-check).x-btn-disabled .fa-check {
+    color: #737C87 !important;
+}
+
+/* Checkmark button hover - lighter blue */
+.x-btn.x-btn-default-small:has(.fa-check):not(.x-btn-disabled):hover {
+    background-color: #338BFF !important;
+}
+
+/* Hide the &nbsp; inner element on checkmark button */
+.x-btn.x-btn-default-small:has(.fa-check) .x-btn-inner {
+    display: none !important;
+}
+
+.proxmox-tags-full .proxmox-tag-light,
+.proxmox-tags-full .proxmox-tag-dark,
+.proxmox-tags-circle .proxmox-tag-light,
+.proxmox-tags-circle .proxmox-tag-dark {
+    outline: 1px solid rgba(52, 56, 61, 0.3);
+}
+
+/* =====================================================
+   DATE PICKER (UniFi authentic)
+   ===================================================== */
+.x-datepicker,
+.x-datepicker-column-header,
+.x-monthpicker {
+    background-color: #131416;
+    color: #B7BCC2;
+    border: none;
+}
+
+.x-datepicker-month .x-btn-over.x-btn-default-small {
+    background-color: #34383D;
+}
+
+.x-monthpicker-months {
+    border-color: #34383D;
+}
+
+.x-datepicker-header {
+    background-color: #131416;
+}
+
+.x-datepicker-date,
+.x-monthpicker-item-inner {
+    color: #B7BCC2;
+}
+
+.x-datepicker-prevday .x-datepicker-date,
+.x-datepicker-nextday .x-datepicker-date {
+    color: #737C87;
+}
+
+.x-datepicker-footer,
+.x-monthpicker-buttons {
+    background-color: #131416;
+}
+
+.x-datepicker-selected div.x-datepicker-date,
+.x-monthpicker-item a.x-monthpicker-selected,
+a.x-monthpicker-item-inner:hover,
+div.x-datepicker-date:hover {
+    background-color: #006EFF;
+    color: #fff;
+}
+
+/* =====================================================
+   USAGE BARS - UniFi authentic style
+   ===================================================== */
+/* v5.31: Reduced border-radius, removed wrapper padding for full-width fill */
+.usage-wrapper {
+    border: none !important;
+    border-radius: 2px !important;
+    background-color: #34383D !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+}
+
+.usage-negative {
+    background-color: transparent !important;
+    width: 100% !important;
+}
+
+.usage {
+    background-color: #37BE5F !important;
+    border-radius: 2px !important;
+    width: 100% !important;
+}
+
+/* =====================================================
+   CONSOLE / TERMINAL
+   ===================================================== */
+div.monitor {
+    border-color: #34383D;
+}
+
+.install-mask {
+    background-color: #131416;
+    color: #B7BCC2;
+}
+
+.x-window.install-mask {
+    box-shadow: rgba(0, 0, 0, 0.5) 0 4px 20px !important;
+}
+
+/* =====================================================
+   OSD TABLE
+   ===================================================== */
+table.osds tr {
+    border-color: var(--pm-border);
+}
+
+table.osds td {
+    border-color: var(--pm-border);
+}
+
+/* =====================================================
+   LINKS - UniFi Blue (authentic)
+   ===================================================== */
+a {
+    color: var(--pm-accent);
+}
+
+a:hover {
+    color: var(--pm-accent-hover);
+}
+
+/* =====================================================
+   STATUS DOTS (like UniFi - authentic)
+   ===================================================== */
+/* Proxmox uses ::before for the type icon and ::after for the status glyph.
+   UniFi style: keep type icon neutral and show a green dot for "running". */
+.x-tree-icon-custom.running::before,
+.x-grid-icon-custom.running::before {
+    color: #B7BCC2 !important;
+}
+
+.x-tree-icon-custom.running::after,
+.x-grid-icon-custom.running::after {
+    content: "\f111" !important;
+    /* FontAwesome circle */
+    font-family: "FontAwesome" !important;
+    font-size: 9px !important;
+    line-height: 1 !important;
+    color: var(--pm-success) !important;
+    background: transparent !important;
+    text-shadow: none !important;
+}
+
+/* Align CT/LXC running dot with VM running dot (cube glyph is slightly narrower) */
+.x-tree-icon-custom.fa-cube.running::after,
+.x-grid-icon-custom.fa-cube.running::after {
+    left: -3.8px !important;
+    right: 3.8px !important;
+}
+
+/* v5.90: Lock icons (migrate, backup, suspend) override running dot
+   When VM is both running AND locked for operation, show the lock icon instead of green dot */
+.x-tree-icon-custom.running.lock-migrate::after,
+.x-grid-icon-custom.running.lock-migrate::after {
+    content: "\f1d9" !important; /* FontAwesome paper-plane (migrate) */
+    font-size: 0.75em !important;
+    color: var(--pm-warning) !important; /* Amber to indicate operation in progress */
+}
+
+.x-tree-icon-custom.running.lock-backup::after,
+.x-grid-icon-custom.running.lock-backup::after {
+    content: "\f0c7" !important; /* FontAwesome save/floppy (backup) */
+    font-size: 0.75em !important;
+    color: var(--pm-warning) !important;
+}
+
+.x-tree-icon-custom.running.lock-suspending::after,
+.x-grid-icon-custom.running.lock-suspending::after {
+    content: "\f019" !important; /* FontAwesome download (suspending) */
+    font-size: 0.75em !important;
+    color: var(--pm-warning) !important;
+}
+
+.x-tree-icon-custom.stopped::before,
+.x-grid-icon-custom.stopped::before {
+    color: var(--pm-text-disabled);
+}
+
+/* =====================================================
+   SCROLLBARS - Minimal, dark (UniFi authentic)
+   v5.93: Increased width from 8px to 12px for better clickability
+   ===================================================== */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: #131416;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #34383D;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(249, 250, 250, 0.07);
+}
+
+/* v5.84: Style scrollbar corner to match theme (eliminates white square) */
+::-webkit-scrollbar-corner {
+    background-color: #131416;
+}
+
+/* =====================================================
+   FIX: Labels and grid text - UniFi authentic colors
+   ===================================================== */
+.x-grid-cell-inner,
+.x-grid-cell,
+.x-form-display-field,
+.x-form-display-field-default,
+td,
+.x-panel-body-default,
+.x-grid-item {
+    color: #DEE0E3 !important;
+}
+
+/* Column headers should be brighter */
+.x-column-header-text,
+.x-column-header-text-inner,
+.x-column-header-text-default {
+    color: var(--pm-text-bright) !important;
+}
+
+/* Fix specific grid/table text */
+.x-grid-cell-inner span,
+.x-grid-cell-inner div {
+    color: #DEE0E3;
+}
+
+/* Resource panel labels */
+.x-form-item-label-inner {
+    color: #DEE0E3 !important;
+}
+
+/* =====================================================
+   FIX: Summary/Stats panels - add borders/cards
+   ===================================================== */
+.pveStatusPanel,
+.x-panel-default-framed,
+.x-panel-body-default-framed {
+    background-color: #131416 !important;
+    border: 1px solid #34383D !important;
+    border-radius: 12px !important;
+}
+
+/* Stats panel body (Status, CPU, Memory, etc) - match Notes panel rounded corners */
+[id^="pveGuestStatusView-"][id$="-body"],
+[id^="pmxNotesView-"] .x-panel-body {
+    border-radius: 8px !important;
+}
+
+/* Panel headers in summary */
+.x-panel-header-default-framed {
+    background-color: #282B2F !important;
+    border: none !important;
+    border-bottom: 1px solid #34383D !important;
+    border-radius: 12px 12px 0 0 !important;
+}
+
+/* Summary status grid - the table with CPU/Memory/etc */
+/* FIX v5.18: Removed overflow:hidden to restore content visibility */
+.pve-info-grid {
+    border-radius: 12px !important;
+}
+
+/* Form display fields in summary (status fields) */
+.x-form-display-field-default {
+    border-radius: 6px !important;
+}
+
+/* Graph containers - ensure visibility */
+.pve-rrdview,
+.rrdview {
+    background-color: #131416 !important;
+    border: 1px solid #34383D !important;
+    border-radius: 12px !important;
+    padding: 12px !important;
+}
+
+/* Chart/RRD panel specific - canvas should be transparent for chart lines to show */
+div[id*="rrdchart"],
+.pve-rrddatastore,
+.pmx-panel-rrd {
+    background-color: #131416 !important;
+}
+
+/* Canvas elements - don't set background, let charts be visible */
+.proxmox-rrd-panel canvas,
+.proxmox-widget-toolkit canvas,
+canvas.x-surface,
+.x-surface canvas {
+    background-color: transparent !important;
+    opacity: 1 !important;
+}
+
+/* Proxmox RRD chart widget - ensure visibility */
+.proxmox-rrd-panel,
+.proxmox-rrd-chart {
+    background-color: #131416 !important;
+}
+
+/* Chart text/labels */
+.x-surface text,
+svg text {
+    fill: #DEE0E3 !important;
+}
+
+/* Summary status panel */
+.pve-summary-status,
+.x-container .pve-status {
+    background-color: #131416 !important;
+    border: 1px solid #34383D !important;
+    border-radius: 8px !important;
+}
+
+/* Notes panel */
+.x-panel-default[id*="notes"],
+.pve-notes-view {
+    background-color: #131416 !important;
+    border: 1px solid #34383D !important;
+    border-radius: 8px !important;
+}
+
+/* =====================================================
+   FIX: Fieldset and form sections
+   ===================================================== */
+.x-fieldset {
+    background-color: #131416 !important;
+    border: 1px solid #34383D !important;
+    border-radius: 8px !important;
+    padding: 12px !important;
+}
+
+.x-fieldset-header-text {
+    color: #F9FAFA !important;
+    font-weight: 500 !important;
+}
+
+/* =====================================================
+   FIX: UniFi-style rounded corners on hover/selection
+   ===================================================== */
+
+/* Grid row hover/selection - rounded corners */
+.x-grid-item-over,
+.x-grid-item-selected,
+.x-grid-with-row-lines .x-grid-item.x-grid-item-over,
+.x-grid-with-row-lines .x-grid-item.x-grid-item-selected {
+    border-radius: 6px !important;
+}
+
+/* Menu items - rounded corners */
+.x-menu-item-default.x-menu-item-focus,
+.x-menu-item-default.x-menu-item-active,
+.x-menu-item:hover {
+    border-radius: 6px !important;
+}
+
+/* Treelist/sidebar items - rounded corners (v5.9: 4px to match UniFi) */
+/* Background now handled by ::before pseudo-element in treelist section */
+
+/* Boundlist dropdown items - rounded corners (v5.10: 4px to match UniFi) */
+.x-boundlist-item-over,
+.x-boundlist-selected {
+    border-radius: 4px !important;
+}
+
+/* Tab hover - rounded corners */
+.x-tab-default.x-tab-over,
+.x-tab-default.x-tab.x-tab-active {
+    border-radius: 6px 6px 0 0 !important;
+}
+
+/* =====================================================
+   FIX: Remove underlines from column headers
+   ===================================================== */
+.x-column-header-over,
+.x-column-header-open,
+.x-column-header-sort-ASC,
+.x-column-header-sort-DESC,
+.x-column-header-last .x-column-header-over .x-column-header-trigger {
+    border-bottom: none !important;
+    text-decoration: none !important;
+}
+
+/* Column header text - no underline */
+.x-column-header-text,
+.x-column-header-text-inner {
+    text-decoration: none !important;
+    border-bottom: none !important;
+}
+
+/* Selected grid cells - no underlines */
+.x-grid-item-selected .x-grid-cell-inner,
+.x-grid-item-over .x-grid-cell-inner {
+    text-decoration: none !important;
+}
+
+/* =====================================================
+   FIX: Data view and resource lists
+   ===================================================== */
+.x-dataview-item {
+    color: #DEE0E3 !important;
+}
+
+/* Resource grid specific */
+.pve-resource-grid .x-grid-cell-inner {
+    color: #DEE0E3 !important;
+}
+
+/* Override any remaining dark text */
+.x-form-item-body,
+.x-form-item {
+    color: hsla(214, 8%, 88%, 1) !important;
+}
+
+/* Tree node text */
+.x-tree-node-text {
+    color: hsla(214, 8%, 88%, 1) !important;
+}
+
+.x-treelist-item-text {
+    color: rgba(255, 255, 255, 0.75) !important;
+}
+
+/* Selected items should be white */
+.x-grid-item-selected .x-grid-cell-inner,
+.x-treelist-item-selected .x-treelist-item-text,
+.x-tree-selected .x-tree-node-text {
+    color: #ffffff !important;
+}
+
+/* =====================================================
+   FIX: Tab text readability
+   ===================================================== */
+.x-tab-inner-default {
+    color: #B7BCC2 !important;
+}
+
+.x-tab-active .x-tab-inner-default {
+    color: #ffffff !important;
+}
+
+/* =====================================================
+   SMOOTH TRANSITIONS - UniFi-style animations
+   ===================================================== */
+
+/* Base transition for all interactive elements */
+.x-btn,
+.x-btn-default-small,
+.x-btn-default-toolbar-small,
+.x-menu-item,
+.x-grid-item,
+.x-grid-row,
+.x-treelist-item,
+.x-treelist-row,
+.x-tab,
+.x-boundlist-item,
+.x-tree-node,
+.x-dataview-item,
+.x-column-header,
+.x-form-trigger,
+.x-tool,
+.x-panel-header {
+    transition: background-color 0.2s ease,
+        border-color 0.2s ease,
+        color 0.2s ease,
+        box-shadow 0.2s ease,
+        opacity 0.2s ease !important;
+}
+
+/* Form elements transitions */
+.x-form-trigger-wrap,
+.x-form-trigger-wrap-default,
+.x-form-text,
+.x-form-text-default,
+.x-form-field {
+    transition: border-color 0.2s ease,
+        box-shadow 0.2s ease,
+        background-color 0.2s ease !important;
+}
+
+/* Button hover glow effect */
+.x-btn-default-small:hover,
+.x-btn-default-small.x-btn-over {
+    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3) !important;
+}
+
+/* Toolbar fade moved to Button Section */
+
+/* Grid row hover - smooth background change */
+.x-grid-item:hover,
+.x-grid-item.x-grid-item-over {
+    background-color: var(--pm-hover-subtle) !important;
+}
+
+/* Tree item hover - handled by ::before pseudo-element in treelist section */
+
+/* Menu item hover */
+.x-menu-item:hover,
+.x-menu-item-active {
+    background-color: #22252d !important;
+}
+
+/* Tab hover */
+.x-tab:hover,
+.x-tab.x-tab-over {
+    background-color: #1a1c22 !important;
+}
+
+/* Dropdown item hover - UniFi style */
+.x-boundlist-item:hover,
+.x-boundlist-item-over {
+    background-color: rgba(249, 250, 250, 0.04) !important;
+    color: #F9FAFA !important;
+}
+
+/* Panel tool icons */
+.x-tool:hover {
+    opacity: 1 !important;
+}
+
+.x-tool {
+    opacity: 0.7 !important;
+}
+
+/* Links hover */
+a {
+    transition: color 0.2s ease !important;
+}
+
+/* Input focus glow */
+.x-form-trigger-wrap-focus,
+.x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
+    box-shadow: 0 0 0 3px var(--pm-focus-ring-color) !important;
+}
+
+/* Selected/active states should also transition smoothly */
+.x-grid-item-selected,
+.x-treelist-item-selected>.x-treelist-row,
+.x-tab-active {
+    transition: background-color 0.15s ease !important;
+}
+
+/* Scrollbar smooth transition */
+::-webkit-scrollbar-thumb {
+    transition: background-color 0.2s ease !important;
+}
+
+/* Progress bar animation */
+.x-progress-bar,
+.x-progress-bar-default {
+    transition: width 0.3s ease !important;
+}
+
+/* Splitter hover */
+.x-splitter {
+    transition: background-color 0.2s ease !important;
+}
+
+.x-splitter:hover {
+    background-color: #2a2d36 !important;
+}
+
+/* Window/dialog fade */
+.x-window {
+    transition: opacity 0.2s ease, transform 0.2s ease !important;
+}
+
+/* Tooltip fade */
+.x-tip,
+.x-tip-default {
+    transition: opacity 0.15s ease !important;
+}
+
+/* Mask fade */
+.x-mask {
+    transition: opacity 0.2s ease !important;
+}
+
+/* =====================================================
+   v5.1 FIX: Segmented buttons (Day/Hour dropdown)
+   Only parent should have border-radius, not children
+   ===================================================== */
+.x-segmented-button {
+    border-radius: 6px !important;
+    overflow: visible !important;
+    display: flex !important;
+    gap: 5px !important;
+}
+
+.x-segmented-button .x-btn,
+.x-segmented-button .x-btn-default-small,
+.x-segmented-button .x-btn-inner,
+.x-segmented-button .x-btn-wrap {
+    border-radius: 6px !important;
+}
+
+/* v5.24: Fix segmented buttons - use flex for horizontal alignment with gap */
+.x-segmented-button .proxmox-inline-button,
+.x-segmented-button .x-btn {
+    display: flex !important;
+}
+
+/* v5.25: Pressed segmented button text should be white for visibility on blue background */
+.x-segmented-button .x-btn.x-btn-pressed .x-btn-inner {
+    color: #ffffff !important;
+}
+
+/* =====================================================
+   v5.1 FIX: Progress bars - increase container height
+   The bars were getting cut off at bottom
+   ===================================================== */
+.pve-widget-chart-container,
+.proxmox-gauge-chart,
+.pve-resource-chart,
+div[class*="chart-container"],
+div[class*="gauge"] {
+    overflow: visible !important;
+}
+
+/* =====================================================
+   v5.1 FIX: Separator between left panel sections
+   Line between server list (left) and options menu (right)
+   ===================================================== */
+/* Remove individual item borders */
+.x-treelist-item,
+.x-grid-item {
+    border-bottom: none !important;
+}
+
+/* v5.3 FIX: Single separator between resource tree and content panel */
+/* Remove double separator - only use the splitter */
+#content,
+.x-container.x-border-item.x-container-default[id="content"] {
+    border-left: none !important;
+}
+
+
+
+/* =====================================================
+   v5.1 FIX: Server view dropdown - smaller and styled
+   ===================================================== */
+.x-btn-default-toolbar-small.x-btn-menu-active,
+.x-btn.x-btn-arrow.x-btn-default-small {
+    padding: 4px 10px !important;
+    min-height: 26px !important;
+    font-size: 12px !important;
+}
+
+/* View mode combo/dropdown */
+.x-form-trigger-wrap-default:not([id^="textarea-"]):not(.x-grid-body),
+.x-form-trigger-wrap:not([id^="textarea-"]):not(.x-grid-body) {
+    height: 28px !important;
+}
+
+/* =====================================================
+   v5.5 FIX: Preserve parent icon color when children are hovered
+   ===================================================== */
+/* The selected parent row should ALWAYS have blue icon, regardless of child hover state */
+.x-treelist-item-selected.x-treelist-item-expanded>.x-treelist-row .x-treelist-item-icon {
+    color: #006EFF !important;
+}
+
+/* Even when entire treelist has hover somewhere, selected parent icon stays blue */
+.x-treelist-item-selected>.x-treelist-row .x-treelist-item-icon {
+    color: #006EFF !important;
+}
+
+/* =====================================================
+   v5.2 FIX: Toolbar buttons - ensure border-radius applies
+   ===================================================== */
+
+/* Toolbar button hover state */
+.x-btn-default-toolbar-small:hover,
+.x-btn-default-toolbar-small.x-btn-over {
+    background-color: #34383D !important;
+    border-color: #4A4F56 !important;
+}
+
+/* Pressed/active state for toolbar buttons */
+.x-btn-default-toolbar-small.x-btn-pressed,
+.x-btn-default-toolbar-small.x-btn-menu-active {
+    background-color: #006EFF !important;
+    border-color: #006EFF !important;
+}
+
+/* Disabled state for toolbar buttons */
+.x-btn-default-toolbar-small.x-btn-disabled {
+    opacity: 0.4 !important;
+    cursor: not-allowed !important;
+}
+
+/* =====================================================
+   v5.2 FIX: Pointer cursor on tree items (entire item)
+   ===================================================== */
+.x-tree-node-text,
+.x-grid-item,
+.x-grid-cell,
+.x-grid-cell-inner,
+.x-tree-elbow-img,
+.x-tree-icon,
+#pveResourceTree .x-grid-item,
+#pveResourceTree .x-grid-row,
+.x-treelist-item,
+.x-treelist-row,
+.x-treelist-item-wrap,
+.x-treelist-item-text,
+.x-treelist-item-icon,
+.x-treelistitem {
+    cursor: pointer !important;
+}
+
+/* =====================================================
+   v5.2 FIX: Navigation tree - reduced gaps & centered icons
+   ===================================================== */
+.x-treelist-item,
+.x-treelistitem {
+    min-height: 28px !important;
+    height: auto !important;
+}
+
+.x-treelist-row {
+    min-height: 28px !important;
+    padding: 2px 0 !important;
+    margin-right: 4px !important;
+    /* v5.7: symmetric spacing */
+    display: flex !important;
+    align-items: center !important;
+}
+
+/* v5.33: Reduce margin between toolbox navigation items */
+.x-treelist-pve-nav .x-treelist-row {
+    margin-top: 2px !important;
+}
+
+/* v5.94: Increased margin-left (20px→28px) for better icon-to-label gap */
+.x-treelist-item-text {
+    margin-left: 28px !important;
+    line-height: 24px !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+/* Center icons vertically in tree list */
+.x-treelist-item-icon {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    line-height: inherit !important;
+}
+
+.x-treelist-item-wrap {
+    display: flex !important;
+    align-items: center !important;
+}
+
+/* =====================================================
+   v5.7 FIX: Toolbox tree expand/collapse animation
+   v5.18 FIX: Only apply animation to child containers, not main nav
+   ===================================================== */
+/* Main navigation container - must be visible */
+.x-treelist-pve-nav .x-treelist-container {
+    display: block !important;
+    overflow: visible !important;
+    overflow-y: auto !important;
+}
+
+/* Child containers for expand/collapse animation */
+.x-treelist-item>.x-treelist-container {
+    overflow: hidden !important;
+    transition: max-height 0.25s ease-out, opacity 0.2s ease-out !important;
+}
+
+/* Expanded state - show children */
+.x-treelist-item-expanded>.x-treelist-container {
+    max-height: 500px !important;
+    opacity: 1 !important;
+}
+
+/* Collapsed state - hide children with animation */
+.x-treelist-item-collapsed>.x-treelist-container {
+    max-height: 0 !important;
+    opacity: 0 !important;
+}
+
+/* =====================================================
+   v5.9 FIX: Consistent 4px border-radius on treelist items (UniFi-style)
+   Note: Treelist hover/selected now handled by ::before pseudo-element
+   ===================================================== */
+
+/* v5.54: Force 4px border-radius on treelist items and containers
+   (overrides default 8px from widget-toolkit) */
+.x-treelist-item-wrap,
+.x-treelist-item-text,
+.x-treelist-row,
+.x-treelist-container,
+.x-treelist-root-container,
+.x-treelist,
+.x-treelist-pve-nav {
+    border-radius: 4px !important;
+}
+
+/* Resource tree selections - consistent 8px */
+.x-grid-item-selected,
+.x-grid-item-focused,
+.x-grid-item-over {
+    border-radius: 8px !important;
+}
+
+/* v5.5 FIX: Symmetric wrap padding for treelist items */
+.x-treelist-item-wrap {
+    padding-left: 2px !important;
+    padding-right: 2px !important;
+}
+
+/* v5.5 FIX: Same symmetric padding for selected items (no longer needs compensation) */
+.x-treelist-item-selected>.x-treelist-row .x-treelist-item-wrap {
+    padding-left: 2px !important;
+    padding-right: 2px !important;
+}
+
+/* v5.5 FIX: Add left margin to icon for visual balance */
+.x-treelist-item-icon {
+    margin-left: 4px !important;
+}
+
+/* =====================================================
+   v5.2 FIX: Remove blue focus box on grid items
+   ===================================================== */
+.x-keyboard-mode .x-grid-cell-inner::before,
+.x-grid-item-focused .x-grid-cell-inner::before,
+.x-grid-cell-inner::before {
+    content: none !important;
+    border: none !important;
+    display: none !important;
+}
+
+/* Remove focus outline */
+.x-grid-item-focused,
+.x-grid-item-focused .x-grid-cell,
+.x-grid-item-focused .x-grid-cell-inner {
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+/* =====================================================
+   v5.2 FIX: Font weight for Datacenter and Node items only
+   ===================================================== */
+.fa-server~.x-tree-node-text,
+.fa-building~.x-tree-node-text {
+    font-weight: 600 !important;
+}
+
+/* =====================================================
+   v5.2 FIX: Global smooth scrolling
+   ===================================================== */
+html {
+    scroll-behavior: smooth !important;
+}
+
+/* =====================================================
+   v5.4 FIX: Child items styling when parent is selected
+   ===================================================== */
+/* Reset text/icon color for non-selected children of selected parent */
+.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected) .x-treelist-item-text,
+.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected) .x-treelist-item-icon {
+    color: #B7BCC2 !important;
+}
+
+/* =====================================================
+   v5.4 FIX: Remove double separator between panels
+   ===================================================== */
+#pveResourceTree-1011-body,
+.pve-resource-tree .x-panel-body,
+.x-panel-body.x-grid-body {
+    border-right: none !important;
+}
+
+/* =====================================================
+   v5.4 FIX: Hover state for tree items
+   ===================================================== */
+/* Hover background for normal items */
+.x-treelist-item-over>.x-treelist-row {
+    background-color: #23262A !important;
+}
+
+/* Hover background for child items inside selected parent - higher specificity */
+.x-treelist-item-selected .x-treelist-item.x-treelist-item-over:not(.x-treelist-item-selected)>.x-treelist-row {
+    background-color: #23262A !important;
+}
+
+/* Hover text/icon color */
+.x-treelist-item-over>.x-treelist-row .x-treelist-item-text,
+.x-treelist-item-over>.x-treelist-row .x-treelist-item-icon,
+.x-treelist-item-selected .x-treelist-item.x-treelist-item-over:not(.x-treelist-item-selected)>.x-treelist-row .x-treelist-item-text,
+.x-treelist-item-selected .x-treelist-item.x-treelist-item-over:not(.x-treelist-item-selected)>.x-treelist-row .x-treelist-item-icon {
+    color: #FFFFFF !important;
+}
+
+/* =====================================================
+   v5.4 FIX: Resource tree (grid) - left sidebar styling
+   ===================================================== */
+/* Server View resource tree is not a table: disable table row separators */
+[id^="pveResourceTree-"].x-tree-panel td.x-grid-cell,
+[id^="pveResourceTree-"].x-tree-panel .x-grid-td,
+[id^="pveResourceTree-"].x-tree-panel .x-grid-cell {
+    border-bottom: none !important;
+}
+
+/* Server View resource tree: compact VM/CT leaf rows (verified via DevTools) */
+[id^="pveResourceTree-"].x-tree-panel tr.x-grid-row.x-grid-tree-node-leaf .x-grid-cell-inner,
+[id^="pveResourceTree-"].x-tree-panel .x-grid-item.x-grid-tree-node-leaf .x-grid-cell-inner {
+    padding-top: 2px !important;
+    padding-bottom: 2px !important;
+}
+
+/* Server View resource tree: prevent last-leaf indent shift (x-tree-elbow-end has extra margin) */
+[id^="pveResourceTree-"].x-tree-panel .x-tree-elbow-end {
+    margin-right: 0 !important;
+}
+
+[id^="pveResourceTree-"].x-tree-panel tr.x-grid-row.x-grid-tree-node-leaf .x-tree-node-text,
+[id^="pveResourceTree-"].x-tree-panel .x-grid-item.x-grid-tree-node-leaf .x-tree-node-text {
+    line-height: 17px !important;
+}
+
+/* Non-selected items should show gray text */
+.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .x-tree-node-text {
+    color: #B7BCC2 !important;
+}
+
+/* Non-selected item icons should be gray */
+.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .x-tree-icon,
+.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .fa {
+    color: #B7BCC2 !important;
+}
+
+/* v5.94: Preserve status icon colors in grid items
+   The broad .fa color rule above overrides .good/.warning/.critical from ext6-pmx.css */
+.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .fa.good {
+    color: var(--pm-success) !important;
+}
+.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .fa.warning {
+    color: var(--pm-warning) !important;
+}
+.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .fa.critical {
+    color: var(--pm-error) !important;
+}
+
+/* Selected item text should be white */
+.x-grid-item-selected .x-tree-node-text,
+.x-grid-item-focused .x-tree-node-text {
+    color: #FFFFFF !important;
+}
+
+/* Selected item icons should be blue */
+.x-grid-item-selected .x-tree-icon,
+.x-grid-item-selected .fa,
+.x-grid-item-focused .x-tree-icon,
+.x-grid-item-focused .fa {
+    color: #3B8BEB !important;
+}
+
+/* Hover state for grid items - text stays primary color */
+.x-grid-item-over:not(.x-grid-item-selected) .x-tree-node-text {
+    color: #DEE0E3 !important;
+}
+
+/* Hover state for grid items - icons color */
+.x-grid-item-over:not(.x-grid-item-selected) .x-tree-icon,
+.x-grid-item-over:not(.x-grid-item-selected) .fa {
+    color: #DEE0E3 !important;
+}
+
+
+
+
+
+
+
+
+
+/* Content panel margin for splitter spacing */
+#content {
+    margin-left: 6px !important;
+}
+
+/* =====================================================
+   CHARTS - Remove border-radius from data area only
+   (Outer panel container keeps its rounded corners)
+   ===================================================== */
+/* Remove border-radius from chart canvas/data area ONLY */
+canvas.x-surface-canvas,
+.x-surface-canvas,
+.x-draw-component canvas,
+.proxmox-rrd-chart canvas {
+    border-radius: 0 !important;
+}
+
+/* SVG surface if used */
+svg.x-surface {
+    border-radius: 0 !important;
+}
+
+/* Draw container that holds the canvas */
+.x-draw-container,
+.x-surface {
+    border-radius: 0 !important;
+}
+
+/* =====================================================
+   HEADER BUTTONS - Vertical centering fix
+   ===================================================== */
+/* Button flex styles moved to Button Section */
+
+/* Documentation button */
+.proxmox-inline-button {
+    height: 28px !important;
+    min-height: 28px !important;
+    display: flex !important;
+    align-items: center !important;
+    padding: 3px 8px !important;
+}
+
+/* Specific fix for fa-desktop icon (Create VM) - visually bottom-heavy */
+.x-btn-icon-el.fa-desktop {
+    transform: translateY(1.1px) !important;
+}
+
+/* v5.27: Fix icon-only button width (hide &nbsp; inner element) - MUST be at end to override earlier rules */
+/* ExtJS adds x-btn-no-text class to buttons with only an icon */
+.x-btn-no-text .x-btn-inner,
+.x-btn-button.x-btn-no-text .x-btn-inner,
+.x-btn-button-default-toolbar-small.x-btn-no-text .x-btn-inner-default-toolbar-small,
+.x-btn-button-default-small.x-btn-no-text .x-btn-inner-default-small,
+.x-btn-button-default-small.x-btn-no-text>.x-btn-inner-default-small,
+.x-btn.x-btn-default-small .x-btn-button.x-btn-no-text .x-btn-inner {
+    display: none !important;
+}
+
+/* =====================================================
+   v5.18 FIX: Scroll and overflow fixes for content visibility
+   ===================================================== */
+/* FIX 1: Remove overflow:hidden from grid containers to restore content visibility */
+.pve-info-grid,
+.x-panel-default .x-grid,
+.x-container .x-grid-view {
+    overflow: visible !important;
+    overflow-y: auto !important;
+}
+
+/* FIX 2: Vertical toolbar scrolling with hidden scrollbar */
+.x-toolbar.x-vertical .x-box-scroller-body-vertical {
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+}
+
+/* Hide scrollbar for Chrome/Safari/Opera */
+.x-toolbar.x-vertical .x-box-scroller-body-vertical::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+}
+
+/* FIX 3: Make sure the vertical toolbar doesn't hide overflow */
+.x-toolbar.x-vertical {
+    overflow: visible !important;
+    overflow-y: visible !important;
+}
+
+/* =====================================================
+   v5.35 FIX: Center "IPs" label vertically with IP addresses
+   Works together with v5.87 button repositioning
+   ===================================================== */
+/* IPs label container - translate down 9px for vertical centering */
+[id^="pveIPViewLXC-"]>.x-box-inner>.x-box-target>[id^="box-"] {
+    transform: translateY(9px) !important;
+}
+
+/* =====================================================
+   v5.18 FIX: CRITICAL - Restore grid/tree content visibility
+   These must be at the END of the file to override earlier rules
+   ===================================================== */
+/* Remove overflow:hidden that was hiding grid content */
+.pve-info-grid,
+.x-panel-default .x-grid,
+.x-container .x-grid-view,
+.x-tree-view,
+.x-tree-panel .x-panel-body,
+.x-grid-view {
+    overflow: visible !important;
+}
+
+/* Tree/grid scroll containers */
+.x-tree-view.x-fit-item,
+.x-grid-view.x-fit-item {
+    overflow: auto !important;
+}
+
+/* Grid item containers must be visible */
+.x-grid-item-container {
+    overflow: visible !important;
+}
+
+/* =====================================================
+   v5.57: Fix summary page widget panels border-radius
+   Column-layout panels (Health, Guests, Resources, etc.)
+   have visible borders that need rounded corners to
+   match the parent panel's 8px radius.
+   ===================================================== */
+.x-panel.x-column>.x-panel-bodyWrap>.x-panel-body.x-panel-body-default {
+    border-radius: 8px !important;
+}
+
+/* Tree navigation container */
+.x-treelist-pve-nav .x-treelist-container {
+    overflow: visible !important;
+    overflow-y: auto !important;
+}
+
+/* =====================================================
+   v5.40: Fix floating grid picker border-radius
+   Storage dropdown, ISO selector, etc. use grid layers
+   Should match 4px boundlist style, not 12px summary panels
+   ===================================================== */
+.x-layer.x-grid .x-grid-view,
+.x-panel.x-layer.x-grid .x-grid-view {
+    border-radius: 4px !important;
+}
+
+.x-panel.x-layer.x-grid,
+.x-layer.x-panel.x-grid {
+    border-radius: 4px !important;
+}
+
+/* Grid items in floating pickers - 4px radius (matches boundlist style) */
+.x-layer.x-grid .x-grid-item-over,
+.x-layer.x-grid .x-grid-item-selected,
+.x-panel.x-layer.x-grid .x-grid-item-over,
+.x-panel.x-layer.x-grid .x-grid-item-selected {
+    border-radius: 4px !important;
+}
+
+/* TD cells have their own background - reset and apply only to first/last */
+.x-layer.x-grid .x-grid-item-over td,
+.x-layer.x-grid .x-grid-item-selected td,
+.x-layer.x-grid .x-grid-item-over .x-grid-cell,
+.x-layer.x-grid .x-grid-item-selected .x-grid-cell,
+.x-panel.x-layer.x-grid .x-grid-item-over td,
+.x-panel.x-layer.x-grid .x-grid-item-selected td,
+.x-panel.x-layer.x-grid .x-grid-item-over .x-grid-cell,
+.x-panel.x-layer.x-grid .x-grid-item-selected .x-grid-cell {
+    border-radius: 0 !important;
+}
+
+/* First cell gets left radius, last cell gets right radius */
+.x-layer.x-grid .x-grid-item-over td:first-child,
+.x-layer.x-grid .x-grid-item-selected td:first-child,
+.x-panel.x-layer.x-grid .x-grid-item-over td:first-child,
+.x-panel.x-layer.x-grid .x-grid-item-selected td:first-child {
+    border-radius: 4px 0 0 4px !important;
+}
+
+.x-layer.x-grid .x-grid-item-over td:last-child,
+.x-layer.x-grid .x-grid-item-selected td:last-child,
+.x-panel.x-layer.x-grid .x-grid-item-over td:last-child,
+.x-panel.x-layer.x-grid .x-grid-item-selected td:last-child {
+    border-radius: 0 4px 4px 0 !important;
+}
+
+/* =====================================================
+   v5.42: Fix Bulk Actions dropdown button issues
+   Button was growing larger (24px → 26px) and text was gray instead of white
+   ===================================================== */
+
+/* Toolbar menu fix moved to Button Section */
+
+/* =====================================================
+   v5.43: Compact tab bar for Tasks/Cluster log panel
+   Reduces wasted vertical space in bottom panel tabs
+   Tab bar height: 36px → 26px, padding: 6px → 3px
+   ===================================================== */
+
+/* Reduce tab bar height for south panel (Tasks/Cluster log) */
+.x-panel.x-border-item .x-tab-bar.x-docked.x-tab-bar-default-horizontal {
+    height: 26px !important;
+}
+
+/* Reduce inner body padding */
+.x-panel.x-border-item .x-tab-bar.x-docked .x-box-inner {
+    padding-top: 3px !important;
+    padding-bottom: 3px !important;
+}
+
+/* Adjust panel body position to account for smaller tab bar */
+/* v5.56: Exclude grids - they need ExtJS inline positioning for proper header display */
+/* .x-panel.x-border-item:not(.x-grid) .x-panel-body.x-panel-body-default {
+    top: 26px !important;
+} */
+
+/* =====================================================
+   v5.72: COMPREHENSIVE MODAL SPACING & CLIPPING FIX
+   
+   Problem: The v5.43 rule (top: 26px for south panel tabs) cascaded
+   to ALL panel bodies inside dialogs/windows, creating 52-70px gaps
+   between title/tabs and tabs/content, plus content clipping.
+   
+   Solution: Reset ALL panel bodies to 0, then restore 26px ONLY for
+   the body that immediately follows a tab bar (using sibling selector).
+   Uses ultra-high specificity with 'body' prefix to win CSS battles.
+   ===================================================== */
+
+/* Restore 26px ONLY for the panel body that immediately follows a tab bar */
+body .x-window .x-panel .x-panel-bodyWrap>.x-tab-bar+.x-panel-body.x-panel-body-default {
+    top: 26px !important;
+}
+
+/* Zero out padding in bodyWraps that could cause extra gaps */
+.x-window .x-panel-bodyWrap {
+    padding: 0 !important;
+}
+
+/* v5.93: REMOVED overflow: visible rule that was breaking log viewer scrolling
+   The original rule was:
+     .x-window .x-panel-body { overflow: visible !important; }
+   This was added to "fix overflow clipping - allow visible overflow in modal panels"
+   but it breaks task viewer / log viewer scroll functionality.
+   If clipping issues appear elsewhere, use more targeted selectors.
+*/
+
+/* But keep auto overflow on the main window body for scrolling */
+/* .x-window .x-window-body {
+    overflow: auto !important;
+} */
+
+/* =====================================================
+   v5.58: Fix modal form field width overflow
+   Form fields were extending past the right edge of the modal.
+   Constrain autocontainer and trigger wrap widths.
+   v5.64: REMOVED margin-right rule - was causing input field cutoff.
+          The autocontainer constraint is sufficient for overflow prevention.
+
+
+/* v5.61: Trigger-wrap width rule removed (consolidated into form layout section) */
+
+
+
+/* =====================================================
+   v5.47: Restore right border on disk list panel in wizards
+   Restores right border for grids inside windows (fixed v5.4 over-reach).
+   ===================================================== */
+
+
+/* =====================================================
+   v5.48: MODAL ANIMATIONS - Open Animation + Background Blur
+   CSS-ONLY implementation (no JavaScript required)
+   
+   Features:
+   - Smooth fade-in + scale animation when modals/dialogs open
+   - Subtle backdrop blur effect for modern look
+   - Menu/dropdown slide-in animation
+   
+   NOTE: Close animations are NOT possible with pure CSS because
+   ExtJS removes the window from the DOM immediately on close.
+   This is a pure CSS theme - no JavaScript modifications.
+   ===================================================== */
+
+/* Opening animation keyframe */
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+/* Menu slide animation keyframe */
+@keyframes menuSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+
+
+/* Window/Dialog - open animation */
+.x-window,
+.x-window-default {
+    animation: modalFadeIn 0.2s ease-out forwards !important;
+    transform-origin: center top !important;
+}
+
+/* Message boxes - centered origin */
+.x-message-box {
+    animation: modalFadeIn 0.2s ease-out forwards !important;
+    transform-origin: center center !important;
+}
+
+/* Menus and dropdowns - slide animation */
+.x-menu,
+.x-menu-default,
+.x-boundlist {
+    animation: menuSlideIn 0.12s ease-out forwards !important;
+    transform-origin: top center !important;
+}
+
+/* =====================================================
+   v5.77: TREE SETTINGS DIALOG FIX
+   Force layout recalculation and visibility for tree settings
+   ===================================================== */
+.x-window[id^="pveTreeSettingsEdit"] .x-panel-body {
+    width: 100% !important;
+    min-width: 300px !important;
+}
+
+.x-window[id^="pveTreeSettingsEdit"] .x-autocontainer-innerCt {
+    width: 100% !important;
+    display: block !important;
+}
+
+.x-window[id^="pveTreeSettingsEdit"] .x-window-body {
+    overflow: visible !important;
+    height: auto !important;
+}
+
+.x-window[id^="pveTreeSettingsEdit"] input {
+    width: 100% !important;
+    visibility: visible !important;
+    display: block !important;
+    opacity: 1 !important;
+}
+
+.x-window[id^="pveTreeSettingsEdit"] .x-form-item-body,
+.x-window[id^="pveTreeSettingsEdit"] .x-form-trigger-wrap,
+.x-window[id^="pveTreeSettingsEdit"] .x-form-text-wrap {
+    width: 100% !important;
+    overflow: visible !important;
+}
+
+/* v5.82: Fix Tree Settings Dialog Width (Force full width on containers) */
+.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"],
+.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"] .x-panel-body,
+.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"] .x-box-inner,
+.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"] .x-box-target,
+.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"] .x-container,
+.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"] .x-field {
+    width: 100% !important;
+    box-sizing: border-box !important;
+}
+
+/* =====================================================
+   v5.78: LOGIN DIALOG FIXES
+   1. Remove inner panel borders for cleaner "direct on window" look
+   2. Rely on ExtJS natural sizing (facilitated by removing the 
+      width:inherit rule above)
+   ===================================================== */
+.x-window:has(#pveloginrealm) .x-panel-body {
+    border: none !important;
+    background: transparent !important;
+    width: auto !important;
+}
+
+/* =====================================================
+   v5.81: VM WIZARD WIDTH FIX (REVISED)
+   1. Keep window borders (user preference).
+   2. Force internal elements to fit the measured content width
+      (718.4px) instead of overflowing at fixed 720px.
+   ===================================================== */
+.x-window[id^="pveQemuCreateWizard"] .x-window-body,
+.x-window[id^="pveQemuCreateWizard"] .x-window-body>.x-panel,
+.x-window[id^="pveQemuCreateWizard"] .x-panel-bodyWrap,
+.x-window[id^="pveQemuCreateWizard"] .x-panel-body {
+    width: 100% !important;
+    box-sizing: border-box !important;
+}
+
+/* =====================================================
+   v5.86: TOOL ICONS - FontAwesome Replacements
+   Replace sprite-based ExtJS tool icons with crisp
+   FontAwesome icons for better consistency and clarity
+   ===================================================== */
+
+/* Base styling for all tool icons - remove sprite backgrounds */
+.x-tool-tool-el.x-tool-minus,
+.x-tool-img.x-tool-minus,
+.x-tool-tool-el.x-tool-collapse-right,
+.x-tool-img.x-tool-collapse-right,
+.x-tool-tool-el.x-tool-collapse-left,
+.x-tool-img.x-tool-collapse-left,
+.x-tool-tool-el.x-tool-expand-right,
+.x-tool-img.x-tool-expand-right,
+.x-tool-tool-el.x-tool-expand-left,
+.x-tool-img.x-tool-expand-left,
+.x-tool-tool-el.x-tool-maximize,
+.x-tool-img.x-tool-maximize,
+.x-tool-tool-el.x-tool-restore,
+.x-tool-img.x-tool-restore,
+.x-tool-tool-el.x-tool-gear,
+.x-tool-img.x-tool-gear,
+.x-tool-tool-el.x-tool-refresh,
+.x-tool-img.x-tool-refresh {
+    background-image: none !important;
+    font-family: "FontAwesome" !important;
+    font-size: 14px !important;
+    line-height: 16px !important;
+    text-align: center !important;
+    color: #737C87 !important;
+    transition: color 0.15s ease !important;
+    filter: none !important;
+    width: 16px !important;
+    height: 16px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+
+/* Undo Zoom button (minus icon) - use zoom-out icon */
+.x-tool-tool-el.x-tool-minus::before,
+.x-tool-img.x-tool-minus::before {
+    content: "\f010" !important;  /* fa-search-minus (zoom out) */
+}
+
+/* Collapse right - single chevron pointing right (>)
+   Panel is expanded, clicking will collapse it to the right */
+.x-tool-tool-el.x-tool-collapse-right::before,
+.x-tool-img.x-tool-collapse-right::before {
+    content: "\f054" !important;  /* fa-chevron-right (>) */
+}
+
+/* Expand left - single chevron pointing left (<)
+   Panel is collapsed on right, clicking will expand it to the left */
+.x-tool-tool-el.x-tool-expand-left::before,
+.x-tool-img.x-tool-expand-left::before {
+    content: "\f053" !important;  /* fa-chevron-left (<) */
+}
+
+/* Collapse left - single chevron pointing left (<)
+   Panel is expanded, clicking will collapse it to the left */
+.x-tool-tool-el.x-tool-collapse-left::before,
+.x-tool-img.x-tool-collapse-left::before {
+    content: "\f053" !important;  /* fa-chevron-left (<) */
+}
+
+/* Expand right - single chevron pointing right (>)
+   Panel is collapsed on left, clicking will expand it to the right */
+.x-tool-tool-el.x-tool-expand-right::before,
+.x-tool-img.x-tool-expand-right::before {
+    content: "\f054" !important;  /* fa-chevron-right (>) */
+}
+
+/* Maximize (expand icon) */
+.x-tool-tool-el.x-tool-maximize::before,
+.x-tool-img.x-tool-maximize::before {
+    content: "\f065" !important;  /* fa-expand */
+}
+
+/* Restore (compress icon) */
+.x-tool-tool-el.x-tool-restore::before,
+.x-tool-img.x-tool-restore::before {
+    content: "\f066" !important;  /* fa-compress */
+}
+
+/* Gear/Settings icon */
+.x-tool-tool-el.x-tool-gear::before,
+.x-tool-img.x-tool-gear::before {
+    content: "\f013" !important;  /* fa-cog */
+}
+
+/* Refresh icon */
+.x-tool-tool-el.x-tool-refresh::before,
+.x-tool-img.x-tool-refresh::before {
+    content: "\f021" !important;  /* fa-refresh */
+}
+
+/* Hover state - all tool icons */
+.x-tool:hover .x-tool-tool-el.x-tool-minus,
+.x-tool:hover .x-tool-img.x-tool-minus,
+.x-tool:hover .x-tool-tool-el.x-tool-collapse-right,
+.x-tool:hover .x-tool-img.x-tool-collapse-right,
+.x-tool:hover .x-tool-tool-el.x-tool-collapse-left,
+.x-tool:hover .x-tool-img.x-tool-collapse-left,
+.x-tool:hover .x-tool-tool-el.x-tool-expand-right,
+.x-tool:hover .x-tool-img.x-tool-expand-right,
+.x-tool:hover .x-tool-tool-el.x-tool-expand-left,
+.x-tool:hover .x-tool-img.x-tool-expand-left,
+.x-tool:hover .x-tool-tool-el.x-tool-maximize,
+.x-tool:hover .x-tool-img.x-tool-maximize,
+.x-tool:hover .x-tool-tool-el.x-tool-restore,
+.x-tool:hover .x-tool-img.x-tool-restore,
+.x-tool:hover .x-tool-tool-el.x-tool-gear,
+.x-tool:hover .x-tool-img.x-tool-gear,
+.x-tool:hover .x-tool-tool-el.x-tool-refresh,
+.x-tool:hover .x-tool-img.x-tool-refresh {
+    color: #DEE0E3 !important;
+}
+
+/* Disabled state */
+.x-tool-disabled .x-tool-tool-el,
+.x-tool-disabled .x-tool-img {
+    opacity: 0.4 !important;
+    cursor: default !important;
+}
+
+/* =====================================================
+   v5.86: GENERIC TOOL ICONS (Inline FontAwesome)
+   Some ExtJS tools use inline style="font-family:FontAwesome"
+   with text content for their icons instead of ::before
+   ===================================================== */
+
+/* Style generic tools that use text content with FontAwesome */
+.x-tool-tool-el[style*="font-family:FontAwesome"],
+.x-tool-tool-el[style*="font-family: FontAwesome"] {
+    color: #737C87 !important;
+    font-size: 14px !important;
+    line-height: 16px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 16px !important;
+    height: 16px !important;
+    transition: color 0.15s ease !important;
+    background-image: none !important;
+    background-color: transparent !important;
+}
+
+/* Enabled state - pointer cursor */
+.x-tool:not(.x-tool-disabled) .x-tool-tool-el[style*="font-family:FontAwesome"],
+.x-tool:not(.x-tool-disabled) .x-tool-tool-el[style*="font-family: FontAwesome"] {
+    cursor: pointer !important;
+}
+
+/* Disabled state - default cursor and reduced opacity */
+.x-tool.x-tool-disabled .x-tool-tool-el[style*="font-family:FontAwesome"],
+.x-tool.x-tool-disabled .x-tool-tool-el[style*="font-family: FontAwesome"] {
+    cursor: default !important;
+    opacity: 0.4 !important;
+}
+
+/* Fix mask overlay on tool icons - transparent and non-blocking */
+.x-tool .x-mask {
+    background-color: transparent !important;
+    backdrop-filter: none !important;
+    pointer-events: none !important;
+}
+
+/* Hover state for enabled generic tools */
+.x-tool:not(.x-tool-disabled):hover .x-tool-tool-el[style*="font-family:FontAwesome"],
+.x-tool:not(.x-tool-disabled):hover .x-tool-tool-el[style*="font-family: FontAwesome"] {
+    color: #DEE0E3 !important;
+}