.custom-filter .input-text{
    background-color: var(--bs-gray-100);
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: var(--bs-gray-300);
    border-radius: .425rem 0 0 .425rem;
    padding: .55rem;
}
.custom-filter .form-select-sm{
    border-radius: 0 .425rem .425rem 0;
}
.muted{
    filter: grayscale(1);
}
/*---------table----------*/
.table-responsive{

}
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>*{
    box-shadow: none !important;
    background-color: var(--bs-gray-100, rgba(59, 125, 221, 0.08));
}
table.table.dataTable.table-hover>tbody>tr:hover>*{
    cursor: pointer;
    box-shadow: none !important;
    background-color: var(--bs-gray-200, rgba(59, 125, 221, 0.08)) !important;
}


#table_invoice_tickets{
    width: 100%;
}
#table_invoice_tickets td,
#table_invoice_tickets th{
    white-space: nowrap;
}
#table_invoice_tickets .btn {
    text-transform: none;
    letter-spacing: 0;
}

#table_invoice_tickets .form-check-input[type=checkbox] {
    border-radius: .35em;
}

#table_invoice_tickets .form-check-input,
.fixedHeader-floating .form-check-input {
    width: 18px !important;
    height: 18px !important;
    margin-bottom: 0;
    margin-top: 2px;
}

#table_invoice_tickets th:last-child {
    border-radius: 0;
}
#table_invoice_tickets_wrapper .table-responsive {
    min-height: 75vh;
}

.buttons-csv{
    min-width: 100px;
}

/* ── DataTables Export Buttons — Bitkern Global Override ─────────── */
.dt-buttons .btn.buttons-csv,
.dt-buttons .btn.buttons-excel,
.dt-buttons .btn.buttons-pdf,
.dt-buttons .btn.buttons-html5,
.dt-buttons .btn.buttons-print,
.dt-buttons .dt-button {
    background-color: var(--bs-light) !important;
    border: 1px solid var(--bs-gray-300) !important;
    color: var(--bs-light-inverse) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
.dt-buttons .btn.buttons-csv:hover,
.dt-buttons .btn.buttons-excel:hover,
.dt-buttons .btn.buttons-pdf:hover,
.dt-buttons .btn.buttons-html5:hover,
.dt-buttons .dt-button:hover {
    background-color: var(--bs-light-active) !important;
}

/* ── DataTables Export Buttons in Dropdown-Menüs (lite/transactions) */
.dt-buttons .btn.menu-item {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
}

/* ── Toolbar Button-Höhe normalisieren ───────────────────────────── */
#kt_app_toolbar .dt-buttons,
#kt_app_toolbar .dt-buttons.btn-group {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}
#kt_app_toolbar .btn-sm,
#kt_app_toolbar .dt-buttons .btn {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* ── Globale Checkboxen ──────────────────────────────────────────── */
.form-check {
    padding: 0;
    margin: 0;
    min-height: unset;
    display: flex;
    align-items: center;
}

.dtfh-floatingparent {
    box-shadow: none;
    margin-top: -20px;
}
/*------date picker-------*/
.daterangepicker .drp-buttons .btn{
    font-size: 0.8rem !important;
}
.daterangepicker .drp-selected{
    font-size: 1rem !important;
}
.daterangepicker .drp-calendar td.today, .daterangepicker .drp-calendar td.today.active{
   background-color: var(--bs-gray-300) !important;
}
.daterangepicker .drp-calendar td.today, .daterangepicker .drp-calendar td.today.active{
    background-color: var(--bs-gray-300) !important;
    color: var(--bs-text-white);
}

/*---------badge--------*/

/* White badge — for use on coloured or dark-gradient surfaces */
.badge-white {
    background-color: #ffffff;
    color: var(--bs-gray-800);
}
.badge-white.badge-outline {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
}
[data-bs-theme="dark"] .badge-white {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--bs-gray-500);
}
[data-bs-theme="dark"] .badge-white.badge-outline {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--bs-gray-500);
}

.custom-badge{
    position: absolute;
    top: -7px;
    right: -7px;
}
.badge-label{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-38%, -150%) rotate(45deg);
    transform-origin: center;
    white-space: nowrap;
    z-index: 2;
    line-height: 1;
    padding-bottom: 2px;
}

/*----Products-----*/
.line-through{
    text-decoration: line-through;
    text-decoration-color: #d9232a;
}
.price-sale{
    color: #d9232a;
}

