/* ===== Versions Page Styles ===== */
.versions-page{ 
    --bg:#f6f7fb; 
    --card:#fff; 
    --line:#e6e8ee; 
    --muted:#6b7280; 
    --text:#111827;
  --primary:#1677ff; 
  --primary-press:#0f63d8; 
  --shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px rgba(17,24,39,.06);
  display: block;  
  padding-right: 16rem;
  background: #F9F9F9;
}
.vp-breadcrumb{ margin:0 0 10px 0; background: #fff; }

.vp-topbar{
  display:flex; align-items:center; justify-content:space-between;
}
.vp-topbar__top {
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--line);
    padding: 1rem 2rem;
    border-radius: 6px;
    width: 100%;
    align-items: center;
    background: #fff;
}
.vp-topbar__right{ 
    display:flex; 
    align-items:center;
    justify-content: right;
    margin: 2rem;
}
.vp-appname{ margin:0; font-weight:700; color:var(--text); }

.vp-btn{
  height:36px; padding:0 22px; border-radius:6px; border:1px solid var(--line);
  background:#fff; color:var(--text); font-weight:600;
}
.vp-btn--primary{ background:var(--primary); color:#fff; border-color:transparent;}
.vp-btn--primary:hover{ background:var(--primary-press); }

.vp-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); overflow:hidden;
}

/* Table */
.vp-table{ width:100%; border-collapse:separate; border-spacing:0; }
.vp-table thead th{
  background:#f3f5f9; color:#475569; font-weight:700; font-size:13px;
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.vp-table tbody td{
  padding:14px; vertical-align:top; border-bottom:1px solid transparent; position:relative;
}
.vp-table tbody tr + tr td{ border-top:1px dotted #d9dee7; }

.vp-mono{ font-variant-numeric: tabular-nums; color:#111827; }
.vp-url{ color:#374151; word-break:break-all; }
.vp-hint{ color:#6b7280; font-weight:600; }
.vp-warn{ color:#b91c1c; font-weight:600; }
.vp-actions-col{ width:160px; }
.vp-actions{ display:flex; gap:6px; align-items:center; }

.vp-icbtn{
  width:32px; height:32px; border:1px solid var(--line); border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; background:#fff;
}
.vp-icbtn:hover{ background:#f5f6f8; }
.vp-icbtn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Empty */
.vp-empty{ padding:18px; color:var(--muted); text-align:center; }

/* Pagination pill */
.vp-pagination{ display:flex; justify-content:center; margin:18px 0 4px; }
.vp-pagination__pill .pagination{
  display:inline-flex; gap:2px; background:#111827; color:#fff; border-radius:14px; padding:4px 8px;
}
.vp-pagination__pill .pagination>li>a, 
.vp-pagination__pill .pagination>li>span{
  border:none; background:transparent; color:#fff; padding:4px 8px; line-height:1.2;
}
.vp-pagination__pill .pagination>.active>a,
.vp-pagination__pill .pagination>.active>span{
  background:#fff; color:#111827; border-radius:8px;
}
.vp-pagination__pill .pagination>li>a:hover{ background:rgba(255,255,255,.12); border-radius:8px; }

/* Make breadcrumb card-like spacing consistent with page */
.content-wrapper.width-1000{ max-width: 1100px; }