/*
 * ShortAccess - Utility CSS Classes
 * Complete utility classes for removing all inline styles
 * 
 * @package ShortAccess
 * @version 1.0.1
 */

/* ========== COLORS ========== */
.sa-color-danger { color: #dc3545 !important; }
.sa-color-success { color: #28a745 !important; }
.sa-color-warning { color: #856404 !important; }
.sa-color-info { color: #0073aa !important; }
.sa-color-primary { color: #0073aa !important; }
.sa-color-muted { color: #666 !important; }
.sa-color-dark { color: #333 !important; }
.sa-color-white { color: white !important; }

/* ========== BACKGROUNDS ========== */
.sa-bg-success { background: #e8f5e9 !important; }
.sa-bg-danger { background: #fce8e8 !important; }
.sa-bg-warning { background: #fff3cd !important; }
.sa-bg-info { background: #e3f2fd !important; }
.sa-bg-light { background: #f5f5f5 !important; }
.sa-bg-white { background: #ffffff !important; }

/* ========== SPACING - MARGIN ========== */
.sa-m-0 { margin: 0 !important; }
.sa-mt-5 { margin-top: 5px !important; }
.sa-mt-10 { margin-top: 10px !important; }
.sa-mt-15 { margin-top: 15px !important; }
.sa-mt-20 { margin-top: 20px !important; }
.sa-mt-30 { margin-top: 30px !important; }
.sa-mb-5 { margin-bottom: 5px !important; }
.sa-mb-10 { margin-bottom: 10px !important; }
.sa-mb-15 { margin-bottom: 15px !important; }
.sa-mb-20 { margin-bottom: 20px !important; }
.sa-mb-30 { margin-bottom: 30px !important; }

/* ========== SPACING - PADDING ========== */
.sa-p-10 { padding: 10px !important; }
.sa-p-15 { padding: 15px !important; }
.sa-p-20 { padding: 20px !important; }
.sa-pt-10 { padding-top: 10px !important; }
.sa-pb-10 { padding-bottom: 10px !important; }
.sa-pl-20 { padding-left: 20px !important; }
.sa-pr-50 { padding-right: 50px !important; }

/* ========== TYPOGRAPHY ========== */
.sa-fs-11 { font-size: 11px !important; }
.sa-fs-12 { font-size: 12px !important; }
.sa-fs-13 { font-size: 13px !important; }
.sa-fs-14 { font-size: 14px !important; }
.sa-fs-16 { font-size: 16px !important; }
.sa-fs-18 { font-size: 18px !important; }
.sa-fs-32 { font-size: 32px !important; }
.sa-fw-normal { font-weight: normal !important; }
.sa-fw-bold { font-weight: bold !important; }
.sa-fw-600 { font-weight: 600 !important; }

/* ========== DISPLAY & FLEX ========== */
.sa-d-flex { display: flex !important; }
.sa-d-grid { display: grid !important; }
.sa-d-none { display: none !important; }
.sa-flex-gap-10 { gap: 10px !important; }
.sa-flex-gap-20 { gap: 20px !important; }
.sa-flex-wrap { flex-wrap: wrap !important; }

/* ========== GRID ========== */
.sa-grid-cols-3 { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 20px !important; 
}
.sa-grid-auto { 
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 15px !important;
}

/* ========== BORDERS ========== */
.sa-border-left-success { border-left: 4px solid #4caf50 !important; }
.sa-border-left-danger { border-left: 4px solid #dc3545 !important; }
.sa-border-left-warning { border-left: 4px solid #ffc107 !important; }
.sa-border-radius-4 { border-radius: 4px !important; }
.sa-border-radius-8 { border-radius: 8px !important; }

/* ========== WIDTHS ========== */
.sa-w-5 { width: 5% !important; }
.sa-w-10 { width: 10% !important; }
.sa-w-15 { width: 15% !important; }
.sa-w-20 { width: 20% !important; }
.sa-w-30 { width: 30% !important; }
.sa-w-40 { width: 40% !important; }
.sa-w-auto { width: auto !important; }

/* ========== MAX WIDTHS ========== */
.sa-max-w-1400 { max-width: 1400px !important; }
.sa-max-w-500 { 
    max-width: 500px !important;
    width: 90% !important;
    margin: 0 auto !important;
    position: relative !important;
}

/* ========== TEXT ALIGNMENT ========== */
.sa-word-break { word-break: break-all !important; }
.sa-text-center { text-align: center !important; }

/* ========== STAT BOX ========== */
.sa-stat-box {
    padding: 15px !important;
    border-radius: 8px !important;
    text-align: center !important;
}

/* ========== ALERTS ========== */
.sa-alert-success {
    background: #d4edda !important;
    padding: 20px !important;
    text-align: center !important;
    border-radius: 4px !important;
}

.sa-alert-warning {
    background: #fff3cd !important;
    padding: 12px !important;
    border-left: 4px solid #ffc107 !important;
    margin: 12px 0 !important;
    border-radius: 4px !important;
}

.sa-alert-danger {
    background: #f8d7da !important;
    padding: 10px !important;
    border-radius: 4px !important;
}

/* ========== FORM INPUTS ========== */
.sa-form-input {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}

/* ========== AVATAR ========== */
.sa-avatar-img {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* ========== MODAL CLOSE BUTTON ========== */
.sa-modal-close-absolute {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    font-size: 24px !important;
    color: #999 !important;
    cursor: pointer !important;
    z-index: 100 !important;
    line-height: 1 !important;
    padding: 5px !important;
}

/* ========== DELETION CHECKBOX ========== */
.sa-deletion-checkbox {
    margin-right: 8px !important;
    margin-top: 2px !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

/* ========== BUTTONS ========== */
.sa-btn-danger {
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.sa-btn-secondary {
    background: #f5f5f5 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.sa-btn-primary {
    background: #0073aa !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* ========== LOGOUT LINK ========== */
.sa-logout-link {
    color: #dc3545 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.sa-logout-link:hover {
    text-decoration: underline !important;
}