/* ==========================================================================
   PEB STEEL STRUCTURE CALCULATOR — SHED MODULE
   Modern High-Precision Engineering Design System
   Autodesk / Tekla / SAP2000 Precision Grade Styling
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Surface & Background Hierarchy */
  --bg-app: #f1f5f9;
  --bg-subtle: #f8fafc;
  --bg-panel: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-active: #e2e8f0;
  --bg-canvas: #0f172a;
  
  /* Primary & Accent Palettes */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;

  --accent-slate: #0f172a;
  --accent-slate-light: #1e293b;
  --accent-teal: #0f766e;
  --accent-emerald: #059669;
  --accent-emerald-dark: #047857;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;

  /* Borders & Dividers */
  --border-subtle: #f8fafc;
  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-dark: #94a3b8;
  --border-focus: #3b82f6;

  /* Typography Colors */
  --text-main: #0f172a;
  --text-body: #334155;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-inverse: #ffffff;

  /* Shadows & Elevation */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.12), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.08);

  /* Typography Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Sizing Constants */
  --header-height: 54px;
  --nav-height: 72px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--bg-app);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Shell Layout */
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background: var(--bg-app);
}

/* Boot Loading Overlay -- covers the page until ProjectManager has decided
   the real starting route (see index.html and js/app.js bootPebShedApp()).
   Sits above everything, including the auth modal, so nothing flashes
   in/out before the correct screen is known. */
#boot-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg-app);
}

#boot-loading-overlay .boot-loading-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary-600);
  animation: boot-spin 0.8s linear infinite;
}

#boot-loading-overlay p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}

@keyframes boot-spin {
  to { transform: rotate(360deg); }
}

#boot-loading-overlay.boot-loading-hidden {
  display: none;
}

/* Full Project PDF export overlay -- see js/app.js's
   showPdfExportOverlay()/hidePdfExportOverlay() and index.html. Sits above
   the whole app (but below the auth modal / PebUI dialogs, so a real error
   dialog can still surface on top of it) for the duration of the export,
   hiding the sequence of screen switches the capture loop performs. */
.pdf-export-overlay {
  position: fixed;
  inset: 0;
  z-index: 99995;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 13, 24, 0.82);
  backdrop-filter: blur(4px);
}

.pdf-export-overlay.show {
  display: flex;
}

.pdf-export-card {
  width: 220px;
  max-width: calc(100vw - 32px);
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 28px 24px;
  text-align: center;
}

.pdf-export-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary-600);
  animation: boot-spin 0.8s linear infinite;
}

.pdf-export-progress-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-active);
  overflow: hidden;
}

.pdf-export-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--primary-600);
  border-radius: var(--radius-full);
  transition: width 0.25s ease;
}

/* Secret/API key fields (Google Maps, OpenAI, Gemini). These are plain
   type="text" inputs, visually dot-masked via -webkit-text-security instead
   of type="password" -- Chrome/Edge/most password managers treat ANY
   type="password" field on a page as a signal to offer their native
   "save password?" prompt after the next successful-looking action
   anywhere on the page (e.g. clicking the project Save button), even
   though these keys have nothing to do with account login. Masking via
   CSS instead keeps the same hidden-characters look with none of that. */
.secret-key-input {
  -webkit-text-security: disc;
  text-security: disc;
}

/* ==========================================================================
   TOP HEADER -- two stacked rows so 14 distinct controls never have to
   compete for one line:
     Row 1 "header-identity-row"  Brand -> Status -> Project Info -> Files -> Account
     Row 2 "header-toolbar-row"   View Controls -> Edit/Display -> Analysis/Export
   Grouped clusters are separated by thin vertical dividers with consistent
   gaps, instead of one long undifferentiated row of buttons.
   ========================================================================== */
.app-header {
  min-height: var(--header-height);
  background: #ffffff;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10001;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.03);
}

/* ---- Row 1: Identity ---- */
.header-identity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.header-brand-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.header-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent-slate);
  color: #ffffff;
  flex-shrink: 0;
}

.header-brand-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text-main);
  text-transform: uppercase;
  white-space: nowrap;
}

.header-status-group,
.header-file-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.revision-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-medium);
  color: #334155;
  white-space: nowrap;
}

.header-project-group {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 220px;
}

.header-project-caption {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-project-caption strong {
  color: var(--text-main);
  font-weight: 700;
}

.header-project-dims {
  color: var(--border-dark);
}

.header-row-spacer {
  flex: 1 1 0;
  min-width: 8px;
}

.header-divider {
  width: 1px;
  height: 20px;
  background: var(--border-medium);
  flex-shrink: 0;
}

/* ---- Row 2: Toolbar ---- */
.header-toolbar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 6px 20px;
  background: var(--bg-subtle);
}

.header-tool-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.header-group-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--border-dark);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 2px;
  user-select: none;
}

.view-mode-toggle-group {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: nowrap;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 2px;
}

.view-mode-btn {
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.view-mode-btn:hover {
  color: var(--text-main);
  background: #e2e8f0;
}

.view-mode-btn.active {
  background: var(--accent-slate);
  color: #ffffff;
  border-color: var(--accent-slate);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

/* Shared sizing/typography for every icon+label header button, on top of
   the base .btn/.btn-sm rules -- keeps Undo/Redo/Dims/Grid/Print/Export
   visually consistent with the icon buttons that already had icons. */
.hdr-btn {
  gap: 5px;
  font-weight: 600;
}

.hdr-btn svg {
  flex-shrink: 0;
}

.hdr-btn-caret {
  margin-left: -1px;
  opacity: 0.7;
}

.hdr-btn-slate {
  background: var(--accent-slate);
  color: #ffffff;
  border-color: var(--accent-slate-light);
}

.hdr-btn-slate:hover {
  background: var(--accent-slate-light);
}

.hdr-btn-teal {
  background: var(--accent-teal);
  color: #ffffff;
  border-color: #115e59;
}

.hdr-btn-teal:hover {
  background: #115e59;
}

.hdr-btn-emerald {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald-dark);
}

.hdr-btn-emerald:hover {
  background: var(--accent-emerald-dark);
}

.header-export-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-export-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  z-index: 10030;
}

.header-export-menu.open .header-export-dropdown {
  display: flex;
}

