/* ===== Admin responsive + clean tabs & table ===== */

/* container card */
.admin-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), #fff);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(12,40,80,0.06);
  margin: 18px auto;
}

/* tabs / actions row */
.admin-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end; /* tabs on right for RTL feel */
  align-items:center;
  margin-bottom: 18px;
}

/* each tab button */
.admin-tab, .admin-cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:30px;
  font-weight:600;
  cursor:pointer;
  border: none;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
}

/* default - non active */
.admin-tab {
  background: rgba(255,255,255,0.95);
  color: #0f4fc0;
  border: 1px solid rgba(15,23,42,0.03);
}

/* CTA (primary) */
.admin-cta {
  background: linear-gradient(90deg,#4fceff,#3aa7ff);
  color: #fff;
}

/* active tab style (white bg) */
.admin-tab.active {
  background: #fff;
  color: #0b6fe6;
  box-shadow: 0 10px 24px rgba(11,111,230,0.12);
  transform: translateY(-2px);
}

/* Table wrapper */
.admin-table-wrapper {
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Desktop table defaults */
.admin-table-wrapper table {
  width:100%;
  border-collapse:collapse;
  min-width: 760px; /* allow horizontal scroll if many cols */
}

.admin-table-wrapper th, .admin-table-wrapper td {
  padding: 12px 10px;
  text-align: right; /* rtl */
  vertical-align: middle;
  border-bottom: 0;
  color: #24303f;
}

/* shrink long text and show ellipsis */
.admin-table-wrapper td .cell-value {
  display: inline-block;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* action links style and layout */
.table-actions {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
.table-actions a, .table-actions button {
  font-size:14px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:6px 8px;
}

/* colored action hints */
.table-actions .view { color:#0b6fe6; }
.table-actions .edit { color:#ffa500; }
.table-actions .delete { color:#e04343; }

/* ===== Mobile: convert rows to cards ===== */
@media (max-width:520px) {

  .admin-card { padding:14px; margin: 10px 12px; }

  .admin-actions { justify-content:center; }

  /* hide table headers, show rows as stacked cards */
  .admin-table-wrapper table { display:block; }
  .admin-table-wrapper thead { display:none; }
  .admin-table-wrapper tbody { display:block; }
  .admin-table-wrapper tbody tr {
    display:block;
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    margin: 10px 0;
    box-shadow: 0 6px 18px rgba(15,23,42,0.04);
  }
  .admin-table-wrapper td {
    display:flex;
    justify-content:space-between;
    padding:8px 6px;
    border-bottom: 1px dashed rgba(0,0,0,0.04);
  }
  .admin-table-wrapper td .cell-label {
    color: #6b7280;
    font-size:13px;
    margin-left: 8px;
    white-space:nowrap;
  }
  .admin-table-wrapper td .cell-value {
    text-align:left;
    max-width: 60%;
    white-space: normal;
    overflow: visible;
  }
  .admin-table-wrapper td:last-child { border-bottom: none; }

  /* make action buttons wrap and easier to tap */
  .table-actions { flex-wrap:wrap; gap:6px; justify-content:flex-end; }
  .table-actions a, .table-actions button { padding:8px 10px; font-size:14px; }
}