/*
 * main.css — Global Design Foundation
 * DimeWell Loan Processing Platform
 * TWOFOUR DIMEWELL LIMITED
 * Version 2.0 — Production Ready
 *
 * Loaded by every page via base.html.
 * Covers:
 *   - CSS Custom Properties (brand colours, spacing, typography)
 *   - Reset / Normalize base
 *   - Typography hierarchy (h1–h6, body, captions)
 *   - Utility classes (margins, paddings, text alignment, display helpers)
 *   - Smooth scrolling
 *   - Global element defaults
 *
 * v2.0.1 FIXES:
 *   - FIX 1: Removed !important from .text-muted. The !important was
 *     overriding Bootstrap's cascade everywhere including dark footers,
 *     dark cards, and dark modals — making text invisible on dark
 *     backgrounds. Bootstrap's specificity is sufficient without it.
 *     The workaround in base.html's footer scoped CSS is now redundant
 *     and can be simplified.
 *
 *   - FIX 2: Added .bg-dark heading color guard after the typography
 *     section. main.css sets h1-h6 { color: #0f172a } (near-black).
 *     Headings inside .bg-dark containers inherit this dark color because
 *     Bootstrap's text-white on the parent doesn't cascade to h-elements
 *     without explicit targeting. The guard restores white for all
 *     h1-h6 inside any .bg-dark parent, fixing footer headings at source.
 *
 *   - FIX 3: Resolved .align-baseline class name collision. The flex
 *     utility section defined .align-baseline { align-items: baseline }
 *     and the vertical-align section also defined .align-baseline
 *     { vertical-align: baseline } — two different CSS properties on the
 *     same class name. The vertical-align variants are now renamed to
 *     .valign-baseline, .valign-top, .valign-middle, .valign-bottom to
 *     eliminate the collision. The flex .align-baseline is unchanged.
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES — Design Tokens
   ========================================================================== */

:root {
  /* ── Brand Palette ── */
  --brand-primary:       #1a5276;
  --brand-primary-light: #2980b9;
  --brand-primary-dark:  #0e3550;
  --brand-accent:        #3b82f6;
  --brand-accent-hover:  #2563eb;
  --brand-accent-light:  #eff6ff;

  --brand-success:       #10b981;
  --brand-success-light: #ecfdf5;
  --brand-success-dark:  #065f46;

  --brand-danger:        #ef4444;
  --brand-danger-light:  #fef2f2;
  --brand-danger-dark:   #991b1b;

  --brand-warning:       #f59e0b;
  --brand-warning-light: #fffbeb;
  --brand-warning-dark:  #92400e;

  --brand-info:          #0ea5e9;
  --brand-info-light:    #f0f9ff;
  --brand-info-dark:     #0c4a6e;

  /* ── Neutral Palette ── */
  --neutral-50:   #f8fafc;
  --neutral-100:  #f1f5f9;
  --neutral-200:  #e2e8f0;
  --neutral-300:  #cbd5e1;
  --neutral-400:  #94a3b8;
  --neutral-500:  #64748b;
  --neutral-600:  #475569;
  --neutral-700:  #334155;
  --neutral-800:  #1e293b;
  --neutral-900:  #0f172a;

  /* ── Semantic Aliases ── */
  --text-primary:      var(--neutral-900);
  --text-secondary:    var(--neutral-600);
  --text-muted:        var(--neutral-500);
  --text-placeholder:  var(--neutral-400);
  --text-inverse:      #ffffff;

  --bg-body:           #f8fafc;
  --bg-surface:        #ffffff;
  --bg-surface-hover:  #f1f5f9;
  --bg-overlay:        rgba(15, 23, 42, 0.5);

  --border-color:      var(--neutral-200);
  --border-color-light: var(--neutral-100);
  --border-color-strong: var(--neutral-300);

  /* ── Typography ── */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'SF Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
  --font-size-root: 16px;

  --text-xs:     0.75rem;    /* 12px */
  --text-sm:     0.8125rem;  /* 13px */
  --text-base:   0.875rem;   /* 14px */
  --text-md:     0.9375rem;  /* 15px */
  --text-lg:     1.0625rem;  /* 17px */
  --text-xl:     1.25rem;    /* 20px */
  --text-2xl:    1.5rem;     /* 24px */
  --text-3xl:    1.875rem;   /* 30px */
  --text-4xl:    2.25rem;    /* 36px */

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose:  2;

  --font-weight-light:  300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold:   700;
  --font-weight-extrabold: 800;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.02em;
  --letter-spacing-wider:   0.05em;

  /* ── Spacing Scale (4px base) ── */
  --space-0:   0;
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */

  /* ── Border Radius ── */
  --radius-none:   0;
  --radius-sm:     0.25rem;   /*  4px */
  --radius-md:     0.5rem;    /*  8px */
  --radius-lg:     0.75rem;   /* 12px */
  --radius-xl:     1rem;      /* 16px */
  --radius-2xl:    1.5rem;    /* 24px */
  --radius-full:   9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.3s ease;
  --transition-very-slow: 0.5s ease;

  /* ── Z-Index Scale ── */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-modal-bg:  1040;
  --z-modal:     1050;
  --z-popover:   1060;
  --z-tooltip:   1070;
  --z-toast:     1080;

  /* ── Layout ── */
  --navbar-height:  64px;
  --sidebar-width:  260px;
  --content-max-width: 1280px;
}

