/* =====================================================
   CUTLIST OPTIMIZER v2 — Stylesheet
   Dark workshop theme matching the reference UI
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --clo-bg:          #1c1f24;
  --clo-bg2:         #22262c;
  --clo-bg3:         #2a2f38;
  --clo-bg4:         #313843;
  --clo-border:      #353c47;
  --clo-border2:     #424c5a;
  --clo-text:        #d8dde6;
  --clo-text-muted:  #8896a8;
  --clo-text-dim:    #4f5c6e;
  --clo-accent:      #4c8eff;
  --clo-accent-dim:  rgba(76,142,255,0.15);
  --clo-green:       #3db87a;
  --clo-red:         #e05252;
  --clo-amber:       #e0a020;
  --clo-radius:      4px;
  --clo-font:        'Inter', system-ui, sans-serif;
  --clo-mono:        'JetBrains Mono', monospace;
}

/* ── RESET ── */
#clo-app *, #clo-app *::before, #clo-app *::after { box-sizing: border-box; margin: 0; padding: 0; }
#clo-app { font-family: var(--clo-font); font-size: 13px; line-height: 1.4; color: var(--clo-text); background: var(--clo-bg); display: flex; flex-direction: column; height: 100vh; min-height: 500px; overflow: hidden; }

/* ── TOPBAR ── */
.clo-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; height: 42px; background: var(--clo-bg2); border-bottom: 1px solid var(--clo-border); flex-shrink: 0; gap: 10px; }
.clo-topbar-left  { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.clo-topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.clo-logo-icon { width: 20px; height: 20px; color: var(--clo-accent); flex-shrink: 0; }
.clo-logo-text { font-size: 13px; font-weight: 600; color: var(--clo-text); white-space: nowrap; }
.clo-project-title { font-size: 12px; color: var(--clo-text-muted); border-left: 1px solid var(--clo-border); padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }

/* ── TOP BUTTONS ── */
.clo-tbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--clo-radius); font-family: var(--clo-font); font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--clo-border2); background: var(--clo-bg3); color: var(--clo-text); transition: background 0.1s, border-color 0.1s; white-space: nowrap; }
.clo-tbtn svg { width: 13px; height: 13px; flex-shrink: 0; }
.clo-tbtn:hover { background: var(--clo-bg4); border-color: var(--clo-border2); }
.clo-tbtn-primary { background: var(--clo-accent); border-color: var(--clo-accent); color: #fff; }
.clo-tbtn-primary:hover { background: #3a7aee; border-color: #3a7aee; }
.clo-tbtn-danger { background: var(--clo-red); border-color: var(--clo-red); color: #fff; }
.clo-tbtn-danger:hover { background: #c04040; }

/* ── BODY LAYOUT ── */
.clo-body { display: flex; flex: 1; overflow: hidden; }

/* ── LEFT PANEL ── */
.clo-left { width: 310px; flex-shrink: 0; background: var(--clo-bg2); border-right: 1px solid var(--clo-border); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--clo-border) transparent; }

/* ── SECTION (collapsible) ── */
.clo-section { border-bottom: 1px solid var(--clo-border); }
.clo-section-hdr { display: flex; align-items: center; gap: 7px; padding: 8px 12px; cursor: pointer; user-select: none; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--clo-text-muted); background: var(--clo-bg3); }
.clo-section-hdr:hover { color: var(--clo-text); }
.clo-section-hdr svg:first-child { width: 13px; height: 13px; flex-shrink: 0; }
.clo-section-hdr .clo-chevron { margin-left: auto; width: 10px; height: 10px; transition: transform .15s; }
.clo-section.collapsed .clo-section-hdr .clo-chevron { transform: rotate(-90deg); }
.clo-section-body { padding: 0; }
.clo-section.collapsed .clo-section-body { display: none; }

/* ── INLINE TABLES ── */
.clo-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.clo-tbl th { padding: 5px 6px; text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--clo-text-dim); border-bottom: 1px solid var(--clo-border); background: var(--clo-bg3); white-space: nowrap; }
.clo-tbl td { padding: 3px 4px; border-bottom: 1px solid var(--clo-border); vertical-align: middle; }
.clo-tbl tbody tr:last-child td { border-bottom: none; }
.clo-tbl tbody tr:hover td { background: var(--clo-bg3); }
.col-swatch { width: 8px; padding: 0 2px 0 6px !important; }
.col-actions { width: 44px; text-align: right; padding-right: 6px !important; }
.col-grain { width: 22px; text-align: center; }

/* Cell inputs */
.clo-cell-input { background: transparent; border: none; color: var(--clo-text); font-family: var(--clo-mono); font-size: 12px; width: 100%; padding: 2px 3px; border-radius: 2px; }
.clo-cell-input:focus { outline: 1px solid var(--clo-accent); background: var(--clo-bg4); }
.clo-cell-input.w-label { font-family: var(--clo-font); width: 80px; }
.clo-cell-input.w-num   { width: 52px; }
.clo-cell-input.w-qty   { width: 34px; }
.clo-cell-input.w-mat   { width: 70px; font-family: var(--clo-font); }
.clo-cell-input.w-cost  { width: 46px; }

/* Row colour swatch */
.clo-swatch { display: block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Grain toggle in table */
.clo-grain-chk { accent-color: var(--clo-accent); width: 12px; height: 12px; cursor: pointer; }

/* Row action buttons */
.clo-row-del { background: none; border: none; color: var(--clo-text-dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 2px; }
.clo-row-del:hover { color: var(--clo-red); }
.clo-row-ok  { background: none; border: none; color: var(--clo-green); cursor: pointer; font-size: 12px; padding: 2px 3px; }

/* Add row button */
.clo-add-row-btn { display: block; width: 100%; padding: 7px 12px; background: none; border: none; color: var(--clo-text-dim); font-size: 12px; text-align: left; cursor: pointer; border-top: 1px dashed var(--clo-border); }
.clo-add-row-btn:hover { color: var(--clo-accent); background: var(--clo-accent-dim); }

/* ── OPTIONS ── */
.clo-opt-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; gap: 8px; }
.clo-opt-row + .clo-opt-row { border-top: 1px solid var(--clo-border); }
.clo-opt-lbl { font-size: 12px; color: var(--clo-text-muted); flex: 1; }
.clo-opt-input { background: var(--clo-bg3); border: 1px solid var(--clo-border); color: var(--clo-text); font-family: var(--clo-mono); font-size: 12px; padding: 4px 7px; border-radius: var(--clo-radius); width: 60px; text-align: right; }
.clo-opt-input:focus { outline: none; border-color: var(--clo-accent); }
.clo-opt-select { background: var(--clo-bg3); border: 1px solid var(--clo-border); color: var(--clo-text); font-family: var(--clo-font); font-size: 12px; padding: 4px 7px; border-radius: var(--clo-radius); }
.clo-opt-divider { height: 1px; background: var(--clo-border); margin: 4px 0; }

/* ── TOGGLE ── */
.clo-tog { display: inline-flex; cursor: pointer; flex-shrink: 0; }
.clo-tog input { display: none; }
.clo-tog span { display: block; width: 32px; height: 17px; background: var(--clo-bg4); border: 1px solid var(--clo-border2); border-radius: 9px; position: relative; transition: background .15s; }
.clo-tog span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--clo-text-dim); transition: left .15s; }
.clo-tog input:checked + span { background: var(--clo-accent); border-color: var(--clo-accent); }
.clo-tog input:checked + span::after { left: 17px; background: #fff; }

/* ── SLAB UPLOAD ── */
.clo-slab-panel { padding: 10px 12px; border-top: 1px solid var(--clo-border); }
.clo-slab-drop { border: 1px dashed var(--clo-border2); border-radius: var(--clo-radius); padding: 14px 10px; text-align: center; color: var(--clo-text-muted); font-size: 11px; cursor: pointer; position: relative; transition: border-color .15s, background .15s; }
.clo-slab-drop:hover, .clo-slab-drop.drag-over { border-color: var(--clo-accent); background: var(--clo-accent-dim); }
.clo-slab-drop svg { width: 28px; height: 28px; margin-bottom: 6px; opacity: .5; display: block; margin: 0 auto 8px; }
.clo-slab-drop small { color: var(--clo-text-dim); font-size: 10px; }
.clo-slab-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.clo-slab-preview img { width: 100%; border-radius: var(--clo-radius); border: 1px solid var(--clo-border); display: block; max-height: 100px; object-fit: cover; }
.clo-slab-controls { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.clo-slab-controls label { font-size: 11px; color: var(--clo-text-muted); display: flex; align-items: center; gap: 8px; }
.clo-slab-controls input[type=range] { flex: 1; accent-color: var(--clo-accent); }

/* ── CENTRE CANVAS ── */
.clo-centre { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--clo-bg); }

.clo-canvas-toolbar { display: flex; align-items: center; gap: 3px; padding: 5px 10px; background: var(--clo-bg2); border-bottom: 1px solid var(--clo-border); flex-shrink: 0; }
.clo-tool-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: var(--clo-radius); cursor: pointer; color: var(--clo-text-muted); }
.clo-tool-btn svg { width: 14px; height: 14px; }
.clo-tool-btn:hover { background: var(--clo-bg3); border-color: var(--clo-border); color: var(--clo-text); }
.clo-tool-btn.active { background: var(--clo-accent-dim); border-color: var(--clo-accent); color: var(--clo-accent); }
.clo-tool-sep { width: 1px; height: 18px; background: var(--clo-border); margin: 0 4px; }
.clo-zoom-readout { margin-left: auto; font-size: 11px; font-family: var(--clo-mono); color: var(--clo-text-dim); }

