/* ============================================================
   Atlas Base — admin/global shell rules
   Loaded globally by MainLayout.razor BEFORE portal-base.css.
   Holds rules that aren't portal-namespaced: the body/main
   canvas paint and the input-page canonical (.atlas-form-canonical).
   Portal pages override the body/main rules via higher-specificity
   selectors in portal-base.css (html.portal-bg-navy body,
   body:has(.portal-root) main, etc.) so navy/portal canvas wins.
   ============================================================ */

/* Admin canvas — paint the off-white --at-body-bg on body and the
   <main> wrapper. Without this, Tailwind's default leaves body white
   and the Log Ticket strip + canvas around cards reads as white. */
body {
    background-color: var(--at-body-bg);
}

main {
    background-color: var(--at-body-bg);
}

/* ============================================================
   Input-page canonical (form layout)
   Opt-in via layout.cssClass="atlas-form-canonical" on the page JSON.
   Provides the content-sized 12-col field grid (.ff/.f.sN), the
   People-roster styling (.mhc-*), and viewport-bottom clearance for
   the ActionBar Floating variant. All other refinements (off-white
   canvas, card radius/shadow/header, inline-with-title subtitle,
   floating bar) are platform-wide and live in tokens + parts.
   ============================================================ */
.atlas-form-canonical {
  /* Constrain input forms to 8/12 of the content area (left-anchored, with
     ~33% breathing room on the right). Single source of truth — every page
     that opts into the canonical gets the layout automatically; no per-page
     row wrapping needed. */
  max-width: 66.6667%;
  /* Clearance so the last card isn't covered by the floating ActionBar. */
  padding-bottom: 108px;
}

/* Content-sized field grid */
.atlas-form-canonical .ff { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px 16px; }
.atlas-form-canonical .ff .f { grid-column: span 12; min-width: 0; }
.atlas-form-canonical .ff .f.s2 { grid-column: span 2; }
.atlas-form-canonical .ff .f.s3 { grid-column: span 3; }
.atlas-form-canonical .ff .f.s4 { grid-column: span 4; }
.atlas-form-canonical .ff .f.s5 { grid-column: span 5; }
.atlas-form-canonical .ff .f.s6 { grid-column: span 6; }
.atlas-form-canonical .ff .f.s7 { grid-column: span 7; }
.atlas-form-canonical .ff .f.s8 { grid-column: span 8; }
.atlas-form-canonical .ff .f label { display: block; font-size: .8rem; font-weight: 600; color: var(--at-text-secondary); margin-bottom: .3rem; }
.atlas-form-canonical .ff .f .req { color: var(--at-danger, #dc3545); margin-left: .15rem; }
@media (max-width: 640px) {
  .atlas-form-canonical .ff .f { grid-column: span 12 !important; }
}

/* People-roster — used by club/members/edit; harmless on other pages. */
.atlas-form-canonical .mhc-people { display: flex; flex-direction: column; gap: 8px; }
.atlas-form-canonical .mhc-person { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid var(--at-card-border); border-radius: 12px; background: var(--at-body-bg); transition: .15s; }
.atlas-form-canonical .mhc-person:hover { background: #fff; box-shadow: var(--at-shadow-sm); }
.atlas-form-canonical .mhc-mono { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: .86rem; color: var(--at-accent-ink); background: var(--at-accent-soft); flex-shrink: 0; }
.atlas-form-canonical .mhc-mono.minor { color: #8a5a12; background: #fbefd8; }
.atlas-form-canonical .mhc-pbody { flex: 1; min-width: 0; }
.atlas-form-canonical .mhc-pname { font-weight: 600; font-size: .93rem; display: flex; align-items: center; gap: .5rem; color: var(--at-text-primary); }
.atlas-form-canonical .mhc-pmeta { font-size: .79rem; color: var(--at-text-muted, #6c757d); margin-top: .18rem; display: flex; gap: 5px 14px; flex-wrap: wrap; }
.atlas-form-canonical .mhc-pmeta span { display: inline-flex; align-items: center; gap: .35rem; }
.atlas-form-canonical .mhc-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; padding: .16rem .45rem; border-radius: 6px; }
.atlas-form-canonical .mhc-tag.primary { background: var(--at-accent-soft); color: var(--at-accent-ink); }
.atlas-form-canonical .mhc-tag.minor { background: #fbefd8; color: #8a5a12; }
.atlas-form-canonical .mhc-pacts { display: flex; gap: 6px; flex-shrink: 0; }
.atlas-form-canonical .mhc-icbtn { width: 33px; height: 33px; border-radius: 9px; border: 1px solid var(--at-card-border); background: #fff; color: var(--at-text-secondary); cursor: pointer; display: grid; place-items: center; text-decoration: none; transition: .15s; }
.atlas-form-canonical .mhc-icbtn:hover { border-color: var(--at-primary); color: var(--at-primary); }
.atlas-form-canonical .mhc-icbtn.danger:hover { border-color: var(--at-danger, #dc3545); color: var(--at-danger, #dc3545); }
.atlas-form-canonical .mhc-empty { padding: 1rem; border: 1px dashed var(--at-card-border); border-radius: 12px; text-align: center; color: var(--at-text-muted, #6c757d); font-size: .85rem; margin-bottom: 8px; }