/* ========================================
   Utility Classes
   Face The Risk - AI Risk Analysis Platform
   Common utilities for replacing inline styles
   ======================================== */

/* ========================================
   Font Size Utilities
   ======================================== */
.icon-xs { font-size: 1rem !important; }
.icon-sm { font-size: 1.25rem !important; }
.icon-md { font-size: 1.5rem !important; }
.icon-lg { font-size: 2rem !important; }
.icon-xl { font-size: 2.5rem !important; }
.icon-xxl { font-size: 3rem !important; }
.icon-xxxl { font-size: 3.5rem !important; }
.icon-huge { font-size: 4rem !important; }
.icon-massive { font-size: 5rem !important; }

/* ========================================
   Display Utilities
   ======================================== */
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }

/* Inline forms */
.form-inline {
    display: inline-block;
}

.form-inline form {
    display: inline;
}

/* ========================================
   Progress Bar Utilities
   ======================================== */
.progress-sm {
    height: 6px;
}

.progress-md {
    height: 1rem;
}

.progress-lg {
    height: 12px;
}

.progress-circular {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.progress-width-0 {
    width: 0% !important;
}

.progress-width-60 {
    width: 60%;
}

.progress-width-80 {
    width: 80px !important;
}

.progress-width-100 {
    width: 100px !important;
}

.progress-width-120 {
    width: 120px !important;
}

/* ========================================
   Text Truncation Utilities
   ======================================== */
.text-truncate-120 {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.text-truncate-150 {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.text-truncate-180 {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.text-truncate-200 {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.text-truncate-250 {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

/* ========================================
   Gradient Backgrounds
   ======================================== */
.bg-gradient-primary {
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;*/
    background: var(--primary-gradient) !important;
    color: white;
}

.bg-gradient-secondary {
    /*background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;*/
    background: var(--secondary-gradient) !important;
    color: white;
}

.bg-gradient-success {
    /*background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%) !important;*/
    background: linear-gradient(135deg, #10b981 0%, #0e9f6e 100%) !important;
    color: white;
}

.bg-gradient-info {
    /*background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%) !important;*/
    background: linear-gradient135deg, #06b6d4 0%, #0492a8 100%) !important;
    color: white;
}

.bg-gradient-warning {
    /*background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%) !important;*/
    background: linear-gradient(135deg, #ff8400 0%, #cc6a00 100%) !important;
    color: white;
}

.bg-gradient-danger {
    /*background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;*/
    background: linear-gradient(135deg, #ff4500 0%, #cc3700 100%) !important;
    color: white;
}
.bg-success {
    --bs-bg-opacity: 1;
    background: var(--success-gradient) !important;
}
.bg-info {
    --bs-bg-opacity: 1;
    background: var(--info-gradient) !important;
}
.bg-danger {
    --bs-bg-opacity: 1;
    background: var(--danger-gradient) !important;
}
.bg-warning {
    --bs-bg-opacity: 1;
    background: var(--warning-gradient) !important;
}
.bg-primary {
    --bs-bg-opacity: 1;
    background: var(--primary-gradient) !important;
}
/* ========================================
   Custom Alert Styles
   ======================================== */
.alert-custom-warning {
    background: rgba(255, 193, 7, 0.2) !important;
    border: 1px solid rgba(255, 193, 7, 0.5) !important;
    color: #856404 !important;
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.alert-system-warning {
    background: rgba(255,193,7,0.2);
    border: 1px solid rgba(255,193,7,0.5);
    color: white;
    padding: 0.5rem;
}

/* ========================================
   Navigation and Button Utilities
   ======================================== */
.btn-gradient-primary {
    background: var(--primary-gradient);
    color: white;
    border: none;
}

.btn-gradient-primary:hover {
    background: var(--primary-gradient);
    color: white;
}

/* ========================================
   Spacing Utilities
   ======================================== */
.p-1rem {
    padding: 1rem !important;
}

.p-2rem {
    padding: 2rem !important;
}

.p-3rem {
    padding: 3rem !important;
}

.pt-1rem {
    padding-top: 1rem !important;
}

.pb-1rem {
    padding-bottom: 1rem !important;
}

.pl-1rem {
    padding-left: 1rem !important;
}

.pr-1rem {
    padding-right: 1rem !important;
}

.px-1rem {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.py-1rem {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* ========================================
   Icon Opacity Utilities
   ======================================== */
.icon-opacity-70 {
    opacity: 0.7 !important;
}

.icon-opacity-80 {
    opacity: 0.8 !important;
}

.icon-opacity-90 {
    opacity: 0.9 !important;
}

.icon-opacity-60 {
    opacity: 0.6;
}

.icon-opacity-65 {
    opacity: 0.65;
}

.icon-opacity-75 {
    opacity: 0.75;
}

.icon-opacity-85 {
    opacity: 0.85;
}

.icon-opacity-95 {
    opacity: 0.95;
}

/* ========================================
   Hidden/Show Utilities
   ======================================== */
.hidden {
    display: none !important;
}

.show {
    display: block !important;
}

.custom-limit-hidden {
    display: none;
}

.custom-limit-shown {
    display: block;
}

/* ========================================
   Animation Utilities
   ======================================== */
.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-in {
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ========================================
   Responsive Utilities
   ======================================== */
@media (max-width: 768px) {
    .text-truncate-120,
    .text-truncate-150,
    .text-truncate-180,
    .text-truncate-200,
    .text-truncate-250 {
        max-width: 100px;
    }
    
    .icon-xl,
    .icon-xxl,
    .icon-xxxl {
        font-size: 2rem !important;
    }
    
    .icon-huge,
    .icon-massive {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 576px) {
    .text-truncate-120,
    .text-truncate-150,
    .text-truncate-180,
    .text-truncate-200,
    .text-truncate-250 {
        max-width: 80px;
    }
    
    .icon-xl,
    .icon-xxl,
    .icon-xxxl,
    .icon-huge,
    .icon-massive {
        font-size: 1.5rem !important;
    }
}

/* ========================================
   Print Utilities
   ======================================== */
@media print {
    .btn,
    .dropdown,
    .navbar,
    .alert-dismissible .btn-close {
        display: none !important;
    }
    
    .bg-gradient-primary,
    .bg-gradient-secondary,
    .bg-gradient-success,
    .bg-gradient-info,
    .bg-gradient-warning,
    .bg-gradient-danger {
        background: #f8f9fa !important;
        color: #000 !important;
        border: 1px solid #ddd !important;
    }
}