/* ─── Installation Planner ─── */
:root {
  --primary:      #171a21;
  --primary-dark: #12151b;
  --accent:       #4da3ff;
  --accent-hover: #3f8fe6;
  --sidebar-bg:   #1a1d24;
  --sidebar-text: #c5cad3;
  --panel-hdr:    #151922;
  --canvas-bg:    #20252f;
  --canvas-grad-start: #202631;
  --canvas-grad-end: #171b24;
  --hover-bg:     #252a35;
  --border:       rgba(255,255,255,0.08);
  --input-bg:     #1d222c;
  --input-border: #303744;
  --surface-0:    #131720;
  --surface-1:    #171b24;
  --surface-2:    #1d222c;
  --surface-3:    #252b36;
  --text-1:       #e7ebf2;
  --text-2:       #c5cad3;
  --text-3:       #8f98a8;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --panel-left-w: 168px;
  --panel-right-w: 248px;
  --toolbar-h:    42px;
  --font-ui:      12.5px;
}

:root[data-theme="light"] {
  --primary:      #e9eef5;
  --primary-dark: #d9e2ef;
  --accent:       #2f7dd1;
  --accent-hover: #2569b3;
  --sidebar-bg:   #f4f7fb;
  --sidebar-text: #000000e6;
  --panel-hdr:    #e8eef6;
  --canvas-bg:    #eef3f9;
  --canvas-grad-start: #f5f8fc;
  --canvas-grad-end: #e9eff7;
  --hover-bg:     #e5edf7;
  --border:       rgba(15,23,42,0.12);
  --input-bg:     #ffffff;
  --input-border: #c7d2e3;
  --surface-0:    #f8fbff;
  --surface-1:    #eef3fa;
  --surface-2:    #e6edf7;
  --surface-3:    #dde7f3;
  --text-1:       #0f172a;
  --text-2:       #334155;
  --text-3:       #64748b;
}


*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: var(--font-ui);
  background: var(--canvas-bg);
  color: var(--sidebar-text);
}

/* Make button labels lighter for readability */
.btn,
.toolbar-btn,
.tab-add-btn {
  font-weight: 400 !important;
}

/* ─── Navbar ─── */
.navbar {
  background: var(--primary) !important;
  height: 46px;
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.navbar-brand {
  font-weight: 650;
  font-size: 13.5px;
  letter-spacing: 0.2px;
  color: var(--text-1) !important;
}
.navbar .btn-warning {
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 11px;
}
.navbar .btn-warning:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.navbar .btn-outline-light {
  color: var(--text-2);
  border-color: color-mix(in srgb, var(--text-2) 40%, transparent);
}
.navbar .btn-outline-light:hover {
  color: var(--text-1);
  border-color: color-mix(in srgb, var(--text-2) 65%, transparent);
  background: var(--hover-bg);
}

/* ─── Navbar 3-column responsive layout ─── */
.navbar .container-fluid {
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.navbar-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.navbar-left .navbar-brand { margin: 0; }

.app-menu-wrap {
  position: relative;
  flex-shrink: 0;
  z-index: 20;
}
.app-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  color: var(--text-1);
  border-radius: 0;
  padding: 0;
  height: 34px;
  box-shadow: none;
}
.app-menu-trigger:hover {
  background: transparent;
}
.app-menu-logo {
  display: block;
  height: 18px;
  width: auto;
}
.app-menu-logo-light {
  display: none;
}
:root[data-theme="light"] .app-menu-logo-dark {
  display: none;
}
:root[data-theme="light"] .app-menu-logo-light {
  display: block;
}
.app-menu-trigger-caret {
  font-size: 10px;
  opacity: 0.72;
}
.app-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: #171717;
  color: #f5f7fb;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.32);
  z-index: 1200;
  padding: 10px 0;
  pointer-events: auto;
}
.app-menu-dropdown.open { display: block; }
.app-menu-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0 14px 8px;
  color: rgba(255,255,255,0.62);
}
.app-menu-row {
  position: relative;
}
.app-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: #f5f7fb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12px;
  text-align: left;
}
.app-menu-item:hover,
.app-menu-row:hover > .app-menu-item {
  background: rgba(255,255,255,0.08);
}
.app-menu-item.has-submenu i {
  font-size: 10px;
  opacity: 0.7;
}
.app-menu-item.danger {
  color: #ff9b9b;
}
.app-menu-shortcut {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
}
.app-menu-divider {
  height: 1px;
  margin: 8px 0;
  background: rgba(255,255,255,0.08);
}
.app-submenu {
  display: none;
  position: absolute;
  top: -10px;
  left: calc(100% - 6px);
  min-width: 220px;
  background: #171717;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.32);
  padding: 10px 0;
}
#app-menu-preferences + .app-submenu {
  min-width: 240px;
}
.app-menu-row.has-child:hover > .app-submenu,
.app-menu-row.has-child:focus-within > .app-submenu {
  display: block;
}
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.navbar-export-shortcut {
  display: inline-flex;
  align-items: center;
}

.connection-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #c2410c;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 999px;
  padding: 4px 9px;
}
:root[data-theme="light"] .connection-indicator {
  background: #ea580c;
  color: #fff;
}
.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 12px;
}

.theme-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
}
.theme-toggle-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  color: var(--text-2);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.theme-toggle-btn:hover {
  background: var(--hover-bg);
  color: var(--text-1);
}
.theme-toggle-btn.active {
  background: var(--accent);
  color: #fff;
}
:root[data-theme="light"] .theme-toggle-group {
  background: rgba(15,23,42,0.06);
}

