/* ============================================================
   DroneDesign — Parametric CNC Frame Generator
   ============================================================ */

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

:root {
  --bg-deep:       #0d0f11;
  --bg-panel:      #161a1e;
  --bg-panel-alt:  #1c2128;
  --bg-hover:      #252d38;
  --border:        #2a3040;
  --border-bright: #3a4a5c;
  --text:          #c8d4e0;
  --text-dim:      #6a7d90;
  --text-bright:   #e8f2ff;
  --accent:        #4fa3e0;
  --accent-dim:    #2a6090;
  --danger:        #d44;
  --cut-color:     #e05050;
  --engrave-color: #e09030;
  --ref-color:     #5090d0;

  --toolbar-h:  48px;
  --params-w:   300px;
  --info-w:     210px;
}

html, body {
  height: 100%; width: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
}

/* ============================================================
   TOOLBAR
   ============================================================ */

#toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--toolbar-h);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 0;
  z-index: 100;
  user-select: none;
}

.toolbar-left  { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.toolbar-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; }
.toolbar-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.app-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-right: 8px;
}

button {
  background: var(--bg-panel-alt);
  color: var(--text);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
button:hover { background: var(--bg-hover); border-color: var(--accent-dim); color: var(--text-bright); }
button:active { background: var(--accent-dim); }

.btn-primary {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text-bright);
  font-weight: bold;
}
.btn-primary:hover { background: var(--accent); color: #fff; }

.btn-full { width: 100%; margin-top: 8px; padding: 7px; }

.toolbar-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  font-size: 11px;
}
.toolbar-label input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }

#zoom-display {
  display: inline-block;
  width: 44px;
  text-align: center;
  font-size: 11px;
}

/* ============================================================
   APP LAYOUT
   ============================================================ */

#app {
  position: fixed;
  top: var(--toolbar-h);
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: var(--params-w) 1fr var(--info-w);
  grid-template-rows: 1fr;
}

/* ============================================================
   PARAMS PANEL (left)
   ============================================================ */

#params-panel {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
}
#params-panel::-webkit-scrollbar { width: 4px; }
#params-panel::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

#params-content { padding: 0 0 24px; }

/* Unit toggle */
.unit-toggle-row {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-alt);
}
.unit-toggle {
  display: flex;
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  overflow: hidden;
}
.unit-toggle button {
  border: none;
  border-radius: 0;
  padding: 3px 10px;
  font-size: 11px;
  background: transparent;
  color: var(--text-dim);
}
.unit-toggle button.active {
  background: var(--accent-dim);
  color: var(--text-bright);
  font-weight: bold;
}
.unit-toggle button:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--text);
}

.param-section { margin-bottom: 2px; }

.param-section-title {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px 14px 5px;
  border-top: 1px solid var(--border);
}
.param-section:first-child .param-section-title { border-top: none; }

.param-row {
  display: flex;
  align-items: center;
  padding: 4px 14px;
  gap: 8px;
}

.param-label {
  width: 90px;
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 11px;
}

.param-label-full {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 11px;
  padding: 3px 0;
  cursor: pointer;
}
.param-label-full input { accent-color: var(--accent); cursor: pointer; }

.param-input-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.param-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  color: var(--text-bright);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 6px;
}
.param-input:focus { outline: none; border-color: var(--accent); }
.param-input[type="number"] { -moz-appearance: textfield; }
.param-input[type="number"]::-webkit-inner-spin-button { display: none; }

.param-unit {
  color: var(--text-dim);
  font-size: 10px;
  flex-shrink: 0;
  width: 20px;
}

.param-select {
  flex: 1;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  color: var(--text-bright);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 6px;
}
.param-select:focus { outline: none; border-color: var(--accent); }

.param-hint {
  padding: 0 14px 4px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.5;
}

/* Save as Default button */
.save-default-row {
  padding: 8px 14px 12px;
}

.btn-save-default {
  width: 100%;
  padding: 6px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-bright);
  color: var(--text-dim);
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn-save-default:hover {
  background: var(--bg-hover);
  border-color: var(--accent-dim);
  color: var(--text);
}
.btn-save-default.btn-saved {
  background: #1a3a1a;
  border-color: #3a8a3a;
  color: #6aca6a;
}