.clo-canvas-scroll { flex: 1; overflow: auto; padding: 20px; scrollbar-width: thin; scrollbar-color: var(--clo-border) transparent; }

.clo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 14px; color: var(--clo-text-dim); text-align: center; }
.clo-placeholder svg { width: 64px; height: 64px; opacity: .2; }
.clo-placeholder p { font-size: 13px; color: var(--clo-text-muted); }

/* ── SHEET DIAGRAMS ── */
.clo-sheets-wrap { display: flex; flex-direction: column; gap: 20px; }
.clo-sheet-block { display: inline-flex; flex-direction: column; gap: 0; }

/* Ruler dimensions */
.clo-sheet-outer { position: relative; padding-top: 18px; padding-left: 24px; }
.clo-dim-top { position: absolute; top: 2px; left: 24px; right: 0; text-align: center; font-size: 10px; font-family: var(--clo-mono); color: var(--clo-text-dim); }
.clo-dim-left { position: absolute; top: 18px; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-lr; transform: rotate(180deg); font-size: 10px; font-family: var(--clo-mono); color: var(--clo-text-dim); }
.clo-dim-right { position: absolute; top: 18px; right: -18px; bottom: 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-lr; font-size: 10px; font-family: var(--clo-mono); color: var(--clo-red); }
.clo-sheet-canvas { border: 1px solid var(--clo-border2); display: block; }
.clo-sheet-label { font-size: 11px; color: var(--clo-text-muted); margin-top: 5px; padding-left: 24px; }