:root[data-theme="light"] .canvas-ruler-h,
:root[data-theme="light"] .canvas-ruler-v {
  background: #eef3fa;
  color: #64748b;
  border-color: rgba(15,23,42,0.15);
}
:root[data-theme="light"] .ruler-tick { background: rgba(51,65,85,0.26); }
:root[data-theme="light"] .ruler-tick.major { background: rgba(51,65,85,0.45); }
:root[data-theme="light"] .ruler-label { color: #64748b; }

:root[data-theme="light"] .guide-chip {
  background: rgba(255,255,255,0.95);
  color: #1e293b;
  border-color: rgba(47,125,209,0.35);
}
:root[data-theme="light"] .guide-menu {
  background: #ffffff;
  border-color: rgba(47,125,209,0.28);
  box-shadow: 0 10px 24px rgba(15,23,42,0.18);
}
:root[data-theme="light"] .guide-menu button { color: #1e293b; }
:root[data-theme="light"] .guide-menu button:hover {
  background: #eaf2fb;
  color: #0f172a;
}
:root[data-theme="light"] .guide-menu hr { border-color: rgba(15,23,42,0.09); }

:root[data-theme="light"] .upload-hint {
  background: rgba(255,255,255,0.94);
  border-color: #c7d8ec;
}
:root[data-theme="light"] .upload-hint .text-secondary { color: rgba(51,65,85,0.86) !important; }
:root[data-theme="light"] .upload-hint .text-muted { color: rgba(71,85,105,0.78) !important; }
:root[data-theme="light"] .upload-hint-close {
  background: rgba(15,23,42,0.09);
  color: #334155;
}
:root[data-theme="light"] .upload-hint-close:hover { background: rgba(15,23,42,0.16); }

:root[data-theme="light"] .design-floatbar {
  background: rgba(255,255,255,0.97);
  border-color: rgba(47,125,209,0.24);
  box-shadow: 0 10px 24px rgba(15,23,42,0.14);
}
:root[data-theme="light"] .design-floatbar-zone + .design-floatbar-zone,
:root[data-theme="light"] .design-props { border-color: rgba(15,23,42,0.18); }
:root[data-theme="light"] .design-tool-cluster {
  background: rgba(15,23,42,0.04);
}
:root[data-theme="light"] .design-tool-btn {
  border: none;
  background: transparent;
  color: #334155;
}
:root[data-theme="light"] .design-tool-btn:hover {
  background: rgba(15,23,42,0.06);
  color: #0f172a;
}
:root[data-theme="light"] .design-tool-menu {
  background: rgba(255,255,255,0.98);
  border-color: rgba(47,125,209,0.18);
  box-shadow: 0 10px 24px rgba(15,23,42,0.14);
}
:root[data-theme="light"] .design-tool-menu-item {
  color: #334155;
}
:root[data-theme="light"] .design-tool-menu-item:hover {
  background: rgba(15,23,42,0.06);
  color: #0f172a;
}
:root[data-theme="light"] .design-tool-menu-item.active {
  background: rgba(37,99,235,0.12);
  color: #0f172a;
}
:root[data-theme="light"] .design-tool-btn.active {
  border: 1px solid rgba(37,99,235,0.42);
  background: linear-gradient(180deg, #4ea2ff 0%, #2282f6 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.2);
}
:root[data-theme="light"] .design-floatbar-row.muted span,
:root[data-theme="light"] .design-props label { color: #64748b; }
:root[data-theme="light"] .design-props input {
  border-color: #c7d2e3;
  background: #fff;
  color: #0f172a;
}

:root[data-theme="light"] .tab-bar {
  background: #e8eef6;
}
:root[data-theme="light"] .tab-bar::-webkit-scrollbar-thumb { background: #bfd0e5; }
:root[data-theme="light"] .canvas-tab {
  color: #64748b;
  background: rgba(15,23,42,0.03);
}
:root[data-theme="light"] .canvas-tab:hover {
  background: #dde7f3;
  color: #334155;
}
:root[data-theme="light"] .canvas-tab.active {
  background: #eef3f9;
  color: #0f172a;
}
:root[data-theme="light"] .canvas-tab.active::after { background: #eef3f9; }
:root[data-theme="light"] .tab-add-btn {
  border-color: #b6cae2;
  color: #64748b;
}

:root[data-theme="light"] .modal-dark {
  box-shadow: 0 14px 36px rgba(15,23,42,0.18);
}
:root[data-theme="light"] .modal-dark .modal-header,
:root[data-theme="light"] .modal-dark .modal-footer {
  box-shadow: inset 0 -1px 0 rgba(15,23,42,0.05);
}
:root[data-theme="light"] .user-dropdown {
  box-shadow: 0 8px 24px rgba(15,23,42,0.16);
}
:root[data-theme="light"] .project-sidebar-section {
  background: transparent;
  border-top-color: rgba(15,23,42,0.10);
  box-shadow: none;
}
:root[data-theme="light"] .project-sidebar-subsection + .project-sidebar-subsection {
  border-top-color: rgba(15,23,42,0.08);
}
:root[data-theme="light"] .map-scale-unit-label { color: #51779c; }
:root[data-theme="light"] .project-section-help { color: #56718d; }

/* ─── App Container ─── */
.app-container {
  display: flex;
  height: calc(100vh - 46px);
  height: calc(100dvh - 46px);
  overflow: hidden;
}

/* ─── Panel Shared ─── */
.panel-header {
  background: var(--panel-hdr);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 7px 11px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* ─── Equipment Panel (Left) ─── */
.equipment-panel {
  width: var(--panel-left-w);
  min-width: var(--panel-left-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}

.equipment-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.equipment-tools .dropdown {
  width: 100%;
}
.equipment-tools .btn {
  width: 100%;
  font-size: 11px;
  padding: 5px 7px;
  text-align: left;
  border-color: var(--input-border);
  color: var(--text-2);
}
.equipment-tools .btn:hover {
  background: var(--hover-bg);
  color: var(--text-1);
}

.excalidraw-library-manager-list {
  display: grid;
  gap: 8px;
}
.excalidraw-library-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
}
.excalidraw-library-row .title {
  font-size: 12px;
  color: var(--text-1);
}
.excalidraw-library-row .meta {
  font-size: 10px;
  color: var(--text-3);
}
.excalidraw-library-symbols {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}
.excalidraw-library-symbol-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.excalidraw-symbol-preview {
  min-height: 90px;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.12);
}
.excalidraw-symbol-preview img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

.excalidraw-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.excalidraw-preview-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
}
.excalidraw-preview-item .thumb {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0,0,0,0.12);
  margin-bottom: 6px;
}
.excalidraw-preview-item .thumb img {
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}
.excalidraw-preview-item .name {
  font-size: 11px;
  color: var(--text-1);
  line-height: 1.2;
}
.excalidraw-preview-item .meta {
  font-size: 9px;
  color: var(--text-3);
}

/* ─── Collapsible Category Header ─── */
.eq-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 8px 5px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  color: #8a93a3;
  text-align: left;
  transition: color 0.12s, background 0.12s;
  margin-top: 0;
}
.eq-category-header:first-child {
  border-top: none;
}
.eq-category-header:hover {
  color: var(--text-2);
  background: rgba(255,255,255,0.02);
}
.eq-category-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.eq-category-chevron {
  font-size: 11.5px;
  line-height: 1;
  color: #6d7686;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.eq-category-header.collapsed .eq-category-chevron {
  transform: rotate(-90deg);
}

.eq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px 8px 8px;
}
.eq-grid.collapsed {
  display: none;
}
.eq-category-subheader {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text-1);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
}
.eq-category-subheader.collapsed .eq-category-chevron {
  transform: rotate(-90deg);
}
.eq-category-sublabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eq-subgrid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.eq-subgrid.collapsed {
  display: none;
}

.eq-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 5px 6px;
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.02);
}
.eq-item:hover {
  background: var(--hover-bg);
  border-color: rgba(77,163,255,0.38);
}
.eq-item:active {
  cursor: grabbing;
  background: rgba(77,163,255,0.16);
}
.eq-item img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.eq-item-label {
  font-size: 9px;
  color: var(--text-2);
  text-align: center;
  margin-top: 4px;
  line-height: 1.2;
}

/* ─── Canvas Panel (Center) ─── */
.canvas-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--canvas-bg);
  overflow: hidden;
  position: relative;
}

.canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 11px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  min-height: var(--toolbar-h);
  flex-shrink: 0;
}
.tools-menu-wrap {
  position: relative;
}
/* Tools now uses pure Bootstrap dropdown behavior */
#tools-dropdown.dropdown-menu {
  min-width: 220px;
}

.project-title {
  color: var(--text-1);
  font-weight: 600;
  font-size: var(--font-ui);
}
.unsaved-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #1a1400;
  background: #f9c74f;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 999px;
  padding: 1px 8px;
}
.toolbar-btn {
  font-size: 10.5px;
  padding: 4px 9px;
  color: var(--text-2);
  border-color: color-mix(in srgb, var(--text-2) 35%, transparent);
}
.toolbar-btn:hover {
  color: var(--text-1);
  border-color: color-mix(in srgb, var(--text-2) 60%, transparent);
  background: var(--hover-bg);
}

/* ─── Canvas Wrapper ─── */
.canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, var(--canvas-grad-start) 0%, var(--canvas-grad-end) 100%);
}
.canvas-wrapper.drag-over {
  box-shadow: inset 0 0 0 3px var(--accent);
}

.design-floatbar {
  position: absolute;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 14;
  background: rgba(18,23,31,0.96);
  border: 1px solid rgba(77,163,255,0.30);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: calc(100% - 16px);
}
.design-floatbar-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  min-width: 0;
}
.design-floatbar-zone + .design-floatbar-zone {
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.20);
}
.design-floatbar-zone-status {
  gap: 8px;
}
.design-tool-cluster {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}
.design-tool-group {
  position: relative;
  display: inline-flex;
}
.design-tool-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  min-width: 40px;
}
.design-tool-group-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  opacity: 0.72;
}
.design-tool-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 156px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(18,23,31,0.98);
  border: 1px solid rgba(77,163,255,0.22);
  box-shadow: 0 12px 28px rgba(0,0,0,0.42);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
}
.design-tool-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: #d6deea;
  border-radius: 8px;
  padding: 7px 9px;
  text-align: left;
}
.design-tool-menu-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.design-tool-menu-item.active {
  background: rgba(77,163,255,0.16);
  color: #fff;
}
.design-tool-menu-item i {
  width: 14px;
  text-align: center;
}
.design-tool-btn {
  width: 30px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #c6cfdb;
  box-shadow: none;
}
.design-tool-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.design-tool-btn.active {
  border: 1px solid rgba(77,163,255,0.55);
  background: linear-gradient(180deg, rgba(77,163,255,0.92) 0%, rgba(33,124,227,0.96) 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(18, 97, 186, 0.28);
}
.design-floatbar-row.muted span {
  font-size: 11px;
  color: #aab6c8;
  min-width: 48px;
}
.design-props {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.10);
}
.design-props label {
  font-size: 10px;
  color: #c2ccdb;
  margin: 0;
}
.design-props input {
  width: 58px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #314055;
  background: #1c2330;
  color: #e3ebf7;
  font-size: 11px;
  padding: 2px 6px;
}
.design-props input[type="color"] {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid #314055;
  background: #1c2330;
}
.design-props input[type="range"] {
  width: 64px;
  height: 24px;
}
.design-props .design-tool-btn { width: 26px; height: 24px; }

#installation-canvas {
  display: block;
  cursor: default;
}

