/*
 * Custom Utility Classes для Рефакторинга
 * Issue #145 - Пилотный Рефакторинг
 * Milestone #39 - Унификация Фронтенда к SmartAdmin
 * 
 * Философия: DO NOT REBUILD, ONLY CONNECT
 * Эти классы дополняют SmartAdmin CSS для замены inline styles
 */

/* ================================================
   AVATAR SIZES
   ================================================ */

/* Small avatar (40x40px) - для списков, таблиц */
.avatar-sm {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
}

/* Large avatar (80x80px) - для профилей, деталей */
.avatar-lg {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
}

/* ================================================
   MAX-WIDTH UTILITIES
   ================================================ */

.mw-200px {
    max-width: 200px !important;
}

.mw-300px {
    max-width: 300px !important;
}

.mw-500px {
    max-width: 500px !important;
}

/* ================================================
   MAX-HEIGHT UTILITIES
   ================================================ */

.mh-70vh {
    max-height: 70vh !important;
}

.mh-200px {
    max-height: 200px !important;
}

.mh-300px {
    max-height: 300px !important;
}

/* ================================================
   Z-INDEX UTILITIES
   ================================================ */

.z-index-1 {
    z-index: 1 !important;
}

.z-index-1000 {
    z-index: 1000 !important;
}

/* ================================================
   CURSOR UTILITIES
   ================================================ */

.cursor-pointer {
    cursor: pointer !important;
}

/* ================================================
   RESPONSIVE UTILITIES (если не существуют в SmartAdmin)
   ================================================ */

/* Ensure these exist, add only if missing in smartapp.css */

/* Position utilities */
.position-relative {
    position: relative !important;
}

.position-fixed {
    position: fixed !important;
}

/* Display utilities */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

/* Width utilities */
.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

/* Height utilities */
.h-auto {
    height: auto !important;
}

/* Margin utilities */
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

/* ================================================
   OBJECT FIT UTILITIES
   ================================================ */

.object-fit-cover {
    object-fit: cover !important;
}

/* ================================================
   ADDITIONAL AVATAR SIZES (Issue #146)
   ================================================ */

/* Extra Large avatar (100x100px) - для employee profiles */
.avatar-xl {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover;
}

/* Extra Extra Large avatar (160x160px) - для client profiles */
.avatar-xxl {
    width: 160px !important;
    height: 160px !important;
    object-fit: cover;
}

/* Inner avatar for xxl with padding */
.avatar-xxl-inner {
    width: 156px !important;
    height: 156px !important;
    object-fit: cover;
}

/* ================================================
   ADDITIONAL MAX-WIDTH UTILITIES (Issue #146)
   ================================================ */

.mw-150px {
    max-width: 150px !important;
}

.mw-400px {
    max-width: 400px !important;
}

/* ================================================
   MIN-HEIGHT UTILITIES (Issue #146)
   ================================================ */

.min-h-120px {
    min-height: 120px !important;
}

/* ================================================
   CURSOR UTILITIES EXTENDED (Issue #146)
   ================================================ */

.cursor-crosshair {
    cursor: crosshair !important;
}

/* ================================================
   FORM-SPECIFIC UTILITIES (Issue #147)
   ================================================ */

/* Textarea height utilities */
.h-100px {
    height: 100px !important;
}

/* Icon font-size utilities for input groups */
.fs-2-25rem {
    font-size: 2.25rem !important;
}

.fs-2-2rem {
    font-size: 2.2rem !important;
}

.fs-1-5rem {
    font-size: 1.5rem !important;
}

.fs-1-3rem {
    font-size: 1.3rem !important;
}

/* ================================================
   TABLE-SPECIFIC UTILITIES (Issue #148)
   ================================================ */

/* Avatar containers for tables */
.avatar-60px {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover;
}

.avatar-container {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #ddd;
    flex-shrink: 0;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-container-200px {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #ddd;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Width utilities */
.w-60px {
    width: 60px !important;
}

.w-50px {
    width: 50px !important;
}

.w-300px {
    width: 300px !important;
}

.w-30 {
    width: 30% !important;
}

.w-35 {
    width: 35% !important;
}

/* Min-width utilities */
.min-w-200px {
    min-width: 200px !important;
}

/* Height utilities for charts/containers */
.h-300px {
    height: 300px !important;
}

.h-400px {
    height: 400px !important;
}

.h-500px {
    height: 500px !important;
}

/* Max-height utilities */
.mh-500px {
    max-height: 500px !important;
}

/* Position utilities */
.pos-relative {
    position: relative !important;
}

/* Combined utilities for common patterns */
.chart-container {
    position: relative !important;
    height: 300px !important;
    width: 100% !important;
}

.chart-container-lg {
    position: relative !important;
    height: 400px !important;
    width: 100% !important;
}

/* Color utilities */
.text-bronze {
    color: #cd7f32 !important;
}

/* ================================================
   MODAL-SPECIFIC UTILITIES (Issue #149)
   ================================================ */

/* Preview images in modals */
.preview-img {
    max-width: 200px !important;
    max-height: 200px !important;
    border-radius: 8px !important;
}

/* Camera/video max heights */
.mh-400px {
    max-height: 400px !important;
}

/* Background colors */
.bg-black {
    background: #000 !important;
}

/* Progress bar heights */
.progress-xs {
    height: 4px !important;
}

/* Text alignment utilities */
.text-right {
    text-align: right !important;
}

/* Min-width utilities */
.min-w-50px {
    min-width: 50px !important;
}

/* Font size utilities */
.fs-0-75rem {
    font-size: 0.75rem !important;
}

/* Max-width for scanner/camera */
.mw-500px {
    max-width: 500px !important;
}

/* Pointer events */
.pe-none {
    pointer-events: none !important;
}

/* ================================================
   UI COMPONENTS UTILITIES (Issue #150)
   ================================================ */

/* Alert icon sizes */
.alert-icon-3rem {
    width: 3rem !important;
}

.alert-icon-4rem {
    width: 4rem !important;
}

.alert-icon-6rem {
    width: 6rem !important;
}

.alert-icon-8rem {
    width: 8rem !important;
}

/* Stack icon font sizes */
.fs-3rem {
    font-size: 3rem !important;
}

.fs-4rem {
    font-size: 4rem !important;
}

.fs-6rem {
    font-size: 6rem !important;
}

.fs-8rem {
    font-size: 8rem !important;
}

/* Dropdown widths */
.dropdown-w-14rem {
    width: 14rem !important;
}

/* Z-index utilities */
.z-2 {
    z-index: 2 !important;
}

/* Background images */
.bg-img-4 {
    background-image: url(img/backgrounds/bg-4.png) !important;
}

.bg-img-1 {
    background-image: url(img/backgrounds/bg-1.png) !important;
}

/* ================================================
   END OF CUSTOM UTILITIES
   ================================================ */