body { display:flex; flex-direction:column; min-height:100vh; background:var(--bg); }


.tool-tabs {
  display:flex; border-bottom:1px solid var(--border);
  background:var(--surface); flex-shrink:0;
}
.tool-tab {
  padding:0.7rem 1.5rem; font-size:0.85rem; cursor:pointer;
  color:var(--text-dim); border-bottom:2px solid transparent;
  font-family:inherit; background:none; border-top:none;
  border-left:none; border-right:none; transition:all 0.15s;
}
.tool-tab:hover { color:var(--text); }
.tool-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

.tool-content { flex:1; padding:1.2rem 1.5rem; overflow-y:auto; }

/* ── Tablice profila ── */
.profile-layout { display:flex; gap:1rem; flex-wrap:wrap; overflow:visible; }
.profile-controls { flex-shrink:0; width:300px; }
.profile-results { flex-shrink:0; width:400px; overflow:hidden; }
.profile-napr    { flex:1; min-width:280px; display:flex; flex-direction:column; gap:0.6rem; }

.field-group { margin-bottom:1rem; }
.field-label { font-size:0.72rem; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.35rem; display:block; }
.field-select {
  width:100%; background:var(--surface2); border:1px solid var(--border);
  border-radius:4px; padding:0.5rem 0.6rem; color:var(--text);
  font-size:0.88rem; font-family:inherit; outline:none; cursor:pointer;
}

.profile-svg-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:0.75rem; margin-bottom:0.75rem;
  display:flex; align-items:center; justify-content:center;
  min-height:220px;
}

.props-table { width:100%; border-collapse:collapse; }
.props-table th {
  text-align:left; font-size:0.67rem; color:var(--text-dim);
  padding:0.32rem 0.55rem; border-bottom:1px solid var(--border);
  font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
}
.props-table td {
  padding:0.3rem 0.55rem; font-size:0.82rem; border-bottom:1px solid var(--border);
  color:var(--text); white-space:nowrap;
}
.props-table td:last-child { font-family:var(--font-mono); text-align:right; font-size:0.75rem; color:var(--text-dim); }
.props-table td:nth-child(3) { font-family:var(--font-mono); text-align:right; min-width:65px; }
.props-table td:nth-child(2) { font-size:0.74rem; color:var(--text-dim); font-family:var(--font-mono); }
.props-table tr:last-child td { border-bottom:none; }
.props-table tr:hover td { background:var(--surface2); }

/* ── Vlastiti presjek ── */
.custom-layout { display:flex; gap:1rem; flex-wrap:wrap; overflow:visible; }
.custom-controls { flex-shrink:0; width:240px; }
.custom-preview { flex-shrink:0; width:380px; overflow:hidden; display:flex; flex-direction:column; gap:0.75rem; }

.shape-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.4rem; margin-bottom:1rem; }
.shape-btn {
  padding:0.5rem; border:1px solid var(--border); border-radius:6px;
  background:var(--surface); cursor:pointer; font-family:inherit;
  font-size:0.75rem; color:var(--text-dim); text-align:center;
  transition:all 0.15s;
}
.shape-btn:hover { border-color:var(--accent); color:var(--text); }
.shape-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.shape-icon { font-size:1.2rem; display:block; margin-bottom:0.2rem; }

.dim-input-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; }
.dim-label { font-size:0.78rem; color:var(--text-dim); min-width:80px; white-space:nowrap; }
.dim-input {
  flex:1; min-width:0; background:var(--surface2); border:1px solid var(--border);
  border-radius:4px; padding:0.35rem 0.5rem; color:var(--text);
  font-size:0.88rem; font-family:var(--font-mono); outline:none;
  transition:border-color 0.15s;
}
.dim-input:focus { border-color:var(--accent); }
.dim-unit { font-size:0.75rem; color:var(--text-dim); width:28px; }

.svg-preview {
  background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:1rem;
  display:flex; align-items:center; justify-content:center;
  min-height:200px;
}

/* ── Mohr ── */
.mohr-layout { display:flex; gap:1.5rem; flex-wrap:wrap; }
.mohr-inputs { flex-shrink:0; width:240px; }
.mohr-diagram { flex:1; min-width:300px; }

