/* rom-styles.css (teal scheme, updated) */
.rom-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin: 0;
  font-family: "DT Sans", Arial, sans-serif;
  font-size: 12px;
  color: #173a36;
}

/* header centered */
.rom-title { text-align:center; margin:6px 0 12px 0; font-size:18px; color: #0d7a73; }

/* controls centered horizontally */
.rom-controls { display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.rom-filters { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }

/* primary filter */
.rom-primary-filter { padding:8px 10px; border-radius:4px; border:1px solid #cfe6e3; background:#fff; }

/* inputs */
#rom_user_filter { padding:8px 10px; border:1px solid #cfe6e3; border-radius:4px; min-width:220px; }
#rom_user_select { padding:8px; border:1px solid #cfe6e3; border-radius:4px; min-width:320px; max-width:520px; background:#fff; }

/* export button */
.tutor-profiles-export, #rom_export_btn { padding:8px 12px; border-radius:4px; background:#0d7a73; color:#fff; text-decoration:none; display:inline-block; }

/* profile */
#rom_profile_details { margin-top:12px; border:1px solid #e6f3f1; border-radius:6px; overflow:hidden; background:#fff; max-width:1200px; margin-left:auto; margin-right:auto; }
#rom_profile_details table { width:100%; border-collapse:collapse; }
#rom_profile_details th { text-align:left; background:#f3fbfa; padding:10px 12px; width:28%; vertical-align:top; font-weight:700; color:#0d7a73; }
#rom_profile_details td { padding:10px 12px; word-wrap:break-word; white-space:normal; vertical-align:top; color:#000; }

/* avatar + name */
#rom_profile_details td[data-field="avatar"] img, #rom_profile_details td[data-field="avatar"] > div { display:block; margin-bottom:8px; border-radius:50%; }
#rom_profile_details td[data-field="name"] { font-weight:700; color:#0d7a73; }

/* table wrapper (full width) */
.rom-orders-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; padding-top:10px; }

/* orders table */
.rom-orders-table { width:100%; min-width:1200px; border-collapse:collapse; table-layout:fixed; font-size:12px; font-family:"DT Sans", Arial, sans-serif; }
.rom-orders-table th, .rom-orders-table td {
  text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid #e6f3f1; word-wrap:break-word; overflow-wrap:break-word;
  min-width:100px; /* ensure no column shrinks below 100px */
}

/* product column larger */
.rom-orders-table th.col-products, .rom-orders-table td:nth-child(3) { width:34%; min-width:200px; }
.rom-orders-table th.col-status, .rom-orders-table td:nth-child(7) { width:8%; min-width:100px; }

/* counters */
.rom-counters { display:flex; gap:18px; align-items:center; justify-content:center; font-size:13px; }
.rom-counter { text-align:center; min-width:110px; }
.rom-counter strong { display:block; font-size:16px; color:#0d7a73; }

/* actions column and buttons */
.rom-actions-cell { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-start; min-width:200px; box-sizing:border-box; }
.rom-action-btn { display:inline-block; }

/* Slightly larger, uniform buttons */
.rom-action-btn a, .rom-action-btn button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  height:40px;
  padding:0 12px;
  border-radius:6px;
  text-decoration:none;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg,#14a69e 0%,#0d7a73 100%);
  color: #fff;
  font-weight:600;
  box-shadow:0 2px 6px rgba(13,122,115,0.12);
  text-transform: none;
  letter-spacing: normal;
  font-size:13px;
  line-height:1;
}
.rom-action-btn a:hover, .rom-action-btn button:hover { transform: translateY(-1px); }

/* --- Actions column sizing: make room for buttons and prevent overlap --- */
.rom-orders-table th:last-child,
.rom-orders-table td:last-child {
  width: 260px;
  min-width: 220px;
}

/* make sure Order Details / action buttons don't overflow the cell */
.rom-orders-table td, .rom-orders-table th { overflow-wrap:break-word; word-break:break-word; }

/* modal styles */
.rom-modal { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; }
.rom-modal-backdrop { position:absolute; inset:0; background:rgba(7,40,38,0.55); }
.rom-modal-inner { position:relative; width:760px; max-width:95%; background:#fff; border-radius:8px; padding:18px; box-shadow:0 18px 50px rgba(7,40,38,0.3); z-index:100000; }
.rom-modal h3 { margin:0 0 10px 0; color:#0d7a73; }
.rom-modal-body label { display:block; font-size:12px; margin:8px 0 4px; color:#0b5d57; }
.rom-modal-body input[type="text"], .rom-modal-body textarea { width:100%; padding:8px; border:1px solid #dfeff0; border-radius:4px; box-sizing:border-box; font-size:13px; }
.rom-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.rom-btn-primary { background:#0d7a73; color:#fff; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; }
.rom-btn-secondary { background:#f2f7f6; color:#0b5d57; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; }

@media (max-width:1400px) {
  .rom-orders-table { min-width:1000px; }
}
@media (max-width:1100px) {
  .rom-orders-table { min-width:900px; }
}
@media (max-width:720px) {
  .rom-controls { flex-direction:column; align-items:stretch; }
  .rom-filters { justify-content:flex-start; }
  #rom_profile_details table, #rom_profile_details tr, #rom_profile_details th, #rom_profile_details td { display:block; width:100%; }
  #rom_profile_details th { display:inline-block; width:40%; padding:8px; background:transparent; color:#0d7a73; font-weight:600; }
  #rom_profile_details td { display:inline-block; width:60%; padding:8px; }
  .rom-action-btn a, .rom-action-btn button { min-width:100px; height:36px; font-size:12px; }
  .rom-orders-table { font-size:11px; }
}