/* Responsive details (accordion) — compact and tidy */
.dataTable tbody tr.child td {
    padding: 0 !important;
    background: #fafafa;
    white-space: normal !important;
  }
  .dark .dataTable tbody tr.child td { background: #0b0f1a; }
  
  .et-details { padding: 12px 16px; }
  .et-section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6b7280;
    margin: 6px 0 8px;
  }
  .et-dl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 20px;
  }
  @media (max-width: 1024px) { .et-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px)  { .et-dl-grid { grid-template-columns: 1fr; } }
  
  .et-dl {
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
  }
  .dark .et-dl {
    background: #0f172a;
    border-color: #334155;
  }
  .et-dt {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .et-dd {
    font-size: 13px;
    color: #111827;
    font-weight: 500;
    word-break: break-word;
  }
  .dark .et-dd { color: #e5e7eb; }
  
  .et-empty { color: #9ca3af; font-weight: 400; }
  .et-sep { height: 1px; background: #e5e7eb; opacity: .7; margin: 12px 0; }
  
  .et-empties { display: none; margin-top: 8px; }
  .et-toggle-empties {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: #6b7280; cursor: pointer;
  }
  .et-toggle-empties:hover { color: #111827; }
  .dark .et-toggle-empties:hover { color: #e5e7eb; }
  
  /* Minor polish for grouped rows (optional) */
  .dtrg-group,
  .dtrg-start,
  .dtrg-end {
    background: #f3f4f6 !important;
    color: #111827 !important;
    font-weight: 600;
  }


table.dataTable td, table.dataTable th {
    border-color: #e5e7eb !important;
}

/* Wizard (Add Row) */
.et-steps-wrap {
    position: sticky;
    top: 0;
    z-index: 15;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 20px;
}
.dark .et-steps-wrap {
    background: #0b0f1a;
    border-color: #334155;
}
    
.et-steps {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    counter-reset: et-step;
}

.et-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.et-step::before {
    counter-increment: et-step;
    content: counter(et-step);
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    background: #e5e7eb; color: #374151;
    font-size: 12px;
}

.et-step.is-active { 
    color: #111827;
}

.et-step.is-active::before { 
    background: #111827; color: #fff;
}

.et-step.is-done {
    color: #111827;
}

.et-step.is-done::before { 
    content: '✓'; background: #10b981; color: #fff;
}
    
.et-step-page { 
    display: none;
}

.et-step-page.is-active { 
    display: block;
}

/* Fluid page padding to replace kt-container-fixed */
.et-page-pad {
    width: 100%;
    padding-left: clamp(12px, 2vw, 32px);
    padding-right: clamp(12px, 2vw, 32px);
  }
  
  /* Optional: tighten the big white area under the table by giving the main surface a little vertical padding but not too much */
  #scrollable_content {
    padding-top: 16px; /* already have pt-5; adjust if you like */
  }
  
  /* Optional: soften card width on ultra‑wide if you still feel it’s too “edge to edge”.
     Comment this out if you want truly full width. */
  @media (min-width: 1920px) {
    .kt-card-body { padding-left: 20px; padding-right: 20px; }
  }