/* App-specific styles layered on top of vendored Bulma (vendor/bulma.min.css).
   Bulma covers typography, tables, buttons, inputs, selects, and tabs; the rules
   below are only the bits Bulma doesn't: page padding, the editor form-row
   layout, the mates-with checkbox grid, color swatches, and a couple of
   table-density tweaks for this editing UI. */

#app {
  padding: 1.5rem;
}

/* Header row: title on the left, action buttons on the right. */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

/* Horizontal "label : control" row used by the editor forms. Named .form-row
   rather than .field to avoid colliding with Bulma's own .field block. */
.form-row {
  margin: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.form-row > label {
  width: 7rem;
  flex: 0 0 auto;
  color: var(--bulma-text-weak);
}

.form-row .input {
  flex: 1;
  max-width: 24rem;
}

/* Keep a cell's action buttons on one line with a little spacing. */
.actions {
  white-space: nowrap;
}

.actions .button:not(:last-child) {
  margin-right: 0.25rem;
}

/* Don't let pin/component dropdowns stretch table columns. */
td .select select {
  max-width: 12rem;
}

/* Visually pair each wire endpoint's component + pin columns: pull the pin tight
   against its component (cols 3 and 7), and open a wider gap before the second
   endpoint's component (col 6). With the length/wire-type columns now sitting
   between the two endpoints (cols 4-5), the To endpoint starts at col 6. Column
   positions are identical across the display, inline-editor, and print rows, so a
   positional rule covers them all. Only applied to the full wire list (the
   embedded list has a single endpoint). */
.wires-table th:nth-child(3),
.wires-table td:nth-child(3),
.wires-table th:nth-child(7),
.wires-table td:nth-child(7) {
  padding-left: 0.15rem;
}

.wires-table th:nth-child(6),
.wires-table td:nth-child(6) {
  padding-left: 1.5rem;
}

/* Subtle highlight for the inline "new" and editing rows. */
.add-row td,
tr:has(select) td {
  background-color: var(--bulma-scheme-main-bis);
}

/* Wire / pin default-color swatch. */
.swatch {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.4rem;
  vertical-align: middle;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 2px;
}

/* Wire-type badge: cross-section text sitting on the wire's color. A subtle
   text shadow keeps the label legible over arbitrary background colors. */
.wire-type-badge {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  color: #fff;
  font-size: 0.75rem;
  white-space: nowrap;
  border: 1px solid rgba(128, 128, 128, 0.5);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
}

/* A wire whose electrical net carries incompatible pin types. It is still saved
   and editable — just flagged so it stands out for correction. */
tr.wire-invalid td {
  background-color: var(--bulma-danger-95, #feecf0);
  color: var(--bulma-danger-dark, #cc0f35);
}

/* Marks a wire endpoint that shares its pin with other wires (double crimped). */
.crimp-tag {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  white-space: nowrap;
}

/* Native color picker, sized to sit inline with small inputs. */
.color-input {
  width: 2.5rem;
  height: 1.75rem;
  padding: 0;
  vertical-align: middle;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 3px;
  background: none;
  cursor: pointer;
}

/* Mates-with checkbox grid. */
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.muted {
  color: var(--bulma-text-weak);
}

/* Expandable component rows showing connected wires. */
.is-clickable {
  cursor: pointer;
}

.caret {
  display: inline-block;
  width: 1rem;
  color: var(--bulma-text-weak);
}

.expand-row > td {
  padding: 0.5rem 0.75rem;
  background: var(--bulma-background, rgba(128, 128, 128, 0.06));
}

/* The embedded wires table inside an expanded component row: drop the section's
   default spacing so it sits snug within the row. */
.expand-row section {
  margin: 0;
}

.expand-row .table {
  margin-bottom: 0;
}

/* A wire's notes render on a sub-row directly below it. A bottom border groups
   the notes with the wire above and separates each wire from the next. */
tr.wire-notes-row > td {
  border-bottom: 2px solid var(--bulma-border, #dbdbdb);
  padding-top: 0;
}

/* Unconnected pins of the expanded component show as faint rows in the embedded
   wire list; clicking one opens an add-wire editor seeded with that pin. */
tr.disconnected-pin-row td {
  color: var(--bulma-text-weak, #7a7a7a);
  font-style: italic;
}

/* ---------- Printable wires view ---------- */

/* The printable wire list is rendered as a full-screen overlay over the editing
   UI; on screen it covers the app, and @media print isolates it from the rest of
   the page so only the wire list reaches the paper. */
.print-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: auto;
  padding: 1.5rem;
  background: var(--bulma-scheme-main, #fff);
}

.print-table th,
.print-table td {
  font-size: 0.85rem;
}

/* The print-only header (project name + date) is hidden on screen — the no-print
   bar already shows that on screen — and revealed for paper. */
.print-only {
  display: none;
}

.print-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.print-header .title {
  margin-bottom: 0;
}

.print-date {
  font-size: 0.85rem;
}

@media print {
  .print-only {
    display: flex;
  }

  /* A4 portrait with comfortable margins; the table is sized to this width. */
  @page {
    size: A4 portrait;
    margin: 12mm;
  }
  /* Hide everything, then reveal just the overlay and lay it out for paper. */
  body * {
    visibility: hidden;
  }
  .print-overlay,
  .print-overlay * {
    visibility: visible;
  }
  .print-overlay {
    position: static;
    padding: 0;
    overflow: visible;
  }
  /* Fill the A4 text width and let long cell text wrap rather than overflow. */
  .print-table {
    width: 100%;
    table-layout: fixed;
  }
  .print-table th,
  .print-table td {
    font-size: 8pt;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Don't split a wire's row from its notes sub-row across a page break. */
  .print-table tr {
    page-break-inside: avoid;
  }
  .no-print {
    display: none !important;
  }
  /* Force the wire-type badge's color background onto the page — browsers drop
     background colors when printing by default. */
  .wire-type-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------- Schematic ---------- */

.schematic-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.schematic-hint {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.schematic-svg {
  width: 100%;
  height: 70vh;
  border: 1px solid var(--bulma-border, #dbdbdb);
  border-radius: 4px;
  background: var(--bulma-scheme-main, #fff);
  cursor: grab;
  user-select: none;
}

.schematic-svg:active {
  cursor: grabbing;
}

.grid-line {
  stroke: var(--bulma-border, #dbdbdb);
  stroke-width: 0.5;
  opacity: 0.5;
}

.schematic-box {
  cursor: move;
}

.schematic-box .box-body {
  fill: var(--bulma-scheme-main-bis, #fafafa);
  stroke: var(--bulma-border, #b5b5b5);
  stroke-width: 1;
}

.schematic-box .box-title {
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 12px;
  font-weight: 600;
  fill: var(--bulma-text-strong, #363636);
}

.pin-dot {
  fill: var(--bulma-text-weak, #7a7a7a);
}

.pin-label {
  font-size: 11px;
  fill: var(--bulma-text, #4a4a4a);
  dominant-baseline: middle;
}

/* Where a pin wires to, drawn just outside the box. Hidden while the box is
   hovered, since the real wires are revealed in its place. */
.conn-label {
  font-size: 10px;
  fill: var(--bulma-text-weak, #7a7a7a);
  dominant-baseline: middle;
}

.schematic-box.is-hovered .conn-label {
  display: none;
}

/* Revealed wires never intercept the pointer, so hovering one can't steal the
   box's hover and flicker the reveal off. */
.wire {
  pointer-events: none;
}

.wire-core,
.wire-outline {
  fill: none;
}

.wire-core {
  stroke-width: 1.5;
}

/* A wider gray underlay so light/dark wires stand out from the background. */
.wire-outline {
  stroke: #888;
  stroke-width: 3.5;
  stroke-opacity: 0.5;
}

/* Hovering a net dims everything not on it. */
.pin.is-dim {
  opacity: 0.25;
}

.pin {
  cursor: pointer;
}

/* ---------- Git integration: header, commit bar, login, resolve modal ---------- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.commit-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.commit-note {
  font-size: 0.85rem;
}

/* Changed-line count next to the Commit button. */
.commit-bar .badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #1f2933;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.identity {
  font-size: 0.9rem;
  color: var(--bulma-text, #4a4a4a);
}

.identity .logout {
  margin-left: 0.5rem;
  cursor: pointer;
}

/* Light/dark mode switch in the header. */
.theme-toggle {
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.login-box {
  max-width: 30rem;
  margin: 4rem auto;
  padding: 1.5rem;
  border: 1px solid var(--bulma-border, #dbdbdb);
  border-radius: 6px;
}

/* Resolve-conflict modal. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-card-box {
  background: var(--bulma-scheme-main, #fff);
  border-radius: 6px;
  padding: 1.25rem;
  width: min(48rem, 92vw);
  max-height: 88vh;
  overflow: auto;
}

.diff-view {
  max-height: 45vh;
  overflow: auto;
  background: #1f2933;
  color: #e4e7eb;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  padding: 0.75rem;
  border-radius: 4px;
  white-space: pre;
}