/* Partner upload page */

#docupload {
  --du-orange-main: #FF795B;
  --du-orange-light: #FFEBE6;
  --du-orange-dark: #D62700;
  --du-orange-hover-dark-bg: #F56544;
  --du-orange-softer: #FDF4EF;
  --du-grey-dark: #272727;
  --du-grey-medium: #545352;
  --du-grey-light: #F7F7F7;
  --du-ok: #2F8F5F; --du-ok-soft: #E6F4ED;
  --du-warn: #B58308; --du-warn-soft: #FBF1D7;
  --du-err: #C0392B; --du-err-soft: #FBE9E6;
  --du-mono: 'JetBrains Mono', ui-monospace, monospace;
  --du-shadow: 0px 1px 4px 2px rgba(128, 128, 128, 0.15);

  font-family: 'Epilogue', sans-serif;
  font-size: 15px;
  color: var(--du-grey-dark);
  width: 100%;
  max-width: 1320px;
}
.pagebackoffice .user-accounts-header { height: auto; padding-bottom: 0; }
#docupload .user-accounts-title { height: auto; padding: 0.25rem 1.5rem; }
.pagebackoffice { padding-left: 2rem; }

#docupload h1 { font-family: 'Saira', sans-serif; font-size: 35px; font-weight: 700; line-height: 1.1; }
#docupload .lede { color: var(--du-grey-medium); font-size: 15px; line-height: 1.6; max-width: 940px; margin-bottom: 8px; }
#docupload .lede b { color: var(--du-grey-dark); font-weight: 600; }

/* section header */
#docupload .sec-h {
  display: flex; align-items: center; gap: 14px; color: var(--du-orange-main);
  font-family: 'Saira', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: 0.04em;
  text-transform: uppercase; margin: 40px 0 18px;
}
#docupload .sec-h .arrow { width: 38px; height: 16px; position: relative; flex: 0 0 auto; }
#docupload .sec-h .arrow::before { content: ""; position: absolute; left: 0; top: 7px; width: 100%; height: 2px; background: var(--du-orange-main); }
#docupload .sec-h .arrow::after {
  content: ""; position: absolute; right: 0; top: 2px; width: 11px; height: 11px;
  border-top: 2px solid var(--du-orange-main); border-right: 2px solid var(--du-orange-main); transform: rotate(45deg);
}

/* dropzone */
#docupload .dropzone {
  border: 2px dashed var(--du-orange-main); background: var(--du-orange-softer); border-radius: 16px;
  padding: 36px; display: grid; grid-template-columns: 96px 1fr auto; gap: 28px; align-items: center;
  transition: background .18s ease, transform .18s ease;
}
#docupload .dropzone.dragging { background: var(--du-orange-light); transform: scale(1.004); }
#docupload .dz-icon {
  width: 96px; height: 96px; background: #fff; border: 1px solid var(--du-orange-main); border-radius: 18px;
  display: grid; place-items: center; color: var(--du-orange-main);
}
#docupload .dz-title { font-family: 'Saira', sans-serif; font-size: 20px; font-weight: 600; margin-bottom: 6px; color: var(--du-grey-dark); }
#docupload .dz-sub { color: var(--du-grey-medium); font-size: 14px; line-height: 1.55; max-width: 560px; }
#docupload .dz-sub b { color: var(--du-grey-dark); font-weight: 600; }
#docupload .dz-sub .pill {
  background: #fff; border: 1px solid var(--du-orange-light); border-radius: 5px; padding: 1px 8px;
  font-family: var(--du-mono); font-size: 12px; color: var(--du-grey-medium); margin: 0 2px;
}
#docupload .dz-cta {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px;
  background: var(--du-orange-main); color: #fff; border: none; border-radius: 12px;
  font-family: 'Saira', sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
  box-shadow: var(--du-shadow); transition: background .2s ease, transform .15s ease;
}
#docupload .dz-cta:hover { background: var(--du-orange-hover-dark-bg); transform: scale(1.05); }
#docupload .dz-cta:active { box-shadow: none; transform: scale(1.01); }

/* session-level banner */
#docupload .session-banner {
  display: none; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 12px;
  margin-top: 22px; font-size: 14.5px; font-weight: 600;
}
#docupload .session-banner.ok { display: flex; background: var(--du-ok-soft); color: var(--du-ok); }
#docupload .session-banner.warn { display: flex; background: var(--du-warn-soft); color: var(--du-warn); }

/* stat chips */
#docupload .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
#docupload .stat { background: #fff; border: 1px solid #ECEAE8; border-radius: 12px; padding: 16px 18px; }
#docupload .stat .s-label {
  font-family: 'Saira', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--du-grey-medium); margin-bottom: 6px;
}
#docupload .stat .s-val { font-size: 32px; font-weight: 700; line-height: 1; }
#docupload .stat.in-progress .s-val { color: var(--du-orange-main); }
#docupload .stat.validated .s-val { color: var(--du-ok); }
#docupload .stat.attention .s-val { color: var(--du-err); }