.invoice-items-table-wrapper{
    width: 100%;
}
@media all and (max-width: 768px){
    .invoice-items-table-wrapper{
       overflow-x: auto;
        --webkit-overflow-scrolling: touch;
    }
    .invoice-items-table-wrapper table{
        min-width: 560px;
    }
}
table thead .sorting,
table thead .sorting_asc,
table thead .sorting_desc {
    padding-right: 20px !important;
    background-position: right 4px center !important;
}

/* ── Responsive App Header ──────────────────────────────────────── */
.w-75px { width: 75px !important; }

@media (min-width: 576px) {
    .w-sm-90px { width: 90px !important; }
}

@media (max-width: 575.98px) {
    #kt_app_header .app-navbar {
        flex-wrap: nowrap;
        overflow: hidden;
    }
    #kt_app_header .app-navbar-item {
        flex-shrink: 0;
    }
    #kt_app_header #kt_header_search {
        min-width: 0;
        flex-shrink: 1;
    }
    /* Client header: compact BTC area on xs */
    #kt_app_header .app-navbar-item.flex-grow-1 {
        flex-grow: 1 !important;
        min-width: 0;
        overflow: hidden;
    }
    #kt_app_header .app-navbar-item.flex-grow-1 .me-sm-3 {
        margin-right: 0.25rem !important;
    }
    #kt_app_header .app-navbar-item.flex-grow-1 a.me-3 {
        margin-right: 0.25rem !important;
    }
    /* Reduce spacing between navbar items on xs */
    #kt_app_header .app-navbar-item.ms-1 {
        margin-left: 0.15rem !important;
    }
    /* Currency selector compact */
    #kt_app_header #currency_select {
        width: 70px !important;
    }
    #kt_app_header .app-navbar-item.ms-1.ms-md-3.me-5 {
        margin-right: 0.5rem !important;
    }
    /* Cart icon size */
    #kt_app_header .cart-toggle-btn .bi-cart4 {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 767.98px) {
    #kt_app_header .app-container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    #kt_app_header .app-header-primary .app-container {
        padding-top: 0.75rem !important;
    }
    /* Hide BTC label text on small tablets */
    #kt_app_header .app-navbar-item.flex-grow-1 .me-sm-3 .d-none.d-sm-block {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    /* Admin/Employee: ensure navbar items don't overflow */
    #kt_app_header #kt_app_header_navbar {
        justify-content: flex-end;
    }
    #kt_app_header #kt_app_header_navbar .app-navbar-item:first-child {
        flex-grow: 0;
    }
}

/* ─── Brand primary token ───────────────────────────────────────────────────── */
/* Light mode: dark navy — used for nav-link active indicators, active text, etc. */
:root {
    --bs-primary:     #1b374c;
    --bs-primary-rgb: 27, 55, 76;

    /* btn-secondary → brand primary (dark navy) */
    --bk-btn-secondary-bg:          #1b374c;
    --bk-btn-secondary-hover-bg:    #243f57;
    --bk-btn-secondary-active-bg:   #142837;
    --bk-btn-secondary-color:       #ffffff;
    --bk-btn-secondary-disabled-bg: rgba(27, 55, 76, 0.40);
}

/* ─── Nav line-tabs: active state ───────────────────────────────────────────── */
/* Ensures .nav-link.active uses the brand primary in both modes */
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs.nav-tabs .nav-item .nav-link.active {
    color:              var(--bs-primary) !important;
    border-bottom-color: var(--bs-primary) !important;
}

/* ─── Dark mode: align header + sidebars with body background (#191b20 via --bs-body-bg) ── */
[data-bs-theme="dark"] #kt_app_header {
    background-color: var(--bs-body-bg);
    border-bottom: none;
    box-shadow: none;
}

[data-bs-theme="dark"] #kt_app_sidebar:not(.app-sidebar-client) {
    background-color: var(--bs-body-bg);
}

/* ─── Dark mode: tokens ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    /* Primary — steel-blue, readable on dark backgrounds */
    --bs-primary:     #829ca9;
    --bs-primary-rgb: 130, 156, 169;

    /* Info / Sent badge — slate-blue */
    --bk-info-badge-color:       #7a9cc6;
    --bk-info-badge-bg:          rgba(122, 156, 198, 0.12);
    --bk-info-badge-border:      rgba(122, 156, 198, 0.25);

    /* Primary CTA button — Bitkern Highlight Green */
    --bk-btn-primary-bg:         #4ac957;
    --bk-btn-primary-color:      #1b374c;
    --bk-btn-primary-hover-bg:   #3db84a;
    --bk-btn-primary-active-bg:  #34a040;
    --bk-btn-primary-disabled-bg: rgba(74, 201, 87, 0.40);

    /* btn-secondary → brand primary (steel-blue) */
    --bk-btn-secondary-bg:          #829ca9;
    --bk-btn-secondary-hover-bg:    #96adb9;
    --bk-btn-secondary-active-bg:   #6e8896;
    --bk-btn-secondary-color:       #ffffff;
    --bk-btn-secondary-disabled-bg: rgba(130, 156, 169, 0.40);
}

