/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Compact setup cards; expanded tables retain the full available width. */
.setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.setup-grid > details {
  min-width: 0;
  margin: 0;
  padding: 0.875rem 1rem;
}

.setup-grid > details > summary h2 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
}

.setup-grid > details > summary p {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.setup-grid > details > summary {
  min-height: 3rem;
  gap: 0.75rem;
}

.setup-grid > details > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
  border-radius: 0.25rem;
}

.setup-grid > details[open] {
  grid-column: 1 / -1;
}

.setup-grid > details[open] > summary {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

/* Modal frames must not occupy empty cells in the setup grid. */
.setup-grid > turbo-frame {
  display: contents;
}

@media (min-width: 768px) {
  .setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-grid > details[open] { order: 1; }
}

@media (min-width: 1280px) {
  .setup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* One light, semantic status palette across administration, workflows and invoices. */
:root {
  --status-success-bg: #e6f4ec;
  --status-success-fg: #21633f;
  --status-success-border: #b3d8c2;
  --status-pending-bg: #fff4d6;
  --status-pending-fg: #765315;
  --status-pending-border: #e8d093;
  --status-danger-bg: #fde9e8;
  --status-danger-fg: #9c3431;
  --status-danger-border: #efb9b5;
}
.status-badge { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; border: 1px solid; border-radius: 999px; padding: .25rem .6rem; font-size: .75rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.status-badge.status-success, .status-surface.status-success { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.status-badge.status-pending, .status-surface.status-pending { background: var(--status-pending-bg); color: var(--status-pending-fg); border-color: var(--status-pending-border); }
.status-badge.status-danger, .status-surface.status-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-border); }
.status-badge.status-neutral, .status-surface.status-neutral { background: var(--color-surface-container); color: var(--color-on-surface-variant); border-color: var(--color-outline-variant); }