/* ============================================================
   Utilities — Text, Sizing, Gradients, Layout Helpers
   ============================================================ */


/* ── Semantic Text Colors ─────────────────────────────────── */
.text-heading   { color: var(--bs-heading-color); }
.text-sub       { color: var(--text-sub); }
.text-primary-c { color: var(--bs-primary); }
.text-success-c { color: var(--bs-success); }
.text-info-c    { color: var(--bs-info); }
.text-warning-c { color: var(--color-warning); }
.text-danger-c  { color: var(--bs-danger); }


/* ── Bootstrap Overrides ──────────────────────────────────── */
.fs-7 { font-size: 0.875rem; }
.text-center    { text-align: center !important; }
.text-right     { text-align: right !important; }
.text-left      { text-align: left !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-muted     { color: var(--bs-gray) !important; }
.bg-light       { background-color: var(--bs-gray-100) !important; }
.bg-dark        { background-color: var(--bs-dark) !important; }
.text-white     { color: #fff !important; }

.bg-info {
    --bs-bg-opacity: 1;
    background-color: #74efff !important;
}

.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgb(255 247 81) !important;
}


/* ── Gradient Backgrounds ─────────────────────────────────── */
.bg-modern-1  { background: linear-gradient(135deg, #eefcff 0%, #d6f2f7 40%, #bde7f0 100%); }
.bg-modern-2  { background: linear-gradient(135deg, #fffcf5 0%, #ffe8d0 40%, #ffd0b0 100%); }
.bg-modern-3  { background: linear-gradient(135deg, #f7f8fc 0%, #e8eaf2 40%, #d9dbe9 100%); }
.bg-modern-4  { background: linear-gradient(135deg, #f3fcf3 0%, #dcecdb 40%, #c5dbc3 100%); }
.bg-modern-5  { background: linear-gradient(135deg, #fffef5 0%, #fff6d9 40%, #ffedc1 100%); }
.bg-modern-6  { background: linear-gradient(135deg, #fff5f8 0%, #fbe3eb 40%, #f7d2e0 100%); }
.bg-modern-7  { background: linear-gradient(135deg, #f0f5f8 0%, #d8e0e6 40%, #bfcbda 100%); }
.bg-modern-8  { background: linear-gradient(135deg, #fff3e6 0%, #ffcba6 40%, #ff9f7a 100%); }
.bg-modern-9  { background: linear-gradient(135deg, #f0faff 0%, #d0eff7 40%, #b0e0ee 100%); }
.bg-modern-10 { background: linear-gradient(135deg, #fcfcfc 0%, #e8e6e5 40%, #d4d0ce 100%); }
.bg-modern-11 { background: linear-gradient(135deg, #f5fcf5 0%, #e0ece0 40%, #cbe0cb 100%); }
.bg-modern-12 { background: linear-gradient(135deg, #f8f5fc 0%, #e7e0f2 40%, #d7cbe9 100%); }
.bg-modern-13 { background: linear-gradient(135deg, #e6e6e6 0%, #c2c2c2 40%, #9e9e9e 100%); }
.bg-modern-14 { background: linear-gradient(135deg, #fcf5fd 0%, #e9ddeb 40%, #d7c2da 100%); }
.bg-modern-15 { background: linear-gradient(135deg, #f0faff 0%, #d1eff7 40%, #b2e0ee 100%); }


/* ── Font Sizes (Pixel-Based) ─────────────────────────────── */
.fs-8  { font-size: 8px !important; }
.fs-9  { font-size: 9px !important; }
.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }


/* ── Image Sizing ─────────────────────────────────────────── */
.img-avatar-80    { width: 80px; height: 80px; object-fit: cover; border-radius: var(--bs-border-radius-lg); }
.img-logo-64      { width: 64px; height: 64px; object-fit: contain; border-radius: var(--bs-border-radius-lg); }
.img-logo-64-cover { width: 64px; height: 64px; object-fit: cover; border-radius: var(--bs-border-radius-lg); }
.img-thumb-36     { width: 36px; height: 36px; object-fit: cover; border-radius: var(--bs-border-radius); }
.img-thumb-34     { width: 34px; height: 34px; object-fit: cover; }
.img-thumb-40     { width: 40px; height: 40px; object-fit: cover; }
.img-gallery-100  { width: 100px; height: 100px; object-fit: cover; border-radius: var(--bs-border-radius); }

.img-preview-100  { max-height: 100px; }
.img-preview-120  { max-height: 120px; }
.img-preview-150  { max-height: 150px; }

.img-header-15rem { width: 15rem; height: 15rem; object-fit: cover; }
.img-responsive-half { max-width: 50%; height: auto; }

.img-review-cover { max-height: 200px; object-fit: cover; }


/* ── Text & Layout Helpers ────────────────────────────────── */
.pre-wrap-break { white-space: pre-wrap; word-break: break-word; }

.text-truncate-250 { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-truncate-220 { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.text-wrap-260 { white-space: normal; max-width: 260px; }
.text-wrap-220 { white-space: normal; max-width: 220px; }

.col-w-40  { width: 40px; }
.col-w-120 { width: 120px; }
.col-w-140 { width: 140px; }
.col-w-150 { max-width: 150px; }
.col-w-200 { max-width: 200px; }

.max-w-400 { max-width: 400px; }
.max-w-600 { max-width: 600px; }

.scroll-y-450 { max-height: 450px; overflow-y: auto; }
.min-h-400    { min-height: 400px; }
.pre-line     { white-space: pre-line; }

.col-pct-30 { width: 30%; }
.col-pct-70 { width: 70%; }

.rounded-xl       { border-radius: 2.5rem !important; }
.object-fit-cover { object-fit: cover; }

.dropdown-menu-16rem { width: 16rem; }
.search-dropdown     { max-height: 300px; z-index: 1050; }
.nowrap-table        { white-space: nowrap; }
.line-height-tight   { line-height: 1.3; }

.card-section-heading   { color: var(--bs-heading-color); }
.card-section-heading i { color: var(--bs-info); }


/* ── Color-Specific Backgrounds ───────────────────────────── */
.bg-teal-subtle { background: var(--soft-info-bg); }
.bg-light-gray  { background-color: var(--bs-gray-100); }

.border-light-custom { border-color: var(--bs-gray-300) !important; }

.border-divider {
    border-top: 1px solid var(--bs-gray-300);
    border-bottom: 1px solid var(--bs-gray-300);
}

.alert-warning-box {
    background: rgba(var(--bs-warning-rgb), 0.12);
    border: 1px solid rgba(var(--bs-warning-rgb), 0.4);
    border-radius: var(--bs-border-radius);
}

.row-overdue { background: rgba(237, 76, 120, 0.04); }


/* ── Dashboard Interactive ────────────────────────────────── */
.hover-bg-light { transition: background-color 0.15s ease; }
.hover-bg-light:hover { background-color: var(--bs-gray-100) !important; }

.transition-all { transition: all 0.15s ease; }
.min-width-0    { min-width: 0; }


/* ── Inline-Style Replacement Utilities ──────────────────── */
.img-avatar-88    { width: 88px; height: 88px; object-fit: cover; }
.cursor-pointer   { cursor: pointer; }
.max-w-320        { max-width: 320px; }
.col-w-90         { width: 90px; }
.h-48             { height: 48px; }
.w-pct-35         { width: 35%; }
.w-pct-40         { width: 40%; }
.w-pct-80         { width: 80%; }
.w-pct-60         { width: 60%; }
.size-20          { width: 20px; height: 20px; }
.size-check       { width: 1.15rem; height: 1.15rem; }
.h-6              { height: 6px; }
.h-10             { height: 10px; }
.h-4              { height: 4px; }
.w-50px           { width: 50px; }
.opacity-10       { opacity: 0.1; }
.fs-13            { font-size: 13px !important; }


/* ── Focus-Visible — Accessible keyboard focus indicators ── */
a:focus-visible,
.clickable-row:focus-visible,
.dropdown-item:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: var(--bs-border-radius-sm);
}

.dropdown-action-btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.form-stepper-step:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: var(--bs-border-radius);
}