[data-bs-theme="dark"] .badge-light-success {
    color:            var(--bk-info-badge-color);
    background-color: var(--bk-info-badge-bg);
    border-color:     var(--bk-info-badge-border);
}

[data-bs-theme="dark"] .badge-light-info {
    color:            var(--bk-info-badge-color);
    background-color: var(--bk-info-badge-bg);
    border-color:     var(--bk-info-badge-border);
}

[data-bs-theme="dark"] .text-info {
    color: var(--bk-info-badge-color) !important;
}

[data-bs-theme="dark"] .border-info {
    border-color: var(--bk-info-badge-border) !important;
}

/* ─── Dark mode: .btn-primary — Bitkern Highlight Green as primary CTA ─────── */

/* Bootstrap layer — override CSS custom properties */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg:                    var(--bk-btn-primary-bg);
    --bs-btn-border-color:          var(--bk-btn-primary-bg);
    --bs-btn-color:                 var(--bk-btn-primary-color);
    --bs-btn-hover-bg:              var(--bk-btn-primary-hover-bg);
    --bs-btn-hover-border-color:    var(--bk-btn-primary-hover-bg);
    --bs-btn-hover-color:           var(--bk-btn-primary-color);
    --bs-btn-active-bg:             var(--bk-btn-primary-active-bg);
    --bs-btn-active-border-color:   var(--bk-btn-primary-active-bg);
    --bs-btn-active-color:          var(--bk-btn-primary-color);
    --bs-btn-disabled-bg:           var(--bk-btn-primary-disabled-bg);
    --bs-btn-disabled-border-color: var(--bk-btn-primary-disabled-bg);
    --bs-btn-disabled-color:        var(--bk-btn-primary-color);
    --bs-btn-focus-shadow-rgb:      74, 201, 87;
}

/* Metronic layer — normal state */
[data-bs-theme="dark"] .btn.btn-primary {
    background-color: var(--bk-btn-primary-bg);
    border-color:     var(--bk-btn-primary-bg);
    color:            var(--bk-btn-primary-color);
}

[data-bs-theme="dark"] .btn.btn-primary .svg-icon,
[data-bs-theme="dark"] .btn.btn-primary i {
    color: var(--bk-btn-primary-color);
}

/* Metronic layer — hover + focus (grouped, matches Metronic selector pattern) */
[data-bs-theme="dark"] .btn-check:active  + .btn.btn-primary,
[data-bs-theme="dark"] .btn-check:checked + .btn.btn-primary,
[data-bs-theme="dark"] .btn.btn-primary.active,
[data-bs-theme="dark"] .btn.btn-primary.show,
[data-bs-theme="dark"] .btn.btn-primary:focus:not(.btn-active),
[data-bs-theme="dark"] .btn.btn-primary:hover:not(.btn-active),
[data-bs-theme="dark"] .show > .btn.btn-primary {
    background-color: var(--bk-btn-primary-hover-bg) !important;
    border-color:     var(--bk-btn-primary-hover-bg) !important;
}

/* Metronic layer — active/pressed (slightly darker, overrides hover group above) */
[data-bs-theme="dark"] .btn.btn-primary:active:not(.btn-active) {
    background-color: var(--bk-btn-primary-active-bg) !important;
    border-color:     var(--bk-btn-primary-active-bg) !important;
}

/* Metronic layer — disabled */
[data-bs-theme="dark"] .btn.btn-primary:disabled,
[data-bs-theme="dark"] .btn.btn-primary.disabled {
    background-color: var(--bk-btn-primary-disabled-bg) !important;
    border-color:     var(--bk-btn-primary-disabled-bg) !important;
    color:            var(--bk-btn-primary-color)        !important;
    opacity:          0.65;
}

/* ─── btn-primary → success (green) / btn-secondary → brand primary ──────── */

/* Bootstrap layer: CSS custom properties for btn-primary → success */
.btn-primary {
    --bs-btn-bg:                    var(--bs-success);
    --bs-btn-border-color:          var(--bs-success);
    --bs-btn-color:                 var(--bs-success-inverse);
    --bs-btn-hover-bg:              var(--bs-success-active);
    --bs-btn-hover-border-color:    var(--bs-success-active);
    --bs-btn-hover-color:           var(--bs-success-inverse);
    --bs-btn-active-bg:             var(--bs-success-active);
    --bs-btn-active-border-color:   var(--bs-success-active);
    --bs-btn-active-color:          var(--bs-success-inverse);
    --bs-btn-disabled-bg:           var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
    --bs-btn-disabled-color:        var(--bs-success-inverse);
    --bs-btn-focus-shadow-rgb:      var(--bs-success-rgb);
}

