/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Jan 29, 2025, 7:03:27 PM
    Author     : Jam-PC
*/
/* Whitelabel: overridden per build in resources/css/brands/*.css */
:root {
    --brand-primary: var(--brand-primary);
    --brand-primary-deep: var(--brand-primary-deep);
    --brand-accent: var(--brand-accent);
    --brand-selection-bg: var(--brand-selection-bg);
}

.x-input-wrap-el {
    border-radius: 5px;
}
label,span{
    font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, sans-serif !important;
    /* font-family: "HankenGrotesk", "Noto Sans", sans-serif !important; */
}

/* ============================================================
   RMS Order Panel — Category strip buttons (touch-first)
   ============================================================ */
.rms-category-strip {
    -webkit-overflow-scrolling: touch;
}

.rms-category-btn .x-inner-el {
    min-width: 120px;
    padding: 0 16px;
    border-radius: 10px;
    background: #F5F6F8;
    border: 1px solid #DDE1E7;
}

.rms-category-btn .x-text-el {
    font-size: 13px;
    font-weight: 700;
    color: #1A1F2E;
    line-height: 48px;
}

.rms-category-btn.rms-category-btn--active .x-inner-el {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.rms-category-btn.rms-category-btn--active .x-text-el {
    color: #FFFFFF;
}

/* ============================================================
   RMS Order Panel — primary action buttons (FIRE / BILL)
   Ensure high contrast even under theme overrides.
   ============================================================ */
.rms-fire-btn .x-inner-el {
    background: var(--brand-accent) !important; /* deep amber */
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 14px rgba(180, 83, 9, 0.24) !important;
}
.rms-fire-btn .x-text-el {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: 0.02em;
}

.rms-bill-btn .x-inner-el {
    background: var(--brand-primary-deep) !important; /* deeper navy */
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 14px rgba(11, 27, 51, 0.22) !important;
}
.rms-bill-btn .x-text-el {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: 0.02em;
}

/* Disabled state readability */
.rms-fire-btn.x-disabled .x-inner-el,
.rms-bill-btn.x-disabled .x-inner-el {
    background: #DDE1E7 !important;
    box-shadow: none !important;
}
.rms-fire-btn.x-disabled .x-text-el,
.rms-bill-btn.x-disabled .x-text-el {
    color: #6B7280 !important;
}

/* ============================================================
   RMS Shift & EOD — action buttons
   Keep readable even when disabled (touch-first).
   ============================================================ */
.rms-shift-action-btn .x-inner-el {
    border-radius: 12px !important;
    border: none !important;
    min-height: 52px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10) !important;
}
.rms-shift-action-btn .x-text-el {
    font-weight: 900 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em;
}
.rms-shift-action-btn .x-icon-el {
    color: inherit !important;
}

.rms-shift-action-btn--primary .x-inner-el {
    background: var(--brand-primary-deep) !important; /* deeper navy */
}
.rms-shift-action-btn--primary .x-text-el,
.rms-shift-action-btn--primary .x-icon-el {
    color: #FFFFFF !important;
}

.rms-shift-action-btn--warn .x-inner-el {
    background: var(--brand-accent) !important; /* deep amber */
}
.rms-shift-action-btn--warn .x-text-el,
.rms-shift-action-btn--warn .x-icon-el {
    color: #FFFFFF !important;
}

.rms-shift-action-btn--danger .x-inner-el {
    background: #8B1E1E !important; /* deep red */
}
.rms-shift-action-btn--danger .x-text-el,
.rms-shift-action-btn--danger .x-icon-el {
    color: #FFFFFF !important;
}

