/* Import IBM Plex Sans */
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');
/* Override global font-family to IBM Plex Sans */
:root {
    --ins-font-sans-serif: "IBM Plex Sans", sans-serif;
    
    /* Custom variables for table-card-header - Light mode */
    --pato-table-card-header-bg: #fbfbfb;
    --pato-table-card-header-border-color: #e7eaec;
    --pato-table-card-header-text-color: #333;
    --pato-table-card-header-accent-color: #f8ac59;
    --pato-accent-color: #f8ac59;
    --pato-text-color: #333;
    --pato-bg-color: var(--ins-secondary-bg);
}

/* Dark mode overrides for custom variables */
html[data-bs-theme=dark] {
    --pato-table-card-header-bg: var(--ins-secondary-bg, #1e1f27);
    --pato-table-card-header-border-color: var(--ins-border-color, #293036);
    --pato-table-card-header-text-color: var(--ins-body-color, #ced6df);
    /* Accent color stays the same in dark mode */
    --pato-table-card-header-accent-color: #f8ac59;
    /* Text color for dark mode */
    --pato-text-color: var(#ced6df);
    --pato-bg-color: var(--ins-body-color, #ced6df);
    --pato-text-hover-color: #333;
}

.table-card-header {
    /* The yellow accent from your sidebar */
    border-top: 4px solid var(--pato-table-card-header-accent-color); 
    
    /* Subtle grey background to distinguish from white table */
    background-color: var(--pato-table-card-header-bg); 
    
    /* Standard Inspinia border color */
    border-bottom: 1px solid var(--pato-table-card-header-border-color); 
    
    /* Spacing fixes */
    padding: 15px 20px;
    border-radius: 4px 4px 0 0; /* Smooth top corners */
}

/* Make the title text pop a bit more */
.table-card-header h2, 
.table-card-header .card-title {
    font-weight: 600; /* IBM Plex Sans looks great at 600 */
    color: var(--pato-table-card-header-text-color);
    margin: 0;
}

.table-card-title {
    font-size: 1.125rem;
    color: var(--ins-body-color, #313a46);
}


table.dataTable.table-striped tr.dtrg-level-0 {
    background-color: unset; 
}

/* ============================================
   Global DataTables Styles
   ============================================ */

/* DataTables Controls Styling */
.dt-container .row {
    margin-bottom: 1rem;
}

.dt-length {
    padding-left: 0;
}

.dt-length label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ins-body-color, #313a46);
}

.dt-length select {
    width: auto !important;
    min-width: 70px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--ins-border-color, #dee2e6);
    border-radius: 0.25rem;
    background-color: var(--ins-body-bg, #fff);
}

.dt-search {
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
}

.dt-search label {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ins-body-color, #313a46);
    white-space: nowrap;
}

.dt-search input {
    width: auto !important;
    min-width: 200px;
    max-width: 300px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--ins-border-color, #dee2e6);
    border-radius: 0.25rem;
    background-color: var(--ins-body-bg, #fff);
    display: inline-block !important;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* Row Group Styling - Remove grey background and match table style */
table.dataTable tbody tr.group {
    background-color: transparent !important;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ins-body-color, #313a46);
    padding: 0.75rem 0.6rem;
    border-bottom: 2px solid var(--ins-border-color, #dee2e6);
}

table.dataTable tbody tr.group:hover {
    background-color: transparent !important;
}

table.dataTable tbody tr.group td {
    background-color: transparent !important;
    border-top: none;
    border-bottom: 2px solid var(--ins-border-color, #dee2e6);
}

/* Ensure group rows don't have striped background */
table.dataTable.table-striped tbody tr.group {
    --ins-table-bg-type: transparent;
}

/* Table bordered styling improvements */
table.dataTable.table-bordered {
    border-collapse: separate !important;
    border-spacing: 0;
}

table.dataTable.table-bordered > thead > tr > th,
table.dataTable.table-bordered > tbody > tr > td {
    border: 1px solid var(--ins-border-color, #dee2e6);
}

table.dataTable.table-bordered > thead > tr > th:first-child,
table.dataTable.table-bordered > tbody > tr > td:first-child {
    border-left: 1px solid var(--ins-border-color, #dee2e6);
}

table.dataTable.table-bordered > thead > tr > th:last-child,
table.dataTable.table-bordered > tbody > tr > td:last-child {
    border-right: 1px solid var(--ins-border-color, #dee2e6);
}

/* DataTables Info and Pagination */
.dt-info {
    padding-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--ins-body-color, #313a46);
}

.dt-paging {
    padding-top: 0.75rem;
}

.dt-paging .pagination {
    margin-bottom: 0;
}

.dt-paging .pagination .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* DataTables Responsive adjustments */
@media (max-width: 768px) {
    .dt-container .row {
        margin-bottom: 0.75rem;
    }
    
    .dt-search {
        text-align: left;
        padding-left: 0;
        padding-right: 0;
        margin-top: 0.75rem;
    }
    
    .dt-search label {
        justify-content: flex-start;
    }
    
    .dt-search input {
        min-width: 150px;
        max-width: 100%;
    }
}

/* ============================================
   Typeahead.js Autocomplete Styles
   ============================================ */

/* Fix Typeahead wrapper layout */
.twitter-typeahead {
    display: block !important;
    width: 100%;
}

.twitter-typeahead .form-control {
    width: 100%;
}

/* Typeahead input - transparent background for both themes */
.twitter-typeahead .tt-input,
.twitter-typeahead input.form-control {
    background-color: transparent !important;
    color: inherit;
}

/* Typeahead dropdown menu - white background for both themes */
.tt-menu {
    width: 100%;
    margin-top: 2px;
    background-color: #fff !important;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-height: 200px;
    overflow-y: auto;
}

/* Typeahead suggestion items - dark text for both themes */
.tt-suggestion {
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: #333 !important;
}

/* Typeahead suggestion hover and cursor states - accent color for both themes */
.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
    background-color: #f8ac59 !important;
    color: #333 !important;
}

.role-form .role-field .mb-3 {
    margin-bottom: 0;
}

.role-form .role-default-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.role-form .role-default-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 38px;
}

.role-form .role-remove-column {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

@media (max-width: 991.98px) {
    .role-form .role-remove-column {
        justify-content: flex-start;
        margin-top: 0.5rem;
    }
}

/* ============================================
   Quill content (task/case descriptions)
   Apply ql-editor ql-snow where Quill HTML is rendered
   ============================================ */

/* Reduced padding for lists (ul, ol) and list items */
.ql-editor ul,
.ql-editor ol {
    padding-left: 1em;
    margin: 0.25em 0;
}
.ql-editor li {
    padding-left: 0.5em;
}
.ql-editor li.ql-indent-1 { padding-left: 2em; }
.ql-editor li.ql-indent-2 { padding-left: 3.5em; }
.ql-editor li.ql-indent-3 { padding-left: 5em; }
.ql-editor li.ql-indent-4 { padding-left: 6.5em; }
.ql-editor li.ql-indent-5 { padding-left: 8em; }

/* Checklist: bigger checkboxes (16px) */
.ql-editor li[data-list=checked] > .ql-ui::before,
.ql-editor li[data-list=unchecked] > .ql-ui::before {
    font-size: 16px !important;
}
/* Fallback when .ql-ui missing (e.g. static HTML from DB); :has() required */
@supports selector(:has(*)) {
    .ql-editor li[data-list=checked]:not(:has(> .ql-ui))::before,
    .ql-editor li[data-list=unchecked]:not(:has(> .ql-ui))::before {
        font-size: 16px;
        margin-right: 0.25em;
    }
    .ql-editor li[data-list=checked]:not(:has(> .ql-ui))::before { content: '\2611\00a0'; }
    .ql-editor li[data-list=unchecked]:not(:has(> .ql-ui))::before { content: '\2610\00a0'; }
}

/* ============================================
   Auth styles
   ============================================ */
@media (max-width: 991.98px) {
    .auth-box {
        padding: 0;
        margin: 0;
    }

    .auth-box .container-xxl .row .col-xl-10  {
        padding: 0;
    }
}