/* ── RIGHT STATS ── */
.clo-right { width: 210px; flex-shrink: 0; background: var(--clo-bg2); border-left: 1px solid var(--clo-border); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--clo-border) transparent; display: flex; flex-direction: column; }

.clo-stat-block { border-bottom: 1px solid var(--clo-border); }
.clo-stat-hdr { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--clo-text-muted); background: var(--clo-bg3); cursor: pointer; user-select: none; }
.clo-stat-hdr svg:first-child { width: 12px; height: 12px; flex-shrink: 0; }
.clo-stat-hdr .clo-chevron { margin-left: auto; width: 10px; height: 10px; transition: transform .15s; }
.clo-stat-block.collapsed .clo-stat-hdr .clo-chevron { transform: rotate(-90deg); }
.clo-stat-block.collapsed .clo-stat-body { display: none; }
.clo-stat-hdr-warn { color: var(--clo-amber); }
.clo-stat-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.clo-stat-empty { font-size: 11px; color: var(--clo-text-dim); font-style: italic; }
.clo-stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 11px; }
.clo-stat-row-lbl { color: var(--clo-text-muted); flex: 1; }
.clo-stat-row-val { font-family: var(--clo-mono); font-size: 10px; color: var(--clo-text); text-align: right; flex-shrink: 0; }
.clo-stat-row-val.green { color: var(--clo-green); }
.clo-stat-row-val.amber { color: var(--clo-amber); }
.clo-stat-row-val.red   { color: var(--clo-red); }

/* Sheet nav */
.clo-sheet-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.clo-nav-btn { background: none; border: 1px solid var(--clo-border); color: var(--clo-text-muted); font-size: 14px; line-height: 1; padding: 1px 5px; border-radius: 2px; cursor: pointer; }
.clo-nav-btn:hover { border-color: var(--clo-accent); color: var(--clo-accent); }
#clo-sheet-nav-label { font-size: 10px; font-family: var(--clo-mono); color: var(--clo-text-muted); }