/* ─── Canvas Rulers ─── */
.canvas-ruler-h,
.canvas-ruler-v {
  position: absolute;
  background: #141820;
  border: 1px solid var(--border);
  color: #8f98a8;
  font-size: 9px;
  z-index: 12;
  pointer-events: auto;
  user-select: none;
}
.canvas-ruler-h {
  height: 22px;
  border-radius: 6px 6px 0 0;
  border-bottom: none;
  cursor: ns-resize;
}
.canvas-ruler-v {
  width: 22px;
  border-radius: 6px 0 0 6px;
  border-right: none;
  cursor: ew-resize;
}
.canvas-ruler-origin {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(77,163,255,0.32);
  border: 1px solid rgba(77,163,255,0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
  opacity: 0.72;
  z-index: 13;
  cursor: move;
  transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.canvas-ruler-origin:hover,
.canvas-ruler-origin:focus-visible {
  opacity: 1;
  transform: scale(1.15);
  background: rgba(77,163,255,0.7);
  border-color: rgba(77,163,255,0.95);
  box-shadow: 0 0 0 2px rgba(77,163,255,0.18), 0 0 10px rgba(77,163,255,0.22);
}
:root[data-theme="light"] .canvas-ruler-origin {
  background: rgba(59,130,246,0.2);
  border-color: rgba(59,130,246,0.42);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.08);
}
:root[data-theme="light"] .canvas-ruler-origin:hover,
:root[data-theme="light"] .canvas-ruler-origin:focus-visible {
  background: rgba(59,130,246,0.52);
  border-color: rgba(59,130,246,0.8);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.12), 0 0 8px rgba(59,130,246,0.16);
}
.ruler-tick {
  position: absolute;
  background: rgba(220,226,238,0.28);
}
.ruler-tick.major { background: rgba(220,226,238,0.55); }
.ruler-label {
  position: absolute;
  color: #8f98a8;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}
.ruler-label.v {
  transform: rotate(-90deg);
  transform-origin: left top;
}
.ruler-zero-line {
  position: absolute;
  background: rgba(239,68,68,0.6);
}

.canvas-guides {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
}
.canvas-guide {
  position: absolute;
  background: rgba(239,68,68,0.82);
  pointer-events: auto;
}
.canvas-guide.v { width: 1px; cursor: ew-resize; }
.canvas-guide.h { height: 1px; cursor: ns-resize; }
.canvas-guide.selected { background: rgba(248,113,113,0.98); }
.canvas-guide.preview {
  background: rgba(239,68,68,0.5);
  border: 0;
}
.canvas-guide.snap-hit {
  background: rgba(252,165,165,1);
  box-shadow: 0 0 0 1px rgba(252,165,165,0.55), 0 0 8px rgba(239,68,68,0.65);
}
.guide-chip {
  position: absolute;
  z-index: 13;
  pointer-events: none;
  background: rgba(15,20,28,0.94);
  color: #d7e9ff;
  border: 1px solid rgba(77,163,255,0.5);
  border-radius: 6px;
  font-size: 10px;
  line-height: 1;
  padding: 4px 6px;
  white-space: nowrap;
}
.guide-menu {
  position: absolute;
  z-index: 20;
  min-width: 180px;
  background: #151b25;
  border: 1px solid rgba(77,163,255,0.35);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.5);
  overflow: hidden;
}
.guide-menu button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #d3d9e4;
  padding: 8px 10px;
  font-size: 12px;
}
.guide-menu button:hover { background: #222a37; color: #fff; }
.guide-menu hr { margin: 4px 0; border-color: rgba(255,255,255,0.08); }

/* ─── Upload Hint ─── */
.upload-hint {
  position: absolute;
  text-align: center;
  z-index: 10;
  pointer-events: all;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: rgba(21, 30, 43, 0.85);
  border: 2px dashed #2d4560;
}
.upload-hint .text-secondary { color: rgba(201, 213, 230, 0.82) !important; }
.upload-hint .text-muted { color: rgba(176, 190, 210, 0.78) !important; }
.upload-hint.d-none { display: none !important; }
.upload-hint-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}
.upload-hint-close:hover { background: rgba(0,0,0,0.55); }

