/* ============================================================================
   Modern compact theme — layer 1: design tokens + a re-skin of the Bootstrap 3
   / AdminLTE 2 primitives the app already uses.

   Nothing here changes markup. It restyles the classes the 700+ blade views
   already emit (.box, .btn, .form-control, .table, .modal, DataTables), so one
   file re-skins every page.

   Loaded last, after app.css / app-topbar.css / sidebar-icons.css, and only
   when config('constants.new_theme') is on — flip that off to get the old look
   back instantly.
   ========================================================================= */

:root {
    /* ---- Surfaces & text ---- */
    --c-bg: #f5f6f8;
    --c-surface: #ffffff;
    --c-surface-2: #f8fafc;
    --c-border: #e4e7ec;
    --c-border-strong: #d4d8e0;
    --c-text: #101828;
    --c-text-muted: #667085;

    /* ---- Brand & status (same blue family as skin-blue-light) ---- */
    --c-primary: #2563eb;
    --c-primary-dark: #1d4ed8;
    --c-primary-soft: #eff4ff;
    --c-success: #16a34a;
    --c-success-soft: #ecfdf3;
    --c-danger: #dc2626;
    --c-danger-soft: #fef3f2;
    --c-warning: #d97706;
    --c-warning-soft: #fffaeb;
    --c-info: #0891b2;
    --c-info-soft: #ecfeff;

    /* ---- Shape ---- */
    --r-card: 10px;
    --r-control: 8px;
    --r-pill: 999px;

    --sh-card: 0 1px 2px rgba(16, 24, 40, 0.05);
    --sh-raised: 0 4px 12px rgba(16, 24, 40, 0.08);
    --sh-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);

    /* ---- Compact density ---- */
    --h-control: 34px;
    --fs-base: 13px;
    --fs-sm: 12px;
    --pad-cell: 7px 10px;

    /* Latin + Bangla in one stack, so the bn build needs no separate rule */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', sans-serif;
}

/* Bangla needs more vertical room than Latin or the conjuncts (যুক্তাক্ষর) and
   the matra clip. Only applies when the user picked the bn locale. */
html[lang='bn'] body,
html[lang='bn'] .table > tbody > tr > td,
html[lang='bn'] .table > thead > tr > th,
html[lang='bn'] .btn,
html[lang='bn'] label,
html[lang='bn'] .dropdown-menu > li > a {
    line-height: 1.75;
}
html[lang='bn'] .btn {
    line-height: calc(var(--h-control) - 2px);
}
html[lang='bn'] .table > thead > tr > th {
    text-transform: none;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------- base ---- */
body {
    background: var(--c-bg);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
}
.content-wrapper {
    background: var(--c-bg);
}
a {
    color: var(--c-primary);
}
a:hover,
a:focus {
    color: var(--c-primary-dark);
}
.content-header > h1 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-text);
}
.content-header > h1 > small {
    font-size: 12.5px;
    color: var(--c-text-muted);
}
.content-header {
    padding: 14px 16px 6px;
}
.content {
    padding: 10px 16px;
}

/* --------------------------------------------------------------- cards ---- */
.box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-top: 1px solid var(--c-border) !important;
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    margin-bottom: 14px;
}
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-danger,
.box.box-warning,
.box.box-solid {
    border-top-color: var(--c-border) !important;
}
.box-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--c-border);
}
.box-header.with-border {
    border-bottom: 1px solid var(--c-border);
}
.box-header > .box-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
}
.box-body {
    padding: 14px;
}
.box-footer {
    background: var(--c-surface-2);
    border-top: 1px solid var(--c-border);
    border-radius: 0 0 var(--r-card) var(--r-card);
    padding: 10px 14px;
}

