/* ── PONUDA PAGE ────────────────────────────────────────── */

.pon-body { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }

/* Reuse sidebar */
.dash-sidebar { background:var(--white); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:24px 14px; gap:28px; height:100vh; overflow-y:auto; position:sticky; top:0; }
.dash-logo { display:flex; align-items:center; gap:9px; text-decoration:none; padding:0 6px; flex-shrink:0; }
.dash-nav  { display:flex; flex-direction:column; gap:2px; flex:1; }
.dn-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius); text-decoration:none; color:var(--ink-soft); font-size:13.5px; font-weight:500; transition:all 0.15s; position:relative; }
.dn-item:hover { background:var(--cream); color:var(--ink); }
.dn-item.active { background:var(--amber-light); color:var(--amber-dark); }
.dn-item.active::before { content:''; position:absolute; left:0; top:15%; bottom:15%; width:3px; background:var(--amber); border-radius:0 3px 3px 0; }
.dn-icon { font-size:15px; width:18px; text-align:center; flex-shrink:0; }
.dn-badge { margin-left:auto; background:var(--amber); color:white; font-size:10px; font-weight:700; font-family:var(--font-mono); padding:1px 7px; border-radius:100px; }
.dash-sidebar__bottom { border-top:1px solid var(--border); padding-top:14px; }
.dash-profile-link { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius); text-decoration:none; transition:background 0.15s; }
.dash-profile-link:hover { background:var(--cream); }
.dp-avatar { width:32px; height:32px; border-radius:8px; background:var(--amber-light); border:1.5px solid var(--amber); color:var(--amber-dark); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dp-name { font-size:13px; font-weight:600; color:var(--ink); }
.dp-role { font-size:11px; color:var(--ink-muted); font-family:var(--font-mono); }
.dp-status { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); margin-left:auto; flex-shrink:0; }

.pon-main { padding:28px 32px 60px; display:flex; flex-direction:column; gap:20px; overflow-y:auto; }

.pon-header { display:flex; align-items:flex-start; justify-content:space-between; }
.pon-title  { font-family:var(--font-display); font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-0.5px; }
.pon-sub    { font-size:13px; margin-top:2px; }

/* Tabs */
.pon-tabs { display:flex; gap:2px; background:var(--cream-dark); border-radius:var(--radius); padding:3px; align-self:flex-start; }
.pon-tab { background:none; border:none; border-radius:7px; padding:7px 16px; font-size:13.5px; font-family:var(--font-body); font-weight:500; color:var(--ink-soft); cursor:pointer; transition:all 0.15s; }
.pon-tab.active { background:white; color:var(--ink); box-shadow:var(--shadow-sm); }

.pon-content { display:none; }
.pon-content.active { display:block; }

/* ── FORM LAYOUT ──────────────────────────── */
.pon-form-layout { display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start; }

.pon-builder { display:flex; flex-direction:column; gap:20px; }

.pb-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}

.pb-section-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Stavke */
.stavke-header {
  display: grid;
  grid-template-columns: 2fr 60px 80px 90px 90px 32px;
  gap: 8px;
  font-size: 11px; font-family: var(--font-mono); text-transform: uppercase;
  color: var(--ink-muted); letter-spacing: 0.06em;
  padding: 0 6px;
}

.stavka-row {
  display: grid;
  grid-template-columns: 2fr 60px 80px 90px 90px 32px;
  gap: 8px; align-items: center;
  animation: stavkaIn 0.2s ease;
}

@keyframes stavkaIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }

.stavka-row input, .stavka-row select {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 10px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink); outline: none; width: 100%;
  transition: border-color 0.2s;
}
.stavka-row input:focus, .stavka-row select:focus { border-color: var(--amber); }

.stavka-total {
  font-family: var(--font-mono); font-size: 13px;
  font-weight: 700; color: var(--ink); text-align: right;
}

.stavka-del {
  background: none; border: none; cursor: pointer;
  color: var(--ink-muted); font-size: 16px; padding: 4px;
  border-radius: 6px; transition: all 0.15s;
}
.stavka-del:hover { background: var(--red-light); color: var(--red); }

.add-stavka-btn { align-self: flex-start; }

/* Totals */
.pon-totals {
  display: flex; flex-direction: column; gap: 6px;
  align-self: flex-end; min-width: 240px;
  padding: 14px 16px;
  background: var(--cream); border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.pt-row { display:flex; justify-content:space-between; font-size:13px; }
.pt-row.total { font-weight:800; font-size:16px; font-family:var(--font-display); padding-top:8px; border-top:2px solid var(--ink); margin-top:4px; }
.pt-row-label { color:var(--ink-soft); }
.pt-row-val   { font-family:var(--font-mono); font-weight:600; color:var(--ink); }
.pt-row.total .pt-row-val { color:var(--amber); font-size:20px; }

.pon-actions { display:flex; gap:10px; justify-content:flex-end; padding-top:4px; }

/* ── MINI PREVIEW ─────────────────────────── */
.pon-mini-preview {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky; top: 20px;
}

.pmp-title {
  font-size: 12px; font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-muted); padding: 12px 16px;
  background: var(--cream); border-bottom: 1px solid var(--border);
}