/* ─── Info Panel (Right) ─── */
.info-panel {
  width: var(--panel-right-w);
  min-width: var(--panel-right-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  overflow-y: auto;
}

.project-info {
  padding: 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 0;
}

.project-sidebar-section {
  padding: 10px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-sidebar-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
  cursor: pointer;
}
.project-sidebar-section-header:hover {
  color: color-mix(in srgb, var(--accent) 78%, white 22%);
}
.project-sidebar-section-header-row {
  gap: 8px;
}
.project-sidebar-section-header-inline {
  flex: 1;
}
.project-sidebar-section-chevron {
  font-size: 11.5px;
  line-height: 1;
  color: #6d7686;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.project-sidebar-section-body {
  margin-top: 8px;
}
.project-sidebar-section.is-collapsed .project-sidebar-section-body {
  display: none;
}
.project-sidebar-section.is-collapsed .project-sidebar-section-chevron {
  transform: rotate(-90deg);
}
.project-sidebar-section-bom {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.project-sidebar-section-bom .project-sidebar-section-header-row {
  margin: 0;
  padding: 7px 10px;
  background: transparent;
}
.project-sidebar-section-body-bom {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.project-sidebar-subsection + .project-sidebar-subsection {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.project-tools-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.project-tools-flow-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-tools-flow-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}
.project-tools-status-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-scale-row {
  display: grid;
  grid-template-columns: minmax(0, 72px) auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.map-scale-unit-label {
  font-size: 10px;
  color: #5a8ab0;
  white-space: nowrap;
}

.project-section-help {
  font-size: 9px;
  color: #3d5a76;
}
:root[data-theme="light"] .project-section-help {
  color: #000000cc;
}

.field-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #8a93a3;
  margin-bottom: 3px;
}
:root[data-theme="light"] .field-label {
  color: #000000e6;
}

/* Form controls */
.info-panel .form-control,
.info-panel .form-select,
.modal-dark .form-control,
.modal-dark .form-select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-1);
  font-size: 11.5px;
}
.info-panel .form-control:focus,
.info-panel .form-select:focus,
.modal-dark .form-control:focus,
.modal-dark .form-select:focus {
  background: color-mix(in srgb, var(--input-bg) 88%, var(--accent) 12%);
  border-color: var(--accent);
  color: var(--text-1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.info-panel .form-control::placeholder,
.info-panel textarea::placeholder,
.modal-dark .form-control::placeholder,
.modal-dark textarea::placeholder,
.modal-dark .form-select::placeholder {
  color: #778196;
}
:root[data-theme="light"] .info-panel .form-control::placeholder,
:root[data-theme="light"] .info-panel textarea::placeholder,
:root[data-theme="light"] .modal-dark .form-control::placeholder,
:root[data-theme="light"] .modal-dark textarea::placeholder,
:root[data-theme="light"] .modal-dark .form-select::placeholder {
  color: #00000099;
}

/* ─── Bill of Materials ─── */
.bom-list {
  flex: 1;
  overflow-y: auto;
  padding: 5px 6px;
  min-height: 80px;
}
.bom-empty {
  font-size: 10.5px;
  color: #6d7686;
  padding: 8px 4px;
  font-style: italic;
}
.bom-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 6px 7px;
  margin-bottom: 3px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.bom-item:hover {
  background: var(--hover-bg);
  border-color: rgba(77,163,255,0.28);
}
.bom-item-icon {
  font-size: 15px;
  line-height: 1;
  margin-top: 1px;
  min-width: 18px;
  text-align: center;
}
.bom-item-info { flex: 1; min-width: 0; }
.bom-item-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bom-item-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bom-item-product {
  font-size: 9.6px;
  color: #8a93a3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bom-item-notes {
  font-size: 9px;
  color: #4a7090;
  font-style: italic;
}
.bom-footer {
  padding: 7px 10px;
  font-size: 10.5px;
  color: var(--text-2);
  background: var(--panel-hdr);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ─── Modal Theme Container ─── */
.modal-dark {
  background: var(--surface-1);
  color: var(--text-1);
  border: 1px solid var(--border);
}
.modal-dark .modal-header {
  background: var(--panel-hdr);
  border-bottom-color: var(--border);
  padding: 10px 14px;
}
.modal-dark .modal-footer {
  background: var(--panel-hdr);
  border-top-color: var(--border);
}
.modal-dark .modal-title {
  color: var(--text-1);
  font-size: 13.5px;
}
.modal-dark .field-label {
  margin-bottom: 3px;
}
:root:not([data-theme="light"]) .modal-dark,
:root:not([data-theme="light"]) .modal-dark .saved-project-meta,
:root:not([data-theme="light"]) .modal-dark .project-section-help,
:root:not([data-theme="light"]) .modal-dark .text-muted,
:root:not([data-theme="light"]) .modal-dark small,
:root:not([data-theme="light"]) .modal-dark .form-text,
:root:not([data-theme="light"]) .modal-dark label,
:root:not([data-theme="light"]) .modal-dark .settings-check-label {
  color: #d7e0ec !important;
}
:root:not([data-theme="light"]) .modal-dark .saved-project-name,
:root:not([data-theme="light"]) .modal-dark .modal-title,
:root:not([data-theme="light"]) .modal-dark strong,
:root:not([data-theme="light"]) .modal-dark h6 {
  color: #f3f7fc !important;
}

/* ─── Saved Project Items / Project View ─── */
.project-view-modal .modal-body { min-height: 56vh; }
.project-view-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.project-view-toolbar #project-search { max-width: 320px; }
.project-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.project-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.project-card-thumb {
  height: 130px;
  background: linear-gradient(135deg, #1b2230, #151a24);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f7b90;
  font-size: 28px;
  overflow: hidden;
}
.project-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-card-body { padding: 8px 9px; }
.saved-project-row,
.project-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}
.saved-project-name {
  font-size: 11.5px;
  color: var(--text-1);
  font-weight: 500;
}
.saved-project-meta {
  font-size: 10px;
  color: #8a93a3;
}
:root[data-theme="light"] .saved-project-meta {
  color: #000000e6;
}

.risk-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.risk-summary-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
}
.risk-summary-card-wide {
  grid-column: span 4;
}
.risk-summary-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #8a93a3;
  margin-bottom: 4px;
}
.risk-summary-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
}
.risk-bar-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255,255,255,0.02);
}
.risk-bar-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
}
.risk-bar-segment-low { background: #2e7d32; }
.risk-bar-segment-moderate { background: #c0a000; }
.risk-bar-segment-elevated { background: #ef6c00; }
.risk-bar-segment-high { background: #c62828; }
.risk-bar-marker {
  position: absolute;
  top: -4px;
  width: 14px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.risk-bar-marker-current { background: #4da3ff; }
.risk-bar-marker-projected { background: #ffffff; border-color: #0b1118; }
.risk-bar-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 9px;
  color: #8a93a3;
}
.risk-bar-delta {
  margin-top: 6px;
  font-size: 10px;
  color: #c5cad3;
  text-align: center;
}
.risk-findings-list {
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
}
.risk-finding-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.03);
}
.risk-finding-card-editing {
  border-color: rgba(77,163,255,0.45);
  box-shadow: 0 0 0 1px rgba(77,163,255,0.2);
}
.risk-finding-card + .risk-finding-card {
  margin-top: 8px;
}
.risk-finding-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.risk-finding-main {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.risk-finding-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}
.risk-finding-meta,
.risk-finding-preview {
  font-size: 10px;
  color: #8a93a3;
}
.risk-finding-preview {
  margin-top: 6px;
  line-height: 1.4;
}
.risk-field-hint {
  margin-top: 4px;
  font-size: 10px;
  color: #8a93a3;
  line-height: 1.35;
}
.risk-recommendation-library-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.risk-recommendation-library-row select {
  min-width: 0;
}
.risk-recommendation-library-row button {
  white-space: nowrap;
}
.risk-finding-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.risk-severity-badge {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.risk-severity-low { background: #4b5563; }
.risk-severity-medium { background: #c0a000; }
.risk-severity-high { background: #ef6c00; }
.risk-severity-critical { background: #c62828; }
.risk-finding-editor {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
}
.risk-marker-editor {
  border: 1px solid rgba(77,163,255,0.20);
  border-radius: 8px;
  padding: 8px;
  background: rgba(77,163,255,0.05);
}
.risk-marker-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.risk-marker-editor-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.risk-add-btn {
  white-space: nowrap;
  min-width: 72px;
  align-self: stretch;
}
#risk-assessment-modal #ra-template-select {
  min-width: 0;
}
#risk-assessment-modal .d-flex.gap-2 {
  flex-wrap: nowrap;
}
.project-view-list { display: block; }
.project-list-thumb {
  width: 46px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--border);
  object-fit: cover;
  background: #10151f;
}
.project-list-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f7b90;
}
.project-list-row:last-child { border-bottom: none; }

/* Project attachments */
.attachment-list {
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  background: rgba(255,255,255,0.02);
}
:root[data-theme="light"] .attachment-list {
  background: rgba(0,0,0,0.02);
}
.attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.attachment-item:last-child { border-bottom: none; }
.attachment-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.attachment-thumb {
  width: 38px; height: 28px; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--border); background:#111722;
}
.attachment-name {
  font-size: 10.5px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}

.project-files-empty-state {
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  padding: 24px;
}
:root[data-theme="light"] .project-files-empty-state {
  background: rgba(0,0,0,0.02);
}
#project-file-preview-image {
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  background: rgba(255,255,255,0.02);
}
#project-files-list .project-card-body .btn {
  white-space: nowrap;
}
.project-files-dropzone {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.project-files-dropzone.drag-over {
  border-color: var(--accent);
  background: rgba(232,119,34,0.08);
  transform: translateY(-1px);
}
:root[data-theme="light"] .project-files-dropzone {
  background: rgba(0,0,0,0.02);
}
:root[data-theme="light"] .project-files-dropzone.drag-over {
  background: rgba(232,119,34,0.12);
}

/* Rack Builder */
.rack-builder-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 12px;
  min-height: 62vh;
}
.rack-builder-sidebar,
.rack-builder-workspace {
  min-height: 0;
}
.rack-template-create-row .btn {
  white-space: nowrap;
}
.rack-plan-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 58vh;
  overflow-y: auto;
}
.rack-plan-list-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  padding: 8px 9px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.rack-plan-list-item:hover {
  background: var(--hover-bg);
  border-color: rgba(77,163,255,0.28);
}
.rack-plan-list-item.active {
  border-color: rgba(77,163,255,0.55);
  background: rgba(77,163,255,0.10);
}
.rack-plan-list-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
}
.rack-plan-list-meta {
  font-size: 9.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.rack-builder-empty,
.card-like {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.rack-builder-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-2);
  padding: 28px;
}
.rack-builder-editor-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
}
.rack-builder-form,
.rack-builder-preview {
  padding: 12px;
}
.rack-plan-meta {
  font-size: 10px;
  color: var(--text-3);
  min-height: 16px;
}
.rack-item-form-meta {
  font-size: 10px;
  color: var(--text-3);
  min-height: 16px;
}
.rack-item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
}
.rack-item-card {
  border: 1px solid rgba(120,145,171,0.20);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  padding: 8px;
}
.rack-item-card.active {
  border-color: rgba(77,163,255,0.50);
  background: rgba(77,163,255,0.08);
}
.rack-item-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.rack-item-card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
}
.rack-item-card-meta,
.rack-item-card-notes {
  font-size: 9.5px;
  color: var(--text-3);
}
.rack-item-card-notes {
  margin-top: 4px;
}
.rack-item-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.rack-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(77,163,255,0.30);
  background: rgba(77,163,255,0.10);
  color: #aecdff;
  font-size: 10px;
  font-weight: 700;
}
.rack-elevation-view {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.10));
  min-height: 560px;
  padding: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.rack-elevation-shell {
  width: min(100%, 420px);
  margin: 0 auto;
}
.rack-elevation-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  color: var(--text-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.rack-elevation-frame {
  border: 2px solid rgba(120,145,171,0.55);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12,15,20,0.82), rgba(28,35,48,0.96));
  padding: 12px;
  -webkit-user-select: none;
  user-select: none;
}
.rack-u-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-bottom: 4px;
}
.rack-u-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #8ea7c2;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
}
.rack-u-slot {
  min-height: 20px;
  border: 1px dashed rgba(120,145,171,0.22);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 8%, transparent 8%, transparent 92%, rgba(255,255,255,0.03) 92%, rgba(255,255,255,0.03) 100%),
    rgba(9,12,18,0.35);
  -webkit-user-select: none;
  user-select: none;
}
.rack-u-slot.used {
  border-style: solid;
  border-color: rgba(98,170,255,0.28);
  background:
    linear-gradient(90deg, rgba(111,178,255,0.08) 0, rgba(111,178,255,0.08) 8%, transparent 8%, transparent 92%, rgba(111,178,255,0.08) 92%, rgba(111,178,255,0.08) 100%),
    rgba(13,21,33,0.56);
}
.rack-u-slot.rack-drop-target {
  border-style: solid;
  border-color: rgba(93, 214, 137, 0.85);
  box-shadow: inset 0 0 0 1px rgba(93,214,137,0.55), 0 0 0 1px rgba(93,214,137,0.22);
}
.rack-u-slot.rack-drop-invalid {
  border-style: solid;
  border-color: rgba(255, 117, 117, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255,117,117,0.45), 0 0 0 1px rgba(255,117,117,0.18);
}
.rack-u-slot.rack-u-slot-drag-origin {
  opacity: 0.72;
}
.rack-u-slot-top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.rack-u-slot-middle {
  border-radius: 0;
}
.rack-u-slot-bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rack-u-slot-standalone {
  border-radius: 6px;
}
.rack-item-block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 100%;
  padding: 6px 10px;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.rack-item-block:active,
