/* ---- Desktop alignment (2026-10-11): fixed-size table boxes, equal dashboard cards, one-row top bar ---- */

/* View Table Status: every table box keeps the same size, running or free; the content fits inside */
@media (min-width: 768px) {
    #dinein_items .pos-order { height: 68px !important; min-height: 68px !important; max-height: 68px !important; padding: 8px 12px !important; margin-bottom: 8px !important; display: flex !important; align-items: center; overflow: visible; box-sizing: border-box; } /* visible: the customer list opens below */
    #dinein_items .pos-order > .d-flex { width: 100%; min-width: 0; margin: 0 !important; }
    #dinein_items .pos-order .orderdetail-pos { display: flex !important; align-items: center; gap: 8px; width: 100%; min-width: 0; flex-wrap: nowrap !important; }
    #dinein_items .pos-order .pos-order-title { flex: 0 0 44px; margin: 0 !important; font-size: 17px !important; line-height: 1.2; white-space: nowrap; }
    #dinein_items .pos-order .orderdetail-pos > p { display: none; }

    /* free table: Frame / Century on the right */
    #dinein_items .pos-order .frame-cent-buttons { margin: 0 0 0 auto !important; align-items: center; gap: 6px; }
    #dinein_items .pos-order .frame-cent-buttons form { margin: 0 !important; }
    #dinein_items .pos-order .frame-cent-buttons form button { margin: 0 !important; height: 32px; min-width: 78px; }

    /* running frame: timer + customer, then Cash / Bank / Close / Continue as a 2x2 block on the right */
    #dinein_items .pos-order .row { display: flex !important; flex-wrap: nowrap !important; align-items: center; flex: 1 1 auto; min-width: 0; width: auto !important; margin: 0 !important; gap: 8px; }
    #dinein_items .pos-order .row > [class*="col-"] { padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; }
    #dinein_items .pos-order .row > .col-lg-7 { flex: 1 1 auto !important; min-width: 0; display: flex !important; align-items: center; gap: 8px; }
    #dinein_items .pos-order .row > .col-lg-5 { flex: 0 0 auto !important; margin-left: auto !important; }
    #dinein_items .pos-order .frame-styling, #dinein_items .pos-order .century-styling { padding: 0 !important; margin: 0 !important; white-space: nowrap; flex: 0 0 auto; align-items: center; }
    #dinein_items .pos-order .frame-styling strong, #dinein_items .pos-order .century-styling strong { font-size: 14px !important; }
    /* the customer box shrinks (name shortened) so it never slides under the buttons */
    #dinein_items .pos-order .bootstrap-select { flex: 1 1 auto; width: auto !important; min-width: 60px; max-width: 220px !important; margin: 0 !important; }
    #dinein_items .pos-order .bootstrap-select > .dropdown-toggle { height: 34px; padding: 4px 22px 4px 8px; }
    #dinein_items .pos-order .bootstrap-select .filter-option-inner-inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #dinein_items .pos-order select.form-control:not(.selectpicker) { flex: 1 1 auto; min-width: 60px; max-width: 220px !important; height: 34px; padding: 4px 8px; font-size: 14px !important; margin: 0 !important; }
    #dinein_items .pos-order .col-lg-5 > .d-flex { display: grid !important; grid-template-columns: repeat(2, 66px); grid-auto-rows: 24px; gap: 4px; margin: 0 !important; }
    #dinein_items .pos-order .col-lg-5 .d-flex.w-100 { display: contents !important; }
    #dinein_items .pos-order .col-lg-5 button { width: 100%; height: 24px; margin: 0 !important; padding: 0 6px !important; font-size: 12.5px !important; line-height: 22px; }

    /* running century: timer, then customer + Close on the right */
    #dinein_items .pos-order .orderdetail-pos > .d-flex.justify-content-start { flex: 0 0 auto; margin: 0 !important; }
    #dinein_items .pos-order .d-flex.mt-4 { margin: 0 0 0 auto !important; flex: 0 1 auto; min-width: 0; gap: 8px !important; justify-content: flex-end; align-items: center; }
    #dinein_items .pos-order .d-flex.mt-4 .bootstrap-select, #dinein_items .pos-order .d-flex.mt-4 select.form-control:not(.selectpicker) { width: 200px !important; flex: 0 1 200px; }
    #dinein_items .pos-order .d-flex.mt-4 > button { height: 32px; min-width: 72px; }

    /* frames started offline (offline.js draws them inside .frame-cent-buttons) */
    #dinein_items .pos-order .frame-cent-buttons:has(.row), #dinein_items .pos-order .frame-cent-buttons:has(.century-styling) { flex: 1 1 auto; min-width: 0; margin-left: 0 !important; }
    #dinein_items .pos-order .frame-cent-buttons > div[style*="width:100%"] { display: flex; align-items: center; gap: 10px; }
}

