/**
 * CSP-Safe Utility Classes
 *
 * 這些 utility classes 用於替代 inline style 屬性，以符合嚴格的 CSP 策略
 * Created: 2025-12-16
 */

/* ========================================
   Generic Display & Visibility
   ======================================== */

.d-none-init {
    display: none;
}

/* Note: Bootstrap .d-none uses !important, which overrides jQuery .show().
   Use .d-none-init for elements that need to be toggled via JS. */

.cursor-pointer {
    cursor: pointer;
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.resize-none {
    resize: none;
}

/* ========================================
   Scrollable Containers
   ======================================== */

.scrollable-y {
    overflow-y: auto;
}

.max-h-100 {
    max-height: 100px;
}

.max-h-150 {
    max-height: 150px;
}

.max-h-200 {
    max-height: 200px;
}

.max-h-250 {
    max-height: 250px;
}

.max-h-300 {
    max-height: 300px;
}

.max-h-400 {
    max-height: 400px;
}

.max-h-500 {
    max-height: 500px;
}

.min-h-100 {
    min-height: 100px;
}

/* ========================================
   Text & Color Utilities
   ======================================== */

.pre-wrap {
    white-space: pre-wrap;
    margin: 0;
}

.text-break-word {
    word-break: break-word;
    overflow-wrap: break-word;
}

.text-pre-wrap-break {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.color-dark-red {
    color: #A91B0D;
}

.text-primary-custom {
    color: #667eea;
}

.bg-warning-subtle {
    background-color: #fff3cd;
}

.badge-notification-text {
    font-size: 0.6rem;
}

/* ========================================
   Sizing Utilities
   ======================================== */
.h-4px {
    height: 4px;
}

.h-20px {
    height: 20px;
}

.h-25px {
    height: 25px;
}

.h-38 {
    height: 38px;
}

.h-300 {
    height: 300px;
}

.w-0 {
    width: 0%;
}

.w-20px {
    width: 20px;
}

.w-60px {
    width: 60px;
}

.w-2 {
    width: 2%;
}

.w-5 {
    width: 5%;
}

.w-6 {
    width: 6%;
}

.w-8 {
    width: 8%;
}

.w-10 {
    width: 10%;
}

.w-12 {
    width: 12%;
}

.w-15 {
    width: 15%;
}

.w-18 {
    width: 18%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-32 {
    width: 32%;
}

.w-35 {
    width: 35%;
}

.w-40 {
    width: 40%;
}

.w-65 {
    width: 65%;
    max-width: 65%;
    flex: 0 0 65%;
}

.mw-100 {
    max-width: 100%;
}

/* Specific for captcha */
.w-35-flex {
    width: 35%;
    max-width: 35%;
    flex: 0 0 35%;
}

/* Specific for captcha */
.w-calc-100-1-5rem {
    width: calc(100% - 1.5rem);
}

/* ========================================
   Spacing & Border Utilities
   ======================================== */
.ps-20px {
    padding-left: 20px;
}

.pe-n2px {
    padding-right: -2px;
}

.my-10px {
    margin: 10px 0;
}

.mt-10 {
    margin-top: 10px;
}

.mt-80px,
.main-content-offset {
    margin-top: 80px;
}

.rounded-5px {
    border-radius: 5px;
}

.rounded-8px {
    border-radius: 8px;
}

.border-light-grey {
    border: 1px solid #dee2e6;
}

/* ========================================
   Modal Styles (Login Page - Preserved)
   ======================================== */

.modal-header-gradient {
    background: var(--primary-gradient);
    color: white;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
}

.modal-content-rounded {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-footer-rounded {
    border-radius: 0 0 16px 16px;
}

.btn-gradient-secondary {
    background: var(--secondary-gradient);
    color: #2d5a5a;
    border: none;
    font-weight: 600;
}

/* ========================================
   Form Input Styles (Preserved)
   ======================================== */

.input-group-text-left-rounded {
    border-radius: 8px 0 0 8px;
}

.input-group-text-right-rounded {
    border-radius: 0 8px 8px 0;
}

.form-control-full-width {
    width: 100%;
}

.form-control-full-height {
    height: 100%;
}

/* ========================================
   Captcha Styles (Preserved and Enhanced)
   ======================================== */

.captcha-container-left {
    width: 65%;
    flex: 0 0 65%;
    max-width: 65%;
    padding-right: -2px;
}

.captcha-container-right {
    width: 35%;
    flex: 0 0 35%;
    max-width: 35%;
    padding-left: -2px;
    display: flex;
}

.captcha-image {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 0 12px 12px 0;
    border: 1px solid #dee2e6;
    cursor: pointer;
}

/* ========================================
   Alert & Notification Styles
   ======================================== */

.alert-fixed-top {
    position: fixed;
    /* Added position: fixed */
    top: 20px;
    /* Adjusted to 20px */
    right: 20px;
    /* Added right: 20px */
    z-index: 9999;
    max-width: 400px;
    /* Added max-width */
}

.alert-fixed-top-0 {
    position: fixed;
    top: 0;
    z-index: 9999;
}

.audio-status-bar-wrapper {
    top: 80px;
    z-index: 1040;
}

/* For SystemLog Details */
.text-pre-wrap-break {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ========================================
   Chat UI & Animation Utilities
   ======================================== */

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

.user-select-none {
    user-select: none !important;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ========================================
   Navigation Utilities
   ======================================== */

.visible-important {
    visibility: visible !important;
    opacity: 1 !important;
}

.z-index-high {
    z-index: 1040 !important;
}