.header-export-menu.open #btn-export-menu-toggle {
  background: #f1f5f9;
  border-color: var(--border-dark);
}

.header-export-option {
  width: 100%;
  justify-content: flex-start;
}

/* Progressive Workflow Navigator (Two-Row Clean Polished Layout) */
.workflow-nav {
  min-height: var(--nav-height);
  background: #f8fafc;
  border-bottom: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  row-gap: 6px;
  padding: 6px 20px;
  flex-shrink: 0;
  position: sticky;
  top: var(--header-height);
  z-index: 99;
  flex-wrap: wrap;
}

.workflow-rows-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 700px;
  min-width: 0;
}

.workflow-row {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.workflow-row-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.5px;
  min-width: 125px;
  user-select: none;
}

.workflow-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  color: #334155;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.workflow-step-btn:hover {
  color: #0f172a;
  background: #f1f5f9;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.workflow-step-btn.active {
  color: #ffffff;
  background: #0f172a;
  border-color: #0f172a;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.25);
}

.workflow-step-btn.active .step-num {
  color: #94a3b8;
}

/* Green section text/indicator when applied/configured */
.workflow-step-btn.is-applied {
  color: #15803d;
  border-color: #86efac;
  background: #f0fdf4;
  font-weight: 700;
}

.workflow-step-btn.is-applied:hover {
  background: #dcfce7;
  border-color: #4ade80;
  color: #166534;
}

.workflow-step-btn.is-applied .step-num {
  color: #16a34a;
  font-weight: 700;
}

.workflow-step-btn.is-applied.active {
  color: #ffffff;
  background: #16a34a;
  border-color: #15803d;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.3);
}

.workflow-step-btn.is-applied.active .step-num {
  color: #dcfce7;
}

.step-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #64748b;
}

/* Standalone action inside the SECONDARY & OUTPUT row (see index.html --
   it deliberately has no data-screen, so js/app.js's workflow-nav click
   handler skips it and it never gets .active). Styled as a solid emerald
   pill (the app's existing "apply/export success" accent, matching e.g.
   the Roof Sheet Apply button and Auto-Install actions) with extra left
   margin, so it reads as "do a thing" rather than "go to a step". */
.workflow-download-btn {
  margin-left: 10px;
  background: var(--accent-emerald-dark);
  border-color: #065f46;
  color: #ffffff;
  font-weight: 700;
}

.workflow-download-btn:hover {
  background: #065f46;
  border-color: #065f46;
  color: #ffffff;
}

.step-arrow {
  display: none;
}

.nav-summary-readout {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-main);
  font-weight: 600;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Main Workspace */
.main-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  overflow: hidden;
  height: calc(100vh - var(--header-height) - var(--nav-height));
}

/* #page-outlet (js/pageLoader.js) sits between .main-workspace and the
   .module-screen sections so each module can live in its own pages/*.html
   file. display:contents removes it from the box tree so the sections
   still behave as direct flex children of .main-workspace, exactly like
   before the page-split refactor -- otherwise .module-screen's flex:1 /
   height:100% rules below resolve against this wrapper's auto height
   instead of the fixed workspace height, and inner content stops scrolling. */
#page-outlet {
  display: contents;
}

.module-screen {
  display: none;
  flex: 1;
  height: 100%;
  overflow-y: auto;
}

.module-screen.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

/* Full-width scrollable engineering screens (BOQ, Report, Analysis, Loads, etc.) */
#screen-boq.active,
#screen-report.active,
#screen-analysis.active,
#screen-loads.active,
#screen-dashboard.active {
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-bottom: 60px;
  display: flex !important;
  flex-direction: column;
}

/* Engineering Workspace Two-Column Grid */
.engineering-split-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 1000px) {
  .engineering-split-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
}

/* Roof Sheet page: keep engineering-like split and ensure clear preview area */
#screen-roofsheet .engineering-split-grid {
  grid-template-columns: 360px 1fr;
}

#screen-roofsheet .cad-viewport-box {
  min-height: 440px;
}

@media (max-width: 700px) {
  #screen-roofsheet .engineering-split-grid {
    grid-template-columns: 1fr;
  }

  #screen-roofsheet .cad-viewport-box {
    min-height: 420px;
  }
}

/* Left Sidebar Panels - Independent Scrollable Bar */
.side-panel-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  height: 100%;
  max-height: 100%;
  padding-right: 6px;
}

.side-panel-column::-webkit-scrollbar,
.module-screen::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.side-panel-column::-webkit-scrollbar-track,
.module-screen::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.side-panel-column::-webkit-scrollbar-thumb,
.module-screen::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.side-panel-column::-webkit-scrollbar-thumb:hover,
.module-screen::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.engineering-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.panel-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Form Controls */
.form-field {
  margin-bottom: 12px;
}

.form-field:last-child {
  margin-bottom: 0;
}

