/* Dosarul de personal (v1.2): fila din Fișa persoană, pagina „Dosarele de personal”, lista compactă din asistentul de angajare
   și ecranul salariatului (portal / chioșc). Toate clasele au prefixul .ds- ; fără derulare laterală la 390 px și 1366 px. */

/* meniurile „⋯” și „Dosar ▾” nu se taie în carduri */
.ds > .card { overflow: visible; }
.ds > .card > .card-head { border-radius: var(--radius) var(--radius) 0 0; }

/* ---------- capul dosarului: completarea și acțiunile ---------- */
.ds-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; }
.ds-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; flex: 1 1 340px; min-width: 0; }
.ds-prog { flex: 0 1 220px; min-width: 120px; }
.ds-prog .bar { height: 8px; }
.ds-prog .bar i { background: var(--amber); }
.ds-prog .bar i.done { background: var(--green); }
.ds-prog small { font-weight: 700; color: var(--text); }
.ds-badges { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ds-hact { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ds-hid { flex-basis: 100%; color: var(--text-faint); font-size: 11.5px; }
.ds-busy { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-pop); font-size: 13px; }

/* ---------- lista actelor ---------- */
.ds-list { list-style: none; margin: 0; padding: 0; }
.ds-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 7px 12px; border-bottom: 1px solid var(--border-soft); }
.ds-row:last-child { border-bottom: 0; }
.ds-row.ds-rec .ds-name b { font-weight: 600; color: var(--text-weak); }
.ds-row.st-incarcat { background: #fffcf4; }
.ds-row.st-respins, .ds-row.st-expirat { background: #fff8f7; }
.ds-st { padding-top: 1px; min-width: 0; }
.ds-st .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ds-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ds-name { min-width: 0; line-height: 1.3; }
.ds-name b { font-size: 13.5px; }
.ds-lock { color: var(--text-faint); vertical-align: -1px; }
.ds-sub { display: block; font-size: 11.5px; color: var(--text-weak); line-height: 1.35; overflow-wrap: anywhere; }
.ds-why { display: block; font-size: 11.5px; color: var(--text-weak); font-style: italic; overflow-wrap: anywhere; }
.ds-why.red { color: var(--red-text); font-style: normal; font-weight: 600; }
.ds-act { display: flex; align-items: center; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.ds-act .menu-wrap .btn { min-width: 30px; justify-content: center; }
.ds-upb { cursor: pointer; }
.menu .ds-mi { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.menu .ds-mi:hover { background: var(--bg); }

/* miniaturile fișierelor */
.ds-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.ds-th { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 52px; height: 52px; padding: 2px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-soft); color: var(--text-weak); cursor: pointer; overflow: hidden; }
.ds-th img { width: 100%; height: 34px; object-fit: cover; border-radius: 4px; }
.ds-th small { font-size: 10px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-th:hover { border-color: var(--focus); color: var(--text); }
.ds-th.off { opacity: .45; border-style: dashed; }

/* vizualizarea fișierului */
.ds-pane { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); min-width: 0; }
.ds-pane img { display: block; max-width: 100%; max-height: 64vh; margin: 0 auto; }
.ds-pane iframe { display: block; width: 100%; height: 64vh; border: 0; }
.ds-strip { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ds-note { margin: 8px 0 0; font-size: 12px; color: var(--text-weak); }
.ds-p { margin: 0 0 8px; font-size: 13px; color: var(--text-weak); }

/* verificarea: copia în stânga, datele în dreapta */
.ds-vgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ds-vprev { position: sticky; top: 0; min-width: 0; }
.ds-vprev .ds-pane img { max-height: 58vh; }
.ds-vprev .ds-pane iframe { height: 58vh; }
.ds-vform { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ds-g { gap: 6px 10px; }
.ds-link { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); min-width: 0; }
.ds-lt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-weak); }
.ds-opts { display: flex; flex-direction: column; gap: 3px; }
.ds-link .check { white-space: normal; align-items: flex-start; }
.ds-deps { margin: 0; padding-left: 18px; font-size: 13px; }
.ds-dep { padding-top: 6px; border-top: 1px dashed var(--border); }

/* încărcarea de la birou */
.ds-drop { position: relative; }
.ds-drop.on { border-color: var(--focus); background: var(--blue-bg); color: var(--text); }
.ds-drop span { min-width: 0; }
.ds-up { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ds-up-row { display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1.4fr) 110px 30px; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
.ds-up-th { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--bg-soft); overflow: hidden; color: var(--text-weak); }
.ds-up-th img { width: 100%; height: 100%; object-fit: cover; }
.ds-up-n { display: flex; flex-direction: column; min-width: 0; }
.ds-up-n b { font-size: 12.5px; font-weight: 600; }
.ds-up-n small { font-size: 11px; color: var(--text-faint); }
.ds-up-t, .ds-up-l { width: 100%; min-width: 0; }

/* ---------- lista compactă (asistentul de angajare) ---------- */
.ds-cl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ds-cl-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; }
.ds-cl-h .ds-prog { flex: 0 1 180px; }
.ds-cl-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ds-cl-list li { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-bottom: 1px solid var(--border-soft); min-width: 0; font-size: 13px; }
.ds-cl-list li:last-child { border-bottom: 0; }
.ds-cl-list li b { font-weight: 600; }
.ds-cl-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .ds-cl-n { white-space: normal; overflow: visible; overflow-wrap: anywhere; } .ds-cl-list li { align-items: flex-start; } .ds-cl-list .ds-dot { margin-top: 5px; } }
.ds-cl-list li small { display: block; font-size: 11.5px; color: var(--text-weak); }
.ds-cl-st { flex: none; font-size: 11.5px; color: var(--text-weak); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-dot { flex: none; width: 9px; height: 9px; border-radius: 99px; background: var(--border-strong); }
.ds-dot.ok { background: var(--green); } .ds-dot.wait { background: var(--amber); } .ds-dot.no { background: var(--red); } .ds-dot.rec { background: var(--border-strong); }

/* ---------- pagina „Dosarele de personal” ---------- */
.ds-fsel { width: 200px; max-width: 100%; }
.ds-page .toolbar .seg { display: flex; flex-wrap: wrap; max-width: 100%; }
.ds-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #f4b8a8; border-radius: var(--radius); background: var(--brand-soft); }
.ds-allbtn { font-size: 12px; }
.ds-cell { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.tbl td .ds-cell small { white-space: normal; }
.ds-clamp, .tbl td small.ds-clamp, .tbl td .ds-cell small.ds-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important; max-width: 100%; }
.ds-miss { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ds-miss b { flex: none; }
.ds-red { color: var(--red-text); }
.ds-ok { color: var(--green); }
.tbl tr.ds-on td { background: #fffaf7; }
.tbl th input[type=checkbox], .tbl td input[type=checkbox] { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.ds-rule { display: flex; flex-direction: column; gap: 4px; margin: -4px 0 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); }
.ds-rule .chips { gap: 4px; }
.ds-rule .chip { height: 26px; font-size: 12px; padding: 0 9px; }
.ds-checks { gap: 6px 18px; margin: 4px 0 8px; }

@media (max-width: 980px) {
  .ds-vgrid { grid-template-columns: minmax(0, 1fr); }
  .ds-vprev { position: static; }
  .ds-vprev .ds-pane img { max-height: 42vh; }
  .ds-vprev .ds-pane iframe { height: 42vh; }
}
@media (max-width: 760px) {
  .ds-row { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 10px; }
  .ds-st { grid-column: 1; grid-row: 1; }
  .ds-act { grid-column: 2; grid-row: 1; }
  .ds-main { grid-column: 1 / -1; grid-row: 2; }
  .ds-hact { margin-left: 0; width: 100%; }
  .ds-hact > .btn, .ds-hact > .menu-wrap { flex: 1 1 auto; justify-content: center; }
  .ds-hact > .menu-wrap > .btn { width: 100%; justify-content: center; }
  .ds-up-row { grid-template-columns: 40px minmax(0, 1fr) 30px; }
  .ds-up-t { grid-column: 1 / 3; }
  .ds-up-l { grid-column: 3 / 4; grid-row: 2; display: none; }
  .ds-fsel { width: calc(50% - 4px); }
  .ds-page .toolbar .searchbox { flex: 1 1 100%; }
  .ds-page .toolbar > .btn.right { margin-left: 0; }
  .tbl.cards td input[type=checkbox] { width: 20px; height: 20px; }
  .tbl.cards td.ds-selc::before { content: none; display: none; }
  .tbl.cards td.ds-selc { float: right; width: auto !important; padding: 2px 0 0 8px; }
}

/* ---------- ecranul salariatului (portal pe telefon / chioșc) ---------- */
.ds-emp { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ds-emp-list { gap: 10px; }
.ds-emp-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ds-emp-item.need .ds-emp-row { border-color: #efcf88; }
.ds-emp-row { align-items: flex-start; }
.ds-emp-row .ky-pill { margin-top: 2px; }
.ds-emp-opt { display: inline !important; font-size: 13px; color: var(--text-faint) !important; }
.ds-emp-why { color: var(--red-text) !important; }
.ds-emp-due { color: var(--amber-text) !important; font-weight: 650; }
.ds-emp-go { align-self: stretch; }
.ds-emp-pick { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 2px dashed var(--border-strong); border-radius: 16px; background: var(--bg-soft); min-width: 0; }
.ds-emp-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-emp-btns > .ky-btn { flex: 1 1 200px; }
.ds-emp-btns > .ky-btn.grow { flex: 2 1 200px; }
.ds-emp-btns label.ky-btn { cursor: pointer; }
.ds-emp-prev { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-emp-th { position: relative; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.ds-emp-th img { width: 100%; height: 100%; object-fit: cover; }
.ds-emp-th button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.ds-emp-ic { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-weak); gap: 4px; }
.ds-emp-tip { margin: 0; font-size: 15px; color: var(--text-weak); }
.ds-emp-more { display: flex; flex-direction: column; gap: 10px; }
.pt .ds-emp { gap: 10px; }
.pt .ds-emp-pick { padding: 10px; border-radius: 12px; border-width: 1px; }
.pt .ds-emp-th { width: 76px; height: 76px; border-radius: 10px; }
.pt .ds-emp-tip { font-size: 12.5px; }
.pt .ds-emp-opt { font-size: 12px; }
.pt .ds-emp-btns > .ky-btn { flex-basis: 140px; }
@media (max-width: 480px) {
  .ds-emp-row { flex-wrap: wrap; }
  .ds-emp-row .ky-pill { order: -1; }
}