/* === BillingSkin1 CSS === */
/* Inter font loaded via <link> in index.html */

/* ======================== */
/* CSS VARIABLES — LIGHT    */
/* ======================== */
.bs1-page {
    --bg-body: #F1F2F5;
    --bg-surface: #fff;
    --bg-surface-hover: #F9FAFB;
    --bg-surface-alt: #FAFBFC;
    --bg-card: #fff;
    --bg-input: #fff;
    --border: #E7EAEE;
    --border-strong: #DEE2E7;
    --border-hover: #BABFC8;
    --text-primary: #373C44;
    --text-secondary: #6A6F77;
    --text-muted: #9DA2AA;
    --text-faint: #BABFC8;
    --text-on-blue: #fff;
    --table-num-empty: #D5D9E0;
    --shadow-sm: rgba(4,9,17,0.06);
    --shadow-md: rgba(4,9,17,0.08);
    --shadow-lg: rgba(4,9,17,0.12);
    --overlay: rgba(0,0,0,0.35);
    --lang-track: #E7EAEE;
    --lang-active: #fff;
    --pagination-bg: #fff;
    --mega-bg: #F7F8FA;
    --mega-item-bg: #fff;
    --mega-item-border: #ECEEF1;
    --chat-received: #F1F2F5;
    --chat-input-bg: #FAFBFC;
    --badge-unlock-bg: #F1F2F5;
    --badge-unlock-border: #DEE2E7;
    --badge-unlock-color: #6A6F77;
    --dots-bg: rgba(0,0,0,0.07);
    --table-empty-bg: #fff;
    --more-card-bg: #fff;
    --more-card-border: #E7EAEE;
    --bills-header-bg: #F7F8FA;
    --bills-row-border: #F1F2F5;
    --bills-tab-bg: #fff;
    --bills-tab-border: #E7EAEE;
    --bills-count-bg: #DEE2E7;
}

/* ======================== */
/* CSS VARIABLES — DARK     */
/* ======================== */
.bs1-page[data-theme="dark"] {
    --bg-body: #111318;
    --bg-surface: #1A1D24;
    --bg-surface-hover: #22262E;
    --bg-surface-alt: #1E2128;
    --bg-card: #1E2128;
    --bg-input: #22262E;
    --border: #2C3038;
    --border-strong: #343840;
    --border-hover: #4A4F58;
    --text-primary: #E8EAED;
    --text-secondary: #A0A5AD;
    --text-muted: #6E7480;
    --text-faint: #4A4F58;
    --text-on-blue: #fff;
    --table-num-empty: #3A3F48;
    --shadow-sm: rgba(0,0,0,0.20);
    --shadow-md: rgba(0,0,0,0.25);
    --shadow-lg: rgba(0,0,0,0.35);
    --overlay: rgba(0,0,0,0.55);
    --lang-track: #2C3038;
    --lang-active: #373C44;
    --pagination-bg: #1E2128;
    --mega-bg: #151820;
    --mega-item-bg: #1E2128;
    --mega-item-border: #2C3038;
    --chat-received: #22262E;
    --chat-input-bg: #1A1D24;
    --badge-unlock-bg: #22262E;
    --badge-unlock-border: #343840;
    --badge-unlock-color: #A0A5AD;
    --dots-bg: rgba(255,255,255,0.08);
    --table-empty-bg: #1E2128;
    --more-card-bg: #1E2128;
    --more-card-border: #2C3038;
    --bills-header-bg: #1A1D24;
    --bills-row-border: #22262E;
    --bills-tab-bg: #22262E;
    --bills-tab-border: #343840;
    --bills-count-bg: #343840;
}

/* ======================== */
/* BASE / PAGE WRAPPER      */
/* ======================== */
.bs1-page {
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-body);
    color: var(--text-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

/* Keep scrollbars thin but visible for scrollable areas */

/* ======================== */
/* TOP NAVIGATION           */
/* ======================== */
.bs1-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-surface);
    padding: 0;
    height: 60px;
    border-bottom: 1px solid var(--border-strong);
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 100;
}

.bs1-nav-left {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.bs1-nav-logo {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-right: 1px solid var(--border);
    padding: 0 12px;
    flex-shrink: 0;
}

.bs1-nav-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.bs1-nav-tabs {
    display: flex;
    gap: 0;
    height: 60px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1 1 auto;
    scrollbar-width: none;
}
.bs1-nav-tabs::-webkit-scrollbar { display: none; }

.bs1-nav-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    height: 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.2s;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    white-space: nowrap;
}

.bs1-nav-tab:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}

.bs1-nav-tab.active {
    color: #fff;
    background: #4185F4;
}

.bs1-nav-tab .badge {
    display: inline-block;
    min-width: 10px;
    padding: 6px 6px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #394b9d;
    border-radius: 10px;
}

/* MORE tab — kept compact so it always fits on small screens */
.bs1-nav-tab.bs1-nav-tab-more {
    padding: 0 12px;
    flex-shrink: 0;
    pointer-events: auto;
}
.bs1-more-chevron {
    width: 14px;
    height: 14px;
    margin-left: 2px;
}

.bs1-nav-tab svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.bs1-nav-right {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 0;
}
.bs1-nav-right > .bs1-nav-badge-group:first-child { padding-left: 0; }
.bs1-nav-right > :last-child { margin-right: 0; padding-right: 0; }

.bs1-nav-right-sep {
    width: 1px;
    height: 100%;
    background: var(--border);
}

/* Status Badges — 50px height fat-finger */
.bs1-nav-badge-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    height: 100%;
}

.bs1-nav-badge {
    height: 50px;
    padding: 4px 14px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}
.bs1-nav-badge-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.bs1-nav-badge:active { transform: scale(0.95); }

.bs1-nav-badge.unlock {
    background: var(--badge-unlock-bg);
    color: var(--badge-unlock-color);
    border: 1.5px solid var(--badge-unlock-border);
}
.bs1-nav-badge.unlock:hover { background: var(--border); }

.bs1-nav-badge.booking {
    background: #ECF3FE;
    color: #1a3a8a;
    border: 1.5px solid #A0C2F9;
}
.bs1-nav-badge.booking:hover { background: #C6DAFC; }

.bs1-nav-badge.lang {
    background: #EAFAF2;
    color: #1A7A4C;
    border: 1.5px solid #A3E4C1;
}
.bs1-nav-badge.lang:hover { background: #D0F5E3; }
.bs1-nav-badge.lang.active {
    background: #1A7A4C;
    color: #fff;
    border-color: #1A7A4C;
}

.bs1-nav-badge.bills {
    background: #FFF1F4;
    color: #CC3C5F;
    border: 1.5px solid #FFB7C9;
}
.bs1-nav-badge.bills:hover { background: #FFD4DE; }

.bs1-nav-badge.default {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
    text-decoration: none;
}
.bs1-nav-badge.default:hover { background: var(--bg-surface-hover); }

/* Language toggle - pill style */
.bs1-lang-toggle {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 0;
}

.bs1-lang-toggle-track {
    display: flex;
    align-items: center;
    background: var(--lang-track);
    border-radius: 20px;
    padding: 3px;
    cursor: pointer;
    gap: 0;
}

.bs1-lang-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 17px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.bs1-lang-option:hover { color: var(--text-primary); }
.bs1-lang-option.active {
    background: var(--lang-active);
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(4,9,17,0.10);
}

/* Right nav icon links */
.bs1-nav-link-btn {
    height: 100%;
    padding: 0 18px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    flex-direction: column;
    justify-content: center;
}

.bs1-nav-link-btn:hover { background: var(--bg-surface-hover); color: #4185F4; }
.bs1-nav-link-btn:hover svg { stroke: #4185F4; }

.bs1-nav-link-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-secondary);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bs1-nav-link-btn .bs1-nav-link-label {
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
}

/* Enterprise link — horizontal text + arrow */
.bs1-nav-link-btn.enterprise {
    flex-direction: row;
    gap: 4px;
    font-size: 10px;
    position: relative;
}
.bs1-enterprise-name {
    display: inline-block;
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs1-nav-link-btn.enterprise svg {
    width: 14px;
    height: 14px;
}

/* Enterprise button active state */
.bs1-nav-link-btn.enterprise.active {
    background: var(--bg-body);
    color: var(--text-primary);
}

.bs1-nav-link-btn.enterprise.active svg {
    stroke: var(--text-primary);
    transform: rotate(180deg);
}

.bs1-legend-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B48F;
    position: absolute;
    top: 4px;
    right: 4px;
}

/* ======================== */
/* MORE PANEL               */
/* ======================== */
.bs1-more-panel {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    z-index: 90;
    padding: 20px 24px;
    box-shadow: 0 6px 24px var(--shadow-md);
    border-bottom: 1px solid var(--border);
}
.bs1-more-panel.open { display: block; }
/* From row 1 (item view): panel opens right below navbar */
.bs1-more-panel.from-row1 { top: 60px; }
/* From row 2 (table/takeout view): panel opens below both rows */
.bs1-more-panel.from-row2 { top: 120px; }

.bs1-more-panel-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.bs1-more-section-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    height: 60px;
    border-radius: 10px;
    border: 1.5px solid var(--more-card-border);
    background: var(--more-card-bg);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.15s;
    position: relative;
}
.bs1-more-section-card svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}
.bs1-more-section-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 2px 8px var(--shadow-sm);
}
.bs1-more-section-card:active { transform: scale(0.97); }

.bs1-more-section-card.active-green {
    border-color: #10B48F;
    background: rgba(16,180,143,0.04);
}
.bs1-more-section-card.active-yellow {
    border-color: #FFC860;
    background: rgba(255,200,96,0.08);
}

.bs1-more-card-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bs1-more-card-badge.green { background: #10B48F; }
.bs1-more-card-badge.orange { background: #FF9772; }

.bs1-more-load-more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 12px 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}
.bs1-more-load-more:hover { color: var(--text-primary); }
.bs1-more-load-more svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bs1-more-panel-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 89;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
}
.bs1-more-panel-overlay.open { display: block; }
/* When opened from row 2, overlay starts below both rows so legend bar stays visible */
.bs1-more-panel-overlay.from-row2 { top: 120px; }

/* Align MORE panel with the shorter navbar at short-height viewports */
@media (max-height: 700px) {
    .bs1-more-panel { top: 52px; padding: 12px 18px; }
    .bs1-more-panel.from-row1 { top: 52px; }
    .bs1-more-panel.from-row2 { top: 104px; }
    .bs1-more-panel-overlay.from-row2 { top: 104px; }
}
@media (max-width: 480px) {
    .bs1-more-panel { top: 52px; }
    .bs1-more-panel.from-row1 { top: 52px; }
    .bs1-more-panel.from-row2 { top: 104px; }
    .bs1-more-panel-overlay.from-row2 { top: 104px; }
}

/* ======================== */
/* TABLE LEGEND (below nav) */
/* ======================== */
.bs1-table-legend {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-strong);
    flex-shrink: 0;
    height: 60px;
}

