/**
 * Common Utilities CSS
 * Konsolidierte Utility-Klassen aus kleinen CSS-Dateien
 * Erstellt während der CSS-Konsolidierung
 */

/* ============================================
   MARGIN UTILITIES
   ============================================ */

.elements-errors-status-ul-no-margin,
.contact-create-person-form-ul-no-margin {
    margin-bottom: 0;
}

/* ============================================
   DISPLAY UTILITIES
   ============================================ */

.contact-view-form-inline,
.praxis-systems-edit-form-inline {
    display: inline;
}

.praxis-documents-index-simple-view-hidden {
    display: none;
}

/* ============================================
   WIDTH UTILITIES
   ============================================ */

.elements-map-container {
    width: 100%;
}

.maintenance-contract-index-text-truncate,
.maintenance-report-index-text-truncate {
    max-width: 200px;
}

.dashboard-widgets-index-popup-min-width {
    min-width: 220px;
}

/* ============================================
   SPACING UTILITIES (GAP)
   ============================================ */

.praxis-rooms-index-gap,
.praxis-systems-table-gap {
    gap: 8px;
}

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */

.praxis-dashboard-table-header-bg {
    background: #f8f9fa;
}

/* ============================================
   BORDER UTILITIES
   ============================================ */

.system-view-activity-item {
    border-left: 3px solid;
    border-left-color: var(--md-border-color, #6c757d);
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

.todos-index-status-select-sm {
    font-size: 0.8rem;
}

.bexio-orders-show-badge-lg {
    font-size: 1rem;
}

.admin-rps-forms-form-textarea-monospace {
    font-family: monospace;
}

/* ============================================
   COMPONENT-SPECIFIC UTILITIES
   ============================================ */

.components-confirm-modal-subtext-hidden,
.admin-suva-dose-imports-form-file-preview,
.praxis-documents-index-view-hidden {
    display: none;
}

.components-empty-state-image {
    max-width: 200px;
}

/* ============================================
   SCROLLABLE / OVERFLOW UTILITIES
   ============================================ */

.maintenance-report-view-pre-scrollable,
.dashboard-table-scroll {
    max-height: 300px;
    overflow-y: auto;
}

.dashboard-table-scroll {
    max-height: 250px;
}

/* ============================================
   SIZE UTILITIES
   ============================================ */

.table-editor-spinner-lg {
    width: 3rem;
    height: 3rem;
}

.upload-add-list-progress-bar-init {
    width: 0%;
}

/* ============================================
   TILES UTILITIES
   ============================================ */

.tiles-min-width,
.praxis-systems-tiles-min-width {
    min-width: 0;
}

.praxis-systems-tiles-gap {
    gap: 6px;
}

/* ============================================
   FORM UTILITIES
   ============================================ */

.contact-form-radio-group {
    margin-top: 10px;
}

.contact-form-person-fields,
.manufacturer-select-logo-preview {
    display: none;
}

.component-view-form-inline,
.product-type-view-form-inline {
    display: inline;
}

.components-actions-dropdown-form {
    margin: 0;
    display: inline-block;
}

/* ============================================
   CARD/BORDER UTILITIES
   ============================================ */

.maintenance-contract-create-card-primary {
    border-left: 3px solid #4e73df;
}

.maintenance-contract-create-card-success {
    border-left: 3px solid #1cc88a;
}

/* ============================================
   TABLE/CELL UTILITIES
   ============================================ */

.product-index-empty-cell,
.system-index-empty-cell,
.manufacturer-index-empty-cell {
    padding: 3rem;
}

.product-index-tiles-view,
.system-index-tiles-view {
    margin: 0 20px;
}

.praxis-orders-show-th-width-50 {
    width: 50px;
}

.praxis-orders-show-th-width-100 {
    width: 100px;
}

/* ============================================
   IMAGE/LOGO UTILITIES
   ============================================ */

.md-media-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--md-border, #e8ecf1);
    background: #fff;
}

/* Table thumbnails - keep small sizes compact */
table .md-entity-image--xs {
    max-height: 32px;
    width: 32px;
    height: 32px;
}
/* Allow sm size in tables to be 48px */
table .md-entity-image--sm {
    max-height: 48px;
    width: 48px;
    height: 48px;
}

.md-media-thumb--lg {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--md-border, #e8ecf1);
    background: #fff;
}

.md-media-thumb--xl {
    width: 220px;
    height: 220px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--md-border, #e8ecf1);
    background: #fff;
}

.praxis-room-show-photo {
    width: clamp(160px, 32vw, 220px) !important;
    height: clamp(160px, 32vw, 220px) !important;
    max-width: 100%;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--md-border, #e8ecf1);
    background: #fff;
    display: block;
}

.md-hero-img {
    width: 100%;
    height: clamp(160px, 22vw, 220px);
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--md-border, #e8ecf1);
    background: #fff;
}

.md-media-thumb--contain {
    object-fit: contain;
}

.md-media-thumb--sm {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--md-border, #e8ecf1);
    background: #fff;
}

.md-link-inherit {
    color: inherit;
    text-decoration: none;
}

.md-link-inherit:hover {
    color: inherit;
    text-decoration: underline;
}

.md-clickable {
    cursor: pointer;
}

.room-history-icon-wrapper {
    width: 32px;
    height: 32px;
    border: 1px solid var(--md-border);
}

.room-history-icon {
    font-size: 14px;
}

.room-history-card {
    border-left: 3px solid var(--md-border);
}

.manufacturer-index-logo-img {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
}

.manufacturer-select-logo-preview-img {
    max-width: 200px;
    max-height: 100px;
}

.welcome-logo {
    height: 80px;
    width: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   TEXT/LINK UTILITIES
   ============================================ */

.report-view-link-underline,
.report-link-underline {
    text-decoration: underline;
}

.report-view-sticky-top-offset {
    top: 20px;
}

.report-stat-icon {
    font-size: 2.5rem;
    opacity: 0.3;
}

/* ============================================
   LOADING/SKELETON UTILITIES
   ============================================ */

.loading-skeleton-text-width-80 {
    width: 80%;
}

.loading-skeleton-line-width-70 {
    width: 70%;
}

/* ============================================
   BADGE UTILITIES
   ============================================ */

.component-view-badge-lg,
.product-type-view-badge-lg {
    font-size: 1rem;
}

/* ============================================
   MOBILE BADGE - DOT ONLY (no text)
   Use class .badge-mobile-dot on badges that
   should show as colored dots on mobile
   ============================================ */

.badge-mobile-dot {
    transition: all 0.2s ease;
}

@media (max-width: 767px) {
    .badge-mobile-dot {
        /* Hide text */
        font-size: 0;
        /* Make it a dot */
        width: 12px;
        height: 12px;
        min-width: 12px;
        padding: 0;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
    }

    /* Larger dot variant */
    .badge-mobile-dot-lg {
        width: 16px;
        height: 16px;
        min-width: 16px;
    }

    /* With count - shows number */
    .badge-mobile-dot[data-count]::after {
        content: attr(data-count);
        font-size: 10px;
        display: block;
        text-align: center;
        line-height: 12px;
    }

    .badge-mobile-dot-lg[data-count]::after {
        font-size: 11px;
        line-height: 16px;
    }
}

/* ============================================
   STATUS BADGE MOBILE - Compact version
   Shows icon + optional count, hides text
   ============================================ */

@media (max-width: 575px) {
    .badge-status-mobile .badge-text {
        display: none;
    }

    .badge-status-mobile {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Table status badges - dot only */
    .table-mobile-card .badge:not(.badge-keep-text) {
        font-size: 0;
        width: 10px;
        height: 10px;
        min-width: 10px;
        padding: 0;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        margin-right: 4px;
    }

    /* Keep text for certain badges */
    .badge-keep-text {
        font-size: inherit;
    }
}

/* ============================================
   STICKY SIDEBAR - Desktop Only
   Sidebars should only be sticky on desktop
   to prevent layout issues on mobile
   ============================================ */

@media (min-width: 992px) {
    .md-sidebar-sticky {
        position: sticky;
        top: 90px;
    }
}

/* ============================================
   GAP UTILITIES (Bootstrap 5 Extension)
   ============================================ */

.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.row-gap-1 { row-gap: 0.25rem !important; }
.row-gap-2 { row-gap: 0.5rem !important; }
.row-gap-3 { row-gap: 1rem !important; }

.column-gap-1 { column-gap: 0.25rem !important; }
.column-gap-2 { column-gap: 0.5rem !important; }
.column-gap-3 { column-gap: 1rem !important; }

/* ============================================
   FLEXBOX UTILITIES
   ============================================ */

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ============================================
   TOUCH TARGET UTILITIES
   Ensure minimum 44px touch targets on mobile
   ============================================ */

.touch-target {
    min-height: 44px;
    min-width: 44px;
}

.touch-target-sm {
    min-height: 36px;
    min-width: 36px;
}

@media (max-width: 767px) {
    .btn:not(.btn-sm):not(.btn-xs) {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .form-control:not(.form-control-sm) {
        min-height: 44px;
    }

    .form-select:not(.form-select-sm) {
        min-height: 44px;
    }
}

/* ============================================
   TRUNCATE UTILITIES
   ============================================ */

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

/* ============================================
   VISIBILITY UTILITIES
   ============================================ */

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

.hidden-mobile {
    display: block;
}

@media (max-width: 767px) {
    .visible-mobile {
        display: block !important;
    }

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

    .visible-mobile.d-flex {
        display: flex !important;
    }

    .visible-mobile.d-inline-flex {
        display: inline-flex !important;
    }
}

/* ============================================
   ASPECT RATIO UTILITIES
   ============================================ */

.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-photo {
    aspect-ratio: 4 / 3;
}