/* =========================================================
   TALENT PROFILE – DOCUMENTS STRIP (CSS)
   Namespace: tp-docstrip-*
   ========================================================= */

.tp-docstrip-wrap{
  --bg: linear-gradient(180deg, #141414 0%, #0f0f0f 100%);
  --card: #151515;
  --card-hover: #1b1b1b;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text: #fff;
  --text-dim: rgba(255,255,255,0.75);
  --shadow: 0 0 16px rgba(0,0,0,0.45);
  --red: #D90404; --red-dark: #730707;
  --red-grad: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  --red-soft: rgba(217,4,4,0.18);
  --radius: 14px; --radius-lg: 16px;

  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Head */
.tp-docstrip-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:12px;
  background: linear-gradient(180deg,#171717 0%, #101010 100%);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 12px 10px;
}
.tp-docstrip-titles{ display:flex; flex-direction:column; gap:2px; }
.tp-docstrip-main{ display:flex; align-items:center; gap:6px; }
.tp-docstrip-main i{ color:var(--red); font-size:17px; }
.tp-docstrip-title{ font-weight:600; color:var(--text); font-size:15px; }
.tp-docstrip-sub{ font-size:13px; color:var(--text-dim); margin-left:24px; line-height:1.3; }

/* Right nav */
.tp-docstrip-nav{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.tp-docstrip-btn{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--border-strong);
  background:#0f0f0f; color:var(--text);
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.tp-docstrip-btn:hover{ background:#121212; border-color:var(--border-strong); }
.tp-docstrip-btn[disabled]{ opacity:.4; pointer-events:none; }

/* Mask + fades */
.tp-docstrip-mask{ position:relative; overflow:hidden; border-radius:12px; }
.tp-docstrip-fades::before,
.tp-docstrip-fades::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; z-index:1; pointer-events:none;
  background: linear-gradient(90deg, rgba(20,20,20,1) 0%, rgba(20,20,20,0) 100%);
}
.tp-docstrip-fades::before{ left:0; }
.tp-docstrip-fades::after{ right:0; transform:scaleX(-1); }
.tp-docstrip-rtl .tp-docstrip-fades::before{ right:0; left:auto; transform:scaleX(-1); }
.tp-docstrip-rtl .tp-docstrip-fades::after{ left:0; right:auto; transform:none; }

/* No-overflow: center items & hide fades */
.tp-docstrip-nooverflow .tp-docstrip-fades::before,
.tp-docstrip-nooverflow .tp-docstrip-fades::after{ display:none; }

/* Track + card */
.tp-docstrip-track{
  display:inline-flex; gap:12px; padding:6px 4px 4px;
  will-change: transform; transition: transform .35s ease;
}
.tp-docstrip-nooverflow .tp-docstrip-track{
  justify-content:center; transform:none !important;
}

.tp-docstrip-card{
  display:inline-flex; align-items:center; gap:10px;
  min-width:220px; max-width:260px; padding:12px 14px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text); text-decoration:none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tp-docstrip-card:hover{ background:var(--card-hover); border-color:var(--border-strong); box-shadow:0 0 0 2px var(--red-soft); }
.tp-docstrip-ico{ font-size:22px; color:var(--red); flex:0 0 auto; }
.tp-docstrip-meta{ min-width:0; }
.tp-docstrip-cap{
  font-size:14px; font-weight:600; line-height:1.1; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px;
}
.tp-docstrip-type{ font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.3px; }
.tp-docstrip-open{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  padding:6px 8px; font-size:12px; font-weight:600;
  border:1px solid var(--red); border-radius:999px; background:var(--red-grad); color:#fff; white-space:nowrap;
}
.tp-docstrip-open i{ font-size:14px; }

/* Empty */
.tp-docstrip-wrap .text-muted{
  color:var(--text-dim) !important; border:1px dashed var(--border-strong);
  border-radius:10px; background:rgba(255,255,255,0.02);
}

/* Responsive */
@media (max-width: 992px){
  .tp-docstrip-card{ min-width:200px; max-width:220px; }
  .tp-docstrip-open{ display:none; }
}
@media (max-width: 576px){
  .tp-docstrip-btn{ width:32px; height:32px; }
  .tp-docstrip-card{ min-width:180px; padding:11px 12px; }
  .tp-docstrip-cap{ max-width:120px; }
}