/* ==========================================================================
   RESET / NORMALIZE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-root);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-body);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   TYPOGRAPHY HIERARCHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin-bottom: 0.5rem;
}

h1, .h1 { font-size: var(--text-4xl); letter-spacing: var(--letter-spacing-tight); }
h2, .h2 { font-size: var(--text-3xl); letter-spacing: var(--letter-spacing-tight); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); }
h5, .h5 { font-size: var(--text-lg); }
h6, .h6 { font-size: var(--text-base); }

/*
 * FIX 2 — Dark context heading colour guard.
 * The h1-h6 rule above sets color: #0f172a (near-black) globally.
 * Inside dark containers (.bg-dark) this makes headings invisible
 * because Bootstrap's text-white only applies to direct text nodes,
 * not h-elements without explicit targeting. This guard restores
 * white for all headings inside any .bg-dark parent — covering the
 * footer, dark cards, dark modal headers, and any future dark sections.
 * No !important needed — this selector is more specific than h1-h6 alone.
 */
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark .h1, .bg-dark .h2, .bg-dark .h3,
.bg-dark .h4, .bg-dark .h5, .bg-dark .h6 {
  color: #ffffff;
}

p {
  margin-bottom: 0.75rem;
  line-height: var(--leading-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--brand-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--brand-accent-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

strong, b {
  font-weight: var(--font-weight-semibold);
}

em, i {
  font-style: italic;
}

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

blockquote {
  border-left: 4px solid var(--brand-accent);
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--text-secondary);
  font-style: italic;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--neutral-100);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--brand-danger-dark);
}

pre {
  font-family: var(--font-mono);
  background: var(--neutral-900);
  color: var(--neutral-100);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: var(--leading-snug);
  margin-bottom: 1rem;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
  border-radius: 0;
}

/* ==========================================================================
   LISTS
   ========================================================================== */

ul, ol {
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
}

ul li, ol li {
  margin-bottom: 0.25rem;
}

.list-unstyled {
  list-style: none;
  padding-left: 0;
}

.list-inline {
  list-style: none;
  padding-left: 0;
}

.list-inline li {
  display: inline-block;
  margin-right: 0.75rem;
}

/* ==========================================================================
   IMAGES & MEDIA
   ========================================================================== */

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