.rack-item-block.dragging {
  cursor: grabbing;
}
body.rack-item-dragging {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
body.rack-item-dragging .rack-elevation-view,
body.rack-item-dragging .rack-elevation-frame {
  touch-action: none;
}
.rack-item-block-title {
  font-size: 10.5px;
  font-weight: 700;
  color: #e6eefc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rack-item-block-meta {
  font-size: 9px;
  color: #9db7d7;
  white-space: nowrap;
}
.rack-item-block-empty {
  font-size: 9px;
  color: #6f8299;
  text-align: center;
  display: block;
  padding-top: 3px;
}
.rack-elevation-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 10px;
  color: var(--text-2);
}
.rack-warning-text {
  color: #f0b96a;
}
.rack-elevation-footer {
  margin-top: 10px;
  font-size: 10px;
  color: var(--text-3);
  text-align: center;
}
:root[data-theme="light"] .rack-status-pill {
  color: #1d4f91;
  background: rgba(65,130,220,0.10);
}
:root[data-theme="light"] .rack-elevation-frame {
  background: linear-gradient(180deg, #dbe6f2, #c8d6e8);
  border-color: rgba(51,65,85,0.35);
}
:root[data-theme="light"] .rack-u-label {
  color: #334155;
  background: rgba(255,255,255,0.60);
}
:root[data-theme="light"] .rack-u-slot {
  background:
    linear-gradient(90deg, rgba(15,23,42,0.05) 0, rgba(15,23,42,0.05) 8%, transparent 8%, transparent 92%, rgba(15,23,42,0.05) 92%, rgba(15,23,42,0.05) 100%),
    rgba(255,255,255,0.50);
  border-color: rgba(51,65,85,0.18);
}
:root[data-theme="light"] .rack-u-slot.used {
  background:
    linear-gradient(90deg, rgba(29,78,216,0.08) 0, rgba(29,78,216,0.08) 8%, transparent 8%, transparent 92%, rgba(29,78,216,0.08) 92%, rgba(29,78,216,0.08) 100%),
    rgba(216,229,245,0.92);
  border-color: rgba(29,78,216,0.20);
}
:root[data-theme="light"] .rack-item-block-title {
  color: #1e293b;
}
:root[data-theme="light"] .rack-item-block-meta {
  color: #475569;
}

.check-eod-grid {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  background: rgba(255,255,255,0.02);
}
.check-eod-row {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
}
.check-eod-row:last-child { border-bottom: none; }

/* ─── Scrollbars ─── */
.equipment-panel::-webkit-scrollbar,
.info-panel::-webkit-scrollbar,
.bom-list::-webkit-scrollbar {
  width: 4px;
}
.equipment-panel::-webkit-scrollbar-track,
.info-panel::-webkit-scrollbar-track,
.bom-list::-webkit-scrollbar-track {
  background: transparent;
}
.equipment-panel::-webkit-scrollbar-thumb,
.info-panel::-webkit-scrollbar-thumb,
.bom-list::-webkit-scrollbar-thumb {
  background: #2d4560;
  border-radius: 2px;
}

/* ─── Fabric.js Canvas Controls ─── */
.canvas-container { line-height: 0; }

/* ─── Toast ─── */
.toast {
  font-size: var(--font-ui);
  min-width: 200px;
}

/* ─── Zone Tab Bar ─── */
.tab-bar {
  display: flex;
  align-items: flex-end;
  background: #151922;
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 3px;
  flex-shrink: 0;
}
.tab-bar::-webkit-scrollbar { height: 3px; }
.tab-bar::-webkit-scrollbar-thumb { background: #2d4560; border-radius: 2px; }

.canvas-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 7px;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 500;
  color: #8a93a3;
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
  user-select: none;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
  margin-bottom: -1px;
}
.canvas-tab:hover {
  background: #202631;
  color: #aec8e0;
}
.canvas-tab.active {
  background: #20252f;     /* matches canvas-bg so it visually opens into it */
  color: var(--text-1);
  border-color: var(--border);
  font-weight: 600;
}
.canvas-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #20252f;
}

.tab-name-text { pointer-events: none; }

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: rgba(77,163,255,0.22);
  color: #4da3ff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 0 4px;
  pointer-events: none;
}
.canvas-tab.active .tab-count {
  background: rgba(77,163,255,0.32);
}

