/*
 * LV System Designer — ProDesign-style workspace styling.
 * The tool is a self-contained LIGHT "application window" (ribbon + white CAD
 * canvas + docked Properties + status bar) embedded in the marketing page. The
 * app window overrides the site's CSS custom properties to a light Windows
 * palette so the shared cc- form primitives (kit.js) render as a light property
 * panel, regardless of the site's dark/light/slate theme. The schematic canvas
 * is always a white CAD sheet (colours are baked into canvas.js).
 */

/* ---------- the application window ---------- */
.lv-app {
  /* light "Windows application" palette, scoped so kit.js cc- controls go light */
  --bg-surface: #ffffff; --bg-elevated: #f1f4f9; --bg-primary: #ffffff;
  --text-primary: #202836; --text-muted: #6a7482; --border: #d3dae4;
  --accent: #1f6feb; --accent-hover: #1a5fd0; --accent-warm: #b06a00;
  --success: #1a7f37; --danger: #d1242f; --radius: 5px; --transition: all .12s ease;

  display: flex; flex-direction: column;
  height: 80vh; min-height: 560px;
  background: #eef1f6;
  border: 1px solid #cdd5e0;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  color: #202836;
  font-size: 13px;
  margin-bottom: 1rem;
}
.lv-app.lv-full { position: fixed; inset: 0; z-index: 1200; height: auto; border-radius: 0; margin: 0; }