/* Metronic layer: normal state */
.btn.btn-primary {
    background-color: var(--bs-success);
    border-color:     var(--bs-success);
    color:            var(--bs-success-inverse);
}
.btn.btn-primary .svg-icon,
.btn.btn-primary i {
    color: var(--bs-success-inverse);
}
.btn.btn-primary.dropdown-toggle::after {
    color: var(--bs-success-inverse);
}

/* Metronic layer: hover / focus / active */
.btn-check:active  + .btn.btn-primary,
.btn-check:checked + .btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.show > .btn.btn-primary {
    background-color: var(--bs-success-active) !important;
    border-color:     var(--bs-success-active) !important;
    color:            var(--bs-success-inverse) !important;
}
.btn-check:active  + .btn.btn-primary .svg-icon,
.btn-check:active  + .btn.btn-primary i,
.btn-check:checked + .btn.btn-primary .svg-icon,
.btn-check:checked + .btn.btn-primary i,
.btn.btn-primary.active .svg-icon,
.btn.btn-primary.active i,
.btn.btn-primary.show .svg-icon,
.btn.btn-primary.show i,
.btn.btn-primary:active:not(.btn-active) .svg-icon,
.btn.btn-primary:active:not(.btn-active) i,
.btn.btn-primary:focus:not(.btn-active) .svg-icon,
.btn.btn-primary:focus:not(.btn-active) i,
.btn.btn-primary:hover:not(.btn-active) .svg-icon,
.btn.btn-primary:hover:not(.btn-active) i,
.show > .btn.btn-primary .svg-icon,
.show > .btn.btn-primary i {
    color: var(--bs-success-inverse);
}
.btn-check:active  + .btn.btn-primary.dropdown-toggle::after,
.btn-check:checked + .btn.btn-primary.dropdown-toggle::after,
.btn.btn-primary.active.dropdown-toggle::after,
.btn.btn-primary.show.dropdown-toggle::after,
.btn.btn-primary:active:not(.btn-active).dropdown-toggle::after,
.btn.btn-primary:focus:not(.btn-active).dropdown-toggle::after,
.btn.btn-primary:hover:not(.btn-active).dropdown-toggle::after,
.show > .btn.btn-primary.dropdown-toggle::after {
    color: var(--bs-success-inverse);
}

/* Disabled */
.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
    background-color: var(--bs-success);
    border-color:     var(--bs-success);
    color:            var(--bs-success-inverse);
    opacity:          0.65;
}

/* Dark mode: already handled by higher-specificity [data-bs-theme="dark"] rules above */

/* ── */

/* Bootstrap layer: CSS custom properties for btn-secondary → brand primary */
.btn-secondary {
    --bs-btn-bg:                    var(--bk-btn-secondary-bg);
    --bs-btn-border-color:          var(--bk-btn-secondary-bg);
    --bs-btn-color:                 var(--bk-btn-secondary-color);
    --bs-btn-hover-bg:              var(--bk-btn-secondary-hover-bg);
    --bs-btn-hover-border-color:    var(--bk-btn-secondary-hover-bg);
    --bs-btn-hover-color:           var(--bk-btn-secondary-color);
    --bs-btn-active-bg:             var(--bk-btn-secondary-active-bg);
    --bs-btn-active-border-color:   var(--bk-btn-secondary-active-bg);
    --bs-btn-active-color:          var(--bk-btn-secondary-color);
    --bs-btn-disabled-bg:           var(--bk-btn-secondary-disabled-bg);
    --bs-btn-disabled-border-color: var(--bk-btn-secondary-disabled-bg);
    --bs-btn-disabled-color:        var(--bk-btn-secondary-color);
    --bs-btn-focus-shadow-rgb:      var(--bs-primary-rgb);
}

/* Metronic layer: normal state */
.btn.btn-secondary {
    background-color: var(--bk-btn-secondary-bg);
    border-color:     var(--bk-btn-secondary-bg);
    color:            var(--bk-btn-secondary-color);
}
.btn.btn-secondary .svg-icon,
.btn.btn-secondary i {
    color: var(--bk-btn-secondary-color);
}
.btn.btn-secondary.dropdown-toggle::after {
    color: var(--bk-btn-secondary-color);
}

