/* ═══════════════════════════════════════════════════════════════════
   CWR PLATFORM UI FIXES
   - Visible close buttons on all modals
   - Improved card alignment
   - Reduced excessive blank space
   - Better overall layout density
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   1. MODAL CLOSE BUTTON FIX - Make X always visible
   ═══════════════════════════════════════════════════════════════════ */

/* Force all close buttons to be visible with proper styling */
.btn-close,
.modal-header .btn-close,
.cwr-modal-header .btn-close,
.modal-dialog .btn-close,
[class*="modal"] .btn-close {
    position: relative !important;
    width: 1.8rem !important;
    height: 1.8rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    background: rgba(0, 0, 0, 0.08) !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
    transition: all 0.2s ease !important;
}

/* Add visible X icon using ::after for maximum compatibility */
.btn-close::after,
.modal-header .btn-close::after,
.cwr-modal-header .btn-close::after {
    content: "✕" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1 !important;
}

/* Hover state - make it pop */
.btn-close:hover,
.modal-header .btn-close:hover {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
    transform: scale(1.1) !important;
}

.btn-close:hover::after,
.modal-header .btn-close:hover::after {
    color: #dc3545 !important;
}

/* For colored modal headers (dark backgrounds) - white X */
.modal-header.bg-primary .btn-close,
.modal-header.bg-secondary .btn-close,
.modal-header.bg-success .btn-close,
.modal-header.bg-danger .btn-close,
.modal-header.bg-info .btn-close,
.modal-header.bg-dark .btn-close,
.modal-header.text-white .btn-close,
.modal-header[style*="background"] .btn-close,
.modal-header[style*="linear-gradient"] .btn-close {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.modal-header.bg-primary .btn-close::after,
.modal-header.bg-secondary .btn-close::after,
.modal-header.bg-success .btn-close::after,
.modal-header.bg-danger .btn-close::after,
.modal-header.bg-info .btn-close::after,
.modal-header.bg-dark .btn-close::after,
.modal-header.text-white .btn-close::after,
.modal-header[style*="background"] .btn-close::after,
.modal-header[style*="linear-gradient"] .btn-close::after {
    color: #ffffff !important;
}

.modal-header.bg-primary .btn-close:hover,
.modal-header.bg-secondary .btn-close:hover,
.modal-header.bg-success .btn-close:hover,
.modal-header.bg-danger .btn-close:hover,
.modal-header.bg-info .btn-close:hover,
.modal-header.bg-dark .btn-close:hover,
.modal-header.text-white .btn-close:hover,
.modal-header[style*="background"] .btn-close:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   2. REDUCED EXCESSIVE PADDING/MARGINS
   ═══════════════════════════════════════════════════════════════════ */

/* Tighten up page containers */
.admin-container,
.page-container,
.content-area {
    padding: 1rem !important;
}

/* Reduce card padding */
.card {
    margin-bottom: 1.25rem !important;
}

.card-body {
    padding: 1.25rem !important;
}

.card-header {
    padding: 0.875rem 1.25rem !important;
}

/* Tighter modal spacing */
.modal-body {
    padding: 1.25rem !important;
}

.modal-header {
    padding: 1rem 1.25rem !important;
}

.modal-footer {
    padding: 0.875rem 1.25rem !important;
}

/* Reduce excessive margins between sections */
.mb-4 {
    margin-bottom: 1.25rem !important;
}

.mb-5 {
    margin-bottom: 1.5rem !important;
}

.mt-4 {
    margin-top: 1.25rem !important;
}

.mt-5 {
    margin-top: 1.5rem !important;
}

.py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.py-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Page headers more compact */
.page-header {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

.page-header h1 {
    margin-bottom: 0.25rem !important;
    font-size: 1.75rem !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. BETTER CARD ALIGNMENT
   ═══════════════════════════════════════════════════════════════════ */

/* Ensure cards align properly in rows */
.row > [class*="col-"] .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Fix card grid layouts */
.row.g-3 {
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
}

.row.g-3 > * {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Align card content */
.card-title {
    margin-bottom: 0.75rem !important;
}

.card-text:last-child {
    margin-bottom: 0 !important;
}

/* Better stat card alignment */
.stat-card,
.metric-card,
.dashboard-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.stat-card .card-body,
.metric-card .card-body,
.dashboard-card .card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* ═══════════════════════════════════════════════════════════════════
   4. FILL BLANK SPACE BETTER
   ═══════════════════════════════════════════════════════════════════ */

/* Use available space more efficiently */
.container-fluid {
    max-width: 100% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

/* Tables fill space better */
.table-responsive {
    margin-bottom: 0.75rem !important;
}

.table {
    margin-bottom: 0.5rem !important;
}

.table td,
.table th {
    padding: 0.65rem 0.75rem !important;
}

/* Form groups more compact */
.form-group {
    margin-bottom: 1rem !important;
}

.form-label {
    margin-bottom: 0.4rem !important;
}

/* Alert boxes less spacious */
.alert {
    padding: 0.875rem 1rem !important;
    margin-bottom: 1rem !important;
}

/* Button groups tighter */
.btn-group .btn,
.btn-toolbar .btn {
    padding: 0.5rem 1rem !important;
}

/* EXCEPTION: Don't shrink icon-only buttons or small buttons */
.btn-sm,
.btn.btn-sm {
    padding: 0.5rem 1rem !important;
    min-width: 2.5rem !important;
    white-space: nowrap !important;
}

/* Ensure button text never overflows */
.btn {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Training module buttons need special handling */
.module-actions .btn {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.875rem !important;
    overflow: visible !important;
}

/* Lists more compact */
.list-group-item {
    padding: 0.75rem 1rem !important;
}

/* Tabs more efficient */
.nav-tabs {
    margin-bottom: 1rem !important;
}

.nav-tabs .nav-link {
    padding: 0.5rem 1rem !important;
}

/* ═══════════════════════════════════════════════════════════════════
   5. GENERAL LAYOUT IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* Better use of vertical space - but NOT on body (breaks sidebar) */
/* Removed: body overflow-y: scroll - was causing sidebar scroll issues */

/* Main content area */
.main-content,
main {
    min-height: calc(100vh - 120px) !important;
}

/* Grid gaps more reasonable */
.g-4 {
    --bs-gutter-x: 1.25rem !important;
    --bs-gutter-y: 1.25rem !important;
}

/* Remove excessive empty space at bottom of pages */
.page-footer {
    margin-top: 1.5rem !important;
    padding: 1rem 0 !important;
}

/* Sidebar: Don't override core sidebar styling - it has specific layout needs */
.sidebar {
    /* Removed padding override - was breaking sidebar layout */
}

.sidebar .nav-link {
    padding: 0.65rem 1rem !important;
}

/* Better modal sizing */
.modal-dialog {
    margin: 1.75rem auto !important;
}

.modal-dialog.modal-lg {
    max-width: 900px !important;
}

.modal-dialog.modal-xl {
    max-width: 1200px !important;
}

/* Pagination more compact */
.pagination {
    margin-bottom: 0.75rem !important;
}

.page-item .page-link {
    padding: 0.4rem 0.75rem !important;
}

/* Badges fit better */
.badge {
    padding: 0.35em 0.65em !important;
    font-size: 0.875em !important;
}

/* Dropdowns more efficient */
.dropdown-menu {
    padding: 0.5rem 0 !important;
}

.dropdown-item {
    padding: 0.5rem 1rem !important;
}

/* Better input sizing */
.form-control,
.form-select {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.95rem !important;
}

.form-control-sm,
.form-select-sm {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.875rem !important;
}

/* Icons and text align properly */
.fa, .fas, .far, .fab {
    vertical-align: -0.125em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   6. RESPONSIVE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .admin-container,
    .page-container {
        padding: 1rem !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .modal-dialog {
        margin: 0.5rem !important;
    }
    
    .btn {
        padding: 0.5rem 0.85rem !important;
        font-size: 0.9rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   7. SPECIFIC COMPONENT FIXES
   ═══════════════════════════════════════════════════════════════════ */

/* User management page */
.user-card {
    margin-bottom: 1rem !important;
}

.user-card .card-body {
    padding: 1rem !important;
}

/* Dashboard widgets */
.widget,
.dashboard-widget {
    margin-bottom: 1.25rem !important;
}

.widget-body {
    padding: 1rem !important;
}

/* Data tables */
.dataTables_wrapper {
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.75rem !important;
}

/* Search bars */
.search-box,
.filter-box {
    margin-bottom: 1rem !important;
}

/* Action buttons in cards */
.card-actions,
.action-buttons {
    margin-top: 0.75rem !important;
    gap: 0.5rem !important;
}

/* Progress bars */
.progress {
    height: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

/* Timeline items */
.timeline-item {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}