/* very narrow table box (small screen / zoomed in): smaller text and buttons, still one line, nothing overlaps */
@media (min-width: 768px) {
    #dinein_items .pos-order { container-type: inline-size; }
}
@container (max-width: 390px) {
    #dinein_items .pos-order .orderdetail-pos, #dinein_items .pos-order .row, #dinein_items .pos-order .row > .col-lg-7 { gap: 6px !important; }
    #dinein_items .pos-order .pos-order-title { flex-basis: 34px !important; font-size: 15px !important; }
    #dinein_items .pos-order .frame-styling strong, #dinein_items .pos-order .century-styling strong { font-size: 12px !important; }
    #dinein_items .pos-order .col-lg-5 > .d-flex { grid-template-columns: repeat(2, 54px) !important; }
    #dinein_items .pos-order .col-lg-5 button { font-size: 11px !important; padding: 0 3px !important; }
    #dinein_items .pos-order .d-flex.mt-4 .bootstrap-select { width: 140px !important; flex-basis: 140px !important; }
    #dinein_items .pos-order .d-flex.mt-4 > button { min-width: 56px; }
}

@media (min-width: 992px) {
    /* POS top bar: buttons and the shop name stay on one line */
    .pos-main-header .btn, .pos-main-header a.btn { white-space: nowrap !important; }
    .pos-main-header .pos-business-name { white-space: nowrap; line-height: 1.15; }
    .pos-main-header .pos-business-name .sub-name { font-size: 11px; opacity: .7; }
    .pos-main-header { gap: 12px; }
    .pos-main-header .pos-header-search { flex: 0 1 280px !important; min-width: 150px; width: auto !important; }
    .pos-main-header .pos-header-left { flex: 0 0 auto !important; width: auto !important; min-width: 0; }
    .pos-main-header .pos-header-left + .pos-header-left { flex: 1 1 auto !important; justify-content: center; gap: 8px; }
    .pos-main-header .pos-header-right { flex: 0 0 auto !important; width: auto !important; }
    .pos-main-header .pos-header-left a.btn { height: 36px; padding: 6px 12px !important; font-size: 13px !important; line-height: 22px !important; }
    .pos-main-header #dinein_model { margin: 0 !important; padding: 0 !important; }

    /* top menu bar: always one row; on narrow screens long labels shorten ("Cash Bo…") instead of wrapping over the page */
    nav.navbar.navbar-fixed-top > .container-fluid { flex-wrap: nowrap !important; align-items: center; }
    nav.navbar.navbar-fixed-top .navbar-brand { flex: 0 0 auto; max-width: none !important; white-space: nowrap; }
    nav.navbar.navbar-fixed-top .navbar-right { flex: 1 1 auto; min-width: 0; margin-left: 12px !important; display: flex; justify-content: flex-end; }
    nav.navbar.navbar-fixed-top #navbar-menu { float: none !important; width: auto !important; max-width: 100%; min-width: 0; flex: 0 1 auto; }
    nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 3px; max-width: 100%; margin: 0 !important; padding: 0; }
    nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li { flex: 0 1 auto; min-width: 0; margin: 0 !important; float: none !important; }
    nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li:has(.icon-menu), nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li:has(#voiceAssistantBtn) { flex-shrink: 0; }
    nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li > a.btn { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 5px 7px !important; font-size: 11.5px !important; line-height: 18px !important; margin: 0 !important; white-space: nowrap; }

    /* dashboard cards: all the same size, the value always on one line */
    .dashboard-card { height: 152px !important; display: flex !important; flex-direction: column; overflow: hidden; }
    .dashboard-card .card-header { display: grid !important; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; flex: 0 0 auto; }
    .dashboard-card .card-content { display: contents; }
    .dashboard-card .card-title { grid-column: 2; text-align: right; min-height: 2.5em; line-height: 1.25; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .dashboard-card .card-value { grid-column: 1 / -1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 4px 0 0 !important; font-size: clamp(15px, 1.3vw, 20px) !important; }
    .dashboard-card .card-graph { margin-top: auto !important; height: 52px !important; }
}

/* small desktop screens: the POS shop name gives its place to the buttons (the logo stays) */
@media (min-width: 992px) and (max-width: 1279px) {
    .pos-main-header .pos-business-name { display: none; }
}

/* the table area always fills the window (its box is a flex item without a width) */
#dinein_items #content { width: 100% !important; flex: 1 1 100%; min-width: 0; }
#dinein_items #content > .row { width: 100%; }

/* ---- View Table Status in the system colours: navy #1b2a49 + orange #f28c28 ---- */
body #dinein_items .modal-header .btn-green { background-color: #1b2a49 !important; border-color: #1b2a49 !important; color: #fff !important; }
body #dinein_items .modal-header .btn-green:hover { background-color: #2d4373 !important; border-color: #2d4373 !important; }
body #dinein_items #content h4[style*="000080"] { background: #1b2a49 !important; }
body #dinein_items #content h4[style*="28a745"] { background: #f28c28 !important; }
body #dinein_items #content > .row > .col-md-6[style*="dashed"] { border-right-color: #1b2a49 !important; }
/* free table: white box, navy edge (single) / orange edge (double) */
body #dinein_items #content .pos-order { background-color: #fff !important; border: 1px solid #e3e8f1 !important; border-left: 4px solid #1b2a49 !important; border-radius: 10px; box-shadow: 0 1px 4px rgba(27, 42, 73, .06); }
body #dinein_items #content > .row > .col-md-6 + .col-md-6 .pos-order { border-left-color: #f28c28 !important; }
body #dinein_items #content .pos-order .pos-order-title { color: #1b2a49 !important; }
body #dinein_items #content .frame-cent-buttons .btn-green { background-color: #1b2a49 !important; border-color: #1b2a49 !important; color: #fff !important; }
body #dinein_items #content .frame-cent-buttons .btn-green:hover { background-color: #2d4373 !important; border-color: #2d4373 !important; }
body #dinein_items #content .frame-cent-buttons .btn-primary { background-color: #f28c28 !important; border-color: #f28c28 !important; color: #fff !important; }
body #dinein_items #content .frame-cent-buttons .btn-primary:hover { background-color: #d97a1e !important; border-color: #d97a1e !important; }
/* running table: the software paints it blue/green inline; a soft orange layer on top marks it busy */
body #dinein_items #content .pos-order[style*="3498db"], body #dinein_items #content .pos-order[style*="2ecc71"] { background-image: linear-gradient(#fff3e6, #fff3e6) !important; border-color: #f6c38f !important; border-left: 4px solid #f28c28 !important; }
body #dinein_items #content .pos-order .frame-styling strong, body #dinein_items #content .pos-order .century-styling strong { color: #1b2a49 !important; }
body #dinein_items #content .pos-order .btn-dark { background-color: #1b2a49 !important; border-color: #1b2a49 !important; color: #fff !important; }
body #dinein_items #content .pos-order .btn-warning { background-color: #f28c28 !important; border-color: #f28c28 !important; color: #fff !important; }
body #dinein_items #content .pos-order .col-lg-5 .btn-green { background-color: #2d4373 !important; border-color: #2d4373 !important; color: #fff !important; }
/* running counters on the POS top bar */
body header.pos-main-header #active_frames { background-color: #f28c28 !important; border-color: #f28c28 !important; color: #fff !important; }
body header.pos-main-header #active_centuries { background-color: #fff !important; border-color: #fff !important; color: #1b2a49 !important; }

/* ---- Dashboard top line: one clean bar (title | Frame / Century status | Cash / Credit sale) ---- */
@media (min-width: 992px) {
    .block-header > .row:first-child { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 16px; margin: 0 0 16px !important; padding: 10px 18px; background: #fff; border: 1px solid #e3e8f1; border-radius: 12px; box-shadow: 0 2px 8px rgba(27, 42, 73, .06); }
    .block-header > .row:first-child > [class*="col-"] { flex: 0 0 auto !important; max-width: none !important; width: auto !important; padding: 0 !important; }
    .block-header > .row:first-child > .current-status { flex: 1 1 auto !important; text-align: center !important; }
    .block-header > .row:first-child h2 { margin: 0 !important; font-size: 20px !important; line-height: 1.2; white-space: nowrap; }
    .block-header > .row:first-child .breadcrumb { display: none !important; }
    .block-header .current-status a { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }
    .block-header .current-status .status-badge { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 6px 14px !important; border-radius: 999px; background: #eef1f7 !important; color: #1b2a49 !important; font-weight: 600; font-size: 13px; white-space: nowrap; border: 0 !important; }
    .block-header .current-status .status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin: 0 !important; }
    .block-header .current-status .green-dot { background: #1b2a49 !important; }
    .block-header .current-status .purple-dot { background: #f28c28 !important; }
    .block-header > .row:first-child > .col-lg-6 { display: flex !important; align-items: center; justify-content: flex-end; gap: 22px; }
    .block-header .bh_chart { display: inline-flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important; }
    .block-header .bh_chart > div, .block-header .bh_chart > span { float: none !important; margin: 0 !important; }
    .block-header .bh_chart small { text-transform: uppercase; letter-spacing: .4px; font-size: 10.5px; color: #6b7a90; }
    .block-header .bh_chart h6 { font-size: 15px; color: #1b2a49; font-weight: 700; white-space: nowrap; }
    /* the two small sale charts in the theme colours (they are drawn as pictures, so recoloured with a filter) */
    .block-header .bh_visitors canvas { filter: grayscale(1) brightness(.45); }
    .block-header .bh_visits canvas { filter: grayscale(1) sepia(1) saturate(7) hue-rotate(-12deg) brightness(1.05); }
}

/* small desktop (1024-1199px): POS top bar a little tighter so the buttons never run into the date */
@media (min-width: 992px) and (max-width: 1199px) {
    .pos-main-header { gap: 8px; }
    .pos-main-header .pos-header-search { flex-basis: 170px !important; min-width: 120px; }
    .pos-main-header .pos-header-left a.btn { padding: 6px 9px !important; font-size: 12px !important; }
    .pos-main-header .pos-user-info { display: none; }
}

/* laptops up to 1365px: top menu slightly tighter so every label stays complete */
@media (min-width: 992px) and (max-width: 1365px) {
    nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav { gap: 2px; }
    nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li > a.btn { padding: 4px 5px !important; font-size: 11px !important; }
    nav.navbar.navbar-fixed-top .navbar-right { margin-left: 4px !important; }
}

/* ---- Standard display (assets/js/screen-fit.js zooms every desktop page to fill the screen) ---- */
/* pop-up windows: 100vh is zoomed too, so take the zoom back out */
@media (min-width: 576px) {
    .modal-dialog-scrollable .modal-content { max-height: calc(100vh / var(--fit-zoom, 1) - 3.5rem) !important; }
}
/* POS: items beside the bill on every desktop, both reaching exactly the bottom of the screen
   (the bill box has an inline 350px height, so min/max-height set its real height) */
@media (min-width: 992px) {
    .contentPOS .row > .m-items, .contentPOS .row > .m-bill { flex: 0 0 50% !important; max-width: 50% !important; }
    .contentPOS .row > .m-items { order: -1 !important; }
    .contentPOS .product-items { height: calc(100vh / var(--fit-zoom, 1) - 194px) !important; }
    .contentPOS .m-items > .card { max-height: none !important; }
    .contentPOS .table-datapos { min-height: calc(100vh / var(--fit-zoom, 1) - 470px) !important; max-height: calc(100vh / var(--fit-zoom, 1) - 470px) !important; }
}
/* View Table Status: the same share of the screen on every desktop */
@media (min-width: 992px) {
    #dinein_items .modal-dialog { width: calc(95vw / var(--fit-zoom, 1)) !important; max-width: none !important; }
}
/* bills, KOT and reports always print at their real size */
@media print {
    html { zoom: 1 !important; }
}
/* scaled pages: dropdown menus open right under their button (their position helper doesn't know about the zoom) */
html[style*="zoom"] .dropdown-menu[x-placement] { transform: none !important; left: 0 !important; right: auto !important; }
html[style*="zoom"] .dropdown-menu-right[x-placement] { left: auto !important; right: 0 !important; }
html[style*="zoom"] .dropdown-menu[x-placement^="bottom"] { top: 100% !important; bottom: auto !important; }
html[style*="zoom"] .dropdown-menu[x-placement^="top"] { top: auto !important; bottom: 100% !important; }
/* phones: the page grid's 5px overhang must not let the page wobble sideways */
@media (max-width: 991px) {
    html, body { overflow-x: clip; }
}

/* ---- Wapda Town only (2026-10-11): View Table Status window ~20% shorter.
   Boxes stay (68 -> 66px); the space comes from the header, the Single/Double bars and the gaps. ---- */
@media (min-width: 768px) {
    body #dinein_items .modal-header { padding-top: 8px !important; padding-bottom: 8px !important; }
    body #dinein_items .modal-header .modal-title { font-size: 21px !important; line-height: 1.2 !important; }
    body #dinein_items .modal-header .btn-green { padding: 6px 14px !important; }
    body #dinein_items .modal-body { padding-top: 14px !important; padding-bottom: 6px !important; }
    body #dinein_items #content .text-center.mb-3 { margin-bottom: 6px !important; }
    body #dinein_items #content h4[style*="000080"], body #dinein_items #content h4[style*="28a745"] { font-size: 16px !important; line-height: 1.2 !important; padding: 4px !important; margin-bottom: 0 !important; }
    body #dinein_items #content .pos-order { height: 66px !important; min-height: 66px !important; max-height: 66px !important; margin-bottom: 4px !important; padding-top: 7px !important; padding-bottom: 7px !important; }
    body #dinein_items #content .pos-order .orderdetail-pos { margin: 0 !important; }
}

/* ---- Wapda Town only (2026-10-11): dashboard boxes 40% shorter (152 -> 91px), same width.
   Icon on the left, title + amount on the right, the small graph stays as a faint band at the bottom. ---- */
@media (min-width: 992px) {
    body .dashboard-card { height: 91px !important; padding: 8px 12px !important; position: relative; }
    body .dashboard-card .card-header { position: relative; z-index: 1; grid-template-columns: auto 1fr !important; grid-template-rows: auto auto; column-gap: 10px !important; align-items: center !important; }
    body .dashboard-card .icon-box { grid-row: 1 / span 2; width: 38px !important; height: 38px !important; min-width: 38px; font-size: 16px !important; margin: 0 !important; }
    body .dashboard-card .card-title { grid-column: 2; min-height: 0 !important; font-size: 12.5px !important; line-height: 1.2 !important; }
    body .dashboard-card .card-value { grid-column: 2 !important; margin: 3px 0 0 !important; font-size: 18px !important; line-height: 1.15 !important; }
    body .dashboard-card .card-graph { position: absolute !important; left: 0; right: 0; bottom: 0; height: 30px !important; margin: 0 !important; opacity: .45; pointer-events: none; z-index: 0; }
    body .dashboard-card .card-graph canvas { height: 30px !important; }
}

/* ---- Wapda Town only (2026-10-11): top menu bar 66 -> 40px and the Dashboard bar 64 -> 38px (~40% thinner) ---- */
@media (min-width: 992px) {
    body nav.navbar.navbar-fixed-top { height: 40px !important; min-height: 40px !important; }
    body nav.navbar.navbar-fixed-top > .container-fluid { height: 40px !important; min-height: 0 !important; top: 0 !important; }
    body nav.navbar.navbar-fixed-top .navbar-brand { padding: 0 !important; height: 40px !important; display: flex !important; align-items: center; }
    body nav.navbar.navbar-fixed-top .navbar-brand > a { display: flex !important; align-items: center; gap: 8px; height: 40px; line-height: 1 !important; }
    body nav.navbar.navbar-fixed-top .navbar-brand > a > span { padding: 0 !important; line-height: 1.2 !important; }
    body nav.navbar.navbar-fixed-top .navbar-brand img.logo { height: 28px !important; width: auto !important; margin: 0 !important; }
    body nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li > a.btn { padding: 3px 7px !important; line-height: 18px !important; }
    body nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li > a.icon-menu { padding: 8px 10px !important; line-height: 22px !important; }
    body #left-sidebar { margin-top: 40px !important; }
    body #main-content { margin-top: 40px !important; }
    body .block-header > .row:first-child { padding: 5px 16px !important; }
    body .block-header > .row:first-child h2 { font-size: 18px !important; }
    body .block-header .current-status .status-badge { padding: 3px 10px !important; font-size: 12px !important; }
    body .block-header .bh_chart canvas { height: 26px !important; }
    body .block-header .bh_chart small { font-size: 9.5px !important; line-height: 1 !important; }
    body .block-header .bh_chart h6 { font-size: 13px !important; line-height: 1.1 !important; margin: 1px 0 0 !important; }
}

/* ---- Wapda Town only (2026-10-11): dashboard — the white band behind the Dashboard bar ends with the bar ---- */
@media (min-width: 992px) {
    body #main-content > .container-fluid.dashboard { max-height: 38px !important; height: 38px !important; }
    body .block-header > .row:first-child { margin-bottom: 14px !important; }
    body .block-header > .row:first-child + br { display: none !important; }
}

/* ---- Wapda Town only (2026-10-11): dashboard lower part ~40% shorter
   (Notification List | Monthly Sale Chart | Cash & Bank 517 -> 306px, Staff Detail 373 -> 225px). Dashboard page only. ---- */
@media (min-width: 992px) {
    body #main-content:has(.dashboard-card) .sale-chart-wrap { height: 215px !important; }
    body #main-content:has(.dashboard-card) .card:has(.sale-chart-wrap) .body { padding: 12px 16px !important; }
    body #main-content:has(.dashboard-card) .card:has(.sale-chart-wrap) .chart-heading { margin-bottom: 4px !important; }
    body #main-content:has(.dashboard-card) .card:has(.sale-chart-wrap) .chart-heading h5 { margin: 0 !important; }
    body #main-content:has(.dashboard-card) .card:has(.mail-inbox), body #main-content:has(.dashboard-card) .card.top_counter:has(.icon) { height: calc(100% - 30px) !important; }
    /* the Cash/Bank box has an inline height:505px !important; max-height still caps it */
    body #main-content:has(.dashboard-card) .card.top_counter:has(.icon) > .body { max-height: 275px !important; overflow: hidden; padding: 10px 14px !important; }
    body #main-content:has(.dashboard-card) .card.top_counter:has(.icon) hr { margin: 6px 0 !important; }
    body #main-content:has(.dashboard-card) .card.top_counter:has(.icon) .icon { width: 34px !important; height: 34px !important; line-height: 34px !important; font-size: 15px !important; }
    body #main-content:has(.dashboard-card) .card.top_counter:has(.icon) .content { height: auto !important; }
    body #main-content:has(.dashboard-card) .card.top_counter:has(.icon) .content .number, body #main-content:has(.dashboard-card) .card.top_counter:has(.icon) .content h5 { font-size: 15px !important; margin: 0 !important; line-height: 1.2 !important; }
    body #main-content:has(.dashboard-card) .card.top_counter:has(.icon) .content .text { font-size: 11px !important; line-height: 1.2 !important; }
    body #main-content:has(.dashboard-card) .card:has(.table-responsive) .table-responsive { max-height: 142px !important; height: auto !important; }
    body #main-content:has(.dashboard-card) .card:has(.table-responsive) .table td, body #main-content:has(.dashboard-card) .card:has(.table-responsive) .table th { padding: 5px 12px !important; }
    body #main-content:has(.dashboard-card) .card:has(.table-responsive) { max-height: none !important; }
}

/* ---- Wapda Town only (2026-10-11): top menu bar in the navy theme (white buttons, orange on hover) ---- */
@media (min-width: 992px) {
    html body nav.navbar.navbar-fixed-top { background: #1b2a49 !important; background-image: none !important; background-color: #1b2a49 !important; border-bottom: 0 !important; box-shadow: 0 2px 10px rgba(27, 42, 73, .25) !important; }
    html body nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li > a.btn { background: rgba(255, 255, 255, .08) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .28) !important; box-shadow: none !important; }
    html body nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li > a.btn:hover { background: #f28c28 !important; border-color: #f28c28 !important; color: #fff !important; }
    html body nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li > a.icon-menu, html body nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li > a.icon-menu i, html body nav.navbar.navbar-fixed-top #navbar-menu .navbar-nav > li > a.icon-menu svg { color: #fff !important; background: transparent !important; }
}

/* ---- Wapda Town only (2026-10-11): left sidebar 20% narrower (250 -> 200px), page uses the space ---- */
@media (min-width: 992px) {
    body #left-sidebar { width: 200px !important; }
    body #main-content { width: calc(100% - 200px) !important; }
    body #left-sidebar .main-menu > li > a { padding-left: 12px !important; padding-right: 26px !important; font-size: 14px !important; }
    body #left-sidebar .main-menu > li > a > i { margin-right: 12px !important; }
    body #left-sidebar .main-menu > li > a.has-arrow::after { right: 10px !important; }
}

/* ---- Wapda Town only (2026-10-11): View Table Status — taller boxes; running table = line 1 table + timer + buttons,
   line 2 customer name across the whole box; running Frame = dark blue, running Century = orange (both sides) ---- */
@media (min-width: 768px) {
    html body #dinein_items #content .pos-order { height: 84px !important; min-height: 84px !important; max-height: 84px !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) { padding-left: 8px !important; padding-right: 8px !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .orderdetail-pos { display: grid !important; grid-template-columns: auto auto 1fr auto; grid-template-rows: auto auto; grid-template-areas: "title timer . btns" "sel sel sel sel"; align-items: center; column-gap: 6px; row-gap: 6px; width: 100%; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .orderdetail-pos > .row, html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .orderdetail-pos > .row > .col-lg-7, html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .orderdetail-pos > .row > .col-lg-5, html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .orderdetail-pos > .d-flex.justify-content-start, html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .orderdetail-pos > .d-flex.mt-4 { display: contents !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .pos-order-title { grid-area: title; font-size: 15px !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .frame-styling, html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .century-styling { grid-area: timer; margin: 0 !important; padding: 0 !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .frame-styling strong, html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .century-styling strong { font-size: 12.5px !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .bootstrap-select, html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) select.form-control:not(.selectpicker) { grid-area: sel; width: 100% !important; max-width: none !important; flex: none !important; margin: 0 !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .bootstrap-select > .dropdown-toggle { height: 30px !important; padding: 3px 24px 3px 8px !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .col-lg-5 > .d-flex { grid-area: btns; display: flex !important; flex-wrap: nowrap !important; gap: 3px !important; margin: 0 !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .col-lg-5 .d-flex.w-100 { display: contents !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .col-lg-5 button { width: auto !important; height: 26px !important; padding: 0 4px !important; font-size: 11px !important; min-width: 0 !important; flex: 0 0 auto !important; line-height: 24px !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .orderdetail-pos > .d-flex.mt-4 > button { grid-area: btns; height: 26px !important; padding: 0 14px !important; line-height: 24px !important; min-width: 0 !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]):not(:has(.century-styling)) { background-image: linear-gradient(#1b2a49, #1b2a49) !important; border-color: #1b2a49 !important; border-left-color: #f28c28 !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]):has(.century-styling) { background-image: linear-gradient(#f28c28, #f28c28) !important; border-color: #f28c28 !important; border-left-color: #1b2a49 !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .pos-order-title, html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .frame-styling strong, html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .century-styling strong { color: #fff !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]):not(:has(.century-styling)) .frame-styling strong { color: #f9b56a !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]):not(:has(.century-styling)) .col-lg-5 .btn-dark, html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]):not(:has(.century-styling)) .col-lg-5 .btn-green { background-color: #fff !important; border-color: #fff !important; color: #1b2a49 !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]):has(.century-styling) .d-flex.mt-4 > .btn-danger { border: 1px solid #fff !important; }
}
/* small laptops: the running-Frame line a little tighter so everything stays inside the box */
@media (min-width: 768px) and (max-width: 1199px) {
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) { padding-left: 6px !important; padding-right: 6px !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .orderdetail-pos { column-gap: 4px !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .col-lg-5 > .d-flex { gap: 2px !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .col-lg-5 button { padding: 0 3px !important; font-size: 10.5px !important; }
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .frame-styling strong, html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]) .century-styling strong { font-size: 11.5px !important; }
}

/* ---- Wapda Town only (2026-10-14): the top line hides the small "Home / Staff / List" path,
   but some pages keep an action button inside it (Staff Member: "Add Staff") — show those buttons ---- */
@media (min-width: 992px) {
    html body .block-header > .row:first-child .breadcrumb:has(.btn) { display: flex !important; align-items: center; margin: 0 0 0 14px !important; padding: 0 !important; background: none !important; border: 0 !important; }
    html body .block-header > .row:first-child .breadcrumb:has(.btn) > li:not(:has(.btn)) { display: none !important; }
    html body .block-header > .row:first-child .breadcrumb:has(.btn) > li:has(.btn) { padding: 0 !important; margin: 0 6px 0 0 !important; }
    html body .block-header > .row:first-child .breadcrumb:has(.btn) > li:has(.btn)::before { display: none !important; content: none !important; }
    html body .block-header > .row:first-child > [class*="col-"]:has(.breadcrumb .btn) { display: flex !important; align-items: center; }
}

/* ---- Wapda Town only (2026-10-18): dashboard "Day vs Night Sale" chart (made by assets/js/wapda-ui.js) ---- */
#wapda-shift-card .card { border-radius: 14px; }
#wapda-shift-card .body { padding: 12px 16px !important; }
#wapda-shift-card .wapda-shift-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 6px; }
#wapda-shift-card .wapda-shift-head h5 { margin: 0 !important; font-weight: 700; color: #1b2a49; }
#wapda-shift-card .wapda-shift-legend { display: flex; gap: 14px; font-size: 12.5px; font-weight: 600; color: #475569; }
#wapda-shift-card .wapda-shift-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
#wapda-shift-card .wapda-shift-total { margin-left: auto; font-size: 13px; color: #475569; }
#wapda-shift-card .wapda-shift-wrap { position: relative; height: 290px; }
@media (max-width: 767px) {
    #wapda-shift-card .wapda-shift-total { margin-left: 0; }
    #wapda-shift-card .wapda-shift-wrap { height: 220px; }
}

/* ---- Wapda look on other sites (2026-10-18): some sites use other button colours in View Table Status
   (JSL: Frame = btn-success, "15Pcs Fr" = btn-info, Continue = btn-success) — same navy / orange as Wapda ---- */
html body #dinein_items #content .pos-order .btn-success { background-color: #1b2a49 !important; border-color: #1b2a49 !important; color: #fff !important; }
html body #dinein_items #content .pos-order .btn-success:hover { background-color: #2d4373 !important; border-color: #2d4373 !important; }
html body #dinein_items #content .pos-order .btn-info { background-color: #5b6f9e !important; border-color: #5b6f9e !important; color: #fff !important; }
html body #dinein_items #content .pos-order .btn-info:hover { background-color: #4a5c88 !important; border-color: #4a5c88 !important; }
@media (min-width: 768px) {
    html body #dinein_items #content .pos-order:is([style*="3498db"],[style*="2ecc71"]):not(:has(.century-styling)) .col-lg-5 .btn-success { background-color: #fff !important; border-color: #fff !important; color: #1b2a49 !important; }
}
/* POS items without a photo: the navy icon fits inside the picture box (some sites have a shorter box) */
html body .productThumb img[src^="data:image/svg"] { height: 100% !important; width: 100% !important; object-fit: contain !important; }
/* page background like Wapda (#b0b8c9). The Company Setting colour (tbl_company.bg_color) is not changed, only covered */
html body[class*="theme-"] { background-color: #b0b8c9 !important; }

/* ---- View Table Status (2026-10-18): the customer name list (search box) always shows in front and opens
   up or down, wherever the window has room; it is never hidden under other tables or the window edge.
   The side and height are worked out by assets/js (placeCustomerList). ---- */
html body #dinein_items .pos-order:has(.bootstrap-select.show) { position: relative; z-index: 60 !important; transform: none !important; }
html body #dinein_items #content [class*="col-"]:has(.bootstrap-select.show) { position: relative; z-index: 60 !important; }
html body #dinein_items .bootstrap-select .dropdown-menu.wts-dd { position: absolute !important; transform: none !important; left: 0 !important; right: auto !important; min-width: 100% !important; min-height: 0 !important; max-height: var(--wts-room, 300px) !important; overflow: hidden !important; z-index: 2000 !important; margin: 2px 0 !important; box-shadow: 0 8px 24px rgba(27, 42, 73, .25) !important; }
html body #dinein_items .bootstrap-select .dropdown-menu.wts-dd.wts-down { top: 100% !important; bottom: auto !important; }
html body #dinein_items .bootstrap-select .dropdown-menu.wts-dd.wts-up { top: auto !important; bottom: 100% !important; }
html body #dinein_items .bootstrap-select .dropdown-menu.wts-dd .inner { max-height: var(--wts-list, 240px) !important; min-height: 0 !important; overflow-y: auto !important; }