/* Metronic layer: hover / focus / active */
.btn-check:active  + .btn.btn-secondary,
.btn-check:checked + .btn.btn-secondary,
.btn.btn-secondary.active,
.btn.btn-secondary.show,
.btn.btn-secondary:active:not(.btn-active),
.btn.btn-secondary:focus:not(.btn-active),
.btn.btn-secondary:hover:not(.btn-active),
.show > .btn.btn-secondary {
    background-color: var(--bk-btn-secondary-hover-bg) !important;
    border-color:     var(--bk-btn-secondary-hover-bg) !important;
    color:            var(--bk-btn-secondary-color)     !important;
}
.btn-check:active  + .btn.btn-secondary .svg-icon,
.btn-check:active  + .btn.btn-secondary i,
.btn-check:checked + .btn.btn-secondary .svg-icon,
.btn-check:checked + .btn.btn-secondary i,
.btn.btn-secondary.active .svg-icon,
.btn.btn-secondary.active i,
.btn.btn-secondary.show .svg-icon,
.btn.btn-secondary.show i,
.btn.btn-secondary:active:not(.btn-active) .svg-icon,
.btn.btn-secondary:active:not(.btn-active) i,
.btn.btn-secondary:focus:not(.btn-active) .svg-icon,
.btn.btn-secondary:focus:not(.btn-active) i,
.btn.btn-secondary:hover:not(.btn-active) .svg-icon,
.btn.btn-secondary:hover:not(.btn-active) i,
.show > .btn.btn-secondary .svg-icon,
.show > .btn.btn-secondary i {
    color: var(--bk-btn-secondary-color);
}
.btn-check:active  + .btn.btn-secondary.dropdown-toggle::after,
.btn-check:checked + .btn.btn-secondary.dropdown-toggle::after,
.btn.btn-secondary.active.dropdown-toggle::after,
.btn.btn-secondary.show.dropdown-toggle::after,
.btn.btn-secondary:active:not(.btn-active).dropdown-toggle::after,
.btn.btn-secondary:focus:not(.btn-active).dropdown-toggle::after,
.btn.btn-secondary:hover:not(.btn-active).dropdown-toggle::after,
.show > .btn.btn-secondary.dropdown-toggle::after {
    color: var(--bk-btn-secondary-color);
}

/* Active/pressed state (darker) */
.btn.btn-secondary:active:not(.btn-active) {
    background-color: var(--bk-btn-secondary-active-bg) !important;
    border-color:     var(--bk-btn-secondary-active-bg) !important;
}

/* Disabled */
.btn.btn-secondary:disabled,
.btn.btn-secondary.disabled {
    background-color: var(--bk-btn-secondary-disabled-bg);
    border-color:     var(--bk-btn-secondary-disabled-bg);
    color:            var(--bk-btn-secondary-color);
    opacity:          0.65;
}

/* ── Header Redesign — Role Badge, Notification Dot, Sign-out ───────────── */

/* Role badge next to account name in account pill */
.bk-role-badge {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    background-color: var(--bs-gray-200);
    color: var(--bs-gray-600);
    text-transform: uppercase;
    align-self: flex-start;
}

/* Notification bell dot — green indicator, no number */
#notification_toggle_button {
    position: relative;
}
.bk-notif-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    padding: 3px;
    color: var(--bs-text-white);
    font-weight: 900;
    border-radius: 50%;
    background-color: #4ac957;
    pointer-events: none;
    font-size: 10px;
}

/* ── Profile settings segment-control tab bar ─────────────────────────────── */
.profile-segment-nav {
    background: var(--bs-gray-200);
    border-radius: 8px;
    max-width: 100%;
}
.profile-segment-nav .nav-link {
    border: 0;
    border-radius: 6px;
    white-space: nowrap;
    color: var(--bs-gray-600);
    background: transparent;
    transition: background 0.12s ease, color 0.12s ease;
}
.profile-segment-nav .nav-link.active {
    background: var(--bs-white) !important;
    color: var(--bs-gray-900) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.profile-segment-nav .nav-link:not(.active):hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--bs-gray-800) !important;
}

/* Sign-out link — red */
.bk-signout-link,
.bk-signout-link .menu-title,
.bk-signout-link i {
    color: #e87171 !important;
}
.bk-signout-link:hover {
    background-color: rgba(232, 113, 113, 0.08) !important;
}
.bk-signout-link:hover .menu-title,
.bk-signout-link:hover i {
    color: #e87171 !important;
}
.bk-no-uppercase {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* SweetAlert2 icon — global tweak: no top margin */
.swal2-icon {
    margin-top: 0 !important;
    margin-bottom: 1em !important;
}