:root {
    --b-divider-thickness: 1px;
    --b-bar-dark-background: var(--b-primary-color);
    --b-bar-dropdown-dark-background: var(--b-primary-color);
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

body {
    margin: 0;
    font-family: var(--dl-font);
    font-size: .825rem;
    font-weight: 400;
    line-height: 1.625;
    color: #6c757d;
    text-align: left;
    background-color: #FFFFFF;
}

b-bar-menu {
    background-color: var(--b-primary-color);
}

.main {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left .35s ease-in-out, left .35s ease-in-out, margin-right .35s ease-in-out, right .35s ease-in-out;
    flex-direction: column;
}

.content {
    padding: 1rem 1rem 1rem;
    flex: 1;
    direction: ltr;
}

.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.row-search-bar {
    margin-bottom: 5px !important;
    margin-top: 5px !important;
}


.badge {
    display: inline-block;
    padding: .3em .45em;
    font-size: 80%;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .2rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn {
    font-weight: 400;
    padding: .25rem .7rem;
    font-size: .825rem;
    line-height: 1.625;
    border-radius: .2rem;
}

.btn-group-sm > .btn, .btn-sm {
    padding: .15rem .5rem;
    font-size: .75rem;
    line-height: 1.625;
    border-radius: .1rem;
}

.btn-group-lg > .btn, .btn-lg {
    padding: .35rem 1rem;
    font-size: .95rem;
    line-height: 1.625;
    border-radius: .3rem;
}


.card .card-header {
    background: #f6fdff;
}

.card .card-header .card-title {
    font-size: 1rem;
    font-weight: 400;
    color: #414b54;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.card-subtitle {
    font-weight: 400;
    margin-top: -.5rem;
    font-size:12px !important;
}

.card-subtitle, .card-text:last-child {
    margin-bottom: 0;
    font-size:12px !important;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.84062rem + 2px);
    padding: .25rem .7rem;
    font-size: .825rem;
    font-weight: 400;
    line-height: 1.625;
    color: #414b54;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .2rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.84062rem + 2px);
    padding: .25rem 1.7rem .25rem .7rem;
    font-size: .825rem;
    font-weight: 400;
    line-height: 1.625;
    color: #414b54;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23020202' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.7rem center/8px 10px;
    border: 1px solid #ced4da;
    border-radius: .2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .25rem .7rem;
    margin-bottom: 0;
    font-size: .825rem;
    font-weight: 400;
    line-height: 1.625;
    color: #414b54;
    text-align: center;
    white-space: nowrap;
    background-color: #e2e8ee;
    border: 1px solid #ced4da;
    border-radius: .2rem;
}

.input-group-lg > .custom-select, .input-group-lg > .form-control, .input-group-lg > .input-group-append > .btn, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-prepend > .input-group-text {
    padding: .35rem 1rem;
    font-size: .95rem;
    line-height: 1.625;
    border-radius: .3rem;
}

.input-group-sm > .custom-select, .input-group-sm > .form-control:not(textarea) {
    height: calc(1.51875rem + 2px);
}

.input-group-sm > .custom-select, .input-group-sm > .form-control, .input-group-sm > .input-group-append > .btn, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-prepend > .input-group-text {
    padding: .15rem .5rem;
    font-size: .75rem;
    line-height: 1.625;
    border-radius: .1rem;
}

.table.b-datagrid + .row {
    padding-left: 1rem;
    padding-right: 1rem;
}

.nav.nav-tabs .nav-item .nav-link.active {
    background: #fff;
    color: #020202;
}

.nav.nav-tabs .nav-item .nav-link {
    background: transparent;
    color: #020202 !important;
    padding: .75rem 1rem;
    border: 0;
}

.tab-content {
    background: #fff;
    padding: 1.25rem;
}

.nav.nav-tabs + .tab-content {
    box-shadow: 0 0.1rem 0.2rem RGB(0 0 0/5%);
    border-radius: 0 0 .2rem .2rem;
}

.tab-content h4 {
    font-size: .95rem;
}

.tab-vertical-left .col-auto {
    padding-right: 0;
}

.tab-vertical-left .col {
    padding-left: 0;
}

.tab-vertical-right .col-auto {
    padding-left: 0;
}

.tab-vertical-right .col {
    padding-right: 0;
}

h6 {
    font-size: .825rem;
}

.text-sm {
    font-size: .75rem;
}

.text-lg {
    font-size: .95rem;
}

.illustration {
    background: white;
    color: #497aca;
}

.stat {
    background: #e0eafc;
    border-radius: 50%;
    padding: .75rem;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
}

.stat i {
    color: #497aca !important;
    text-align: center !important;
}

.floating-button {
    position: fixed !important; /* fixed will keep it on top even when scrolling */
    top: 10px; /* adjust as needed */
    left: 10px; /* adjust as needed */
    z-index: 1000; /* a high z-index ensures the button is above other content */
}

/* ==================== Syncfusion Grid - Header Color ==================== */
/* Apply consistent header colour to ALL columns including frozen borders */
.e-grid .e-gridheader tr:first-child th.e-headercell,
.e-grid .e-gridheader tr th.e-headercell.e-leftfreeze,
.e-grid .e-gridheader tr th.e-headercell.e-rightfreeze,
.e-grid .e-gridheader tr th.e-headercell.e-freezeleftborder,
.e-grid .e-gridheader tr th.e-headercell.e-freezerightborder {
    background-color: rgba(var(--dl-primary-rgb), 0.15) !important;
    color: #5D5068 !important;
}

/* ==================== Mobile Slideout Content (Global - bypasses CSS isolation) ==================== */
/* These styles ensure sidebar content is visible in the mobile slideout panel */
.dl-slideout-body .sidebar-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    background: #ffffff !important;
}