/* ---------- title / tab bar ---------- */
.lv-titlebar {
  display: flex; align-items: stretch; gap: 0;
  background: linear-gradient(#eef1f6, #e6eaf1);
  border-bottom: 1px solid #cdd5e0;
  padding-left: 12px;
  min-height: 38px;
}
.lv-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; color: #2b3446; padding-right: 16px; letter-spacing: 0.01em; }
.lv-title::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: #1f6feb; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #1f6feb; }
.lv-tabs { display: flex; align-items: flex-end; gap: 2px; flex: 1 1 auto; }
.lv-tab { appearance: none; border: 0; background: transparent; font: inherit; font-size: 12.5px; color: #4a5566; padding: 9px 16px 8px; cursor: pointer; border-bottom: 2px solid transparent; }
.lv-tab:hover { color: #1f6feb; }
.lv-tab.is-active { color: #14213a; font-weight: 600; background: #f7f9fc; border-bottom-color: #1f6feb; }
.lv-winbtns { display: flex; align-items: center; padding-right: 8px; }
.lv-winbtn { appearance: none; border: 1px solid #cdd5e0; background: #fff; color: #4a5566; width: 28px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.lv-winbtn:hover { border-color: #1f6feb; color: #1f6feb; }

/* ---------- Diagram / Schedule view toggle ---------- */
.lv-view { display: flex; align-items: center; align-self: center; margin: 0 8px; border: 1px solid #cdd5e0; border-radius: 6px; overflow: hidden; background: #fff; }
.lv-viewbtn { appearance: none; border: 0; background: #fff; font: inherit; font-size: 12px; color: #4a5566; padding: 5px 13px; cursor: pointer; }
.lv-viewbtn + .lv-viewbtn { border-left: 1px solid #cdd5e0; }
.lv-viewbtn:hover:not(.is-active) { color: #1f6feb; }
.lv-viewbtn.is-active { background: #1f6feb; color: #fff; }

/* ---------- drill-down breadcrumb (overlay on the canvas) ---------- */
.lv-crumbs { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; align-items: center; gap: 1px; background: rgba(255,255,255,0.93); border: 1px solid #d3dae4; border-radius: 7px; padding: 3px 6px; box-shadow: 0 2px 8px rgba(20,33,48,0.10); }
.lv-crumbs[hidden] { display: none; }
.lv-crumb { appearance: none; border: 0; background: transparent; font: inherit; font-size: 12px; color: #1f6feb; padding: 2px 7px; border-radius: 4px; cursor: pointer; }
.lv-crumb:hover { background: #eef4ff; }
.lv-crumb.is-active { color: #202836; font-weight: 700; cursor: default; }
.lv-crumb-sep { color: #9aa5b3; font-size: 11px; padding: 0 1px; }

/* ---------- "Other calculators" dropdown (below the app window; site-themed) ---------- */
.lv-others { max-width: 1000px; margin: 0 auto 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); }
.lv-others > summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 600; font-size: 0.92rem; color: var(--text-primary); display: flex; align-items: baseline; gap: 0.6rem; list-style: none; }
.lv-others > summary::-webkit-details-marker { display: none; }
.lv-others > summary::before { content: "\25B8"; color: var(--accent); display: inline-block; transition: transform .15s ease; }
.lv-others[open] > summary::before { transform: rotate(90deg); }
.lv-others__hint { font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }
.lv-others__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.6rem; padding: 0 1rem 1rem; }
.lv-others__item { display: flex; flex-direction: column; gap: 2px; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); text-decoration: none; color: var(--text-primary); transition: var(--transition); }
.lv-others__item:hover { border-color: var(--accent); }
.lv-others__item strong { font-size: 0.9rem; }
.lv-others__item span { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- schedule (data-entry) grid ---------- */
.lv-schedule-view { flex: 1 1 auto; min-width: 0; background: #fff; overflow: auto; }
.lv-schedule-view[hidden] { display: none; }
.lv-grid-scroll { overflow-x: auto; }
.lv-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.lv-grid th, .lv-grid td { border-bottom: 1px solid #edf1f6; padding: 3px 8px; text-align: left; white-space: nowrap; }
.lv-grid thead th { position: sticky; top: 0; background: #f4f6f9; color: #5d6b7a; font-weight: 700; border-bottom: 2px solid #dbe2ec; z-index: 1; }
.lv-grid td.num, .lv-grid th:nth-child(n+7) { text-align: right; font-variant-numeric: tabular-nums; }
.lv-grid__board td { background: #eef3fb; font-weight: 700; color: #26406e; border-bottom: 1px solid #cfdaee; }
.lv-grid__row { cursor: pointer; }
.lv-grid__row:hover td { background: #f7faff; }
.lv-grid__row.is-sel td { background: #e8f0fe; }
.lv-grid input, .lv-grid select { width: 100%; min-width: 42px; padding: 2px 4px; font-size: 12px; border: 1px solid #d3dae4; border-radius: 3px; background: #fff; color: #202836; }
.lv-grid .lv-inline { gap: 4px; }
.lv-grid .lv-inline input { width: 3rem; min-width: 3rem; }
.lv-grid .cc-check { gap: 0; }
.lv-grid-empty { padding: 18px; color: #6a7482; font-size: 13px; }

/* ---------- ribbon ---------- */
.lv-ribbon { background: #f7f9fc; border-bottom: 1px solid #d3dae4; padding: 6px 8px 4px; }
.lv-ribbon-page { display: flex; gap: 0; align-items: stretch; flex-wrap: wrap; }
.lv-ribbon-page[hidden] { display: none; }
.lv-rgroup { display: flex; flex-direction: column; align-items: center; padding: 0 10px; border-right: 1px solid #e2e7ef; }
.lv-rgroup:last-child { border-right: 0; }
.lv-rbtns { display: flex; gap: 4px; flex: 1 1 auto; align-items: center; flex-wrap: wrap; justify-content: center; }
.lv-rlabel { font-size: 10px; color: #8a94a3; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.lv-rbtn { appearance: none; font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid #cfd6e1; border-radius: 4px; background: #fff; color: #2a3444; cursor: pointer; transition: all .12s ease; white-space: nowrap; }
.lv-rbtn:hover:not(:disabled) { border-color: #1f6feb; color: #1f6feb; background: #f2f7ff; }
.lv-rbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.lv-rbtn.is-active { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.lv-rbtn--primary { background: #1f6feb; border-color: #1f6feb; color: #fff; font-weight: 600; padding: 5px 16px; }
.lv-rbtn--primary:hover:not(:disabled) { background: #1a5fd0; border-color: #1a5fd0; color: #fff; }
.lv-rbtn--danger:hover:not(:disabled) { border-color: #d1242f; color: #d1242f; background: #fff5f5; }

/* ---------- body: canvas + docked properties ---------- */
.lv-body { flex: 1 1 auto; display: flex; min-height: 0; }
.lv-canvas-wrap { flex: 1 1 auto; min-width: 0; background: #fff; position: relative; }
#lv-svg { display: block; width: 100%; height: 100%; touch-action: none; background: #fff; }
.lv-dock { width: 310px; flex: 0 0 310px; background: #fbfcfe; border-left: 1px solid #dfe4ec; overflow-y: auto; }
.lv-dock__head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6a7482; padding: 8px 12px; border-bottom: 1px solid #e6eaf1; background: #f1f4f9; position: sticky; top: 0; }
.lv-props { padding: 10px 12px; }
.lv-props__empty { color: #6a7482; font-size: 12.5px; line-height: 1.5; padding: 6px 2px; }
.lv-props h3 { font-size: 13px; margin: 0 0 8px; color: #14213a; }
.lv-props h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #1f6feb; margin: 14px 0 6px; }
.lv-props .cc-grid { grid-template-columns: 1fr; gap: 7px; }
.lv-props .cc-field { font-size: 12px; }
.lv-props .cc-field input, .lv-props .cc-field select { padding: 3px 5px; font-size: 12px; border: 1px solid #cfd6e1; border-radius: 4px; background: #fff; color: #202836; }
.lv-inline { display: flex; gap: 6px; align-items: center; }
.lv-inline input[type="text"] { width: 4rem; }
.lv-checks { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.lv-check { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: 11.5px; }

/* ---------- status / issues bar ---------- */
.lv-statusbar { display: flex; align-items: center; gap: 10px; background: #eef1f6; border-top: 1px solid #d3dae4; padding: 5px 10px; min-height: 34px; }
.lv-issuecount { flex: none; background: #d1242f; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lv-issuecount:empty { display: none; }
.lv-issues { flex: 1 1 auto; display: flex; gap: 5px; overflow-x: auto; align-items: center; }
.lv-issues::-webkit-scrollbar { height: 6px; }
.lv-noissues { color: #1a7f37; font-size: 12px; }
.lv-issue { appearance: none; font: inherit; font-size: 11.5px; white-space: nowrap; padding: 3px 9px; border-radius: 11px; border: 1px solid transparent; cursor: default; }
.lv-issue--fail { background: #fdecec; color: #b3241d; border-color: #f3c9c6; }
.lv-issue--warn { background: #fff6e6; color: #8a5a00; border-color: #f0dca8; }
.lv-issue--nav { cursor: pointer; }
.lv-issue--nav:hover { filter: brightness(0.96); box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.25); }
.lv-status { color: #4a5566; font-size: 12px; white-space: nowrap; }
.lv-statusbar .lv-rbtn--primary { padding: 5px 18px; }

/* ---------- reports area (below the app window — themed by the site) ---------- */
.lv-reports { max-width: 1000px; margin: 0 auto; }
.lv-reports .cc-card { margin-bottom: 0.9rem; }
.lv-hint { color: var(--text-muted); font-size: 0.8rem; margin: 0.5rem 0.1rem 1rem; }

@media (max-width: 860px) {
  .lv-app { height: auto; }
  .lv-body { flex-direction: column; }
  .lv-dock { width: auto; flex: none; border-left: 0; border-top: 1px solid #dfe4ec; max-height: 320px; }
  .lv-canvas-wrap { height: 52vh; }
}