/* CSP-friendly Utility Classes */
/* 替代內聯樣式，符合 Content Security Policy 規範 */

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

.show {
    display: block !important;
}

/* Image size constraints */
.img-preview-sm {
    max-width: 80px;
    max-height: 60px;
}

.img-preview-md {
    max-width: 150px;
    max-height: 100px;
}

.img-preview-lg {
    max-width: 200px;
    max-height: 200px;
}

.img-preview-xl {
    max-width: 300px;
    max-height: 300px;
}

.img-thumbnail-avatar {
    max-width: 150px;
}

/* Badge colors */
.badge-yellow {
    background-color: #ffc107;
    color: #000;
}

.badge-brown {
    background-color: #8b4513;
    color: #fff;
}

.badge-green {
    background-color: #28a745;
    color: #fff;
}

.badge-purple {
    background-color: #6f42c1;
    color: #fff;
}

/* Grid layout utilities */
.grid-col-full {
    grid-column: 1 / -1;
}

/* Text utilities */
.text-center-block {
    text-align: center;
    padding: 2rem;
}

.text-overflow-ellipsis {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SVG blend modes */
.blend-screen {
    mix-blend-mode: screen;
}

.blend-multiply {
    mix-blend-mode: multiply;
}

/* Container utilities */
.scrollable-container {
    max-height: 150px;
    overflow-y: auto;
}

/* Alert/Message boxes */
.alert-success-custom {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    border: 1px solid #c3e6cb;
}

.alert-danger-custom {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    border: 1px solid #f5c6cb;
}

/* Registration success page */
.success-container {
    text-align: center;
    padding: 60px 20px;
}

.success-icon {
    font-size: 72px;
    color: #28a745;
    margin-bottom: 20px;
}

.success-title {
    color: #28a745;
    margin-bottom: 20px;
}

.success-text {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
}

.success-info {
    background-color: #d4edda;
    color: #155724;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    margin: 0 auto;
}

.success-info-text {
    font-size: 16px;
    margin: 0;
}

.success-actions {
    margin-top: 30px;
}

.btn-success-lg {
    display: inline-block;
    padding: 12px 30px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
}

/* Image preview utilities */
.preview-container {
    margin-top: 0.5rem;
}

.preview-img {
    max-width: 150px;
    max-height: 100px;
    border: 1px solid #ddd;
    padding: 5px;
}

/* Progress bar container */
.progress-container {
    margin-top: 0.5rem;
}

.progress-full {
    width: 100%;
}

/* Cursor utilities */
.cursor-move {
    cursor: move;
}

.cursor-pointer {
    cursor: pointer;
}

/* Padding utilities (if not using Bootstrap) */
.p-2 {
    padding: 0.5rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-1rem {
    margin-top: 1rem;
}

/* File preview */
.file-preview-hidden {
    display: none;
}

/* Border utilities */
.border-dashed {
    border: 1px solid #ddd;
    padding: 5px;
}

/* Link button with blue background */
.link-btn-blue {
    background-color: #2196F3;
    margin-top: 1rem;
}