/* Left half — overflow tabs, starts at same x as navbar tabs (after logo) */
.bs1-legend-left {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.bs1-legend-left::-webkit-scrollbar { display: none; }

/* Spacer that always matches .bs1-nav-logo width — no manual breakpoint sync needed */
.bs1-legend-logo-spacer {
    width: 60px;
    flex-shrink: 0;
    height: 100%;
    border-right: 1px solid var(--border);
}


/* Overflow tabs container */
.bs1-legend-overflow-tabs {
    display: flex;
    gap: 0;
    height: 100%;
    min-width: 0;
    flex: 1 1 auto;
}

/* Right half — search + sale info, aligned flush under nav-right */
.bs1-legend-right {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    border-left: 1px solid var(--border);
    flex: 1 1 auto;
}
/* Full width when no overflow tabs — search takes all space */
.bs1-legend-right-full {
    border-left: none;
    padding: 0 24px;
}

.bs1-legend-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
}

.bs1-legend-section:first-child { padding-left: 0; }
.bs1-legend-section:last-child { padding-right: 0; }

.bs1-legend-sep {
    width: 1px;
    height: 24px;
    background: var(--border-strong);
    flex-shrink: 0;
}

.bs1-legend-spacer { flex: 1; }

/* Inline search input in the legend bar */
.bs1-legend-search {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 200px;
    min-width: 100px;
    margin-left: 0;
}
.bs1-legend-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    font-size: 12px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    padding: 0 10px;
    width: 100%;
}
.bs1-legend-search-kb {
    flex-shrink: 0;
    height: 30px;
    line-height: 20px;
}
@media (max-width: 1100px) {
    .bs1-legend-search { flex: 1 1 140px; min-width: 110px; max-width: 360px; margin-left: 8px; }
    .bs1-legend-search-input { height: 28px; font-size: 11px; padding: 0 8px; }
}
@media (max-width: 850px) {
    .bs1-legend-search { flex: 1 1 100px; min-width: 90px; max-width: 260px; }
    .bs1-legend-search-input { height: 26px; font-size: 10px; }
}

.bs1-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.bs1-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.bs1-legend-dot.bs1-empty { background: var(--border); border: 1px solid var(--border-strong); }
.bs1-legend-dot.bs1-running { background: #865FC2; }
.bs1-legend-dot.bs1-printed { background: #10B48F; }
.bs1-legend-dot.bs1-settled { background: #FF9772; }

.bs1-legend-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.bs1-legend-count strong {
    color: var(--text-primary);
    font-weight: 800;
}

/* Day Sale & Unsettled in legend */
.bs1-legend-sale-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.bs1-legend-sale-item.day-sale strong {
    font-weight: 800;
    color: #4185F4;
}

.bs1-legend-sale-item.unsettled strong {
    font-weight: 800;
    color: #FF6F92;
}

/* ======================== */
/* TABLE GRID               */
/* ======================== */
.bs1-table-grid-area {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px 12px;
    position: relative;
}

.bs1-table-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

/* Table Card — expanded view */
.bs1-table-card {
    position: relative;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    min-height: 130px;
}

.bs1-table-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 16px var(--shadow-md);
    transform: translateY(-2px);
}

.bs1-table-card:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px var(--shadow-sm);
}

/* Left section: table number */
.bs1-table-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 12px 8px 12px 14px;
    position: relative;
    gap: 2px;
}

.bs1-table-left-customer {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    bottom: 14px;
}

.bs1-table-covers-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    height: 24px;
}

.bs1-table-covers-pill .bs1-covers-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-primary);
    padding: 0 7px;
    display: flex;
    align-items: center;
    height: 100%;
}

.bs1-table-covers-pill .bs1-covers-amount {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0 7px;
    background: var(--bg-surface-alt);
    border-left: 1px solid var(--border);
    display: flex;
    align-items: center;
    height: 100%;
}

.bs1-table-num {
    font-size: 36px;
    font-weight: 800;
    color: #6A6F77;
    line-height: 1;
}

/* IMP-16: on online/delivery/takeaway order cards the aggregator order id is the primary
   identifier and the internal bill number is secondary, so the font hierarchy is flipped vs.
   dine-in. Applied to the pending online card and (conditionally) the accepted-order cards via
   these classes — the shared .bs1-table-num rule is left untouched so dine-in is unaffected. */
.bs1-online-id-major {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary, #373C44);
    line-height: 1.1;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bs1-online-billnum-minor {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #6A6F77);
    line-height: 1.2;
}

/* Vertical divider */
.bs1-table-divider {
    width: 1px;
    align-self: stretch;
    margin: 14px 0;
    background: var(--border);
    flex-shrink: 0;
}

/* Right section */
.bs1-table-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 45%;
    padding: 14px 12px;
    position: relative;
    flex-shrink: 0;
    background: var(--bg-surface);
    border-radius: 0 12px 12px 0;
}

.bs1-table-right-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
}

.bs1-table-timer-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(16,180,143,0.10);
    border: 1px solid #10B48F;
    font-size: 10px;
    font-weight: 700;
    color: #00815C;
    letter-spacing: 0.3px;
    width: fit-content;
    position: absolute;
    top: 8px;
    right: 8px;
}

.bs1-table-timer-pill svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bs1-table-info-amount {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.bs1-table-info-outlet {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    position: absolute;
    bottom: 14px;
}

.bs1-table-right-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.bs1-table-status-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-faint);
}

/* 3-dot menu */
.bs1-table-dots {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 36px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    z-index: 2;
}

.bs1-table-dots:hover { background: var(--dots-bg); }

.bs1-table-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-faint);
    transition: background 0.15s;
}

.bs1-table-card:hover .bs1-table-dots span { background: var(--text-secondary); }

/* Table states */
.bs1-table-card.occupied .bs1-table-num { font-size: 36px; }

