/* Responsive visibility */
@media (max-width: 767px) {
  .hide-mobile { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none; }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none; }
}


/* Public layout — full-height column so footer stays at bottom */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* Page header — centered hero area */
.page-header {
  padding: calc(var(--pico-spacing) * 4) 0;
  text-align: center;
}

.page-header hgroup {
  margin-bottom: calc(var(--pico-spacing) * 1.5);
}

/* Stack — vertical rhythm helper */
.stack > * + * {
  margin-top: var(--pico-spacing);
}

/* Browser :user-invalid → same visual as Pico's aria-invalid="true" */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: var(--pico-form-element-invalid-border-color);
}

/* Auth pages — centered card */
.auth-card {
  max-width: 28rem;
  margin: 4rem auto;
}

/* Pagination */
.pagination nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin: var(--pico-spacing) 0;
}

.pagination nav a {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: var(--pico-border-radius);
  text-decoration: none;
  font-style: normal;
  line-height: 1.5;
}

.pagination nav a[aria-current="page"] {
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  font-weight: bold;
}

.pagination nav a[role="separator"] { color: var(--pico-muted-color); }

/* Filter form actions alignment */
.filter-actions {
  display: flex;
  gap: calc(var(--pico-spacing) * 0.5);
  align-items: flex-start;
}

.filter-actions button,
.filter-actions a[role="button"] {
  width: auto;
  margin-bottom: 0;
}

/* Width utilities — add fractions as needed */
.w-1-3 { width: 33.333%; }
.w-2-3 { width: 66.666%; }

/* Fixed-column table — required for width utilities on col/th to be respected */
.table-fixed { table-layout: fixed; width: 100%; }
.table-fixed th { text-align: left; font-weight: normal; }

/* Auth pages — "ou" divider with horizontal lines */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}
.auth-divider hr    { flex: 1; margin: 0; }
.auth-divider small { color: var(--pico-muted-color); }