/* ------------------------------------------------------------- buttons ---- */
.btn {
    font-size: var(--fs-base);
    font-weight: 500;
    height: var(--h-control);
    padding: 0 14px;
    line-height: calc(var(--h-control) - 2px);
    border-radius: var(--r-control);
    border: 1px solid transparent;
    box-shadow: none;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.btn:focus,
.btn:active:focus {
    outline: none;
    box-shadow: var(--sh-focus);
}
.btn-lg {
    height: 40px;
    line-height: 38px;
    font-size: 14px;
    padding: 0 18px;
}
.btn-sm {
    height: 29px;
    line-height: 27px;
    font-size: var(--fs-sm);
    padding: 0 10px;
}
.btn-xs {
    height: 25px;
    line-height: 23px;
    font-size: 11.5px;
    padding: 0 8px;
    border-radius: 6px;
}
.btn-primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--c-primary-dark);
    border-color: var(--c-primary-dark);
}
.btn-success {
    background: var(--c-success);
    border-color: var(--c-success);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: #15803d;
    border-color: #15803d;
}
.btn-danger {
    background: var(--c-danger);
    border-color: var(--c-danger);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background: #b91c1c;
    border-color: #b91c1c;
}
.btn-warning {
    background: var(--c-warning);
    border-color: var(--c-warning);
    color: #fff;
}
.btn-info {
    background: var(--c-info);
    border-color: var(--c-info);
}
.btn-default {
    background: var(--c-surface);
    border-color: var(--c-border-strong);
    color: var(--c-text);
}
.btn-default:hover,
.btn-default:focus {
    background: var(--c-surface-2);
    border-color: var(--c-border-strong);
    color: var(--c-text);
}
.btn-link {
    height: auto;
    line-height: 1.4;
    padding: 0;
}

/* -------------------------------------------------------------- inputs ---- */
.form-control {
    height: var(--h-control);
    font-size: var(--fs-base);
    color: var(--c-text);
    padding: 0 11px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-control);
    box-shadow: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
textarea.form-control {
    height: auto;
    padding: 8px 11px;
    line-height: 1.5;
}
.form-control:focus {
    border-color: var(--c-primary);
    box-shadow: var(--sh-focus);
}
.form-control::placeholder {
    color: #98a2b3;
}
label,
.control-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: none;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
}
.form-group {
    margin-bottom: 12px;
}
.input-group-addon {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-control);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    padding: 0 10px;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.help-block {
    font-size: 11.5px;
    color: var(--c-text-muted);
}

/* select2 has its own markup — match it to .form-control */
.select2-container--default .select2-selection--single {
    height: var(--h-control);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-control);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--h-control) - 2px);
    font-size: var(--fs-base);
    color: var(--c-text);
    padding-left: 11px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--h-control) - 2px);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--c-primary);
    box-shadow: var(--sh-focus);
}
.select2-dropdown {
    border-color: var(--c-border-strong);
    border-radius: var(--r-control);
    box-shadow: var(--sh-raised);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--c-primary);
}

/* -------------------------------------------------------------- tables ---- */
/* The header is a label strip, not content: it stays a step smaller and tighter
   than the rows so a long list reads as data rather than as a stack of
   headings. */
.table > thead > tr > th {
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border) !important;
    border-top: 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding: 3px 7px;
    white-space: nowrap;
}
.table > tbody > tr > td {
    border-top: 1px solid var(--c-border);
    padding: var(--pad-cell);
    font-size: var(--fs-base);
    vertical-align: middle;
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--c-border);
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background: transparent;
}
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover {
    background: var(--c-primary-soft);
}
.table > tfoot > tr > td,
.table > tfoot > tr > th {
    background: var(--c-surface-2);
    border-top: 1px solid var(--c-border-strong);
    font-weight: 600;
    padding: var(--pad-cell);
}
/* Most total rows carry .font-17 (17px !important) and .bg-gray from the old
   theme — far too loud next to 13px table text. Keep them a notch above the
   body rows instead of a headline. */
