/* DataTable footer: the entry count and the pager share one row. They used to be
       two sibling block-level divs stacked on top of each other, which cost a whole
       line under every table. Flex, not floats — floats would need a clearfix and
       still collapse the row height. */
    .dt-footer {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; flex-wrap: wrap; margin-top: 6px;
    }
    .dt-footer .dataTables_info {
        padding: 0; margin: 0; float: none; white-space: nowrap;
    }
    .dt-footer .dataTables_paginate {
        margin: 0; padding: 0; float: none;
    }
    .dt-footer .dataTables_paginate .pagination { margin: 0; }
    /* One page of results -> the pager hides itself, so the count centres oddly on
       its own; keep it left-aligned either way. */
    .dt-footer > :only-child { margin-right: auto; }
    /* Horizontal scrolling: only the table moves (dom "dt-scroll" in common.js), and the
       .table-responsive frame around it stops scrolling, so the scrollbar sits directly
       under the rows with the count and the page numbers BELOW it (mekhea.com/products,
       2026-10-03: the bar used to run under the pager). */
    .dt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* The page around its cards: 8px from the screen edge, the same small gap the card
       keeps around its table (owner 2026-11-05: "the card also smaller gap from the
       screen"). AdminLTE's section padding was 15px. */
    section.content, section.content-header { padding-left: 8px !important; padding-right: 8px !important; }

    /* The pager (owner 2026-11-05): soft rounded page buttons, the current one filled
       blue with a thin border, and round chevron buttons for previous / next. */
    .dataTables_wrapper .dataTables_paginate { display: inline-flex; align-items: center; gap: 4px; }
    .dataTables_wrapper .dataTables_paginate span { display: inline-flex; align-items: center; gap: 4px; }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 32px; height: 32px; padding: 0 9px !important; margin: 0 !important;
        display: inline-flex !important; align-items: center; justify-content: center;
        border: 1px solid transparent !important; border-radius: 9px !important;
        background: transparent !important; box-shadow: none !important;
        color: var(--mk-slate-700, #334155) !important; font-size: 13px; font-weight: 600; line-height: 1;
        transition: background .15s, color .15s, border-color .15s; }
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: linear-gradient(180deg, #3b82f6, #2563eb) !important; color: #fff !important;
        border: 1px solid #1d4ed8 !important; box-shadow: 0 2px 6px rgba(37,99,235,.35) !important; }
    /* previous / next: a round chevron, the word hidden */
    .dataTables_wrapper .dataTables_paginate .paginate_button:is(.previous, .next) {
        width: 32px; min-width: 32px; padding: 0 !important; font-size: 0 !important;
        border-radius: 50% !important; background: #fff !important; border: 1px solid var(--mk-slate-200, #e2e8f0) !important;
        box-shadow: 0 1px 2px rgba(15,23,42,.08) !important; }
    .dataTables_wrapper .dataTables_paginate .paginate_button:is(.previous, .next)::before {
        font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 12px; color: #2563eb; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.previous::before { content: '\f053'; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.next::before { content: '\f054'; }
    .dataTables_wrapper .dataTables_paginate .paginate_button:is(.previous, .next):hover {
        background: #2563eb !important; border-color: #2563eb !important; }
    .dataTables_wrapper .dataTables_paginate .paginate_button:is(.previous, .next):hover::before { color: #fff; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        opacity: .4; cursor: default; background: #fff !important; border-color: var(--mk-slate-200, #e2e8f0) !important; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled::before { color: var(--mk-slate-400, #94a3b8) !important; }
    .dataTables_wrapper .dataTables_paginate .ellipsis { padding: 0 4px; color: var(--mk-slate-400, #94a3b8); }
    .table-responsive:has(> .dataTables_wrapper > .dt-scroll) { overflow-x: visible; }