/* Portal layer on top of Pico.css (classless build).
   Uses Pico's CSS variables so light/dark mode is inherited. */

/* Global 2px reduction: Pico's 16px root becomes 14px. Pico sizes
   components (buttons, inputs, tables) in rem/em, so everything scales. */
html {
  font-size: 87.5%;
}

/* --- Flash messages as alert banners --- */
.messages {
  list-style: none;
  padding-left: 0;
}
.messages li {
  padding: 0.75rem 1rem;
  margin-bottom: var(--pico-spacing);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}
.messages li.success {
  border-color: var(--pico-ins-color);
  background: color-mix(in srgb, var(--pico-ins-color) 12%, var(--pico-background-color));
}
.messages li.error {
  border-color: var(--pico-del-color);
  background: color-mix(in srgb, var(--pico-del-color) 12%, var(--pico-background-color));
}
.messages li.warning {
  border-color: #b8860b;
  background: color-mix(in srgb, #b8860b 12%, var(--pico-background-color));
}

/* --- Tab bars (My Pay, manage sections) --- */
.tabs {
  display: flex;
  gap: 1.5rem;
  justify-content: flex-start;
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: var(--pico-block-spacing-vertical);
}
.tabs a {
  padding: 0.5rem 0;
  margin-bottom: -1px;
  color: var(--pico-muted-color);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tabs a:hover {
  color: var(--pico-primary-hover);
}
.tabs a.active {
  color: var(--pico-primary);
  border-bottom-color: var(--pico-primary);
  font-weight: 600;
}

/* --- Cards --- */
.card {
  padding: 1rem 1.25rem;
  margin-bottom: var(--pico-block-spacing-vertical);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}
.card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* --- Status + button rows --- */
.void {
  color: var(--pico-del-color);
  font-weight: 700;
}
.actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* --- Top nav: quiet logout button --- */
nav form {
  margin-bottom: 0;
}
nav form button {
  margin-bottom: 0;
  padding: 0.25rem 0.75rem;
  width: auto;
  background: transparent;
  color: var(--pico-secondary);
  border: 1px solid var(--pico-secondary-border);
}
nav form button:hover {
  color: var(--pico-secondary-hover);
  border-color: var(--pico-secondary-hover);
  background: transparent;
}