/* =====================================================
   SLAB OVERLAY VISUALISER v2 — Light theme
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --bg:        #f5f4f2;
  --bg2:       #ffffff;
  --bg3:       #f0eeeb;
  --bg4:       #e8e6e2;
  --border:    #dddbd7;
  --border2:   #c8c5c0;
  --text:      #2a2724;
  --muted:     #6b6560;
  --dim:       #9c9894;
  --accent:    #4a7cf0;
  --accent-bg: rgba(74,124,240,0.08);
  --accent-brd:rgba(74,124,240,0.3);
  --green:     #2e9e5e;
  --red:       #d94040;
  --amber:     #c07a10;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 2px 8px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --r:         5px;
  --r-lg:      8px;
  --font:      'Inter', system-ui, sans-serif;
}

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

/* ── TOPBAR ── */
.sov-topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 46px; padding: 0 16px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  gap: 10px; flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.sov-topbar-left  { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.sov-topbar-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; flex-wrap: wrap; }
.sov-logo-icon { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.sov-logo { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.sov-breadcrumb {
  font-size: 12px; color: var(--muted); border-left: 1px solid var(--border);
  padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}

/* ── BUTTONS ── */
.sov-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
  border-radius: var(--r); font-family: var(--font); font-size: 12px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--border2); background: var(--bg2); color: var(--text);
  transition: all .12s; white-space: nowrap;
}
.sov-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.sov-btn:hover { background: var(--bg3); border-color: var(--border2); }
.sov-btn-accent  { background: var(--accent); border-color: var(--accent); color: #fff; }
.sov-btn-accent:hover { background: #3a6adf; border-color: #3a6adf; }
.sov-btn-danger  { background: var(--red); border-color: var(--red); color: #fff; }
.sov-btn-danger:hover { background: #b83030; }
.sov-btn-ghost   { background: transparent; border-color: var(--border); color: var(--muted); }
.sov-btn-ghost:hover { background: var(--bg3); color: var(--text); }
.sov-btn-full    { width: 100%; justify-content: center; }
.sov-icon-btn    { background: none; border: none; cursor: pointer; color: var(--dim); font-size: 14px; line-height: 1; padding: 2px 5px; border-radius: 3px; }
.sov-icon-btn:hover { color: var(--red); }

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

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

/* ── SECTIONS ── */
.sov-section { border-bottom: 1px solid var(--border); }
.sov-section-hdr {
  display: flex; align-items: center; gap: 7px; padding: 9px 13px;
  background: var(--bg3); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  user-select: none;
}
.sov-section-hdr svg { width: 13px; height: 13px; flex-shrink: 0; }
.sov-section-body { padding: 12px; display: flex; flex-direction: column; gap: 9px; }

/* ── HINTS ── */
.sov-hint { font-size: 11px; color: var(--dim); line-height: 1.5; }
.sov-hint-tip { display: flex; align-items: flex-start; gap: 5px; background: var(--accent-bg); border: 1px solid var(--accent-brd); border-radius: var(--r); padding: 7px 9px; color: var(--accent); }
.sov-hint-tip svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }

/* ── DROP ZONES ── */
.sov-dropzone {
  border: 1.5px dashed var(--border2); border-radius: var(--r);
  padding: 16px 12px; text-align: center; color: var(--muted);
  font-size: 12px; cursor: pointer; position: relative;
  transition: border-color .15s, background .15s; background: var(--bg3);
  display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1.5;
}
.sov-dropzone svg { width: 30px; height: 30px; opacity: .35; color: var(--accent); }
.sov-dropzone u { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-brd); }
.sov-dropzone small { color: var(--dim); font-size: 10px; }
.sov-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.sov-dropzone:hover, .sov-dropzone.over { border-color: var(--accent); background: var(--accent-bg); }
.sov-dropzone-sm { padding: 12px; }
.sov-dropzone-sm svg { width: 22px; height: 22px; }

/* ── CUT THUMBNAILS ── */
.sov-cut-thumb {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r);
  padding: 5px 8px; cursor: pointer; transition: border-color .12s;
}
.sov-cut-thumb:hover { border-color: var(--border2); }
.sov-cut-thumb.active { border-color: var(--accent); background: var(--accent-bg); }
.sov-cut-thumb img { width: 42px; height: 28px; object-fit: cover; border-radius: 3px; border: 1px solid var(--border); flex-shrink: 0; }
.sov-cut-thumb-info { flex: 1; min-width: 0; }
.sov-cut-thumb-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.sov-cut-thumb-size { font-size: 10px; color: var(--dim); }
.sov-cut-thumb-del  { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 2px; }
.sov-cut-thumb-del:hover { color: var(--red); }

/* ── SLAB ZONES ── */
.sov-field-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sov-field-row label { font-size: 12px; color: var(--muted); }
.sov-stepper { display: flex; align-items: center; gap: 4px; }
.sov-stepper button { width: 24px; height: 24px; border: 1px solid var(--border2); border-radius: 3px; background: var(--bg2); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sov-stepper button:hover { background: var(--bg3); }
.sov-stepper span { font-size: 13px; font-weight: 600; min-width: 18px; text-align: center; }
.sov-zone-row { display: flex; align-items: center; gap: 4px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.sov-zone-row:last-child { border-bottom: none; }
.sov-zone-label { font-size: 11px; color: var(--muted); min-width: 46px; font-weight: 500; }
.sov-zone-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 3px; flex: 1; }
.sov-zone-input { background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-size: 11px; padding: 4px 5px; border-radius: 3px; text-align: center; width: 100%; font-family: monospace; }
.sov-zone-input:focus { outline: none; border-color: var(--accent); }
.sov-zone-col-hdrs { display: grid; grid-template-columns: 46px 1fr 1fr 1fr 1fr; gap: 3px; margin-bottom: 2px; }
.sov-zone-col-hdrs span { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); text-align: center; }
.sov-zone-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── ACTIVE SLAB ── */
.sov-active-slab { display: flex; align-items: center; gap: 9px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r); padding: 7px 9px; }
.sov-active-slab img { width: 48px; height: 36px; object-fit: cover; border-radius: 3px; border: 1px solid var(--border); flex-shrink: 0; }
.sov-active-slab-info { flex: 1; min-width: 0; }
.sov-active-slab-info strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sov-active-slab-info span   { font-size: 10px; color: var(--dim); }
.sov-divider-or { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 11px; }
.sov-divider-or::before, .sov-divider-or::after { content:''; flex:1; height:1px; background: var(--border); }

