/**
 * Custom Utility CSS Classes
 *
 * This file contains utility classes to replace common inline styles
 * found throughout the application. These classes follow a similar
 * naming convention to Bootstrap and Tailwind for consistency.
 *
 * Usage:
 *   <th class="w-5 text-center">ID</th>
 *   <div class="modal-header bg-gradient-primary text-white">
 */

/* ============================================
   WIDTH UTILITIES
   ============================================ */
.w-5 { width: 5% !important; }
.w-8 { width: 8% !important; }
.w-10 { width: 10% !important; }
.w-12 { width: 12% !important; }
.w-14 { width: 14% !important; }
.w-15 { width: 15% !important; }
.w-18 { width: 18% !important; }
.w-20 { width: 20% !important; }
.w-25 { width: 25% !important; }
.w-30 { width: 30% !important; }
.w-35 { width: 35% !important; }
.w-40 { width: 40% !important; }
.w-45 { width: 45% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
.w-100 { width: 100% !important; }

/* Min/Max Width */
.min-w-100 { min-width: 100px !important; }
.min-w-120 { min-width: 120px !important; }
.min-w-150 { min-width: 150px !important; }
.min-w-160 { min-width: 160px !important; }
.min-w-200 { min-width: 200px !important; }
.max-w-100 { max-width: 100px !important; }
.max-w-200 { max-width: 200px !important; }
.max-w-300 { max-width: 300px !important; }
.max-w-500 { max-width: 500px !important; }

/* ============================================
   GRADIENT BACKGROUNDS
   ============================================ */
.bg-gradient-primary {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%) !important;
    color: #fff;
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, #858796 0%, #60616f 100%) !important;
    color: #fff;
}

.bg-gradient-success {
    background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%) !important;
    color: #fff;
}

.bg-gradient-info {
    background: linear-gradient(135deg, #36b9cc 0%, #258391 100%) !important;
    color: #fff;
}

.bg-gradient-warning {
    background: linear-gradient(135deg, #f6c23e 0%, #dda20a 100%) !important;
    color: #fff;
}

.bg-gradient-danger {
    background: linear-gradient(135deg, #e74a3b 0%, #be2617 100%) !important;
    color: #fff;
}

.bg-gradient-dark {
    background: linear-gradient(135deg, #5a5c69 0%, #373840 100%) !important;
    color: #fff;
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

/* ============================================
   DATATABLE COLUMN UTILITIES
   ============================================ */
.dt-col-id {
    width: 50px;
    text-align: center;
}

.dt-col-date {
    width: 100px;
    white-space: nowrap;
}

.dt-col-number {
    width: 120px;
    white-space: nowrap;
}

.dt-col-actions {
    min-width: 160px;
    text-align: center;
    white-space: nowrap;
}

.dt-col-status {
    width: 100px;
    text-align: center;
}

.dt-col-amount {
    width: 120px;
    text-align: right;
}

/* ============================================
   FORM INPUT ALIGNMENT
   ============================================ */
.input-right {
    text-align: right !important;
}

.input-center {
    text-align: center !important;
}

/* ============================================
   MODAL CUSTOMIZATIONS
   ============================================ */
.modal-header-primary {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    color: #fff;
    border-bottom: none;
}

.modal-header-primary .close {
    color: #fff;
    text-shadow: none;
    opacity: 1;
}

.modal-header-success {
    background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%);
    color: #fff;
    border-bottom: none;
}

.modal-header-danger {
    background: linear-gradient(135deg, #e74a3b 0%, #be2617 100%);
    color: #fff;
    border-bottom: none;
}

/* ============================================
   CARD CUSTOMIZATIONS
   ============================================ */
.card-header-primary {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    color: #fff;
    border-bottom: none;
}

.card-header-success {
    background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%);
    color: #fff;
    border-bottom: none;
}

/* ============================================
   STATUS BADGES
   ============================================ */
.status-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.status-pending {
    background-color: #f6c23e;
    color: #1f2d3d;
}

.status-approved {
    background-color: #1cc88a;
    color: #fff;
}

.status-rejected {
    background-color: #e74a3b;
    color: #fff;
}

.status-draft {
    background-color: #858796;
    color: #fff;
}

.status-active {
    background-color: #1cc88a;
    color: #fff;
}

.status-inactive {
    background-color: #858796;
    color: #fff;
}

/* ============================================
   SPACING UTILITIES
   ============================================ */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

/* ============================================
   FLEX UTILITIES
   ============================================ */
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap { flex-wrap: wrap !important; }

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

/* ============================================
   OVERFLOW UTILITIES
   ============================================ */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   Z-INDEX UTILITIES
   ============================================ */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-50 { z-index: 50 !important; }
.z-100 { z-index: 100 !important; }
.z-999 { z-index: 999 !important; }
.z-9999 { z-index: 9999 !important; }

/* ============================================
   PRINT UTILITIES
   ============================================ */
@media print {
    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }
}

.print-only {
    display: none;
}

/* ============================================
   DATATABLE OVERRIDES
   ============================================ */
div.dataTables_wrapper div.dataTables_filter label {
    text-align: right;
}

div.dataTables_wrapper div.dataTables_length {
    text-align: left;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.3em 0.8em;
}

/* ============================================
   RESPONSIVE TABLE
   ============================================ */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fix for DataTables buttons in responsive mode */
.dt-buttons {
    margin-bottom: 10px;
}

.dt-buttons .btn {
    margin-right: 5px;
    margin-bottom: 5px;
}

/* ============================================
   LOADING OVERLAY
   ============================================ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #4e73df;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}