/**
 * Custom CSS for Backpack Admin Panel
 * Fixes for Bootstrap 5 badges with Tabler theme
 */

/* Fix alignment for lead chips - make checkbox and details control inline with title */
.bp-chip {
    display: inline-flex !important;
    width: calc(100% - 60px);
    vertical-align: middle;
}

.crud_bulk_actions_checkbox {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.dtr-control {
    display: inline-block !important;
    vertical-align: middle;
    margin-right: 8px;
}

/* Ensure the row takes full width but stays on one line */
td .row.bp-chip {
    margin: 0;
    flex-wrap: nowrap;
}

/* Keep the chip content inline */
.bp-chip .col {
    display: inline-block;
    width: auto;
    max-width: 100%;
}

/* Mobile two-row layout styling */
@media (max-width: 768px) {
    /* Hide details control button on mobile */
    #crudTable td.dtr-control,
    #crudTable th.dtr-control {
        display: none !important;
        width: 0 !important;
        padding: 0 !important;
    }
    
    /* Make parent and child rows look like one unit */
    #crudTable tbody tr.dt-hasChild {
        border-bottom: 2px solid #dee2e6 !important;
    }
    
    #crudTable tbody tr.dt-hasChild td {
        border-bottom: none !important;
        background: white;
    }
    
    /* Child row styling */
    #crudTable tbody tr.child {
        background: #f8f9fa !important;
    }
    
    #crudTable tbody tr.child td {
        padding: 0 !important;
        border: none !important;
    }
    
    /* Visual grouping of the two rows */
    #crudTable tbody tr.dt-hasChild,
    #crudTable tbody tr.child {
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* Add spacing between record groups */
    #crudTable tbody tr.child td {
        padding-bottom: 10px !important;
    }
    
    /* Simplified chip view on mobile */
    .bp-chip .d-block.text-secondary {
        display: none !important;
    }
    
    .bp-chip {
        width: 100%;
    }
    
    /* Actions dropdown on mobile */
    #crudTable .dropdown-toggle {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    
    #crudTable .dropdown-menu {
        min-width: 150px;
    }
}

/* Actions dropdown styling */
.crud-list .dropdown-toggle::after {
    margin-left: 0.255em;
}

