/* ========================================
   POSGTX CUSTOM OVERRIDES - MAXIMUM PRIORITY
   These styles MUST override everything else
   ======================================== */



.nav-header,
.nav-header .brand-logo {
    display: flex !important;
    align-items: center !important;
}
.nav-header .logo-abbr {
    height: 44px !important;
    width: auto !important;
}


/* ----- Row Selection with Maximum Specificity ----- */
table.dataTable.table tbody tr:hover,
table.dataTable.table tbody tr:hover>* {
    background-color: rgba(62, 195, 150, 0.1) !important;
}

table.dataTable.table tbody tr.selected,
table.dataTable.table tbody tr.selected>* {
    background-color: rgba(62, 195, 150, 0.25) !important;
    box-shadow: inset 0 0 0 0 #3ec396 !important;
}

table.dataTable.table tbody tr.selected td {
    color: #000 !important;
}

table.dataTable.table tbody tr a,
table.dataTable.table tbody tr.selected a,
table.dataTable.table tbody tr:hover a {
    color: #0d6efd !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* ----- FORCE FIXED TABLE LAYOUT ----- */
.table-responsive table.dataTable,
.card-body table.dataTable,
table.dataTable {
    width: 100% !important;
    table-layout: auto !important;
    /* Changed to auto for dynamic content */
    max-width: 100% !important;
}

table.dataTable thead th,
table.dataTable tbody td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Fix header alignment */
.dataTables_wrapper .dataTables_scrollHead {
    overflow: visible !important;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
}

/* ----- PAGINATION: NUCLEAR OPTION WITH INLINE STYLES ----- */

/* Kill all existing pagination styles first */
.dataTables_wrapper .dataTables_paginate * {
    all: unset;
    box-sizing: border-box;
}

/* Rebuild pagination from scratch */
.dataTables_wrapper .dataTables_paginate {
    display: block !important;
    padding-top: 1rem !important;
    text-align: right !important;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    display: inline-flex !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Every pagination button */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate a.paginate_button,
.dataTables_wrapper .dataTables_paginate span.paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    max-width: 35px !important;
    max-height: 35px !important;
    border-radius: 50% !important;
    border: 1px solid #e0e0e0 !important;
    background: white !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 35px !important;
}

/* Hover state - MUST show */
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover {
    background: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* CURRENT/ACTIVE page - THIS IS THE CRITICAL ONE */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate span.paginate_button.current {
    background: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
    font-weight: 600 !important;
    cursor: default !important;
}

/* Force current button to show white text */
.dataTables_wrapper .dataTables_paginate .current * {
    color: white !important;
}

/* Disabled buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    color: #ccc !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Ellipsis */
.dataTables_wrapper .dataTables_paginate .ellipsis {
    background: transparent !important;
    border: none !important;
    cursor: default !important;
}

/* ========================================
   PRINT STYLES — @media print
   Applied to regular layout pages only.
   The dedicated ventas/print page (print.php)
   is self-contained and does not use these.
   2025-05-18
   ======================================== */
@media print {

    /* Hide all UI chrome */
    .page-title,
    .navbar,
    .sidebar,
    #sidebar,
    .nav-header,
    .deznav,
    .footer,
    footer,
    .card-footer,
    .btn,
    .modal,
    [data-bs-toggle],
    .alert,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info {
        display: none !important;
    }

    /* Clean cards */
    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }

    /* Status bars: keep them, strip background */
    #ventas-statusbar,
    #ver-statusbar {
        background: transparent !important;
    }

    /* Force colour rendering for badge backgrounds */
    * {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ── 2026-06-07: px-subnav — pill-style module submenu tabs ─────────────── */
/* Replaces nav-underline which only shows a 2px line on the active item,
   making inactive items look like plain text rather than clickable tabs.   */
.px-subnav {
    gap: 4px;
    flex-wrap: wrap;
    padding-bottom: 0;
}

.px-subnav .nav-link {
    font-size: .84rem;
    font-weight: 500;
    color: #4b5563;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 14px;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}

.px-subnav .nav-link:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #cbd5e1;
}

.px-subnav .nav-link.active {
    background: var(--bs-primary, #3b82f6);
    color: #fff;
    border-color: var(--bs-primary, #3b82f6);
    font-weight: 600;
}

/* ── 2026-06-22: Remove number input spinners app-wide ─────────────────────
   Spinners (steppers) on <input type="number"> add visual noise and slow
   down data entry — especially for price/qty fields where the user always
   types the value directly. Removed globally here; individual views that
   legitimately need steppers can add them back with a scoped class. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ── 2026-06-30: Fix sidebar height resolving against viewport instead of
   page content — root cause of "missing footer" on short-content pages ──
   .deznav (the left sidebar) is position:absolute with a percentage height,
   but no ancestor in the base theme establishes a containing block via
   position:relative. Per CSS spec, that means .deznav's height resolves
   against the viewport (the initial containing block) instead of
   #main-wrapper — so on short pages the sidebar stretches to the browser
   window's height rather than the page's actual content height, and since
   it's still anchored to the document (not truly fixed), it inflates the
   page's total scrollable height, pushing/burying the footer below it.
   Adding position:relative here gives .deznav the correct containing block
   (#main-wrapper, whose height is governed by its actual content — header +
   page content + footer) without moving anything else, since
   position:relative with no offsets doesn't reposition the element itself,
   it only establishes a new positioning context for absolutely-positioned
   descendants. */
#main-wrapper {
    position: relative;
}