/**
 * Utility CSS Classes
 *
 * Common utility classes to replace inline styles throughout the application.
 * This helps maintain consistency and improves Content Security Policy compliance.
 */

/* Message Styles */
.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}

.warning-message {
    background-color: #fff3cd;
    color: #856404;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ffeeba;
    border-radius: 4px;
}

.info-message {
    background-color: #d1ecf1;
    color: #0c5460;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #bee5eb;
    border-radius: 4px;
}

/* Status Indicators */
.status-public {
    color: #28a745;
    font-weight: bold;
}

.status-private {
    color: #6c757d;
    font-weight: bold;
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.8em;
    border-radius: 3px;
    margin-left: 5px;
}

.status-badge-public {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-badge-private {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

/* Toggle Controls */
.toggle-controls {
    margin-top: 10px;
    padding: 5px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.toggle-link {
    font-size: 0.85em;
    color: #007bff;
    text-decoration: none;
}

.toggle-link:hover {
    text-decoration: underline;
}

/* Text Colors */
.text-success {
    color: #28a745;
}

.text-danger {
    color: #dc3545;
}

.text-warning {
    color: #ffc107;
}

.text-info {
    color: #17a2b8;
}

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

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

/* Background Colors */
.bg-light {
    background-color: #f8f9fa;
}

.bg-success {
    background-color: #d4edda;
}

.bg-danger {
    background-color: #f8d7da;
}

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

.bg-info {
    background-color: #d1ecf1;
}

/* Spacing Utilities */
.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 15px; }
.mt-4 { margin-top: 20px; }

.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 15px; }
.mb-4 { margin-bottom: 20px; }

.p-1 { padding: 5px; }
.p-2 { padding: 10px; }
.p-3 { padding: 15px; }
.p-4 { padding: 20px; }

/* Border Utilities */
.border {
    border: 1px solid #dee2e6;
}

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

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

.border-radius {
    border-radius: 4px;
}

/* Font Utilities */
.font-small {
    font-size: 0.85em;
}

.font-xsmall {
    font-size: 0.8em;
}

.font-bold {
    font-weight: bold;
}

.font-italic {
    font-style: italic;
}

/* Display Utilities */
.d-inline {
    display: inline;
}

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

.d-block {
    display: block;
}

.d-none {
    display: none;
}