.tab-move-btn,
.tab-rename-btn,
.tab-close-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 10.5px;
  color: inherit;
  opacity: 0;
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.1s;
}
.canvas-tab:hover .tab-move-btn,
.canvas-tab:hover .tab-rename-btn,
.canvas-tab:hover .tab-close-btn,
.canvas-tab.active .tab-move-btn,
.canvas-tab.active .tab-rename-btn,
.canvas-tab.active .tab-close-btn { opacity: 0.55; }
.tab-move-btn:hover,
.tab-rename-btn:hover,
.tab-close-btn:hover { opacity: 1 !important; color: var(--accent); }
.tab-close-btn:hover { color: #e05050 !important; }

.tab-add-btn {
  align-self: center;
  background: transparent;
  border: 1px dashed #2d4560;
  color: #8a93a3;
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
  margin-left: 4px;
  margin-bottom: 3px;
}
.tab-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── BOM zone badge (multi-zone) ─── */
.bom-zone-badge {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(77,163,255,0.16);
  color: #aecdff;
  border: 1px solid rgba(77,163,255,0.30);
  margin-left: 2px;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
}
.bom-zone-badge.rack,
.bom-source-pill.rack {
  background: rgba(232,119,34,0.14);
  color: #ffc690;
  border-color: rgba(232,119,34,0.34);
}
.bom-source-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
  border: 1px solid rgba(77,163,255,0.30);
  color: #aecdff;
  background: rgba(77,163,255,0.10);
}
.bom-item-inactive {
  opacity: 0.65;
  cursor: default;
}
.bom-item-inactive:hover {
  background: rgba(255,255,255,0.02);
  border-color: var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.2  VISUAL INTELLIGENCE
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Layer Toggles Dropdown (v2.1) ─── */
.btn.layer-dd-btn {
  font-size: 10px;
  font-weight: 700;
  color: #9ba6b8;
  background: rgba(77,163,255,0.10);
  border-color: rgba(77,163,255,0.34);
  padding: 2px 8px;
  border-radius: 3px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn.layer-dd-btn:hover,
.btn.layer-dd-btn.show {
  background: rgba(77,163,255,0.18);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}
.layer-dd-menu {
  background: #181d27;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  min-width: 185px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
.layer-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px;
  font-size: 10.5px;
  font-weight: 500;
  color: #8f98a8;
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.layer-dd-item:hover {
  background: rgba(77,163,255,0.12);
  color: #d0d7e2;
}
.layer-dd-check {
  accent-color: var(--accent, #4182dc);
  width: 13px;
  height: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.layer-dd-item:has(.layer-dd-check:checked) {
  color: #9ba6b8;
}

:root[data-theme="light"] .btn.layer-dd-btn {
  color: #000000e6;
  background: rgba(65,130,220,0.08);
  border-color: rgba(65,130,220,0.38);
}
:root[data-theme="light"] .btn.layer-dd-btn:hover,
:root[data-theme="light"] .btn.layer-dd-btn.show {
  background: rgba(65,130,220,0.14);
  color: #1d4f91;
  border-color: #4182dc;
}
:root[data-theme="light"] .layer-dd-menu {
  background: #ffffff;
  border-color: #d5dbe6;
  box-shadow: 0 8px 24px rgba(26,42,64,0.16);
}
:root[data-theme="light"] .layer-dd-item {
  color: #000000d9;
}
:root[data-theme="light"] .bom-empty,
:root[data-theme="light"] .project-sidebar-section-chevron {
  color: #000000b3;
}
:root[data-theme="light"] .layer-dd-item:hover {
  background: rgba(65,130,220,0.10);
  color: #0f172a;
}
:root[data-theme="light"] .layer-dd-item:has(.layer-dd-check:checked) {
  color: #1d4f91;
}

:root[data-theme="light"] .bom-zone-badge.rack,
:root[data-theme="light"] .bom-source-pill.rack {
  background: rgba(234, 120, 31, 0.12);
  color: #9a4b0e;
  border-color: rgba(234, 120, 31, 0.28);
}

/* ─── FOV range sliders in modal ─── */
.modal-divider {
  border-color: rgba(255,255,255,0.1);
  margin: 8px 0;
}
.fov-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #5a7a9a;
  margin-top: -2px;
  margin-bottom: 4px;
}
.modal-dark .form-range {
  height: 4px;
  cursor: pointer;
}

/* ─── BOM panel header with toggle ─── */
.bom-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.project-sidebar-section-bom.is-collapsed .bom-panel-header {
  border-bottom: none;
}
.btn-bom-mode {
  background: none;
  border: 1px solid #2d4560;
  color: #8a93a3;
  border-radius: 3px;
  width: 22px;
  height: 18px;
  font-size: 11.5px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, color 0.12s;
  padding: 0;
}
.btn-bom-mode.active,
.btn-bom-mode:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── BOM grouped view ─── */
.bom-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 5px;
  overflow: hidden;
}
.bom-group-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  background: rgba(26,58,92,0.45);
  font-size: 10.5px;
  font-weight: 700;
  color: #d0d7e2;
}
.bom-group-qty {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  margin-left: 2px;
}
.bom-group-body {
  padding: 3px 7px 4px;
}
.bom-group-product {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bom-group-product:last-child { border-bottom: none; }
.bom-group-product-name {
  font-size: 10px;
  color: #8ab0d0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bom-group-zones {
  font-size: 9px;
  color: #778196;
  margin-top: 3px;
  font-style: italic;
}

/* ─── NVR/DVR Channel Capacity ─── */
.channel-block {
  margin-top: 5px;
}
.channel-label {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #7a9ab0;
  margin-bottom: 2px;
}
.channel-bar-track {
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.channel-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.channel-bar-fill.ok     { background: #3a9a55; }
.channel-bar-fill.warn   { background: #d08020; }
.channel-bar-fill.danger { background: #c03030; }

:root[data-theme="light"] .channel-block {
  background: #f8fbff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
:root[data-theme="light"] .channel-label {
  color: #56708a;
}
:root[data-theme="light"] .channel-bar-track {
  background: rgba(15,23,42,0.08);
}
:root[data-theme="light"] .network-review-table {
  --bs-table-color: #0f172a;
  --bs-table-bg: #ffffff;
  --bs-table-border-color: rgba(15,23,42,0.10);
  --bs-table-striped-bg: #f8fbff;
  --bs-table-striped-color: #0f172a;
  --bs-table-hover-bg: #eef6ff;
  --bs-table-hover-color: #0f172a;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.10);
}
:root[data-theme="light"] .network-review-table thead th {
  background: #eef4fb;
  color: #0f172a;
  border-bottom: 1px solid rgba(15,23,42,0.12);
}
:root[data-theme="light"] .network-review-table tbody tr.table-secondary td {
  background: #e9f1fb;
  color: #0f172a;
}
:root[data-theme="light"] .network-review-table tbody tr.table-warning td {
  background: #fff7db;
  color: #3b2f05;
}
:root[data-theme="light"] .network-review-port-cell {
  border-color: rgba(15,23,42,0.10) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
:root[data-theme="light"] .network-review-port-cell .btn-link {
  color: #0b69c7 !important;
}
:root[data-theme="light"] #network-review-modal hr {
  border-color: rgba(15,23,42,0.10);
}
:root[data-theme="light"] #network-review-modal .text-muted {
  color: #5f6f82 !important;
}
:root[data-theme="light"] #network-review-modal .text-success {
  color: #1f7a42 !important;
}
:root[data-theme="light"] #network-review-modal .text-warning {
  color: #9a6700 !important;
}
:root[data-theme="light"] #network-review-modal .text-danger {
  color: #b42318 !important;
}

/* ─── Toolbar button active states ─── */
.toolbar-btn.active {
  background: rgba(77,163,255,0.18);
  border-color: rgba(65,130,220,0.5);
  color: #7ab0e8;
}
.toolbar-btn.active.btn-outline-warning {
  background: rgba(77,163,255,0.16);
  border-color: rgba(77,163,255,0.65);
  color: #4da3ff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.3  CABLE CALCULATOR + TABLET LAYOUT
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Draw-mode canvas cursor ─── */
.drawing-mode #installation-canvas {
  cursor: crosshair !important;
}

/* ─── Cable BOM rows ─── */
.cable-bom-item {
  border-color: rgba(77,163,255,0.22);
}
.cable-bom-item .bom-item-icon {
  color: #4da3ff;
  font-size: 13.5px;
}
.cable-length-display {
  font-size: 10.5px;
  color: var(--text-2);
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.cable-length-display strong {
  color: #4da3ff;
}

/* ─── Panel close button (tablet only, shown via JS) ─── */
.btn-panel-close {
  background: none;
  border: none;
  color: #8a93a3;
  font-size: var(--font-ui);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.1s;
}
.btn-panel-close:hover { color: #e05050; }

/* ─── Panel backdrop (tablet only) ─── */
.panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.panel-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

/* ─── Touch drag ghost ─── */
.touch-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(26,58,92,0.92);
  border: 1px solid var(--accent);
  border-radius: 8px;
  opacity: 0.9;
  transform: scale(1.15) translate(-50%, -50%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.touch-drag-ghost img {
  width: 36px;
  height: 36px;
  pointer-events: none;
}
.touch-drag-ghost .eq-item-label {
  font-size: 9px;
  color: #aec8e0;
  margin-top: 3px;
}

.docs-browser-modal-content {
  min-height: min(88vh, 920px);
}
.docs-browser-modal-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.docs-browser-layout {
  flex: 1 1 auto;
  min-height: 0;
}
.docs-browser-nav-col,
.docs-browser-content-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.docs-browser-list,
.docs-browser-scrollpane {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.docs-browser-scrollpane {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px;
}
.docs-browser-content {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-1);
}
.docs-browser-content h1,
.docs-browser-content h2,
.docs-browser-content h3,
.docs-browser-content h4 {
  margin: 0 0 10px;
  color: var(--text-1);
}
.docs-browser-content p,
.docs-browser-content ul,
.docs-browser-content ol,
.docs-browser-content pre,
.docs-browser-content table,
.docs-browser-content blockquote {
  margin: 0 0 12px;
}
.docs-browser-content code {
  background: rgba(255,255,255,0.08);
  padding: 1px 4px;
  border-radius: 4px;
}
.docs-browser-content pre {
  background: rgba(0,0,0,0.22);
  padding: 10px;
  border-radius: 8px;
  overflow: auto;
}
.docs-browser-content a {
  color: #7dc1ff;
  text-decoration: none;
}
.docs-browser-content a:hover {
  text-decoration: underline;
}
.docs-browser-content blockquote {
  border-left: 3px solid rgba(77,163,255,0.4);
  padding-left: 10px;
  color: var(--text-2);
}
.docs-browser-content hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 14px 0;
}
:root[data-theme="light"] .docs-browser-content code {
  background: rgba(15,23,42,0.06);
}
:root[data-theme="light"] .docs-browser-content pre {
  background: rgba(15,23,42,0.04);
}
:root[data-theme="light"] .docs-browser-content a {
  color: #1d4ed8;
}
:root[data-theme="light"] .docs-browser-content blockquote {
  border-left-color: rgba(37,99,235,0.25);
}

/* ───────────────────────────────────────────────────────────────────────────
   TABLET / iPAD RESPONSIVE  (≤1024px)
─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .docs-browser-modal-content {
    min-height: min(88vh, 820px);
  }
  .docs-browser-layout {
    row-gap: 10px;
  }
  .docs-browser-nav-col {
    max-height: 180px;
  }

  /* Keep brand icon, hide long title to avoid overlap with action buttons */
  .navbar-title-text { display: none; }

  .project-sidebar-section {
    padding: 9px;
  }
  .project-scale-row {
    grid-template-columns: minmax(0, 68px) auto minmax(0, 1fr);
  }

  /* Show panel toggle buttons in navbar */
  .btn-panel-toggle { display: flex !important; }
  .btn-panel-close  { display: block !important; }

  /* Show backdrop */
  .panel-backdrop   { display: block; }

  /* Convert side panels to fixed drawers */
  .equipment-panel {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    min-width: 180px;
  }
  .equipment-panel.panel-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.55);
  }
  .info-panel {
    position: fixed;
    top: 48px;
    right: 0;
    bottom: 0;
    z-index: 300;
    transform: translateX(110%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    min-width: 220px;
  }
  .info-panel.panel-open {
    transform: translateX(0);
    box-shadow: -4px 0 24px rgba(0,0,0,0.55);
  }

  /* Canvas takes full width */
  .canvas-panel { flex: 1; min-width: 0; position: relative; }

  /* Larger touch targets */
  .eq-item      { padding: 10px 4px 7px; }
  .canvas-tab   { padding: 7px 12px 8px; min-height: var(--toolbar-h); }
  .toolbar-btn  { padding: 5px 9px; }
  .tab-add-btn  { padding: 6px 12px; }

  /* Toolbar wraps instead of clipping */
  .canvas-toolbar { flex-wrap: wrap; min-height: auto; padding: 5px 10px; gap: 4px; }

  /* Keep lower floating tool rail visible on tablet/safe-area browsers */
  .design-floatbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 14px);
    max-width: 860px;
    padding: 5px 6px;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 420;
  }
  .design-floatbar-row {
    gap: 5px;
    flex-wrap: wrap;
  }
  .design-tool-btn {
    width: 32px;
    height: 30px;
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  .canvas-wrapper {
    align-items: flex-start;
    padding-top: 8px;
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
}

/* Small Android tablets: force viewport-anchored compact bottom rail */
@media (max-width: 900px) {
  .project-scale-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .project-scale-row #map-scale {
    min-width: 0;
  }
  .project-scale-row #map-unit {
    grid-column: 1 / -1;
  }

  .design-floatbar {
    left: 50%;
    right: auto;
    width: calc(100% - 14px);
    max-width: 860px;
    transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 10px;
  }
  .design-floatbar-row.muted span {
    min-width: 0;
    font-size: 10px;
  }
  .design-props {
    gap: 4px;
    margin-left: 4px;
    padding-left: 6px;
  }
  .design-props input {
    width: 48px;
  }
}

/* ─── Phone (≤576px): icon-only toolbar buttons ─── */
@media (max-width: 576px) {
  .btn-label        { display: none; }
  #layer-dd-summary { display: none; }
}

@media (max-width: 991px) {
  .rack-builder-body,
  .rack-builder-editor-grid {
    grid-template-columns: 1fr;
  }
  .rack-plan-list {
    max-height: 220px;
  }
  .rack-elevation-view {
    min-height: 420px;
  }
}

/* ─── Compact navbar (≤640px): icon-only brand, actions centred ─── */
@media (max-width: 640px) {
  .navbar-title-text { display: none; }
  .navbar-left       { flex: 0 0 auto; }
  .navbar-actions    { flex: 1; justify-content: center; gap: 5px; }
  .navbar-right      { gap: 5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RIGHT-CLICK CONTEXT MENU
═══════════════════════════════════════════════════════════════════════════ */
.ctx-menu {
  position: fixed;
  z-index: 9500;
  background: #1a2538;
  border: 1px solid #2d4560;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(0,0,0,0.65);
  padding: 4px 0;
  min-width: 174px;
  display: none;
  animation: ctxFadeIn 0.08s ease;
}
@keyframes ctxFadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.ctx-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px 6px 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: #c8d6e5;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.07s, color 0.07s;
}
.ctx-item:hover {
  background: #263548;
  color: #ffffff;
}
.ctx-icon {
  width: 14px;
  text-align: center;
  font-size: 10.5px;
  color: #8a93a3;
  flex-shrink: 0;
  transition: color 0.07s;
}
.ctx-item:hover .ctx-icon    { color: var(--accent); }
.ctx-item.ctx-danger         { color: #d06060; }
.ctx-item.ctx-danger:hover   { background: rgba(200,50,50,0.12); color: #ff7070; }
.ctx-item.ctx-danger .ctx-icon       { color: #b05050; }
.ctx-item.ctx-danger:hover .ctx-icon { color: #ff7070; }
.ctx-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 3px 0;
}

#canvas-drop-zone.coverage-editing {
  box-shadow: inset 0 0 0 2px rgba(14,165,233,0.38);
}
#canvas-drop-zone.coverage-editing::after {
  content: 'Editing camera coverage';
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10,18,30,0.84);
  border: 1px solid rgba(14,165,233,0.45);
  color: #dff6ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   USER ACCOUNT MENU  (v1.6)
═══════════════════════════════════════════════════════════════════════════ */

/* ─── User avatar button (navbar) ─── */
.user-menu-wrap {
  position: relative;
}
.user-btn {
  width:  32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.user-btn:hover { background: var(--accent-hover); }

/* ─── Dropdown panel ─── */
.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
  z-index: 1050;
  overflow: hidden;
  animation: dropFadeIn 0.12s ease;
}
.user-dropdown.open { display: block; }
@keyframes dropFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
}
.user-dropdown-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--font-ui);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-dropdown-name {
  font-size: var(--font-ui);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}
.user-dropdown-email {
  font-size: 10px;
  color: #8a93a3;
  line-height: 1.3;
  word-break: break-all;
}
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 11.5px;
  color: var(--sidebar-text);
  cursor: pointer;
  transition: background 0.1s;
}
.user-dropdown-item i { width: 14px; text-align: center; opacity: 0.65; font-size: 10.5px; }
.user-dropdown-item:hover { background: var(--hover-bg); }
.user-dropdown-signout { color: #f87171; }
.user-dropdown-signout i { opacity: 1; }
.user-dropdown-signout:hover { background: rgba(248,113,113,0.1); color: #ff8888; }
.user-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

/* ─── Login / auth shell ─── */
.auth-modal .modal-dialog {
  margin: 0;
  max-width: none;
}
.auth-modal .modal-content {
  border: 0;
  border-radius: 0;
}
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at top left, rgba(77,163,255,0.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255,193,7,0.10), transparent 30%),
    linear-gradient(135deg, #eef4fb 0%, #f7fafc 48%, #edf3fb 100%);
  color: #132238;
  position: relative;
}
.auth-shell-panel {
  min-width: 0;
}
.auth-shell-panel-brand {
  position: relative;
  padding: 40px clamp(32px, 5vw, 72px) 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.auth-shell-panel-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0)),
    radial-gradient(circle at 18% 28%, rgba(38,208,186,0.12), transparent 22%);
  pointer-events: none;
}
.auth-brand-topbar,
.auth-brand-copy,
.auth-brand-visual {
  position: relative;
  z-index: 1;
}
.auth-brand-topbar {
  display: flex;
  align-items: center;
}
.auth-brand-logo {
  width: auto;
  height: 28px;
}
.auth-brand-logo-dark {
  display: none;
}
.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(52,211,153,0.14);
  color: #1f6b5d;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 22px;
}
.auth-brand-copy {
  max-width: 640px;
  padding-top: 42px;
}
.auth-brand-title {
  margin: 0 0 22px;
  max-width: 720px;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: #1e266d;
}
.auth-brand-text {
  max-width: 560px;
  margin: 0 0 26px;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.45;
  color: #50627d;
}
.auth-brand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.auth-brand-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 154px;
  padding: 14px 24px;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.auth-brand-cta:hover {
  transform: translateY(-1px);
}
.auth-brand-cta-primary {
  background: #33d2b5;
  color: #0d2132;
  box-shadow: 0 14px 28px rgba(51,210,181,0.22);
}
.auth-brand-cta-primary:hover {
  background: #2bc3a8;
}
.auth-brand-cta-secondary {
  background: rgba(255,255,255,0.75);
  border-color: rgba(30,38,109,0.14);
  color: #1e266d;
}
.auth-brand-footnote {
  margin: 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
  color: #5d6b82;
}
.auth-brand-visual {
  margin-top: 28px;
  max-width: 720px;
}
.auth-visual-card {
  position: relative;
  border-radius: 34px;
  border: 1px solid rgba(30,38,109,0.08);
  background: rgba(255,255,255,0.66);
  box-shadow: 0 26px 60px rgba(33,52,91,0.10);
  padding: 28px;
  backdrop-filter: blur(10px);
}
.auth-visual-toolbar {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: #182129;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}
.auth-visual-toolbar span {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.42);
  opacity: 0.82;
}
.auth-visual-canvas {
  position: relative;
  min-height: 360px;
  padding: 56px 24px 20px;
  border-radius: 28px;
  background: linear-gradient(180deg, #f7f8fc 0%, #f2f4fb 100%);
  overflow: hidden;
}
.auth-visual-frame {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1.55;
  margin: 0 auto;
  border-radius: 18px;
  background: linear-gradient(135deg, #3793aa 0%, #2f8297 100%);
  box-shadow: inset 0 0 0 12px rgba(255,255,255,0.82);
}
.auth-visual-panel {
  position: absolute;
  border-radius: 16px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 16px 32px rgba(31,38,79,0.12);
}
.auth-visual-panel-a {
  left: 10%; top: 16%; width: 26%; height: 32%;
}
.auth-visual-panel-b {
  left: 40%; top: 18%; width: 22%; height: 54%; background: #d8cdfb;
}
.auth-visual-panel-c {
  right: 12%; top: 22%; width: 23%; height: 42%; background: #35224f;
}
.auth-visual-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 18px;
  font-weight: 700;
}
.auth-visual-note-left {
  left: 12px;
  bottom: 56px;
  padding: 10px 14px;
  background: #ffffff;
  color: #28304f;
  box-shadow: 0 10px 22px rgba(31,38,79,0.12);
}
.auth-visual-note-right {
  right: 18px;
  bottom: 18px;
  max-width: 280px;
  padding: 18px 20px;
  background: #2d2f73;
  color: #ffffff;
  line-height: 1.45;
  box-shadow: 0 20px 30px rgba(45,47,115,0.22);
}
.auth-visual-floating {
  position: absolute;
  border-radius: 18px;
  box-shadow: 0 18px 32px rgba(31,38,79,0.14);
}
.auth-visual-floating-dark {
  right: 4%;
  top: 24%;
  width: 96px;
  height: 174px;
  background: #1f2531;
}
.auth-visual-floating-light {
  left: 10%;
  top: 48%;
  width: 120px;
  height: 88px;
  background: linear-gradient(135deg, #ffffff 0%, #f0eafe 100%);
}
.auth-shell-logo-corner {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 2;
}
.auth-shell-panel-form {
  display: grid;
  place-items: center;
  min-height: 100vh;
  width: 100%;
  padding: 32px clamp(22px, 4vw, 54px);
  background: transparent;
  border-left: 0;
}
.auth-shell-panel-form-centered {
  place-items: center;
}
.auth-form-wrap {
  width: min(100%, 460px);
  margin: 0;
}
.auth-form-header {
  margin-bottom: 22px;
  text-align: center;
}
.auth-form-kicker {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3b7fa3;
}
.auth-form-title {
  margin: 0 0 10px;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.1;
  color: #172554;
  font-weight: 750;
}
.auth-form-text {
  margin: 0 auto;
  max-width: 32ch;
  font-size: 16px;
  line-height: 1.6;
  color: #5c6b80;
}
.auth-form-card {
  border-radius: 24px;
  padding: 28px;
  background: #ffffff;
  border: 1px solid rgba(30,38,109,0.08);
  box-shadow: none;
}
.auth-form-brandmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
  text-align: left;
}
.auth-form-brandmark i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #ffe08a;
  color: #8a5a00;
  font-size: 20px;
  box-shadow: none;
}
.auth-form-brand {
  font-size: 20px;
  font-weight: 800;
  color: #172554;
}
.auth-form-subtitle {
  font-size: 13px;
  color: #64748b;
}
.auth-modal .field-label {
  color: #54657d;
  margin-bottom: 7px;
}
.auth-modal .form-control {
  min-height: 54px;
  border-radius: 16px;
  border-color: #d6e0ec;
  background: rgba(249,251,255,0.96);
  color: #0f172a;
  font-size: 16px;
  padding: 14px 16px;
}
.auth-modal .form-control::placeholder {
  color: #8da0b6;
}
.auth-modal .form-control:focus {
  background: #fff;
  border-color: #49a7d8;
  box-shadow: 0 0 0 4px rgba(73,167,216,0.14);
  color: #0f172a;
}
.auth-login-help {
  margin: -4px 0 12px;
  font-size: 13px;
  color: #73839a;
}
.auth-login-error {
  display: none;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.auth-login-error.is-visible {
  display: block !important;
}
.auth-modal #btn-login {
  min-height: 54px;
  border-radius: 16px;
  font-size: 16px;
  box-shadow: none;
}
.auth-modal #btn-login:disabled {
  opacity: 0.72;
}
:root[data-theme="dark"] .auth-brand-logo-light,
:root:not([data-theme="light"]) .auth-brand-logo-light {
  display: block;
}
:root[data-theme="dark"] .auth-brand-logo-dark,
:root:not([data-theme="light"]) .auth-brand-logo-dark {
  display: none;
}
@media (max-width: 1100px) {
  .auth-shell-panel-form {
    padding-top: 18px;
    padding-bottom: 34px;
  }
}
@media (max-width: 768px) {
  .auth-shell-logo-corner {
    top: 20px;
    left: 20px;
  }
  .auth-shell-panel-form {
    align-items: flex-start;
    min-height: auto;
    padding: 88px 16px 24px;
    background: transparent;
  }
  .auth-form-wrap {
    width: 100%;
  }
  .auth-form-card {
    padding: 22px 18px;
    border-radius: 22px;
  }
}