.field-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-body);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.field-label .unit {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.input-box input,
.input-box select,
.input-box textarea {
  width: 100%;
  height: 34px;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 0 40px 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  transition: all var(--transition-fast);
}

.input-box input:focus,
.input-box select:focus,
.input-box textarea:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.input-box .unit-suffix {
  position: absolute;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: var(--primary-600);
  color: #ffffff;
  border-color: var(--primary-700);
  box-shadow: var(--shadow-xs);
}

.btn-primary:hover {
  background: var(--primary-700);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-secondary {
  background: #ffffff;
  color: var(--text-main);
  border-color: var(--border-medium);
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: var(--border-dark);
}

.btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

/* Engineering CAD Viewport Box */
.cad-viewport-box {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  height: 100%;
  flex: 1;
  box-shadow: var(--shadow-sm);
}

.cad-toolbar {
  height: 38px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 10;
  flex-shrink: 0;
}

.cad-tools-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cad-canvas-holder {
  flex: 1;
  height: 100%;
  min-height: 0;
  position: relative;
  background: #ffffff;
  overflow: hidden;
}

/* Bottom CAD Status & Quick Action Bar */
.cad-bottom-bar {
  height: 32px;
  background: #f8fafc;
  border-top: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  z-index: 20;
  transition: all 0.2s ease;
}

.cad-bottom-left, .cad-bottom-center, .cad-bottom-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cad-stat-sep {
  color: #cbd5e1;
}

/* Collapsed / Hidden Bottom Bar State */
.cad-viewport-box.bottom-bar-hidden .cad-bottom-bar {
  display: none !important;
}

/* Floating Restore Button when Bottom Bar is Hidden */
.cad-viewport-box .floating-restore-bar-btn {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 45;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  font-size: 10px;
  font-weight: 700;
  background: #ffffff;
  border: 1.5px solid #000000;
  color: #000000;
}

.cad-viewport-box.bottom-bar-hidden .floating-restore-bar-btn {
  display: inline-flex !important;
}

/* Information Section Schedule Panel Collapsing */
.info-schedule-panel {
  transition: all 0.2s ease-in-out;
  flex-shrink: 0;
}

.info-schedule-panel.panel-collapsed .info-panel-content {
  display: none !important;
}

.info-schedule-panel.panel-collapsed .panel-title {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Full Canvas Mode (Hides Sidebar for 100% Canvas View) */
.engineering-split-grid.full-canvas-active {
  grid-template-columns: 1fr !important;
}

.engineering-split-grid.full-canvas-active .side-panel-column {
  display: none !important;
}

/* On-Plan Selection Helper Bar */
.plan-selection-bar {
  background: #ffffff;
  border-bottom: 1px solid var(--border-light);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.selection-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selection-count-tag {
  display: inline-block;
  padding: 1px 6px;
  background: #000000;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  border-radius: 2px;
}

/* Technical Tooltip */
.cad-tooltip {
  position: absolute;
  background: #ffffff;
  border: 1px solid #000000;
  padding: 8px 10px;
  font-size: 11px;
  z-index: 50;
  pointer-events: none;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
}

/* Material Grade Selector Buttons */
.grade-select-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.grade-btn,
.bp-type-btn,
.rf-type-btn {
  padding: 7px 6px;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-main);
  transition: all var(--transition-fast);
}

.grade-btn:hover,
.bp-type-btn:hover,
.rf-type-btn:hover {
  background: #f8fafc;
  border-color: var(--border-dark);
}

.grade-btn.active,
.bp-type-btn.active,
.rf-type-btn.active {
  background: var(--accent-slate);
  color: #ffffff;
  border-color: var(--accent-slate);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

/* Section Previews */
.section-preview-box {
  border: 1px solid var(--border-light);
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.rf-guide-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-slate);
  color: #ffffff;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.section-stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  text-align: left;
}

.section-stats-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-light);
}

.section-stats-table td:nth-child(2) {
  text-align: right;
  font-weight: 700;
}

/* Bay Spacing Table */
.bay-spacing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--font-mono);
  margin-top: 6px;
}

.bay-spacing-table th {
  background: var(--bg-subtle);
  padding: 4px 6px;
  border: 1px solid var(--border-medium);
  text-align: left;
  font-weight: 700;
}

.bay-spacing-table td {
  padding: 4px 6px;
  border: 1px solid var(--border-medium);
}

.bay-spacing-table input {
  width: 100%;
  height: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--border-medium);
  padding: 0 4px;
}

/* Tables (BOQ / Schedules) */
.table-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-medium);
  background: #ffffff;
}

.boq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--font-mono);
  text-align: left;
}

.boq-table th {
  background: var(--bg-subtle);
  padding: 8px 10px;
  font-weight: 700;
  color: var(--text-main);
  border: 1px solid var(--border-medium);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.boq-table td {
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  color: var(--text-main);
}

.boq-table tbody tr:hover {
  background: var(--bg-hover);
}

.boq-table tfoot td {
  background: var(--bg-subtle);
  font-weight: 700;
  border: 1px solid var(--border-medium);
}

/* BOQ Steel page -- export action bar (see pages/boq.html). "Print BOQ Spec
   Sheet" and "Export Excel (.xls)" are grouped as one visually-paired,
   side-by-side unit (.boq-export-btn-pair) -- the only action group left
   in this bar since "Download BOQ (.CSV)" and "Export to Google Sheets"
   were removed from the BOQ Steel page per request. */
.boq-export-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.boq-export-btn-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.boq-export-btn {
  padding: 0 20px;
  font-size: 12.5px;
  font-weight: 700;
}

.boq-export-btn-excel {
  background: var(--accent-emerald);
  color: #ffffff;
  border-color: var(--accent-emerald-dark);
}

.boq-export-btn-excel:hover {
  background: var(--accent-emerald-dark);
}

@media (max-width: 640px) {
  .boq-export-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .boq-export-btn-pair {
    flex-direction: column;
    align-items: stretch;
  }
  .boq-export-btn {
    width: 100%;
  }
}

/* "+ Add Item" trigger in the Part by Part BOQ Schedule panel title -- see
   pages/boq.html and app.js's openAddBoqItemModal(). Resets the
   uppercase/letter-spacing its .panel-title parent applies to headings,
   since this is a real button label, not a heading. */
.boq-add-item-btn {
  text-transform: none;
  letter-spacing: normal;
  padding: 0 12px;
  font-weight: 700;
}

/* Custom-item indicator badge (Part by Part BOQ Schedule + Print Spec Sheet)
   and the per-row remove control for user-added BOQ line items. */
.tag-custom {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 700;
  color: #1d4ed8;
  background: #dbeafe;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.boq-row-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: 6px;
  vertical-align: middle;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  color: #dc2626;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.boq-row-remove-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 2px;
  text-transform: uppercase;
}

.badge-taper {
  background: #000000;
  color: #ffffff;
}

.badge-straight {
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}

/* Summary Grid Cards */
.summary-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric-card {
  background: #ffffff;
  border: 1px solid var(--border-medium);
  padding: 12px;
}

.metric-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.metric-val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 4px;
}

.metric-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Member Inspector Side Drawer */
.inspector-card {
  background: #ffffff;
  border: 1px solid #000000;
  padding: 12px;
}

.inspector-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 11px;
}

.inspector-row .k {
  color: var(--text-dim);
}

.inspector-row .v {
  font-family: var(--font-mono);
  font-weight: 600;
  color: #000000;
}

/* Toast Notification Popup */
.toast-msg {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #000000;
  color: #ffffff;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  border-radius: 2px;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: 1px solid #333333;
  animation: toastFade 0.2s ease-out;
}

