/*
================================================
SCRUM-61: Utility CSS Classes
================================================
Centralized utility classes to replace common inline styles.
These complement Bootstrap utilities without overriding them.
*/

/* ================================================
   CURSOR UTILITIES
================================================ */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-move { cursor: move !important; }

/* ================================================
   SPACING UTILITIES (complement Bootstrap)
================================================ */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }

/* ================================================
   WIDTH UTILITIES
================================================ */
.w-100px { width: 100px !important; }
.w-120px { width: 120px !important; }
.w-140px { width: 140px !important; }
.w-150px { width: 150px !important; }
.w-200px { width: 200px !important; }
.w-250px { width: 250px !important; }
.w-300px { width: 300px !important; }

/* ================================================
   HEIGHT UTILITIES
================================================ */
.h-300px { height: 300px !important; }
.h-400px { height: 400px !important; }
.h-500px { height: 500px !important; }
.min-h-100vh { min-height: 100vh !important; }

/* ================================================
   TYPOGRAPHY UTILITIES
================================================ */
.text-2xl { font-size: 1.5rem !important; }
.text-xl { font-size: 1.25rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-base { font-size: 1rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-xs { font-size: 0.75rem !important; }

.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-normal { font-weight: 400 !important; }

/* ================================================
   COLOR UTILITIES (using CSS variables)
================================================ */
.text-primary-custom { color: var(--primary-500, #6366f1) !important; }
.text-gray-500 { color: #6b7280 !important; }
.text-gray-600 { color: #4b5563 !important; }
.text-gray-700 { color: #374151 !important; }

/* ================================================
   BORDER UTILITIES
================================================ */
.border-radius-sm { border-radius: 4px !important; }
.border-radius-md { border-radius: 6px !important; }
.border-radius-lg { border-radius: 8px !important; }
.border-radius-xl { border-radius: 12px !important; }

/* ================================================
   OPACITY UTILITIES
================================================ */
.opacity-20 { opacity: 0.2 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }

/* ================================================
   POSITION UTILITIES
================================================ */
.pos-absolute-top-right {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
}

/* ================================================
   COMMON COMPONENT STYLES
================================================ */

/* Card with white background and border */
.card-bordered {
    background: white;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
}

/* Stat card icon (decorative) */
.stat-icon-decorative {
    font-size: 2rem;
    position: absolute;
    right: 15px;
    top: 15px;
    opacity: 0.2;
}

/* Link with muted style */
.link-muted {
    color: var(--text-muted, #6b7280);
    text-decoration: none;
}

.link-muted:hover {
    color: var(--primary-500, #6366f1);
    text-decoration: underline;
}

/* Action badge/button */
.action-badge {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.action-badge:hover {
    opacity: 0.8;
}

/* Delete link style */
.link-delete {
    margin-left: 0.5rem;
    color: #dc3545;
    cursor: pointer;
}

.link-delete:hover {
    color: #a71d2a;
}

/* ================================================
   NAVBAR UTILITIES
================================================ */
.navbar-link-active {
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
}

/* ================================================
   ADMIN SIDEBAR
================================================ */
.admin-sidebar {
    min-height: 100vh;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
}

.admin-sidebar .nav-link {
    color: #495057;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    margin-bottom: 0.25rem;
}

.admin-sidebar .nav-link:hover {
    background-color: #e9ecef;
}

.admin-sidebar .nav-link.active {
    background-color: #0d6efd;
    color: white;
}

/* ================================================
   FORM UTILITIES
================================================ */
.form-control-sm-custom {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

/* ================================================
   TABLE UTILITIES
================================================ */
.table-action-cell {
    white-space: nowrap;
    width: 1%;
}

/* ================================================
   ANIMATION UTILITIES
================================================ */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   RESPONSIVE UTILITIES
================================================ */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .text-sm-mobile { font-size: 0.875rem !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}