.pmp-content { padding: 16px; font-size: 12px; color: var(--ink-soft); line-height: 1.7; }
.pmp-content strong { color: var(--ink); }
.pmp-section { margin-bottom: 14px; }
.pmp-label { font-size:10px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-muted); margin-bottom:4px; }

/* ── MOJE PONUDE ──────────────────────────── */
.moje-filters { margin-bottom: 16px; }
.mf-tabs { display:flex; gap:4px; }
.mf-tab { background:none; border:1.5px solid var(--border); border-radius:100px; padding:6px 14px; font-size:12.5px; font-family:var(--font-body); font-weight:500; color:var(--ink-soft); cursor:pointer; transition:all 0.15s; }
.mf-tab:hover { border-color:var(--amber); color:var(--amber); }
.mf-tab.active { background:var(--amber-light); border-color:var(--amber); color:var(--amber-dark); }

.moje-ponuda-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
  margin-bottom: 10px; transition: all 0.18s;
  cursor: pointer;
}
.moje-ponuda-card:hover { border-color: var(--amber); box-shadow: var(--shadow-sm); }

.mp-info {}
.mp-naziv { font-weight: 700; font-size: 15px; color: var(--ink); }
.mp-klijent { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.mp-meta { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.mp-meta-item { font-size:12px; color:var(--ink-muted); font-family:var(--font-mono); }

.mp-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.mp-iznos { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--amber); letter-spacing:-0.5px; }
.mp-status { font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px; font-family:var(--font-mono); }

/* ── PONUDA PREVIEW DOC ───────────────────── */
.pon-preview-actions { display:flex; gap:10px; justify-content:flex-end; margin-bottom:20px; }

.pon-preview-doc {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px 52px;
  max-width: 780px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}

.ppd-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:36px; padding-bottom:24px; border-bottom:2px solid var(--ink); }
.ppd-logo { font-family:var(--font-display); font-size:28px; font-weight:900; color:var(--ink); }
.ppd-logo span { color:var(--amber); }
.ppd-meta { text-align:right; font-size:13px; }
.ppd-meta-title { font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--ink); }
.ppd-meta-sub { color:var(--ink-muted); font-family:var(--font-mono); font-size:11px; }

.ppd-parties { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:32px; }
.ppd-party-label { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-muted); font-family:var(--font-mono); margin-bottom:6px; }
.ppd-party-name  { font-weight:700; font-size:16px; color:var(--ink); }
.ppd-party-sub   { font-size:13px; color:var(--ink-soft); margin-top:2px; }

.ppd-subject { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--ink); margin-bottom:20px; }

.ppd-table { width:100%; border-collapse:collapse; margin-bottom:24px; }
.ppd-table th { text-align:left; padding:10px 12px; font-size:11px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); background:var(--cream); border-bottom:2px solid var(--border); }
.ppd-table td { padding:12px; font-size:13.5px; color:var(--ink-mid); border-bottom:1px solid var(--border); }
.ppd-table tr:last-child td { border-bottom:none; }
.ppd-table td:last-child, .ppd-table th:last-child { text-align:right; font-family:var(--font-mono); font-weight:600; }

.ppd-totals { display:flex; flex-direction:column; gap:6px; align-items:flex-end; margin-bottom:32px; }
.ppd-total-row { display:flex; gap:40px; font-size:13px; }
.ppd-total-row.grand { font-family:var(--font-display); font-size:20px; font-weight:800; padding-top:10px; border-top:2px solid var(--ink); margin-top:6px; }
.ppd-total-row.grand .pt-row-val { color:var(--amber); }

.ppd-terms { background:var(--cream); border-radius:var(--radius-lg); padding:20px 24px; margin-bottom:32px; }
.ppd-terms-title { font-weight:700; font-size:14px; color:var(--ink); margin-bottom:12px; }
.ppd-term { display:flex; gap:10px; font-size:13px; color:var(--ink-soft); margin-bottom:8px; }
.ppd-term-icon { flex-shrink:0; }

.ppd-signature { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:40px; padding-top:24px; border-top:1px solid var(--border); }
.ppd-sig-label { font-size:11px; color:var(--ink-muted); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; }
.ppd-sig-line  { height:1px; background:var(--ink); margin-top:40px; }
.ppd-sig-name  { font-size:13px; color:var(--ink-soft); margin-top:6px; }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width:1100px) { .pon-form-layout { grid-template-columns:1fr; } .pon-mini-preview { display:none; } }
@media (max-width:768px)  { .pon-body { grid-template-columns:1fr; } .dash-sidebar { display:none; } .stavke-header,.stavka-row { grid-template-columns:1fr 50px 60px 70px 70px 28px; } }