/* Running / Green */
/* Running / KOT stage — Purple */
.bs1-table-card.bs1-running { background: rgba(134, 95, 194, 0.20); border-color: #865FC2; }
.bs1-table-card.bs1-running .bs1-table-num { color: #583294; }
.bs1-table-card.bs1-running .bs1-table-divider { background: rgba(88,50,148,0.15); }
.bs1-table-card.bs1-running .bs1-table-status-label { color: #583294; }
.bs1-table-card.bs1-running .bs1-table-dots span { background: #C3AFE1; }
.bs1-table-card.bs1-running:hover .bs1-table-dots span { background: #583294; }
.bs1-table-card.bs1-running:hover { box-shadow: 0 4px 20px rgba(134,95,194,0.15); }
.bs1-table-card.bs1-running .bs1-covers-amount { color: #583294; }

/* Printed / Bill Print — Green */
.bs1-table-card.bs1-printed { background: rgba(16, 180, 143, 0.20); border-color: #10B48F; }
.bs1-table-card.bs1-printed .bs1-table-num { color: #00815C; }
.bs1-table-card.bs1-printed .bs1-table-divider { background: rgba(0,129,92,0.15); }
.bs1-table-card.bs1-printed .bs1-table-status-label { color: #00815C; }
.bs1-table-card.bs1-printed .bs1-table-dots span { background: #58CBB1; }
.bs1-table-card.bs1-printed:hover .bs1-table-dots span { background: #00815C; }
.bs1-table-card.bs1-printed:hover { box-shadow: 0 4px 20px rgba(16,180,143,0.15); }
.bs1-table-card.bs1-printed .bs1-covers-amount { color: #00815C; }

/* Settled / Orange */
.bs1-table-card.bs1-settled { background: rgba(255, 151, 114, 0.10); border-color: #FF9772; }
.bs1-table-card.bs1-settled .bs1-table-num { color: #CC643F; }
.bs1-table-card.bs1-settled .bs1-table-divider { background: rgba(204,100,63,0.15); }
.bs1-table-card.bs1-settled .bs1-table-status-label { color: #CC643F; }
.bs1-table-card.bs1-settled .bs1-table-dots span { background: #FFCBB8; }
.bs1-table-card.bs1-settled:hover .bs1-table-dots span { background: #CC643F; }
.bs1-table-card.bs1-settled:hover { box-shadow: 0 4px 20px rgba(255,151,114,0.15); }
.bs1-table-card.bs1-settled .bs1-covers-amount { color: #CC643F; }

/* Reserved / Blue */
.bs1-table-card.bs1-reserved { background: rgba(17, 81, 71,0.18); border-color: #115147; }
.bs1-table-card.bs1-reserved .bs1-table-num { color: #115147; }
.bs1-table-card.bs1-reserved .bs1-table-divider { background: rgba(65,133,244,0.15); }
.bs1-table-card.bs1-reserved .bs1-table-status-label { color: #115147; }

/* Online Order / Pink */
.bs1-table-card.bs1-online-order { background: rgba(255,111,146,0.08); border-color: #FF6F92; }
.bs1-table-card.bs1-online-order .bs1-table-num { color: #CC3C5F; }
.bs1-table-card.bs1-online-order .bs1-table-divider { background: rgba(255,111,146,0.15); }
.bs1-table-card.bs1-online-order .bs1-table-status-label { color: #CC3C5F; }

/* Online Pending (not accepted) / Light Pink */
.bs1-table-card.bs1-online-pending { background: rgba(255,111,146,0.15); border-color: #FF6F92; }
.bs1-table-card.bs1-online-pending .bs1-table-num { color: #CC3C5F; }
.bs1-table-card.bs1-online-pending .bs1-table-divider { background: rgba(255,111,146,0.25); }
.bs1-table-card.bs1-online-pending .bs1-table-status-label { color: #FF6F92; }
.bs1-table-card.bs1-online-pending .bs1-table-dots span { background: #FFB3C6; }
.bs1-table-card.bs1-online-pending:hover .bs1-table-dots span { background: #FF6F92; }
.bs1-table-card.bs1-online-pending:hover { box-shadow: 0 4px 20px rgba(255,111,146,0.12); }

/* On Hold / Yellow */
.bs1-table-card.bs1-on-hold { background: rgba(255,200,96,0.10); border-color: #FFC860; }
.bs1-table-card.bs1-on-hold .bs1-table-num { color: #D4A12A; }
.bs1-table-card.bs1-on-hold .bs1-table-divider { background: rgba(255,200,96,0.15); }
.bs1-table-card.bs1-on-hold .bs1-table-status-label { color: #D4A12A; }

/* Empty */
.bs1-table-card.bs1-empty { background: var(--table-empty-bg); }
.bs1-table-card.bs1-empty .bs1-table-divider { background: var(--border); }
.bs1-table-card.bs1-empty:hover { border-color: #4185F4; }
.bs1-table-card.bs1-empty:hover .bs1-table-dots span { background: #4185F4; }

/* ======================== */
/* PAGINATION — line slider  */
/* ======================== */
/* Floating status legend — bottom-left, same line as pagination */
.bs1-floating-legend {
    position: fixed;
    bottom: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 20;
    background: var(--pagination-bg);
    border-radius: 14px;
    border: 1.5px solid var(--border);
    box-shadow: 0 4px 16px var(--shadow-md);
    padding: 0 16px;
    height: 48px;
}
.bs1-floating-legend .bs1-legend-item {
    padding: 0 10px;
}
.bs1-floating-legend-sep {
    width: 1px;
    height: 20px;
    background: var(--border-strong);
    flex-shrink: 0;
}

.bs1-grid-pagination {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 20;
    background: var(--pagination-bg);
    border-radius: 14px;
    border: 1.5px solid var(--border);
    box-shadow: 0 4px 16px var(--shadow-md);
    overflow: hidden;
}

.bs1-grid-page-btn {
    width: 70px;
    height: 60px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.bs1-grid-page-btn:hover {
    background: var(--bg-surface-hover);
}

.bs1-grid-page-btn:active { transform: scale(0.92); }

.bs1-grid-page-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bs1-grid-page-btn:hover svg { stroke: #4185F4; }

.bs1-grid-page-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
}

.bs1-grid-page-info {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 50px;
    text-align: center;
    padding: 0 8px;
}

.bs1-grid-page-info span {
    color: var(--text-muted);
    font-weight: 500;
}

/* Chat button in pagination */
.bs1-grid-page-btn.chat-btn svg { stroke: #4185F4; }
.bs1-grid-page-btn.chat-btn:hover { background: #ECF3FE; }

.bs1-chat-unread-dot {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 8px;
    height: 8px;
    background: #FF6F92;
    border-radius: 50%;
    border: 2px solid var(--pagination-bg);
}
.bs1-chat-unread-dot.hidden { display: none; }

/* ======================== */
/* MEGA MENU                */
/* ======================== */
.bs1-mega-menu-overlay {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
}

.bs1-mega-menu-overlay.open { display: block; }

.bs1-mega-menu {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--mega-bg);
    z-index: 100;
    padding: 20px 28px 24px;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
    box-shadow: 0 8px 32px var(--shadow-lg);
    border-bottom: 1px solid var(--border);
}

.bs1-mega-menu.open { display: flex; flex-direction: column; }

/* Logout footer — bottom-right of mega menu */
.bs1-mega-menu-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 4px 4px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
}
.bs1-mega-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #DC2626;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}
.bs1-mega-logout-btn:hover {
    background: #B91C1C;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
    transform: translateY(-1px);
}
.bs1-mega-logout-btn:active { transform: translateY(0); }
.bs1-mega-logout-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bs1-mega-menu-columns {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 100%;
    align-items: start;
}

.bs1-mega-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bs1-mega-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 10px;
}

.bs1-mega-col-accent {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: #4185F4;
}

.bs1-mega-col-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
}

.bs1-mega-col-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bs1-mega-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    min-height: 50px;
    border-radius: 8px;
    background: var(--mega-item-bg);
    border: 1px solid var(--mega-item-border);
    cursor: pointer;
    transition: all 0.15s;
}

.bs1-mega-menu-item:hover {
    background: var(--mega-item-bg);
    border-color: #4185F4;
    box-shadow: 0 2px 8px rgba(65,133,244,0.10);
}

.bs1-mega-menu-item:active {
    transform: scale(0.98);
    box-shadow: none;
}

.bs1-mega-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(65,133,244,0.08);
}

.bs1-mega-item-icon svg {
    width: 16px;
    height: 16px;
    stroke: #4185F4;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bs1-mega-menu-item:hover .bs1-mega-item-icon {
    background: rgba(65,133,244,0.14);
}

.bs1-mega-item-label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

.bs1-mega-menu-item:hover .bs1-mega-item-label { color: #4185F4; }

/* Category color accents — Management (default blue, already above) */

/* Operations — Green */
.bs1-mega-col.bs1-col-operations .bs1-mega-col-accent { background: #10B48F; }
.bs1-mega-col.bs1-col-operations .bs1-mega-item-icon { background: rgba(16,180,143,0.08); }
.bs1-mega-col.bs1-col-operations .bs1-mega-item-icon svg { stroke: #10B48F; }
.bs1-mega-col.bs1-col-operations .bs1-mega-menu-item:hover { border-color: #10B48F; box-shadow: 0 2px 8px rgba(16,180,143,0.10); }
.bs1-mega-col.bs1-col-operations .bs1-mega-menu-item:hover .bs1-mega-item-icon { background: rgba(16,180,143,0.14); }
.bs1-mega-col.bs1-col-operations .bs1-mega-menu-item:hover .bs1-mega-item-label { color: #10B48F; }

/* Finance — Yellow */
.bs1-mega-col.bs1-col-finance .bs1-mega-col-accent { background: #FFC860; }
.bs1-mega-col.bs1-col-finance .bs1-mega-item-icon { background: rgba(255,200,96,0.12); }
.bs1-mega-col.bs1-col-finance .bs1-mega-item-icon svg { stroke: #D4A12A; }
.bs1-mega-col.bs1-col-finance .bs1-mega-menu-item:hover { border-color: #FFC860; box-shadow: 0 2px 8px rgba(255,200,96,0.15); }
.bs1-mega-col.bs1-col-finance .bs1-mega-menu-item:hover .bs1-mega-item-icon { background: rgba(255,200,96,0.20); }
.bs1-mega-col.bs1-col-finance .bs1-mega-menu-item:hover .bs1-mega-item-label { color: #D4A12A; }

/* Reports — Purple */
.bs1-mega-col.bs1-col-reports .bs1-mega-col-accent { background: #865FC2; }
.bs1-mega-col.bs1-col-reports .bs1-mega-item-icon { background: rgba(134,95,194,0.08); }
.bs1-mega-col.bs1-col-reports .bs1-mega-item-icon svg { stroke: #865FC2; }
.bs1-mega-col.bs1-col-reports .bs1-mega-menu-item:hover { border-color: #865FC2; box-shadow: 0 2px 8px rgba(134,95,194,0.10); }
.bs1-mega-col.bs1-col-reports .bs1-mega-menu-item:hover .bs1-mega-item-icon { background: rgba(134,95,194,0.14); }
.bs1-mega-col.bs1-col-reports .bs1-mega-menu-item:hover .bs1-mega-item-label { color: #865FC2; }

/* System — Orange */
.bs1-mega-col.bs1-col-system .bs1-mega-col-accent { background: #FF9772; }
.bs1-mega-col.bs1-col-system .bs1-mega-item-icon { background: rgba(255,151,114,0.10); }
.bs1-mega-col.bs1-col-system .bs1-mega-item-icon svg { stroke: #FF9772; }
.bs1-mega-col.bs1-col-system .bs1-mega-menu-item:hover { border-color: #FF9772; box-shadow: 0 2px 8px rgba(255,151,114,0.12); }
.bs1-mega-col.bs1-col-system .bs1-mega-menu-item:hover .bs1-mega-item-icon { background: rgba(255,151,114,0.16); }
.bs1-mega-col.bs1-col-system .bs1-mega-menu-item:hover .bs1-mega-item-label { color: #E07A52; }

/* Danger menu item */
.bs1-mega-menu-item.danger {
    border-color: #FFD4DE;
    background: rgba(255,111,146,0.04);
}
.bs1-mega-menu-item.danger .bs1-mega-item-label { color: #CC3C5F; font-weight: 600; }
.bs1-mega-menu-item.danger .bs1-mega-item-icon { background: rgba(255,111,146,0.10); }
.bs1-mega-menu-item.danger .bs1-mega-item-icon svg { stroke: #FF6F92; }
.bs1-mega-menu-item.danger:hover { border-color: #FF6F92; box-shadow: 0 2px 8px rgba(255,111,146,0.14); }

/* ======================== */
/* THEME TOGGLE             */
/* ======================== */
.bs1-theme-toggle-btn {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--border);
    background: var(--bg-surface-hover);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.bs1-theme-toggle-btn:hover { border-color: var(--border-hover); background: var(--border); }
.bs1-theme-toggle-btn:active { transform: scale(0.92); }
.bs1-theme-toggle-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s;
}
.bs1-theme-toggle-btn:hover svg { stroke: var(--text-primary); }
.bs1-theme-toggle-btn .bs1-icon-sun { display: none; }
.bs1-theme-toggle-btn .bs1-icon-moon { display: block; }
.bs1-page[data-theme="dark"] .bs1-theme-toggle-btn .bs1-icon-sun { display: block; }
.bs1-page[data-theme="dark"] .bs1-theme-toggle-btn .bs1-icon-moon { display: none; }

/* ======================== */
/* BILLS MODAL              */
/* ======================== */
.bs1-bills-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 200;
    align-items: center;
    justify-content: center;
}
.bs1-bills-modal-overlay.open { display: flex; }

.bs1-bills-modal {
    background: var(--bg-surface);
    border-radius: 16px;
    width: 90%;
    max-width: 1100px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 48px var(--shadow-lg);
    overflow: hidden;
}

.bs1-bills-modal-header {
    padding: 24px 28px 0;
}

.bs1-bills-modal-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 18px;
}

.bs1-bills-modal-tabs {
    display: flex;
    gap: 6px;
    padding-bottom: 16px;
}

.bs1-bills-tab {
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border: 1.5px solid var(--bills-tab-border);
    background: var(--bills-tab-bg);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
}
.bs1-bills-tab:hover { border-color: var(--border-hover); background: var(--bg-surface-alt); }
.bs1-bills-tab.active {
    color: #fff;
    background: #4185F4;
    border-color: #4185F4;
}

.bs1-bills-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--bills-count-bg);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}
.bs1-bills-tab.active .bs1-bills-tab-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.bs1-bills-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.bs1-bills-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.bs1-bills-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.bs1-bills-table th {
    background: var(--bills-header-bg);
    text-align: left;
    padding: 12px 16px;
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.bs1-bills-table td {
    padding: 14px 16px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--bills-row-border);
    white-space: nowrap;
}
.bs1-bills-table tbody tr:hover {
    background: var(--bg-surface-hover);
}
.bs1-bills-table tbody tr { cursor: pointer; }

.bs1-bills-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.bs1-bills-status.bill-printed {
    background: rgba(134,95,194,0.10);
    color: #865FC2;
}
.bs1-bills-status.kot-printed {
    background: rgba(65,133,244,0.10);
    color: #4185F4;
}
.bs1-bills-status.settled {
    background: rgba(16,180,143,0.10);
    color: #10B48F;
}

.bs1-bills-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 28px;
    border-top: 1px solid var(--border);
}

.bs1-bills-cancel-btn {
    padding: 10px 28px;
    border-radius: 10px;
    border: 1.5px solid #FFB7C9;
    background: #FFF1F4;
    color: #CC3C5F;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
}
.bs1-bills-cancel-btn:hover { background: #FFD4DE; }
.bs1-bills-cancel-btn:active { transform: scale(0.96); }

/* ======================== */
/* CHAT PANEL               */
/* ======================== */
.bs1-chat-panel {
    display: none;
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 360px;
    height: 480px;
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 40px var(--shadow-lg);
    z-index: 30;
    flex-direction: column;
    overflow: hidden;
}
.bs1-chat-panel.open { display: flex; }

.bs1-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface-alt);
}

.bs1-chat-header-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bs1-chat-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B48F;
}

.bs1-chat-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bs1-chat-close-btn:hover { background: var(--bg-surface-hover); }
.bs1-chat-close-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bs1-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bs1-chat-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
}
.bs1-chat-msg.received {
    align-self: flex-start;
    background: var(--chat-received);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}
.bs1-chat-msg.sent {
    align-self: flex-end;
    background: #4185F4;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.bs1-chat-msg-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}
.bs1-chat-msg.sent .bs1-chat-msg-time { color: rgba(255,255,255,0.65); }

.bs1-chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    background: var(--chat-input-bg);
}

.bs1-chat-input {
    flex: 1;
    height: 40px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0 14px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    transition: border-color 0.15s;
}
.bs1-chat-input:focus { border-color: #4185F4; }
.bs1-chat-input::placeholder { color: var(--text-faint); }

.bs1-chat-send-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #4185F4;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}
.bs1-chat-send-btn:hover { background: #2E6CD9; }
.bs1-chat-send-btn:active { transform: scale(0.92); }
.bs1-chat-send-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ======================== */
/* PASSCODE MODAL           */
/* ======================== */
.bs1-passcode-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 300;
    align-items: center;
    justify-content: center;
}
.bs1-passcode-overlay.open { display: flex; }

.bs1-passcode-modal {
    background: var(--bg-surface);
    border-radius: 16px;
    width: 380px;
    box-shadow: 0 12px 48px var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bs1-passcode-header {
    padding: 20px 24px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.bs1-passcode-input-area {
    padding: 16px 24px;
}

.bs1-passcode-display {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 10px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
}

.bs1-passcode-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.15s;
}
.bs1-passcode-dot.filled {
    background: #4185F4;
}

.bs1-passcode-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.bs1-passcode-key {
    height: 85px;
    border: none;
    background: var(--bg-surface-alt);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.bs1-passcode-key:nth-child(3n) { border-right: none; }
.bs1-passcode-key:nth-child(n+10) { border-bottom: none; }

.bs1-passcode-key:hover { background: var(--border); }
.bs1-passcode-key:active { background: var(--border-strong); transform: scale(0.96); }
.bs1-passcode-key.empty-key {
    cursor: default;
    background: var(--bg-surface-alt);
}
.bs1-passcode-key.empty-key:hover { background: var(--bg-surface-alt); }
.bs1-passcode-key.empty-key:active { transform: none; }

.bs1-passcode-key.backspace-key svg {
    width: 22px;
    height: 22px;
    stroke: var(--text-primary);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bs1-passcode-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
}

.bs1-passcode-cancel-btn {
    padding: 12px 32px;
    border-radius: 10px;
    border: none;
    background: #FFC860;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
}
.bs1-passcode-cancel-btn:hover { background: #F0B840; }
.bs1-passcode-cancel-btn:active { transform: scale(0.96); }

@keyframes bs1-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* ======================== */
/* MAIN CONTENT SPLIT       */
/* ======================== */
.bs1-main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.bs1-main-content.bs1-right-align {
    flex-direction: row-reverse;
}
.bs1-main-content.bs1-right-align .bs1-menu-section {
    border-right: none;
    border-left: 1px solid var(--border-strong);
}
.bs1-main-content.bs1-right-align .bs1v2-cart-details-row {
    flex-direction: row-reverse;
}

/* ======================== */
/* LEFT — MENU ITEMS        */
/* ======================== */
.bs1-menu-section {
    flex: 7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    border-right: 1px solid var(--border-strong);
}

/* Food item grid area */
.bs1-menu-items-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Pagination — single card split into prev | next */
.bs1-menu-nav-card {
    background: var(--bg-surface-alt);
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    grid-column: 6;
    grid-row: -2 / -1;
}
.bs1-menu-nav-half {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.bs1-menu-nav-half:first-child { border-right: 1px solid var(--border); }
.bs1-menu-nav-half:hover { background: rgba(16,180,143,0.06); }
.bs1-menu-nav-half:active { transform: scale(0.95); }
.bs1-menu-nav-half.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.bs1-menu-nav-half svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bs1-menu-nav-half:hover svg { stroke: #10B48F; }

.bs1-menu-items-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 5px;
    flex: 1;
    min-height: 0;
}

.bs1-menu-item-card {
    position: relative;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    min-height: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 8px 8px;
    text-align: center;
    overflow: hidden;
    transition: all 0.15s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.bs1-menu-item-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 2px 8px var(--shadow-sm);
    transform: translateY(-1px);
}
.bs1-menu-item-card:active { transform: scale(0.97); }

.bs1-menu-item-name {
    font-size: 14px;
    font-weight: 750;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Price badge — defaults to the non-veg (red) theme so the badge stays readable when the
   veg/non-veg circle setting is disabled (no color class is applied by ng-class in that case).
   The .red / .green / .orange / .blue modifiers below override this when the setting is on. */
.bs1-menu-item-price {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 700;
    background: rgba(255,111,146,0.12);
    color: #FF6F92;
    border: 1px solid #FF6F92;
}
.bs1-menu-item-price.red { background: rgba(255,111,146,0.12); color: #FF6F92; border: 1px solid #FF6F92; }
.bs1-menu-item-price.green { background: rgba(16,180,143,0.10); color: #00815C; border: 1px solid #10B48F; }
.bs1-menu-item-price.orange { background: rgba(255,151,114,0.12); color: #CC643F; border: 1px solid #FF9772; }
.bs1-menu-item-price.blue { background: rgba(16,180,143,0.10); color: #00815C; border: 1px solid #10B48F; }

.bs1-menu-veg-dot {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* Special colored item cards */
.bs1-menu-item-card.bg-red {
    background: rgba(255,111,146,0.12);
    border-color: #e6bfc8;
}
.bs1-menu-item-card.bg-red .bs1-menu-item-name { color: #FF6F92; }

.bs1-menu-item-card.bg-orange {
    background: rgba(255,151,114,0.12);
    border-color: #FF9772;
}
.bs1-menu-item-card.bg-orange .bs1-menu-item-name { color: #CC643F; }

.bs1-menu-item-card.bg-teal {
    background: rgba(16,180,143,0.10);
    border-color: #10B48F;
}
.bs1-menu-item-card.bg-teal .bs1-menu-item-name { color: #00815C; }

/* Out of stock — red background (matches item-class-red from controller) */
.bs1-menu-item-card.item-class-red {
    background: #db5555;
    border-color: #c94444;
}
.bs1-menu-item-card.item-class-red .bs1-menu-item-name {
    color: #fff;
}
/* Out-of-stock rate must also be white — the veg/non-veg .red/.green price
   variants keep their coloured text, which is unreadable on the red card. */
.bs1-menu-item-card.item-class-red .bs1-menu-item-price {
    color: #fff;
}

/* ── Image Mode Item Cards ── */
.bs1-menu-item-card.bs1-img-card {
    height: auto;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    flex-direction: column;
}
.bs1-menu-item-card.bs1-img-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 16px var(--shadow-md);
    transform: translateY(-2px);
}
.bs1-menu-item-img-wrap {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 60px;
    overflow: hidden;
    position: relative;
    background: var(--bg-surface-alt);
}
.bs1-menu-item-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s;
}
.bs1-menu-item-card:hover .bs1-menu-item-img-wrap img {
    transform: scale(1.05);
}
.bs1-menu-item-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-surface-alt), var(--bg-surface));
}
.bs1-menu-item-no-img svg {
    width: 36px;
    height: 36px;
    stroke: var(--text-faint, #BABFC8);
    fill: none;
    stroke-width: 1.5;
}
.bs1-menu-item-img-wrap .bs1-menu-item-price {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(255,111,146,0.9);
    backdrop-filter: blur(4px);
    border: none;
}
.bs1-menu-item-img-wrap .bs1-menu-item-price.red { background: rgba(255,111,146,0.9); }
.bs1-menu-item-img-wrap .bs1-menu-item-price.green { background: rgba(16,180,143,0.9); }
.bs1-menu-item-img-wrap .bs1-menu-item-price.orange { background: rgba(255,151,114,0.9); }
.bs1-menu-item-img-wrap .bs1-menu-item-price.blue { background: rgba(65,133,244,0.9); }
.bs1-menu-item-img-info {
    padding: 4px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
}
.bs1-menu-item-img-info .bs1-menu-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    min-height: calc(1.25em * 2);
}

/* ======================== */
/* CATEGORY TABS            */
/* ======================== */
.bs1-category-area {
    border-top: 1px solid var(--border-strong);
    overflow-y: hidden;
    max-height: 176px;
    padding: 10px 14px;
    flex-shrink: 0;
}

.bs1-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 75px);
    gap: 6px;
}

.bs1-category-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    height: 75px;
    border-radius: 12px;
    border: 1.5px solid #87D9C7;
    background: #E7F7F4;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #00815C;
    text-align: center;
    line-height: 1.2;
    transition: all 0.15s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.bs1-category-tab:hover {
    filter: brightness(0.97);
    transform: translateY(-1px);
}
.bs1-category-tab:active { transform: scale(0.96); }

.bs1-category-tab .bs1-cat-icon {
    width: 22px;
    height: 22px;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Categories — indigo-green gradient */
.bs1-category-tab.cat-green,
.bs1-category-tab.cat-red,
.bs1-category-tab.cat-blue,
.bs1-category-tab.cat-orange,
.bs1-category-tab.cat-teal {
    background: linear-gradient(180deg, #dce6f3 0%, #c2d3e8 100%);
    border-color: transparent;
    color: #1a2a45;
}

/* Super categories — black and grey */
.bs1-super-category-area .bs1-category-grid {
    grid-template-rows: 75px;
}
/* Multi-row super-categories — free max-height so all rows stay visible.
   Items area (flex:1) absorbs the reduction; category area grid is rigid at N×row-height. */
.bs1-super-category-area.scat-rows-2,
.bs1-super-category-area.scat-rows-3 { max-height: none; }
.bs1-super-category-area.scat-rows-2 .bs1-category-grid { grid-template-rows: repeat(2, 75px); }
.bs1-super-category-area.scat-rows-3 .bs1-category-grid { grid-template-rows: repeat(3, 75px); }

/* Hide the chat360 hovering support widget while the billing item-punch view is active —
   the billing controller adds body.in-billing-punch on enter and removes it on state change.
   This frees the bottom-right area for the super-category buttons in right-align mode. */
body.in-billing-punch .chat360__visible,
body.in-billing-punch #chat360-chatbox,
body.in-billing-punch .chat360__chatbox { display: none !important; }
.bs1-super-category-area .bs1-category-tab {
    background: #0f3d4c;
    border-color: transparent;
    color: #fff;
}
.bs1-category-tab.cat-teal .bs1-cat-icon { stroke: #056B4D; }

.bs1-cat-nav-card {
    grid-column: -2 / -1;
    grid-row: -2 / -1;
    background: var(--bg-surface-alt);
    border: 1.5px dashed var(--border);
    border-radius: 10px;
    height: 75px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ======================== */
/* RIGHT — ORDER / CART     */
/* ======================== */
.bs1-cart-section {
    flex: 4;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    overflow: hidden;
    min-height: 0;
}

/* Search + Add bar */
.bs1-cart-search-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.bs1-cart-search-input {
    flex: 1;
    height: 32px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
}
.bs1-cart-search-input:focus { border-color: #10B48F; }
.bs1-cart-search-input::placeholder { color: var(--text-faint); }

.bs1-cart-qty-input {
    width: 45px;
    height: 32px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    text-align: center;
}
.bs1-cart-qty-input:focus { border-color: #10B48F; }

.bs1-cart-add-btn {
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 6px;
    background: #10B48F;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    white-space: nowrap;
}
.bs1-cart-add-btn:hover { background: #0D9A7A; }
.bs1-cart-add-btn:active { transform: scale(0.96); }
.bs1-cart-add-btn svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Show H/F Items toggle */
.bs1-cart-hf-toggle {
    display: flex;
    justify-content: flex-end;
    padding: 3px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.bs1-hf-btn {
    padding: 5px 12px;
    border: 1.5px solid #4A90D9;
    border-radius: 6px;
    background: #4A90D9;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.bs1-hf-btn:hover { background: #3A7BC8; }
.bs1-hf-btn svg {
    width: 14px;
    height: 14px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ======================== */
/* ORDER TABLE              */
/* ======================== */
.bs1-cart-order-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.bs1-cart-order-area::-webkit-scrollbar {
    width: 4px;
}
.bs1-cart-order-area::-webkit-scrollbar-track {
    background: transparent;
}
.bs1-cart-order-area::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.bs1-cart-order-area::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* KOT header row */
.bs1-kot-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(134,95,194,0.10);
    border-bottom: 1px solid rgba(134,95,194,0.25);
    font-size: 11px;
    font-weight: 700;
    color: #6B3FA0;
}

.bs1-kot-header .bs1-kot-settings {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bs1-kot-header .bs1-kot-settings svg {
    width: 14px;
    height: 14px;
    stroke: #865FC2;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: bs1-spinGear 3s linear infinite;
}

@keyframes bs1-spinGear {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.bs1-kot-header .bs1-kot-info {
    font-size: 10px;
    font-weight: 500;
    color: #6B3FA0;
    margin-left: 2px;
}

/* KOT table — clean up Bootstrap table inside cart */
/* ── Shared cart table reset (KOT + bill-table) ── */
.bs1-kot-table,
.bs1-cart-order-area .bill-table,
.bs1-cart-order-area .table {
    margin-bottom: 0;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    width: 100%;
    max-width: 100%;
}
/* Prevent horizontal scroll on the cart order area */
.bs1-cart-order-area {
    overflow-x: hidden;
}
/* Remove all internal borders — only bottom per row */
.bs1-kot-table > tbody > tr > td,
.bs1-cart-order-area .bill-table > tbody > tr > td {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 6px;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.4;
}
.bs1-kot-table > tbody > tr:hover,
.bs1-cart-order-area .bill-table > tbody > tr:hover {
    background: var(--bg-surface-hover);
}
.bs1-kot-table > tbody > tr.danger > td {
    background: rgba(255,111,146,0.08);
    color: #FF6F92;
}
/* Hide Bootstrap striped bg */
.bs1-cart-order-area .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent;
}
/* Remove outer border from table-bordered override */
.bs1-kot-table.table-bordered,
.bs1-cart-order-area .bill-table.table-bordered {
    border: none;
}
.bs1-kot-table.table-bordered > tbody > tr > td,
.bs1-cart-order-area .bill-table.table-bordered > tbody > tr > td {
    border-left: none;
    border-right: none;
    border-top: none;
}

/* ── Delete button (trash icon) ── */
.bs1-kot-table .btn-danger.btn-sm,
.bs1-cart-order-area .bill-table .btn-danger.btn-sm {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,111,146,0.12);
    border: none;
    color: #FF6F92;
    border-radius: 8px;
}
.bs1-kot-table .btn-danger.btn-sm:hover,
.bs1-cart-order-area .bill-table .btn-danger.btn-sm:hover {
    background: rgba(255,111,146,0.25);
}
.bs1-kot-table .btn-danger.btn-sm svg,
.bs1-cart-order-area .bill-table .btn-danger.btn-sm svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #FF6F92;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Qty btn-group — inline-flex, no wrap ── */
.bs1-cart-order-area .bill-table .btn-group,
.bs1-kot-table .btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 2px;
    align-items: center;
}
/* Name column can wrap; other columns stay tight */
.bs1-cart-order-area .bill-table td:nth-child(3),
.bs1-kot-table td:nth-child(3) {
    white-space: normal;
    word-break: break-word;
    max-width: 0;
    width: 100%;
}
/* + button — green square */
.bs1-cart-order-area .bill-table .btn-group .btn-success.btn-xs {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16,180,143,0.12);
    border: 1.5px solid #10B48F;
    color: #10B48F;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
}
.bs1-cart-order-area .bill-table .btn-group .btn-success.btn-xs:hover {
    background: rgba(16,180,143,0.25);
}
/* qty value — clean number */
.bs1-cart-order-area .bill-table .btn-group .btn-default.btn-xs {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: none;
    border-radius: 0;
}
/* - button — red square */
.bs1-cart-order-area .bill-table .btn-group .btn-danger.btn-xs {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,111,146,0.12);
    border: 1.5px solid #FF6F92;
    color: #FF6F92;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
}
.bs1-cart-order-area .bill-table .btn-group .btn-danger.btn-xs:hover {
    background: rgba(255,111,146,0.25);
}
/* SVG inside qty - button */
.bs1-cart-order-area .bill-table .btn-group .btn-danger.btn-xs svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Rate pill ── */
.bs1-cart-order-area .bill-table .btn-default.btn-sm,
.bs1-kot-table .btn-default.btn-xs {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface-alt);
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid var(--border);
    white-space: nowrap;
}
.bs1-kot-table .btn-default.btn-sm {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
}

/* ── Three-dots button ── */
.bs1-cart-order-area .bill-table .btn-default.btn-sm[style*="width"],
.bs1-kot-table .btn-default.btn-sm[style*="width"] {
    width: 28px !important;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #4A90D9;
    border-radius: 8px;
    background: rgba(74,144,217,0.1);
    color: #4A90D9;
    font-size: 16px;
    font-weight: 700;
}
.bs1-cart-order-area .bill-table .btn-default.btn-sm[style*="width"]:hover,
.bs1-kot-table .btn-default.btn-sm[style*="width"]:hover {
    background: #4A90D9;
    color: #fff;
}

/* ── Item name — truncate with ellipsis ── */
.bs1-cart-order-area .bill-table td:nth-child(3) > div:first-child,
.bs1-kot-table td:nth-child(3) > div:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── KOT-specific: info button ── */
.bs1-kot-table .btn-info.btn-xs {
    background: rgba(74,144,217,0.12);
    border-color: transparent;
    color: #4A90D9;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
}

/* ── Amount text — right-aligned, bold ── */
.bs1-cart-order-area .bill-table td.text-right,
.bs1-kot-table td.text-center:last-of-type {
    font-weight: 700;
    font-size: 12px;
}

/* Order item row — flex layout */
.bs1-order-item-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.bs1-order-item-row:hover { background: var(--bg-surface-hover); }

.bs1-order-remove-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(255,111,146,0.12);
    color: #FF6F92;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.bs1-order-remove-btn svg {
    width: 16px;
    height: 16px;
    stroke: #FF6F92;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bs1-order-remove-btn:hover { background: rgba(255,111,146,0.25); }

.bs1-order-item-num {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 36px;
}

.bs1-order-item-icon {
    width: 14px;
    height: 14px;
}
.bs1-order-item-icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 1.5;
}

.bs1-order-item-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--border);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Qty controls: + number - */
.bs1-order-qty-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 110px;
    justify-content: center;
}
.bs1-order-qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    border-radius: 8px;
}
.bs1-order-qty-btn.qty-plus {
    background: rgba(16,180,143,0.12);
    color: #10B48F;
    border: 1.5px solid #10B48F;
}
.bs1-order-qty-btn.qty-plus:hover { background: rgba(16,180,143,0.25); }
.bs1-order-qty-btn.qty-minus {
    background: rgba(255,111,146,0.12);
    color: #FF6F92;
    border: 1.5px solid #FF6F92;
}
.bs1-order-qty-btn.qty-minus:hover { background: rgba(255,111,146,0.25); }
.bs1-order-qty-btn:active { transform: scale(0.9); }

.bs1-order-qty-value {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-surface);
}

.bs1-order-rate-pill {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-surface-alt);
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
    width: 70px;
    text-align: center;
}

.bs1-order-amount {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
    width: 70px;
    text-align: right;
}

.bs1-order-dots-btn {
    width: 36px;
    height: 36px;
    border: 1.5px solid #4A90D9;
    border-radius: 8px;
    background: rgba(74,144,217,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #4A90D9;
    transition: all 0.15s;
    flex-shrink: 0;
}
.bs1-order-dots-btn:hover { background: #4A90D9; color: #fff; }

/* ======================== */
/* BOTTOM PANEL             */
/* ======================== */
.bs1-cart-bottom {
    border-top: 1px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* Comment buttons row */
.bs1-comment-row {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.bs1-comment-btn {
    flex: 1;
    padding: 4px 6px;
    height: 30px;
    border: 1.5px solid transparent;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}
/* Bill Comment — light blue */
.bs1-comment-btn.bill-comment {
    background: #ECF3FE;
    color: #2E6CD9;
    border-color: #A0C2F9;
}
.bs1-comment-btn.bill-comment:hover { background: #DCEAFD; }
.bs1-comment-btn.bill-comment svg { stroke: #2E6CD9; }
/* Make Assorted — light amber */
.bs1-comment-btn.make-assorted {
    background: #FFF8E7;
    color: #8A6400;
    border-color: #FFE099;
}
.bs1-comment-btn.make-assorted:hover { background: #FFF0CC; }
.bs1-comment-btn.make-assorted svg { stroke: #8A6400; }
/* Kot Comment — light green */
.bs1-comment-btn.kot-comment {
    background: #E7F7F4;
    color: #00815C;
    border-color: #87D9C7;
}
.bs1-comment-btn.kot-comment:hover { background: #D4F0EA; }
.bs1-comment-btn.kot-comment svg { stroke: #00815C; }
/* Table Summary — light purple */
.bs1-comment-btn.table-summary {
    background: #F3EEFA;
    color: #6B3FA0;
    border-color: #C3AFE1;
}
.bs1-comment-btn.table-summary:hover { background: #E8DAFA; }
.bs1-comment-btn.table-summary svg { stroke: #6B3FA0; }
.bs1-comment-btn svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Customer + Totals row */
.bs1-cart-details-row {
    display: flex;
    border-bottom: 1px solid var(--border);
    max-height: 120px;
    overflow-y: auto;
}

/* Customer Info */
.bs1-customer-panel {
    flex: 1;
    padding: 6px 10px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bs1-customer-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bs1-customer-search-input {
    flex: 1;
    height: 28px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 0 8px;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
}
.bs1-customer-search-input:focus { border-color: #10B48F; }
.bs1-customer-search-input::placeholder { color: var(--text-faint); }

.bs1-customer-icon-btn {
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.bs1-customer-icon-btn:hover { border-color: var(--border-hover); }
.bs1-customer-icon-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-secondary);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bs1-customer-icon-btn.info-btn {
    background: #4A90D9;
    border-color: #4A90D9;
}
.bs1-customer-icon-btn.info-btn svg { stroke: #fff; }

/* Customer card */
.bs1-customer-card {
    background: linear-gradient(135deg, #f5f9ff 0%, #edf3fe 100%);
    border: 1.5px solid #A0C2F9;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.bs1-customer-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #373C44;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bs1-customer-card-name svg {
    width: 18px;
    height: 18px;
    stroke: #373C44;
    fill: none;
    stroke-width: 1.5;
}

.bs1-customer-card-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border: 1.5px solid #4A90D9;
    border-radius: 50%;
    background: rgba(74,144,217,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #4A90D9;
    transition: all 0.15s;
}
.bs1-customer-card-close:hover { background: #4A90D9; color: #fff; }

.bs1-customer-card-phone {
    font-size: 13px;
    font-weight: 600;
    color: #373C44;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.bs1-customer-card-phone .verified {
    width: 16px;
    height: 16px;
    color: #10B48F;
    font-size: 14px;
}

.bs1-customer-card-detail {
    font-size: 12px;
    color: #373C44;
    display: flex;
    align-items: center;
    gap: 5px;
}
.bs1-customer-card-detail .label {
    color: #373C44;
    font-weight: 700;
}

.bs1-customer-card-address {
    font-size: 12px;
    color: #373C44;
    line-height: 1.5;
    padding: 4px 0;
    border-top: 1px dashed rgba(0,0,0,0.06);
    margin-top: 2px;
}
.bs1-customer-card-address .addr-label {
    color: #373C44;
    font-weight: 700;
}

.bs1-customer-bottom-btns {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.bs1-customer-action-btn {
    flex: 1;
    padding: 7px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: #373C44;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.bs1-customer-action-btn:hover { background: #4A90D9; color: #fff; border-color: #4A90D9; }
.bs1-customer-action-btn.more-btn:hover { background: #373C44; color: #fff; border-color: #373C44; }

/* Totals Panel */
.bs1-totals-panel {
    flex: 1;
    flex-shrink: 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-surface);
}

.bs1-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #6A6F77;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.bs1-totals-row:first-child {
    padding-top: 0;
}

.bs1-totals-row .bs1-totals-value {
    font-weight: 700;
    font-size: 13px;
    color: #373C44;
    text-align: right;
}

.bs1-totals-row.offers {
    border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.bs1-totals-row.offers .bs1-totals-label {
    background: #10B48F;
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.bs1-totals-row.tax {
    border-bottom: none;
}
.bs1-totals-row.tax .bs1-totals-value {
    background: #FF6F92;
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.bs1-totals-qty-pill {
    background: #373C44;
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 6px;
}

.bs1-totals-row.net-amount {
    font-size: 13px;
    font-weight: 800;
    color: #373C44;
    padding: 6px 0 4px;
    border-top: 1px solid #373C44;
    border-bottom: none;
    margin-top: 2px;
}
.bs1-totals-row.net-amount .bs1-totals-value {
    font-size: 14px;
    font-weight: 800;
    color: #373C44;
}

.bs1-totals-outlet {
    margin-top: 4px;
    margin-bottom: 4px;
}

.bs1-totals-outlet select {
    width: 100%;
    height: 30px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 0 8px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    cursor: pointer;
}
.bs1-totals-outlet select:focus {
    border-color: #10B48F;
}

.bs1-printkot-btn {
    width: 100%;
    height: 80px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #10B48F 0%, #0D9A7A 100%);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    letter-spacing: 0.5px;
    margin-top: auto;
    box-shadow: 0 4px 12px rgba(16,180,143,0.3);
}
.bs1-printkot-btn:hover {
    background: linear-gradient(135deg, #0D9A7A 0%, #0A8568 100%);
    box-shadow: 0 6px 16px rgba(16,180,143,0.4);
    transform: translateY(-1px);
}
.bs1-printkot-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(16,180,143,0.3); }
.bs1-printkot-btn svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ======================== */
/* TAKEOUT / DELIVERY CARDS */
/* ======================== */
/* Takeout/Delivery — KOT stage (has bill, not printed) — Purple, same as running */
.bs1-table-card.bs1-takeout {
    background: rgba(134, 95, 194, 0.08);
    border-color: #865FC2;
}
.bs1-table-card.bs1-takeout .bs1-table-num { color: #583294; }
.bs1-table-card.bs1-takeout .bs1-table-divider { background: rgba(88,50,148,0.15); }
.bs1-table-card.bs1-takeout .bs1-table-status-label { color: #583294; }
.bs1-table-card.bs1-takeout .bs1-table-dots span { background: #C3AFE1; }
.bs1-table-card.bs1-takeout:hover .bs1-table-dots span { background: #583294; }
.bs1-table-card.bs1-takeout:hover { box-shadow: 0 4px 20px rgba(134,95,194,0.15); }

/* Takeout/Delivery — Bill printed — Green, same as printed */
.bs1-table-card.bs1-takeout-printed {
    background: rgba(16, 180, 143, 0.10);
    border-color: #10B48F;
}
.bs1-table-card.bs1-takeout-printed .bs1-table-num { color: #00815C; }
.bs1-table-card.bs1-takeout-printed .bs1-table-divider { background: rgba(0,129,92,0.15); }
.bs1-table-card.bs1-takeout-printed .bs1-table-status-label { color: #00815C; }
.bs1-table-card.bs1-takeout-printed .bs1-table-dots span { background: #58CBB1; }
.bs1-table-card.bs1-takeout-printed:hover .bs1-table-dots span { background: #00815C; }
.bs1-table-card.bs1-takeout-printed:hover { box-shadow: 0 4px 20px rgba(16,180,143,0.15); }

/* Takeout/Delivery — New (no bill) — Empty/blank, same as bs1-empty */
.bs1-table-card.bs1-takeout-new {
    background: var(--table-empty-bg);
}
.bs1-table-card.bs1-takeout-new .bs1-table-divider { background: var(--border); }
.bs1-table-card.bs1-takeout-new:hover { border-color: #4185F4; }
.bs1-table-card.bs1-takeout-new:hover .bs1-table-dots span { background: #4185F4; }

/* ======================== */
/* UTILITY CLASSES          */
/* ======================== */
.bs1-hidden { display: none; }
.bs1-flex { display: flex; }
.bs1-flex-col { display: flex; flex-direction: column; }
.bs1-flex-1 { flex: 1; }
.bs1-items-center { align-items: center; }
.bs1-justify-center { justify-content: center; }
.bs1-justify-between { justify-content: space-between; }
.bs1-gap-4 { gap: 4px; }
.bs1-gap-8 { gap: 8px; }
.bs1-gap-12 { gap: 12px; }
.bs1-text-center { text-align: center; }
.bs1-text-right { text-align: right; }
.bs1-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bs1-font-bold { font-weight: 700; }
.bs1-font-extrabold { font-weight: 800; }
.bs1-text-sm { font-size: 12px; }
.bs1-text-xs { font-size: 10px; }
.bs1-text-muted { color: var(--text-muted); }
.bs1-text-secondary { color: var(--text-secondary); }

/* ======================== */
/* RESPONSIVE BREAKPOINTS   */
/* ======================== */
@media (max-width: 1400px) {
    .bs1-table-grid { grid-template-columns: repeat(5, 1fr); }
    .bs1-menu-items-grid { grid-template-columns: repeat(5, 1fr); }
    .bs1-menu-item-name { font-size: 13px; }
    .bs1-menu-item-price { font-size: 9px; }
    .bs1-menu-item-img-wrap { min-height: 56px; }
    .bs1-menu-item-img-info .bs1-menu-item-name { font-size: 13px; }
    .bs1-category-grid { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 68px); }
    .bs1-super-category-area .bs1-category-grid { grid-template-rows: 68px; }
    .bs1-super-category-area.scat-rows-2 .bs1-category-grid { grid-template-rows: repeat(2, 68px); }
    .bs1-super-category-area.scat-rows-3 .bs1-category-grid { grid-template-rows: repeat(3, 68px); }
    .bs1-category-tab { height: 68px; font-size: 12px; padding: 8px 6px; }
    .bs1-cat-nav-card { height: 68px; }
}

@media (max-width: 1000px) {
    .bs1-table-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1100px) {
    .bs1-legend-section.sale-section { display: none; }
    .bs1-nav-link-btn { padding: 0 12px; }
    .bs1-nav-link-btn .bs1-nav-link-label { font-size: 9px; }
    .bs1-menu-items-grid { grid-template-columns: repeat(5, 1fr); }
    .bs1-menu-item-card { padding: 12px 6px 6px; }
    .bs1-menu-item-name { font-size: 11px; }
    .bs1-menu-item-price { font-size: 9px; padding: 1px 5px; }
    .bs1-menu-item-img-wrap { min-height: 52px; }
    .bs1-menu-item-img-info { padding: 3px 6px 5px; }
    .bs1-menu-item-img-info .bs1-menu-item-name { font-size: 11px; }
    .bs1-menu-item-img-wrap .bs1-menu-item-price { font-size: 10px; padding: 3px 8px; }
    .bs1-category-area { padding: 8px 12px; max-height: 160px; }
    .bs1-category-grid { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 62px); gap: 5px; }
    .bs1-super-category-area .bs1-category-grid { grid-template-rows: 62px; }
    .bs1-super-category-area.scat-rows-2 .bs1-category-grid { grid-template-rows: repeat(2, 62px); }
    .bs1-super-category-area.scat-rows-3 .bs1-category-grid { grid-template-rows: repeat(3, 62px); }
    .bs1-category-tab { height: 62px; font-size: 11px; padding: 6px; gap: 4px; border-radius: 10px; }
    .bs1-category-tab .bs1-cat-icon { width: 18px; height: 18px; }
    .bs1-cat-nav-card { height: 62px; font-size: 10px; }
}

@media (max-width: 850px) {
    .bs1-table-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .bs1-menu-items-grid { grid-template-columns: repeat(4, 1fr); }
    .bs1-menu-item-card { padding: 10px 5px 5px; border-radius: 6px; }
    .bs1-menu-item-name { font-size: 12px; line-height: 1.15; }
    .bs1-menu-item-price { font-size: 8px; padding: 1px 4px; top: 3px; right: 3px; }
    .bs1-menu-item-img-wrap { min-height: 48px; }
    .bs1-menu-item-img-info { padding: 3px 6px 4px; }
    .bs1-menu-item-img-info .bs1-menu-item-name { font-size: 12px; }
    .bs1-menu-item-img-wrap .bs1-menu-item-price { font-size: 10px; padding: 2px 6px; top: 5px; right: 5px; }
    .bs1-category-area { padding: 6px 10px; max-height: 140px; }
    .bs1-category-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 56px); gap: 4px; }
    .bs1-super-category-area .bs1-category-grid { grid-template-rows: 56px; }
    .bs1-super-category-area.scat-rows-2 .bs1-category-grid { grid-template-rows: repeat(2, 56px); }
    .bs1-super-category-area.scat-rows-3 .bs1-category-grid { grid-template-rows: repeat(3, 56px); }
    .bs1-category-tab { height: 56px; font-size: 10px; padding: 5px; border-radius: 8px; }
    .bs1-category-tab .bs1-cat-icon { width: 16px; height: 16px; }
    .bs1-cat-nav-card { height: 56px; font-size: 10px; }
    .bs1-table-grid-area { padding: 12px 14px 10px; }
    .bs1-nav-badge-group { padding: 0 10px; gap: 6px; }
    .bs1-nav-badge { height: 44px; padding: 0 14px; font-size: 11px; }
    .bs1-nav-tab { padding: 0 14px; font-size: 12px; }
    .bs1-table-legend { padding: 0; }
    .bs1-legend-section { gap: 10px; padding: 0 10px; }
    .bs1-grid-pagination { right: 14px; bottom: 18px; }
    .bs1-table-card { min-height: 110px; }
    .bs1-mega-menu-columns { grid-template-columns: repeat(3, 1fr) !important; }
    .bs1-mega-menu { padding: 16px 16px 20px; }
}

/* Short-height viewports (e.g. 1024 × 665) — taller cards that fill the row,
   with smaller text scaled to the card size */
@media (max-height: 700px) {
    .bs1-top-nav { height: 52px; }
    .bs1-nav-tabs { height: 52px; }
    .bs1-nav-logo { height: 52px; }
    .bs1-table-legend { height: 52px; }
    .bs1-legend-logo-spacer { width: 52px; }
    .bs1-nav-tab svg { width: 14px; height: 14px; }
    .bs1-table-grid-area { padding: 8px 14px 6px; }
    .bs1-table-grid {
        gap: 8px;
        grid-auto-rows: auto;   /* rows size to card height — no empty space between */
    }
    .bs1-table-card {
        min-height: 0;
        height: 100px;
        border-radius: 10px;
    }
    .bs1-menu-nav-half{font-size: 10px;}
    .bs1-table-left { padding: 6px 6px 6px 8px; gap: 2px; }
    .bs1-table-num { font-size: 22px; }
    .bs1-table-card.occupied .bs1-table-num { font-size: 24px; }
    .bs1-table-left-customer { font-size: 9px; letter-spacing: 0.2px; }
    .bs1-table-status-label { font-size: 9px; letter-spacing: 0.3px; }
    .bs1-table-covers-pill { padding: 1px 5px; font-size: 9px; margin-top: -2px; }
    .bs1-table-covers-pill .bs1-covers-num { font-size: 9px; }
    .bs1-table-covers-pill .bs1-covers-amount { font-size: 8px; }
    .bs1-table-dots { width: 28px; height: 20px; bottom: 6px; right: 6px; }
    .bs1-table-dots span { width: 3px; height: 3px; }
    .bs1-table-divider { height: auto; }
    .bs1-table-info-amount { font-size: 13px; }
    .bs1-table-info-outlet { font-size: 10px; }
    .bs1-table-timer-pill { padding: 1px 6px; }

    /* Legend bar + search compact */
    .bs1-table-legend { padding: 0; }
    .bs1-legend-section { gap: 8px; padding: 0 8px; }
    .bs1-legend-item { font-size: 10px; gap: 4px; }
    .bs1-legend-dot { width: 9px; height: 9px; border-radius: 3px; }
    .bs1-legend-sale-item { font-size: 10px; gap: 3px; }
    .bs1-legend-search-input { height: 26px; font-size: 10px; padding: 0 8px; }

    /* Category + supercategory — smaller tiles and text at short-height resolution */
    .bs1-category-area { padding: 5px 10px; max-height: 120px; }
    .bs1-category-grid { grid-template-rows: repeat(2, 44px); gap: 4px; }
    .bs1-super-category-area .bs1-category-grid { grid-template-rows: 44px; }
    /* Multi-row super-categories at short-height — free max-height and keep full-size tiles.
       Items absorb the reduced vertical budget via their `1fr` grid rows. */
    .bs1-super-category-area.scat-rows-2 { max-height: none; }
    .bs1-super-category-area.scat-rows-2 .bs1-category-grid { grid-template-rows: repeat(2, 44px); gap: 4px; }
    .bs1-super-category-area.scat-rows-2 .bs1-category-tab { height: 44px; font-size: 10px; padding: 4px; border-radius: 7px; gap: 2px; }
    .bs1-super-category-area.scat-rows-2 .bs1-cat-nav-card { height: 44px; font-size: 10px; }
    /* scat-rows-3 is only set when hide_cat_bill is also enabled (normal category row hidden),
       so the super-category area can use the full-size tiles freed by the hidden category row. */
    .bs1-super-category-area.scat-rows-3 { max-height: none; }
    .bs1-super-category-area.scat-rows-3 .bs1-category-grid { grid-template-rows: repeat(3, 44px); gap: 4px; }
    .bs1-super-category-area.scat-rows-3 .bs1-category-tab { height: 44px; font-size: 9px; padding: 4px; border-radius: 7px; gap: 2px; }
    .bs1-super-category-area.scat-rows-3 .bs1-cat-nav-card { height: 44px; font-size: 9px; }
    .bs1-category-tab {
        height: 44px;
        font-size: 9px;
        padding: 4px;
        border-radius: 7px;
        gap: 2px;
    }
    .bs1-category-tab .bs1-cat-icon { width: 14px; height: 14px; }
    .bs1-cat-nav-card { height: 44px; font-size: 9px; }
}

/* Very short viewports — further reduce text */
@media (max-height: 580px) {
    .bs1-table-num { font-size: 18px; }
    .bs1-table-card.occupied .bs1-table-num { font-size: 20px; }
    .bs1-table-left-customer,
    .bs1-table-status-label { font-size: 8px; }
}

@media (max-width: 700px) {
    .bs1-table-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .bs1-menu-items-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .bs1-menu-item-card { padding: 8px 4px 4px; }
    .bs1-menu-item-name { font-size: 12px; }
    .bs1-menu-item-price { font-size: 8px; }
    .bs1-menu-item-img-wrap { min-height: 44px; }
    .bs1-menu-item-img-info .bs1-menu-item-name { font-size: 12px; }
    .bs1-category-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 50px); }
    .bs1-super-category-area .bs1-category-grid { grid-template-rows: 50px; }
    .bs1-super-category-area.scat-rows-2 .bs1-category-grid { grid-template-rows: repeat(2, 50px); }
    .bs1-super-category-area.scat-rows-3 .bs1-category-grid { grid-template-rows: repeat(3, 50px); }
    .bs1-category-tab { height: 50px; font-size: 10px; padding: 4px; }
    .bs1-cat-nav-card { height: 50px; font-size: 9px; }
    .bs1-nav-link-btn { display: none; }
    .bs1-nav-link-btn.enterprise { display: flex; }
    .bs1-nav-right-sep { display: none; }
    .bs1-nav-tab svg { display: none; }
    .bs1-nav-tab { padding: 0 12px; font-size: 11px; }
    .bs1-legend-item { font-size: 11px; gap: 5px; }
    .bs1-legend-count { font-size: 11px; }
    .bs1-mega-menu-columns { grid-template-columns: repeat(2, 1fr); }
    .bs1-mega-menu { padding: 14px 12px 16px; }
}

/* 50/50 split — compact the other nav chrome at mid widths but keep FIND BILL / REPORTS
   labels visible until the viewport is genuinely narrow (see the 1300px block below). */
@media (max-width: 1600px) {
    .bs1-nav-link-btn { padding: 0 10px; }
    .bs1-nav-tab { padding: 0 14px; font-size: 12px; }
    .bs1-nav-badge { padding: 4px 10px; font-size: 9px; }
    .bs1-nav-badge-group { gap: 6px; padding: 0 10px; }
}

/* Hide mega-menu item icons only on very narrow widths (phones / small tablets). */
@media (max-width: 900px) {
    .bs1-mega-menu-item .bs1-mega-item-icon,
    .bs1-mega-menu-item > i,
    .bs1-mega-menu-item > svg,
    .bs1-mega-menu-item > img {
        display: none !important;
    }
    .bs1-mega-menu-item {
        padding: 6px 10px;
        min-height: 36px;
        font-size: 12px;
        gap: 4px;
    }
    .bs1-mega-menu-columns { gap: 6px; }
}
/* On short-height viewports (e.g. 1024×665) — keep icons, shrink font,
   slightly taller rows, tighter inter-item spacing, align panel to 52px navbar */
@media (max-height: 700px) and (min-width: 901px) {
    .bs1-mega-menu {
        top: 52px;
        max-height: calc(100vh - 52px);
        padding: 10px 20px 14px;
    }
    .bs1-mega-menu-overlay { top: 52px; }
    .bs1-mega-menu-item {
        padding: 5px 10px;
        min-height: 40px;
        font-size: 11px;
        gap: 6px;
    }
    .bs1-mega-menu-item .bs1-mega-item-icon {
        width: 26px;
        height: 26px;
    }
    .bs1-mega-item-icon svg { width: 13px; height: 13px; }
    .bs1-mega-item-label { font-size: 11.5px; }
    .bs1-mega-menu-columns { gap: 2px; }
}
@media (max-width: 850px), (max-height: 650px) {
    .bs1-mega-menu-item {
        padding: 5px 8px;
        min-height: 32px;
        font-size: 11px;
    }
}

/* Shrink nav badges + other nav elements so top bar never overflows — always keep text */
@media (max-width: 1300px), (max-height: 700px) {
    .bs1-nav-badge {
        height: 42px;
        padding: 3px 10px;
        border-radius: 8px;
        font-size: 9px;
        gap: 1px;
    }
    .bs1-nav-badge .bs1-nav-badge-icon { width: 14px; height: 14px; }
    .bs1-nav-badge-group { gap: 6px; padding: 0 8px; }
    .bs1-nav-tab { padding: 0 12px; font-size: 11px; gap: 4px; }
    .bs1-nav-logo { width: 48px; padding: 0 6px; }
    .bs1-nav-logo img { width: 32px; height: 32px; }
    .bs1-legend-logo-spacer { width: 48px; }
    .bs1-nav-link-btn { padding: 0 10px; }
}
@media (max-width: 850px), (max-height: 650px) {
    .bs1-nav-badge { height: 38px; padding: 2px 8px; border-radius: 6px; font-size: 8px; gap: 1px; }
    .bs1-nav-badge .bs1-nav-badge-icon { width: 13px; height: 13px; }
    .bs1-nav-badge-group { gap: 4px; padding: 0 2px; }
    .bs1-nav-tab { padding: 0 10px; font-size: 10px; }
    .bs1-nav-logo { width: 40px; padding: 0 4px; }
    .bs1-legend-logo-spacer { width: 40px; }
    .bs1-nav-right-sep { display: none; }
    .bs1-nav-link-btn { padding: 0 8px; }
}
@media (max-width: 700px) {
    .bs1-nav-badge { width: 32px; height: 32px; padding: 0; gap: 0; }
    .bs1-nav-badge .bs1-nav-badge-label { display: none; }
    .bs1-nav-badge .bs1-nav-badge-icon { width: 14px; height: 14px; }
    .bs1-nav-badge-group { gap: 3px; padding: 0 4px; }
    .bs1-nav-tab { padding: 0 8px; font-size: 10px; min-width: 40px; }
    .bs1-legend-logo-spacer { width: 40px; }
    .bs1-nav-link-btn { display: none; }
    .bs1-nav-link-btn.enterprise { display: flex; padding: 0 6px; }
}

@media (max-width: 480px) {
    .bs1-table-grid { grid-template-columns: 1fr; }
    .bs1-menu-items-grid { grid-template-columns: repeat(2, 1fr); }
    .bs1-menu-item-name { font-size: 12px; }
    .bs1-menu-item-img-wrap { min-height: 40px; }
    .bs1-menu-item-img-info .bs1-menu-item-name { font-size: 12px; }
    .bs1-category-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 46px); }
    .bs1-super-category-area .bs1-category-grid { grid-template-rows: 46px; }
    .bs1-super-category-area.scat-rows-2 .bs1-category-grid { grid-template-rows: repeat(2, 46px); }
    .bs1-super-category-area.scat-rows-3 .bs1-category-grid { grid-template-rows: repeat(3, 46px); }
    .bs1-category-tab { height: 46px; font-size: 9px; padding: 3px; }
    .bs1-cat-nav-card { height: 46px; font-size: 9px; }
    .bs1-top-nav { height: 52px; }
    .bs1-nav-logo { width: 52px; height: 52px; }
    .bs1-nav-tabs { height: 52px; }
    .bs1-legend-logo-spacer { width: 52px; }
    .bs1-table-legend { height: 52px; }
    .bs1-nav-badge { height: 40px; padding: 0 12px; font-size: 10px; }
    .bs1-table-num { font-size: 24px; }
    .bs1-table-card.occupied .bs1-table-num { font-size: 24px; }
    .bs1-table-card { min-height: 100px; }
    .bs1-grid-pagination { right: 10px; bottom: 14px; }
    .bs1-grid-page-btn { width: 44px; height: 42px; }
    .bs1-mega-menu { top: 52px; }
    .bs1-mega-menu-columns { grid-template-columns: 1fr 1fr; }
}

/* ======================== */
/* DELIVERY ORDERS TABLE V2 */
/* ======================== */

/* Toggle button */
.bs1-orders-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
}
.bs1-orders-toggle-btn:hover {
    border-color: #4A90D9;
    color: #4A90D9;
    background: rgba(74,144,217,0.06);
}
.bs1-orders-toggle-btn.active {
    background: #FFF3E0;
    color: #E65100;
    border-color: #FFB74D;
}
.bs1-orders-toggle-btn.active:hover {
    background: #FFE0B2;
}

/* Container */
.bs1-orders-container {
    padding: 0 16px 16px;
}
.bs1-orders-table-wrap {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    overflow-x: auto;
}

/* Table */
.bs1-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}
.bs1-orders-table thead tr {
    background: var(--bg-surface-alt, #F7F8FA);
}
.bs1-orders-table thead th {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #6A6F77);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1.5px solid var(--border);
    white-space: nowrap;
}
.bs1-orders-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.bs1-orders-table tbody tr:last-child {
    border-bottom: none;
}
.bs1-orders-table tbody tr:hover {
    background: rgba(74,144,217,0.04);
}
.bs1-orders-table tbody td {
    padding: 10px 12px;
    color: var(--text-primary, #373C44);
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.4;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Bill number pill */
.bs1-order-bill-num {
    font-weight: 700;
    color: var(--text-primary, #373C44);
}
.bs1-order-sub-text {
    font-size: 11px;
    color: var(--text-muted, #6A6F77);
    display: block;
}
/* BUG-17: in the Show Orders table the aggregator order id is the value cashiers scan for,
   so render it bold and larger, on its own line below the internal bill number. */
.bs1-order-id-prominent {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #373C44);
    display: block;
}

/* Action buttons inside table */
.bs1-order-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    margin-top: 4px;
}
.bs1-order-action-btn:hover {
    border-color: #4A90D9;
    color: #4A90D9;
    background: rgba(74,144,217,0.06);
}
.bs1-order-action-btn.call {
    background: #E7F7F4;
    color: #00815C;
    border-color: #87D9C7;
}
.bs1-order-action-btn.call:hover { background: #D4F0EA; }
.bs1-order-action-btn.mfr {
    background: #ECF3FE;
    color: #2E6CD9;
    border-color: #A0C2F9;
}
.bs1-order-action-btn.mfr:hover { background: #DCEAFD; }
/* Contact Swiggy Support — orange (request a partner support call-back, doc §5.3) */
.bs1-order-action-btn.support {
    background: #FDEEE3;
    color: #C0571B;
    border-color: #F5C49B;
}
.bs1-order-action-btn.support:hover { background: #FBDFC9; }
/* CUSTOMER cell — name on top, the two actions side-by-side, then the OTP chip on its own row */
.bs1-order-cust {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.bs1-order-cust-name {
    font-weight: 600;
    color: var(--text-primary, #2C3E50);
}
/* Actions row — Call Customer + Contact Support in parallel */
.bs1-order-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.bs1-order-actions .bs1-order-action-btn {
    margin-top: 0;
    justify-content: center;
}
/* OTP row — sits below the actions */
.bs1-order-otp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.bs1-order-otp-row .bs1-order-otp-pill { margin-top: 0; }
/* Visible keyboard focus ring (a11y) on the cell's action buttons */
.bs1-order-actions .bs1-order-action-btn:focus-visible {
    outline: 2px solid #2D7DD2;
    outline-offset: 1px;
}

/* Status pill */
.bs1-order-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #ECF3FE;
    color: #2E6CD9;
    text-decoration: none;
}
.bs1-order-status-pill.rejected {
    background: #FFF0F0;
    color: #D32F2F;
}
.bs1-order-status-pill:hover {
    text-decoration: none;
    opacity: 0.85;
}

/* Rider waiting warning pill — surfaced from HS AWT callbacks */
.bs1-rider-wait-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    margin-left: 6px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #FFF8EC;
    color: #92400E;
    border: 1px solid #F59E0B;
    line-height: 1.2;
    white-space: nowrap;
}
.bs1-rider-wait-pill i { font-size: 10px; }
.bs1-rider-wait-pill.is-fee {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #DC2626;
}

/* OTP pill */
.bs1-order-otp-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    background: #FFF8E7;
    color: #8A6400;
    margin-top: 3px;
}

/* Priority pill */
.bs1-order-priority-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    background: #FF6F92;
    color: #fff;
}

/* Arriving pill */
.bs1-order-arriving-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    background: #E7F7F4;
    color: #00815C;
    margin-top: 3px;
}

/* Prep time block */
.bs1-order-prep-time {
    margin-top: 4px;
    padding: 4px 8px;
    background: #FFF8E7;
    border-radius: 6px;
    font-size: 10px;
    color: #8A6400;
}
.bs1-order-prep-danger {
    color: #D32F2F;
    font-weight: 700;
}

/* Links inside table */
.bs1-order-link {
    color: #2E6CD9;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}
.bs1-order-link:hover {
    text-decoration: underline;
}

/* ============================================================
   Global — uniform 14px border-radius across cards / buttons /
   tabs / grids / inputs. Applies at every viewport. Round /
   50% elements (modal-close, avatars, etc.) are excluded.
   ============================================================ */
.bs1-table-card,
.bs1-menu-item-card,
.bs1-menu-item-card.bs1-img-card,
.bs1-category-tab,
.bs1-menu-nav-card,
.bs1-cat-nav-card,
.bs1-menu-items-grid,
.bs1-category-grid,
.bs1-mega-menu,
.bs1-mega-menu-item,
.bs1-table-legend,
.bs1-top-nav,
.bs1-nav-badge,
.bs1-nav-badge-icon,
.bs1-orders-toggle-btn,
.bs1-grid-page-btn,
.bs1-table-covers-pill,
.bs1-legend-search-input,
.bs1-legend-search-kb {
    border-radius: 8px !important;
}