/* ── CONTROLS ── */
.sov-controls { gap: 8px; }
.sov-ctrl { display: flex; flex-direction: column; gap: 4px; }
.sov-ctrl label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.sov-ctrl label b { font-weight: 600; font-size: 11px; color: var(--text); font-family: monospace; }
.sov-ctrl-toggle { flex-direction: row; align-items: center; }
.sov-ctrl-toggle label { flex: 1; }
.sov-ctrl-divider { height: 1px; background: var(--border); margin: 2px 0; }
.sov-select { background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 12px; padding: 5px 8px; border-radius: var(--r); width: 100%; }
.sov-select:focus { outline: none; border-color: var(--accent); }
.sov-range { width: 100%; accent-color: var(--accent); cursor: pointer; }

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

/* ── CENTRE CANVAS ── */
.sov-centre { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg); }
.sov-canvas-scroll { flex:1; overflow:auto; padding:28px; display:flex; align-items:flex-start; justify-content:flex-start; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.sov-placeholder { flex:1; width:100%; min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:var(--dim); text-align:center; padding:40px; }
.sov-placeholder svg { width:72px; height:72px; opacity:.2; }
.sov-placeholder h3 { font-size:17px; font-weight:600; color:var(--muted); }
.sov-placeholder p { font-size:13px; color:var(--dim); line-height:1.7; }
#sov-canvas { display:block; border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); cursor:crosshair; background:#fff; }
#sov-canvas.dragging { cursor:grabbing; }

.sov-statusbar { display:flex; align-items:center; justify-content:space-between; padding:5px 16px; background:var(--bg2); border-top:1px solid var(--border); font-size:11px; color:var(--dim); flex-shrink:0; }

/* ── MODALS ── */
.sov-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.sov-modal { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); width:440px; max-width:96vw; box-shadow:var(--shadow-lg); }
.sov-modal-lg  { width:620px; }
.sov-modal-xl  { width:860px; max-height:88vh; display:flex; flex-direction:column; }
.sov-modal-sm  { width:340px; }
.sov-modal-hdr { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border); font-size:14px; font-weight:600; flex-shrink:0; }
.sov-modal-hdr span:first-child { white-space:nowrap; }
.sov-modal-x   { background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; padding:2px 4px; margin-left:auto; line-height:1; }
.sov-modal-x:hover { color:var(--text); }
.sov-modal-body { padding:16px; display:flex; flex-direction:column; gap:13px; overflow-y:auto; flex:1; }
.sov-modal-ftr  { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--border); flex-shrink:0; }
.sov-mfield { display:flex; flex-direction:column; gap:5px; }
.sov-mfield label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); }
.sov-minput { background:var(--bg3); border:1px solid var(--border); color:var(--text); font-family:var(--font); font-size:13px; padding:8px 10px; border-radius:var(--r); width:100%; }
.sov-minput:focus { outline:none; border-color:var(--accent); }
.sov-mfield-note p { font-size:12px; color:var(--muted); background:var(--accent-bg); border:1px solid var(--accent-brd); border-radius:var(--r); padding:8px 11px; }