.toast-msg.show {
  display: flex;
}

@keyframes toastFade {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Modal Dialog */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-backdrop.open {
  display: flex;
}

.modal-box {
  background: #ffffff;
  border: 1px solid #000000;
  width: 92%;
  max-width: 480px;
  padding: 18px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-medium);
}

.modal-header h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   PEBUI — CUSTOM NOTIFICATION / CONFIRM / PROMPT MODALS
   Replaces window.alert / confirm / prompt with an app-styled dialog.
   ========================================================================== */
.pebui-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100000;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.pebui-backdrop.pebui-open {
  opacity: 1;
}

.pebui-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-medium);
  overflow: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: transform 0.15s ease;
}

.pebui-backdrop.pebui-open .pebui-card {
  transform: translateY(0) scale(1);
}

.pebui-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 14px 18px;
  border-bottom: 1px solid var(--border-light);
}

.pebui-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  background: var(--primary-100);
  color: var(--primary-700);
}

.pebui-tone-success .pebui-icon { background: #dcfce7; color: #15803d; }
.pebui-tone-error .pebui-icon,
.pebui-tone-danger .pebui-icon { background: #fee2e2; color: #dc2626; }
.pebui-tone-warning .pebui-icon { background: #fef3c7; color: #b45309; }

.pebui-title {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

.pebui-close {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}

.pebui-close:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.pebui-body {
  padding: 16px 18px;
}

.pebui-message {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-body);
  white-space: pre-line;
}

.pebui-input {
  width: 100%;
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
}

.pebui-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.pebui-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
}

.pebui-btn-danger {
  background: var(--accent-rose);
  color: #ffffff;
  border: 1px solid #be123c;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.pebui-btn-danger:hover {
  background: #be123c;
}

/* Multi-field form dialog -- see PebUI.form() in js/uiModal.js, used by
   the BOQ Steel screen's "+ Add Item" flow. */
.pebui-card-form {
  max-width: 460px;
}

.pebui-field {
  margin-bottom: 14px;
}

.pebui-field:last-child {
  margin-bottom: 0;
}

.pebui-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 5px;
}

.pebui-field-input {
  margin-top: 0;
}

.pebui-field-error {
  min-height: 15px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-rose);
  margin-top: 4px;
}

/* Rafter Grid Selection Chips */
.rf-grid-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.rf-grid-chip:hover {
  border-color: #000000;
  background: var(--bg-hover);
}

.rf-grid-chip.active {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

/* 3D Structural Isometric Viewer Modal */
.modal-3d-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-3d-card {
  width: 100%;
  max-width: 1400px;
  height: 90vh;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

.v3d-canvas-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Permanent Dimension Toggle Button */
.btn-dims-permanent {
  background: #f0fdf4;
  color: #064e3b;
  border-color: #059669;
  font-weight: 700;
  transition: all 0.15s ease;
}

.btn-dims-permanent.dims-off {
  background: #f1f5f9;
  color: #64748b;
  border-color: #cbd5e1;
}

.btn-dims-permanent:hover {
  background: #dcfce7;
  border-color: #047857;
}

/* Joining Plate Filter Chips */
.jp-grid-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.jp-grid-chip:hover {
  border-color: #064e3b;
  background: #f0fdf4;
}

.jp-grid-chip.active {
  background: #064e3b;
  color: #ffffff;
  border-color: #047857;
}

/* Analysis & Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 2px;
  text-transform: uppercase;
}

.badge-draft { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.badge-ready { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; }
.badge-passed { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; }
.badge-warning { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }
.badge-failed { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }

/* Dashboard Projects Cards Grid */
.dashboard-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  padding: 12px 16px;
  border-radius: 2px;
}

.project-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.project-card {
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: 3px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.15s ease;
}

.project-card:hover {
  border-color: #000000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.project-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 4px;
}

.project-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 12px;
  line-height: 1.6;
}

.project-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
  margin-top: 10px;
}

/* Multi-Step Setup Wizard Modal */
.modal-wizard-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.wizard-modal-box {
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 4px;
  width: 100%;
  max-width: 680px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  overflow: hidden;
}

.wizard-modal-header {
  background: #000000;
  color: #ffffff;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.wizard-modal-body {
  padding: 20px;
  max-height: calc(85vh - 100px);
  overflow-y: auto;
}

.wizard-option-card {
  border: 1.5px solid var(--border-medium);
  border-radius: 3px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #ffffff;
}

.wizard-option-card:hover {
  border-color: #000000;
  background: #f9fafb;
}

.wizard-option-card.selected {
  border-color: #047857;
  background: #f0fdf4;
}

/* Google Login Screen Overlay & Cards */
.login-screen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  background: #ffffff;
  border-radius: 8px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  padding: 32px;
  text-align: center;
  animation: fadeInModal 0.3s ease;
}

.login-brand-logo {
  font-size: 32px;
  margin-bottom: 8px;
}

.login-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.login-subtitle {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 24px;
  line-height: 1.5;
}

.btn-google-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 46px;
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  color: #3c4043;
  font-size: 14px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Inter', sans-serif;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(60,64,67,0.15);
  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.btn-google-auth:hover {
  background-color: #f8f9fa;
  border-color: #d2e3fc;
  box-shadow: 0 2px 6px rgba(60,64,67,0.2);
}

.btn-google-auth svg {
  width: 20px;
  height: 20px;
}

.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
  margin: 20px 0;
  font-family: var(--font-mono);
}

.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e2e8f0;
}

.login-divider::before { margin-right: 12px; }
.login-divider::after { margin-left: 12px; }

.login-features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
  text-align: left;
}

.feature-chip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: #334155;
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: #0f172a;
}

.user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #047857;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

/* Universal Semi-Transparent Minimal Tooltip / Info Card System */
.cad-member-tooltip,
.canvas-floating-tooltip,
.section-col-context-menu {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.15), 0 8px 16px -6px rgba(0, 0, 0, 0.08) !important;
  padding: 12px 14px !important;
  min-width: 240px !important;
  font-family: var(--font-sans) !important;
  z-index: 10005 !important;
  animation: tooltipFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---------- Front Page & Auth Screen Styles ---------- */
