/* ===== Ekran za timove ===== */
main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 80px; }

.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.page-head h1 { margin:0 0 4px; font-size:1.5rem; }

.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px; }

.team-card {
  background:#fff; border:1px solid var(--line,#e3e8ee); border-radius:10px;
  padding:15px 16px; cursor:pointer; transition:border-color .14s, box-shadow .14s, transform .14s;
  display:flex; flex-direction:column; gap:10px;
}
.team-card:hover { border-color:var(--pri,#2f6fed); box-shadow:0 6px 18px -12px rgba(20,32,48,.4); transform:translateY(-1px); }
.team-card.no-lead { border-left:3px solid var(--warn,#c47f18); }

.tc-top { display:flex; align-items:baseline; gap:9px; }
.tc-code { font-weight:700; font-size:1.02rem; }
.tc-badge { font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  background:#eef2f7; color:#5b6b80; padding:2px 7px; border-radius:99px; }
.tc-name { color:#64748b; font-size:.86rem; }

.tc-lead { font-size:.86rem; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tc-lead b { font-weight:600; }
.tc-lead .dep { background:#fff4e2; color:#a8620a; font-size:.72rem; padding:1px 6px; border-radius:99px; }
.tc-lead .none { color:var(--warn,#c47f18); font-weight:500; }

.tc-foot { display:flex; gap:14px; font-size:.8rem; color:#64748b; margin-top:auto; padding-top:4px; }
.tc-foot .zem { color:#94a3b8; }

/* ---- panel ---- */
.panel-back { position:fixed; inset:0; background:rgba(18,26,38,.42); display:flex; justify-content:flex-end; z-index:60; }
.panel { width:min(680px,100%); background:#f8fafc; height:100%; overflow-y:auto;
  box-shadow:-12px 0 40px -20px rgba(0,0,0,.5); animation:slidein .18s ease-out; }
@keyframes slidein { from { transform:translateX(24px); opacity:.6 } to { transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){ .panel{animation:none} }

.panel-head { position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line,#e3e8ee);
  padding:16px 22px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; z-index:2; }
.panel-head h2 { margin:0; font-size:1.22rem; }
.panel-body { padding:18px 22px 60px; display:flex; flex-direction:column; gap:16px; }

.blk { background:#fff; border:1px solid var(--line,#e3e8ee); border-radius:10px; padding:15px 17px; }
.blk h3 { margin:0 0 11px; font-size:.94rem; display:flex; align-items:center; gap:8px; }
.blk .cnt { font-weight:400; color:#94a3b8; font-size:.82rem; }
.hint { color:#94a3b8; font-size:.8rem; margin:8px 0 0; line-height:1.45; }

.row-inline { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.row-inline label { display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:#64748b; }
.row-inline .grow { flex:1 1 150px; } .row-inline .grow2 { flex:2 1 220px; }
.row-inline input, .row-inline select { padding:7px 9px; border:1px solid var(--line,#e3e8ee); border-radius:7px; font:inherit; }
.lead-form { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line,#e3e8ee);
  display:flex; flex-direction:column; gap:10px; }

/* ---- vodje ---- */
.lead { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f1f5f9; font-size:.9rem; }
.lead:last-child { border-bottom:0; }
.lead.past { opacity:.5; }
.lead .who { font-weight:600; }
.lead .per { color:#64748b; font-size:.8rem; font-variant-numeric:tabular-nums; }
.lead .tag { font-size:.7rem; padding:1px 7px; border-radius:99px; }
.lead .tag.lead { background:#e8f0fe; color:#2f6fed; }
.lead .tag.deputy { background:#fff4e2; color:#a8620a; }
.lead .tag.now { background:#e6f6ec; color:#1e7a45; }
.lead .sp { flex:1; }

/* ---- clanovi ---- */
.members { display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.mem { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:7px; font-size:.9rem; }
.mem:hover { background:#f1f5f9; }
.mem .ime { font-weight:500; }
.mem .zem { font-size:.72rem; color:#64748b; background:#eef2f7; padding:1px 7px; border-radius:99px; }
.mem .multi { font-size:.72rem; color:#7c5cd6; background:#f1ecfd; padding:1px 7px; border-radius:99px; }
.mem .op { font-size:.76rem; color:#94a3b8; font-variant-numeric:tabular-nums; }
.mem .sp { flex:1; }
.mem .x { opacity:0; border:0; background:none; cursor:pointer; color:#b4425a; font-size:1rem; padding:0 4px; }
.mem:hover .x { opacity:1; }

/* ---- dodavanje ---- */
.add-row { position:relative; }
.add-row input { width:100%; padding:9px 11px; border:1px solid var(--line,#e3e8ee); border-radius:8px; font:inherit; }
.add-results { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; z-index:5;
  border:1px solid var(--line,#e3e8ee); border-radius:8px; max-height:270px; overflow-y:auto;
  box-shadow:0 12px 28px -14px rgba(20,32,48,.45); }
.ar { padding:8px 11px; cursor:pointer; display:flex; align-items:center; gap:9px; font-size:.88rem; }
.ar:hover { background:#f1f5f9; }
.ar .t { color:#94a3b8; font-size:.76rem; margin-left:auto; }
.ar.in { opacity:.45; cursor:default; }

.hidden { display:none !important; }