.dl-slideout-body .sidebar-header {
    display: flex !important;
    align-items: center !important;
    padding: 20px !important;
    border-bottom: 1px solid #e5e7eb !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.dl-slideout-body .sidebar-search {
    padding: 16px 20px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #fafafa !important;
    flex-shrink: 0 !important;
}

.dl-slideout-body .user-list,
.dl-slideout-body .group-list,
.dl-slideout-body .query-list,
.dl-slideout-body .report-list,
.dl-slideout-body .param-list {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px 0 !important;
}

/* ==================== DLTable Styles ==================== */
/* Container for scrollable table with fixed height */
.dl-table-container {
    width: 100%;
    overflow-x: auto;
}

/* Only apply scroll constraints when fixed height is set */
.dl-table-container.dl-table-fixed-height {
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

/* Table with sticky header - ONLY for fixed height tables */
.dl-table-fixed-height .dl-table-sticky-header {
    border-collapse: separate;
    border-spacing: 0;
}

.dl-table-fixed-height .dl-table-sticky-header thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Fallback background - will be overridden by inline styles if custom header format is set */
.dl-table-fixed-height .dl-table-sticky-header thead th {
    background-color: #EDFAFF;
    border-bottom: 2px solid #dee2e6;
}

/* Pagination container */
.dl-table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #dee2e6;
    margin-top: 8px;
    flex-wrap: wrap;
    gap: 12px;
}

/* Style the pagination buttons */
.dl-table-pagination .pagination .page-link {
    padding: 4px 10px;
    font-size: 0.85rem;
    border-radius: 4px;
    margin: 0 2px;
}

.dl-table-pagination .pagination .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.dl-table-pagination .pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/* Responsive pagination */
@media screen and (max-width: 576px) {
    .dl-table-pagination {
        flex-direction: column;
        align-items: flex-start;
    }

    .dl-table-pagination > div {
        flex-wrap: wrap;
    }
}

/* ==================== DLTable Flex Container Fix ==================== */
/* When DLTable is inside a flex parent (chart-card-body), ensure proper width */
.chart-card-body > .container-fluid {
    width: 100%;
    min-width: 0;
    flex: 1;
}

/* Ensure the row inside also takes full width */
.chart-card-body .container-fluid > .row {
    width: 100%;
}

/* Make dl-table-container fill available width in flex context */
.chart-card-body .dl-table-container {
    flex: 1;
    min-width: 0;
}

/* DL-1624 / T12-T14 — Shared CSS for module forms rendered inside DTSAdmin host.
   Per-module .razor files import this implicitly via the .UI project's _Imports.razor
   (kept centralised so every form gets identical chrome). */

.dts-module {
    padding: 1rem 0 0 0;
}

.dts-module-title-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
}

