/* ============================================
   siteadv.css  — Theme 3: Deep Navy & Amber
   Professional Fleet UI
   ============================================ */

:root {
    --clr-navy: #6c757d;
    --clr-navy-lt: #f8f7f4;
    --clr-amber: #d97706;
    --clr-amber-lt: #fffbeb;
    --clr-amber-bd: #fde68a;
    --clr-success: #15803d;
    --clr-warning: #d97706;
    --clr-danger: #b91c1c;
    --clr-info: #0369a1;
    --clr-border: #e7e5e4;
    --clr-border-dk: #d6d3d1;
    --clr-label: #78716c;
    --clr-text: #1c1917;
    --clr-muted: #a8a29e;
    --clr-bg: #f5f4f1;
    --clr-surface: #ffffff;
    --clr-surface2: #fafaf9;
    --radius: 6px;
    --radius-sm: 4px;
}

/* ---- Page background ---- */
.fincontent,
.fincontentother,
.fincontentreport {
    background: var(--clr-bg) !important;
}

    /* ============================================
   SECTION HEADER BAR
   ============================================ */
    .fincontent .position-relative.p-3.bg-white,
    .fincontentother .position-relative.p-3.bg-white,
    .fincontentreport .position-relative.p-3.bg-white {
        background: var(--clr-navy) !important;
        border: none !important;
        border-radius: var(--radius) !important;
        padding: 9px 16px !important;
        margin-bottom: 8px !important;
    }

        .fincontent .position-relative.p-3.bg-white *,
        .fincontentother .position-relative.p-3.bg-white *,
        .fincontentreport .position-relative.p-3.bg-white * {
            color: #ffffff !important;
        }

        .fincontent .position-relative.p-3.bg-white b,
        .fincontentother .position-relative.p-3.bg-white b,
        .fincontentreport .position-relative.p-3.bg-white b {
            font-size: 13px !important;
            font-weight: 700 !important;
            letter-spacing: 0.5px !important;
            text-transform: uppercase !important;
        }

    /* ============================================
   CARDS
   ============================================ */
    .fincontent .card,
    .fincontent .card-outline,
    .fincontent .card-success,
    .fincontent .card-info,
    .fincontent .card-warning,
    .fincontent .card-danger,
    .fincontent .card-primary,
    .fincontent .card-default,
    .fincontentother .card,
    .fincontentother .card-outline,
    .fincontentother .card-success,
    .fincontentother .card-info,
    .fincontentother .card-warning,
    .fincontentother .card-danger,
    .fincontentother .card-primary,
    .fincontentother .card-default,
    .fincontentreport .card-default {
        border: 1px solid var(--clr-border) !important;
        border-radius: var(--radius) !important;
        box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
        background: var(--clr-surface) !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    /* Card header — amber left accent */
    .fincontent .card-header,
    .fincontentother .card-header,
    .fincontentreport .card-header {
        background: var(--clr-amber-lt) !important;
        border-bottom: 1px solid var(--clr-amber-bd) !important;
        border-top: none !important;
        border-right: none !important;
        border-left: 4px solid var(--clr-amber) !important;
        border-radius: var(--radius) var(--radius) 0 0 !important;
        padding: 7px 14px !important;
        min-height: unset !important;
    }

    /* Per card-type accent colors */
    .fincontent .card-success > .card-header,
    .fincontentother .card-success > .card-header,
    .fincontentreport .card-success > .card-header {
        border-left-color: var(--clr-success) !important;
        background: #f0fdf4 !important;
        border-bottom-color: #bbf7d0 !important;
    }

    .fincontent .card-warning > .card-header,
    .fincontentother .card-warning > .card-header,
    .fincontentreport .card-warning > .card-header {
        border-left-color: var(--clr-warning) !important;
        background: var(--clr-amber-lt) !important;
        border-bottom-color: var(--clr-amber-bd) !important;
    }

    .fincontent .card-danger > .card-header,
    .fincontentother .card-danger > .card-header,
    .fincontentreport .card-danger > .card-header {
        border-left-color: var(--clr-danger) !important;
        background: #fff5f5 !important;
        border-bottom-color: #fecaca !important;
    }

    .fincontent .card-primary > .card-header,
    .fincontentother .card-primary > .card-header,
    .fincontentreport .card-primary > .card-header {
        border-left-color: var(--clr-navy) !important;
        background: #f8f7f4 !important;
        border-bottom-color: var(--clr-border) !important;
    }

    .fincontent .card-info > .card-header,
    .fincontentother .card-info > .card-header,
    .fincontentreport .card-info > .card-header {
        border-left-color: var(--clr-info) !important;
        background: #f0f9ff !important;
        border-bottom-color: #bae6fd !important;
    }

    /* Card title */
    .fincontent .card-title,
    .fincontentother .card-title,
    .fincontentreport .card-title {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.7px !important;
        color: var(--clr-navy) !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    /* Card body — always white */
    .fincontent .card-body,
    .fincontent .card.card-outline > .card-body,
    .fincontent .card-success.card-outline > .card-body,
    .fincontent .card-info.card-outline > .card-body,
    .fincontent .card-warning.card-outline > .card-body,
    .fincontent .card-danger.card-outline > .card-body,
    .fincontent .card-primary.card-outline > .card-body,
    .fincontent .card-default.card-outline > .card-body,
    .fincontentother .card-body,
    .fincontentother .card.card-outline > .card-body,
    .fincontentother .card-success.card-outline > .card-body,
    .fincontentother .card-info.card-outline > .card-body,
    .fincontentother .card-warning.card-outline > .card-body,
    .fincontentother .card-danger.card-outline > .card-body,
    .fincontentother .card-primary.card-outline > .card-body,
    .fincontentother .card-default.card-outline > .card-body,
    .fincontentreport .card-default.card-outline > .card-body {
        padding: 12px 14px 8px 14px !important;
        background: #ffffff !important;
        height: auto !important;
        min-height: unset !important;
        overflow: visible !important;
    }

        .fincontent .card-body.table-responsive,
        .fincontentother .card-body.table-responsive,
        .fincontentreport .card-body.table-responsive {
            padding: 0 !important;
            overflow-x: auto !important;
        }

    /* Card-outline top border fix */
    .fincontent .card.card-outline,
    .fincontentother .card.card-outline,
    .fincontentreport .card.card-outline {
        border-top: 1px solid var(--clr-border) !important;
    }

    /* ============================================
   LABELS
   ============================================ */
    .fincontent label,
    .fincontentother label,
    .fincontentreport label {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: var(--clr-label) !important;
        margin-bottom: 3px !important;
        margin-top: 0 !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    /* ============================================
   FORM GROUPS & ROWS
   ============================================ */
    .fincontent .form-group,
    .fincontentother .form-group,
    .fincontentreport .form-group {
        margin-bottom: 10px !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .fincontent .row,
    .fincontentother .row,
    .fincontentreport .row {
        margin-bottom: 0 !important;
    }

    .fincontent .card-body > .row,
    .fincontentother .card-body > .row,
    .fincontentreport .card-body > .row {
        align-items: flex-end !important;
    }

    /* ============================================
   INPUTS & SELECTS
   ============================================ */
    .fincontent .form-control,
    .fincontent .form-control-sm,
    .fincontentother .form-control,
    .fincontentother .form-control-sm,
    .fincontentreport .form-control-sm {
        border: 1px solid var(--clr-border) !important;
        border-radius: var(--radius-sm) !important;
        color: var(--clr-text) !important;
        background: var(--clr-surface) !important;
        font-size: 12px !important;
        transition: border-color .15s, box-shadow .15s !important;
    }

        .fincontent .form-control:focus,
        .fincontent .form-control-sm:focus,
        .fincontentother .form-control:focus,
        .fincontentother .form-control-sm:focus,
        .fincontentreport .form-control-sm:focus {
            border-color: var(--clr-amber) !important;
            box-shadow: 0 0 0 3px rgba(217,119,6,0.12) !important;
            outline: none !important;
        }

        /* Readonly / disabled */
        .fincontent .form-control[readonly],
        .fincontent .form-control.disabled,
        .fincontent .disabledcontrol,
        .fincontentother .form-control[readonly],
        .fincontentother .form-control.disabled,
        .fincontentother .disabledcontrol,
        .fincontentreport .disabledcontrol {
            background: var(--clr-surface2) !important;
            color: var(--clr-muted) !important;
            border-color: var(--clr-border) !important;
        }

    .fincontent textarea.form-control,
    .fincontentother textarea.form-control,
    .fincontentreport textarea.form-control {
        height: auto !important;
        min-height: unset !important;
        resize: vertical !important;
    }

    /* ============================================
   INPUT GROUPS
   ============================================ */
    .fincontent .input-group,
    .fincontentother .input-group,
    .fincontentreport .input-group {
        flex-wrap: nowrap !important;
    }

        .fincontent .input-group > .form-control,
        .fincontent .input-group > input,
        .fincontentother .input-group > .form-control,
        .fincontentother .input-group > input,
        .fincontentreport .input-group > input {
            border-right: 0 !important;
            border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
        }

    .fincontent .input-group-append,
    .fincontentother .input-group-append,
    .fincontentreport .input-group-append {
        margin-left: 0 !important;
        display: flex !important;
    }

        .fincontent .input-group-append .btn,
        .fincontent .input-group-append .input-group-text,
        .fincontentother .input-group-append .btn,
        .fincontentother .input-group-append .input-group-text,
        .fincontentreport .input-group-append .input-group-text {
            border-left: 0 !important;
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
            border-color: var(--clr-border) !important;
            background: var(--clr-amber-lt) !important;
            color: var(--clr-amber) !important;
            font-size: 12px !important;
            margin-left: 0 !important;
        }

    .fincontent .input-group-prepend,
    .fincontentother .input-group-prepend,
    .fincontentreport .input-group-prepend {
        margin-right: 0 !important;
        display: flex !important;
    }

        .fincontent .input-group-prepend .input-group-text,
        .fincontentother .input-group-prepend .input-group-text,
        .fincontentreport .input-group-prepend .input-group-text {
            border-right: 0 !important;
            border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
            border-color: var(--clr-border) !important;
            background: var(--clr-amber-lt) !important;
            color: var(--clr-amber) !important;
            font-size: 12px !important;
        }

    .fincontent .input-group > .input-group-prepend ~ .form-control,
    .fincontentother .input-group > .input-group-prepend ~ .form-control,
    .fincontentreport .input-group > .input-group-prepend ~ .form-control {
        border-left: 0 !important;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
    }

    .fincontent .input-group.mb-3,
    .fincontentother .input-group.mb-3,
    .fincontentreport .input-group.mb-3 {
        margin-bottom: 0 !important;
    }

    /* ============================================
   BUTTONS
   ============================================ */
    .fincontent .btn-default,
    .fincontentother .btn-default,
    .fincontentreport .btn-default {
        background: var(--clr-surface) !important;
        border: 1px solid var(--clr-border-dk) !important;
        color: var(--clr-navy) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: var(--radius-sm) !important;
        transition: all .15s !important;
    }

        .fincontent .btn-default:hover,
        .fincontentother .btn-default:hover,
        .fincontentreport .btn-default:hover {
            background: var(--clr-amber-lt) !important;
            border-color: var(--clr-amber) !important;
            color: var(--clr-navy) !important;
        }

    /* ============================================
   TABLES — existing fincontent tables
   ============================================ */
    .fincontent table,
    .fincontentother table,
    .fincontentreport table {
        border-collapse: collapse !important;
    }

        .fincontent table thead th,
        .fincontentother table thead th,
        .fincontentreport table thead th {
            background: #fffbeb !important;
            background-color: #fffbeb !important;
            color: #92400e !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            padding: 8px 10px !important;
            border-bottom: 2px solid #d97706 !important;
            border-top: 1px solid #fde68a !important;
            white-space: nowrap !important;
        }

        .fincontent table tbody tr:nth-child(even),
        .fincontentother table tbody tr:nth-child(even),
        .fincontentreport table tbody tr:nth-child(even) {
            background: var(--clr-navy-lt) !important;
        }

        .fincontent table tbody tr:hover,
        .fincontentother table tbody tr:hover,
        .fincontentreport table tbody tr:hover {
            background: var(--clr-amber-lt) !important;
        }

        .fincontent table td,
        .fincontent table th,
        .fincontentother table td,
        .fincontentother table th,
        .fincontentreport table th {
            font-size: 12px !important;
            padding: 5px 10px !important;
            vertical-align: middle !important;
            border-color: var(--clr-border) !important;
        }

    /* ============================================
   RADIO / CHECKBOX
   ============================================ */
    .fincontent .custom-control,
    .fincontentother .custom-control,
    .fincontentreport .custom-control {
        display: flex !important;
        align-items: center !important;
        min-height: 28px !important;
        padding-left: 1.6rem !important;
    }

    .fincontent .custom-control-label,
    .fincontentother .custom-control-label,
    .fincontentreport .custom-control-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--clr-navy) !important;
        cursor: pointer !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
    }

    .fincontent .icheck-success,
    .fincontentother .icheck-success,
    .fincontentreport .icheck-success {
        display: flex !important;
        align-items: center !important;
    }

    /* ============================================
   SELECT2
   ============================================ */
    .fincontent .select2-container--default .select2-selection--single,
    .fincontentother .select2-container--default .select2-selection--single,
    .fincontentreport .select2-container--default .select2-selection--single {
        border-color: var(--clr-border) !important;
        border-radius: var(--radius-sm) !important;
        background: var(--clr-surface) !important;
    }

    .fincontent .select2-container--default.select2-container--focus .select2-selection--single,
    .fincontentother .select2-container--default.select2-container--focus .select2-selection--single,
    .fincontentreport .select2-container--default.select2-container--focus .select2-selection--single {
        border-color: var(--clr-amber) !important;
        box-shadow: 0 0 0 3px rgba(217,119,6,0.12) !important;
    }

    .fincontent .select2-container--default .select2-selection--single .select2-selection__rendered,
    .fincontentother .select2-container--default .select2-selection--single .select2-selection__rendered,
    .fincontentreport .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 12px !important;
        color: var(--clr-text) !important;
    }

    /* ============================================
   DEPOSIT / ADVANCE ROWS
   ============================================ */
    .fincontent .row[style*="background-color:#DFEFF0"],
    .fincontent .row[style*="background-color: #DFEFF0"] {
        background: var(--clr-amber-lt) !important;
        border-radius: var(--radius-sm) !important;
        padding-top: 6px !important;
        padding-bottom: 2px !important;
        margin-top: 6px !important;
    }

    /* ============================================
   SPAN AS FORM-CONTROL (ZRO / STD)
   ============================================ */
    .fincontent span.form-control,
    .fincontentother span.form-control,
    .fincontentreport span.form-control {
        background: var(--clr-surface2) !important;
        color: var(--clr-label) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    /* ============================================
   BOTTOM USER INFO BAR
   ============================================ */
    .fincontent .position-relative.bg-gray,
    .fincontentother .position-relative.bg-gray,
    .fincontentreport .position-relative.bg-gray {
        background: var(--clr-navy) !important;
        border-radius: var(--radius) !important;
        padding: 7px 16px !important;
        margin-top: 10px !important;
        margin-bottom: 16px !important;
        overflow: visible !important;
    }

        .fincontent .position-relative.bg-gray small,
        .fincontentother .position-relative.bg-gray small,
        .fincontentreport .position-relative.bg-gray small {
            color: rgba(255,255,255,0.70) !important;
            font-size: 11px !important;
        }

    .fincontent .ribbon,
    .fincontentother .ribbon,
    .fincontentreport .ribbon {
        background: var(--clr-amber) !important;
        font-size: 11px !important;
    }

    /* ============================================
   COLUMN FLEX — bottom-align all form-groups
   ============================================ */
    .fincontent .card-body > .row > [class*="col"],
    .fincontentother .card-body > .row > [class*="col"],
    .fincontentreport .card-body > .row > [class*="col"] {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }

    /* ============================================
   RADIO GROUP BOX
   ============================================ */
    .fincontent .radio-group,
    .fincontentother .radio-group,
    .fincontentreport .radio-group {
        display: flex !important;
        align-items: center !important;
        height: 31px !important;
        border: 1px solid var(--clr-border) !important;
        border-radius: var(--radius-sm) !important;
        background: var(--clr-amber-lt) !important;
        padding: 0 8px !important;
        gap: 16px !important;
        margin: 0 !important;
    }

        .fincontent .radio-group .custom-control,
        .fincontentother .radio-group .custom-control,
        .fincontentreport .radio-group .custom-control {
            min-height: unset !important;
            padding-left: 1.4rem !important;
            margin: 0 !important;
            flex-direction: row !important;
            justify-content: flex-start !important;
        }

        .fincontent .radio-group .custom-control-label,
        .fincontentother .radio-group .custom-control-label,
        .fincontentreport .radio-group .custom-control-label {
            font-size: 10px !important;
            font-weight: 700 !important;
            letter-spacing: 0.4px !important;
            white-space: nowrap !important;
            line-height: 1 !important;
            color: var(--clr-navy) !important;
        }

    /* ============================================
   Footer ribbon fix
   ============================================ */
    .fincontent .ribbon-wrapper,
    .fincontentother .ribbon-wrapper,
    .fincontentreport .ribbon-wrapper {
        overflow: visible !important;
    }

/* ============================================
   TABLE STYLES — Professional standalone
   Usage: add class="tbl-pro" to any <table>
   Works anywhere on the page
   ============================================ */

/* Base */
table.tbl-pro {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 12px !important;
    background: #ffffff !important;
}

    /* Header — inherits global table header style (Option C amber) */
    table.tbl-pro thead th {
        background: #fffbeb !important;
        background-color: #fffbeb !important;
        color: #92400e !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        padding: 8px 10px !important;
        border-bottom: 2px solid #d97706 !important;
        border-top: 1px solid #fde68a !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

        /* DataTables sort arrows */
        table.tbl-pro thead th.sorting::after,
        table.tbl-pro thead th.sorting_asc::after,
        table.tbl-pro thead th.sorting_desc::after {
            color: #d97706 !important;
            opacity: 1 !important;
        }

    /* Body rows */
    table.tbl-pro tbody tr {
        border-bottom: 1px solid #f0eeec !important;
        transition: background .1s !important;
    }

        table.tbl-pro tbody tr:nth-child(even) {
            background: #fafaf9 !important;
        }

        table.tbl-pro tbody tr:hover {
            background: #fffbeb !important;
        }

        /* Selected row */
        table.tbl-pro tbody tr.selected,
        table.tbl-pro tbody tr.active {
            background: #fef3c7 !important;
            border-left: 3px solid #d97706 !important;
        }

    /* Body cells */
    table.tbl-pro tbody td {
        padding: 6px 10px !important;
        color: #1c1917 !important;
        font-size: 12px !important;
        vertical-align: middle !important;
        border: none !important;
        border-bottom: 1px solid #f0eeec !important;
    }

    table.tbl-pro tbody th {
        padding: 6px 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #44403c !important;
        vertical-align: middle !important;
        border-bottom: 1px solid #f0eeec !important;
        white-space: nowrap !important;
    }

    /* Footer / totals row */
    table.tbl-pro tfoot tr {
        background: #f5f4f1 !important;
        border-top: 2px solid #d97706 !important;
    }

    table.tbl-pro tfoot th,
    table.tbl-pro tfoot td {
        padding: 6px 10px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #1c1917 !important;
        border: none !important;
    }

        /* Numeric right-align — add class="num" to td/th */
        table.tbl-pro td.num,
        table.tbl-pro th.num,
        table.tbl-pro tfoot td.num,
        table.tbl-pro tfoot th.num {
            text-align: right !important;
            font-variant-numeric: tabular-nums !important;
        }

    /* Muted cell */
    table.tbl-pro td.muted {
        color: #a8a29e !important;
    }

    /* Input inside cell */
    table.tbl-pro td .form-control,
    table.tbl-pro td .form-control-sm {
        height: 24px !important;
        font-size: 11px !important;
        padding: 1px 5px !important;
        border-color: #e7e5e4 !important;
    }

    /* Compact variant — class="tbl-pro tbl-compact" */
    table.tbl-pro.tbl-compact thead th {
        padding: 5px 8px !important;
    }

    table.tbl-pro.tbl-compact tbody td,
    table.tbl-pro.tbl-compact tbody th {
        padding: 3px 8px !important;
    }

    table.tbl-pro.tbl-compact tfoot th,
    table.tbl-pro.tbl-compact tfoot td {
        padding: 4px 8px !important;
    }

    /* Bordered variant — class="tbl-pro tbl-bordered" */
    table.tbl-pro.tbl-bordered td,
    table.tbl-pro.tbl-bordered th {
        border: 1px solid #e7e5e4 !important;
    }

    table.tbl-pro.tbl-bordered thead th {
        border-color: #5c5855 !important;
    }


/* ============================================
   DATATABLES — Professional table + export
   Uses existing Bootstrap/DataTables classes

/* ============================================
   ALL TABLES — global header style
   Applies to every table on every page
   with or without DataTables/export buttons
   ============================================ */
table thead th,
table thead td,
.table thead th,
.table thead td {
    background: #fffbeb !important;
    background-color: #fffbeb !important;
    color: #92400e !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 8px 10px !important;
    border-bottom: 2px solid #d97706 !important;
    border-top: 1px solid #fde68a !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

table tbody tr {
    transition: background .1s !important;
}

    table tbody tr:nth-child(even) {
        background-color: #fafaf9 !important;
    }

    table tbody tr:hover {
        background-color: #fffbeb !important;
    }

table tbody td,
table tbody th {
    font-size: 12px !important;
    padding: 6px 10px !important;
    vertical-align: middle !important;
    border-top: 1px solid #f0eeec !important;
    color: #1c1917 !important;
}

table tfoot th,
table tfoot td,
.table tfoot th,
.table tfoot td {
    background: #f5f4f1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 10px !important;
    border-top: 2px solid #d97706 !important;
    color: #1c1917 !important;
}

/* ============================================
   DATATABLES — Ultimate Professional Style
   ============================================ */

.dataTables_wrapper {
    font-size: 12px !important;
}

    /* Top bar layout: buttons left, search right */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dt-buttons {
        float: left !important;
        margin-bottom: 8px !important;
    }

    .dataTables_wrapper .dataTables_filter {
        float: right !important;
        margin-bottom: 8px !important;
        text-align: right !important;
    }

        .dataTables_wrapper .dataTables_filter label {
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            color: #78716c !important;
            text-transform: uppercase !important;
            letter-spacing: 0.3px !important;
            white-space: nowrap !important;
        }

        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #e7e5e4 !important;
            border-radius: 4px !important;
            font-size: 12px !important;
            padding: 0 8px !important;
            height: 28px !important;
            width: 180px !important;
            color: #1c1917 !important;
            background: #ffffff !important;
            transition: border-color .15s, box-shadow .15s !important;
            display: inline-block !important;
        }

            .dataTables_wrapper .dataTables_filter input:focus {
                border-color: #d97706 !important;
                box-shadow: 0 0 0 3px rgba(217,119,6,0.1) !important;
                outline: none !important;
            }

    /* Length dropdown */
    .dataTables_wrapper .dataTables_length label {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #78716c !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
    }

    .dataTables_wrapper .dataTables_length select {
        border: 1px solid #e7e5e4 !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        height: 28px !important;
        padding: 0 6px !important;
        color: #1c1917 !important;
        background: #ffffff !important;
        cursor: pointer !important;
    }

/* ---- Export buttons ---- */
.dt-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin-bottom: 8px !important;
}

    .dt-buttons .btn,
    .dt-buttons .btn-default,
    .dt-buttons .buttons-copy,
    .dt-buttons .buttons-csv,
    .dt-buttons .buttons-excel,
    .dt-buttons .buttons-pdf,
    .dt-buttons .buttons-print,
    .dt-buttons .buttons-colvis,
    div.dt-buttons > .btn,
    div.dt-buttons > a.btn {
        background: #fffbeb !important;
        border: 1px solid #d97706 !important;
        border-radius: 4px !important;
        color: #92400e !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 0 11px !important;
        height: 28px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        transition: all .12s !important;
        box-shadow: none !important;
        margin: 0 !important;
        cursor: pointer !important;
    }

        .dt-buttons .btn:hover,
        .dt-buttons .buttons-copy:hover,
        .dt-buttons .buttons-csv:hover,
        .dt-buttons .buttons-excel:hover,
        .dt-buttons .buttons-pdf:hover,
        .dt-buttons .buttons-print:hover,
        .dt-buttons .buttons-colvis:hover,
        div.dt-buttons > .btn:hover {
            background: #fffbeb !important;
            border-color: #d97706 !important;
            color: #92400e !important;
            box-shadow: none !important;
        }

        .dt-buttons .btn:active,
        div.dt-buttons > .btn:active {
            background: #fef3c7 !important;
            transform: scale(0.97) !important;
        }

    /* Color code export buttons */
    .dt-buttons .buttons-excel {
        color: #15803d !important;
        border-color: #bbf7d0 !important;
    }

        .dt-buttons .buttons-excel:hover {
            background: #f0fdf4 !important;
            border-color: #15803d !important;
            color: #14532d !important;
        }

    .dt-buttons .buttons-pdf {
        color: #b91c1c !important;
        border-color: #fecaca !important;
    }

        .dt-buttons .buttons-pdf:hover {
            background: #fff5f5 !important;
            border-color: #b91c1c !important;
            color: #7f1d1d !important;
        }

    .dt-buttons .buttons-print {
        color: #44403c !important;
    }

    .dt-buttons .buttons-colvis {
        color: #0369a1 !important;
        border-color: #bae6fd !important;
    }

        .dt-buttons .buttons-colvis:hover {
            background: #f0f9ff !important;
            border-color: #0369a1 !important;
            color: #0c4a6e !important;
        }

/* ---- Table header ---- */
table.dataTable thead > tr > th,
table.dataTable thead th {
    background: #fffbeb !important;
    background-color: #fffbeb !important;
    color: #92400e !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 9px 12px !important;
    border-bottom: 2px solid #fde68a !important;
    border-top: none !important;
    white-space: nowrap !important;
}

    table.dataTable thead th.sorting,
    table.dataTable thead th.sorting_asc,
    table.dataTable thead th.sorting_desc {
        background: #fffbeb !important;
        background-color: #fffbeb !important;
    }

table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    color: #d97706 !important;
    opacity: 1 !important;
}

/* ---- Table body ---- */
table.dataTable tbody tr {
    background-color: #ffffff !important;
    transition: background .1s !important;
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: #fafaf9 !important;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: #fffbeb !important;
}

table.dataTable tbody tr.selected {
    background-color: #fef3c7 !important;
    color: #1c1917 !important;
}

table.dataTable tbody td,
table.dataTable tbody th {
    font-size: 12px !important;
    padding: 6px 12px !important;
    vertical-align: middle !important;
    border-top: 1px solid #f0eeec !important;
    color: #1c1917 !important;
}

/* ---- Table footer ---- */
table.dataTable tfoot th,
table.dataTable tfoot td {
    background: #f5f4f1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 7px 12px !important;
    border-top: 2px solid #d97706 !important;
    color: #1c1917 !important;
}

/* ---- Bottom bar ---- */
.dataTables_wrapper .dataTables_info {
    font-size: 11px !important;
    color: #78716c !important;
    padding-top: 8px !important;
    float: left !important;
}

/* ---- Pagination ---- */
.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    padding-top: 4px !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 4px !important;
        padding: 3px 9px !important;
        border: 1px solid transparent !important;
        color: #44403c !important;
        background: transparent !important;
        cursor: pointer !important;
        margin: 0 1px !important;
        transition: all .12s !important;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #fffbeb !important;
            border-color: #fde68a !important;
            color: #1c1917 !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            background: #d97706 !important;
            border-color: #d97706 !important;
            color: #ffffff !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
            opacity: 0.35 !important;
            color: #a8a29e !important;
            cursor: default !important;
        }

