/**
 * BCSS Shared UI - Utility Classes
 *
 * Common utility classes for layout, spacing, typography, and display.
 * Complements Bootstrap's utility classes with healthcare/admin-specific utilities.
 */

/* ===== Layout Utilities ===== */
.container-narrow {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--content-max-width);
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.container-wide {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--content-max-width-wide);
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Full height layout */
.min-vh-100-minus-nav {
    min-height: calc(100vh - var(--app-nav-height));
}

.min-vh-100-minus-header-footer {
    min-height: calc(100vh - var(--admin-header-height) - var(--admin-footer-height));
}

/* ===== Spacing Utilities (extend Bootstrap) ===== */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* ===== Typography Utilities ===== */
.text-monospace {
    font-family: var(--font-family-monospace);
}

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

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

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

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

/* ===== Display Utilities ===== */
.d-hidden {
    display: none !important;
}

.d-invisible {
    visibility: hidden !important;
}

.scrollable-y {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

.scrollable-x {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

/* ===== Width Utilities (extending Bootstrap) ===== */
.w-30 { width: 30% !important; }
.max-w-400 { max-width: 400px !important; }
.max-w-500 { max-width: 500px !important; }
.max-w-600 { max-width: 600px !important; }
.max-w-700 { max-width: 700px !important; }
.max-w-800 { max-width: 800px !important; }
.min-w-0 { min-width: 0 !important; }
.min-w-100 { min-width: 100px !important; }
.min-w-200 { min-width: 200px !important; }

/* ===== Height Utilities (extending Bootstrap) ===== */
.h-1rem { height: 1rem !important; }
.h-1-5rem { height: 1.5rem !important; }
.h-2rem { height: 2rem !important; }
.min-h-100 { min-height: 100px !important; }
.min-h-200 { min-height: 200px !important; }
.min-h-300 { min-height: 300px !important; }
.max-h-300 { max-height: 300px !important; }
.max-h-400 { max-height: 400px !important; }
.max-h-500 { max-height: 500px !important; }

/* ===== Whitespace Utilities ===== */
.whitespace-pre-wrap { white-space: pre-wrap !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-pre-line { white-space: pre-line !important; }
.word-break-all { word-break: break-all !important; }
.word-break-word { word-break: break-word !important; }

/* ===== Positioning Utilities ===== */
.sticky-top-0 { position: sticky !important; top: 0 !important; }
.sticky-top-1 { position: sticky !important; top: 1rem !important; }
.sticky-top-2 { position: sticky !important; top: 2rem !important; }

/* ===== Flex Utilities (extending Bootstrap) ===== */
.flex-1 { flex: 1 !important; }
.flex-2 { flex: 2 !important; }
.flex-basis-0 { flex-basis: 0 !important; }

/* ===== Cursor Utilities ===== */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-move { cursor: move !important; }
.cursor-grab { cursor: grab !important; }

/* ===== Card Utilities ===== */
.card-hover {
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
}

.card-hover:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card-clickable {
    cursor: pointer;
    transition: box-shadow var(--transition-base);
}

.card-clickable:hover {
    box-shadow: var(--shadow);
}

/* ===== Status Badges ===== */
.badge-dot {
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    margin-right: var(--spacing-xs);
    width: 8px;
}

.badge-dot.badge-success { background-color: var(--success-color); }
.badge-dot.badge-danger { background-color: var(--danger-color); }
.badge-dot.badge-warning { background-color: var(--warning-color); }
.badge-dot.badge-info { background-color: var(--info-color); }
.badge-dot.badge-secondary { background-color: var(--secondary-color); }

/* ===== Loading States ===== */
.loading-overlay {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: var(--z-sticky);
}

.skeleton {
    animation: skeleton-loading 1.5s ease-in-out infinite;
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    border-radius: var(--border-radius);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ACC-B02: Respect reduced motion preference for skeleton animations */
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: var(--spacing-sm);
}

.skeleton-heading {
    height: 1.5rem;
    margin-bottom: var(--spacing-md);
    width: 60%;
}

.skeleton-avatar {
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
}

/* ===== Icon Utilities ===== */
.icon-sm {
    font-size: 1rem;
    height: 1rem;
    width: 1rem;
}

.icon-md {
    font-size: 1.5rem;
    height: 1.5rem;
    width: 1.5rem;
}

.icon-lg {
    font-size: 2rem;
    height: 2rem;
    width: 2rem;
}

.icon-xl {
    font-size: 3rem;
    height: 3rem;
    width: 3rem;
}

/* Icon with text alignment */
.icon-with-text {
    align-items: center;
    display: inline-flex;
    gap: var(--spacing-sm);
}

/* ===== Button Utilities ===== */
.btn-icon-only {
    align-items: center;
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    min-height: 44px;  /* WCAG 2.5.5: Minimum touch target */
    min-width: 44px;   /* WCAG 2.5.5: Minimum touch target */
    padding: 0.5rem;
    width: 2.75rem;
}

.btn-icon-only.btn-sm {
    height: 2.25rem;
    min-height: 44px;  /* ACC-TT01: WCAG 2.5.5 minimum touch target (was 36px) */
    min-width: 44px;   /* ACC-TT01: WCAG 2.5.5 minimum touch target (was 36px) */
    width: 2.25rem;
}

.btn-icon-only.btn-lg {
    height: 3rem;
    width: 3rem;
}

/* ===== Table Utilities ===== */
.table-sticky-header thead th {
    background-color: var(--table-header-bg);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.table-fixed-layout {
    table-layout: fixed;
}

.table-row-clickable tbody tr {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.table-row-clickable tbody tr:hover {
    background-color: var(--table-hover-bg);
}

/* ===== Form Utilities ===== */
.form-label-required::after {
    color: var(--danger-color);
    content: " *";
}

.form-helper-text {
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

.form-error-text {
    color: var(--danger-color);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

/* ===== Print Utilities ===== */
/* DES-H28-30 P3: Print styles use hardcoded colors intentionally for cross-browser consistency */
@media print {
    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    /* Remove interactive elements */
    button, .btn, nav, .sidebar, .header {
        display: none !important;
    }

    /* Optimize for print */
    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
        line-height: 1.5;
    }

    /* Show links */
    a[href]::after {
        color: #666;
        content: " (" attr(href) ")";
        font-size: 90%;
    }

    /* Page breaks */
    .page-break-before {
        page-break-before: always;
    }

    .page-break-after {
        page-break-after: always;
    }

    .page-break-avoid {
        page-break-inside: avoid;
    }
}

/* ===== Responsive Utilities (complement Bootstrap) ===== */
/* RES-H-027 P2: Changed from 767px to 767.98px for Bootstrap breakpoint consistency */
@media (width <= 767.98px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (width >= 768px) {
    .hide-desktop {
        display: none !important;
    }

    .show-mobile {
        display: none !important;
    }
}

/* ===== Animations ===== */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fade-in {
    animation: fade-in var(--transition-base);
}

.fade-in-up {
    animation: fade-in-up var(--transition-base);
}

.spin {
    animation: spin 1s linear infinite;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .fade-in-up,
    .spin {
        animation: none;
    }

    /* ACC-M01: Disable card hover transitions for reduced motion preference */
    .card-hover,
    .card-clickable {
        transition: none;
    }
}

/* ===== Progress Bar Width Utilities ===== */

/* SESSION-FRONTEND-QUALITY: Replace inline style="width:X%" on progress bars */
.progress-0 { width: 0% !important; }
.progress-5 { width: 5% !important; }
.progress-10 { width: 10% !important; }
.progress-15 { width: 15% !important; }
.progress-20 { width: 20% !important; }
.progress-25 { width: 25% !important; }
.progress-30 { width: 30% !important; }
.progress-33 { width: 33.333% !important; }
.progress-35 { width: 35% !important; }
.progress-40 { width: 40% !important; }
.progress-45 { width: 45% !important; }
.progress-50 { width: 50% !important; }
.progress-55 { width: 55% !important; }
.progress-60 { width: 60% !important; }
.progress-65 { width: 65% !important; }
.progress-66 { width: 66.666% !important; }
.progress-70 { width: 70% !important; }
.progress-75 { width: 75% !important; }
.progress-80 { width: 80% !important; }
.progress-85 { width: 85% !important; }
.progress-90 { width: 90% !important; }
.progress-95 { width: 95% !important; }
.progress-100 { width: 100% !important; }

/* ===== Material Icons Size Utilities ===== */

/* SESSION-FRONTEND-QUALITY: Replace inline style="font-size:Xpx" on material-icons */
.material-icons-14 { font-size: 14px !important; }
.material-icons-16 { font-size: 16px !important; }
.material-icons-18 { font-size: 18px !important; }
.material-icons-20 { font-size: 20px !important; }
.material-icons-24 { font-size: 24px !important; }
.material-icons-32 { font-size: 32px !important; }
.material-icons-36 { font-size: 36px !important; }
.material-icons-48 { font-size: 48px !important; }
.material-icons-64 { font-size: 64px !important; }

/* Generic font-size utilities for non-icon elements */
.fs-px-64 { font-size: 64px !important; }

/* ===== Table Column Width Utilities ===== */

/* SESSION-FRONTEND-QUALITY: Replace inline style="width:X%" on table columns */
.col-w-5 { width: 5% !important; }
.col-w-10 { width: 10% !important; }
.col-w-15 { width: 15% !important; }
.col-w-20 { width: 20% !important; }
.col-w-25 { width: 25% !important; }
.col-w-30 { width: 30% !important; }
.col-w-35 { width: 35% !important; }
.col-w-40 { width: 40% !important; }
.col-w-45 { width: 45% !important; }
.col-w-50 { width: 50% !important; }
.col-w-auto { width: auto !important; }

/* ===== Display Utilities - Additional ===== */

/* SESSION-FRONTEND-QUALITY: Replace inline style="display:none" */
.d-initial { display: initial !important; }
.d-inherit { display: inherit !important; }

/* ===== Text Color Utilities - Additional ===== */

/* SESSION-FRONTEND-QUALITY: Replace inline style="color:X" */
.text-inherit { color: inherit !important; }

/* ===== Vertical Alignment Utilities ===== */

/* SESSION-FRONTEND-QUALITY: Replace inline style="vertical-align:X" */
.va-top { vertical-align: top !important; }
.va-middle { vertical-align: middle !important; }
.va-bottom { vertical-align: bottom !important; }
.va-baseline { vertical-align: baseline !important; }

/* ===== Overflow Utilities - Additional ===== */

/* SESSION-FRONTEND-QUALITY: Replace inline style="overflow:X" */
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }

/* ===== Border Radius Utilities - Additional ===== */

/* SESSION-FRONTEND-QUALITY: Replace inline style="border-radius:X" */
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: 0.25rem !important; }
.rounded-2 { border-radius: 0.375rem !important; }
.rounded-3 { border-radius: 0.5rem !important; }
.rounded-4 { border-radius: 0.75rem !important; }
.rounded-5 { border-radius: 1rem !important; }

/* ===== Z-Index Utilities ===== */

/* SESSION-FRONTEND-QUALITY: Replace inline style="z-index:X" */
.z-0 { z-index: 0 !important; }
.z-1 { z-index: 1 !important; }
.z-10 { z-index: 10 !important; }
.z-100 { z-index: 100 !important; }
.z-1000 { z-index: 1000 !important; }
.z-auto { z-index: auto !important; }

/* ===== Opacity Utilities ===== */

/* SESSION-FRONTEND-QUALITY: Replace inline style="opacity:X" */
.opacity-0 { opacity: 0 !important; }
.opacity-10 { opacity: 0.1 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-90 { opacity: 0.9 !important; }
.opacity-100 { opacity: 1 !important; }

/* TODO: DES-029 - Consolidate duplicate .empty-state definitions into shared CSS.
 * .empty-state rules exist in: admin-tables.css, utilities.css, accessibility.css,
 * telehealth.css, insurance-updates.css, admin-pages.css, assessments.css, treatment-plans.css */
/* ===== Empty State Icons (RES-029) ===== */
.empty-state-icon {
    font-size: 3rem;
}

@media (width <= 767.98px) {
    .empty-state-icon {
        font-size: 2rem; /* Reduced from 3rem for better mobile scaling */
    }
}

/* ===== Breadcrumb Mobile Improvements (RES-033 - P3) ===== */
@media (width <= 767.98px) {
    .breadcrumb {
        font-size: 0.875rem; /* Increased from 0.75rem for better mobile readability */
    }

    .breadcrumb-item {
        font-size: 0.875rem;
    }
}