/* ============================
   Upload Form Grid
   ============================ */
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 16px; /* vertical spacing between sections */
}

/* ============================
   Card Header Override for Upload Page
   ============================ */
.upload-page .card h2 {
  margin: -30px -30px 20px -30px;
  padding: 15px 20px;
  background: var(--color-bg-light);
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-accent);
  font-size: 1.3rem;
  font-weight: bold;
  border-radius: 8px 8px 0 0;
}

/* ============================
   File Upload Section
   ============================ */
.upload-section {
  display: flex;
  flex-direction: column;
}
.upload-section label {
  font-weight: bold;
  margin-bottom: 4px;
}
.upload-section input[type="file"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}
/* ============================
   Validation Section (badges row)
   ============================ */
#validationResults {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;      /* small spacing from file input */
  min-height: 0;
}

#validationResults:empty {
  display: none;        /* hide row completely if no badges */
}

/* ============================
   Validation Badges (classic style)
   ============================ */
.validation-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;    /* ✅ more padding → chunkier look */
  border-radius: 4px;
  font-size: 0.85rem;    /* ✅ larger text */
  line-height: 1.3;
  font-weight: 500;
  border: 1px solid transparent;
  box-sizing: border-box;
}

/* Variants */
.validation-badge.valid {
  background: #e6f9e6;
  color: var(--color-success);
  border-color: #b2d8b2;
}

.validation-badge.invalid {
  background: #fdecea;
  color: var(--color-error);
  border-color: #f5b5b5;
}

.validation-badge.note {
  background: #fffdf0;
  color: #856404;
  border-color: #f5e6a2;
  font-style: italic;
}

/* Promo badge variations */
.validation-badge.promo-available {
  background: #e6f9e6;       /* pale green like .valid */
  color: var(--color-success);
  border: 1px solid #b2d8b2; /* subtle green border */
}

.validation-badge.promo-expired {
  background: #fdecea;       /* pale red like .invalid */
  color: var(--color-error);
  border: 1px solid #f5b5b5; /* subtle red border */
}

/* ECB badge with subtle darker gold border */
/* ECB badge: keep .note background, just deepen the border slightly */
.validation-badge.ecb {
  border: 1px solid #e6d88e; /* just a little darker than #fff3cd */
  /* no background here – it inherits from .validation-badge.note */
}





/* ============================
   ECB Info Box
   ============================ */

.hidden {
  display: none !important;
}

   
.ecb-section {
  display: block;
  background: var(--color-bg-light);
  border-left: 4px solid var(--color-accent);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.3;
  margin-top: 8px;
}

.ecb-section label {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

#provisionalWrapper {
  display: block;   /* default when visible */
}
#provisionalWrapper.hidden {
  display: none;    /* hidden when class is applied */
}


/* ============================
   Losses + Exemption Section
   ============================ */
.losses-exemption-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: end;
}
.losses-exemption-section label {
  font-weight: bold;
  margin-bottom: 4px;
}

/* ============================
   Promo + Submit Section
   ============================ */
.promo-submit-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: end;
}
/* Match button width + height to inputs */
.promo-submit-section button {
  width: 100%;   /* ✅ full width */
  height: 42px;
  line-height: normal;
  box-sizing: border-box;
}

/* ============================
   Inputs
   ============================ */
.form-input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 100%;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}

/* ============================
   Process File Button
   ============================ */
.processFileBtn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  width: 100%;   /* matches input width */
}

.processFileBtn:hover:enabled {
  background: #1a6640;   /* lighter green hover */
}

.processFileBtn:disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
}



/* ============================
   Steps Tables
   ============================ */
.steps-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.95rem;
  table-layout: auto;
}
.steps-table th {
  background: var(--color-bg-light);
  color: var(--color-primary);
  padding: 10px;
  border-bottom: 2px solid var(--color-accent);
}
.steps-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #ccc;
}
.steps-table tr:nth-child(even) { background: #f9f9f9; }
.steps-table tr.highlight-green { background: #e6f9e6; font-weight: bold; }
.steps-table tr.highlight-red   { background: #fdecea; font-weight: bold; }
/* Column alignment */
.steps-table td:nth-child(1),
.steps-table td:nth-child(2) { text-align: left; }
.steps-table td:nth-child(3) { text-align: right; }
.steps-table td:nth-child(4) { text-align: center; }
.steps-legend {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  font-size: 0.9rem;
}

/* ============================
   Headline Table
   ============================ */
.headline-table {
  margin-top: 8px;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  position: relative;
}

.headline-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #ccc;
}
.headline-table td:first-child {
  background: var(--color-bg-light);
  font-weight: bold;
  color: var(--color-primary);
  width: 30%;
  border-left: 4px solid var(--color-accent);
}
.headline-table td:last-child { text-align: left; }
.headline-table tr:nth-child(even) td:last-child { background: #fafafa; }
.headline-table .liability-due td:last-child {
  background: #fdecea;
  font-weight: bold;
  color: var(--color-error);
}
.headline-table .losses-row td:last-child {
  font-weight: bold;
  color: var(--color-success);
  background: none;
}
.headline-table .fx-comment td:last-child { font-style: italic; }

/* ============================
   Loading Spinner
   ============================ */
.card.loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: var(--color-primary);
}
.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #ccc;
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} }

/* ============================
   Responsive
   ============================ */
@media (max-width: 700px) {
  .losses-exemption-section,
  .promo-submit-section {
    grid-template-columns: 1fr;
  }
}

/* --- Safety: prevent stray badges from rendering in #summary unless inside a table --- */
#summary .validation-badge { display: none; }
#summary table .validation-badge { display: inline-flex; }  /* keep Notes-table badges visible */

/* ============================
   Special Rules (B&B + ECB)
   ============================ */
#specialRulesBox label {
  font-weight: 400;        /* normal, avoids bold */
  font-size: 0.95rem;      /* slightly larger than form labels */
  color: #222;             /* darker than notes, lighter than headers */
  letter-spacing: 0.2px;   /* subtle spacing for clarity */
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}





#specialRulesBox ul {
  margin: 4px 0 0 24px;   /* ✅ slight indent */
  padding: 0;
  font-size: 0.85rem;     /* ✅ smaller than main text */
  color: #555;            /* ✅ softer tone */
  line-height: 1.35;
}