/* ===========================================
   ommerc Utilities - Complete Inline Style Replacements
   Total patterns covered: 219
   =========================================== */

/* ===========================================
   SCROLL LOCK (lightbox body scroll prevention)
   Uses a CSS class instead of inline style because
   Unpoly's replaceState clears inline body.style.overflow.
   =========================================== */
body.omm-scroll-lock { overflow: hidden !important; }

/* ===========================================
   TEXT COLORS (with !important to override ommFS14)
   =========================================== */
.text-grey { color: grey !important; }
.text-darkgrey { color: darkgrey !important; }
.text-dimgrey { color: dimgrey !important; }
.text-lightgrey { color: lightgrey !important; }
.text-dark-333 { color: #333 !important; }
.text-666 { color: #666 !important; }
.text-888 { color: #888 !important; }
.text-999 { color: #999 !important; }
.text-aaa { color: #aaaaaa !important; }
.text-ccc { color: #ccc !important; }
.text-856404 { color: #856404 !important; }  /* Bootstrap warning dark */
.text-721c24 { color: #721c24 !important; }  /* Bootstrap danger dark */
.text-155724 { color: #155724 !important; }  /* Bootstrap success dark */
.text-0c5460 { color: #0c5460 !important; }  /* Bootstrap info dark */
.text-198754 { color: #198754 !important; }  /* Bootstrap 5 success */
/* Accent utilities. Named for their role, never for a hex value or an owner: a class whose
   name IS the colour cannot be rethemed even in principle,
   because changing the colour would make the name a lie. The design system's own classes take
   the `omm` prefix; these five were never prefixed. */
.text-accent { color: var(--omm-admin-accent, #193857) !important; }
.text-6c757d { color: #6c757d !important; }  /* Bootstrap secondary */
/* Note: Use Bootstrap .text-primary, .text-danger, .text-success, .text-warning where appropriate */

/* ===========================================
   FONT SIZES
   =========================================== */
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-24 { font-size: 24px; }
.fs-32 { font-size: 32px; }
.fs-0-85rem { font-size: 0.85rem; }
.fs-0-85em { font-size: 0.85em; }
.fs-1-2rem { font-size: 1.2rem; }
.fs-1-25rem { font-size: 1.25rem; }
.fs-1-5rem { font-size: 1.5rem; }
.fs-1-8rem { font-size: 1.8rem; }
.fs-2rem { font-size: 2rem; }
.fs-2-5rem { font-size: 2.5rem; }
.fs-3rem { font-size: 3rem; }

/* ===========================================
   COMPOSITE TEXT STYLES (color + size + weight)
   =========================================== */

/* --- Icon styles (size + color) --- */
.icon-grey-lg { font-size: 18px; color: grey !important; }
.icon-grey-sm { font-size: 14px; color: grey !important; }
.icon-danger-lg { font-size: 18px; color: #dc3545 !important; }
.icon-warning-lg { font-size: 18px; color: #856404 !important; }
.icon-success-lg { font-size: 18px; color: #28a745 !important; }
.icon-info-lg { font-size: 18px; color: #0c5460 !important; }
.icon-dark-lg { font-size: 18px; color: #333 !important; }
.icon-black-lg { font-size: 20px; color: black !important; }

/* --- Subtext styles (small muted text) --- */
.subtext-grey { color: grey !important; font-size: 12px; }
.subtext-666 { color: #666 !important; font-size: 12px; }
.subtext-999 { color: #999 !important; font-size: 12px; }
.subtext-333 { color: #333 !important; font-size: 12px; }
.subtext-dark-13 { color: #333 !important; font-size: 13px; }
.subtext-grey-11 { color: grey !important; font-size: 11px; }
.subtext-999-11 { color: #999 !important; font-size: 11px; }
.subtext-999-13 { color: #999 !important; font-size: 13px; }
.subtext-666-11 { color: #666 !important; font-size: 11px; }
.subtext-666-13 { color: #666 !important; font-size: 13px; }

/* --- Label styles --- */
.label-grey-upper { color: grey !important; font-size: 11px; text-transform: uppercase; }

/* --- Heading styles --- */
.heading-dark { color: #333 !important; font-size: 16px; font-weight: 500; }
.heading-dark-14 { color: #333 !important; font-size: 14px; font-weight: 500; }
.heading-dark-lg { color: #333 !important; font-size: 24px; }
.heading-dark-lg-medium { color: #333 !important; font-size: 24px; font-weight: 500; }
.heading-dark-md { color: #333 !important; font-size: 18px; }
.heading-grey-16 { color: grey !important; font-size: 16px; }
.heading-999-16 { color: #999 !important; font-size: 16px; }

/* --- Text with weight --- */
.text-dark-medium { color: #333 !important; font-weight: 500; }
.text-dark-semibold { color: #333 !important; font-weight: 600; }
.text-grey-semibold { color: grey !important; font-weight: 600; }
.text-666-semibold { color: #666 !important; font-weight: 600; }
.text-6c757d-semibold { color: #6c757d !important; font-weight: 600; }
.text-danger-semibold { color: #dc3545 !important; font-weight: 600; }
.text-success-semibold { color: #28a745 !important; font-weight: 600; }
.text-warning-semibold { color: #ffc107 !important; font-weight: 600; }
.text-primary-semibold { color: #0d6efd !important; font-weight: 600; }
.text-155724-semibold { color: #155724 !important; font-weight: 600; }

/* --- Placeholder/empty state icons --- */
.placeholder-icon { font-size: 3rem; color: #ccc !important; }
.placeholder-icon-sm { font-size: 2rem; color: #ccc !important; }
.placeholder-icon-999 { font-size: 1.5rem; color: #999 !important; }
.placeholder-icon-6c757d { font-size: 2.5rem; color: #6c757d !important; }
.placeholder-icon-accent { font-size: 2rem; color: var(--omm-admin-accent, #193857) !important; }
.placeholder-icon-danger { font-size: 1.5rem; color: #dc3545 !important; }

/* --- Misc text combinations --- */
.text-darkgrey-italic { color: darkgrey !important; font-style: italic; }
.text-danger-12 { color: #dc3545 !important; font-size: 12px; }
.text-warning-12 { color: #ffc107 !important; font-size: 12px; }
.text-1-25rem-666 { font-size: 1.25rem; color: #666 !important; }
.text-success-32-semibold { font-size: 32px; color: #28a745 !important; font-weight: 600; }

/* ===========================================
   DIMENSIONS
   =========================================== */

/* --- Widths --- */
.w-28px { width: 28px; }
.w-40px { width: 40px; }
.w-48px { width: 48px; }
.w-50px { width: 50px; }
.w-60px { width: 60px; }
.w-64px { width: 64px; }
.w-80px { width: 80px; }
.w-120px { width: 120px; }
.w-300px { width: 300px; }
.w-auto { width: auto; }

/* --- Heights --- */
.h-4px { height: 4px; }
.h-8px { height: 8px; }
.h-18px { height: 18px; }
.h-28px { height: 28px; }
.h-40px { height: 40px; }
.h-45px { height: 45px; }
.h-48px { height: 48px; }
.h-50px { height: 50px; }
.h-60px { height: 60px; }
.h-64px { height: 64px; }
.h-80px { height: 80px; }
.h-100px { height: 100px; }
.h-120px { height: 120px; }
.h-150px { height: 150px; }
.h-200px { height: 200px; }
.h-300px { height: 300px; }
.h-400px { height: 400px; }
.h-500px { height: 500px; }

/* --- Viewport Heights --- */
.h-60vh { height: 60vh; }

/* --- Max Widths --- */
.max-w-100 { max-width: 100px; }
.max-w-150 { max-width: 150px; }
.max-w-180 { max-width: 180px; }
.max-w-200 { max-width: 200px; }
.max-w-250 { max-width: 250px; }
.max-w-300 { max-width: 300px; }
.max-w-350 { max-width: 350px; }
.max-w-400 { max-width: 400px; }
.max-w-600 { max-width: 600px; }
.max-w-760 { max-width: 760px; }

/* --- Max Heights --- */
.max-h-60 { max-height: 60px; }
.max-h-80 { max-height: 80px; }
.max-h-150 { max-height: 150px; }
.max-h-200 { max-height: 200px; }
.max-h-300 { max-height: 300px; }
.max-h-400 { max-height: 400px; }
.max-h-480 { max-height: 480px; }

/* --- Min Widths --- */
.min-w-100 { min-width: 100px; }
.min-w-180 { min-width: 180px; }
.min-w-200 { min-width: 200px; }
.min-w-220 { min-width: 220px; }

/* --- Min Heights --- */
.min-h-200 { min-height: 200px; }

/* ===========================================
   THUMBNAILS (width + height + object-fit)
   =========================================== */
.thumb-28 { width: 28px; height: 28px; }
.thumb-40 { width: 40px; height: 40px; object-fit: cover; }
.thumb-48 { width: 48px; height: 48px; object-fit: cover; }
.thumb-50 { width: 50px; height: 50px; object-fit: cover; }
.thumb-60 { width: 60px; height: 60px; object-fit: cover; }
.thumb-64 { width: 64px; height: 64px; }
.thumb-80 { width: 80px; height: 80px; object-fit: cover; }
.thumb-100 { width: 100px; height: 100px; object-fit: cover; }
.thumb-120 { width: 120px; height: 120px; object-fit: cover; }
.thumb-120-80 { width: 120px; height: 80px; object-fit: cover; }
.thumb-80-60 { width: 80px; height: 60px; object-fit: cover; }
.thumb-60-45 { width: 60px; height: 45px; object-fit: cover; }
.thumb-300 { width: 300px; height: 300px; }

/* ===========================================
   OBJECT FIT & DISPLAY
   =========================================== */
.obj-cover { object-fit: cover; }
.obj-contain { object-fit: contain; }
.obj-cover-70 { object-fit: cover; opacity: 0.7; }
/* Note: Use Bootstrap .d-none, .d-block where appropriate */

/* ===========================================
   CURSOR
   =========================================== */
.cursor-pointer { cursor: pointer; }
.cursor-crosshair { cursor: crosshair; }
.cursor-grab { cursor: grab; }

/* ===========================================
   BORDERS
   =========================================== */
.border-top-eee { border-top: 1px solid #eee; }
.border-bottom-dee2e6 { border-bottom: 1px solid #dee2e6; }
.border-ddd { border: 1px solid #ddd; }
.border-dee2e6 { border: 1px solid #dee2e6; }
.border-left-danger { border-left: 4px solid #dc3545; }
.border-left-warning { border-left: 4px solid #ffc107; }
.border-left-success { border-left: 4px solid #28a745; }
.border-left-info { border-left: 4px solid #17a2b8; }
.border-color-danger { border-color: #dc3545 !important; }

/* ===========================================
   BACKGROUNDS
   =========================================== */
.bg-f0f0f0 { background-color: #f0f0f0; }
.bg-f5f5f5 { background-color: #f5f5f5; }
.bg-f8f9fa { background-color: #f8f9fa; }  /* Same as Bootstrap .bg-light */
.bg-e9ecef { background-color: #e9ecef; }
.bg-fff3cd { background-color: #fff3cd; }  /* Bootstrap warning light */
.bg-f8d7da { background-color: #f8d7da; }  /* Bootstrap danger light */
.bg-1a1a1a { background-color: #1a1a1a; }
.bg-black { background: #000; }

/* ===========================================
   BUTTON STATES
   =========================================== */
.btn-disabled-grey {
  color: dimgrey !important;
  border-color: #dddddd !important;
  background-color: #dddddd !important;
}
.btn-danger-solid {
  color: #fff !important;
  border-color: #dc3545 !important;
  background-color: #dc3545 !important;
}
.btn-warning-solid {
  color: #fff !important;
  border-color: #ffc107 !important;
  background-color: #ffc107 !important;
}
.btn-danger-outline {
  color: #dc3545 !important;
  border-color: #dc3545 !important;
  background-color: #fff !important;
}
.btn-danger-border-only {
  border-color: #dc3545 !important;
}

/* ===========================================
   ALERTS (background + border combos)
   =========================================== */
.alert-warning-bordered {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
}
.alert-danger-bordered {
  background-color: #f8d7da;
  border-left: 4px solid #dc3545;
}

/* ===========================================
   OVERLAY & POSITIONING
   =========================================== */
.overlay-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.overlay-icon {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay-icon-positioned {
  font-size: 2rem;
  color: rgba(255,255,255,0.9);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.cover-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===========================================
   OPACITY
   =========================================== */
.opacity-70 { opacity: 0.7; }
.opacity-90 { opacity: 0.9; }

/* ===========================================
   PROGRESS BARS
   =========================================== */
.progress-bar-container {
  height: 4px;
  background-color: #e9ecef;
  width: 100%;
}
.progress-bar-brand {
  height: 4px;
  background-color: var(--omm-admin-accent, #193857);
}

/* ===========================================
   CIRCULAR PLACEHOLDERS
   =========================================== */
.circle-placeholder {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-placeholder-grey {
  background-color: #f0f0f0;
  border-radius: 50%;
  margin: 0 auto;
}
.circle-placeholder-danger {
  background-color: #f8d7da;
  border-radius: 50%;
  margin: 0 auto;
}
.circle-placeholder-brand {
  background-color: var(--omm-admin-accent, #193857);
  border-radius: 50%;
  color: white;
}
.circle-placeholder-success {
  background-color: #28a745;
  border-radius: 50%;
  color: white;
}
.circle-placeholder-disabled {
  background-color: #dddddd;
  border-radius: 50%;
  color: dimgrey;
}

/* ===========================================
   MISC UTILITIES
   =========================================== */
.visibility-hidden { visibility: hidden; }
.whitespace-pre-wrap { white-space: pre-wrap; word-break: break-word; }
.word-break-all { word-break: break-all; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.vertical-align-bottom { vertical-align: text-bottom; margin-right: 6px; }
/* Note: Use Bootstrap .font-monospace for monospace font */

/* ===========================================
   TERMINAL PANEL UTILITIES (global-admin)
   =========================================== */
.btn-warning-cf6000 {
  background: #cf6000;
  border-color: #cf6000;
  color: #fff;
}
.terminal-hints-text {
  font-size: 10px;
  color: #888 !important;
  margin-top: 8px;
  line-height: 1.4;
}

/* ===========================================
   ADDITIONAL COMPOSITE STYLES
   =========================================== */

/* Heading variants */
.heading-grey-16 { font-size: 16px; color: grey !important; }
.heading-grey-18 { font-size: 18px; color: grey !important; }
.heading-warning-18 { font-size: 18px; color: #856404 !important; }
.heading-danger-18 { font-size: 18px; color: #dc3545 !important; }

/* Code block backgrounds.
   ⛔ BOTH MUST SET A COLOUR. These are used on <code> elements that also carry .ommFS14,
   which forces `color: white` (omm-base.css). Without an explicit colour here the text is
   white on #f5f5f5 — a contrast ratio of ~1.1:1, i.e. invisible. Without its `color`,
   .code-block-bg renders the MFA otpauth URI unreadable, and that URI is the
   manual-entry fallback for anyone whose camera cannot scan the QR. The -dark variant
   carries `color` for the same reason on the recovery-codes page; both rules need it,
   and neither may lose it. */
.code-block-bg { background-color: #f5f5f5; color: #333; word-break: break-all; }
.code-block-bg-dark { background-color: #f5f5f5; color: #333 !important; }

/* QR code border */
.border-qr { border: 1px solid #ddd; }

/* Input max widths */
.max-w-code { max-width: 200px; }

/* Modal headings */
.modal-heading-black { font-size: 20px !important; color: black !important; }

/* Cropper container */
.cropper-container-box { width: 300px; height: 300px; background: #f0f0f0; }

/* Button danger outline (text and border red, no background) */
.btn-danger-outline-border { color: #dc3545 !important; border-color: #dc3545 !important; }

/* Heading dark variants */
.heading-dark-16 { font-size: 16px; color: #333 !important; }

/* ===========================================
   PERCENTAGE WIDTHS (for progress bars)
   Use with JavaScript: 
   element.className = element.className.replace(/\bpct-\d+\b/, 'pct-' + Math.round(percent));
   =========================================== */
.pct-0 { width: 0%; }
.pct-1 { width: 1%; }
.pct-2 { width: 2%; }
.pct-3 { width: 3%; }
.pct-4 { width: 4%; }
.pct-5 { width: 5%; }
.pct-6 { width: 6%; }
.pct-7 { width: 7%; }
.pct-8 { width: 8%; }
.pct-9 { width: 9%; }
.pct-10 { width: 10%; }
.pct-11 { width: 11%; }
.pct-12 { width: 12%; }
.pct-13 { width: 13%; }
.pct-14 { width: 14%; }
.pct-15 { width: 15%; }
.pct-16 { width: 16%; }
.pct-17 { width: 17%; }
.pct-18 { width: 18%; }
.pct-19 { width: 19%; }
.pct-20 { width: 20%; }
.pct-21 { width: 21%; }
.pct-22 { width: 22%; }
.pct-23 { width: 23%; }
.pct-24 { width: 24%; }
.pct-25 { width: 25%; }
.pct-26 { width: 26%; }
.pct-27 { width: 27%; }
.pct-28 { width: 28%; }
.pct-29 { width: 29%; }
.pct-30 { width: 30%; }
.pct-31 { width: 31%; }
.pct-32 { width: 32%; }
.pct-33 { width: 33%; }
.pct-34 { width: 34%; }
.pct-35 { width: 35%; }
.pct-36 { width: 36%; }
.pct-37 { width: 37%; }
.pct-38 { width: 38%; }
.pct-39 { width: 39%; }
.pct-40 { width: 40%; }
.pct-41 { width: 41%; }
.pct-42 { width: 42%; }
.pct-43 { width: 43%; }
.pct-44 { width: 44%; }
.pct-45 { width: 45%; }
.pct-46 { width: 46%; }
.pct-47 { width: 47%; }
.pct-48 { width: 48%; }
.pct-49 { width: 49%; }
.pct-50 { width: 50%; }
.pct-51 { width: 51%; }
.pct-52 { width: 52%; }
.pct-53 { width: 53%; }
.pct-54 { width: 54%; }
.pct-55 { width: 55%; }
.pct-56 { width: 56%; }
.pct-57 { width: 57%; }
.pct-58 { width: 58%; }
.pct-59 { width: 59%; }
.pct-60 { width: 60%; }
.pct-61 { width: 61%; }
.pct-62 { width: 62%; }
.pct-63 { width: 63%; }
.pct-64 { width: 64%; }
.pct-65 { width: 65%; }
.pct-66 { width: 66%; }
.pct-67 { width: 67%; }
.pct-68 { width: 68%; }
.pct-69 { width: 69%; }
.pct-70 { width: 70%; }
.pct-71 { width: 71%; }
.pct-72 { width: 72%; }
.pct-73 { width: 73%; }
.pct-74 { width: 74%; }
.pct-75 { width: 75%; }
.pct-76 { width: 76%; }
.pct-77 { width: 77%; }
.pct-78 { width: 78%; }
.pct-79 { width: 79%; }
.pct-80 { width: 80%; }
.pct-81 { width: 81%; }
.pct-82 { width: 82%; }
.pct-83 { width: 83%; }
.pct-84 { width: 84%; }
.pct-85 { width: 85%; }
.pct-86 { width: 86%; }
.pct-87 { width: 87%; }
.pct-88 { width: 88%; }
.pct-89 { width: 89%; }
.pct-90 { width: 90%; }
.pct-91 { width: 91%; }
.pct-92 { width: 92%; }
.pct-93 { width: 93%; }
.pct-94 { width: 94%; }
.pct-95 { width: 95%; }
.pct-96 { width: 96%; }
.pct-97 { width: 97%; }
.pct-98 { width: 98%; }
.pct-99 { width: 99%; }
.pct-100 { width: 100%; }

/* ===========================================
   PADDING-TOP PERCENTAGES (for aspect ratios)
   Use in templates: class="pt-pct-{{ printf "%.0f" (divByFloat 100 .Ratio) }}"
   =========================================== */
.pt-pct-0 { padding-top: 0%; }
.pt-pct-1 { padding-top: 1%; }
.pt-pct-2 { padding-top: 2%; }
.pt-pct-3 { padding-top: 3%; }
.pt-pct-4 { padding-top: 4%; }
.pt-pct-5 { padding-top: 5%; }
.pt-pct-6 { padding-top: 6%; }
.pt-pct-7 { padding-top: 7%; }
.pt-pct-8 { padding-top: 8%; }
.pt-pct-9 { padding-top: 9%; }
.pt-pct-10 { padding-top: 10%; }
.pt-pct-11 { padding-top: 11%; }
.pt-pct-12 { padding-top: 12%; }
.pt-pct-13 { padding-top: 13%; }
.pt-pct-14 { padding-top: 14%; }
.pt-pct-15 { padding-top: 15%; }
.pt-pct-16 { padding-top: 16%; }
.pt-pct-17 { padding-top: 17%; }
.pt-pct-18 { padding-top: 18%; }
.pt-pct-19 { padding-top: 19%; }
.pt-pct-20 { padding-top: 20%; }
.pt-pct-21 { padding-top: 21%; }
.pt-pct-22 { padding-top: 22%; }
.pt-pct-23 { padding-top: 23%; }
.pt-pct-24 { padding-top: 24%; }
.pt-pct-25 { padding-top: 25%; }
.pt-pct-26 { padding-top: 26%; }
.pt-pct-27 { padding-top: 27%; }
.pt-pct-28 { padding-top: 28%; }
.pt-pct-29 { padding-top: 29%; }
.pt-pct-30 { padding-top: 30%; }
.pt-pct-31 { padding-top: 31%; }
.pt-pct-32 { padding-top: 32%; }
.pt-pct-33 { padding-top: 33%; }
.pt-pct-34 { padding-top: 34%; }
.pt-pct-35 { padding-top: 35%; }
.pt-pct-36 { padding-top: 36%; }
.pt-pct-37 { padding-top: 37%; }
.pt-pct-38 { padding-top: 38%; }
.pt-pct-39 { padding-top: 39%; }
.pt-pct-40 { padding-top: 40%; }
.pt-pct-41 { padding-top: 41%; }
.pt-pct-42 { padding-top: 42%; }
.pt-pct-43 { padding-top: 43%; }
.pt-pct-44 { padding-top: 44%; }
.pt-pct-45 { padding-top: 45%; }
.pt-pct-46 { padding-top: 46%; }
.pt-pct-47 { padding-top: 47%; }
.pt-pct-48 { padding-top: 48%; }
.pt-pct-49 { padding-top: 49%; }
.pt-pct-50 { padding-top: 50%; }
.pt-pct-51 { padding-top: 51%; }
.pt-pct-52 { padding-top: 52%; }
.pt-pct-53 { padding-top: 53%; }
.pt-pct-54 { padding-top: 54%; }
.pt-pct-55 { padding-top: 55%; }
.pt-pct-56 { padding-top: 56%; }
.pt-pct-57 { padding-top: 57%; }
.pt-pct-58 { padding-top: 58%; }
.pt-pct-59 { padding-top: 59%; }
.pt-pct-60 { padding-top: 60%; }
.pt-pct-61 { padding-top: 61%; }
.pt-pct-62 { padding-top: 62%; }
.pt-pct-63 { padding-top: 63%; }
.pt-pct-64 { padding-top: 64%; }
.pt-pct-65 { padding-top: 65%; }
.pt-pct-66 { padding-top: 66%; }
.pt-pct-67 { padding-top: 67%; }
.pt-pct-68 { padding-top: 68%; }
.pt-pct-69 { padding-top: 69%; }
.pt-pct-70 { padding-top: 70%; }
.pt-pct-71 { padding-top: 71%; }
.pt-pct-72 { padding-top: 72%; }
.pt-pct-73 { padding-top: 73%; }
.pt-pct-74 { padding-top: 74%; }
.pt-pct-75 { padding-top: 75%; }
.pt-pct-76 { padding-top: 76%; }
.pt-pct-77 { padding-top: 77%; }
.pt-pct-78 { padding-top: 78%; }
.pt-pct-79 { padding-top: 79%; }
.pt-pct-80 { padding-top: 80%; }
.pt-pct-81 { padding-top: 81%; }
.pt-pct-82 { padding-top: 82%; }
.pt-pct-83 { padding-top: 83%; }
.pt-pct-84 { padding-top: 84%; }
.pt-pct-85 { padding-top: 85%; }
.pt-pct-86 { padding-top: 86%; }
.pt-pct-87 { padding-top: 87%; }
.pt-pct-88 { padding-top: 88%; }
.pt-pct-89 { padding-top: 89%; }
.pt-pct-90 { padding-top: 90%; }
.pt-pct-91 { padding-top: 91%; }
.pt-pct-92 { padding-top: 92%; }
.pt-pct-93 { padding-top: 93%; }
.pt-pct-94 { padding-top: 94%; }
.pt-pct-95 { padding-top: 95%; }
.pt-pct-96 { padding-top: 96%; }
.pt-pct-97 { padding-top: 97%; }
.pt-pct-98 { padding-top: 98%; }
.pt-pct-99 { padding-top: 99%; }
.pt-pct-100 { padding-top: 100%; }

/* ===========================================
   ACCENT COLORS (for usage bars)
   =========================================== */
.bg-accent { background-color: var(--omm-admin-accent, #193857); }
.bg-accent-subtle { background-color: color-mix(in srgb, var(--omm-admin-accent, #193857) 4%, #fff); }
.border-accent { border-color: var(--omm-admin-accent, #193857); }

/* ===========================================
   PLAN CARD STATES
   =========================================== */
.plan-card-current {
    border: 1px solid var(--omm-admin-accent, #193857);
    background-color: color-mix(in srgb, var(--omm-admin-accent, #193857) 4%, #fff);
}
.plan-card-other {
    border: 1px solid #dee2e6;
    background-color: #fafafa;
}

/* ===========================================
   AUDIO BUFFER BAR
   =========================================== */
.audio-buffer-bar {
    background: rgba(0,0,0,0.2);
    pointer-events: none;
}

/* ===========================================
   FORM LABEL/TEXT STYLES (account-admin)
   =========================================== */
.form-control-omm { color: #333 !important; text-align: left !important; }
.form-label-omm { color: #333; font-weight: 500; }
.form-check-label-omm { color: #333; }
.form-text-omm { color: #666; font-size: 12px; }

/* ===========================================
   UPLOAD ZONE (file upload areas)
   =========================================== */
.upload-zone {
    border: 2px dashed #dee2e6;
    padding: 2rem;
    text-align: center;
    background-color: #fafafa;
    cursor: pointer;
}
.upload-zone:hover { border-color: var(--omm-admin-accent, #193857); }
.upload-zone.dragover { border-color: var(--omm-admin-accent, #193857); background-color: color-mix(in srgb, var(--omm-admin-accent, #193857) 4%, #fff); }

/* ===========================================
   IMAGE PREVIEW STYLES
   =========================================== */
.preview-image { max-width: 200px; max-height: 200px; object-fit: contain; }
.current-image { max-width: 150px; max-height: 150px; object-fit: contain; border: 1px solid #dee2e6; }

/* ===========================================
   BRANDING CARD STYLES (setup wizard)
   =========================================== */
.branding-card { border: 1px solid #dee2e6; margin-bottom: 1rem; }
.branding-card:hover { border-color: var(--omm-admin-accent, #193857); }
.branding-complete { border-left: 4px solid #28a745; }
.branding-incomplete { border-left: 4px solid #ffc107; }
.branding-thumb { width: 80px; height: 80px; object-fit: cover; background-color: #f5f5f5; }
.branding-color-swatch { width: 80px; height: 80px; border: 1px solid #dee2e6; }
.branding-thumb-small { width: 40px; height: 40px; }

/* ===========================================
   GALLERY SLOT STYLES (image gallery)
   =========================================== */
.gallery-slot {
    border: 2px dashed #dee2e6;
    padding: 1rem;
    text-align: center;
    background-color: #fafafa;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.gallery-slot:hover { border-color: var(--omm-admin-accent, #193857); }
.gallery-slot.has-image { border-style: solid; background-color: #fff; }
.gallery-image { max-width: 100%; max-height: 150px; object-fit: contain; margin-bottom: 0.5rem; }
.gallery-slot-number {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* ===========================================
   COLOR PICKER GRID
   =========================================== */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px; }
.color-option { width: 60px; height: 40px; border: 2px solid transparent; cursor: pointer; }
.color-option:hover { border-color: #333; }
.color-option.selected { border-color: var(--omm-admin-accent, #193857); box-shadow: 0 0 0 2px var(--omm-admin-accent, #193857); }

/* ===========================================
   SETUP SECTION STYLES (wizard hub)
   =========================================== */
.setup-section { border: 1px solid #dee2e6; margin-bottom: 1rem; background-color: #fff; }
.setup-section:hover { border-color: var(--omm-admin-accent, #193857); }
.setup-row {
    display: flex;
    align-items: center;
    padding: 1rem;
}
.setup-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    background-color: #f5f5f5;
    margin-right: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.section-complete { border-left: 4px solid #28a745; }
.section-incomplete { border-left: 4px solid #ffc107; }

/* ===========================================
   COLOR PICKER STYLES
   =========================================== */
.color-preview { width: 100px; height: 100px; border-radius: 4px; }
.color-input-wrapper { display: flex; align-items: center; gap: 1rem; }
.preset-colors { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.preset-color { width: 40px; height: 40px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; }
.preset-color:hover { border-color: #333; }
.preset-color.selected { border-color: var(--omm-admin-accent, #193857); }
/* .preset-red is a NAMED SWATCH in the per-site colour picker's palette, Bootstrap's danger red,
   sibling to .preset-blue / .preset-green / .preset-yellow below — the tenant is choosing from
   ten named colours. Feeding the platform accent into it would make the swatch labelled "Red"
   render as whatever the operator set, which is both wrong and confusing. Same reasoning applies
   to data-color="#dc3545" on the matching swatch in site_setup_branding_color.gohtml. */
.preset-red { background-color: #dc3545; }
.preset-blue { background-color: #007bff; }
.preset-green { background-color: #28a745; }
.preset-yellow { background-color: #ffc107; }
.preset-purple { background-color: #6f42c1; }
.preset-orange { background-color: #fd7e14; }
.preset-teal { background-color: #20c997; }
.preset-pink { background-color: #e83e8c; }
.preset-cyan { background-color: #17a2b8; }
.preset-dark { background-color: #343a40; }

/* ===========================================
   SETUP WIZARD LAYOUT STYLES
   =========================================== */
.setup-section-header { padding: 1rem; border-bottom: 1px solid #dee2e6; }
.setup-row:last-child { border-bottom: none; }
.setup-row:hover { background-color: #fafafa; }
.setup-thumb img { width: 100%; height: 100%; object-fit: cover; }
.setup-thumb-color { width: 48px; height: 48px; border-radius: 8px; border: 1px solid #dee2e6; }
.setup-thumb-gallery { display: flex; gap: 2px; }
.setup-thumb-gallery-item { width: 15px; height: 48px; background-color: #f5f5f5; overflow: hidden; }
.setup-thumb-gallery-item:first-child { border-radius: 8px 0 0 8px; }
.setup-thumb-gallery-item:last-child { border-radius: 0 8px 8px 0; }
.setup-thumb-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.setup-content { flex-grow: 1; min-width: 0; }
.setup-label { font-size: 14px; color: #333; font-weight: 500; margin-bottom: 2px; }
.setup-value { font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-value-missing { color: #999; font-style: italic; }
.setup-status { flex-shrink: 0; margin-left: 0.5rem; margin-right: 0.5rem; }
.setup-action { flex-shrink: 0; }
.setup-action a { font-size: 13px; color: var(--omm-admin-accent, #193857); text-decoration: none; }
.setup-action a:hover { text-decoration: underline; }
.section-progress { font-size: 12px; color: #666; }
.section-progress.section-complete { color: #198754; border-left: 0; }

/* --- Bridge detail (agent bridges) ---
   ⛔ THESE LIVE HERE BECAUSE account-admin HAS NOWHERE ELSE TO PUT THEM, AND THE
   ALTERNATIVE HAD BEEN SILENTLY BROKEN IN PRODUCTION. They were declared in
   `{{ define "agent_bridge_detail_styles" }}` / `..._new_styles` blocks, but
   account_admin_base.gohtml invokes ZERO `_styles` blocks — measured, grep count 0 —
   so the whole mechanism is dead in that tier and every rule in those blocks had
   never applied. `.max-w-300` was declared beside them and worked anyway, purely
   because this file already defined it, which is why nobody noticed the others did
   not.

   ⚠️ NOT COSMETIC: .bridge-pre carries `word-break: break-word` and is applied to
   the supervisor's Blocked reason, the config parse error and the last runtime
   status — the three fields most likely to hold a long unbroken path or error, so
   they have been overflowing their container on a live page.

   ⚠️ Studio is unaffected and must not be "fixed": studio_base invokes 70 such
   blocks and they work. global-admin, publication-admin and profile-admin define
   none at all. account-admin is the only tier with the dead mechanism. */
.bridge-label { width: 110px; }
.bridge-pre {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}