.table > tfoot > tr.footer-total,
.table > tfoot > tr.font-17,
.table > tfoot > tr > td.font-17,
tr.footer-total > td,
tr.footer-total > th,
.font-17 {
    font-size: 13.5px !important;
}
.table > tfoot > tr.bg-gray,
.table > tfoot > tr.bg-gray > td,
tr.footer-total.bg-gray > td {
    background: var(--c-surface-2) !important;
    color: var(--c-text) !important;
}
.table > tfoot > tr > td strong,
tr.footer-total > td strong {
    font-weight: 600;
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 30px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-control);
    font-size: var(--fs-sm);
    padding: 0 9px;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
/* Export / Print / Column-visibility: icon-only everywhere. The label is a bare
   text node inside the button, so font-size:0 hides it and the icon gets its
   size back. common.js copies that label into title= for the tooltip. */
.dataTables_wrapper .dt-buttons {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 6px;
    vertical-align: middle;
}
.dataTables_wrapper .dt-buttons .btn {
    font-size: 0 !important;
    width: 34px;
    min-width: 34px;
    height: 32px;
    padding: 0 !important;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    color: var(--c-text-muted);
}
.dataTables_wrapper .dt-buttons .btn i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1;
}
.dataTables_wrapper .dt-buttons .btn:hover {
    background: var(--c-primary-soft);
    border-color: var(--c-primary);
    color: var(--c-primary-dark);
}
/* colvis opens its own panel — that one keeps its words */
.dt-button-collection .dt-button {
    font-size: var(--fs-base) !important;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 7px 12px !important;
    justify-content: flex-start;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 30px;
    height: 30px;
    line-height: 28px;
    padding: 0 9px !important;
    margin-left: 4px;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-control) !important;
    background: var(--c-surface) !important;
    color: var(--c-text) !important;
    font-size: var(--fs-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--c-surface-2) !important;
    color: var(--c-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.45;
}

/* ------------------------------------------------------ filter accordion ---- */
/* components.filters: a collapsed bar you click to open. Make it read as a
   control strip rather than an empty card. */
.filter-box > .box-header[data-toggle='collapse'] {
    padding: 9px 14px;
    border-bottom: 0;
    transition: background-color 0.14s ease;
}
.filter-box > .box-header[data-toggle='collapse']:hover {
    background: var(--c-surface-2);
}
.filter-box > .box-header[data-toggle='collapse'] .box-title {
    font-size: var(--fs-base);
    font-weight: 600;
}
.filter-box > .box-header[data-toggle='collapse'] .box-title {
    color: var(--c-text);
    text-decoration: none;
}
.filter-box > .box-header[data-toggle='collapse'] .box-title > i {
    color: var(--c-primary);
    margin-right: 4px;
}
/* Chevron that flips when the panel opens */
.filter-box > .box-header[data-toggle='collapse']::after {
    content: '\f107'; /* fa-angle-down */
    font-family: 'Font Awesome 5 Free', FontAwesome;
    font-weight: 900;
    float: right;
    margin-left: 8px;
    color: var(--c-text-muted);
    transition: transform 0.18s ease;
}
.filter-box > .box-header[data-toggle='collapse']:not(.collapsed)::after {
    transform: rotate(180deg);
}
.filter-box > .panel-collapse.in > .box-body {
    border-top: 1px solid var(--c-border);
    padding-top: 12px;
}

/* ------------------------------------------------- dropdowns & modals ---- */
.dropdown-menu {
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-raised);
    padding: 5px;
    font-size: var(--fs-base);
}
.dropdown-menu > li > a {
    border-radius: 6px;
    padding: 7px 10px;
    color: var(--c-text);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
}
.dropdown-menu .divider {
    margin: 5px 2px;
    background: var(--c-border);
}
.modal-content {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(16, 24, 40, 0.18);
}
.modal-header {
    border-bottom: 1px solid var(--c-border);
    padding: 14px 18px;
}
.modal-header .modal-title {
    font-size: 16px;
    font-weight: 600;
}
.modal-body {
    padding: 18px;
}
.modal-footer {
    border-top: 1px solid var(--c-border);
    padding: 12px 18px;
}

