/* TCC CRM Design System - Utility Classes
 * Replaces inline styles with reusable classes
 * Created: January 30, 2026
 */

/* ===================
 * ICON SIZES
 * =================== */
.icon-sm { font-size: 1.25rem !important; }
.icon-md { font-size: 2rem !important; }
.icon-lg { font-size: 3rem !important; }
.icon-xl { font-size: 4rem !important; }
.icon-hero { font-size: 5rem !important; }

/* ===================
 * TEXT COLORS
 * =================== */
.text-tcc-primary { color: var(--tcc-primary) !important; }
.text-tcc-secondary { color: var(--tcc-secondary) !important; }
.text-tcc-accent { color: var(--tcc-accent) !important; }
.text-admin { color: var(--color-admin) !important; }
.text-donation { color: var(--tcc-accent) !important; }
.text-call { color: var(--color-success) !important; }

/* ===================
 * BACKGROUND COLORS
 * =================== */
.bg-tcc-primary { background-color: var(--tcc-primary) !important; }
.bg-tcc-secondary { background-color: var(--tcc-secondary) !important; }
.bg-tcc-accent { background-color: var(--tcc-accent) !important; }
.bg-admin { background-color: var(--color-admin) !important; }

/* ===================
 * FONT UTILITIES
 * =================== */
.font-mono { font-family: var(--font-mono) !important; }
.font-normal { font-weight: var(--font-normal) !important; }
.font-medium { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold { font-weight: var(--font-bold) !important; }

/* ===================
 * TEXT SIZE UTILITIES
 * =================== */
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-3xl { font-size: var(--text-3xl) !important; }
.text-4xl { font-size: var(--text-4xl) !important; }

/* ===================
 * LETTER SPACING
 * =================== */
.tracking-wide { letter-spacing: 1px; }
.tracking-wider { letter-spacing: 2px; }

/* ===================
 * NOTE TRUNCATION
 * Standardized truncation for notes across tables
 * =================== */
.truncate-40 {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.truncate-80 {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.truncate-100 {
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.truncate-150 {
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===================
 * ADMIN BUTTON
 * =================== */
.btn-admin {
    background-color: var(--color-admin);
    border-color: var(--color-admin);
    color: white;
}
.btn-admin:hover,
.btn-admin:focus {
    background-color: var(--color-admin-hover);
    border-color: var(--color-admin-hover);
    color: white;
}
.btn-admin:active {
    background-color: var(--color-admin-hover) !important;
    border-color: var(--color-admin-hover) !important;
}

/* ===================
 * CALL/PHONE BUTTON
 * =================== */
.btn-call {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: white;
}
.btn-call:hover,
.btn-call:focus {
    background-color: var(--color-success-hover);
    border-color: var(--color-success-hover);
    color: white;
}

/* ===================
 * SCROLL UTILITIES
 * =================== */
.scroll-y {
    overflow-y: auto;
}
.max-h-300 { max-height: 300px; }
.max-h-400 { max-height: 400px; }
.max-h-500 { max-height: 500px; }

/* ===================
 * STICKY UTILITIES
 * =================== */
.sticky-card {
    position: sticky;
    top: var(--space-4);
}

/* ===================
 * GAP UTILITIES (for flex/grid)
 * =================== */
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }

/* ===================
 * HOVER CARD EFFECT
 * For dashboard/feature cards
 * =================== */
.hover-card {
    transition: transform var(--transition-normal),
                box-shadow var(--transition-normal);
}
.hover-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
}

/* ===================
 * ORGANIZATION BADGES
 * =================== */
.badge-org-tcc {
    background-color: var(--tcc-primary);
    color: white;
}
.badge-org-tccf {
    background-color: var(--color-info);
    color: var(--color-text);
}
.badge-org-atl {
    background-color: var(--color-text-muted);
    color: white;
}

/* ===================
 * CALL OUTCOME BADGES
 * =================== */
.badge-outcome-connected { background-color: var(--color-success); color: white; }
.badge-outcome-voicemail { background-color: var(--color-info); color: var(--color-text); }
.badge-outcome-dnc { background-color: var(--color-danger); color: white; }
.badge-outcome-note { background-color: var(--tcc-primary); color: white; }
.badge-outcome-email { background-color: var(--color-success); color: white; }
.badge-outcome-other { background-color: var(--color-text-muted); color: white; }

/* ===================
 * STATUS BADGES
 * =================== */
.badge-status-pending { background-color: var(--color-warning); color: var(--color-text); }
.badge-status-generated { background-color: var(--color-success); color: white; }
.badge-status-held { background-color: var(--color-danger); color: white; }

/* ===================
 * PRIORITY BADGES
 * =================== */
.badge-priority-high { background-color: var(--color-danger); color: white; }
.badge-priority-medium { background-color: var(--color-warning); color: var(--color-text); }
.badge-priority-low { background-color: var(--color-info); color: var(--color-text); }

/* ===================
 * TABLE CELL WIDTHS
 * =================== */
.w-table-sm { width: 60px !important; }
.w-table-md { width: 120px !important; }
.w-table-lg { width: 200px !important; }

/* ===================
 * CALL TIMER DISPLAY
 * =================== */
.call-timer-display {
    font-family: var(--font-mono);
    font-size: var(--text-6xl);
    font-weight: var(--font-bold);
    color: var(--color-success);
    text-align: center;
    line-height: 1;
}

/* ===================
 * EMPTY STATE
 * =================== */
.empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}
.empty-state__icon {
    font-size: var(--text-5xl);
    color: var(--color-text-light);
    margin-bottom: var(--space-4);
}
.empty-state__title {
    font-size: var(--text-xl);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}
.empty-state__description {
    color: var(--color-text-muted);
    max-width: 400px;
    margin: 0 auto;
}