/**
 * Permissions page – Paces-style CSS (from paces/apps/static/scss)
 * Covers: app-search, table-custom, thead-sm, badge-label, pagination-boxed, fs-xxs, btn-default
 */

/* App Search (from components/_widgets.scss) */
.app-search {
  position: relative;
}

.app-search .form-control {
  padding-inline-start: 40px;
}

.app-search .app-search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.app-search .app-search-icon {
  inset-inline-start: 0;
  left: 0;
}

.app-search svg {
  height: 18px;
}

/* Table: small head (from components/_tables.scss) */
.thead-sm > * > * {
  padding: 0.5rem 0.5rem !important;
}

/* Table: custom (from components/_tables.scss) */
.table-custom tfoot > tr > th:first-child,
.table-custom thead > tr > th:first-child,
.table-custom tr th:first-child,
.table-custom tr td:first-child {
  padding-inline-start: calc(0.75rem * 1.5) !important;
}

.table-custom tfoot > tr > th:last-child,
.table-custom thead > tr > th:last-child,
.table-custom tr th:last-child,
.table-custom tr td:last-child {
  padding-inline-end: calc(0.75rem * 1.5) !important;
}

.table-custom th {
  white-space: nowrap;
}

/* Table select row highlight */
.table-select tbody tr:has(input[type="checkbox"]:checked:not(.form-switch > input)) {
  background-color: rgba(var(--bs-warning-rgb), 0.1);
}

/* Badge label (from components/_badge.scss) */
.badge-label {
  border-radius: 0;
  padding: calc(var(--bs-badge-padding-y, 0.35em) * 1.5) calc(var(--bs-badge-padding-x, 0.65em) * 2);
}

/* Font size utilities (Paces) */
.fs-xxs {
  font-size: 0.7rem;
}

.fs-lg {
  font-size: 1.125rem;
}

/* Pagination boxed (from components/_pagination.scss) */
.pagination-boxed .page-link,
.pagination-boxed.pagination-sm .page-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-inline-start: 0.35rem !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  height: calc(0.25rem * 2 + 1.5em + 2px);
  min-width: calc(0.25rem * 2 + 1.5em + 2px);
  padding: 0.1rem;
}

.pagination-boxed.pagination-sm .page-link {
  height: calc(0.2rem * 2 + 1.5em + 2px);
  min-width: calc(0.2rem * 2 + 1.5em + 2px);
}

.pagination-boxed .page-link svg {
  height: 14px;
}

/* Btn default (from components/_buttons.scss) */
.btn-default {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(var(--bs-dark-rgb), 0.1);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: rgba(var(--bs-dark-rgb), 0.02);
  --bs-btn-hover-border-color: rgba(var(--bs-dark-rgb), 0.3);
  --bs-btn-active-bg: var(--bs-tertiary-bg);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-border-color: rgba(var(--bs-dark-rgb), 0.15);
}

.btn-default:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-default:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

/* Icon-only buttons: ensure visible size and icon inheritance */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.25rem;
}

.btn-icon .ti,
.btn-icon i {
  color: inherit;
  font-size: 1.125rem;
  display: inline-block;
  line-height: 1;
  font-style: normal;
}

/* Ensure action cell buttons and icons are visible (fallback if icon font fails) */
.table .btn-default.btn-icon {
  color: #374151;
}

.table .btn-default.btn-icon:hover {
  color: #111827;
}

.table .btn-default.btn-icon .ti,
.table .btn-default.btn-icon i {
  color: inherit;
}

/* Card header border light + flex */
.card-header.border-light {
  border-color: rgba(var(--bs-light-rgb), 1) !important;
}

.card-header.justify-content-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Col xxl (Bootstrap 5 has col-xxl) */
@media (min-width: 1400px) {
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}