/* File: /api_handlers/styles.css */

/* 1. Container Styling */
.api-filter-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* 2. Label Styling */
.api-filter-box label {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 0.5rem;
    display: block; /* Ensures labels sit above inputs */
}

/* 3. Form Control Tweaks */
.api-filter-box .form-select {
    border-radius: 0.375rem;
    border-color: #ced4da;
}

/* 4. Table Wrapper Spacing */
#mainTable_wrapper {
    margin-top: 1rem;
}

/* --- PAGINATION FIXES --- */

/* 5. Force the footer to align Info (Left) and Pagination (Right) */
#mainTable_wrapper .row:last-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 1rem;
}

/* 6. Fix the "Vertical Page Numbers" issue */
div.dataTables_paginate ul.pagination {
    display: flex !important;
    flex-direction: row !important;
    gap: 5px; /* Space between buttons */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 7. Style the buttons to look like Joomla buttons */
div.dataTables_paginate ul.pagination li.page-item a.page-link {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    color: #0d6efd;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
}

/* 8. Highlight the Active Page */
div.dataTables_paginate ul.pagination li.active a.page-link {
    z-index: 3;
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* 9. Fix "Disabled" buttons */
div.dataTables_paginate ul.pagination li.disabled a.page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/* Align the bottom row elements */
div.dataTables_wrapper .row:last-child {
    margin-top: 15px;
    display: flex;
    align-items: center;
}


/* --- FOOTER LAYOUT (2-Row Structure) --- */

/* 1. Pagination Alignment (Right) */
div.dataTables_paginate {
    display: flex;
    justify-content: flex-end;
}

/* 2. Info Alignment (Left) */
div.dataTables_info {
    text-align: left;
    padding-top: 0 !important; /* Fix vertical alignment with buttons */
}

/* 3. Length Menu (Bottom Row) Styling */
div.dataTables_length {
    margin-top: 10px;
    border-top: 1px solid #dee2e6; /* Optional separator line */
    padding-top: 15px;
}

/* 4. MAKE FONT BIGGER for "Show entries" */
div.dataTables_length label {
    display: inline-flex;
    align-items: center;
}

div.dataTables_length select.form-select {
    width: auto;
    display: inline-block;
    margin: 0 5px;
}


/* --- SEARCH BOX ALIGNMENT --- */

/* 1. Reset alignment to Left */
div.dataTables_filter {
    text-align: left !important; /* Default is often right */
    margin-bottom: 10px;         /* Add space between search and table */
}

/* 2. Fix vertical alignment of text and input */
div.dataTables_filter label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    font-weight: 600; /* Make label text match your other labels */
    color: #6c757d;
}

/* 3. Style the Input Box */
div.dataTables_filter input {
    margin-left: 10px !important; /* Space between text and box */
    display: inline-block;
    width: 300px; /* Make the box wide enough */
    max-width: 100%;
    
    /* Make it look like your other inputs */
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}