.crud-list .dropdown-menu {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.crud-list .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.crud-list .dropdown-item i {
    margin-right: 0.5rem;
    width: 16px;
    text-align: center;
}

/* Fix badge text colors for Bootstrap 5 with Tabler theme */
.badge.bg-primary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-warning,
.badge.bg-info,
.badge.bg-dark {
    color: white !important;
}

/* Warning badge should have dark text for better contrast */
.badge.bg-warning {
    color: var(--tblr-body-color) !important;
}

/* Secondary background color override */
.bg-secondary {
    background-color: rgba(73, 80, 87, 0.2) !important;
}

/* Secondary badge should have black text */
.badge.bg-secondary {
    color: black !important;
}

/* Light badge should have dark text */
.badge.bg-light {
    color: var(--tblr-body-color) !important;
}

/* Ensure rounded pills maintain proper styling */
.badge.rounded-pill.bg-primary,
.badge.rounded-pill.bg-success,
.badge.rounded-pill.bg-danger,
.badge.rounded-pill.bg-info,
.badge.rounded-pill.bg-dark {
    color: white !important;
}

.badge.rounded-pill.bg-secondary {
    color: black !important;
}

.badge.rounded-pill.bg-warning,
.badge.rounded-pill.bg-light {
    color: var(--tblr-body-color) !important;
}

/* Fix Tabler's margin issue on desktop */
@media (min-width: 992px) {
    :root {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    html {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Fix navbar active indicator position */
    .navbar-expand-lg .nav-item.active:after {
        bottom: -0.3rem;
    }
    
    /* Fix filter navbar active indicator position */
    .nav.navbar-nav .nav-item.active:after {
        bottom: -0.5rem;
    }
}

/* Reduce HR margin - only top margin, no bottom */
.hr, hr {
    margin: 1.5rem 0 0 0;
}

/* Make form labels medium weight */
label {
    font-weight: 500;
}

/* Fix horizontal menu width when using fluid containers */
.single-top-bar.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Keep proper padding for the inner menu content */
.single-top-bar.container-fluid .navbar .container-fluid {
    padding-left: var(--tblr-gutter-x, 1.5rem);
    padding-right: var(--tblr-gutter-x, 1.5rem);
}

/* Convert tabs to blocks when body has 'tabs-as-blocks' class */
/* Hide all possible tab navigations (Tabler theme) */
.tabs-as-blocks .nav-tabs,
.tabs-as-blocks .nav-pills,
.tabs-as-blocks .card-tabs,
.tabs-as-blocks [role="tablist"],
.tabs-as-blocks ul.nav-tabs { 
    display: none !important; 
}

/* Show all tab panes as blocks */
.tabs-as-blocks .tab-content .tab-pane,
.tabs-as-blocks .tab-content [role="tabpanel"],
.tabs-as-blocks .tab-pane { 
    display: block !important; 
    opacity: 1 !important;
    visibility: visible !important;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1.5rem;
    padding: 0;
    background: white;
}

/* Remove the fade and show classes effects */
.tabs-as-blocks .tab-pane.fade {
    opacity: 1 !important;
    transition: none !important;
}

/* Add header style for each block */
.tabs-as-blocks .tab-content .tab-pane::before {
    content: "Section";
    display: block;
    padding: 1rem 1.25rem;
    background-color: rgba(0,0,0,0.03);
    border-bottom: 1px solid #dee2e6;
    font-size: 1.125rem;
    font-weight: 500;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
}

/* Style the content area */
.tabs-as-blocks .tab-content .tab-pane > .row {
    padding: 1.25rem;
}

/* Special styling for tabs based on ID or data attributes */
.tabs-as-blocks .tab-pane[id*="basic"]::before,
.tabs-as-blocks .tab-pane[id*="Basic"]::before {
    content: "Basic Information";
}

.tabs-as-blocks .tab-pane[id*="tracking"]::before,
.tabs-as-blocks .tab-pane[id*="Tracking"]::before {
    content: "Tracking Information";
}

.tabs-as-blocks .tab-pane[id*="form"]::before,
.tabs-as-blocks .tab-pane[id*="Form"]::before {
    content: "Form Information";
}

.tabs-as-blocks .tab-pane[id*="submission"]::before,
.tabs-as-blocks .tab-pane[id*="Submission"]::before {
    content: "Submission Information";
}

.tabs-as-blocks .tab-pane[id*="metadata"]::before,
.tabs-as-blocks .tab-pane[id*="Metadata"]::before,
.tabs-as-blocks .tab-pane[id*="lead-metadata"]::before,
.tabs-as-blocks .tab-pane[id*="Lead-Metadata"]::before {
    content: "Lead Metadata";
}

.tabs-as-blocks .tab-pane[id*="post-rejection"]::before,
.tabs-as-blocks .tab-pane[id*="Post-Rejection"]::before,
.tabs-as-blocks .tab-pane[id*="rejection"]::before {
    content: "Post-Rejection Information";
}

/* Style the status dropdown on lead edit pages */
.tabs-as-blocks select[name="status"],
select[name="status"] {
    font-weight: 500;
}

/* Apply background colors based on selected status value */
.tabs-as-blocks select[name="status"][value="submitted"],
select[name="status"] option[value="submitted"]:checked,
select[name="status"]:has(option[value="submitted"]:checked) {
    background-color: #d1f4dd !important;
    color: #0a5f2e !important;
}

.tabs-as-blocks select[name="status"][value="error"],
select[name="status"] option[value="error"]:checked,
select[name="status"]:has(option[value="error"]:checked),
.tabs-as-blocks select[name="status"][value="rejected"],
select[name="status"] option[value="rejected"]:checked,
select[name="status"]:has(option[value="rejected"]:checked) {
    background-color: #fdd7d7 !important;
    color: #8b1a1a !important;
}

.tabs-as-blocks select[name="status"][value="enqueued"],
select[name="status"] option[value="enqueued"]:checked,
select[name="status"]:has(option[value="enqueued"]:checked) {
    background-color: #fff3cd !important;
    color: #664d03 !important;
}

.tabs-as-blocks select[name="status"][value="pending"],
select[name="status"] option[value="pending"]:checked,
select[name="status"]:has(option[value="pending"]:checked) {
    background-color: #cff4fc !important;
    color: #055160 !important;
}

.tabs-as-blocks select[name="status"][value="archived"],
select[name="status"] option[value="archived"]:checked,
select[name="status"]:has(option[value="archived"]:checked) {
    background-color: #e9ecef !important;
    color: #495057 !important;
}