img {
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

figure {
  margin: 0 0 1rem 0;
}

figcaption {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* ==========================================================================
   HORIZONTAL RULE
   ========================================================================== */

hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 1.25rem 0;
}

hr.thick {
  border-top-width: 2px;
}

hr.dashed {
  border-top-style: dashed;
}

/* ==========================================================================
   TABLES (base — extended in tables.css)
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
}

th, td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-color-light);
}

/* ==========================================================================
   FORM ELEMENTS (base — extended in forms.css)
   ========================================================================== */

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Remove default fieldset/legend styling */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  padding: 0;
}

/* ==========================================================================
   SCROLLBAR STYLING
   ========================================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) var(--neutral-100);
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {
  background: var(--brand-accent-light);
  color: var(--brand-accent);
}

::-moz-selection {
  background: var(--brand-accent-light);
  color: var(--brand-accent);
}

/* ==========================================================================
   FOCUS-VISIBLE GLOBAL
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   SKIP TO MAIN CONTENT LINK (accessibility)
   ========================================================================== */

.skip-to-main {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--brand-accent);
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  z-index: var(--z-tooltip);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-to-main:focus {
  top: 0.5rem;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* ── Display ── */
.d-none           { display: none !important; }
.d-inline         { display: inline !important; }
.d-inline-block   { display: inline-block !important; }
.d-block          { display: block !important; }
.d-flex           { display: flex !important; }
.d-inline-flex    { display: inline-flex !important; }
.d-grid           { display: grid !important; }

/* ── Flex ── */
.flex-row         { flex-direction: row !important; }
.flex-column      { flex-direction: column !important; }
.flex-wrap        { flex-wrap: wrap !important; }
.flex-nowrap      { flex-wrap: nowrap !important; }
.justify-start    { justify-content: flex-start !important; }
.justify-end      { justify-content: flex-end !important; }
.justify-center   { justify-content: center !important; }
.justify-between  { justify-content: space-between !important; }
.justify-around   { justify-content: space-around !important; }
.align-start      { align-items: flex-start !important; }
.align-end        { align-items: flex-end !important; }
.align-center     { align-items: center !important; }
.align-stretch    { align-items: stretch !important; }
.align-baseline   { align-items: baseline !important; }
.flex-1           { flex: 1 !important; }
.flex-shrink-0    { flex-shrink: 0 !important; }
.flex-grow-1      { flex-grow: 1 !important; }

/* ── Grid ── */
.grid-cols-2      { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3      { grid-template-columns: repeat(3, 1fr) !important; }
.grid-cols-4      { grid-template-columns: repeat(4, 1fr) !important; }
.gap-1             { gap: var(--space-1) !important; }
.gap-2             { gap: var(--space-2) !important; }
.gap-3             { gap: var(--space-3) !important; }
.gap-4             { gap: var(--space-4) !important; }
.gap-6             { gap: var(--space-6) !important; }
.gap-8             { gap: var(--space-8) !important; }

/* ── Text Alignment ── */
.text-left        { text-align: left !important; }
.text-center      { text-align: center !important; }
.text-right       { text-align: right !important; }
.text-justify     { text-align: justify !important; }

/* ── Text Colour ── */
.text-primary     { color: var(--brand-primary) !important; }
.text-accent      { color: var(--brand-accent) !important; }
.text-success     { color: var(--brand-success) !important; }
.text-danger      { color: var(--brand-danger) !important; }
.text-warning     { color: var(--brand-warning) !important; }
.text-info        { color: var(--brand-info) !important; }
/*
 * FIX 1: Removed !important from .text-muted.
 * Previously: .text-muted { color: var(--text-muted) !important; }
 * The !important was overriding Bootstrap's cascade in ALL contexts,
 * including dark footers, dark cards, and dark modals — making
 * text-muted content invisible against dark backgrounds.
 * Bootstrap's own .text-muted rule has sufficient specificity without it.
 * The footer colour workarounds in base.html's inline <style> are now
 * redundant for this specific issue and can be cleaned up over time.
 */
.text-muted       { color: var(--text-muted); }
.text-secondary   { color: var(--text-secondary) !important; }
.text-inverse     { color: var(--text-inverse) !important; }

/* ── Text Size ── */
.text-xs          { font-size: var(--text-xs) !important; }
.text-sm          { font-size: var(--text-sm) !important; }
.text-base        { font-size: var(--text-base) !important; }
.text-md          { font-size: var(--text-md) !important; }
.text-lg          { font-size: var(--text-lg) !important; }
.text-xl          { font-size: var(--text-xl) !important; }
.text-2xl         { font-size: var(--text-2xl) !important; }
.text-3xl         { font-size: var(--text-3xl) !important; }

/* ── Font Weight ── */
.fw-light         { font-weight: var(--font-weight-light) !important; }
.fw-normal        { font-weight: var(--font-weight-normal) !important; }
.fw-medium        { font-weight: var(--font-weight-medium) !important; }
.fw-semibold      { font-weight: var(--font-weight-semibold) !important; }
.fw-bold          { font-weight: var(--font-weight-bold) !important; }
.fw-extrabold     { font-weight: var(--font-weight-extrabold) !important; }

/* ── Text Transform ── */
.text-uppercase   { text-transform: uppercase !important; }
.text-lowercase   { text-transform: lowercase !important; }
.text-capitalize  { text-transform: capitalize !important; }

/* ── Text Decoration ── */
.text-underline   { text-decoration: underline !important; }
.text-no-underline { text-decoration: none !important; }
.text-line-through { text-decoration: line-through !important; }

/* ── Letter Spacing ── */
.tracking-tight   { letter-spacing: var(--letter-spacing-tight) !important; }
.tracking-normal  { letter-spacing: var(--letter-spacing-normal) !important; }
.tracking-wide    { letter-spacing: var(--letter-spacing-wide) !important; }
.tracking-wider   { letter-spacing: var(--letter-spacing-wider) !important; }

/* ── Line Height ── */
.leading-tight    { line-height: var(--leading-tight) !important; }
.leading-snug     { line-height: var(--leading-snug) !important; }
.leading-normal   { line-height: var(--leading-normal) !important; }
.leading-relaxed  { line-height: var(--leading-relaxed) !important; }

/* ── Truncation ── */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Whitespace ── */
.whitespace-normal  { white-space: normal !important; }
.whitespace-nowrap  { white-space: nowrap !important; }
.whitespace-pre     { white-space: pre !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }

/* ── Margins ── */
.m-0   { margin: var(--space-0) !important; }
.m-1   { margin: var(--space-1) !important; }
.m-2   { margin: var(--space-2) !important; }
.m-3   { margin: var(--space-3) !important; }
.m-4   { margin: var(--space-4) !important; }
.m-6   { margin: var(--space-6) !important; }
.m-8   { margin: var(--space-8) !important; }

.mt-0  { margin-top: var(--space-0) !important; }
.mt-1  { margin-top: var(--space-1) !important; }
.mt-2  { margin-top: var(--space-2) !important; }
.mt-3  { margin-top: var(--space-3) !important; }
.mt-4  { margin-top: var(--space-4) !important; }
.mt-6  { margin-top: var(--space-6) !important; }
.mt-8  { margin-top: var(--space-8) !important; }

.mb-0  { margin-bottom: var(--space-0) !important; }
.mb-1  { margin-bottom: var(--space-1) !important; }
.mb-2  { margin-bottom: var(--space-2) !important; }
.mb-3  { margin-bottom: var(--space-3) !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mb-6  { margin-bottom: var(--space-6) !important; }
.mb-8  { margin-bottom: var(--space-8) !important; }

.ml-0  { margin-left: var(--space-0) !important; }
.ml-1  { margin-left: var(--space-1) !important; }
.ml-2  { margin-left: var(--space-2) !important; }
.ml-3  { margin-left: var(--space-3) !important; }
.ml-4  { margin-left: var(--space-4) !important; }
.ml-auto { margin-left: auto !important; }

.mr-0  { margin-right: var(--space-0) !important; }
.mr-1  { margin-right: var(--space-1) !important; }
.mr-2  { margin-right: var(--space-2) !important; }
.mr-3  { margin-right: var(--space-3) !important; }
.mr-4  { margin-right: var(--space-4) !important; }
.mr-auto { margin-right: auto !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ── Paddings ── */
.p-0   { padding: var(--space-0) !important; }
.p-1   { padding: var(--space-1) !important; }
.p-2   { padding: var(--space-2) !important; }
.p-3   { padding: var(--space-3) !important; }
.p-4   { padding: var(--space-4) !important; }
.p-6   { padding: var(--space-6) !important; }
.p-8   { padding: var(--space-8) !important; }

.pt-0  { padding-top: var(--space-0) !important; }
.pt-2  { padding-top: var(--space-2) !important; }
.pt-3  { padding-top: var(--space-3) !important; }
.pt-4  { padding-top: var(--space-4) !important; }

.pb-0  { padding-bottom: var(--space-0) !important; }
.pb-2  { padding-bottom: var(--space-2) !important; }
.pb-3  { padding-bottom: var(--space-3) !important; }
.pb-4  { padding-bottom: var(--space-4) !important; }

.pl-0  { padding-left: var(--space-0) !important; }
.pl-3  { padding-left: var(--space-3) !important; }
.pl-4  { padding-left: var(--space-4) !important; }

.pr-0  { padding-right: var(--space-0) !important; }
.pr-3  { padding-right: var(--space-3) !important; }
.pr-4  { padding-right: var(--space-4) !important; }

.px-2  { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3  { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4  { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }

.py-1  { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2  { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3  { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4  { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-6  { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }

/* ── Width / Height ── */
.w-100      { width: 100% !important; }
.w-auto     { width: auto !important; }
.w-50       { width: 50% !important; }
.w-25       { width: 25% !important; }
.w-33       { width: 33.333% !important; }
.w-66       { width: 66.666% !important; }
.max-w-xs   { max-width: 20rem !important; }
.max-w-sm   { max-width: 24rem !important; }
.max-w-md   { max-width: 28rem !important; }
.max-w-lg   { max-width: 36rem !important; }
.max-w-xl   { max-width: 48rem !important; }
.max-w-full { max-width: 100% !important; }

.h-100      { height: 100% !important; }
.h-auto     { height: auto !important; }
.min-h-100  { min-height: 100% !important; }

/* ── Overflow ── */
.overflow-hidden    { overflow: hidden !important; }
.overflow-auto      { overflow: auto !important; }
.overflow-x-auto    { overflow-x: auto !important; }
.overflow-y-auto    { overflow-y: auto !important; }
.overflow-x-hidden  { overflow-x: hidden !important; }

/* ── Position ── */
.position-relative  { position: relative !important; }
.position-absolute  { position: absolute !important; }
.position-fixed     { position: fixed !important; }
.position-sticky    { position: sticky !important; }
.top-0              { top: 0 !important; }
.top-50             { top: 50% !important; }
.start-50           { left: 50% !important; }
.bottom-0           { bottom: 0 !important; }
.end-0              { right: 0 !important; }
.translate-middle   { transform: translate(-50%, -50%) !important; }

/* ── Visibility ── */
.visible       { visibility: visible !important; }
.invisible     { visibility: hidden !important; }
.opacity-0     { opacity: 0 !important; }
.opacity-50    { opacity: 0.5 !important; }
.opacity-100   { opacity: 1 !important; }

/* ── Background ── */
.bg-white       { background-color: #ffffff !important; }
.bg-body        { background-color: var(--bg-body) !important; }
.bg-surface     { background-color: var(--bg-surface) !important; }
.bg-transparent { background-color: transparent !important; }
.bg-primary     { background-color: var(--brand-primary) !important; }
.bg-accent      { background-color: var(--brand-accent) !important; }
.bg-success     { background-color: var(--brand-success) !important; }
.bg-danger      { background-color: var(--brand-danger) !important; }
.bg-warning     { background-color: var(--brand-warning) !important; }
.bg-info        { background-color: var(--brand-info) !important; }
.bg-light       { background-color: var(--neutral-50) !important; }
.bg-muted       { background-color: var(--neutral-100) !important; }

/* ── Border ── */
.border           { border: 1px solid var(--border-color) !important; }
.border-0         { border: none !important; }
.border-top       { border-top: 1px solid var(--border-color) !important; }
.border-bottom    { border-bottom: 1px solid var(--border-color) !important; }
.border-left      { border-left: 1px solid var(--border-color) !important; }
.border-right     { border-right: 1px solid var(--border-color) !important; }
.border-primary   { border-color: var(--brand-primary) !important; }
.border-accent    { border-color: var(--brand-accent) !important; }
.border-success   { border-color: var(--brand-success) !important; }
.border-danger    { border-color: var(--brand-danger) !important; }

.rounded-none     { border-radius: var(--radius-none) !important; }
.rounded-sm       { border-radius: var(--radius-sm) !important; }
.rounded          { border-radius: var(--radius-md) !important; }
.rounded-lg       { border-radius: var(--radius-lg) !important; }
.rounded-xl       { border-radius: var(--radius-xl) !important; }
.rounded-full     { border-radius: var(--radius-full) !important; }

/* ── Shadow ── */
.shadow-none  { box-shadow: none !important; }
.shadow-xs    { box-shadow: var(--shadow-xs) !important; }
.shadow-sm    { box-shadow: var(--shadow-sm) !important; }
.shadow-md    { box-shadow: var(--shadow-md) !important; }
.shadow-lg    { box-shadow: var(--shadow-lg) !important; }
.shadow-xl    { box-shadow: var(--shadow-xl) !important; }

/* ── Cursor ── */
.cursor-pointer  { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-default  { cursor: default !important; }

/* ── User Select ── */
.select-none     { user-select: none !important; }
.select-text     { user-select: text !important; }

/* ── Pointer Events ── */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* ── Object Fit ── */
.object-cover      { object-fit: cover !important; }
.object-contain    { object-fit: contain !important; }

/*
 * FIX 3 — Vertical Align utilities renamed to avoid .align-baseline collision.
 * The original file defined .align-baseline twice:
 *   1. In flex utilities: align-items: baseline   ← correct, kept as-is
 *   2. Here: vertical-align: baseline             ← renamed to .valign-*
 * Having two rules with the same selector and different properties causes
 * both to apply simultaneously, which is semantically incorrect. The
 * vertical-align variants are now .valign-* to make their purpose explicit
 * and eliminate the dual-property conflict on .align-baseline.
 *
 * If any template uses .align-top / .align-middle / .align-bottom / .align-baseline
 * for vertical-align purposes, update those to .valign-top etc.
 */
.valign-baseline { vertical-align: baseline !important; }
.valign-top      { vertical-align: top !important; }
.valign-middle   { vertical-align: middle !important; }
.valign-bottom   { vertical-align: bottom !important; }

/* ==========================================================================
   RESPONSIVE UTILITY BREAKPOINTS
   ========================================================================== */

@media (max-width: 576px) {
  .d-sm-none { display: none !important; }
}

@media (max-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
}

@media (max-width: 992px) {
  .d-lg-none { display: none !important; }
}

@media (max-width: 1200px) {
  .d-xl-none { display: none !important; }
}

/* ==========================================================================
   PRINT OVERRIDES
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  a, a:visited {
    text-decoration: underline;
    color: #000000 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555555;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  p, li, blockquote {
    orphans: 3;
    widows: 3;
  }

  thead {
    display: table-header-group;
  }

  tr, img {
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}