/* ===== Layout helpers ===== */
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.page-head__titles{ min-width: 240px; }
.page-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* ===== Toolbar / Segmented control ===== */
.seg{
  display:inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 4px;
}
.seg .btn{
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-weight: 600;
}
.seg .btn.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ===== Filters row ===== */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:end;
}
.filters .form-label{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:14px;
  font-weight: 500;
  color: #475f7b;
  margin-bottom:6px;
}
.filters .form-control,
.filters .form-select{
  height: 40px;
  border-radius: 10px;
  border: 1px solid #d8e3ef;
}
.filters .form-control:focus,
.filters .form-select:focus{
  border-color: rgba(11,91,211,.45);
  box-shadow: 0 0 0 4px rgba(11,91,211,.12);
}

/* ===== “SS&C-ish” card spacing ===== */
.cardx + .cardx{ margin-top: 16px; }

/* ===== Table improvements ===== */
.table.tablex{
  border-collapse: separate;
  border-spacing: 0;
}
.table.tablex thead th{
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.table.tablex tbody td{
  border-bottom: 1px solid var(--border);
}
.table.tablex tbody tr:last-child td{
  border-bottom: 0;
}
.table.tablex td, .table.tablex th{
  padding: 12px 14px;
}

.table.tablex tbody tr.decision-changed-row > td:first-child{
  border-left: 5px solid transparent !important;
}

.table.tablex tbody tr.decision-changed-row > td:last-child{
  border-right: 5px solid transparent !important;
}

.table.tablex tbody tr.decision-changed-row--approved > td:first-child{
  border-left-color: #007c71 !important;
}

.table.tablex tbody tr.decision-changed-row--approved > td:last-child{
  border-right-color: #007c71 !important;
}

.table.tablex tbody tr.decision-changed-row--declined > td:first-child{
  border-left-color: #e22522 !important;
}

.table.tablex tbody tr.decision-changed-row--declined > td:last-child{
  border-right-color: #e22522 !important;
}

.table.tablex tbody tr.decision-changed-row--pending > td:first-child{
  border-left-color: #ff9800 !important;
}

.table.tablex tbody tr.decision-changed-row--pending > td:last-child{
  border-right-color: #ff9800 !important;
}

/* ===== Soft status pills (map your statuses) ===== */
.status-pill{
  display:inline-flex;
  align-items:center;
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid transparent;
  line-height: 1;
}
.status-pill--complete{ background:#ecfdf3; color:var(--success); border-color:rgba(22,163,74,.18); }
.status-pill--partial{  background:#eef5ff; color:var(--primary); border-color:rgba(11,91,211,.18); }
.status-pill--awaiting{ background:#ecfeff; color:var(--info); border-color:rgba(2,132,199,.18); }
.status-pill--none{     background:#f1f5f9; color:var(--muted); border-color:rgba(148,163,184,.25); }

/* ===== “chip button” actions (View/Open/etc) ===== */
.btn-chip{
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148,163,184,.55);
  background: var(--surface);
  color: var(--muted);
  padding: 6px 12px;
  font-weight: 600;
}
.btn-chip:hover{
  background: rgba(11,91,211,.06);
  border-color: rgba(11,91,211,.25);
  color: var(--text);
}

.btn-chip.btn-chip--submit{
  background: #007c71;
  border-color: #007c71;
  color: #ffffff;
}

.btn-chip.btn-chip--submit:hover{
  background: #006a60;
  border-color: #006a60;
  color: #ffffff;
}

.btn-chip--icon{
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-chip--icon .bi{
  font-size: 14px;
}

.btn-back{
  width: 162px;
  height: 44px;
  padding: 0 32px;
  border: 1px solid #89b1e8;
  border-radius: 90px;
  background-color: #ffffff;
  background-size: cover;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #0660d4;
  line-height: 22px;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-back:hover,
.btn-back:focus{
  color: #0660d4;
  text-decoration: none;
  background-color: #f6faff;
  border-color: #76a3e0;
}

/* ===== Upload list page refinements ===== */
.page-title{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #5275a1;
  letter-spacing: 0;
  margin: 0 0 6px;
}

.page-subtitle{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #475f7b;
  margin: 0 0 18px;
  opacity: .75;
}

.h-subline{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 26px;
  font-weight: 500;
  color: #5275a1;
  margin: 0 0 12px;
}

.data-screen__title{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #5275a1;
  letter-spacing: 0;
  margin: 0 0 6px;
}

.data-screen__subtitle{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #475f7b;
  margin: 0 0 18px;
  opacity: .75;
}

.data-screen__subline{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 26px;
  font-weight: 500;
  color: #5275a1;
  margin: 0 0 12px;
}

.uploads-page .page-title{
  color: #5275a1;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 1.08;
}

.uploads-page .page-subtitle{
  color: #475f7b;
  font-size: 14px;
  font-weight: 400;
  opacity: .75;
}

.uploads-section-title{
  margin: 0 0 16px;
  color: #5275a1;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.12;
}

.cardx.cardx--table{
  background: var(--surface);
  border: 1px solid #d8e3ef;
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.uploads-page--list .uploads-filter-card,
.data-screen--split .data-screen__filters{
  border: 1px solid #d8e3ef;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
}

.uploads-page--list .uploads-table-card,
.data-screen--split .data-screen__results{
  border: 1px solid #d8e3ef;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: none;
  margin-top: 0 !important;
  width: 100%;
  max-width: 100%;
  min-height: auto;
}

.uploads-page--list .uploads-table-card.uploads-table-card--standalone{
  border-top: 1px solid #d8e3ef;
  border-radius: 16px !important;
  overflow: hidden;
}

.uploads-page .table.tablex thead th{
  background: #f5f8fc;
  color: #5275a1;
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  height: 40px;
  position: relative;
}

.uploads-page .table.tablex thead th + th::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 22px;
  border-left: 1px dotted #9fb1c5;
  opacity: .8;
}

.uploads-page .table.tablex tbody td{
  color: #475f7b;
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  height: 41px;
  background: #ffffff;
}

.uploads-page .table.tablex .filename-cell{
  font-weight: 600;
  color: #475f7b;
}

.uploads-page .table.tablex td.text-center .status-pill{
  margin-inline: auto;
}

.upload-detail-meta-card .upload-detail-meta-body{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  color: #475f7b;
}

.upload-detail-meta-card .upload-detail-meta-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.upload-detail-meta-card .upload-detail-meta-title{
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #5275a1;
}

.upload-detail-shortcuts{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.upload-detail-shortcut{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #ffffff;
  border: 0;
  box-shadow: 0 4px 8px rgba(64, 110, 184, 0.16), 0 0 2px rgba(64, 110, 184, 0.04);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  cursor: pointer;
}

.upload-detail-shortcut .bi{
  color: #5275a1;
  font-size: 20px;
  line-height: 1;
}

.upload-detail-shortcut:hover{
  background: #f8fbff;
  box-shadow: 0 6px 12px rgba(64, 110, 184, 0.2), 0 0 2px rgba(64, 110, 184, 0.08);
  transform: translateY(-1px);
}

@media (max-width: 767.98px){
  .upload-detail-meta-card .upload-detail-meta-header{
    flex-wrap: wrap;
  }
}

.upload-detail-meta-card .upload-detail-meta-body strong{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #5275a1;
}

.upload-dup-warning{
  border: 1px solid #d8e3ef;
  border-radius: 12px;
  padding: 12px 14px;
  background: #f5f8fc;
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  color: #475f7b;
}

.upload-dup-warning.upload-dup-warning--open{
  border-color: #f2d49f;
  background: #fff8eb;
}

.upload-dup-warning.upload-dup-warning--ack{
  border-color: #d8e3ef;
  background: #f5f8fc;
}

.upload-dup-warning__title{
  margin: 0 0 8px;
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #5275a1;
}

.upload-dup-warning__text{
  margin: 0 0 8px;
}

.upload-dup-warning__list{
  margin-left: 18px;
  padding-left: 0;
}

.upload-dup-warning__list li + li{
  margin-top: 2px;
}

.upload-ready-banner{
  border: 1px solid #8bd3c1;
  border-left: 6px solid #007c71;
  border-radius: 12px;
  padding: 12px 14px;
  background: #effcf8;
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  color: #475f7b;
}

.upload-ready-banner__title{
  margin: 0 0 8px;
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #007c71;
}

.upload-ready-banner__text{
  margin: 0;
}

.template-detail-page .cardx__body{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  color: #475f7b;
}

.reserved-values-page .cardx__body{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  color: #475f7b;
}

.reserved-values-page .uploads-section-title{
  color: #5275a1;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.12;
}

.reserved-values-page .reserved-values-form .form-label{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #475f7b;
  margin-bottom: 6px;
}

.reserved-values-page .reserved-values-form .form-control,
.reserved-values-page .reserved-values-form .form-select,
.reserved-values-page .reserved-values-form input[type="file"]{
  height: 40px;
  border-radius: 10px;
  border: 1px solid #d8e3ef;
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #475f7b;
}

.reserved-values-page .reserved-values-form textarea.form-control{
  height: auto;
  min-height: 96px;
}

.reserved-values-page .reserved-values-form .form-check-label{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #475f7b;
}

.reserved-values-page .reserved-values-form-body .text-muted{
  color: #7388a1 !important;
}

.reserved-values-page .table.tablex tbody td .btn-chip{
  line-height: 1;
}

.template-detail-page .template-detail-form label,
.template-detail-page .template-detail-form-grid label{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #475f7b;
  margin-bottom: 6px;
}

.template-detail-page .template-detail-form .form-control,
.template-detail-page .template-detail-form .form-select,
.template-detail-page .template-detail-form-grid .form-control,
.template-detail-page .template-detail-form-grid .form-select{
  height: 40px;
  border-radius: 10px;
  border: 1px solid #d8e3ef;
}

.template-detail-page .template-detail-form textarea.form-control,
.template-detail-page .template-detail-form-grid textarea.form-control{
  height: auto;
  min-height: 92px;
}

.template-detail-page .form-check-input{
  border-color: #cbd5e0;
}

.template-detail-page .template-detail-card-body{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.template-detail-page .template-detail-card-content{
  flex: 1 1 auto;
}

.template-detail-page .template-detail-form-grid{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.template-detail-page .template-detail-card-action{
  margin-top: 0;
  padding-top: 16px;
  display: block;
}

.template-rule-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-edit-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.card-edit-link__label{
  width: 33px;
  height: 19px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #0660d4;
  line-height: 19px;
}

.card-edit-link__icon-wrap{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(64, 110, 184, 0.16), 0 0 2px rgba(64, 110, 184, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-edit-link__icon-wrap .bi{
  color: #5275a1;
  font-size: 20px;
  line-height: 1;
}

.card-edit-link:hover,
.card-edit-link:focus{
  text-decoration: none;
}

.schema-edit-page .cardx__body{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  color: #475f7b;
}

.schema-edit-page .form-label,
.schema-edit-page label{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #475f7b;
}

.schema-edit-page .form-control,
.schema-edit-page .form-select{
  border-radius: 10px;
  border: 1px solid #d8e3ef;
}

.schema-edit-page .schema-copy-select{
  min-width: 320px;
}

.schema-edit-page .schema-step-title{
  margin: 0 0 8px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #5275a1;
}

.schema-edit-page .schema-json-preview{
  background: #f5f8fc;
  border: 1px solid #d8e3ef;
  border-radius: 10px;
  padding: 12px;
  max-height: 320px;
  overflow: auto;
  font-family: "Lato", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #475f7b;
}

.signature-edit-page .cardx__body{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  color: #475f7b;
}

.signature-edit-page .form-label,
.signature-edit-page label{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #475f7b;
}

.signature-edit-page .form-control,
.signature-edit-page .form-select{
  border-radius: 10px;
  border: 1px solid #d8e3ef;
}

.signature-edit-page .signature-copy-select{
  min-width: 320px;
}

.signature-edit-page .signature-step-title{
  margin: 0 0 8px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #5275a1;
}

.signature-edit-page .signature-json-preview{
  background: #f5f8fc;
  border: 1px solid #d8e3ef;
  border-radius: 10px;
  padding: 12px;
  max-height: 320px;
  overflow: auto;
  font-family: "Lato", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #475f7b;
}

.admin-page .cardx__body{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  color: #475f7b;
}

.admin-page .form-label,
.admin-page label{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #475f7b;
}

.admin-page .form-control,
.admin-page .form-select{
  height: 40px;
  border-radius: 10px;
  border: 1px solid #d8e3ef;
}

.admin-page textarea.form-control{
  height: auto;
  min-height: 90px;
}

.table-col-action{
  width: 64px;
  min-width: 64px;
  white-space: nowrap;
}

.table-action-icon-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #5275a1;
  text-decoration: none;
  border: 0;
  background: transparent;
  line-height: 1;
}

.table-action-icon-link:hover{
  color: #2f5e94;
}

.table-action-icon-link .bi{
  font-size: 23px;
}

.review-card-actions{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.review-list-view{
  display: block;
}

.review-cards-view{
  display: none;
  padding: 12px 16px 0;
}

.review-mobile-card{
  border: 1px solid #dfe8f3;
  border-radius: 14px;
  box-shadow: none;
  background: #f7faff;
}

.row-approve-list-view{
  display: block;
}

.row-approve-cards-view{
  display: none;
  padding: 12px 16px 0;
}

.section-preview-list-view,
.section-preview-errors-list-view{
  display: block;
}

.section-preview-cards-view,
.section-preview-errors-cards-view{
  display: none;
  padding: 12px 16px 0;
}

.uploads-table-wrap,
.data-screen__table-wrap{
  padding: 0 16px;
}

.uploads-table-wrap .table.tablex,
.data-screen__table-wrap .table.tablex{
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

.uploads-list-view,
.data-screen__list{
  display: block;
}

.uploads-cards-view,
.data-screen__cards{
  display: none;
  padding: 12px 16px 0;
}

.uploads-mobile-card,
.data-screen__mobile-card{
  border: 1px solid #dfe8f3;
  border-radius: 14px;
  box-shadow: none;
  background: var(--bg);
}

.table-foot,
.data-screen__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 14px;
  border-top: 1px solid #e1eaf4;
}

.table-foot__right,
.data-screen__foot-right{
  display: flex;
  justify-content: flex-end;
  flex: 1 1 auto;
}

.table-foot__left,
.data-screen__foot-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.table-foot__label,
.data-screen__foot-label{
  color: #7388a1;
  font-size: 14px;
  font-weight: 400;
}

.table-foot__size,
.data-screen__page-size{
  min-width: 68px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #d5e0ed;
  padding: 0 10px;
  background: var(--surface);
  color: #5c7393;
  font-size: 14px;
  font-weight: 500;
}

.pagination.pagination-soft{
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

.pagination.pagination-soft .page-link{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #475f7b;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0 0 1px;
  border-radius: 14px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  line-height: 1;
}

.pagination.pagination-soft .page-item.active .page-link{
  background-color: #ecf8ff;
  color: #475f7b;
}

.pagination.pagination-soft .page-item.disabled .page-link{
  opacity: .45;
}

.pagination.pagination-soft .page-link--arrow{
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  background: #f1f5fa;
  color: #7e93ad;
  box-shadow: 0 4px 10px rgba(36, 74, 118, 0.08);
}

.pagination.pagination-soft .page-item:not(.disabled) .page-link--arrow:hover{
  background: #e8eef7;
  color: #5e7898;
}

.pagination.pagination-soft .page-item.disabled .page-link--arrow{
  color: #b8c5d5;
  background: #f3f6fa;
  box-shadow: none;
}

.pagination.pagination-soft .page-link--arrow .bi{
  font-size: 13px;
}

@media (max-width: 991.98px){
  .uploads-page--list .uploads-table-card{
    min-height: auto;
  }

  .uploads-list-view,
  .data-screen__list{
    display: none;
  }

  .uploads-cards-view,
  .data-screen__cards{
    display: block;
  }

  .review-list-view{
    display: none;
  }

  .review-cards-view{
    display: block;
  }

  .row-approve-list-view{
    display: none;
  }

  .row-approve-cards-view{
    display: block;
  }

  .section-preview-list-view,
  .section-preview-errors-list-view{
    display: none;
  }

  .section-preview-cards-view,
  .section-preview-errors-cards-view{
    display: block;
  }

  .review-cards-view .decide-checkbox,
  .row-approve-cards-view .decide-checkbox{
    background: #ffffff;
  }

  .table-foot,
  .data-screen__foot{
    flex-direction: column;
    align-items: flex-start;
  }

  .table-foot__right,
  .data-screen__foot-right{
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .table-foot__right::-webkit-scrollbar,
  .data-screen__foot-right::-webkit-scrollbar{
    display: none;
  }

  .table-foot__right .pagination,
  .data-screen__foot-right .pagination{
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* ===== Upload detail decision surface ===== */
.upload-review-back-btn{
  min-width: 140px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  color: #0660d4;
  text-align: center;
}

.decide-checkbox{
  appearance: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #cbd5e0;
  background: #f7faff;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
}

.decide-checkbox::before{
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2px solid #0660d4;
  border-bottom: 2px solid #0660d4;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}

.decide-checkbox:checked::before{
  transform: rotate(-45deg) scale(1);
}

.decide-checkbox:disabled{
  cursor: not-allowed;
  opacity: .7;
}

.bulk-decision-panel{
  margin-top: 16px;
  border-top: 1px solid #d8e3ef;
  padding-top: 16px;
}

.bulk-decision-title{
  color: #5275a1;
}

.cardx__header--no-divider{
  border-bottom: 0 !important;
}

.approval-comment-input{
  width: 100%;
  min-height: 96px;
  padding: 0 0 0 14px;
  border: 1px solid #cbd5e0;
  border-radius: 10px;
  background-color: #ffffff;
  font-family: "ProximaNova", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #000000;
  line-height: 18px;
}

.bulk-decision-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.bulk-decision-actions__right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.decision-btn{
  width: 160px;
  height: 44px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  border-radius: 10px;
}

.decision-btn--approve{
  background: #007c71;
  border-color: #007c71;
  color: #ffffff;
}

.decision-btn--approve:hover{
  background: #006a60;
  border-color: #006a60;
  color: #ffffff;
}

.decision-btn--decline{
  background: #e22522;
  border-color: #e22522;
  color: #ffffff;
}

.decision-btn--decline:hover{
  background: #c41f1d;
  border-color: #c41f1d;
  color: #ffffff;
}

.decision-btn--cancel{
  width: 140px;
  color: #0660d4;
  border: 1px solid #bcd1ee;
  background: #ffffff;
}

.decision-btn--cancel:hover{
  background: #f4f8ff;
  border-color: #9fbee7;
  color: #0556bd;
}

/* ===== KPI cards ===== */
.kpi-card{
  width: 100%;
  height: 90px;
  border-left-width: 6px;
  border-style: solid;
  border-color: transparent;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(64, 110, 184, 0.3);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.kpi-card__body{
  padding: 14px 16px;
  width: 100%;
}

.kpi-card__meta{
  font-size: 12px;
  color: #475f7b;
  opacity: 0.9;
  margin-bottom: 4px;
}

.kpi-card__value{
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: #002949;
}

.kpi-card--info{
  border-left-color: #002949;
  background-image: linear-gradient(90deg, #ffffff 1%, #f5f8fc 100%);
  background-position: center;
  background-size: cover;
}

.kpi-card--pending{
  border-left-color: #ff9800;
  background-image: linear-gradient(90deg, #ffffff 1%, #f5f8fc 100%);
  background-position: center;
  background-size: cover;
}

.kpi-card--approved{
  border-left-color: #2ab076;
  background-image: linear-gradient(90deg, #ffffff 1%, #f5f8fc 100%);
  background-position: center;
  background-size: cover;
}

.kpi-card--declined{
  border-left-color: #e22522;
  background-image: linear-gradient(90deg, #ffffff 1%, #f5f8fc 100%);
  background-position: center;
  background-size: cover;
}

.upload-detail-kpis .kpi-card{
  height: 78px;
  border: 1px solid #dddddd;
  border-left-width: 1px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(64, 110, 184, 0.3);
}

.upload-detail-kpis .kpi-card__body{
  padding: 10px 12px;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.upload-detail-kpis .kpi-card__meta{
  font-size: 11px;
  margin-bottom: 0;
  color: #7f8c8d;
}

.upload-detail-kpis .kpi-card__value{
  font-size: 2rem;
  line-height: 1;
  color: #2c3e50;
}

.upload-detail-kpis .kpi-card--info{
  border-color: #dddddd;
  border-left-color: #dddddd;
  background-image: none;
}

.upload-detail-kpis .kpi-card--pending{
  border-color: #dddddd;
  border-left-color: #dddddd;
  background-image: none;
}

.upload-detail-kpis .kpi-card--approved{
  border-color: #dddddd;
  border-left-color: #dddddd;
  background-image: none;
}

.upload-detail-kpis .kpi-card--declined{
  border-color: #dddddd;
  border-left-color: #dddddd;
  background-image: none;
}

.upload-detail-kpis .kpi-card--info .kpi-card__value{
  color: #2c3e50;
}

.upload-detail-kpis .kpi-card--pending .kpi-card__value{
  color: #f39c12;
}

.upload-detail-kpis .kpi-card--approved .kpi-card__value{
  color: #27ae60;
}

.upload-detail-kpis .kpi-card--declined .kpi-card__value{
  color: #e74c3c;
}

/* ===== Upload new page ===== */
.upload-new-page .page-title{
  margin-bottom: 8px;
}

.upload-new-shell{
  max-width: 860px;
  margin-inline: auto;
}

.upload-new-top-actions{
  max-width: 860px;
  margin: 0 auto 12px;
  display: flex;
  justify-content: flex-end;
}

.upload-new-card{
  padding: 30px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(64, 110, 184, 0.3);
}

.upload-new-card__header{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 22px;
}

.upload-new-card__header .page-title,
.upload-new-card__header .page-subtitle{
  text-align: left;
}

.upload-new-card__header .page-actions{
  margin-left: auto;
}

.upload-new-form{
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.upload-new-block .form-label{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #475f7b;
  margin-bottom: 8px;
}

.upload-new-select{
  width: 100%;
  max-width: 100%;
  height: 42px;
  padding: 0 8px;
  border-radius: 4px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #475f7b;
}

.upload-dropzone{
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 200px;
  border-radius: 20px;
  border: 2px dashed #bfd0e6;
  background: #f5f8fc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
}

.upload-dropzone.is-drag{
  border-color: #8fb1da;
  background: #edf4fd;
}

.upload-file-input{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-dropzone__icon{
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a0c4eb;
}

.upload-dropzone__icon .bi{
  font-size: 50px;
  line-height: 1;
}

.upload-dropzone__title{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #475f7b;
  line-height: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.upload-dropzone__browse-btn{
  width: 120px;
  height: 38px;
  border: 1px solid #0660d4;
  border-radius: 90px;
  background-color: #0661d4;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  user-select: none;
}

.upload-dropzone__meta{
  font-size: 14px;
  color: #6b7f99;
}

.upload-dropzone__filename{
  font-size: 14px;
  color: #244a76;
  font-weight: 500;
}

.upload-new-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.upload-new-actions__right{
  margin-left: auto;
}

@media (max-width: 991.98px){
  .upload-new-card{
    padding: 20px;
  }

  .upload-new-card__header{
    flex-direction: column;
    align-items: flex-start;
  }

  .upload-dropzone{
    min-height: 180px;
  }

  .upload-dropzone__title{
    font-size: 16px;
    flex-direction: column;
    gap: 8px;
  }
}