.rms-shift-action-btn--neutral .x-inner-el {
    background: #FFFFFF !important;
    border: 2px solid #DDE1E7 !important;
    box-shadow: none !important;
}
.rms-shift-action-btn--neutral .x-text-el,
.rms-shift-action-btn--neutral .x-icon-el {
    color: #1A1F2E !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}

/* Toolbar variant (smaller height, strong contrast) */
.rms-shift-action-btn--toolbar .x-inner-el {
    background: #2E7D52 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 14px rgba(46, 125, 82, 0.20) !important;
    min-height: 48px;
}
.rms-shift-action-btn--toolbar .x-text-el,
.rms-shift-action-btn--toolbar .x-icon-el {
    color: #FFFFFF !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}

/* Disabled state: keep text visible but clearly disabled */
.rms-shift-action-btn.x-disabled {
    opacity: 1 !important;
}
.rms-shift-action-btn.x-disabled .x-inner-el {
    opacity: 0.55;
    filter: grayscale(10%);
    box-shadow: none !important;
}
.rms-shift-action-btn.x-disabled .x-text-el,
.rms-shift-action-btn.x-disabled .x-icon-el {
    opacity: 0.95 !important;
}

/* ============================================================
   RMS KDS (Kitchen Display) — button system (dark theme)
   ============================================================ */
.rms-kds-display .x-toolbar {
    background: #111827;
}

.rms-kds-toolbar-btn .x-inner-el {
    background: transparent !important;
    border: 1px solid #4A5568 !important;
    border-radius: 10px !important;
    padding: 0 14px;
}
.rms-kds-toolbar-btn .x-text-el {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em;
}
.rms-kds-toolbar-btn--accent .x-inner-el {
    border-color: #F59E0B !important;
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.18) !important;
}
.rms-kds-toolbar-btn--accent .x-text-el {
    color: #F59E0B !important;
}

.rms-kds-chip .x-inner-el {
    background: rgba(17, 24, 39, 0.35) !important;
    border: 1px solid #374151 !important;
    border-radius: 999px !important;
    padding: 0 14px;
}
.rms-kds-chip .x-text-el {
    color: #9CA3AF !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
.rms-kds-chip--active .x-inner-el {
    background: var(--brand-primary) !important;
    border-color: #4A6FA5 !important;
    box-shadow: 0 6px 14px rgba(26, 43, 74, 0.28) !important;
}
.rms-kds-chip--active .x-text-el {
    color: #FFFFFF !important;
}

.rms-kds-bump-btn .x-inner-el {
    background: #1F2937 !important;
    border: 1px solid #F59E0B !important;
    border-radius: 10px !important;
}
.rms-kds-bump-btn .x-text-el {
    color: #F59E0B !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rms-kds-bump-btn--done .x-inner-el {
    background: #2E7D52 !important;
    border-color: #2E7D52 !important;
}
.rms-kds-bump-btn--done .x-text-el {
    color: #FFFFFF !important;
}
.rms-kds-bump-btn.x-disabled .x-inner-el,
.rms-kds-bump-btn.x-disabled .x-text-el {
    opacity: 1 !important;
}

.rms-kds-ticket-card .x-body-el {
    background: #252D3D !important;
}

/* ============================================================
   RMS Table/Zone Manager Dialog — tabs + footer buttons
   ============================================================ */
.rms-tzm-dialog .rms-tzm-close-btn .x-inner-el {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 10px !important;
}
.rms-tzm-dialog .rms-tzm-close-btn .x-text-el {
    color: #FFFFFF !important;
    font-weight: 900 !important;
}

.rms-tzm-dialog .rms-tzm-tab .x-inner-el {
    background: rgba(255,255,255,0.16) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 10px 10px 0 0 !important;
}
.rms-tzm-dialog .rms-tzm-tab .x-text-el {
    color: #FFFFFF !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em;
}
.rms-tzm-dialog .rms-tzm-tab--active .x-inner-el {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}
.rms-tzm-dialog .rms-tzm-tab--active .x-text-el {
    color: var(--brand-primary) !important;
}

.rms-tzm-dialog .rms-tzm-btn .x-inner-el {
    border-radius: 10px !important;
    padding: 0 14px;
}
.rms-tzm-dialog .rms-tzm-btn .x-text-el {
    font-weight: 900 !important;
    letter-spacing: 0.02em;
}
.rms-tzm-dialog .rms-tzm-btn--primary .x-inner-el {
    background: var(--brand-primary) !important;
    border: none !important;
}
.rms-tzm-dialog .rms-tzm-btn--primary .x-text-el {
    color: #FFFFFF !important;
}
.rms-tzm-dialog .rms-tzm-btn--ghost .x-inner-el {
    background: #FFFFFF !important;
    border: 1px solid #DDE1E7 !important;
}
.rms-tzm-dialog .rms-tzm-btn--ghost .x-text-el {
    color: #111827 !important;
}
.rms-tzm-dialog .rms-tzm-btn--danger .x-inner-el {
    background: #C0392B !important;
    border: none !important;
}
.rms-tzm-dialog .rms-tzm-btn--danger .x-text-el {
    color: #FFFFFF !important;
}
.grid-totals{
    border-top: 1px solid #ddd
}
.x-show-selection > .x-listitem.x-selected{
    background-color: #eaf6ff !important;
    border-color: #fff !important
}
.btn-red div.x-inner-el{
    background: #fff;
    color: #e85347;
}
.btn-green div.x-inner-el{
    background: #fff;
    color: #1ee0ac;
}
.btn-default div.x-inner-el{
    background: #fff;
    color: #0971fe;
}
.x-label-el{
    padding: 12px 10px 5px 0
}
.btn-footer div.x-inner-el div.x-body-el div.x-icon-el:before{
    font-size:15px;
}
.btn-red div.x-inner-el div.x-body-el div.x-icon-el:before{
   color: #e85347;
}
.btn-green div.x-inner-el div.x-body-el div.x-icon-el:before{
   color: #1ee0ac;
}
.btn-default div.x-inner-el div.x-body-el div.x-icon-el:before{
   color: #0971fe;
}
.btn-footer div.x-inner-el div.x-body-el .x-text-el{
    font-size:10px;
}

.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    background-color: white;
}

.transaction-info {
    display: flex;
    flex-direction: column;
}

.transaction-title {
    font-weight: bold;
    color: #333;
}

.transaction-date {
    font-size: 12px;
    color: #777;
}
.transaction-details {
    font-size: 10px;
    color: #777;
}

.transaction-amount {
    font-weight: 700;
    font-size: 16px;
    padding: 5px 10px;
    color: #2e7d32;
}
.x-textfield .x-input-el{
    min-height: auto !important; 
}

.x-field:not(.x-field-solo).x-layout-vbox-item{
    margin-top: 0px !important;
}

.x-field {
    margin-bottom: 0px !important;
}

/* Hide number input spinners for OTP verification fields - using ExtJS pattern */
.otp-verification .x-textfield input[type="number"]::-webkit-inner-spin-button,
.otp-verification .x-textfield input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-verification .x-textfield input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Also target the input element directly */
.otp-verification input[type="number"]::-webkit-inner-spin-button,
.otp-verification input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

/* ============================================================
   HMS — Hotel Management System Styles
   ============================================================ */

/* KPI Tiles */
.hms-kpi-tile {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    padding: 12px 16px;
    min-height: 100px;
    flex: 1;
    margin: 0 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hms-kpi-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    margin-bottom: 6px;
}
.hms-kpi-value {
    font-size: 32px;
    font-weight: 700;
    color: #1A1F2E;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Room Status Tiles */
.hms-room-tile {
    border-radius: 8px;
    padding: 8px;
    margin: 4px;
    min-width: 100px;
    min-height: 70px;
    cursor: pointer;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hms-room-number {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.hms-room-status-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 2px 6px;
    display: inline-block;
}
.hms-room-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    opacity: 0.85;
}

/* Status colors */
.hms-status-vc  { background-color: #2E7D52; }
.hms-status-vd  { background-color: #C97B1A; }
.hms-status-oc  { background-color: var(--brand-primary); }
.hms-status-od  { background-color: #4A6FA5; }
.hms-status-ooo { background-color: #C0392B; }
.hms-status-oos { background-color: #6B7280; }
.hms-status-dnd { background-color: #6B2FA0; }
.hms-status-mur { background-color: #E8943A; }

/* Room Status Board — toolbar + filter chips (plain ui: no nested Material boxes) */
.hms-room-status-toolbar {
    background: #F5F6F8 !important;
    border-bottom: 1px solid #E5E8EF !important;
}

.hms-filter-chip.x-button {
    min-height: 42px !important;
    padding: 0 16px !important;
    margin: 0 6px 8px 0 !important;
    border-radius: 21px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid #DDE1E7 !important;
    box-shadow: 0 1px 2px rgba(26, 31, 46, 0.06) !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Strip all inner frames so only the outer pill is visible */
.hms-filter-chip .x-inner-el,
.hms-filter-chip .x-body-el,
.hms-filter-chip .x-wrap-el,
.hms-filter-chip .x-text-el {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.hms-filter-chip .x-body-el {
    min-height: 40px !important;
    padding: 0 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.hms-filter-chip .x-text-el {
    color: #1A1F2E !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    line-height: 1.2 !important;
}

.hms-filter-chip.hms-filter-active {
    background: #E8EDF7 !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 1px var(--brand-primary), 0 2px 6px rgba(26, 43, 74, 0.12) !important;
}
.hms-filter-chip.hms-filter-active .x-text-el {
    color: var(--brand-primary) !important;
}

/* Status accent: colored inset bar (single surface, no inner white box) */
.hms-filter-chip[class*='hms-filter-accent-'] {
    padding-left: 14px !important;
    border-left-width: 5px !important;
    border-left-style: solid !important;
}
.hms-filter-chip.hms-filter-accent-vc  { border-left-color: #2E7D52 !important; }
.hms-filter-chip.hms-filter-accent-vd  { border-left-color: #C97B1A !important; }
.hms-filter-chip.hms-filter-accent-oc  { border-left-color: var(--brand-primary) !important; }
.hms-filter-chip.hms-filter-accent-od  { border-left-color: #4A6FA5 !important; }
.hms-filter-chip.hms-filter-accent-ooo { border-left-color: #C0392B !important; }
.hms-filter-chip.hms-filter-accent-dnd { border-left-color: #6B2FA0 !important; }

/* Floor chips: same pill as status filters (class hms-floor-chip + hms-filter-chip in JS) */

/* Room detail dialog — Change Status (theme often overrides inline button styles) */
.hms-room-status-dialog .hms-status-change-btn {
    border: none !important;
    border-radius: 8px !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}
.hms-room-status-dialog .hms-status-change-btn .x-inner-el,
.hms-room-status-dialog .hms-status-change-btn .x-body-el {
    background: transparent !important;
}
/* Do NOT hide .x-text-el — Ext Modern renders button `html` inside it; hiding removed all labels */
.hms-room-status-dialog .hms-status-change-btn .x-text-el {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 44px !important;
    line-height: normal !important;
}
.hms-room-status-dialog .hms-status-change-btn .x-body-el {
    align-items: center !important;
    justify-content: center !important;
}
.hms-room-status-dialog .hms-sc-btn-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px 4px;
    pointer-events: none;
}
.hms-room-status-dialog .hms-sc-code {
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    letter-spacing: 0.04em;
}
.hms-room-status-dialog .hms-sc-label {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.25;
    max-width: 148px;
}
.hms-room-status-dialog .hms-status-change-btn.hms-status-change-vc  { background: #2E7D52 !important; }
.hms-room-status-dialog .hms-status-change-btn.hms-status-change-vd  { background: #C97B1A !important; }
.hms-room-status-dialog .hms-status-change-btn.hms-status-change-ooo { background: #C0392B !important; }
.hms-room-status-dialog .hms-status-change-btn.hms-status-change-mur { background: #E8943A !important; }

/* Booking status badges */
.hms-badge {
    display: inline-block;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}
.hms-badge-tentative  { background-color: #78909C; }
.hms-badge-confirmed  { background-color: var(--brand-primary); }
.hms-badge-inhouse    { background-color: #2E7D52; }
.hms-badge-checkedout { background-color: #9E9E9E; }
.hms-badge-cancelled  { background-color: #C0392B; }
.hms-badge-noshow     { background-color: #C0392B; }

/* Priority badges (maintenance) */
.hms-priority-low    { background-color: #6B7280; }
.hms-priority-medium { background-color: #C97B1A; }
.hms-priority-high   { background-color: #E8943A; }
.hms-priority-urgent { background-color: #C0392B; }

/* Folio amount styles */
.hms-folio-balance-debit  { color: #C0392B; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hms-folio-balance-credit { color: #2E7D52; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hms-folio-amount         { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.hms-charge-voided        { text-decoration: line-through; color: #9E9E9E; }

/* Status legend strip */
.hms-legend-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 12px;
    background: #F5F6F8;
    border-top: 1px solid #DDE1E7;
    gap: 12px;
    flex-wrap: wrap;
}
.hms-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6B7280;
}
.hms-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Quick action tiles (dashboard) */
.hms-quick-action {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    min-width: 80px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-primary);
    text-align: center;
    padding: 8px;
    gap: 6px;
}
.hms-quick-action:active { background: var(--brand-selection-bg); }

/* Numpad (cash tender) */
.hms-numpad-btn {
    min-width: 64px;
    min-height: 64px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #DDE1E7;
    background: #fff;
    cursor: pointer;
}
.hms-numpad-display {
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding: 8px 12px;
    background: #F5F6F8;
    border-radius: 6px;
    border: 1px solid #DDE1E7;
    min-height: 56px;
}

/* Night audit */
.hms-audit-date-card {
    background: var(--brand-primary);
    color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hms-audit-date-label { font-size: 12px; text-transform: uppercase; opacity: 0.7; letter-spacing: 0.06em; }
.hms-audit-date-value { font-size: 28px; font-weight: 700; margin-top: 4px; }
.hms-audit-badge-open   { background: #2E7D52; color: #fff; border-radius: 4px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.hms-audit-badge-locked { background: #C0392B; color: #fff; border-radius: 4px; padding: 3px 10px; font-size: 12px; font-weight: 700; }

/* ============================================================
   RMS — Restaurant Management System Styles
   ============================================================ */

/* Menu item dialog: consistent label column rhythm on narrow modals */
.rms-item-form .x-form-field {
    margin-bottom: 0;
}
.rms-item-form .x-field-label {
    font-weight: 500;
    color: #374151;
}

/* Floor Plan — scroll body inset so cards are not flush with the edge */
.rms-floorplan-grid {
    padding-left: 16px;
    padding-top: 12px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

/* Space between tiles: Modern DataView wraps each item in .x-dataview-item */
.rms-floorplan-grid .x-dataview-item {
    margin: 0 12px 12px 0;
    flex: 0 0 auto;
}

/* Floor Plan table cards */
.rms-table-card {
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 120px;
    min-height: 90px;
    cursor: pointer;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.rms-table-card:active { transform: scale(0.97); }
.rms-table-number { font-size: 18px; font-weight: 700; }
.rms-table-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.rms-table-covers { font-size: 11px; opacity: 0.8; }
.rms-table-elapsed { font-size: 11px; font-weight: 600; }
.rms-table-server  { font-size: 10px; opacity: 0.7; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/* Table status background colors */
.rms-status-available   { background-color: #2E7D52; }
.rms-status-occupied    { background-color: var(--brand-primary); }
.rms-status-reserved    { background-color: #4A6FA5; }
.rms-status-for-clearing{ background-color: #E8943A; }
.rms-status-blocked     { background-color: #6B7280; }

/* Reservation status badges */
.rms-res-confirmed { background: var(--brand-primary); color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.rms-res-tentative { background: #78909C; color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.rms-res-arrived   { background: #2E7D52; color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.rms-res-cancelled { background: #C0392B; color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.rms-res-noshow    { background: #C0392B; color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; }

/* Menu item cards */
.rms-menu-item-card {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    min-height: 80px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid transparent;
    transition: border-color 120ms ease;
}
.rms-menu-item-card:active { border-color: var(--brand-primary); }
.rms-menu-item-name  { font-size: 13px; font-weight: 600; color: #1A1F2E; line-height: 1.3; }
.rms-menu-item-price { font-size: 15px; font-weight: 700; color: #E8943A; font-variant-numeric: tabular-nums; }
.rms-menu-item-86d   { opacity: 0.4; position: relative; }
.rms-menu-item-86d::after { content: '86'; position: absolute; top: 6px; right: 6px; background: #C0392B; color: #fff; border-radius: 3px; padding: 1px 5px; font-size: 10px; font-weight: 700; }

/* Order basket */
.rms-basket-line {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #F0F0F0;
    min-height: 56px;
}
.rms-basket-item-name     { flex: 1; font-size: 13px; font-weight: 500; color: #1A1F2E; }
.rms-basket-modifier-text { font-size: 11px; color: #6B7280; margin-top: 2px; }
.rms-basket-qty-ctrl      { display: flex; align-items: center; gap: 4px; }
.rms-basket-qty-btn       { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #DDE1E7; background: #F5F6F8; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rms-basket-qty-num       { width: 28px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rms-basket-line-total    { width: 70px; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #1A1F2E; }
.rms-basket-voided        { opacity: 0.4; text-decoration: line-through; }

/* KDS dark theme */
.rms-kds-ticket {
    background: #252D3D;
    border-radius: 8px;
    padding: 0;
    min-width: 220px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}
.rms-kds-ticket-header {
    padding: 10px 14px;
    background: #1A2334;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rms-kds-table-num { font-size: 20px; font-weight: 700; color: #fff; }
.rms-kds-time-badge { border-radius: 4px; padding: 3px 8px; font-size: 11px; font-weight: 700; color: #fff; }
.rms-kds-time-green  { background: #2E7D52; }
.rms-kds-time-amber  { background: #C97B1A; }
.rms-kds-time-red    { background: #C0392B; animation: rms-pulse 1s infinite; }
.rms-kds-item-row { padding: 8px 14px; border-bottom: 1px solid #1E2535; }
.rms-kds-item-text { font-size: 13px; color: #E8EAED; font-weight: 500; }
.rms-kds-mod-text  { font-size: 11px; color: #8A9BB3; margin-top: 2px; }
.rms-kds-bump-btn  { margin: 10px; padding: 12px; background: #E8943A; color: #fff; border-radius: 6px; font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.rms-kds-bump-btn:active { background: #c97a2a; }

@keyframes rms-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* Bill panel */
.rms-bill-item-row { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid #F0F0F0; min-height: 52px; }
.rms-bill-item-name  { flex: 1; font-size: 13px; color: #1A1F2E; }
.rms-bill-item-qty   { width: 40px; text-align: center; font-size: 12px; color: #6B7280; }
.rms-bill-item-price { width: 80px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: #1A1F2E; }
.rms-bill-subtotal-row { display: flex; justify-content: space-between; padding: 6px 12px; font-size: 13px; color: #6B7280; }
.rms-bill-total-row    { display: flex; justify-content: space-between; padding: 10px 12px; font-size: 15px; font-weight: 700; border-top: 2px solid #DDE1E7; font-variant-numeric: tabular-nums; }
.rms-grand-total { font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; color: #1A1F2E; }

/* Discount tiles */
.rms-discount-tile {
    flex: 1;
    min-height: 56px;
    border-radius: 6px;
    border: 2px solid #DDE1E7;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-primary);
    cursor: pointer;
    text-align: center;
    padding: 6px;
    transition: border-color 150ms ease, background 150ms ease;
}
.rms-discount-tile.selected { border-color: var(--brand-primary); background: var(--brand-selection-bg); }

/* Payment method tiles */
.rms-pay-tile {
    flex: 1;
    min-height: 60px;
    border-radius: 8px;
    border: 2px solid #DDE1E7;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    gap: 4px;
    transition: border-color 150ms ease, background 150ms ease;
}
.rms-pay-tile.selected { border-color: var(--brand-primary); background: var(--brand-selection-bg); }
.rms-pay-tile-icon { font-size: 20px; }

/* Receipt */
.rms-receipt {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 16px;
    background: #fff;
    color: #1A1F2E;
}
.rms-receipt-header { text-align: center; margin-bottom: 8px; }
.rms-receipt-company { font-size: 14px; font-weight: 700; }
.rms-receipt-divider { border-top: 1px dashed #ccc; margin: 6px 0; }
.rms-receipt-row { display: flex; justify-content: space-between; }
.rms-receipt-total { font-weight: 700; font-size: 13px; }
.rms-receipt-watermark {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 48px; font-weight: 900; color: rgba(192,57,43,0.18);
    pointer-events: none; white-space: nowrap; letter-spacing: 0.1em;
}

/* KPI tiles (RMS dashboard) */
.rms-kpi-tile {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 14px 18px;
    flex: 1;
    margin: 0 6px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rms-kpi-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #6B7280; margin-bottom: 6px; }
.rms-kpi-value { font-size: 30px; font-weight: 700; color: #1A1F2E; font-variant-numeric: tabular-nums; }

/* Quick action tiles (RMS dashboard) */
.rms-quick-tile {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    min-width: 80px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-primary);
    text-align: center;
    padding: 8px;
    gap: 6px;
    transition: background 120ms ease;
}
.rms-quick-tile:active { background: var(--brand-selection-bg); }

/* HMS Check-In — primary submit (high contrast, touch) */
.hms-checkin-complete-btn .x-inner-el {
    background: var(--brand-primary) !important;
    border: 2px solid var(--brand-primary) !important;
    border-radius: 8px !important;
}
.hms-checkin-complete-btn .x-text-el,
.hms-checkin-complete-btn .x-icon-el {
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}
.hms-checkin-complete-btn.x-button-pressing .x-inner-el {
    background: #243a5e !important;
}