.auth {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #eef1f5, #f7f8fa 60%);
}
.auth.hide {
  display: none !important;
}
.auth-box {
  width: 370px;
  padding: 30px;
  background: #ffffff;
  border: 1px solid #d6dae0;
  border-radius: 6px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.08);
}
.mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: #1c5f9e;
  font-weight: 600;
}
.gbtn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  background: #ffffff;
  border: 1px solid #b4bbc4;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.gbtn:hover {
  background: #f8fafc;
}

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1c5f9e;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}

/* Front Page Layout */
.wrap-setup {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 20px 60px;
}
.setup-split {
  display: grid;
  grid-template-columns: minmax(580px, 1fr) minmax(380px, 460px);
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}
.setup-main-column,
.setup-side-column {
  display: flex;
  flex-direction: column;
}
.setup-main-column .card:first-child,
.setup-side-column .card:first-child {
  margin-top: 0;
}
.setup-side-column {
  position: sticky;
  top: 8px;
}
.card {
  background: #ffffff;
  border: 1px solid #d6dae0;
  border-radius: 6px;
  margin-top: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.card-hd {
  padding: 10px 14px;
  border-bottom: 1px solid #d6dae0;
  background: #fafbfc;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-bd {
  padding: 16px;
}
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.grid-2col .full {
  grid-column: 1 / -1;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field label {
  font-size: 11px;
  font-weight: 600;
  color: #4a5361;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.field .unit {
  font-size: 10px;
  color: #7b8593;
  font-family: var(--font-mono);
}
.field input, .field select {
  height: 32px;
  padding: 0 9px;
  background: #ffffff;
  border: 1px solid #b4bbc4;
  border-radius: 4px;
  outline: none;
  width: 100%;
  font-size: 13px;
}
.field input:focus, .field select:focus {
  border-color: #1c5f9e;
  box-shadow: 0 0 0 2px #e8f1f9;
}
.field input[type=number] {
  font-family: var(--font-mono);
}
.field input[readonly] {
  background: #f0f2f5;
  color: #4a5361;
}
.field .err {
  font-size: 10.5px;
  color: #b3261e;
  min-height: 0;
}
.field.bad input, .field.bad select {
  border-color: #c9736c;
}

/* Map Elements */
.searchrow {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.searchrow input {
  flex: 1;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #b4bbc4;
  border-radius: 4px;
  outline: none;
}
.searchrow button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #b4bbc4;
  background: #ffffff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.searchrow button:hover {
  background: #fafbfc;
}
#map {
  height: 300px;
  border: 1px solid #b4bbc4;
  border-radius: 4px;
  background: #eef1f4;
  z-index: 1;
}
.maphint {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: #7b8593;
}
.mapfail {
  padding: 26px;
  text-align: center;
  color: #7b8593;
  font-size: 12px;
  border: 1px dashed #b4bbc4;
  border-radius: 4px;
  background: #fafbfc;
}

/* Action Buttons */
.actions-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  align-items: center;
}
.actions-row-right {
  margin-left: auto;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.btn-action {
  height: 36px;
  padding: 0 18px;
  border-radius: 4px;
  border: 1px solid #b4bbc4;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-action:hover {
  background: #fafbfc;
}
.btn-action.primary {
  background: #1c5f9e;
  border-color: #1c5f9e;
  color: #ffffff;
}
.btn-action.primary:hover {
  background: #17527f;
}

/* Summary Box */
.kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dotted #d6dae0;
}
.kv:last-child {
  border-bottom: none;
}
.kv .k {
  color: #4a5361;
}
.kv .v {
  font-family: var(--font-mono);
  text-align: right;
  font-weight: 600;
}
.saved-banner {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 4px;
  background: #e6f4ec;
  color: #1a7f43;
  font-size: 12px;
  border: 1px solid #b9e2ca;
  margin-top: 16px;
}

@media (max-width: 1200px) {
  .setup-split {
    grid-template-columns: 1fr;
  }

  .setup-side-column {
    position: static;
  }
}

@media (max-width: 700px) {
  .wrap-setup {
    padding: 12px 12px 44px;
  }

  .grid-2col {
    grid-template-columns: 1fr;
  }

  .actions-row {
    flex-wrap: wrap;
  }

  .actions-row-right {
    margin-left: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .actions-row .btn-action {
    width: 100%;
  }

  #map {
    height: 240px;
  }
}

/* ==========================================================================
   Gemini AI Engineer — Analysis Panel & Report Styles
   ========================================================================== */
.gemini-report-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
  margin-bottom: 20px;
  animation: geminiFadeIn 0.3s ease-out;
}

@keyframes geminiFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.gemini-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.gemini-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gemini-badge-model {
  font-size: 11px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.gemini-metrics-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
  background: #f8fafc;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.gemini-metric-item {
  text-align: center;
  padding: 4px 8px;
}

