/* Claude Code Companion - Utility Classes for Style Refactoring */

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

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

.d-inline-custom { 
    display: inline !important; 
}

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

.hidden { 
    display: none !important; 
}

.visible { 
    display: block !important; 
}

/* Font size utilities */
.text-xs { 
    font-size: 0.7em !important; 
}

.text-sm { 
    font-size: 0.8em !important; 
}

.text-lg { 
    font-size: 1.2em !important; 
}

.text-xl { 
    font-size: 1.5em !important; 
}

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

/* Opacity utilities */
.opacity-low { 
    opacity: 0.3 !important; 
}

.opacity-medium { 
    opacity: 0.6 !important; 
}

.opacity-high { 
    opacity: 0.9 !important; 
}

/* Icon specific styles */
.icon-hero { 
    font-size: 8rem !important; 
    opacity: 0.3 !important; 
}

.icon-success { 
    color: #28a745 !important; 
    font-size: 0.7em !important; 
}

/* Color utilities */
.text-success-custom { 
    color: #28a745 !important; 
}

.text-primary-custom { 
    color: #007bff !important; 
}

.text-danger-custom { 
    color: #dc3545 !important; 
}

.text-warning-custom { 
    color: #ffc107 !important; 
}

.text-muted-custom { 
    color: #6c757d !important; 
}

/* Cursor utilities */
.cursor-pointer { 
    cursor: pointer !important; 
}

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

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

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

/* Position utilities */
.position-hidden { 
    position: fixed !important; 
    left: -9999px !important; 
    top: -9999px !important; 
}

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

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

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

/* Background color utilities for flags */
.bg-flag-us { 
    background-color: #007bff !important; 
    display: inline-block !important; 
}

.bg-flag-cn { 
    background-color: #dc3545 !important; 
    display: inline-block !important; 
}

.bg-flag-jp { 
    background-color: #28a745 !important; 
    display: inline-block !important; 
}

.bg-flag-unknown { 
    background-color: #6c757d !important; 
    display: inline-block !important; 
}

/* Spacing utilities */
.m-0-custom { 
    margin: 0 !important; 
}

.p-0-custom { 
    padding: 0 !important; 
}

.mb-0-custom { 
    margin-bottom: 0 !important; 
}

.mt-0-custom { 
    margin-top: 0 !important; 
}

/* Flexbox utilities */
.d-flex-custom { 
    display: flex !important; 
}

.justify-content-between-custom { 
    justify-content: space-between !important; 
}

.align-items-center-custom { 
    align-items: center !important; 
}

/* Border utilities */
.border-none-custom { 
    border: none !important; 
}

.border-bottom-none-custom { 
    border-bottom: none !important; 
}

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

.h-100-custom { 
    height: 100% !important; 
}

.max-height-sm { 
    max-height: 100px !important; 
}

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

.max-height-lg { 
    max-height: 400px !important; 
}

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

.z-index-medium { 
    z-index: 100 !important; 
}

.z-index-low { 
    z-index: 10 !important; 
}

/* Overflow utilities */
.overflow-hidden { 
    overflow: hidden !important; 
}

.overflow-auto { 
    overflow: auto !important; 
}

.overflow-y-auto { 
    overflow-y: auto !important; 
}

/* Text utilities */
.text-ellipsis { 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    white-space: nowrap !important; 
}

.text-wrap { 
    white-space: normal !important; 
    word-break: break-all !important; 
}

.text-nowrap { 
    white-space: nowrap !important; 
}

/* Transition utilities */
.transition-all { 
    transition: all 0.2s ease !important; 
}

.transition-opacity { 
    transition: opacity 0.2s ease !important; 
}

.transition-transform { 
    transition: transform 0.2s ease !important; 
}

/* Interactive states */
.hover-bg-light:hover { 
    background-color: #f8f9fa !important; 
}

.hover-text-primary:hover { 
    color: #0d6efd !important; 
}

.hover-scale:hover { 
    transform: scale(1.05) !important; 
}

/* Form utilities */
.form-control-sm-custom { 
    font-size: 0.875rem !important; 
    padding: 0.25rem 0.5rem !important; 
}

/* Box shadow utilities */
.shadow-sm-custom { 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; 
}

.shadow-md-custom { 
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important; 
}

.shadow-lg-custom { 
    box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important; 
}

/* Toast positioning */
.toast-position { 
    position: fixed !important; 
    top: 20px !important; 
    right: 20px !important; 
    z-index: 9999 !important; 
    max-width: 300px !important; 
}