/* =====================================================
   SHARED COMPONENT STYLES — ported from the QA UI design
   standard reference implementation (docs/UI-DESIGN-STANDARD.md §9).
   Class names (`cas-*`, `navy-button`) are cross-product standard
   identifiers — keep them verbatim so snippets from the standard
   paste in unchanged; the tokens render them QA NotifyMe green.
   Depends on css/tokens.css.
   ===================================================== */

/* App-wide: consistent focus outline for accessibility */
.mud-button:focus-visible,
.mud-icon-button:focus-visible {
  outline: 2px solid var(--cas-navy-700);
  outline-offset: 2px;
}

.mud-input-root:focus-within .mud-input-slot {
  outline: 2px solid var(--cas-navy-700);
  outline-offset: 0;
  border-radius: 4px;
}

/* Main content cards: slightly stronger depth.
   Elevation-0 surfaces stay flat (e.g. tables nested inside a paper —
   the container carries the elevation, never both). */
.content-wrapper .mud-card:not(.mud-elevation-0),
.content-wrapper .mud-paper:not(.mud-elevation-0) {
  box-shadow: var(--cas-shadow-card);
  border-radius: var(--cas-radius-card);
}

.content-wrapper .mud-paper.mud-elevation-0 {
  box-shadow: none;
}

/* =====================================================
   PAGE INFO CALLOUT (Shared/PageInfo.razor)
   Slim info strip; replaces the outlined MudAlert used
   under the breadcrumb on most content pages.
   ===================================================== */
.cas-pageinfo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--cas-info-soft);
  border-left: 3px solid var(--cas-info);
  border-radius: 0 var(--cas-radius-control) var(--cas-radius-control) 0;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cas-ink);
}

.cas-pageinfo-icon {
  font-size: 18px !important;
  width: 18px;
  height: 18px;
  color: var(--cas-info);
  flex: none;
  margin-top: 1px;
}

.cas-pageinfo-text {
  min-width: 0;
}

.cas-pageinfo code {
  font-family: var(--cas-font-mono);
  font-size: 12px;
  background: rgba(2, 119, 189, 0.08);
  border-radius: 4px;
  padding: 0 5px;
}

/* =====================================================
   LIST PAGE TEMPLATE
   .cas-table — calmer dense table: uppercase column
   labels, horizontal hairlines only, tabular numerals.
   Pair with MudTable Dense+Hover (no Striped/Bordered).
   ===================================================== */
.cas-table th.mud-table-cell {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cas-muted);
  border-bottom: 2px solid var(--cas-line);
  white-space: nowrap;
}

.cas-table th.mud-table-cell .mud-table-sort-label {
  color: inherit;
}

.cas-table td.mud-table-cell {
  font-size: 13px;
  border-bottom: 1px solid var(--cas-line-soft);
  font-variant-numeric: tabular-nums;
}

/* =====================================================
   STATUS CHIP — soft tint + leading dot + deep text.
   Add Class="cas-status-chip" to state-carrying chips;
   never color alone: the dot + label carry the state.
   ===================================================== */
.mud-chip.cas-status-chip {
  font-weight: 500;
}

.mud-chip.cas-status-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  flex: none;
  background: var(--cas-faint);
}

.mud-chip.cas-status-chip.mud-chip-color-success {
  background: var(--cas-success-soft) !important;
  color: var(--cas-success-deep) !important;
}
.mud-chip.cas-status-chip.mud-chip-color-success::before { background: var(--cas-success); }

.mud-chip.cas-status-chip.mud-chip-color-error {
  background: var(--cas-error-soft) !important;
  color: var(--cas-error-deep) !important;
}
.mud-chip.cas-status-chip.mud-chip-color-error::before { background: var(--cas-error); }

.mud-chip.cas-status-chip.mud-chip-color-warning {
  background: var(--cas-warning-soft) !important;
  color: var(--cas-warning-deep) !important;
}
.mud-chip.cas-status-chip.mud-chip-color-warning::before { background: var(--cas-warning); }

.mud-chip.cas-status-chip.mud-chip-color-info {
  background: var(--cas-info-soft) !important;
  color: var(--cas-info-deep) !important;
}
.mud-chip.cas-status-chip.mud-chip-color-info::before { background: var(--cas-info); }

.mud-chip.cas-status-chip.mud-chip-color-default {
  background: #ECF0F4 !important;
  color: var(--cas-muted) !important;
}

.mud-chip.cas-status-chip.mud-chip-color-primary {
  background: var(--cas-navy-tint) !important;
  color: var(--cas-navy-700) !important;
}
.mud-chip.cas-status-chip.mud-chip-color-primary::before { background: var(--cas-navy-700); }

/* =====================================================
   PRIMARY BUTTON
   Flat primary: solid brand color, darkens on hover — no
   gradient, no glow, no lift. Gradients are reserved for
   chrome (app bar, drawer, hero). The class name is a
   cross-product standard identifier; tokens render it green.
   ===================================================== */
.navy-button {
  background: var(--cas-navy-700) !important;
  color: white !important;
  box-shadow: none !important;
}

.navy-button:hover {
  background: var(--cas-navy-800) !important;
  box-shadow: none !important;
}

.navy-button:disabled {
  background: var(--cas-navy-700) !important;
  opacity: 0.6;
  box-shadow: none !important;
}

/* =====================================================
   COMPACT PAGE / DIALOG LAYOUT - smaller text and spacing
   ===================================================== */
.compact-page .mud-typography-h4,
.compact-dialog .mud-typography-h4 {
  font-size: 1.25rem;
}

.compact-page .mud-typography-h5,
.compact-dialog .mud-typography-h5 {
  font-size: 1.125rem;
}

.compact-page .mud-typography-h6,
.compact-dialog .mud-typography-h6 {
  font-size: 1rem;
}

.compact-page .mud-table-cell,
.compact-dialog .mud-table-cell {
  font-size: 0.8125rem;
}

.compact-page .mud-paper,
.compact-dialog .mud-paper {
  padding: 8px 12px !important;
}

.compact-page .compact-spacing,
.compact-dialog .compact-spacing {
  margin-bottom: 8px;
}

/* =====================================================
   PAGE HEADER (Shared/PageHeader.razor)
   Icon plate + title/subtitle left, actions right.
   ===================================================== */
.ta-pageheader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ta-pageheader-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ta-pageheader-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--cas-gradient-chrome);
  box-shadow: 0 6px 16px rgba(30, 58, 36, .28);
}

.ta-pageheader-icon .mud-icon-root { font-size: 1.6rem; }

.ta-pageheader-title {
  font-weight: 700;
  color: var(--cas-ink);
  line-height: 1.15;
  letter-spacing: -.01em;
}

.ta-pageheader-sub {
  color: var(--cas-muted);
  margin-top: 2px;
}

.ta-pageheader-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}