/* ─── Settings: palette category checkboxes ─── */
.settings-palette-checks {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.settings-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--sidebar-text);
  cursor: pointer;
  user-select: none;
  line-height: 1;
}
.settings-check-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 13px;
  height: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

.preferences-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-create-user-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
}
:root[data-theme="light"] .admin-create-user-panel {
  background: rgba(0,0,0,0.02);
}

.admin-create-user-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.admin-create-user-grid #new-user-email,
.admin-create-user-grid .admin-temp-pass-wrap {
  grid-column: span 2;
}
.admin-create-user-grid #btn-create-user {
  grid-column: span 2;
  justify-self: end;
}
.admin-temp-pass-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}
#btn-generate-user-password {
  padding: 0 9px;
}

.admin-user-roles-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}
.admin-user-role-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-1) 80%, transparent);
}
.admin-user-role-name {
  font-size: 10.5px;
  color: var(--text-1);
  line-height: 1.2;
}
.admin-user-role-meta {
  font-size: 9px;
  color: var(--text-3);
}
.admin-user-role-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-user-role-row select {
  min-width: 88px;
}
.admin-user-delete-btn {
  min-width: 30px;
  width: 30px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.about-planner-modal-content {
  border: 1px solid var(--border);
}
.about-planner-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255,255,255,0.03);
}
.about-planner-card-accent {
  background: linear-gradient(160deg, rgba(33,47,92,0.95), rgba(75,40,120,0.92));
  border-color: rgba(125,193,255,0.18);
}
.about-planner-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: rgba(255,255,255,0.72);
  margin-bottom: 10px;
}
.about-planner-title {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.about-planner-version-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 14px;
}
.about-planner-copy {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.86);
}
.about-planner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
:root[data-theme="light"] .about-planner-card {
  background: rgba(0,0,0,0.02);
}
:root[data-theme="light"] .about-planner-card-accent {
  background: linear-gradient(160deg, rgba(51,65,120,0.96), rgba(110,69,160,0.92));
}