.mohr-input-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; }
.mohr-lbl { font-size:0.85rem; color:var(--text); min-width:60px; }
.mohr-inp {
  flex:1; background:var(--surface2); border:1px solid var(--border);
  border-radius:4px; padding:0.4rem 0.6rem; color:var(--text);
  font-size:0.9rem; font-family:var(--font-mono); outline:none;
}
.mohr-inp:focus { border-color:var(--accent); }
.mohr-unit { font-size:0.75rem; color:var(--text-dim); }

.mohr-results {
  background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:1rem; margin-top:1rem;
}
.mohr-res-row { display:flex; justify-content:space-between; padding:0.3rem 0; border-bottom:1px solid var(--border); font-size:0.88rem; }
.mohr-res-row:last-child { border-bottom:none; }
.mohr-res-label { color:var(--text-dim); }
.mohr-res-val { font-family:var(--font-mono); color:var(--text); font-weight:600; }

.mohr-svg-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:0.5rem;
}

/* ── Naprezanja ── */
.napr-layout { display:flex; gap:1.5rem; flex-wrap:wrap; }
.napr-ctrl { flex-shrink:0; width:240px; }
.napr-canvas { flex:1; min-width:300px; }
.napr-mode-row { display:flex; gap:0.5rem; margin-bottom:1rem; }
.napr-btn {
  flex:1; padding:0.45rem 0; border:1px solid var(--border); border-radius:5px;
  background:var(--surface); cursor:pointer; font-family:inherit;
  font-size:0.82rem; color:var(--text-dim); text-align:center;
  transition:all 0.15s;
}
.napr-btn:hover { border-color:var(--accent); color:var(--text); }
.napr-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.napr-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.55rem; }
.napr-lbl { font-size:0.8rem; color:var(--text-dim); min-width:72px; white-space:nowrap; }
.napr-inp {
  flex:1; background:var(--surface2); border:1px solid var(--border);
  border-radius:4px; padding:0.35rem 0.5rem; color:var(--text);
  font-size:0.88rem; font-family:var(--font-mono); outline:none;
  transition:border-color 0.15s;
}
.napr-inp:focus { border-color:var(--accent); }
.napr-unit { font-size:0.75rem; color:var(--text-dim); width:32px; }
.napr-vals {
  margin-top:0.75rem; padding:0.5rem 0.75rem;
  background:var(--surface); border:1px solid var(--border); border-radius:5px;
  font-size:0.85rem; color:var(--text);
}
.napr-svg-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:0.5rem; overflow:hidden;
}

/* ── Responsive ── */

/* Srednji ekrani: σ i τ paneli idu u novi red (ispod controls+results) */
@media (max-width: 1300px) {
  .profile-napr { flex: 1 1 calc(50% - 0.5rem); min-width: 260px; }
}

/* Tableti: sve se slažu vertikalno */
@media (max-width: 820px) {
  .tool-content  { padding: 0.75rem; }
  .profile-controls { width: 100%; max-width: 100%; }
  .profile-results  { width: 100%; max-width: 100%; }
  .profile-napr     { flex: 0 0 100%; min-width: 0; width: 100%; }
  .custom-controls  { width: 100%; }
  .custom-preview   { width: 100%; max-width: 100%; }
  .napr-svg-wrap svg { height: auto; min-height: 280px; }
}

/* Mobi: smanji padding tabova */
@media (max-width: 520px) {
  .tool-tab { padding: 0.6rem 0.9rem; font-size: 0.8rem; }
  .profile-controls { width: 100%; }
  .profile-svg-wrap { min-height: 180px; }
}

/* Mohr — već ima flex-wrap:wrap, samo smanjiti min-width na mobi */
@media (max-width: 600px) {
  .mohr-inputs { width: 100%; }
  .mohr-diagram { min-width: 0; width: 100%; }
}

/* < 425px: SVG skice skalirane na šir. ekrana, fonti uvećani u JS (mFs) */
@media (max-width: 425px) {
  .napr-svg-wrap {
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
  .napr-svg-wrap svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .mohr-svg-wrap svg {
    max-width: 100% !important;
  }
}