/**
 * ==========================================================================
 * Server Control Center - utilities.css
 *
 * @fileOverview
 *   Utility classes that replace the operator UI's inline style attributes
 *   (PlatformStarter step 2, owner 11/10/2026). Each class carries exactly
 *   the value its inline style had, so nothing moves on screen. They are
 *   `!important` and load last because an inline style outranked every
 *   stylesheet rule, and these must keep that precedence. Prefer the
 *   component stylesheets for new work; add a utility only for one-off
 *   layout. Dynamic values (widths, heights, colours) use data-ui-* hints
 *   applied by applyUiDataStyles() in app/js/control-center/event-binding.js.
 *
 * @author
 *   Farrel Wilson - Contact@QueryKey.com
 *
 * @maintainer
 *   Server Operations
 *
 * @usage
 *   <link rel="stylesheet" href="./assets/css/utilities.css"> (last in app/index.html)
 *
 * @dependencies
 *   variables.css (custom properties such as --text-primary, --border-soft)
 *
 * @notes
 *   - Naming: u-<property>-<value>, e.g. u-gap-0_5rem, u-mt-0_75rem, u-maxw-720px.
 *   - LastUpdatedUTC: 2026-11-10T21:30:00Z
 *
 * @license
 *   QueryKey is a trademark of Farrel Wilson. All rights reserved.
 *
 * ==========================================================================
 */

/* ── Feedback banner and toast (tone by class, not inline colour) ─────────── */
.cc-feedback.is-error { border-color: rgba(239, 68, 68, 0.4) !important; }
.cc-feedback.is-ok { border-color: rgba(16, 185, 129, 0.4) !important; }
.cc-feedback.is-info { border-color: rgba(148, 163, 184, 0.3) !important; }
.cc-feedback-banner { margin-bottom: 1rem !important; }
.cc-feedback-toast { position: fixed !important; left: 1rem !important; right: 1rem !important; bottom: 1rem !important; z-index: 100 !important; }