/* queue table */
#docupload .table-wrap { border: 1px solid #ECEAE8; border-radius: 12px; background: #fff; overflow: hidden; }
#docupload .t-head, #docupload .t-row {
  display: grid; grid-template-columns: minmax(0,2.4fr) 160px minmax(0,2fr) 90px;
  gap: 18px; align-items: center; padding: 0 20px;
}
#docupload .t-head { height: 46px; background: var(--du-orange-light); border-bottom: 1px solid #ECEAE8; }
#docupload .t-head .th {
  font-family: 'Saira', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--du-grey-dark);
}
#docupload .t-head .th.right { text-align: right; }
#docupload .t-row { min-height: 64px; border-bottom: 1px solid var(--du-grey-light); transition: background .12s; }
#docupload .t-row:last-child { border-bottom: none; }
#docupload .t-row:hover { background: #FAFAF8; }
#docupload .f-name { font-weight: 600; font-size: 14.5px; color: var(--du-grey-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#docupload .f-meta { font-size: 12px; color: var(--du-grey-medium); margin-top: 2px; }

#docupload .badge {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 26px; padding: 4px 11px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
#docupload .badge svg { width: 13px; height: 13px; flex: 0 0 auto; }
#docupload .badge .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
#docupload .badge.ok { background: var(--du-ok-soft); color: var(--du-ok); }
#docupload .badge.err { background: var(--du-err-soft); color: var(--du-err); }
#docupload .badge.uploading { background: var(--du-orange-light); color: var(--du-orange-dark); }
#docupload .badge.processing { background: var(--du-warn-soft); color: var(--du-warn); }
#docupload .badge.queued { background: var(--du-grey-light); color: var(--du-grey-medium); }
#docupload .badge.awaiting { background: var(--du-warn-soft); color: var(--du-warn); }

#docupload .prog { display: flex; flex-direction: column; gap: 5px; }
#docupload .bar { height: 6px; background: var(--du-grey-light); border-radius: 999px; overflow: hidden; }
#docupload .bar > i { display: block; height: 100%; background: var(--du-orange-main); border-radius: 999px; transition: width .25s ease; }
#docupload .bar.ok > i { background: var(--du-ok); }
#docupload .bar.err > i { background: var(--du-err); }
#docupload .bar.indet > i { width: 40% !important; background: linear-gradient(90deg, transparent, var(--du-warn), transparent); animation: du-indet 1.3s linear infinite; }
@keyframes du-indet { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
#docupload .bar-meta { display: flex; justify-content: space-between; gap: 10px; font-family: var(--du-mono); font-size: 11px; color: var(--du-grey-medium); }
#docupload .bar-meta.err { color: var(--du-err); }
#docupload .bar-meta.err span { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }

#docupload .t-actions { display: flex; justify-content: flex-end; }
#docupload .iconbtn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid #ECEAE8; background: #fff;
  display: grid; place-items: center; color: var(--du-grey-medium); cursor: pointer; transition: all .15s ease;
}
#docupload .iconbtn:hover { border-color: var(--du-orange-main); color: var(--du-orange-main); background: var(--du-orange-softer); }

#docupload .queue-empty { padding: 22px 20px; text-align: center; color: var(--du-grey-medium); font-size: 14px; }
#docupload .queue-note {
  display: none; align-items: center; gap: 8px; background: var(--du-orange-softer);
  border: 1px solid var(--du-orange-light); color: var(--du-orange-dark); padding: 8px 14px; border-radius: 999px;
  font-size: 13.5px; margin-bottom: 14px;
}
#docupload .queue-note.show { display: inline-flex; }
#docupload .queue-note svg { width: 14px; height: 14px; }

/* collapsible queue */
#docupload .t-head.queue-head { cursor: pointer; user-select: none; }
#docupload .q-caret { width: 14px; height: 14px; margin-left: 6px; vertical-align: middle; transition: transform .25s ease; }
#docupload .table-wrap.collapsed .q-caret { transform: rotate(-90deg); }
#docupload .table-wrap.collapsed .queue-body { display: none; }

/* duplicate confirmation modal */
#docupload .du-modal-overlay:not([hidden]) {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  display: grid; place-items: center; z-index: 1000;
}
#docupload .du-modal-card {
  background: #fff; border-radius: 16px; padding: 32px 36px; max-width: 480px; width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
#docupload .du-modal-title {
  font-family: 'Saira', sans-serif; font-size: 18px; font-weight: 700; color: var(--du-grey-dark);
  margin: 0 0 12px;
}
#docupload .du-modal-body {
  font-size: 14.5px; color: var(--du-grey-medium); line-height: 1.55; margin: 0 0 24px;
}
#docupload .du-modal-actions { display: flex; justify-content: flex-end; gap: 12px; }
#docupload .du-modal-btn {
  height: 40px; padding: 0 20px; border-radius: 10px; border: none;
  font-family: 'Saira', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}
#docupload .du-modal-btn.secondary { background: var(--du-grey-light); color: var(--du-grey-dark); }
#docupload .du-modal-btn.secondary:hover { background: #ECEAE8; }
#docupload .du-modal-btn.primary { background: var(--du-orange-main); color: #fff; }
#docupload .du-modal-btn.primary:hover { background: var(--du-orange-hover-dark-bg); transform: scale(1.04); }

/* responsive */
@media (max-width: 1160px) {
  #docupload .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1040px) {
  #docupload .dropzone { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 18px; padding: 30px 26px; }
  #docupload .dz-sub { margin: 0 auto; }
  #docupload .t-head { display: none; }
  #docupload .t-row {
    grid-template-columns: 1fr; grid-template-areas: "name" "status" "prog";
    gap: 8px 14px; padding: 16px 18px;
  }
  #docupload .t-row .c-name { grid-area: name; min-width: 0; }
  #docupload .t-row .c-status { grid-area: status; }
  #docupload .t-row .c-prog { grid-area: prog; }
  #docupload .t-row .c-actions { display: none; }
}