/* Cuts table */
.clo-cuts-tbl { width: 100%; border-collapse: collapse; font-size: 10px; }
.clo-cuts-tbl th { padding: 3px 4px; text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--clo-text-dim); border-bottom: 1px solid var(--clo-border); }
.clo-cuts-tbl td { padding: 3px 4px; border-bottom: 1px solid var(--clo-border); font-family: var(--clo-mono); font-size: 9px; color: var(--clo-text-muted); }
.clo-cuts-tbl tr:last-child td { border-bottom: none; }
.clo-cuts-tbl .cn { color: var(--clo-text-dim); }

/* Edge banding list */
.clo-eb-row { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; border-bottom: 1px solid var(--clo-border); }
.clo-eb-row:last-child { border-bottom: none; }
.clo-eb-row span:last-child { font-family: var(--clo-mono); color: var(--clo-accent); }

/* Warnings list */
.clo-warn-item { font-size: 11px; color: var(--clo-text-muted); padding: 3px 0 3px 12px; position: relative; }
.clo-warn-item::before { content: '!'; position: absolute; left: 0; color: var(--clo-amber); font-weight: 600; }

/* ── MODALS ── */
.clo-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.clo-modal { background: var(--clo-bg2); border: 1px solid var(--clo-border2); border-radius: 6px; width: 400px; max-width: 95vw; box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.clo-modal-lg { width: 560px; }
.clo-modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--clo-border); font-size: 13px; font-weight: 600; }
.clo-modal-close { background: none; border: none; color: var(--clo-text-muted); font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 4px; }
.clo-modal-close:hover { color: var(--clo-text); }
.clo-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; }
.clo-modal-ftr { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--clo-border); }
.clo-mfield { display: flex; flex-direction: column; gap: 5px; }
.clo-mfield label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--clo-text-dim); }
.clo-minput { background: var(--clo-bg3); border: 1px solid var(--clo-border); color: var(--clo-text); font-family: var(--clo-font); font-size: 13px; padding: 8px 10px; border-radius: var(--clo-radius); width: 100%; }
.clo-minput:focus { outline: none; border-color: var(--clo-accent); }

/* Projects list in open modal */
.clo-proj-list { display: flex; flex-direction: column; gap: 0; }
.clo-proj-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--clo-border); cursor: pointer; gap: 10px; }
.clo-proj-item:last-child { border-bottom: none; }
.clo-proj-item:hover { background: var(--clo-bg3); }
.clo-proj-item-info { flex: 1; min-width: 0; }
.clo-proj-client { font-size: 11px; color: var(--clo-text-dim); }
.clo-proj-name { font-size: 13px; color: var(--clo-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clo-proj-date { font-size: 10px; color: var(--clo-text-dim); font-family: var(--clo-mono); }
.clo-proj-actions { display: flex; gap: 4px; flex-shrink: 0; }
.clo-proj-del { background: none; border: none; color: var(--clo-text-dim); cursor: pointer; font-size: 13px; padding: 3px 5px; border-radius: 2px; }
.clo-proj-del:hover { color: var(--clo-red); }
.clo-proj-empty { font-size: 13px; color: var(--clo-text-dim); text-align: center; padding: 24px; font-style: italic; }

/* ── TOAST ── */
#clo-toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 99999; pointer-events: none; }
.clo-toast { background: var(--clo-bg3); border: 1px solid var(--clo-border2); border-radius: 5px; padding: 10px 14px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.4); animation: clo-toast-in .2s ease; min-width: 200px; }
.clo-toast.ok   { border-left: 3px solid var(--clo-green); }
.clo-toast.err  { border-left: 3px solid var(--clo-red); }
.clo-toast.info { border-left: 3px solid var(--clo-accent); }
@keyframes clo-toast-in { from { opacity:0; transform: translateX(12px); } to { opacity:1; transform:none; } }

/* ── PRINT ── */
@media print {
  .clo-topbar, .clo-left, .clo-right, .clo-canvas-toolbar, #clo-toasts { display: none !important; }
  #clo-app { height: auto; }
  .clo-canvas-scroll { overflow: visible; padding: 0; }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .clo-body { flex-direction: column; }
  .clo-left, .clo-right { width: 100%; border-right: none; border-left: none; }
  .clo-left { max-height: 240px; }
  .clo-right { max-height: 200px; }
}