/* ==========================================================================
   COMPACT THEME UTILITIES
   
   Helper classes for consistent compact styling throughout the application.
   Use these classes when you need to apply compact styling to specific elements.
   ========================================================================== */

/* ==========================================================================
   COMPACT COMPONENT VARIANTS
   Apply these classes to existing Bootstrap components for compact variants
   ========================================================================== */

/* Tables */
.table-compact {
    font-size: 0.85rem !important;
}

.table-compact th,
.table-compact td {
    padding: 6px 12px !important;
}

.table-extra-compact th,
.table-extra-compact td {
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
}

/* Forms */
.form-compact .form-control {
    height: 32px !important;
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
}

.form-compact .form-label {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
}

.form-compact .form-group,
.form-compact .mb-3 {
    margin-bottom: 12px !important;
}

/* Buttons */
.btn-compact {
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    height: 32px !important;
}

.btn-extra-compact {
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
    height: 28px !important;
}

/* Cards */
.card-compact .card-header {
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
}

.card-compact .card-body {
    padding: 16px !important;
}

.card-compact .card-footer {
    padding: 12px 16px !important;
}

/* Modals */
.modal-compact .modal-header {
    padding: 12px 20px !important;
}

.modal-compact .modal-body {
    padding: 20px !important;
}

.modal-compact .modal-footer {
    padding: 12px 20px !important;
}

/* ==========================================================================
   LAYOUT HELPERS
   Apply these classes for consistent compact spacing and layout
   ========================================================================== */

/* Section spacing */
.section-compact {
    padding: 16px 0 !important;
}

.section-extra-compact {
    padding: 12px 0 !important;
}

/* Container variants */
.container-compact {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Grid spacing */
.row-compact {
    margin-left: -8px !important;
    margin-right: -8px !important;
}

.row-compact > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* ==========================================================================
   TYPOGRAPHY HELPERS
   Consistent text sizing for compact layouts
   ========================================================================== */

.text-compact {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
}

.text-extra-compact {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
}

.text-micro {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}

/* Heading variants */
.h1-compact { font-size: 1.4rem !important; }
.h2-compact { font-size: 1.2rem !important; }
.h3-compact { font-size: 1.1rem !important; }
.h4-compact { font-size: 1rem !important; }
.h5-compact { font-size: 0.9rem !important; }
.h6-compact { font-size: 0.8rem !important; }

/* ==========================================================================
   SPACING UTILITIES
   Compact spacing system utilities
   ========================================================================== */

/* Compact margins */
.m-compact-0 { margin: 0 !important; }
.m-compact-1 { margin: 4px !important; }
.m-compact-2 { margin: 8px !important; }
.m-compact-3 { margin: 12px !important; }
.m-compact-4 { margin: 16px !important; }
.m-compact-5 { margin: 24px !important; }

.mt-compact-0 { margin-top: 0 !important; }
.mt-compact-1 { margin-top: 4px !important; }
.mt-compact-2 { margin-top: 8px !important; }
.mt-compact-3 { margin-top: 12px !important; }
.mt-compact-4 { margin-top: 16px !important; }
.mt-compact-5 { margin-top: 24px !important; }

.mb-compact-0 { margin-bottom: 0 !important; }
.mb-compact-1 { margin-bottom: 4px !important; }
.mb-compact-2 { margin-bottom: 8px !important; }
.mb-compact-3 { margin-bottom: 12px !important; }
.mb-compact-4 { margin-bottom: 16px !important; }
.mb-compact-5 { margin-bottom: 24px !important; }

/* Compact padding */
.p-compact-0 { padding: 0 !important; }
.p-compact-1 { padding: 4px !important; }
.p-compact-2 { padding: 8px !important; }
.p-compact-3 { padding: 12px !important; }
.p-compact-4 { padding: 16px !important; }
.p-compact-5 { padding: 24px !important; }

.pt-compact-0 { padding-top: 0 !important; }
.pt-compact-1 { padding-top: 4px !important; }
.pt-compact-2 { padding-top: 8px !important; }
.pt-compact-3 { padding-top: 12px !important; }
.pt-compact-4 { padding-top: 16px !important; }
.pt-compact-5 { padding-top: 24px !important; }

.pb-compact-0 { padding-bottom: 0 !important; }
.pb-compact-1 { padding-bottom: 4px !important; }
.pb-compact-2 { padding-bottom: 8px !important; }
.pb-compact-3 { padding-bottom: 12px !important; }
.pb-compact-4 { padding-bottom: 16px !important; }
.pb-compact-5 { padding-bottom: 24px !important; }

/* ==========================================================================
   ENTERPRISE SPECIFIC COMPONENTS
   Specialized compact styles for common enterprise UI patterns
   ========================================================================== */

/* Data tables with actions */
.datatable-compact {
    font-size: 0.85rem !important;
}

.datatable-compact .table-actions {
    white-space: nowrap !important;
    width: 1% !important;
}

.datatable-compact .table-actions .btn {
    padding: 2px 6px !important;
    font-size: 0.75rem !important;
    height: 24px !important;
    margin: 0 1px !important;
}

/* Filter panels */
.filter-panel-compact {
    background-color: #f8f9fa !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    margin-bottom: 16px !important;
}

.filter-panel-compact .form-control {
    height: 32px !important;
    font-size: 0.85rem !important;
}

.filter-panel-compact .btn {
    height: 32px !important;
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
}

/* Status badges */
.status-badge-compact {
    font-size: 0.75rem !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    min-width: 60px !important;
    text-align: center !important;
}

/* Action bars */
.action-bar-compact {
    padding: 8px 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.action-bar-compact .btn {
    height: 32px !important;
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
    margin-right: 8px !important;
}

/* Sidebar navigation */
.sidebar-compact .nav-link {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
}

.sidebar-compact .nav-link .fas,
.sidebar-compact .nav-link .far {
    width: 16px !important;
    margin-right: 8px !important;
    font-size: 0.8rem !important;
}

/* ==========================================================================
   RESPONSIVE HELPERS
   Compact styles that adapt to screen size
   ========================================================================== */

@media (max-width: 768px) {
    .mobile-extra-compact {
        font-size: 0.8rem !important;
    }
    
    .mobile-extra-compact .btn {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        height: 28px !important;
    }
    
    .mobile-extra-compact .form-control {
        height: 32px !important;
        font-size: 0.8rem !important;
    }
    
    .mobile-extra-compact .table th,
    .mobile-extra-compact .table td {
        padding: 4px 6px !important;
        font-size: 0.75rem !important;
    }
}

@media (min-width: 1200px) {
    .desktop-compact {
        font-size: 0.9rem !important;
    }
    
    .desktop-compact .container,
    .desktop-compact .container-fluid {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ==========================================================================
   USAGE EXAMPLES
   
   <!-- Compact table -->
   <table class="table table-compact">
   
   <!-- Extra compact form -->
   <div class="form-compact">
   
   <!-- Compact card -->
   <div class="card card-compact">
   
   <!-- Compact action bar -->
   <div class="action-bar-compact">
     <button class="btn btn-primary btn-compact">Action</button>
   </div>
   
   <!-- Data table with compact actions -->
   <div class="datatable-compact">
     <table class="table">
       <tbody>
         <tr>
           <td>Data</td>
           <td class="table-actions">
             <button class="btn btn-sm btn-outline-primary">Edit</button>
             <button class="btn btn-sm btn-outline-danger">Delete</button>
           </td>
         </tr>
       </tbody>
     </table>
   </div>
   
   ========================================================================== */