/* Custom mount sub-options */
#mount-opts-custom { padding: 0 0 4px; }

/* Motor mount sub-options */
.motor-opts { padding: 0 0 4px; }

.motor-spec-info {
  margin: 2px 14px 6px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text);
  padding: 2px 0;
}
.spec-row.muted { color: var(--text-dim); font-size: 10px; justify-content: center; padding-top: 4px; }

/* ============================================================
   CANVAS
   ============================================================ */

#canvas-container {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
}

#canvas { width: 100%; height: 100%; display: block; }

/* Grid */
.grid-line-major { stroke: #1e2830; stroke-width: 1; }
.grid-line-minor { stroke: #161c22; stroke-width: 0.5; }
.ruler-label { fill: var(--text-dim); font-size: 9px; font-family: 'SF Mono', monospace; }

/* Layers — color-coded for screen view */
#layer-cut       .cnc-shape { fill: none; stroke: var(--cut-color);     stroke-width: 0.3; }
#layer-engrave   .cnc-shape { fill: none; stroke: var(--engrave-color); stroke-width: 0.3; stroke-dasharray: 2,1; }
#layer-reference .cnc-shape { fill: none; stroke: var(--ref-color);     stroke-width: 0.3; stroke-dasharray: 1.5,2; opacity: 0.6; }

/* ============================================================
   INFO PANEL (right)
   ============================================================ */

#info-panel {
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}
#info-panel::-webkit-scrollbar { width: 4px; }
#info-panel::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

#info-panel .param-section-title {
  padding: 10px 14px 6px;
}

#measurements {
  padding: 2px 14px 8px;
}
#measurements .spec-row {
  border-bottom: 1px solid var(--border);
  padding: 5px 0;
}
#measurements .spec-row span:last-child {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.layer-legend {
  padding: 2px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.layer-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
}
.layer-swatch { width: 20px; height: 2px; flex-shrink: 0; }

.export-opts {
  padding: 4px 14px 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#info-panel .btn-full {
  margin: 6px 14px 0;
  width: calc(100% - 28px);
}

/* ============================================================
   AUTH — Navbar & Login Modal  (navbar.js)
   ============================================================ */

#nav-auth {
  display: flex;
  align-items: center;
}

/* Login / Register button (logged-out state) */
.nav-auth-btn {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--text-bright);
  font-weight: bold;
  font-family: inherit;
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.nav-auth-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* User name button (logged-in state) */
.nav-user-wrap { position: relative; }

.nav-user-btn {
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-bright);
  color: var(--text-bright);
  font-family: inherit;
  font-size: 11px;
  padding: 5px 10px 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.nav-user-btn:hover { background: var(--bg-hover); border-color: var(--accent-dim); }

.nav-chevron { font-size: 9px; opacity: 0.6; transition: transform 0.15s; }
.nav-user-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* Dropdown menu */
.nav-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  z-index: 500;
  overflow: hidden;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.dropdown-item:hover { background: var(--bg-hover); color: var(--text-bright); }
.dropdown-item + .dropdown-item { border-top: 1px solid var(--border); }

/* Login modal */
#login-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  padding: 0;
  max-width: 340px;
  width: 92vw;
  color: var(--text);
}
#login-modal::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}

.login-modal-inner {
  padding: 32px 28px 24px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.modal-close:hover { color: var(--text-bright); background: var(--bg-hover); }

.modal-eyebrow {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-bright);
  margin-bottom: 8px;
}

.modal-sub {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 20px;
}

.modal-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 20px;
}

#google-signin-btn {
  text-align: center;
  min-height: 44px;
  margin-bottom: 16px;
}

.modal-legal {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.6;
}
.modal-legal a { color: var(--accent); text-decoration: none; }
.modal-legal a:hover { text-decoration: underline; }

.modal-error {
  font-size: 11px;
  color: var(--danger);
  text-align: center;
  margin-top: 10px;
}