/* Shared base styles for the Maurits-Viool tools site: CSS variables (light/dark),
   and the header/button/modal/toast chrome that used to be duplicated verbatim
   across index.html and every tools/<id>/index.html. Tool-specific structural
   CSS stays in each tool's own <style> block, loaded after this file so it can
   still override anything here (e.g. per-tool .modal-box width). */

:root{
  --bg:#f4f5f7; --panel:#ffffff; --text:#1a1c20; --muted:#6b7280;
  --border:#e2e4e9; --accent:#2563eb; --accent-text:#ffffff;
  --danger:#dc2626; --shadow:0 1px 3px rgba(0,0,0,.12);
  --input-bg:#ffffff;
}
body.dark{
  --bg:#15171b; --panel:#1e2126; --text:#e7e9ec; --muted:#9aa1ab;
  --border:#2c2f36; --accent:#3b82f6; --accent-text:#ffffff;
  --danger:#f87171; --shadow:0 1px 3px rgba(0,0,0,.5);
  --input-bg:#26292f;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  transition:background .2s,color .2s;
}

header{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow); z-index:1000;
}
header h1{font-size:15px; font-weight:600; margin:0 12px 0 0; white-space:nowrap;}

button, .file-btn{
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  padding:6px 12px; border-radius:6px; font-size:13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
button:hover, .file-btn:hover{border-color:var(--accent);}
button:disabled{opacity:.4; cursor:not-allowed;}
button[hidden]{display:none;}
button.primary{background:var(--accent); color:var(--accent-text); border-color:var(--accent);}
button.danger{color:var(--danger); border-color:var(--danger);}
input[type=file]{display:none;}
select{
  background:var(--input-bg); color:var(--text); border:1px solid var(--border);
  padding:6px 8px; border-radius:6px; font-size:13px;
}
.spacer{flex:1;}

.icon-btn{
  background:none; border:none; color:var(--muted); font-size:14px; padding:3px 5px; cursor:pointer; border-radius:4px;
}
.icon-btn:hover{color:var(--text); background:var(--bg);}
a.icon-btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}

#toast{
  position:fixed; bottom:60px; left:50%; transform:translateX(-50%);
  background:#1a1c20; color:#fff; padding:8px 16px; border-radius:6px; font-size:13px;
  z-index:6000; opacity:0; transition:opacity .3s; pointer-events:none;
}
#toast.show{opacity:1;}

.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:7000;
  display:none; align-items:center; justify-content:center;
}
.modal-overlay.show{display:flex;}
.modal-box{
  background:var(--panel); color:var(--text); border-radius:10px; width:min(480px, 90vw);
  max-height:80vh; display:flex; flex-direction:column; box-shadow:0 4px 24px rgba(0,0,0,.3);
}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border);}
.modal-head h3{margin:0; font-size:15px;}
.modal-actions{display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.modal-actions button{font-size:12px; padding:4px 10px;}
.modal-list{overflow-y:auto; padding:8px 16px; flex:1;}
.modal-footer{padding:12px 16px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}

/* ---------- project management (shared/tools.js) ---------- */
.project-row{
  display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--border);
  cursor:pointer;
}
.project-row:last-child{border-bottom:none;}
.project-row:hover{background:var(--bg);}
.project-row.active{background:var(--bg);}
.project-row-main{flex:1; min-width:0;}
.project-row-name{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.project-row-meta{font-size:11.5px; color:var(--muted); margin-top:2px;}
.project-row-analytics{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted); white-space:nowrap;}
.project-row-actions{display:flex; gap:2px; flex-shrink:0;}
.project-form-field{display:flex; flex-direction:column; gap:4px; padding:0 16px 12px;}
.project-form-field label{font-size:12.5px; color:var(--muted);}
.project-form-field input[type=text]{
  background:var(--input-bg); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:7px 9px; font-size:13.5px;
}
.project-consent{padding:0 16px 14px; font-size:12.5px; color:var(--muted); line-height:1.5;}
.project-consent strong{color:var(--text);}
.project-consent-check{display:flex; align-items:flex-start; gap:8px; margin-top:10px; font-size:13px; color:var(--text); cursor:pointer;}
.project-consent-check input{margin-top:2px;}
.project-consent-hint{font-size:11.5px; color:var(--muted); margin:4px 0 0 22px;}