/* ------------------------------------------------- alerts, labels, tabs ---- */
.alert {
    border: 1px solid transparent;
    border-radius: var(--r-card);
    padding: 11px 14px;
    font-size: var(--fs-base);
}
.alert-danger {background: var(--c-danger-soft) !important;
    border-color: #fecdca !important;
    color: #912018 !important;
}
.alert-success {background: var(--c-success-soft) !important;
    border-color: #abefc6 !important;
    color: #085d3a !important;
}
.alert-warning {background: var(--c-warning-soft) !important;
    border-color: #fedf89 !important;
    color: #93370d !important;
}
.alert-info {background: var(--c-info-soft) !important;
    border-color: #a5f0fc !important;
    color: #0e7090 !important;
}
/* AdminLTE forces white text on alerts, which hides inline links */
.alert a,
.alert .alert-link {
    color: inherit !important;
    text-decoration: underline;
    font-weight: 600;
}
.label,
.badge {
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--r-pill);
    padding: 3px 9px;
    letter-spacing: 0.01em;
}
.label-success,
.bg-green {
    background: var(--c-success-soft) !important;
    color: #085d3a !important;
}
.label-danger,
.bg-red {
    background: var(--c-danger-soft) !important;
    color: #912018 !important;
}
.label-warning,
.bg-yellow {
    background: var(--c-warning-soft) !important;
    color: #93370d !important;
}
.label-info,
.bg-blue {
    background: var(--c-primary-soft) !important;
    color: var(--c-primary-dark) !important;
}
.nav-tabs-custom {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
}
.nav-tabs-custom > .nav-tabs {
    border-bottom: 1px solid var(--c-border);
    padding: 0 6px;
}
.nav-tabs-custom > .nav-tabs > li > a {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--c-text-muted);
    border: 0 !important;
    padding: 11px 14px;
    border-radius: 0;
}
.nav-tabs-custom > .nav-tabs > li.active > a {
    color: var(--c-primary);
    box-shadow: inset 0 -2px 0 var(--c-primary);
}
.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: transparent !important;
}

/* ------------------------------------------------------------- sidebar ---- */
.skin-blue-light .main-sidebar,
.skin-blue-light .left-side {
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
}
.sidebar-menu > li > a {
    font-size: var(--fs-base);
    color: #475467;
    border-radius: 8px;
    margin: 1px 8px;
}
.skin-blue-light .sidebar-menu > li > a {
    border-left: 0 !important;
}
.skin-blue-light .sidebar-menu > li:hover > a,
.skin-blue-light .sidebar-menu > li.active > a {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
}
.skin-blue-light .sidebar-menu > li.active {
    border-left-color: transparent;
}
.sidebar-menu .treeview-menu {
    background: transparent !important;
}
.sidebar-menu .treeview-menu > li > a {
    font-size: 12.5px;
    color: #667085;
    border-radius: 6px;
    margin: 1px 8px 1px 16px;
}
.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li > a:hover {
    background: var(--c-surface-2);
    color: var(--c-primary-dark);
}

/* ============================================================ motion ====
   Small, cheap feedback: everything animates transform/opacity/colour only, so
   it stays smooth on the low-end Android phones the shops actually use.
   Anyone who asked their OS for less motion gets none of it (bottom of block).
   ======================================================================= */

/* ---- buttons: lift on hover, press down on click ---- */
.btn {
    transition: background 0.14s ease, border-color 0.14s ease,
        color 0.14s ease, box-shadow 0.16s ease, transform 0.12s ease;
    will-change: transform;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-raised);
}
.btn:active,
.btn.active {
    transform: translateY(0) scale(0.985);
    box-shadow: none;
    transition-duration: 0.06s;
}
.btn-link:hover {
    transform: none;
    box-shadow: none;
}