/* ─── v1.8 Product Sources ─── */
.source-card {
  background: #0d1a27;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  margin-bottom: 7px;
  transition: border-color 0.15s;
}
.source-card:hover { border-color: #2d4a6b; }
.source-card.source-disabled { opacity: .55; }

.source-type-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid transparent;
  letter-spacing: 0.2px;
}

.source-status {
  font-size: 9px;
  color: #8a93a3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-connect-status {
  min-height: 16px;
  margin-top: 2px;
}

/* Source toggle switch */
.source-toggle {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.source-toggle input { opacity: 0; width: 0; height: 0; }
.source-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #2d3f52;
  border-radius: var(--radius-lg);
  transition: background 0.2s;
}
.source-toggle-slider::before {
  content: '';
  position: absolute;
  height: 11px;
  width: 11px;
  left: 2.5px;
  top: 2.5px;
  background: #7a9cbe;
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.source-toggle input:checked + .source-toggle-slider { background: #1a4a2e; }
.source-toggle input:checked + .source-toggle-slider::before {
  transform: translateX(12px);
  background: #27c265;
}

/* Action buttons in source cards */
.btn.btn-xs {
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--sidebar-text);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.btn.btn-xs:hover { background: var(--hover-bg); color: var(--text-1); }
.source-btn-delete:hover { background: rgba(220,53,69,0.15) !important; color: #f87171 !important; }
.source-btn-sync:hover   { background: rgba(39,194,101,0.12) !important; color: #27c265 !important; }

/* optgroup styling in modal selects */
.modal-dark select optgroup {
  color: color-mix(in srgb, var(--accent) 65%, var(--text-1) 35%);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.modal-dark select optgroup option {
  color: var(--text-1);
  font-size: 10.5px;
  font-weight: 400;
}

/* modal-md size */
.modal-md { max-width: 520px; }

/* ─── v2.0 Zoho Books Estimate modal ─── */

/* Customer search typeahead dropdown */
.est-customer-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  z-index: 1100;
  max-height: 160px;
  overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.55);
}
.est-customer-result-item {
  padding: 7px 10px;
  font-size: 10.5px;
  color: var(--sidebar-text);
  cursor: pointer;
  transition: background 0.1s;
}
.est-customer-result-item:hover { background: var(--hover-bg); color: #e7ebf2; }

/* Line items scrollable container */
.est-line-items {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0d1a27;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}

/* Individual line item row */
.est-line-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  transition: background 0.1s;
}
.est-line-row:hover { background: var(--hover-bg); }

.est-line-check {
  flex-shrink: 0;
  accent-color: var(--accent);
  width: 13px;
  height: 13px;
  cursor: pointer;
}

.est-line-name {
  flex: 1 1 0;
  font-size: 10.5px;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.3;
}

.est-line-qty {
  font-size: 10px;
  color: #8a93a3;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Badges: Zoho-mapped (green) vs name-only (amber) */
.est-line-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.est-line-badge.mapped {
  background: rgba(39,194,101,0.15);
  color: #27c265;
  border: 1px solid rgba(39,194,101,0.3);
}
.est-line-badge.name-only {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.25);
}


/* v2.2 visual polish */
.canvas-toolbar, .tab-bar, .modal-dark .modal-header, .modal-dark .modal-footer {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02);
}
.modal-dark {
  border-radius: var(--radius-md);
  box-shadow: 0 14px 36px rgba(0,0,0,0.45);
}
.info-panel .form-control, .info-panel .form-select, .modal-dark .form-control, .modal-dark .form-select {
  border-radius: var(--radius-sm);
}
.toolbar-btn, .tab-add-btn, .btn.layer-dd-btn {
  border-radius: var(--radius-sm);
}

@media (max-width: 1024px) {
  .docs-browser-modal-content {
    min-height: min(88vh, 820px);
  }
  .docs-browser-layout {
    row-gap: 10px;
  }
  .docs-browser-nav-col {
    max-height: 180px;
  }
}

@media (max-width: 768px) {
  .docs-browser-modal-content {
    min-height: min(90vh, 760px);
  }
  .docs-browser-nav-col,
  .docs-browser-content-col {
    width: 100%;
  }
  .docs-browser-nav-col {
    max-height: 160px;
  }
}