.dts-module-title-row i {
    color: var(--b-primary-color, #0d5a9e);
    font-size: 1.25rem;
}

.dts-module-title-row h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #2c3440;
}

.dts-module-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7480;
}

.dts-module-shift-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.85rem;
    background: #f6f8fa;
    border: 1px solid #e2e6ea;
    border-radius: 6px;
    max-width: 480px;
}

.dts-module-shift-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #2c3440;
    flex: 0 0 auto;
}

.dts-module-shift-row select {
    flex: 1 1 auto;
    padding: 0.35rem 0.55rem;
    border: 1px solid #d4d9df;
    border-radius: 4px;
    font-size: 0.9rem;
}

.dts-module-line {
    display: grid;
    align-items: end;
    gap: 0.75rem;
}

.dts-module-line .dts-field-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7480;
    font-weight: 500;
    display: block;
    margin-bottom: 0.15rem;
}

.dts-module-line input[type="text"],
.dts-module-line input[type="number"],
.dts-module-line select {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid #d4d9df;
    border-radius: 4px;
    font-size: 0.9rem;
    background: #fff;
}

.dts-module-line input[type="number"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dts-module-line input:focus,
.dts-module-line select:focus {
    outline: 2px solid #c8d8ea;
    border-color: #1976d2;
}

.dts-module-line input:read-only {
    background: #f6f8fa;
    color: #6b7480;
    cursor: not-allowed;
}

/* Per-archetype grid templates */
.dts-line--tills      { grid-template-columns: minmax(220px, 2fr) 140px 140px; }
.dts-line--tenders    { grid-template-columns: minmax(180px, 1.5fr) minmax(160px, 1.4fr) 140px 140px; }
.dts-line--kegs       { grid-template-columns: minmax(220px, 2fr) 140px 140px 140px; }
.dts-line--pcash      { grid-template-columns: minmax(160px, 1.2fr) minmax(220px, 2fr) 140px; }
.dts-line--commission { grid-template-columns: minmax(220px, 2fr) 160px; }
.dts-line--functions  { grid-template-columns: 140px minmax(220px, 2fr) 140px; }
.dts-line--gaming-crt { grid-template-columns: minmax(120px, 1fr) repeat(6, minmax(110px, 1fr)); }
.dts-line--keno       { grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(120px, 1fr)); }
.dts-line--tab        { grid-template-columns: minmax(140px, 1.1fr) repeat(10, minmax(110px, 1fr)); overflow-x: auto; }

.dts-module-totals {
    margin-top: 1rem;
    padding: 0.65rem 0.85rem;
    background: #fbfcfd;
    border: 1px solid #e2e6ea;
    border-radius: 6px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

.dts-module-totals-label {
    font-size: 0.85rem;
    color: #6b7480;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.dts-module-totals-value {
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c3440;
    font-variant-numeric: tabular-nums;
}

.dts-module-notes {
    margin-top: 1rem;
}

.dts-module-notes textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.55rem 0.65rem;
    border: 1px solid #d4d9df;
    border-radius: 6px;
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
}

.dts-module-notes textarea:read-only {
    background: #f6f8fa;
    color: #6b7480;
}

/* Single-form / card-stack layouts */

.dts-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    max-width: 960px;
}

.dts-module-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dts-module-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dts-module-field-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7480;
    font-weight: 500;
}

.dts-module-field input[type="text"],
.dts-module-field input[type="number"],
.dts-module-field select {
    padding: 0.45rem 0.6rem;
    border: 1px solid #d4d9df;
    border-radius: 4px;
    font-size: 0.95rem;
    background: #fff;
}