/* ---- table rows: colour fades in, active row gets a left accent ---- */
.table > tbody > tr {
    transition: background-color 0.15s ease;
}
@media (min-width: 768px) {
    .table > tbody > tr > td:first-child {
        box-shadow: inset 0 0 0 rgba(37, 99, 235, 0);
        transition: box-shadow 0.16s ease;
    }
    .table > tbody > tr:hover > td:first-child {
        box-shadow: inset 3px 0 0 var(--c-primary);
    }
}
/* Sortable headers should feel clickable */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}
table.dataTable thead th.sorting:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
}

/* ---- sidebar: nudge right, icon pops ---- */
.sidebar-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
    transition: background-color 0.15s ease, color 0.15s ease,
        transform 0.15s ease;
}
.sidebar-menu > li > a:hover,
.sidebar-menu .treeview-menu > li > a:hover {
    transform: translateX(2px);
}
.sidebar-menu-icon {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease;
}
.sidebar-menu > li > a:hover .sidebar-menu-icon {
    transform: scale(1.08);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
}
.sidebar-menu .treeview-menu {
    transition: none;
}

/* ---- menus & modals: fade + slide in instead of snapping ---- */
@keyframes rp-menu-in {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.open > .dropdown-menu,
.dt-button-collection {
    animation: rp-menu-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top center;
}
.modal.fade .modal-dialog {
    transform: translateY(-14px) scale(0.99);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal.in .modal-dialog {
    transform: none;
}

/* ---- cards & tiles: dashboard tiles feel clickable, plain boxes don't ---- */
.small-box,
.info-box {
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.small-box:hover,
.info-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-raised);
}
.small-box .icon {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.small-box:hover .icon {
    transform: scale(1.08) rotate(-4deg);
}

/* ---- inputs, links, tabs, pagination ---- */
.form-control,
.select2-container--default .select2-selection--single {
    transition: border-color 0.14s ease, box-shadow 0.16s ease;
}
a {
    transition: color 0.12s ease;
}
.nav-tabs-custom > .nav-tabs > li > a {
    transition: color 0.15s ease, box-shadow 0.18s ease;
}
.nav-tabs-custom > .nav-tabs > li > a:hover {
    color: var(--c-primary);
    box-shadow: inset 0 -2px 0 var(--c-border-strong);
}
.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination > li > a {
    transition: background-color 0.14s ease, color 0.14s ease,
        transform 0.12s ease, box-shadow 0.14s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled),
.pagination > li > a:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-card);
}
.dropdown-menu > li > a {
    transition: background-color 0.12s ease, color 0.12s ease,
        padding-left 0.14s ease;
}
.dropdown-menu > li > a:hover {
    padding-left: 13px;
}

/* Keyboard users get a visible ring even where the mouse styles are subtle */
.btn:focus-visible,
.form-control:focus-visible,
.dropdown-menu > li > a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover,
    .small-box:hover,
    .info-box:hover,
    .sidebar-menu > li > a:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        transform: none;
    }
}

/* --------------------------------------------------------- scrollbars ---- */
/* Thin modern scrollbars — matters most on the horizontally scrolled tables */
.table-responsive::-webkit-scrollbar,
.dataTables_wrapper::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.table-responsive::-webkit-scrollbar-thumb,
.dataTables_wrapper::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #cbd2dd;
    border-radius: var(--r-pill);
}
.table-responsive::-webkit-scrollbar-thumb:hover,
.dataTables_wrapper::-webkit-scrollbar-thumb:hover {
    background: #aab3c0;
}
.table-responsive::-webkit-scrollbar-track,
.dataTables_wrapper::-webkit-scrollbar-track {
    background: transparent;
}

