/* ==========================================================================
   COMPACT ENTERPRISE THEME
   
   This stylesheet implements Option C (Hybrid Approach) for enterprise UI density:
   - Overrides Bootstrap defaults for a more compact, professional appearance
   - Maintains consistency across all application components
   - Uses CSS Custom Properties (variables) for maintainability
   - Applied after Bootstrap but before component-specific styles
   - All rules use !important to ensure consistent override behavior
   
   Load order: Bootstrap → site.css → compact-theme.css → component-specific CSS
   ========================================================================== */

/* ==========================================================================
   TYPOGRAPHY & BASE SETTINGS
   ========================================================================== */

:root {
    --compact-font-size-base: 14px;
    --compact-line-height-base: 1.3;
    --compact-spacing-xs: 4px;
    --compact-spacing-sm: 8px;
    --compact-spacing-md: 12px;
    --compact-spacing-lg: 16px;
    --compact-spacing-xl: 24px;
    --compact-border-radius: 4px;
    --compact-input-height-sm: 32px;
    --compact-input-height: 36px;
    --compact-btn-height-sm: 28px;
    --compact-btn-height: 32px;
}

body {
    font-size: var(--compact-font-size-base) !important;
    line-height: var(--compact-line-height-base) !important;
}

/* ==========================================================================
   NAVIGATION & LAYOUT
   ========================================================================== */

.navbar {
    padding: var(--compact-spacing-sm) var(--compact-spacing-md) !important;
    min-height: 50px !important;
}

.navbar-brand {
    font-size: 1.1rem !important;
    padding: var(--compact-spacing-xs) 0 !important;
}

.navbar-nav .nav-link {
    padding: var(--compact-spacing-sm) var(--compact-spacing-md) !important;
    font-size: 0.9rem !important;
}

.sidebar {
    font-size: 0.9rem !important;
}

.sidebar .nav-link {
    padding: var(--compact-spacing-sm) var(--compact-spacing-md) !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
    padding: var(--compact-spacing-sm) var(--compact-spacing-md) !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    height: var(--compact-btn-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: var(--compact-border-radius) !important;
}

.btn-sm {
    padding: var(--compact-spacing-xs) var(--compact-spacing-sm) !important;
    font-size: 0.8rem !important;
    height: var(--compact-btn-height-sm) !important;
}

.btn-lg {
    padding: var(--compact-spacing-sm) var(--compact-spacing-lg) !important;
    font-size: 1rem !important;
    height: 40px !important;
}

/* Button groups */
.btn-group .btn {
    border-radius: 0 !important;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--compact-border-radius) !important;
    border-bottom-left-radius: var(--compact-border-radius) !important;
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--compact-border-radius) !important;
    border-bottom-right-radius: var(--compact-border-radius) !important;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-control {
    padding: var(--compact-spacing-sm) var(--compact-spacing-md) !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    height: var(--compact-input-height) !important;
    border-radius: var(--compact-border-radius) !important;
}

.form-control-sm {
    padding: var(--compact-spacing-xs) var(--compact-spacing-sm) !important;
    font-size: 0.8rem !important;
    height: var(--compact-input-height-sm) !important;
}

.form-select {
    padding: var(--compact-spacing-sm) 2rem var(--compact-spacing-sm) var(--compact-spacing-md) !important;
    font-size: 0.9rem !important;
    height: var(--compact-input-height) !important;
    border-radius: var(--compact-border-radius) !important;
}

.form-select-sm {
    padding: var(--compact-spacing-xs) 1.5rem var(--compact-spacing-xs) var(--compact-spacing-sm) !important;
    font-size: 0.8rem !important;
    height: var(--compact-input-height-sm) !important;
}

.form-label {
    margin-bottom: var(--compact-spacing-xs) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: #495057 !important;
}

.form-group,
.mb-3 {
    margin-bottom: var(--compact-spacing-md) !important;
}

.input-group {
    margin-bottom: var(--compact-spacing-md) !important;
}

.input-group-text {
    padding: var(--compact-spacing-sm) var(--compact-spacing-md) !important;
    font-size: 0.9rem !important;
    border-radius: var(--compact-border-radius) !important;
}

/* Form validation */
.invalid-feedback {
    font-size: 0.8rem !important;
    margin-top: var(--compact-spacing-xs) !important;
}