.gemini-metric-item .lbl {
  font-size: 10px;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.gemini-metric-item .val {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin-top: 2px;
  font-family: var(--font-mono);
}

.gemini-markdown-body {
  font-size: 13px;
  line-height: 1.65;
  color: #334155;
}

.gemini-markdown-body h2 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 22px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.gemini-markdown-body h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-top: 18px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gemini-markdown-body h4 {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-top: 14px;
  margin-bottom: 6px;
}

.gemini-markdown-body p {
  margin-bottom: 10px;
}

.gemini-markdown-body strong {
  color: #0f172a;
  font-weight: 700;
}

.gemini-markdown-body ul, .gemini-markdown-body ol {
  padding-left: 20px;
  margin-bottom: 12px;
}

.gemini-markdown-body li {
  margin-bottom: 6px;
}

.gemini-markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

.gemini-markdown-body th {
  background: #f1f5f9;
  color: #1e293b;
  font-weight: 700;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #cbd5e1;
}

.gemini-markdown-body td {
  padding: 7px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

.gemini-markdown-body tr:nth-child(even) td {
  background: #f8fafc;
}

.gemini-markdown-body code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: #f1f5f9;
  color: #0f172a;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

.gemini-markdown-body blockquote {
  border-left: 3px solid #3b82f6;
  background: #eff6ff;
  padding: 10px 14px;
  margin: 12px 0;
  border-radius: 0 6px 6px 0;
  color: #1e40af;
  font-size: 12px;
}

.gemini-loading-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  margin-bottom: 16px;
}

.gemini-spinner {
  display: inline-block;
  width: 38px;
  height: 38px;
  border: 3px solid #93c5fd;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}

.gemini-step-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
  margin: 16px auto 0;
  text-align: left;
  font-size: 11px;
  color: #64748b;
  font-family: var(--font-mono);
}

.gemini-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.gemini-step-item.active {
  color: #1d4ed8;
  border-color: #93c5fd;
  background: #eff6ff;
  font-weight: 600;
}

.gemini-step-item.done {
  color: #15803d;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.gemini-actions-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.gemini-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  transition: all 0.15s ease;
}

.gemini-chip-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

/* ==========================================================================
   PHP BACKEND & PROJECT DASHBOARD / FILE MANAGER STYLES
   ========================================================================== */

/* ==========================================================================
   AUTH SCREEN -- Sign In / Create Account
   Split-screen engineering-software login: a dark "blueprint" structural
   panel (left, decorative) paired with a light form card (right). Built
   entirely from the app's existing design tokens (--bg-canvas is the same
   dark navy the CAD viewport itself uses, --accent-amber is the signature
   highlight, --font-mono labels the dimension callouts) so this reads as
   the same product, just given a proper front door.

   #modal-auth itself, the two <form> elements and every input/tab id are
   unchanged from the original markup -- js/projectManager.js still shows/
   hides #modal-auth via inline style.display, toggles .active on the two
   tab buttons, and toggles each <form>'s inline style.display directly, so
   nothing here may depend on those forms being anything other than normal
   block-level containers (field spacing below uses margin, not flex/grid
   gap, specifically so the JS's own display:block toggle keeps working).
   ========================================================================== */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 13, 24, 0.72);
  backdrop-filter: blur(6px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-screen-card {
  display: flex;
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 48px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-light);
  overflow: hidden;
  animation: authCardRise 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authCardRise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Left: structural visual panel ---------- */
.auth-visual-panel {
  position: relative;
  flex: 0 0 44%;
  min-width: 0;
  background: var(--bg-canvas);
  color: var(--text-inverse);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.auth-blueprint-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(59, 130, 246, 0.14) 0, rgba(59, 130, 246, 0.14) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(59, 130, 246, 0.14) 0, rgba(59, 130, 246, 0.14) 1px, transparent 1px, transparent 28px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 55%, transparent 92%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 55%, transparent 92%);
  pointer-events: none;
}

.auth-visual-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
}

.auth-brand-glyph {
  font-size: 24px;
  width: 42px;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
}

.auth-brand-word {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
}

.auth-frame-svg {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  min-height: 0;
  margin: 8px 0;
}

.auth-frame-line,
.auth-frame-brace {
  fill: none;
  stroke: #7ab8ee;
  stroke-width: 2;
  stroke-linecap: round;
}

.auth-frame-brace {
  stroke: rgba(122, 184, 238, 0.5);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}

.auth-frame-fill {
  fill: #7ab8ee;
}

.auth-frame-tick {
  stroke: rgba(122, 184, 238, 0.65);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.auth-frame-pulse {
  fill: none;
  stroke: var(--accent-amber);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
}

.auth-frame-dim line {
  stroke: rgba(226, 232, 240, 0.5);
  stroke-width: 1;
}

.auth-frame-dim-label {
  fill: rgba(226, 232, 240, 0.75);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-frame-line,
  .auth-frame-brace {
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: authFrameDraw 1.3s ease-out forwards;
  }
  .auth-frame-brace { animation-delay: 0.35s; }
  .auth-frame-dim, .auth-frame-dim-label, .auth-frame-fill, .auth-frame-tick {
    opacity: 0;
    animation: authFadeIn 0.6s ease-out 1.1s forwards;
  }
  .auth-frame-pulse {
    stroke-dasharray: 60 400;
    stroke-dashoffset: 0;
    animation: authFrameDraw 1.3s ease-out forwards, authRidgePulse 3.6s ease-in-out 1.6s infinite;
  }
}

@keyframes authFrameDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes authFadeIn {
  to { opacity: 1; }
}

@keyframes authRidgePulse {
  0%   { stroke-dashoffset: 60;  opacity: 0; }
  8%   { opacity: 0.9; }
  50%  { stroke-dashoffset: -220; opacity: 0.9; }
  62%  { opacity: 0; }
  100% { stroke-dashoffset: -220; opacity: 0; }
}

.auth-visual-features {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.auth-visual-features li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: rgba(226, 232, 240, 0.78);
  padding-left: 14px;
  position: relative;
}

.auth-visual-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  background: var(--accent-amber);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ---------- Right: form panel ---------- */
.auth-form-panel {
  flex: 1 1 56%;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg-card);
}

.auth-form-panel-inner {
  padding: 34px 40px 28px;
  max-width: 400px;
  margin: 0 auto;
}

.auth-form-eyebrow {
  margin: 0 0 22px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.auth-tabs-nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 22px;
}

.auth-tab-btn {
  flex: 1;
  padding: 9px 10px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.auth-tab-btn:hover {
  color: var(--text-main);
}

.auth-tab-btn.active {
  color: var(--text-main);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.auth-tab-btn:focus-visible,
.auth-submit-btn:focus-visible,
.auth-pw-toggle:focus-visible,
.auth-input-wrap input:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.auth-modal-body {
  position: relative;
}

.auth-error-banner {
  display: none;
  padding: 10px 12px 10px 30px;
  position: relative;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16px;
}

.auth-error-banner::before {
  content: '!';
  position: absolute;
  left: 10px;
  top: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-rose);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}

.auth-field {
  margin-bottom: 15px;
}

.auth-field-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-body);
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  pointer-events: none;
}

.auth-input-wrap input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text-main);
  background: var(--bg-card);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-input-wrap input::placeholder {
  color: var(--text-dim);
}

.auth-input-wrap input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
  outline: none;
}

.auth-input-wrap:has(.auth-pw-toggle) input {
  padding-right: 36px;
}

.auth-pw-toggle {
  position: absolute;
  right: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--text-dim);
  cursor: pointer;
}

.auth-pw-toggle:hover {
  color: var(--text-body);
  background: var(--bg-hover);
}