/* ------------------------------------------------------------- mobile ---- */
@media (max-width: 767px) {
    .content-header {
        padding: 10px 10px 4px;
    }
    .content-header > h1 {
        font-size: 17px;
    }
    .content {
        padding: 8px 10px;
    }
    .box-body {
        padding: 11px;
    }
    .box {
        margin-bottom: 10px;
    }

    /* Tables scroll sideways instead of squeezing/wrapping the columns */
    .table-responsive,
    .dataTables_wrapper,
    .dataTables_scrollBody {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border: 0;
        width: 100%;
    }
    .table > thead > tr > th,
    .table > tbody > tr > td,
    .table > tfoot > tr > td,
    .table > tfoot > tr > th {
        white-space: nowrap;
    }
    /* Cell content that would otherwise force a wrap (badges, small notes) */
    .table > tbody > tr > td .label,
    .table > tbody > tr > td .badge {
        white-space: nowrap;
    }

    /* Keep the first column (Action / Name) pinned while the rest scrolls */
    .table-responsive > .table > thead > tr > th:first-child,
    .table-responsive > .table > tbody > tr > td:first-child,
    .table-responsive > .table > tfoot > tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--c-surface);
        box-shadow: 1px 0 0 var(--c-border);
    }
    .table-responsive > .table > thead > tr > th:first-child {
        background: var(--c-surface-2);
        z-index: 3;
    }
    .table-responsive > .table > tfoot > tr > td:first-child {
        background: var(--c-surface-2);
    }
    .table-responsive > .table > tbody > tr:hover > td:first-child {
        background: var(--c-primary-soft);
    }

    /* A scrolling container clips anything absolutely positioned inside it, and
       the row Actions menu lives in the first column. Fixed with auto offsets
       keeps the menu where it visually belongs but outside the clip. */
    .table-responsive .btn-group.open > .dropdown-menu,
    .dataTables_wrapper .btn-group.open > .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1060;
    }
    /* select2 menus inside a scrolling table (payment rows, modals) would be
       clipped the same way; let the container spill while one is open. */
    .table-responsive:has(.select2-container--open) {
        overflow: visible;
    }
    /* ...and lift the sticky cell it sits in above its neighbours, or the other
       pinned cells (same z-index, later in the DOM) paint over the menu. */
    .table-responsive > .table > tbody > tr > td:first-child:has(.btn-group.open) {
        z-index: 1061;
    }

    /* DataTables toolbar stacks instead of colliding */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: left;
        margin-bottom: 8px;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
    }
    /* Icon-only comes from the base rules; on a phone just centre the strip */
    .dataTables_wrapper .dt-buttons {
        display: flex;
        justify-content: center;
        /* "safe" keeps the first button reachable if the strip ever overflows */
        justify-content: safe center;
        margin-bottom: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        margin-top: 8px;
    }
    .dataTables_wrapper .dataTables_info {
        text-align: center;
    }

    /* Filter/action rows: buttons full width rather than cramped side by side */
    .content .box-body > .row > [class*='col-'] > .btn,
    .content .box-body > .row > [class*='col-'] > div > .btn.pull-right {
        float: none !important;
        width: 100%;
        margin: 4px 0 0 0 !important;
    }

    .modal-dialog {
        margin: 8px;
    }
    .modal-body {
        padding: 14px;
    }
}

/* -------------------------------------------------------------- misc ---- */
.pagination > li > a,
.pagination > li > span {
    border-color: var(--c-border);
    color: var(--c-text);
    border-radius: var(--r-control) !important;
    margin-left: 4px;
    font-size: var(--fs-sm);
}
.pagination > .active > a,
.pagination > .active > span {
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.small-box {
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
}
.progress {
    border-radius: var(--r-pill);
    box-shadow: none;
    background: var(--c-border);
}
hr {
    border-top-color: var(--c-border);
}

/* An action button parked on a tab row (e.g. Reports on Payment Accounts) —
   the tab strip is an <ul>, so the <li> needs to stop behaving like a tab. */
.nav-tabs-custom > .nav-tabs > li.accounts-tab-action,
.nav-tabs-custom > .nav-tabs > li.nav-tab-action {
    border-top: 0 !important;
    margin: 0;
    padding: 6px 10px 0 0;
}
.nav-tabs-custom > .nav-tabs > li.accounts-tab-action > .btn,
.nav-tabs-custom > .nav-tabs > li.nav-tab-action > .btn {
    margin: 0;
}