/* /admin/feedback.css
   Theme-aligned styling that reuses your global tokens from /main.css.
   Fully scoped so it won't affect courses/videos/dashboard.
*/

.page-admin-feedback .page-main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 14px 54px;
}

/* Top actions panel */
.page-admin-feedback .fbTopbar{
  margin-top: 14px;
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.page-admin-feedback .fbKicker{
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted2);
}

.page-admin-feedback .fbMeta{
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

/* Banner */
.page-admin-feedback .fbBanner{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 80, 80, 0.12);
  border: 1px solid rgba(255, 80, 80, 0.25);
  color: rgba(255,255,255,.92);
}

/* Filters */
.page-admin-feedback .fbFilters{
  margin-top: 14px;
  padding: 14px;
  display:grid;
  grid-template-columns: 180px 190px 190px 1fr;
  gap: 12px;
  align-items:end;
}

.page-admin-feedback .fbField{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.page-admin-feedback .fbLabel{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.page-admin-feedback .fbField--search{
  grid-column: 4 / 5;
}

.page-admin-feedback .fbPills{
  grid-column: 1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 4px;
}

/* Error pill variant */
.page-admin-feedback .pill--error{
  background: rgba(255,80,80,0.12);
  border-color: rgba(255,80,80,0.25);
}

/* Table */
.page-admin-feedback .fbTableWrap{
  margin-top: 14px;
  padding: 0;
  overflow:auto;
}

.page-admin-feedback .fbTable{
  width:100%;
  border-collapse:collapse;
  min-width: 920px;
}

.page-admin-feedback .fbTable thead th{
  text-align:left;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  padding: 12px;
  border-bottom: 1px solid rgba(168,182,255,.12);
  background: rgba(0,0,0,.16);
  position: sticky;
  top: 0;
  z-index: 1;
}

:root[data-theme="light"] .page-admin-feedback .fbTable thead th{
  color: rgba(17,19,34,.85);
  background: rgba(0,0,0,.04);
}

.page-admin-feedback .fbTable tbody td{
  padding: 12px;
  border-bottom: 1px solid rgba(168,182,255,.10);
  vertical-align: top;
}

.page-admin-feedback .fbTable tbody tr:hover{
  background: rgba(255,255,255,.03);
}

.page-admin-feedback .fbTable .snippet{
  max-width: 560px;
  color: var(--muted);
  line-height: 1.5;
}

.page-admin-feedback .fbTable .actions{
  white-space: nowrap;
}

/* Pager */
.page-admin-feedback .fbPager{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 12px;
}

.page-admin-feedback .fbPageInfo{
  color: var(--muted2);
  font-weight: 900;
}

/* Responsive: stack filters nicely */
@media (max-width: 980px){
  .page-admin-feedback .fbFilters{
    grid-template-columns: 1fr 1fr;
  }
  .page-admin-feedback .fbField--search{
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px){
  .page-admin-feedback .fbFilters{
    grid-template-columns: 1fr;
  }
}

/* Modal (reuses your existing modal styles in main.css where possible) */
.page-admin-feedback .modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 16px;
  background: rgba(0,0,0,.55);
  z-index: 20000;
}
.page-admin-feedback .modal.is-open{ display:flex; }

.page-admin-feedback .modalCard{
  width: min(920px, 96vw);
  max-height: 86vh;
  overflow:auto;
  border-radius: 18px;
  border: 1px solid rgba(168,182,255,.18);
  background: rgba(15,17,37,.96);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
}

:root[data-theme="light"] .page-admin-feedback .modalCard{
  background: rgba(245,247,255,.96);
  border-color: rgba(0,0,0,.12);
}

.page-admin-feedback .modalHead{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(168,182,255,.12);
}

.page-admin-feedback .modalTitle{ font-weight: 900; }
.page-admin-feedback .modalMeta{ margin-top: 4px; font-size: 12px; color: var(--muted2); }

.page-admin-feedback .modalBody{
  padding: 14px;
  white-space: pre-wrap;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
}