/* ── Mail → Notices editor and letter preview ─────────────────────────────── */
.cc-notice-editor { width: 100% !important; font-family: ui-monospace, Menlo, monospace !important; font-size: 13px !important; }
.cc-notice-preview { width: 100% !important; height: 640px !important; border: 1px solid var(--line, #d5deea) !important; border-radius: 8px !important; background: #0b1730 !important; }

/* ── Utilities (one declaration each) ────────────────────────────────────── */
.u-border-1px-solid-color-danger { border: 1px solid var(--color-danger, #e55) !important; }
.u-bt-1px-solid-border-soft { border-top: 1px solid var(--border-soft) !important; }
.u-col-1-span-2 { grid-column: 1 / span 2 !important; }
.u-col-1-span-3 { grid-column: 1 / span 3 !important; }
.u-color-a7f3d0 { color: #a7f3d0 !important; }
.u-color-amber { color: var(--amber) !important; }
.u-color-color-danger { color: var(--color-danger,#ef4444) !important; }
.u-color-text-faint { color: var(--text-faint) !important; }
.u-color-text-primary { color: var(--text-primary) !important; }
.u-cols-140px-1fr { grid-template-columns: 140px 1fr !important; }
.u-cols-minmax-220px-280px-1fr { grid-template-columns: minmax(220px,280px) 1fr !important; }
.u-cols-repeat-1-minmax-0-1fr { grid-template-columns: repeat(1,minmax(0,1fr)) !important; }
.u-cols-repeat-2-minmax-0-1fr { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.u-cols-repeat-3-minmax-0-1fr { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.u-d-block { display: block !important; }
.u-d-flex { display: flex !important; }
.u-d-grid { display: grid !important; }
.u-flex-1 { flex: 1 !important; }
.u-font-mono { font-family: ui-monospace, monospace !important; }
.u-font-mono-stack { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }
.u-fs-0_75rem { font-size: 0.75rem !important; }
.u-fs-0_78rem { font-size: 0.78rem !important; }
.u-fs-0_8rem { font-size: 0.8rem !important; }
.u-fs-12px { font-size: 12px !important; }
.u-fs-14px { font-size: 14px !important; }
.u-fs-1_1rem { font-size: 1.1rem !important; }
.u-fs-1_5rem { font-size: 1.5rem !important; }
.u-fw-600 { font-weight: 600 !important; }
.u-fw-700 { font-weight: 700 !important; }
.u-gap-0_35rem { gap: 0.35rem !important; }
.u-gap-0_45rem { gap: 0.45rem !important; }
.u-gap-0_4rem { gap: 0.4rem !important; }
.u-gap-0_55rem { gap: 0.55rem !important; }
.u-gap-0_5rem { gap: 0.5rem !important; }
.u-gap-0_6rem { gap: 0.6rem !important; }
.u-gap-0_75rem { gap: 0.75rem !important; }
.u-gap-0_7rem { gap: 0.7rem !important; }
.u-gap-1rem { gap: 1rem !important; }
.u-gap-8px { gap: 8px !important; }
.u-h-40px { height: 40px !important; }
.u-items-center { align-items: center !important; }
.u-items-flex-start { align-items: flex-start !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-flex-end { justify-content: flex-end !important; }
.u-justify-flex-start { justify-content: flex-start !important; }
.u-ls-normal { letter-spacing: normal !important; }
.u-m-0 { margin: 0 !important; }
.u-m-0_25rem-0 { margin: 0.25rem 0 !important; }
.u-m-0_5rem-0 { margin: 0.5rem 0 !important; }
.u-maxh-220px { max-height: 220px !important; }
.u-maxh-320px { max-height: 320px !important; }
.u-maxw-140px { max-width: 140px !important; }
.u-maxw-180px { max-width: 180px !important; }
.u-maxw-240px { max-width: 240px !important; }
.u-maxw-640px { max-width: 640px !important; }
.u-maxw-680px { max-width: 680px !important; }
.u-maxw-720px { max-width: 720px !important; }
.u-maxw-760px { max-width: 760px !important; }
.u-mb-0_5rem { margin-bottom: 0.5rem !important; }
.u-mb-0_75rem { margin-bottom: 0.75rem !important; }
.u-minw-0 { min-width: 0 !important; }
.u-ml-0_5rem { margin-left: 0.5rem !important; }
.u-mr-0_2rem { margin-right: 0.2rem !important; }
.u-mt-0_35rem { margin-top: 0.35rem !important; }
.u-mt-0_3rem { margin-top: 0.3rem !important; }
.u-mt-0_5rem { margin-top: 0.5rem !important; }
.u-mt-0_6rem { margin-top: 0.6rem !important; }
.u-mt-0_75rem { margin-top: 0.75rem !important; }
.u-mt-1rem { margin-top: 1rem !important; }
.u-mt-8px { margin-top: 8px !important; }
.u-overflow-auto { overflow: auto !important; }
.u-p-0_15rem-0_5rem { padding: 0.15rem 0.5rem !important; }
.u-p-0_4rem-0_65rem { padding: 0.4rem 0.65rem !important; }
.u-p-0_75rem { padding: 0.75rem !important; }
.u-p-0_85rem-1rem { padding: 0.85rem 1rem !important; }
.u-p-1rem { padding: 1rem !important; }
.u-pt-0_75rem { padding-top: 0.75rem !important; }
.u-td-underline { text-decoration: underline !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }
.u-tt-none { text-transform: none !important; }
.u-tuo-4px { text-underline-offset: 4px !important; }
.u-w-100 { width: 100% !important; }
.u-w-min-440px-92vw { width: min(440px, 92vw) !important; }
.u-w-min-760px-calc-100vw-2rem { width: min(760px, calc(100vw - 2rem)) !important; }
.u-wrap-nowrap { flex-wrap: nowrap !important; }
.u-wrap-wrap { flex-wrap: wrap !important; }
.u-ws-nowrap { white-space: nowrap !important; }
.u-ws-pre-wrap { white-space: pre-wrap !important; }