/* Shared admin UX hooks for pages that extend templates/base.html.
   Loaded after css/raya.css. Reuses --raya-* tokens; does not restyle .btn fills.
   Print documents use templates/print/base_print.html and css/pages/print.css.
   Toos official documents use css/pages/toos_official.css. Neither sheet is targeted here.
   Breakpoints: 768px phone, 1024px tablet. The menu still collapses at Bootstrap xl (1200px). */

/* ------------------------------------------------------------------ typography */
.page-section {
  margin-block: 0 var(--raya-space-5, 1.5rem);
  padding-block: var(--raya-space-2, .5rem);
  padding-inline: 0;
}
.page-section > * + * { margin-block-start: var(--raya-space-3, .75rem); }
.page-section > h2,
.page-section > .section-title {
  margin-block: 0 var(--raya-space-3, .75rem);
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 700;
}

/* ------------------------------------------------------------------ focus
   Navbar surface is white (--raya-surface). The ring is --raya-focus (#0b3d91), about 10:1. */
@media screen {
  .btn:focus-visible,
  .nav-link:focus-visible,
  .dropdown-item:focus-visible,
  a:focus-visible,
  .raya-nav-link:focus-visible,
  .raya-menu-btn:focus-visible,
  .admin-tab:focus-visible,
  .skip-link:focus-visible {
    outline: 3px solid var(--raya-focus, #0b3d91);
    outline-offset: 2px;
  }
  .skip-link:focus-visible {
    inset-inline-start: .5rem;
  }
}

/* ------------------------------------------------------------------ status pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding-block: .15rem;
  padding-inline: .7rem;
  margin-inline: 0;
  border-radius: 999px;
  border: 1.5px solid var(--raya-neutral-border, #b6bdca);
  background: var(--raya-neutral-bg, #eceff4);
  color: var(--raya-neutral, #374151);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.status-pill--ok {
  background: var(--raya-success-bg, #e6f4ea);
  color: var(--raya-success, #0a5c2a);
  border-color: var(--raya-success-border, #8ec7a0);
}
.status-pill--warn {
  background: var(--raya-warning-bg, #fff3d6);
  color: var(--raya-warning, #6f4300);
  border-color: var(--raya-warning-border, #e0b45c);
}
.status-pill--block {
  background: var(--raya-danger-bg, #fdebee);
  color: var(--raya-danger, #a3001b);
  border-color: var(--raya-danger-border, #e59aa8);
}
.status-pill--muted {
  background: var(--raya-surface-2, #eef1f7);
  color: var(--raya-muted, #4b5563);
  border-color: var(--raya-border, #d3d9e4);
}

/* ------------------------------------------------------------------ tables */
.admin-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin-inline: 0;
  -webkit-overflow-scrolling: touch;
}
.admin-table {
  width: 100%;
  min-width: 40rem; /* keep columns readable; the wrap scrolls instead of squashing */
  border-collapse: collapse;
}

/* ------------------------------------------------------------------ filters and forms */
.filter-bar {
  max-width: 100%;
}
.admin-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--raya-space-4, 1rem);
  margin-inline: 0;
}
.admin-fields .field { min-width: 0; margin-block-end: 0; }
.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-block-start: var(--raya-space-4, 1rem);
  padding-inline: 0;
}