/* Projects table */
.sov-proj-table { width:100%; border-collapse:collapse; font-size:13px; }
.sov-proj-table th { padding:6px 10px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); border-bottom:1px solid var(--border); }
.sov-proj-table td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.sov-proj-table tr:last-child td { border-bottom:none; }
.sov-proj-table tbody tr { cursor:pointer; }
.sov-proj-table tbody tr:hover td { background:var(--bg3); }
.sov-proj-client { font-size:11px; color:var(--muted); }
.sov-proj-material { font-size:13px; font-weight:500; }
.sov-proj-date { font-size:11px; color:var(--dim); font-family:monospace; white-space:nowrap; }
.sov-proj-del { background:none; border:none; color:var(--dim); cursor:pointer; font-size:15px; padding:3px 6px; border-radius:3px; }
.sov-proj-del:hover { color:var(--red); }
.sov-proj-empty { text-align:center; padding:28px; font-size:13px; color:var(--dim); font-style:italic; }
.sov-loading { text-align:center; padding:24px; font-size:13px; color:var(--muted); }

/* ── SLAB LIBRARY ── */
.sov-lib-search-wrap { flex:1; display:flex; align-items:center; gap:6px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:5px 10px; margin:0 4px; }
.sov-lib-search-wrap svg { width:13px; height:13px; color:var(--dim); flex-shrink:0; }
.sov-lib-search-input { background:none; border:none; color:var(--text); font-family:var(--font); font-size:13px; flex:1; outline:none; }
.sov-lib-search-input::placeholder { color:var(--dim); }
.sov-lib-add-form { border-bottom:1px solid var(--border); background:var(--bg3); padding:14px 16px; display:flex; flex-direction:column; gap:12px; flex-shrink:0; }
.sov-lib-add-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sov-lib-add-upload { }
.sov-lib-add-actions { display:flex; justify-content:flex-end; gap:8px; }
.sov-lib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.sov-lib-card { background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.sov-lib-card:hover { border-color:var(--accent); box-shadow:0 2px 10px rgba(74,124,240,.15); }
.sov-lib-card.selected { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.sov-lib-card-img { width:100%; height:90px; object-fit:cover; display:block; background:var(--bg3); }
.sov-lib-card-info { padding:7px 9px; }
.sov-lib-card-name { font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sov-lib-card-meta { font-size:10px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.sov-lib-card-actions { display:flex; justify-content:space-between; align-items:center; padding:5px 9px 7px; }
.sov-lib-use-btn { font-size:11px; padding:3px 10px; }
.sov-lib-del-btn { background:none; border:none; color:var(--dim); cursor:pointer; font-size:12px; padding:2px 5px; }
.sov-lib-del-btn:hover { color:var(--red); }
.sov-lib-empty { grid-column:1/-1; text-align:center; padding:32px; font-size:13px; color:var(--dim); font-style:italic; }

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

/* PRINT */
@media print {
  .sov-left,.sov-topbar,.sov-statusbar,#sov-toasts{display:none!important}
  .sov-centre{overflow:visible}
  .sov-canvas-scroll{padding:0}
  #sov-canvas{border:none;box-shadow:none}
}
@media(max-width:820px){
  .sov-body{flex-direction:column}
  .sov-left{width:100%;max-height:44vh;border-right:none;border-bottom:1px solid var(--border)}
}