.auth-eye-icon {
  width: 17px;
  height: 17px;
  position: absolute;
}

.auth-eye-closed { display: none; }

.auth-pw-toggle[aria-pressed="true"] .auth-eye-open { display: none; }
.auth-pw-toggle[aria-pressed="true"] .auth-eye-closed { display: block; }

.auth-submit-btn {
  position: relative;
  width: 100%;
  padding: 11px 36px 11px 14px;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-inverse);
  background: var(--accent-slate);
  border: 1px solid var(--accent-slate);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.auth-submit-btn::after {
  content: '→';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.15s;
}

.auth-submit-btn:hover:not(:disabled) {
  background: var(--accent-slate-light);
}

.auth-submit-btn:hover:not(:disabled)::after {
  transform: translate(2px, -50%);
}

.auth-submit-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.auth-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.auth-security-note {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
}

@media (max-width: 860px) {
  .auth-screen-card {
    flex-direction: column;
    max-width: 460px;
    max-height: none;
    overflow-y: auto;
  }
  .auth-visual-panel {
    flex: none;
    padding: 22px 26px;
    min-height: 220px;
  }
  .auth-frame-svg { margin: 4px 0; }
  .auth-visual-features { display: none; }
  .auth-form-panel-inner { padding: 26px 26px 22px; max-width: none; }
}

@media (max-width: 480px) {
  .auth-modal-overlay { padding: 0; }
  .auth-screen-card { border-radius: 0; max-height: 100vh; height: 100vh; }
  .auth-visual-panel { min-height: 130px; padding: 16px 20px; }
  .auth-frame-svg { display: none; }
  .auth-visual-features { display: none; }
  .auth-form-panel { overflow-y: auto; }
  .auth-form-panel-inner { padding: 22px 20px 24px; }
}

/* Project Dashboard & File Manager */
.dashboard-view-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 4px 40px;
}

/* ==========================================================================
   DASHBOARD / FILE MANAGER (Modern Industrial Engineering Portal)
   ========================================================================== */
.dashboard-view-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 12px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Dashboard Hero Banner */
.dashboard-hero-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  color: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-hero-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.dashboard-hero-title-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dashboard-hero-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  flex-shrink: 0;
}

.dashboard-hero-title-group h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: #ffffff;
}

.dashboard-hero-title-group p {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}

.btn-hero-create {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  font-size: 13px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all var(--transition-fast) !important;
}

.btn-hero-create:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
}

/* KPI Metrics Grid */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
}

.dashboard-kpi-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(4px);
}

.kpi-label {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.kpi-val {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #f8fafc;
}

/* Spotlight / Recent Project Banner */
.dashboard-spotlight-card {
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-left: 4px solid var(--accent-blue);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.spotlight-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.spotlight-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.spotlight-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px;
}

.spotlight-meta {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Dashboard Filter & Search Toolbar */
.dashboard-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
  gap: 12px;
}

.dashboard-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  flex: 1;
  max-width: 360px;
  transition: all var(--transition-fast);
}

.dashboard-search-box:focus-within {
  background: #ffffff;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.dashboard-search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  width: 100%;
  color: #0f172a;
}

.dashboard-filter-group {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.project-filter-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.project-filter-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: var(--border-medium);
}

.project-filter-btn.active {
  background: var(--accent-blue);
  border-color: #1d4ed8;
  color: #ffffff;
  font-weight: 700;
}

.filter-count {
  font-size: 10px;
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: 999px;
}

.project-filter-btn.active .filter-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Projects Cards Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.project-card {
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.project-card:hover {
  border-color: var(--border-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.project-card.active-project-card {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2), var(--shadow-sm);
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.project-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.project-card-client {
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.project-status-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.status-draft {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.status-in-progress {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.status-completed {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.project-card-body {
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  padding: 10px 0;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #334155;
}

.project-meta-row span {
  color: #64748b;
}

.project-meta-row strong {
  font-family: var(--font-mono);
}

.project-card-footer {
  display: flex;
  gap: 8px;
  align-items: center;
}

.empty-projects-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 24px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1.5px dashed #cbd5e1;
  box-shadow: var(--shadow-xs);
}

/* Cloud Sync Badge */
.cloud-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  background: #f1f5f9;
  border: 1px solid var(--border-medium);
  color: var(--text-body);
  cursor: default;
  white-space: nowrap;
}


.gemini-chip-btn.primary {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
}

.gemini-chip-btn.primary:hover {
  background: #1d4ed8;
}

/* ==========================================================================
   MODERN NAVBAR CONTROLS, USER PROFILE & LOGOUT WIDGET
   ========================================================================== */
.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border-medium);
  margin: 0 4px;
}

.nav-user-widget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 2px;
}

.user-avatar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  padding: 3px 10px 3px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-main);
  transition: all var(--transition-fast);
}

.user-avatar-chip:hover {
  background: #f1f5f9;
  border-color: var(--border-dark);
}

.avatar-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-display-name {
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-logout-navbar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  color: #64748b;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-logout-navbar:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15);
}

/* ==========================================================================
   SECTION / 3D VIEW -- FOCUSED STRUCTURAL VIEWING MODE
   The 14-button workflow-step navigator (Project...Report) and the
   Columns/Steel/Area summary only matter while stepping through the
   design workflow in Plan mode -- once the user switches to Section or
   3D View they're just viewing the structural model, so js/app.js's
   switchViewMode() adds .focus-view-mode to .app-wrapper and this whole
   bar (both rows, .nav-summary-readout included, since it's nested
   inside .workflow-nav) hides, handing that height straight to the
   Structural Plan / Section / 3D viewport card below it. Plan mode is
   unaffected -- the step navigator stays exactly as it was there.
   ========================================================================== */
.app-wrapper.focus-view-mode .workflow-nav {
  display: none !important;
}

