/*
 * utilities.css — Print helpers, alignment, body state overrides, Tailwind-inspired utilities
 */

/* ─── Print Helpers ──────────────────────────────────────────────────────── */

.onlyPrint { display: none; }

@media print {
  .noPrint   { display: none !important; }
  .onlyPrint { display: block !important; }

  #DebuggerBanner,
  .DebuggerMessage,
  div.navigation,
  div.container > div.footnote {
    display: none !important;
  }
  div.container > div.content,
  div.container > div.notifications {
    margin-left: 0 !important;
  }
}

/* ─── Alignment Utilities ────────────────────────────────────────────────── */

.LeftAligned   { text-align: left;   padding-left:  0.25rem; }
.RightAligned  { text-align: right;  padding-right: 0.25rem; }
.CenterAligned { text-align: center; }

/* ─── Layout Utilities ───────────────────────────────────────────────────── */

.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-1           { gap: 0.25rem; }
.gap-2           { gap: 0.5rem; }
.gap-3           { gap: 0.75rem; }
.gap-4           { gap: 1rem; }

/* ─── Spacing Utilities ──────────────────────────────────────────────────── */
/* px-valued pl/pr/ml/mr-1 match the existing 5px padding/margin pattern that
   shows up everywhere in the legacy module pages (form labels, table cells). */

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.p-2  { padding: 0.5rem; }
.p-4  { padding: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.pl-1 { padding-left:  5px; }
.pr-1 { padding-right: 5px; }
.ml-1 { margin-left:   5px; }
.mr-1 { margin-right:  5px; }

/* ─── Display / Visibility Utilities ─────────────────────────────────────── */

.hidden         { display: none; }
.cursor-pointer { cursor: pointer; }
.float-left     { float: left; }
.float-right    { float: right; }

/* ─── Typography Utilities ───────────────────────────────────────────────── */

.text-sm       { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs       { font-size: 0.75rem;  line-height: 1rem; }
.text-muted    { color: var(--color-muted); }
.text-error    { color: var(--color-danger); }
.bg-error      { background-color: #c00; color: #fff; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.bold          { font-weight: bold; }
.Bold          { font-weight: bold; }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-wrap       { white-space: nowrap; }

/* ─── Visual Utilities ───────────────────────────────────────────────────── */

.rounded      { border-radius: 0.375rem; }
.rounded-full { border-radius: 9999px; }
.shadow-sm    { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.ring         { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ─── Body: No Navigation ────────────────────────────────────────────────── */

body.nonav .rocketmove,
body.nonav div.container > div.navigation,
body.nonav:not(.notif) div.container > div.notifications {
  display: none;
}
body.nonav div.container > div.content,
body.nonav div.container > div.notifications {
  margin-left: 0;
}
body.nonav div#DebuggerBanner { padding-left: 0; }
body.nonav #navCollapse        { display: none; }

/* ─── Body: Dialog / iframe ──────────────────────────────────────────────── */

body.dialog div#DebuggerBanner,
body.dialog div.container > div.footnote {
  display: none;
}

/* ─── Loading overlay (shown while AJAX data loads) ──────────────────────── */
/* Container marks itself with .loading; the overlay renders a centered
   theme-aware modal until the request finishes. Lives here (not common.css)
   so light/dark/system themes get the styled overlay too. */

.loading-overlay {
  display: none;
  position: fixed;
  top: 50%;
  /* Center over the content area, not the whole viewport. The fixed left
     nav is 150px wide (see layout.css), so the content's horizontal centre
     sits 75px right of the viewport centre. body.nonav drops the offset. */
  left: calc(50% + 75px);
  transform: translate(-50%, -50%);
  background: #006eb0;
  border: 1px solid #005a91;
  border-radius: 6px;
  padding: 16px 32px;
  z-index: 1000;
  font-size: 1.2em;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body.nonav .loading-overlay {
  left: 50%;
}
.loading .loading-overlay {
  display: block;
}
/* Full-viewport blur backdrop while a .loading container has an overlay
   visible. Pseudo lives on the .loading parent (not .loading-overlay) so
   the pill's transform doesn't trap the fixed positioning. */
.loading:has(> .loading-overlay)::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 999;
  pointer-events: none;
}