/* =========================================================
   QTRC isolated styles for tabbed user management UI only
   ========================================================= */

/* Scope everything to the plugin wrapper so theme/Elementor CSS
   is less likely to interfere. */
.qtrc-wrapper,
.qtrc-wrapper * {
  box-sizing: border-box;
}

/* ===== Tabs ===== */
.qtrc-wrapper .qtrc-user-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.qtrc-wrapper .qtrc-tab {
  border: 1px solid #c3c4c7;
  background: #f6f7f7;
  color: #1d2327;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

.qtrc-wrapper .qtrc-tab.is-active {
  background: #ef6c00;
  border-color: #ef6c00;
  color: #fff;
}

.qtrc-wrapper .qtrc-tab--approved.is-active {
  background: #2e7d32;
  border-color: #1b5e20;
  color: #fff;
}

.qtrc-wrapper .qtrc-tab--rejected.is-active {
  background: #b32d2e;
  border-color: #7a1b1c;
  color: #fff;
}

/* ===== Table wrapper for narrow layouts ===== */
.qtrc-wrapper .qtrc-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== Table layout ===== */
.qtrc-wrapper .qtrc-wp-admin-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
  margin-top: 20px;
}

.qtrc-wrapper .qtrc-wp-admin-table.qtrc-fixed {
  table-layout: fixed;
  width: 100%;
}

.qtrc-wrapper .qtrc-wp-admin-table th,
.qtrc-wrapper .qtrc-wp-admin-table td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qtrc-wrapper .qtrc-wp-admin-table th {
  background-color: #f7f7f7;
  font-weight: bold;
}

.qtrc-wrapper .qtrc-wp-admin-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.qtrc-wrapper .qtrc-wp-admin-table td form,
.qtrc-wrapper .qtrc-action-cell form {
  margin: 0;
}

/* ===== Column widths ===== */
.qtrc-wrapper .qtrc-wp-admin-table col.col-email {
  width: 26%;
}

.qtrc-wrapper .qtrc-wp-admin-table col.col-domain {
  width: 12%;
}

.qtrc-wrapper .qtrc-wp-admin-table col.col-approved {
  width: 10%;
}

.qtrc-wrapper .qtrc-wp-admin-table col.col-verified {
  width: 12%;
}

.qtrc-wrapper .qtrc-wp-admin-table col.col-action {
  width: 10%;
}

/* ===== Action buttons ===== */
.qtrc-wrapper .qtrc-btn {
  border: 1px solid transparent;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  padding: 5px 10px;
  line-height: 1.2;
  width: 100%;
}

.qtrc-wrapper .qtrc-btn-approve {
  background: #2e7d32;
  border-color: #1b5e20;
}

.qtrc-wrapper .qtrc-btn-approve:hover {
  background: #256628;
}

.qtrc-wrapper .qtrc-btn-deny {
  background: #ef6c00;
  border-color: #e65100;
}

.qtrc-wrapper .qtrc-btn-deny:hover {
  background: #d66000;
}

.qtrc-wrapper .qtrc-btn-secondary {
  background: #50575e;
  border-color: #3c434a;
}

.qtrc-wrapper .qtrc-btn-secondary:hover {
  background: #3c434a;
}

.qtrc-wrapper .qtrc-btn-delete {
  background: #b32d2e;
  border-color: #7a1b1c;
}

.qtrc-wrapper .qtrc-btn-delete:hover {
  background: #8a2425;
}

.qtrc-wrapper .qtrc-btn-disabled {
  background: #e5e5e5 !important;
  border-color: #c9c9c9 !important;
  color: #666 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* ===== DataTables tweaks (only for this plugin area) ===== */
.qtrc-wrapper .dataTables_wrapper {
  margin-top: 10px;
}

.qtrc-wrapper .dataTables_filter {
  margin-bottom: 12px;
  text-align: right;
}

.qtrc-wrapper .dataTables_filter input {
  margin-left: 6px;
}

.qtrc-wrapper .dataTables_length {
  margin-bottom: 12px;
}

.qtrc-wrapper .dataTables_length select {
  margin: 0 6px;
}

.qtrc-wrapper .dataTables_info {
  margin-top: 8px;
}

.qtrc-wrapper table.dataTable {
  width: 100% !important;
}

/* ===== Mobile tweaks ===== */
@media (max-width: 768px) {
  .qtrc-wrapper .qtrc-wp-admin-table th,
  .qtrc-wrapper .qtrc-wp-admin-table td {
    white-space: normal;
  }

  .qtrc-wrapper .qtrc-btn {
    font-size: 11px;
    padding: 4px 8px;
  }
}


.dataTables_wrapper .dataTables_filter {
    float: left !important;
    text-align: left !important;
}