/* Custom properties for scrollbars and themes */
:root {
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-track: #f8fafc;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  color-scheme: light dark;
}

.dark {
  --scrollbar-thumb: #334155;
  --scrollbar-track: #0f172a;
}

body {
  font-family: var(--font-sans);
}

/* Precise vertical text alignment and styling */
.font-mono {
  font-family: var(--font-mono);
}

/* Custom Scrollbars applied globally to overflow containers */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dark ::webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* For modern browsers supporting standard scrollbar control */
@supports (scrollbar-color: auto) {
  * {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
  }
}

/* SVG Shape Visualizer styling */
.shape-svg {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shape-svg path,
.shape-svg line,
.shape-svg polygon {
  transition: stroke 0.25s ease, stroke-width 0.25s ease, fill 0.25s ease, filter 0.25s ease;
}

/* Dimension group formatting */
.group-dim {
  transition: opacity 0.25s ease;
}

.group-dim line,
.group-dim path {
  stroke-width: 1.5px;
}

.group-dim text {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  transition: fill 0.2s ease, font-weight 0.2s ease;
}

/* Active Highlight Class when form fields are focused */
.dim-highlight line,
.dim-highlight path {
  stroke: #0e8ce2 !important; /* brand-500 */
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 2px 4px rgba(14, 140, 226, 0.4));
}

.dark .dim-highlight line,
.dark .dim-highlight path {
  stroke: #00e5ff !important; /* cyan-400 */
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.6));
}

.dim-highlight text {
  fill: #0e8ce2 !important;
  font-weight: 800 !important;
}

.dark .dim-highlight text {
  fill: #00e5ff !important;
  font-weight: 800 !important;
}

/* Shape visual select grid button animations */
.shape-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.shape-btn:hover {
  transform: translateY(-2px);
}

.shape-btn-active {
  border-color: #0e8ce2 !important;
  background-color: #f0f7ff !important;
  box-shadow: 0 4px 6px -1px rgba(14, 140, 226, 0.1), 0 2px 4px -1px rgba(14, 140, 226, 0.06);
}

.dark .shape-btn-active {
  border-color: #00e5ff !important;
  background-color: rgba(14, 140, 226, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 229, 255, 0.1);
}

/* Auth overlay transition backdrop */
#auth-overlay {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Spreadsheet-style table inputs for clean corporate layout */
input.table-input {
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

input.table-input:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

.dark input.table-input:hover {
  background-color: #1e293b;
  border-color: #334155;
}

input.table-input:focus {
  background-color: #ffffff;
  border-color: #0e8ce2;
  box-shadow: 0 0 0 2.5px rgba(14, 140, 226, 0.18);
}

.dark input.table-input:focus {
  background-color: #0f172a;
  border-color: #00e5ff;
  box-shadow: 0 0 0 2.5px rgba(0, 229, 255, 0.18);
}