/* Clearfix */
.dataTables_wrapper::after {
    content: '' !important;
    display: table !important;
    clear: both !important;
}


/* ============================================
   TABLE RESPONSIVE — definitive fix
   ============================================ */

/* Columns must not exceed their grid width */
.fincontent [class*="col-"],
.fincontentother [class*="col-"],
.fincontentreport [class*="col-"] {
    min-width: 0 !important;
}

/* table-responsive scrolls horizontally, clips width to column */
.table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
}

    /* Table inside wrapper — use natural content width so scroll works */
    .table-responsive > table,
    .table-responsive > .table {
        width: auto !important;
        min-width: 100% !important;
        max-width: none !important;
        margin-bottom: 0 !important;
    }

/* card-body table-responsive — no padding, scroll */
.card-body.table-responsive {
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Amber scrollbar */
.table-responsive::-webkit-scrollbar {
    height: 4px !important;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f5f4f1 !important;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #d97706 !important;
    border-radius: 2px !important;
}

    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #b45309 !important;
    }

/* ============================================
   EXCLUDE TABLE FROM SITEADV STYLES ONLY
   Usage: <table class="no-style">
   Bootstrap styles still apply normally
   ============================================ */
table.no-style thead th,
table.no-style thead td {
    background: #343a40 !important;
    background-color: #343a40 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #dee2e6 !important;
    border-top: 1px solid #dee2e6 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 0.75rem !important;
    white-space: normal !important;
    vertical-align: bottom !important;
}

table.no-style tbody tr {
    background-color: transparent !important;
    border-bottom: none !important;
    transition: none !important;
}

    table.no-style tbody tr:nth-child(even) {
        background-color: transparent !important;
    }

    table.no-style tbody tr:hover {
        background-color: rgba(0,0,0,0.075) !important;
    }

table.no-style tbody td,
table.no-style tbody th {
    font-size: 14px !important;
    padding: 0.75rem !important;
    vertical-align: top !important;
    border-top: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

table.no-style tfoot th,
table.no-style tfoot td {
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 0.75rem !important;
    border-top: 2px solid #dee2e6 !important;
    color: #212529 !important;
}