/* =========================================================
   UI BASE – TYPOGRAPHY & ROWS
   ========================================================= */

/* ================= ROWS ================= */

.row,
.nf-row,
.ran-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 13px;
}

/* ================= STATUS DOTS (ROWS ONLY) ================= */

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  display: inline-block;
}

.dot.green  { background: var(--green); }
.dot.yellow { background: var(--yellow); }
.dot.red    { background: var(--red); }
.dot.gray   { background: var(--gray); }

/* ================= SECTION TEXT ================= */

.section-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #ffffff;
  margin-bottom: 6px;
}

.section-subline {
  font-size: 13px;
  color: #9aa4b2;
  margin: 0;
  line-height: 1.4;
}

/* ================= PLACEHOLDERS ================= */

.placeholder {
  text-align: center;
  color: #7a8599;
  padding: 20px 0;
}

/* ======================================================
   MODAL BASE
====================================================== */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal.hidden {
  display: none;
}

/* ======================================================
   MODAL CARD
====================================================== */

.modal-card {
  background: #0f1724;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  padding: 22px;

  /* 🔑 layout contract */
  display: flex;
  flex-direction: column;
  gap: 14px;

  width: min(96vw, 1200px);
  max-height: 86vh;
  overflow: hidden; /* modal never scrolls */
}

/* ======================================================
   HEADER
====================================================== */

.import-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.import-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #fff;
}

.import-underline {
  width: 220px;
  height: 3px;
  margin-top: 6px;
  background: rgba(255,165,0,0.95);
  border-radius: 999px;
}

.section-subline {
  font-size: 13px;
  color: #9aa4b2;
}

/* ======================================================
   FILE + COMMIT ROW
====================================================== */

.import-file-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Reserve space for filename injection */
.import-file-name {
  min-width: 240px;
  max-width: 340px;
  padding: 8px 12px;

  font-size: 13px;
  color: #9aa4b2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}

/* Visual breathing room before Commit */
#btn-import-next {
  margin-left: 6px;
}

/* ======================================================
   PREVIEW TABLE (JS INJECTED) — FINAL SCROLL FIX
====================================================== */

/* JS creates <div id="importPreviewTable"> */
#importPreviewTable{
  /* IMPORTANT: make it a real scroll box */
  display: block !important;

  /* Your JS uses maxHeight=320px; we enforce the same deterministically */
  height: 320px !important;
  max-height: 320px !important;

  overflow-y: auto !important;
  overflow-x: auto !important;

  /* Never let flex sizing collapse it */
  flex: 0 0 auto !important;
  min-height: 320px !important;

  margin-top: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;

  background: rgba(0,0,0,0.15);
}

/* table inside wrapper */
#importPreviewTable table{
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

/* cells */
#importPreviewTable th,
#importPreviewTable td{
  padding: 12px 14px;
  font-size: 13px;
  text-align: left;
}

/* sticky header */
#importPreviewTable th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(12,20,32,0.98);
  color: #ffffff;
  font-weight: 600;
}

/* body */
#importPreviewTable td{
  color: #dbe2ea;
}

/* ======================================================
   ORANGE SCROLLBARS — FORCE VISIBLE
====================================================== */

#importPreviewTable::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}

#importPreviewTable::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}

#importPreviewTable::-webkit-scrollbar-thumb{
  background: rgba(255,165,0,0.90);
  border-radius: 10px;
}

#importPreviewTable::-webkit-scrollbar-thumb:hover{
  background: rgba(255,165,0,1);
}

/* Firefox */
#importPreviewTable{
  scrollbar-width: auto;
  scrollbar-color: rgba(255,165,0,0.90) rgba(255,255,255,0.06);
}
/* ======================================================
   IMPORT SUBSCRIBERS – PREVIEW MESSAGE VISIBILITY
====================================================== */

#importSubsModal .form-msg {
  display: block;        /* override forms.css */
  margin-top: 10px;
  font-size: 13px;
}

/* success */
#importSubsModal .form-msg.ok-msg {
  color: #22c55e;
}

/* warning */
#importSubsModal .form-msg.warn-msg {
  color: #f59e0b;
}

/* error */
#importSubsModal .form-msg.err-msg {
  color: #ef4444;
}