/* ── MOJI POSLOVI PAGE ──────────────────────────────────── */

.jobs-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; min-width:20px; text-align:center; }
.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; }

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

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

/* View toggle */
.view-toggle { display:flex; background:var(--cream-dark); border-radius:var(--radius); padding:3px; gap:2px; }
.vt-btn { background:none; border:none; border-radius:7px; padding:6px 12px; font-size:13px; font-family:var(--font-body); font-weight:500; color:var(--ink-soft); cursor:pointer; transition:all 0.15s; }
.vt-btn.active { background:white; color:var(--ink); box-shadow:var(--shadow-sm); }

/* Stats */
.jobs-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

.js-stat {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:14px 16px;
  display:flex; flex-direction:column; gap:4px;
  border-left:3px solid transparent;
}

.js-stat.s-upit    { border-left-color: #60a5fa; }
.js-stat.s-dogovor { border-left-color: var(--amber); }
.js-stat.s-aktivno { border-left-color: var(--green); }
.js-stat.s-gotovo  { border-left-color: var(--ink-muted); }

.js-stat-num { font-family:var(--font-display); font-size:28px; font-weight:900; color:var(--ink); letter-spacing:-1px; line-height:1; }
.js-stat-lbl { font-size:11px; color:var(--ink-muted); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.07em; }

/* ── KANBAN ───────────────────────────────── */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}

.kanban-col { display:flex; flex-direction:column; gap:10px; }

.kc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px;
}

.kc-title {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  font-family: var(--font-mono);
  display: flex; align-items: center; gap: 6px;
}

.kc-count {
  background: var(--cream-dark); color: var(--ink-soft);
  font-size: 11px; font-weight: 700; font-family: var(--font-mono);
  padding: 1px 7px; border-radius: 100px;
}

.kc-add { background:none; border:none; color:var(--ink-muted); cursor:pointer; font-size:18px; line-height:1; }
.kc-add:hover { color:var(--ink); }

.kanban-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: all 0.18s;
}

.kanban-card:hover { border-color:var(--amber); box-shadow:var(--shadow-md); transform:translateY(-2px); }

.kcard-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }

.kcard-title { font-weight:700; font-size:13.5px; color:var(--ink); line-height:1.35; }

.kcard-emoji { font-size:20px; flex-shrink:0; }

.kcard-client {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-soft);
}

.kcard-avatar-sm {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--cream-dark); font-size: 9px;
  font-weight: 700; display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft); flex-shrink:0;
}

.kcard-meta { display:flex; gap:6px; flex-wrap:wrap; }

.kcard-price {
  font-family: var(--font-mono); font-size:12px;
  font-weight:700; color:var(--amber);
}

.kcard-date { font-size:11px; color:var(--ink-muted); font-family:var(--font-mono); }

.kcard-progress { display:flex; flex-direction:column; gap:4px; }

.kp-bar-bg { height:4px; background:var(--cream-dark); border-radius:100px; overflow:hidden; }
.kp-bar-fill { height:100%; border-radius:100px; background:var(--amber); transition:width 0.5s ease; }
.kp-label { font-size:10px; color:var(--ink-muted); font-family:var(--font-mono); display:flex; justify-content:space-between; }

/* ── LIST VIEW ────────────────────────────── */
.jobs-filters { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.jf-tabs { display:flex; gap:4px; }
.jf-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; }
.jf-tab:hover { border-color:var(--amber); color:var(--amber); }
.jf-tab.active { background:var(--amber-light); border-color:var(--amber); color:var(--amber-dark); }

.jobs-list-table { display:flex; flex-direction:column; gap:8px; }

.job-list-item {
  background: var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:14px 18px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto;
  align-items:center; gap:16px; cursor:pointer;
  transition:all 0.15s;
}
.job-list-item:hover { border-color:var(--amber); box-shadow:var(--shadow-sm); }

.jli-title { font-weight:600; font-size:14px; color:var(--ink); }
.jli-client { font-size:12px; color:var(--ink-soft); margin-top:2px; }
.jli-price { font-family:var(--font-mono); font-weight:700; color:var(--amber); font-size:14px; }
.jli-date { font-size:12px; color:var(--ink-muted); font-family:var(--font-mono); }
.jli-status span { font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px; font-family:var(--font-mono); }

/* ── JOB DETAIL PANEL ─────────────────────── */
.job-detail-overlay {
  position: fixed; inset:0;
  background: rgba(26,24,20,0.4);
  z-index: 200; display:none;
  justify-content:flex-end;
}
.job-detail-overlay.open { display:flex; }

.job-detail-panel {
  background: var(--white);
  width: min(480px, 90vw);
  height: 100%;
  overflow-y: auto;
  padding: 28px 28px 40px;
  display: flex; flex-direction: column; gap: 20px;
  animation: slideInRight 0.3s ease;
  box-shadow: var(--shadow-lg);
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity:0; }
  to   { transform: translateX(0);    opacity:1; }
}

.jdp-close {
  align-self: flex-end;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 12px;
  cursor: pointer; color: var(--ink-muted); font-size:13px;
  transition: all 0.15s;
}
.jdp-close:hover { background:var(--cream); color:var(--ink); }

.jdp-header { display:flex; flex-direction:column; gap:8px; }
.jdp-emoji { font-size:36px; }
.jdp-title { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-0.3px; }

.jdp-timeline { display:flex; flex-direction:column; gap:0; }

.jdpt-step {
  display: flex; align-items:flex-start; gap:12px;
  padding-bottom: 16px; position:relative;
}

.jdpt-step:not(:last-child)::before {
  content:''; position:absolute; left:11px; top:24px;
  width:2px; height:calc(100% - 16px);
  background: var(--border);
}
.jdpt-step.done::before { background:var(--green); }

.jdpt-dot {
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
  border:2px solid var(--border); background:var(--white); color:var(--ink-muted);
}
.jdpt-step.done   .jdpt-dot { background:var(--green); border-color:var(--green); color:white; }
.jdpt-step.active .jdpt-dot { background:var(--amber); border-color:var(--amber); color:white; animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{box-shadow:0 0 0 0 rgba(232,136,10,0.3)} 50%{box-shadow:0 0 0 6px rgba(232,136,10,0)} }

.jdpt-info { flex:1; padding-top:2px; }
.jdpt-name { font-size:13.5px; font-weight:600; color:var(--ink); }
.jdpt-date { font-size:11px; color:var(--ink-muted); font-family:var(--font-mono); margin-top:2px; }
.jdpt-note { font-size:12px; color:var(--ink-soft); margin-top:4px; background:var(--cream); padding:6px 10px; border-radius:6px; }

.jdp-actions { display:flex; flex-direction:column; gap:8px; }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width:1100px) { .kanban-board { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px)  { .jobs-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px)  { .jobs-body { grid-template-columns:1fr; } .dash-sidebar { display:none; } .kanban-board { grid-template-columns:1fr; } .job-list-item { grid-template-columns:1fr 1fr; } }