.valid-feedback {
    font-size: 0.8rem !important;
    margin-top: var(--compact-spacing-xs) !important;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.table {
    font-size: 0.9rem !important;
    margin-bottom: var(--compact-spacing-lg) !important;
}

.table th {
    padding: var(--compact-spacing-sm) var(--compact-spacing-md) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #dee2e6 !important;
}

.table td {
    padding: var(--compact-spacing-sm) var(--compact-spacing-md) !important;
    vertical-align: middle !important;
}

.table-sm th {
    padding: var(--compact-spacing-xs) var(--compact-spacing-sm) !important;
}

.table-sm td {
    padding: var(--compact-spacing-xs) var(--compact-spacing-sm) !important;
}

/* Table actions */
.table .btn {
    padding: 2px var(--compact-spacing-sm) !important;
    font-size: 0.8rem !important;
    height: 24px !important;
    margin: 0 2px !important;
}

/* ==========================================================================
   CARDS & PANELS
   ========================================================================== */

.card {
    border-radius: var(--compact-border-radius) !important;
    margin-bottom: var(--compact-spacing-lg) !important;
}

.card-header {
    padding: var(--compact-spacing-md) var(--compact-spacing-lg) !important;
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

.card-body {
    padding: var(--compact-spacing-lg) !important;
}

.card-footer {
    padding: var(--compact-spacing-md) var(--compact-spacing-lg) !important;
    background-color: #f8f9fa !important;
}

/* ==========================================================================
   MODALS
   ========================================================================== */

.modal-header {
    padding: var(--compact-spacing-md) var(--compact-spacing-lg) !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.modal-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

.modal-body {
    padding: var(--compact-spacing-lg) !important;
}

.modal-footer {
    padding: var(--compact-spacing-md) var(--compact-spacing-lg) !important;
    border-top: 1px solid #dee2e6 !important;
}

/* ==========================================================================
   ALERTS & NOTIFICATIONS
   ========================================================================== */

.alert {
    padding: var(--compact-spacing-md) var(--compact-spacing-lg) !important;
    margin-bottom: var(--compact-spacing-lg) !important;
    font-size: 0.9rem !important;
    border-radius: var(--compact-border-radius) !important;
}

.alert-dismissible .btn-close {
    padding: var(--compact-spacing-sm) !important;
}

.toast {
    font-size: 0.9rem !important;
}

.toast-header {
    padding: var(--compact-spacing-sm) var(--compact-spacing-md) !important;
}

.toast-body {
    padding: var(--compact-spacing-md) !important;
}

/* ==========================================================================
   BADGES & LABELS
   ========================================================================== */

.badge {
    font-size: 0.75rem !important;
    padding: 4px var(--compact-spacing-sm) !important;
    border-radius: var(--compact-border-radius) !important;
}

.badge-sm {
    font-size: 0.7rem !important;
    padding: 2px var(--compact-spacing-xs) !important;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination {
    margin-bottom: 0 !important;
}

.page-link {
    padding: var(--compact-spacing-xs) var(--compact-spacing-md) !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    border-radius: var(--compact-border-radius) !important;
}

.page-item:not(:first-child) .page-link {
    margin-left: 2px !important;
    border-radius: var(--compact-border-radius) !important;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.breadcrumb {
    padding: var(--compact-spacing-sm) 0 !important;
    margin-bottom: var(--compact-spacing-lg) !important;
    font-size: 0.9rem !important;
    background-color: transparent !important;
}

.breadcrumb-item {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   DROPDOWNS
   ========================================================================== */

.dropdown-menu {
    padding: var(--compact-spacing-xs) 0 !important;
    font-size: 0.9rem !important;
    border-radius: var(--compact-border-radius) !important;
}

.dropdown-item {
    padding: var(--compact-spacing-xs) var(--compact-spacing-lg) !important;
    font-size: 0.9rem !important;
}

.dropdown-header {
    padding: var(--compact-spacing-xs) var(--compact-spacing-lg) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

.dropdown-divider {
    margin: var(--compact-spacing-xs) 0 !important;
}

/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */

.progress {
    height: 8px !important;
    border-radius: var(--compact-border-radius) !important;
    margin-bottom: var(--compact-spacing-md) !important;
}

/* ==========================================================================
   TABS
   ========================================================================== */

.nav-tabs {
    margin-bottom: var(--compact-spacing-lg) !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.nav-tabs .nav-link {
    padding: var(--compact-spacing-sm) var(--compact-spacing-lg) !important;
    font-size: 0.9rem !important;
    border-radius: var(--compact-border-radius) var(--compact-border-radius) 0 0 !important;
}

.tab-content {
    padding: var(--compact-spacing-lg) 0 !important;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Compact spacing utilities */
.p-compact { padding: var(--compact-spacing-md) !important; }
.px-compact { padding-left: var(--compact-spacing-md) !important; padding-right: var(--compact-spacing-md) !important; }
.py-compact { padding-top: var(--compact-spacing-md) !important; padding-bottom: var(--compact-spacing-md) !important; }
.m-compact { margin: var(--compact-spacing-md) !important; }
.mx-compact { margin-left: var(--compact-spacing-md) !important; margin-right: var(--compact-spacing-md) !important; }
.my-compact { margin-top: var(--compact-spacing-md) !important; margin-bottom: var(--compact-spacing-md) !important; }

.p-compact-sm { padding: var(--compact-spacing-sm) !important; }
.m-compact-sm { margin: var(--compact-spacing-sm) !important; }

/* Compact text utilities */
.text-compact { font-size: 0.9rem !important; line-height: 1.3 !important; }
.text-compact-sm { font-size: 0.8rem !important; line-height: 1.2 !important; }

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.8rem !important;
    }
    
    .btn {
        font-size: 0.8rem !important;
        padding: var(--compact-spacing-xs) var(--compact-spacing-sm) !important;
    }
    
    .card-body {
        padding: var(--compact-spacing-md) !important;
    }
    
    .modal-body {
        padding: var(--compact-spacing-md) !important;
    }
}

/* ==========================================================================
   SPECIFIC COMPONENT OVERRIDES
   ========================================================================== */

/* Dashboard cards */
.dashboard-card .card-body {
    padding: var(--compact-spacing-lg) !important;
}

.dashboard-stat {
    padding: var(--compact-spacing-md) !important;
}

/* Quick Actions - professional enterprise cards */
.quick-action-card {
    border: 1px solid #e9ecef !important;
    background: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;
    text-decoration: none !important;
    color: inherit !important;
    border-radius: 8px !important;
    height: auto !important;
    min-height: 140px !important;
}

.quick-action-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border-color: #0d6efd !important;
    background: #f8f9fa !important;
    text-decoration: none !important;
    color: inherit !important;
}

.quick-action-card:focus {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 3px rgba(13,110,253,.25) !important;
    text-decoration: none !important;
    color: inherit !important;
}

.quick-action-icon {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.8) !important;
    border-radius: 50% !important;
    transition: all 0.2s ease-in-out !important;
}

.quick-action-card:hover .quick-action-icon {
    background: rgba(13,110,253,0.1) !important;
    transform: scale(1.05) !important;
}

.quick-action-title {
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #495057 !important;
    margin-bottom: 4px !important;
}

.quick-action-card small {
    font-size: 0.8rem !important;
    color: #6c757d !important;
    line-height: 1.3 !important;
}

/* Ensure proper spacing */
.quick-action-card .text-center {
    padding: 1.25rem 1rem !important;
}

/* Override the general button compact rules for quick actions */
.card-body .quick-action-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    padding: 0 !important;
}

/* Quick Actions in sidebars (smaller variant) */
.d-grid .btn,
.d-grid.gap-2 .btn {
    height: auto !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    text-align: center !important;
}

/* Form builder specific */
.form-builder .form-group {
    margin-bottom: var(--compact-spacing-sm) !important;
}

/* Data table filters */
.table-filters {
    padding: var(--compact-spacing-md) !important;
    background-color: #f8f9fa !important;
    border-radius: var(--compact-border-radius) !important;
    margin-bottom: var(--compact-spacing-lg) !important;
}

.table-filters .form-control {
    height: var(--compact-input-height-sm) !important;
    font-size: 0.8rem !important;
}

/* Status indicators */
.status-indicator {
    font-size: 0.8rem !important;
    padding: 2px var(--compact-spacing-sm) !important;
    border-radius: var(--compact-border-radius) !important;
    font-weight: 600 !important;
}

/* Action buttons in tables */
.table-actions .btn {
    margin: 0 2px !important;
    padding: 2px var(--compact-spacing-xs) !important;
    height: 24px !important;
    font-size: 0.75rem !important;
}

/* Form validation states */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: #28a745 !important;
    padding-right: 2.25rem !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545 !important;
    padding-right: 2.25rem !important;
}

/* Loading states */
.loading-overlay {
    padding: var(--compact-spacing-xl) !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    color: #6c757d !important;
}

/* Empty states */
.empty-state {
    padding: var(--compact-spacing-xl) !important;
    text-align: center !important;
    color: #6c757d !important;
}

.empty-state h5 {
    font-size: 1rem !important;
    margin-bottom: var(--compact-spacing-md) !important;
}

.empty-state p {
    font-size: 0.9rem !important;
    margin-bottom: var(--compact-spacing-lg) !important;
}