/* ==========================================================================
   Global DataTables Styling
   Applies to ALL DataTables instances on the site
   ========================================================================== */

/* === General Table Appearance === */
table.dataTable {
    /* Ensure consistent box model */
    box-sizing: border-box;
}

/* === Header Columns Alignment (always left-aligned) === */
table.dataTable thead th,
table.dataTable thead th .dt-column-header,
table.dataTable thead th .dt-column-title {
    text-align: left !important;
    justify-content: flex-start !important;
}

 /* ==========================================================================
Global row height control (DataTables)
========================================================================== */

/* BODY rows */
table.dataTable tbody td {
    padding: clamp(6px, 0.6vw, 10px) 10px;
}

/* HEADER rows */
table.dataTable thead th {
    padding: clamp(6px, 0.6vw, 10px) 10px;
}

/* === Font Sizes (responsive with clamp) === */

/* Headers (including fixedHeader clones) */
table.dataTable thead th,
div.dataTables_scrollHeadInner table thead th {
    font-size: clamp(9px, 1.5vw, 11.5px) !important;
    box-sizing: border-box;
}

/* Footers (if used) */
table.dataTable tfoot th,
div.dataTables_scrollFootInner table tfoot th {
    font-size: clamp(9px, 1.5vw, 11.5px) !important;
    box-sizing: border-box;
}

/* Body cells — main content font size */
table.dataTable tbody td {
    font-size: clamp(9.5px, 1.2vw, 11.5px) !important;
    vertical-align: middle;
}

/* Filter/search inputs (header/footer, including fixedHeader) */
table.dataTable thead input,
table.dataTable tfoot input,
table.dataTable tfoot select,
table.dataTable input::placeholder,
div.dataTables_scrollHeadInner input,
div.dataTables_scrollFootInner input {
    font-size: clamp(9px, 1.5vw, 11.5px) !important;
    padding: 4px !important;
    height: auto;
    box-sizing: border-box;
}

/* Footer inputs/selects in specific tables (if not global) */

/* === Details Control Column (expand/collapse) === */
td.details-control {
    text-align: center;
    color: forestgreen !important;
    cursor: pointer;
}

td.details-control:hover {
    background-color: #0197ED !important;
}

tr.shown td.details-control {
    color: #0197ED !important;
}

/* === Nested / Child Tables (expandable rows) === */
.nested-table {
    border-collapse: collapse;
    width: 100%;
    outline: 2px solid #777777;
    border-radius: 5px;
}

.nested-table th,
.nested-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.nested-table th {
    background-color: #f2f2f2;
}

.nested-table tbody tr:hover {
    background-color: #f2f2f2;
}

.nested-table tfoot td {
    font-weight: bold;
    text-align: right;
}

/* === Highlighted / Focused Rows === */
.highlight-row {
    outline: 1px solid #0197ED;
    border-radius: 5px;
}

/* === Column Toggle Panel (if used) === */
.column-toggle-panel {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
}

/* === Search Input Focus State === */
#dt-search-0:focus {
    border: 1px solid white !important;
    outline-color: #0197ED;
}

/* === Specific Table Adjustments (only if needed) === */
/* Example: invoiceTable spacing */
/*#invoiceTable {
    margin-bottom: 1%;
}

#invoiceTable tr td {
    height: 30px;
}
*/

/* =========================
   Action editor inside tabatables(generic)
   ========================= */

.action-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* HEADER */
.action-editor__header {
    padding-bottom: .5rem;
    border-bottom: 1px solid #e5e5e5;
}

.action-editor__title {
    margin: 0;
    font-size: .95rem;
}

/* BODY */
.action-editor__body {
    padding: .25rem 0;
}

.action-editor__content {
    margin-top: .25rem;
}

/* clickable items (flags, etc.) */
.action-editor__item {
    width: 48px;
    height: 48px;
    border: 1px solid #ddd;
    border-radius: .375rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.action-editor__item:hover {
    background-color: #f8f9fa;
}

/* FOOTER */
.action-editor__footer {
    padding-top: .5rem;
    border-top: 1px solid #e5e5e5;
}

/* ===== Selection menu ===== */
.header-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* LEFT group */
.selection-group {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
}

.selection-group .btn,
.selection-group .dropdown-toggle {
    border-radius: 0 !important;
}
.selection-group .dropdown:first-child .btn {
    min-width: 140px;
}

/* RIGHT group */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

/* ===== TABLET ===== */
@media (max-width: 992px) {
    .header-toolbar {
        align-items: flex-start;
    }

    .selection-group {
        width: 100%;
    }

    .action-buttons {
        width: 100%;
        margin-left: 0;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .selection-group .dropdown {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .action-buttons .btn {
        flex: 1 1 calc(50% - 0.5rem);
    }
}
/*  END Selection menu ===== */