/* ============================================================================
   UTILITIES — Non-Bootstrap Additions
   Only classes NOT provided by Bootstrap 5.3+.
   Bootstrap handles: spacing (m-*/p-*), display (d-*), flex, position,
   opacity, gap, borders, visibility, text-align, text-transform.
   ============================================================================ */

/* --- Text Truncation (Bootstrap has .text-truncate but not multiline) --- */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

/* --- Type Scale (token-based, complements Bootstrap's .fs-* classes) --- */
.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-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; }

/* --- Cursors (not in Bootstrap) --- */
.cursor-pointer { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !important; }

/* --- Interaction (not in Bootstrap) --- */
.select-none { user-select: none !important; }
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* --- Responsive Visibility (named breakpoints) --- */
@media (max-width: 767px) {
    .hidden-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hidden-desktop { display: none !important; }
}

@media (max-width: 1023px) {
    .hidden-tablet { display: none !important; }
}

/* --- Sizing (Tailwind-named, not in Bootstrap) --- */
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.min-w-0 { min-width: 0 !important; }
.min-h-screen { min-height: 100vh !important; }
.max-w-xs { max-width: 320px !important; }
.max-w-sm { max-width: 640px !important; }
.max-w-md { max-width: 768px !important; }
.max-w-lg { max-width: 1024px !important; }
.max-w-xl { max-width: 1280px !important; }

/* --- Aspect Ratio --- */
.aspect-square { aspect-ratio: 1 / 1 !important; }
.aspect-video { aspect-ratio: 16 / 9 !important; }

/* --- Z-Index Scale --- */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }

/* --- Accessibility --- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}