/*
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: utilities.css
 * @TITLE: PATHWRITE
 * @DESCRIPTION: Single-purpose utility classes - text colour/weight helpers, truncation, divider, overlay backdrop.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.6
 * - File Modified | Ary van der Pijl | 2026-09-03 | Gap Analysis v4.0 §4.0: added .opacity-30/.opacity-40 alongside the existing .opacity-80 - replaces repeated inline style="...opacity:.3/.4" hard-constraint violations on empty-state and placeholder icons across subscriber/dashboard.php. |
 * VERSION 1.0.5
 * - File Modified | Ary van der Pijl | 2026-09-03 | Gap Analysis v4.0 §4.0: added .icon-sm (32px) and .icon-lg-plus (48px) - two sizes that don't fit the existing 36/40/64/72/96 scale, found on step-survey.php's loading/empty-state icons (inline style="font-size:2rem"/"font-size:3rem"). |
 * VERSION 1.0.4
 * - File Modified | Ary van der Pijl | 2026-09-03 | Gap Analysis v4.0 §4.0: added .icon-inline-xs/-sm/-lg (14/16/20px, same vertical-align:text-bottom as the existing 18px .icon-inline) - replaces repeated inline style="font-size:Npx;vertical-align:text-bottom" hard-constraint violations found across the wizard checkout/preview pages, same size family as VERSION 1.0.2's .icon-md/-lg/-xl/-2xl/-3xl. |
 * VERSION 1.0.3
 * - File Modified | Ary van der Pijl | 2026-08-16 | Added .text-pre-wrap (white-space: pre-wrap) - reusable replacement for a would-be inline style="white-space:pre-wrap" on the read-only reference-text shown in the new admin book-template translations modal (admin/templates.php). |
 * VERSION 1.0.2
 * - File Modified | Ary van der Pijl | 2026-08-15 | Added .icon-md/.icon-lg/.icon-xl/.icon-2xl/.icon-3xl (36/40/64/72/96px) - reusable replacements for repeated inline style="font-size:..." on Material icons across the brochure pages, .opacity-80 for two inline style="opacity:.8" price captions on pricing.php, and .align-text-bottom for icons that only needed vertical-align without a size override, all found while retrofitting the brochure pages for multi-language support. |
 * VERSION 1.0.1
 * - File Modified | Ary van der Pijl | 2026-08-15 | Added .icon-inline - reusable replacement for the repeated inline style="font-size:18px;vertical-align:text-bottom" (hard-constraint violation) on small inline Material icons, fixed while retrofitting order-detail.php for multi-language support. Also added .truncate-md (max-width:260px) for JS-generated table cells with a truncated comment/text preview - replaces an inline style="max-width:260px" in admin-reviews.js. Also added .text-xs (var(--text-xs)) - replaces an inline style="font-size:12px" caption on profile.php. |
 * VERSION 1.0.0
 * + File Created | Ary van der Pijl | 2026-08-06 | Extracted from main.css as part of the Phase 17 CSS architecture split (9-file hierarchy per STD-E). |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

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

.icon-inline {
  font-size: 18px;
  vertical-align: text-bottom;
}

.icon-inline-sm {
  font-size: 16px;
  vertical-align: text-bottom;
}

.icon-inline-xs {
  font-size: 14px;
  vertical-align: text-bottom;
}

.icon-inline-lg {
  font-size: 20px;
  vertical-align: text-bottom;
}

.truncate-md {
  max-width: 260px;
}

.text-xs {
  font-size: var(--text-xs);
}

.icon-sm {
  font-size: 32px;
}

.icon-md {
  font-size: 36px;
}

.icon-lg-plus {
  font-size: 48px;
}

.icon-lg {
  font-size: 40px;
}

.icon-xl {
  font-size: 64px;
}

.icon-2xl {
  font-size: 72px;
}

.icon-3xl {
  font-size: 96px;
}

.opacity-80 {
  opacity: .8;
}

.opacity-30 {
  opacity: .3;
}

.opacity-40 {
  opacity: .4;
}

.align-text-bottom {
  vertical-align: text-bottom;
}

.text-muted {
  color: var(--color-text-muted) !important;
}

.text-subtle {
  color: var(--color-text-subtle) !important;
}

.text-primary {
  color: var(--color-primary) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}

.text-warning {
  color: var(--color-warning) !important;
}

.fw-medium {
  font-weight: var(--fw-medium);
}

.fw-semibold {
  font-weight: var(--fw-semibold);
}

.fw-bold {
  font-weight: var(--fw-bold);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-pre-wrap {
  white-space: pre-wrap;
}

.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-5) 0;
}

.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: calc(var(--z-modal) - 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PATHWRITE - Additional Component Styles
   ═══════════════════════════════════════════════════════════════════════════ */