/* Admin Categories (SPA) */

.settings-wrapper.admin-cat-page {
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: saturate(1.1) blur(2px);
  padding: var(--pad);
  width: min(100%, 1160px);
  margin: 14px auto 0;
}

.settings-wrapper.admin-cat-page .settings-title {
  margin: -4px -4px 14px;
  padding: 12px 16px;
  background: var(--grad-primary);
  color: var(--title-color);
  text-align: center;
  border-radius: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.settings-wrapper.admin-cat-page .message {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  margin-bottom: 12px;
}
.settings-wrapper.admin-cat-page .message.error { background: rgba(255,86,86,.12); border-color: rgba(255,86,86,.35); color: var(--error-text-color); }
.settings-wrapper.admin-cat-page .message.success { background: rgba(56,189,148,.12); border-color: rgba(56,189,148,.35); color: var(--success-text-color); }

.settings-wrapper.admin-cat-page .admin-cat__table-wrap {
  width: 100%;
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

.settings-wrapper.admin-cat-page .admin-cat__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: .93rem;
  line-height: 1.3;
}

.settings-wrapper.admin-cat-page .admin-cat__table thead th {
  text-align: left;
  font-weight: 700;
  color: var(--text);
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--border);
}

.settings-wrapper.admin-cat-page .admin-cat__table th:nth-child(1) { width: 56%; }
.settings-wrapper.admin-cat-page .admin-cat__table th:nth-child(2) { width: 28%; }
.settings-wrapper.admin-cat-page .admin-cat__table th:nth-child(3),
.settings-wrapper.admin-cat-page .admin-cat__th-actions { width: 16%; text-align: right; }

.settings-wrapper.admin-cat-page .admin-cat__table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.02);
}
.settings-wrapper.admin-cat-page .admin-cat__table tbody tr:hover td { background: rgba(255,255,255,.04); }
.settings-wrapper.admin-cat-page .admin-cat__table tbody tr:last-child td { border-bottom: none; }

.settings-wrapper.admin-cat-page .admin-cat__cell--name {
  font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px;
}
.settings-wrapper.admin-cat-page .admin-cat__cell--vis { white-space: nowrap; padding-right: 22px; }
.settings-wrapper.admin-cat-page .admin-cat__cell--actions { text-align: right; white-space: nowrap; }
.settings-wrapper.admin-cat-page .admin-cat__delete { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.settings-wrapper.admin-cat-page .admin-cat__empty { text-align: center; padding: 16px; }

.settings-wrapper.admin-cat-page .admin-cat__form {
  display: grid;
  grid-template-columns: max-content minmax(320px, 1fr) auto;
  grid-template-areas:
    "label input input"
    ". toggle add";
  align-items: center;
  gap: 10px 14px;
  width: 100%;
  margin: 0;
}
.settings-wrapper.admin-cat-page .admin-cat__form > label:first-child {
  grid-area: label;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.settings-wrapper.admin-cat-page .admin-cat__input {
  grid-area: input;
  width: 100%;
  min-width: 0;
}
.settings-wrapper.admin-cat-page .cat-approval-label {
  grid-area: toggle;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  white-space: nowrap;
  justify-self: start;
}
.settings-wrapper.admin-cat-page .cat-approval-label input[type="checkbox"] { accent-color: #38bd94; }
.settings-wrapper.admin-cat-page .publish-btn {
  grid-area: add;
  min-width: 108px;
  justify-self: end;
  align-self: stretch;
}

@media (max-width: 900px) {
  .settings-wrapper.admin-cat-page { width: calc(100% - 24px); }
  .settings-wrapper.admin-cat-page .admin-cat__table thead th,
  .settings-wrapper.admin-cat-page .admin-cat__table tbody td { padding: 10px 12px; }
}
@media (max-width: 760px) {
  .settings-wrapper.admin-cat-page .admin-cat__table { font-size: .88rem; }
  .settings-wrapper.admin-cat-page .admin-cat__form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "input"
      "toggle"
      "add";
    align-items: stretch;
    gap: 10px;
  }
  .settings-wrapper.admin-cat-page .cat-approval-label,
  .settings-wrapper.admin-cat-page .publish-btn { width: 100%; justify-content: center; }
  .settings-wrapper.admin-cat-page .publish-btn { justify-self: stretch; }
}