/* Every module's left sidebar (Grid/Bay Spacing setup on Layout, section
   sizing on Column/Base Plate/Rafter, install/apply panels on Purlin/Sag
   Rod/Bracing/Roof Sheet/Side Sheet, etc.) is only useful while editing
   that module in Plan mode -- in Section/3D View it's just clutter next
   to the structural viewport, so it's hidden the same way the app's own
   "Full Canvas" button already hides it per-screen
   (.engineering-split-grid.full-canvas-active, a few lines below), and
   the viewport takes the freed width so STRUCTURAL PLAN is the only
   thing on the page. Every sidebar's DOM/inputs are only hidden via CSS
   here, never removed, so switching back to Plan restores each one
   exactly as it was and nothing about any module's model, calculations,
   or JS wiring is touched.
   Scoped to exactly the screens that actually have a CAD canvas -- the
   same list js/app.js's hasActiveCadCanvas() uses to enable the Plan/
   Section/3D toggle in the first place. Project Setup, BOQ Takeoff,
   Analysis and Report have no canvas at all (the toggle is already
   disabled there), so there is nothing to hide on those. */
.app-wrapper.view-mode-3d :is(
  #screen-layout,
  #screen-column,
  #screen-baseplate,
  #screen-rafter,
  #screen-joiningplate,
  #screen-purlin,
  #screen-sagrod,
  #screen-bracing,
  #screen-roofsheet,
  #screen-sidesheet
) .engineering-split-grid {
  grid-template-columns: 1fr !important;
}

.app-wrapper.view-mode-3d :is(
  #screen-layout,
  #screen-column,
  #screen-baseplate,
  #screen-rafter,
  #screen-joiningplate,
  #screen-purlin,
  #screen-sagrod,
  #screen-bracing,
  #screen-roofsheet,
  #screen-sidesheet
) .side-panel-column {
  display: none !important;
}

/* Beyond the left sidebar, several modules also place secondary content
   directly inside the CAD viewport card itself, next to (not part of) the
   canvas: step-by-step placement guidance banners (Rafter's "Click START
   Point (Column/Midpoint/Ridge)", Sag Rod's, Bracing's, Roof Sheet's, Side
   Sheet's, and Joining Plate's "click a detected joint crosshair" banner --
   all share the .rf-guide-banner class regardless of which step's text is
   currently shown), on-drawing selection toolbars (Base Plate's, Joining
   Plate's "Select Joints: Select All / Select Similar / Select Frame
   Joints / Clear", and Column's "Select on Drawing" bar -- all share
   .plan-selection-bar), and read-only schedule/summary panels rendered
   below the canvas (Installed Rafter Frames Schedule, Base Plates Sizing &
   Orientation Schedule, Detected Connection Joints Schedule, and Joining
   Plate's Frame Grid Line Selector chip bar -- all share .engineering-panel,
   the same class the schedules combine with .info-schedule-panel). None of
   this is a view control (zoom/fit/reset/dimensions live in .cad-toolbar,
   untouched below), so in Section/3D View it's just clutter around the
   STRUCTURAL PLAN -- hidden here exactly like the sidebar above: CSS-only,
   nothing removed from the DOM, so Plan mode and every module's live data
   are completely unaffected. */
.app-wrapper.focus-view-mode .cad-viewport-box .rf-guide-banner,
.app-wrapper.focus-view-mode .cad-viewport-box .plan-selection-bar,
.app-wrapper.focus-view-mode .cad-viewport-box .engineering-panel {
  display: none !important;
}

.app-wrapper.focus-view-mode .main-workspace {
  height: calc(100vh - var(--header-height)) !important;
}

/* ==========================================================================
   DASHBOARD / ALL PROJECTS MODE (Clean, Focused Project Management)
   The entire Row 2 toolbar (view/edit/analysis tools) only makes sense
   while a project's CAD workspace is open, so it hides as a whole here --
   along with the project-specific parts of Row 1 (revision tag, draft
   status, current project caption). Brand, cloud sync, All Projects,
   New Project, and the account widget stay visible on every screen.
   ========================================================================== */
.app-wrapper.dashboard-mode .workflow-nav,
.app-wrapper.dashboard-mode .header-toolbar-row {
  display: none !important;
}

.app-wrapper.dashboard-mode .header-status-group,
.app-wrapper.dashboard-mode .header-divider-status,
.app-wrapper.dashboard-mode .header-project-group,
.app-wrapper.dashboard-mode .header-divider-project,
.app-wrapper.dashboard-mode #btn-save-cloud-now {
  display: none !important;
}

.app-wrapper.dashboard-mode .main-workspace {
  height: calc(100vh - var(--header-height)) !important;
  padding: 24px !important;
}

/* Compact "All Projects" navbar -- slightly smaller / tighter than the main
   design-workspace header, since only the brand, cloud sync, and a couple of
   nav buttons are visible here (Row 2 is gone entirely). */
.app-wrapper.dashboard-mode .app-header {
  min-height: 44px;
}

.app-wrapper.dashboard-mode .header-identity-row {
  padding: 6px 16px;
  border-bottom: none;
}

.app-wrapper.dashboard-mode .header-brand-title {
  font-size: 12.5px;
}

.app-wrapper.dashboard-mode .header-file-group .btn {
  font-size: 11px;
  padding: 0 9px;
  height: 26px;
}

.app-wrapper.dashboard-mode .cloud-sync-badge {
  font-size: 10px;
  padding: 2px 7px;
}

/* ==========================================================================
   RESPONSIVE NAVBAR & MOBILE/TABLET ADJUSTMENTS
   ========================================================================== */
@media (max-width: 1200px) {
  .header-group-label {
    display: none;
  }
}

@media (max-width: 1024px) {
  .app-header {
    padding: 0;
  }
  .header-identity-row,
  .header-toolbar-row {
    padding: 8px 14px;
  }
  .header-project-group {
    order: 10;
    flex: 1 1 100%;
  }
  .header-row-spacer {
    display: none;
  }
  .user-display-name {
    max-width: 80px;
  }
}

@media (max-width: 768px) {
  .header-identity-row {
    padding: 8px 10px;
  }
  .header-toolbar-row {
    padding: 6px 10px 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .header-brand-title {
    font-size: 12px;
  }
  .header-status-group,
  .header-divider-status {
    display: none;
  }
  .header-file-group span,
  .hdr-btn span {
    display: none;
  }
  .header-file-group .btn,
  .header-tool-group .btn {
    padding: 0 8px;
  }
  .view-mode-btn {
    padding: 4px 7px;
  }
  .dashboard-hero-header {
    padding: 16px;
  }
  .dashboard-hero-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-hero-create {
    width: 100%;
    justify-content: center;
  }
  .dashboard-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}