.dts-module-field input[type="number"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dts-module-field input:focus,
.dts-module-field select:focus {
    outline: 2px solid #c8d8ea;
    border-color: #1976d2;
}

.dts-module-field input:read-only {
    background: #f6f8fa;
    color: #6b7480;
}

.dts-module-card {
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.dts-module-card h5 {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    color: #2c3440;
}

.dts-module-checklist-section {
    margin-bottom: 0.85rem;
}

.dts-module-checklist-item {
    display: grid;
    grid-template-columns: 24px minmax(180px, 2fr) minmax(160px, 3fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px dashed #e2e6ea;
}

.dts-module-checklist-item:last-child {
    border-bottom: none;
}

.dts-module-checklist-item input[type="text"] {
    padding: 0.3rem 0.5rem;
    border: 1px solid #d4d9df;
    border-radius: 4px;
    font-size: 0.85rem;
}

.dts-module-tender-split {
    margin-top: 0.5rem;
    border-top: 1px dashed #d4d9df;
    padding-top: 0.5rem;
}

.dts-module-tender-split-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7480;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.dts-module-tender-split-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) 140px 28px;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.3rem;
}

.dts-module-tender-split-row input,
.dts-module-tender-split-row select {
    padding: 0.3rem 0.5rem;
    border: 1px solid #d4d9df;
    border-radius: 4px;
    font-size: 0.85rem;
}

.dts-module-tender-split-add {
    margin-top: 0.25rem;
    background: transparent;
    border: 1px dashed #93a1b0;
    color: #155380;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
}

.dts-module-tender-split-add:hover {
    background: #e9f2fb;
}

.dts-module-tender-split-remove {
    background: transparent;
    border: none;
    color: #99202d;
    cursor: pointer;
}

.dts-module-readonly-banner {
    margin-bottom: 0.85rem;
    padding: 0.5rem 0.75rem;
    background: #f6f8fa;
    border-left: 4px solid #6b7480;
    border-radius: 4px;
    color: #6b7480;
    font-size: 0.85rem;
}

/* DL-1874 — collapsible group/total rows.
   Shared by DLDatagrid (V1) and DLDatagridV2. Makes the group caption line — the row a
   section folds down to — read as a distinct, tappable header, and enlarges Syncfusion's
   native expand/collapse toggle so the affordance is obvious. Purely cosmetic: the
   collapse behaviour itself is Syncfusion's built-in group folding. */
.e-grid .e-groupcaptionrow {
    background: #eef2f7;
}

.e-grid .e-groupcaptionrow .e-groupcaption,
.e-grid .e-groupcaptionrow .e-groupcaption .e-groupcaptext {
    font-weight: 600;
    color: #003b73;
}

/* Native group expand (+) / collapse (−) toggle cell — make it prominent and clickable. */
.e-grid .e-recordplusexpand,
.e-grid .e-recordpluscollapse {
    cursor: pointer;
}

.e-grid .e-recordplusexpand .e-icons,
.e-grid .e-recordpluscollapse .e-icons {
    font-size: 1rem;
    color: #003b73;
}

/* DL-1874 — dark mode for the collapsible group/total rows.
   The light palette above (#eef2f7 fill, #003b73 text/icons) is illegible on the dark
   surface, so remap onto the project dark-mode vars: raised surface for the caption line,
   primary dark text for the caption label, and the cyan accent for the fold toggle. */
[data-theme="dark"] .e-grid .e-groupcaptionrow {
    background: var(--dl-dark-surface-raised);
}

[data-theme="dark"] .e-grid .e-groupcaptionrow .e-groupcaption,
[data-theme="dark"] .e-grid .e-groupcaptionrow .e-groupcaption .e-groupcaptext {
    color: var(--dl-dark-text);
}

[data-theme="dark"] .e-grid .e-recordplusexpand .e-icons,
[data-theme="dark"] .e-grid .e-recordpluscollapse .e-icons {
    color: #4fcaff;
}

/* DL-2943 — the DTS Admin banking sheet (DtsBankingPrintSheet). While the sheet is in the DOM, a
   print is the sheet alone: every element that neither is the sheet, sits inside it nor contains
   it is removed, and the sheet's ancestors are stripped of their layout chrome so it starts at the
   top-left of one A4 page. display:none rather than visibility:hidden — hidden elements keep their
   height and would print as trailing blank pages. Pages without the sheet match nothing here, and
   the A4 page box is a NAMED page so no other screen's printing changes. */
@page dts-banking-sheet {
    size: A4 portrait;
    margin: 12mm;
}

@media print {
    .dts-print-sheet {
        page: dts-banking-sheet;
    }

    body:has(.dts-print-sheet) *:not(.dts-print-sheet):not(.dts-print-sheet *):not(:has(.dts-print-sheet)) {
        display: none !important;
    }

    body:has(.dts-print-sheet),
    body:has(.dts-print-sheet) *:has(.dts-print-sheet) {
        display: block !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: #fff !important;
    }
}