/* Global DataTables theme (Doctaz).
   Moved verbatim from an inline <style> block in layouts/includes_bottom.php and
   linked from the same spot, so it still loads after the body-level
   dataTables.bootstrap4.min.css it overrides. Do not move it into
   doctaz-theme.css (in <head>) without also moving that vendor file: the
   vendor's equal-specificity rules would start winning. */

/* ============================================================================
   Global DataTables theme (Doctaz)
   Bootstrap 3 → Bootstrap 5 layout fix + professional brand-aligned styling.
   Applies to every DataTable app-wide. Brand teal = var(--doctaz-brand, #0d9488).
   ========================================================================== */
:root {
    /* Alias the shared UI tokens (doctaz-theme.css). Same values, single source. */
    --dt-border: var(--ui-border-color, #e5e7eb);
    --dt-muted: var(--ui-muted-color, #6b7280);
    --dt-row-hover: rgba(13, 148, 136, 0.05);
}

/* Card-like shell around the whole table + its controls — refined design */
.dataTables_wrapper.form-inline { display: block; }
.dataTables_wrapper {
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 24px 0;
    margin: 0;
    box-shadow: none;
}

/* Standardisation: any .card-box that wraps a DataTable drops its horizontal
   padding so the table area renders full-bleed inside the card. Every inner
   element (toolbar, table cell text, footer info, pagination) then shares a
   single 16px inset, so they all line up on one left/right edge. Browsers
   without :has() simply keep the card's default padding — the inner 16px inset
   still keeps everything mutually aligned, just with more outer whitespace. */
.card-box:has(.dataTables_wrapper) {
    padding-left: 0;
    padding-right: 0;
}

/* Top / bottom control rows — improved spacing.
   Horizontal padding matches the table's first/last column inset (16px) so the
   "Show entries" / search / "Showing N entries" / pagination all line up with
   the table header + cell text on the same left/right edge. */
.dataTables_wrapper > .row {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; margin: 0; gap: 16px;
    padding: 0 16px;
}
.dataTables_wrapper > .row:first-child { margin-bottom: 0; }
.dataTables_wrapper > .row:last-child { margin-top: 0; }
.dataTables_wrapper > .row .col-xs-6 {
    width: auto; padding: 0; box-sizing: border-box;
}
/* left column (length / info) hugs the start */
.dataTables_wrapper > .row .col-left {
    flex: 0 0 auto; display: flex; justify-content: flex-start; gap: 16px;
    align-items: center;
}
/* right column (search / pagination) grows and pins its content to the far end */
.dataTables_wrapper > .row .col-right {
    flex: 1 1 auto; display: flex; justify-content: flex-end; gap: 12px;
    align-items: center;
}

/* DataTables standardisation — remove padding from col-sm-12 inside wrapper */
.dataTables_wrapper .col-sm-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Length ("per page") + filter ("search") controls — modern styling */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: 13px; color: #6b7280;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-weight: 500; color: #374151;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    display: inline-block; width: auto; height: 38px;
    border: 1.5px solid #e5e7eb; border-radius: 8px;
    font-size: 13px; color: #1f2937; background: #fff;
    transition: all .2s ease;
}

.dataTables_wrapper .dataTables_length select {
    padding: 8px 32px 8px 12px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    appearance: none;
    padding-right: 32px;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 8px 14px; min-width: 240px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='m21 21-4.35-4.35'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
}

.dataTables_wrapper .dataTables_length select:hover,
.dataTables_wrapper .dataTables_filter input:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none; border-color: var(--doctaz-brand, #0d9488);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.dataTables_wrapper .dataTables_info {
    font-size: 13px; color: var(--dt-muted); padding: 0;
}

/* Horizontal scroll container for the table itself (see the 't' wrapped in
   .table-responsive via the dom option in AppUI.initTables) — safety net so a
   still-too-wide table scrolls instead of overflowing the page on small screens. */
.dataTables_wrapper .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The table itself — improved spacing & visual hierarchy */
.dataTables_wrapper table.dataTable {
    width: 100% !important; margin: 0; border-collapse: separate; border-spacing: 0;
    border: none; border-radius: 0; overflow: hidden;
    box-shadow: none;
}

/* Header row — refined styling */
.dataTables_wrapper table.dataTable thead th {
    background: linear-gradient(180deg, var(--doctaz-brand-soft, #f0fdfa) 0%, #e0f9f7 100%);
    color: var(--doctaz-brand-darker, #095e57);
    border: none;
    font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
    padding: 16px; vertical-align: middle; white-space: nowrap;
    border-bottom: 2px solid var(--doctaz-brand-soft-border, #99f6e4);
}

/* Table body — improved spacing & interactivity */
.dataTables_wrapper table.dataTable tbody td {
    padding: 18px 16px; vertical-align: middle; font-size: 14px;
    color: #1f2937; border: none;
    line-height: 1.5;
}

/* Row borders — subtle separation */
.dataTables_wrapper table.dataTable tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.15s ease;
}

.dataTables_wrapper table.dataTable tbody tr:first-child td { border-top: none; }

/* Alternating row backgrounds — better readability */
.dataTables_wrapper table.dataTable tbody tr:nth-child(even) {
    background: rgba(13, 148, 136, 0.02);
}

/* Hover state — interactive feedback */
.dataTables_wrapper table.dataTable tbody tr:hover {
    background: rgba(13, 148, 136, 0.08);
    box-shadow: inset 2px 0 0 var(--doctaz-brand, #0d9488);
}

/* First / last columns share the same 16px inset as the control rows above/below
   so the header text, cell content, "Showing N entries" and pagination all align
   on one consistent left/right edge. */
.dataTables_wrapper table.dataTable tbody td:first-child,
.dataTables_wrapper table.dataTable thead th:first-child {
    padding-left: 16px;
}
.dataTables_wrapper table.dataTable tbody td:last-child,
.dataTables_wrapper table.dataTable thead th:last-child {
    padding-right: 16px;
}

/* Image column styling — constrain avatar size */
.dataTables_wrapper table.dataTable tbody td img {
    max-width: 48px; max-height: 48px; border-radius: 50%;
    object-fit: cover; border: 2px solid #f0f0f0;
}

/* Status badges — improved styling */
.dataTables_wrapper table.dataTable .badge {
    font-size: 11px; font-weight: 600; padding: 6px 10px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: .5px;
}

.dataTables_wrapper table.dataTable .badge.badge-success,
.dataTables_wrapper table.dataTable .badge-approved {
    background: var(--ui-badge-success-bg, #d1fae5); color: var(--ui-badge-success-fg, #065f46);
    border: 1px solid var(--ui-badge-success-border, #a7f3d0);
}

.dataTables_wrapper table.dataTable .badge.badge-warning,
.dataTables_wrapper table.dataTable .badge-pending {
    background: var(--ui-badge-warning-bg, #fef3c7); color: var(--ui-badge-warning-fg, #92400e);
    border: 1px solid var(--ui-badge-warning-border, #fde68a);
}

.dataTables_wrapper table.dataTable .badge.badge-danger,
.dataTables_wrapper table.dataTable .badge-rejected {
    background: var(--ui-badge-danger-bg, #fee2e2); color: var(--ui-badge-danger-fg, #991b1b);
    border: 1px solid var(--ui-badge-danger-border, #fecaca);
}

/* info was never covered here, so it kept Ubold's white-on-#4fc6e1 (2.00:1).
   Same soft treatment as the rest; tokens live in doctaz-theme.css. */
.dataTables_wrapper table.dataTable .badge.badge-info,
.dataTables_wrapper table.dataTable .badge.bg-info {
    background: var(--ui-badge-info-bg, #e0f2fe); color: var(--ui-badge-info-fg, #075985);
    border: 1px solid var(--ui-badge-info-border, #bae6fd);
}

/* Row action buttons — right-aligned, hoverable */
.dataTables_wrapper table.dataTable .row-actions {
    display: flex; gap: 6px; align-items: center;
    opacity: 0; transition: opacity 0.15s ease;
}

.dataTables_wrapper table.dataTable tbody tr:hover .row-actions {
    opacity: 1;
}

.dataTables_wrapper table.dataTable .btn-xs,
.dataTables_wrapper table.dataTable .row-actions .btn {
    font-size: 12px; padding: 5px 10px; border-radius: 6px;
    transition: all 0.15s ease;
}

.dataTables_wrapper table.dataTable .row-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Empty state ("No data available in table") */
.dataTables_wrapper table.dataTable tbody td.dataTables_empty {
    text-align: center; padding: 48px 16px; color: var(--dt-muted);
    font-size: 14px; font-style: italic;
    background: rgba(13, 148, 136, 0.02);
}

/* Pagination — targets Bootstrap-4 DataTables markup (.page-item/.page-link) as
   produced by datatables.net-bs4 (Batch 2). The legacy bs3 `ul.pagination li a`
   selectors are kept alongside so any not-yet-migrated table still styles cleanly. */
.dataTables_wrapper ul.pagination {
    display: flex; list-style: none; padding: 0; margin: 0; gap: 4px; flex-wrap: wrap;
}
.dataTables_wrapper ul.pagination .page-link,
.dataTables_wrapper ul.pagination li a,
.dataTables_wrapper ul.pagination li span {
    display: block; min-width: 34px; text-align: center; padding: 6px 11px;
    border: 1px solid var(--dt-border); border-radius: 8px;
    color: #374151; text-decoration: none; font-size: 13px; line-height: 1.5;
    cursor: pointer; transition: all .15s ease; margin: 0;
}
.dataTables_wrapper ul.pagination .page-link:focus {
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15); outline: none; z-index: 1;
}
.dataTables_wrapper ul.pagination .page-item.active .page-link,
.dataTables_wrapper ul.pagination li.active a {
    background: var(--doctaz-brand, #0d9488); border-color: var(--doctaz-brand, #0d9488); color: #fff;
}
.dataTables_wrapper ul.pagination .page-item.disabled .page-link,
.dataTables_wrapper ul.pagination li.disabled a {
    color: #cbd5e1; pointer-events: none; border-color: var(--dt-border); background: #f9fafb;
}
.dataTables_wrapper ul.pagination .page-item:not(.disabled):not(.active) .page-link:hover,
.dataTables_wrapper ul.pagination li:not(.disabled):not(.active) a:hover {
    background: var(--doctaz-brand-soft, #ccfbf1); border-color: var(--doctaz-brand, #0d9488);
    color: var(--doctaz-brand-darker, #095e57);
}