/* ==========================================================================
   upload-page.css — consistent with kpi.css + chart-card + section-card
   ========================================================================== */

:root{
  --upload-muted: rgba(0,0,0,0.55);
  --upload-text: rgba(0,0,0,0.82);
  --upload-border: rgba(0,0,0,0.08);
}

/* Use same spacing rhythm as other pages */
.page-section{
  margin-top: 28px;
}

/* Make KPI card clickable (missing products) */
.kpi-clickable{
  cursor: pointer;
}
.kpi-clickable .kpi-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.10);
}

/* Upload card header */
.upload-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-card__header{
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding-bottom: 10px;
}

.upload-card__kicker{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--upload-muted);
}

.upload-card__title{
  font-size: 22px;
  font-weight: 900;
  color: var(--upload-text);
  margin-top: 4px;
}

.upload-card__subtitle{
  font-size: 13px;
  font-weight: 600;
  color: var(--upload-muted);
  margin-top: 6px;
  max-width: 820px;
}

/* Dropzone */
.upload-dropzone{
  width: 100%;
  border: 2px dashed rgba(0,0,0,0.18);
  border-radius: 12px;
  background: #f8f9fa;
  padding: 16px 14px;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.upload-dropzone:hover{
  background: #ffffff;
  border-color: rgba(13,110,253,0.45);
  transform: translateY(-1px);
}

.upload-dropzone__text{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,0.75);
}

.upload-dropzone__link{
  color: #0d6efd;
  text-decoration: underline;
}

.upload-feedback{
  margin-top: 10px;
}

/* Action buttons: unified sizing */
.upload-action-btn{
  width: 100%;
  height: 44px;
  font-weight: 800;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* AgGrid: ensure it fills section-card body */
.upload-grid{
  height: 100%;
  width: 100%;
}

/* Optional: make section-card bodies not collapse */
.section-card__body{
  min-height: 0;
}


/* Clickable KPI card */
.kpi-clickable .kpi-card{
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Subtle “click affordance” */
.kpi-clickable .kpi-card::after{
  content: "Klik om te openen";
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(13,110,253,0.75);
  opacity: 0.0;
  transform: translateY(2px);
  transition: opacity 140ms ease, transform 140ms ease;
}

/* Hover + focus */
.kpi-clickable .kpi-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.10);
  border-color: rgba(13,110,253,0.35);
}

.kpi-clickable .kpi-card:hover::after{
  opacity: 1;
  transform: translateY(0);
}

.kpi-clickable:focus-within .kpi-card{
  outline: none;
  box-shadow: 0 0 0 3px rgba(13,110,253,0.18), 0 12px 26px rgba(0,0,0,0.10);
}

.kpi-card{
  height: clamp(100px, 10vh, 160px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Upload page – action buttons */
.upload-actions-row{
  margin-top: 1rem;
  gap: 1rem;
}

.upload-action-btn{
  width: 100%;
  font-weight: 700;
  font-size: 1rem;
  padding: 10px 20px;

  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);

  display: flex;
  align-items: center;
  justify-content: center; /* 👈 icon + tekst netjes gecentreerd */

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.upload-action-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}

.upload-action-btn i{
  font-size: 1.1rem;
  opacity: 0.9;
}

/* =========================
   Upload page base
   ========================= */
.upload-page{
  padding-bottom: 24px;
}

.upload-section{
  margin-top: 14px;
}

/* helpers */
.hidden{ display: none; }
.btn-wide{ width: 100%; font-weight: 700; }

/* =========================
   KPI clickable (missing products)
   ========================= */
.kpi-clickable{
  cursor: pointer;
  outline: none;
}
.kpi-clickable:focus{
  box-shadow: 0 0 0 4px rgba(13,110,253,0.25);
  border-radius: 14px;
}

/* =========================
   Upload card / dropzone
   ========================= */
.upload-card__header{
  margin-bottom: 10px;
}

.upload-card__title{
  font-size: 18px;
  font-weight: 900;
  color: rgba(0,0,0,0.82);
}

.upload-card__subtitle{
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,0.55);
  margin-top: 4px;
}

.upload-dropzone{
  width: 100%;
  border: 2px dashed rgba(0,0,0,0.18);
  border-radius: 12px;
  background: rgba(0,0,0,0.02);
  padding: 18px 14px;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.upload-dropzone:hover{
  background: rgba(0,0,0,0.03);
  border-color: rgba(13,110,253,0.35);
}

.upload-dropzone__text{
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,0.72);
}

.upload-dropzone__link{
  color: rgb(13,110,253);
  text-decoration: underline;
}

.upload-feedback{
  margin-top: 10px;
}

/* =========================
   Action buttons (reuse)
   ========================= */
.upload-action-btn{
  width: 100%;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 10px 14px;

  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.10);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.upload-action-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.14);
}

.upload-actions-row{
  margin-top: 14px;
}

/* =========================
   Modals
   ========================= */
.modal-scroll{
  max-height: 400px;
  overflow-y: auto;
}

/* Warnings panel (add/edit modal) */
.upload-warnings-panel{
  border: 1px solid rgba(220,53,69,0.55);
  border-radius: 10px;
  background: rgba(220,53,69,0.08);
  color: rgb(220,53,69);
  padding: 12px;
  max-height: 20vh;
  overflow-y: auto;
}

/* Optional: AgGrid wrapper */
.upload-grid{
  margin-top: 6px;
}

/* =========================
   Vertical spacing rules
   ========================= */

/* Alle grote blokken dezelfde afstand */
.upload-section{
  margin-top: 16px;   /* 🔑 kies één waarde */
}

/* Specifiek: grid mag iets meer lucht hebben */
.upload-grid-section{
  margin-top: 20px;
}

.upload-action-btn:disabled,
.btn-wide:disabled{
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}