/* ------------------------------------------------------------------ empty, alert, confirm */
.admin-empty {
  text-align: center;
  padding-block: var(--raya-space-6, 2rem);
  padding-inline: var(--raya-space-4, 1rem);
  margin-block-end: var(--raya-space-4, 1rem);
  margin-inline: 0;
  background: var(--raya-surface, #fff);
  border: 2px dashed var(--raya-border-strong, #6b7280);
  border-radius: var(--raya-radius-lg, 1rem);
  color: var(--raya-ink-2, #374151);
}
.admin-empty__title {
  margin-block: 0 .25rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--raya-ink, #111827);
}
.admin-empty__message { margin-block: 0; margin-inline: auto; max-width: 40ch; }
.admin-alert {
  margin-block: 0 var(--raya-space-4, 1rem);
  margin-inline: 0;
  padding-block: .85rem;
  padding-inline: var(--raya-space-4, 1rem);
  border: 2px solid var(--raya-info-border, #8dbbe0);
  border-inline-start-width: 4px;
  border-radius: var(--raya-radius, .75rem);
  background: var(--raya-info-bg, #e4f0fa);
  color: var(--raya-ink, #111827);
  font-weight: 700;
}
.admin-alert--error {
  background: var(--raya-danger-bg, #fdebee);
  border-color: var(--raya-danger-border, #e59aa8);
  color: var(--raya-danger, #a3001b);
}
.admin-alert--success {
  background: var(--raya-success-bg, #e6f4ea);
  border-color: var(--raya-success-border, #8ec7a0);
  color: var(--raya-success, #0a5c2a);
}
.admin-alert--warning {
  background: var(--raya-warning-bg, #fff3d6);
  border-color: var(--raya-warning-border, #e0b45c);
  color: var(--raya-warning, #6f4300);
}
.admin-confirm {
  margin-inline: 0;
  padding-block: var(--raya-space-4, 1rem);
  padding-inline: var(--raya-space-4, 1rem);
  border: 2px solid var(--raya-warning-border, #e0b45c);
  border-radius: var(--raya-radius, .75rem);
  background: var(--raya-warning-bg, #fff3d6);
  color: var(--raya-ink, #111827);
}
.admin-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-block-start: var(--raya-space-3, .75rem);
}

/* ------------------------------------------------------------------ tabs */
.admin-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  overflow-x: auto;
  max-width: 100%;
  margin-block: 0 var(--raya-space-4, 1rem);
  margin-inline: 0;
  padding-block: .25rem;
  padding-inline: 0;
}
.admin-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--raya-touch, 44px);
  padding-block: .4rem;
  padding-inline: .9rem;
  border: 2px solid var(--raya-border, #d3d9e4);
  border-radius: var(--raya-radius-sm, .5rem);
  background: var(--raya-surface, #fff);
  color: var(--raya-ink-2, #374151);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.admin-tab.is-active {
  color: var(--raya-primary, #0b3d91);
  background: var(--raya-primary-50, #eaf0fb);
  border-color: var(--raya-primary, #0b3d91);
}

/* ------------------------------------------------------------------ navbar
   Desktop dropdowns stay. Below xl the open mobile panel must not be clipped,
   and a long label must not force horizontal page scroll. */
.raya-navbar,
.raya-header { overflow: visible; }
.raya-navbar > .container,
.raya-navbar .navbar-collapse,
.raya-nav-desktop,
.raya-nav-mobile { min-width: 0; }
.raya-nav-mobile { max-width: 100%; }
@media screen and (min-width: 1200px) {
  .raya-nav-desktop { flex: 1 1 auto; }
}
@media screen and (max-width: 1199.98px) {
  .raya-navbar > .container { flex-wrap: wrap; max-width: 100%; }
  .raya-navbar .navbar-collapse,
  .raya-navbar .navbar-collapse.show {
    flex-basis: 100%;
    max-width: 100%;
    overflow: visible;
    max-height: none;
  }
  .raya-nav-link {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* 1024px tablet and 768px phone: tables scroll, filters wrap, tabs scroll, menu stays usable. */
@media screen and (max-width: 1024px) {
  .admin-table-wrap { overflow-x: auto; }
  .filter-bar { flex-wrap: wrap; max-width: 100%; }
  .admin-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .raya-navbar .navbar-collapse { max-width: 100%; min-width: 0; }
  .admin-fields { grid-template-columns: 1fr; }
}
@media screen and (max-width: 768px) {
  .admin-table-wrap { overflow-x: auto; }
  .admin-table { min-width: 36rem; }
  .filter-bar { flex-wrap: wrap; padding-inline: var(--raya-space-3, .75rem); }
  .admin-tabs { overflow-x: auto; }
  .raya-nav-mobile { max-width: 100%; }
  .admin-form-actions,
  .admin-confirm__actions { flex-direction: column; align-items: stretch; }
}