/* Business themes for hotel, hospital, event and shop panels.
   Loaded by includes/vertical_panel_theme.php, which sets html.vp.vp-<skin>.vp-light.vp-page-<file>. */

/* ---------- Tokens per business ---------- */
html.vp-hotel {
  /* Chettinad heritage stay: lime-wash walls, terracotta, teak, Athangudi tiles */
  --vp-bg: #F6F0E4; --vp-bg2: #EFE5D2; --vp-surface: #FFFCF5; --vp-line: #E2D3B8;
  --vp-ink: #2B1D14; --vp-muted: #75604B;
  --vp-accent: #A4452B; --vp-accent-deep: #82331E; --vp-accent-soft: rgba(164,69,43,.10); --vp-on-accent: #FFFCF5;
  --vp-accent2: #B7862C; --vp-ok: #3F7D4E; --vp-warn: #B7862C; --vp-danger: #A3271B;
  --vp-side: #3A2618; --vp-side-ink: #F6F0E4;
  --vp-head: "Fraunces", Georgia, serif; --vp-body: "Mukta Malar", system-ui, sans-serif; --vp-num: "Mukta Malar", system-ui, sans-serif;
  --vp-strip-h: 8px;
  --vp-strip:
    linear-gradient(#5A3A22,#5A3A22) top / 100% 1px no-repeat,
    linear-gradient(#5A3A22,#5A3A22) bottom / 100% 1px no-repeat,
    repeating-conic-gradient(from 45deg, #A4452B 0 25%, #EFE3C8 0 50%) 0 1px / 6px 6px;
}
html.vp-hospital {
  /* Calm ward: surgical teal on white; red only for emergency */
  --vp-bg: #F3F7F7; --vp-bg2: #E8F0F0; --vp-surface: #FFFFFF; --vp-line: #D5E2E2;
  --vp-ink: #0F2A2A; --vp-muted: #557070;
  --vp-accent: #0B6E6E; --vp-accent-deep: #08575A; --vp-accent-soft: rgba(11,110,110,.09); --vp-on-accent: #FFFFFF;
  --vp-accent2: #3D6FB6; --vp-ok: #2E7D4F; --vp-warn: #A8711B; --vp-danger: #C62828;
  --vp-side: #0F2A2A; --vp-side-ink: #E8F0F0;
  --vp-head: "IBM Plex Sans", system-ui, sans-serif; --vp-body: "IBM Plex Sans", "Noto Sans Tamil", system-ui, sans-serif; --vp-num: "IBM Plex Mono", ui-monospace, monospace;
  --vp-strip-h: 3px;
  --vp-strip: linear-gradient(90deg, #0B6E6E 0 92%, #C62828 92% 93%, #0B6E6E 93%);
}
html.vp-event {
  /* Kalyana mandapam: marigold, mango leaf, jasmine white, kumkum */
  --vp-bg: #FFFAF0; --vp-bg2: #FBEFD9; --vp-surface: #FFFFFF; --vp-line: #EEDCB8;
  --vp-ink: #2A1A0C; --vp-muted: #7A6248;
  --vp-accent: #D9700F; --vp-accent-deep: #B35A08; --vp-accent-soft: rgba(217,112,15,.11); --vp-on-accent: #FFFFFF;
  --vp-accent2: #2F6B2A; --vp-ok: #2F6B2A; --vp-warn: #C08A12; --vp-danger: #A3271B;
  --vp-side: #24401F; --vp-side-ink: #FFF6E6;
  --vp-head: "Baloo Thambi 2", system-ui, sans-serif; --vp-body: "Baloo Thambi 2", system-ui, sans-serif; --vp-num: "Baloo Thambi 2", system-ui, sans-serif;
  --vp-strip-h: 12px;
  --vp-strip:
    radial-gradient(circle at 6px 3px, #F29A1F 2.6px, transparent 3px) 0 0 / 12px 12px,
    linear-gradient(135deg, #2F6B2A 25%, transparent 25%) -6px 2px / 12px 12px,
    linear-gradient(225deg, #2F6B2A 25%, transparent 25%) -6px 2px / 12px 12px,
    #FFFAF0;
}
html.vp-shop {
  /* Billing counter: thermal paper, ink black, price-tag yellow */
  --vp-bg: #F4F3EE; --vp-bg2: #EAE8E0; --vp-surface: #FFFFFF; --vp-line: #DCD9CE;
  --vp-ink: #161616; --vp-muted: #5E5B53;
  --vp-accent: #161616; --vp-accent-deep: #000000; --vp-accent-soft: rgba(255,210,63,.35); --vp-on-accent: #FFD23F;
  --vp-accent2: #1F4FD1; --vp-ok: #217A3C; --vp-warn: #9A6B00; --vp-danger: #B42318;
  --vp-side: #161616; --vp-side-ink: #FAFAF7;
  --vp-head: "Archivo", system-ui, sans-serif; --vp-body: "Archivo", "Noto Sans Tamil", system-ui, sans-serif; --vp-num: "IBM Plex Mono", ui-monospace, monospace;
  --vp-strip-h: 6px;
  --vp-strip:
    linear-gradient(#FFD23F,#FFD23F) top / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, #161616 0 6px, transparent 6px 10px) bottom / 100% 1px no-repeat;
}

/* ---------- Map every page's own variables onto the tokens (light) ---------- */
html.vp.vp-light {
  color-scheme: light;
  /* staff dashboards, guest menus, b2b shop */
  --bg: var(--vp-bg); --bg2: var(--vp-bg2); --sidebar-bg: var(--vp-surface);
  --card: var(--vp-surface); --card-hover: var(--vp-bg2); --border: var(--vp-line);
  --text: var(--vp-ink); --text2: var(--vp-muted);
  --accent: var(--vp-accent); --accent-dim: var(--vp-accent-soft); --accent2: var(--vp-accent2);
  --gold: var(--vp-accent2); --pink: var(--vp-accent2); --teal: var(--vp-accent);
  --success: var(--vp-ok); --green: var(--vp-ok); --warn: var(--vp-warn); --amber: var(--vp-warn);
  --danger: var(--vp-danger); --rose: var(--vp-danger);
  /* staff_login, hospital cashier, shared dashboard header */
  --bg-dark: var(--vp-bg); --bg-color: var(--vp-bg); --card-bg: var(--vp-surface); --card-border: var(--vp-line);
  --text-primary: var(--vp-ink); --text-secondary: var(--vp-muted); --text-muted: var(--vp-muted);
  --accent-violet: var(--vp-accent); --accent-glow: var(--vp-accent-soft);
  --accent-emerald: var(--vp-ok); --accent-cyan: var(--vp-accent); --accent-rose: var(--vp-danger);
  /* owner login.php */
  --ac: var(--vp-accent); --ac-deep: var(--vp-accent-deep); --tint: var(--vp-accent-soft);
  --page: var(--vp-bg); --ink: var(--vp-ink); --ink2: var(--vp-muted); --line: var(--vp-line);
  --side: var(--vp-side); --side-ink: var(--vp-side-ink);
}
html.vp-shop.vp-light { --ac: #161616; --ac-deep: #000; --tint: #FFF4C7; --accent-glow: rgba(255,210,63,.25); }

html.vp.vp-light body {
  background-color: var(--vp-bg) !important;
  background-image: none !important;
  color: var(--vp-ink) !important;
}

/* ---------- Type ---------- */
html.vp body, html.vp button, html.vp input, html.vp select, html.vp textarea {
  font-family: var(--vp-body) !important;
}
html.vp h1, html.vp h2, html.vp .page-title, html.vp .navbar .brand-name {
  font-family: var(--vp-head) !important;
  letter-spacing: -.005em;
}
html.vp-hotel h1, html.vp-hotel h2, html.vp-hotel .page-title { font-weight: 600 !important; }
html.vp [class*="stat-val"], html.vp [class*="kpi"] strong, html.vp [class*="token"],
html.vp [class*="price"], html.vp [class*="amount"], html.vp [class*="total"] {
  font-variant-numeric: tabular-nums;
}
html.vp-hospital [class*="token"], html.vp-shop [class*="price"], html.vp-shop [class*="amount"], html.vp-shop [class*="total"] {
  font-family: var(--vp-num) !important;
}

/* Sentence case everywhere */
html.vp [class], html.vp label, html.vp th, html.vp h3, html.vp h4, html.vp h5, html.vp h6 {
  text-transform: none !important;
}
html.vp th, html.vp label, html.vp [class*="label"], html.vp [class*="badge"], html.vp [class*="tag"] {
  letter-spacing: .01em !important;
}

/* ---------- Signature strip at the top of every panel ---------- */
html.vp body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--vp-strip-h);
  background: var(--vp-strip); z-index: 2147483000; pointer-events: none;
}
html.vp .navbar { border-bottom: 1px solid var(--vp-line) !important; }

/* ---------- Light form controls and surfaces ---------- */
html.vp.vp-light input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.vp.vp-light select, html.vp.vp-light textarea {
  background-color: var(--vp-surface) !important;
  color: var(--vp-ink) !important;
  border-color: var(--vp-line) !important;
}
html.vp.vp-light input::placeholder, html.vp.vp-light textarea::placeholder { color: var(--vp-muted) !important; opacity: .8; }
html.vp.vp-light option { background: var(--vp-surface); color: var(--vp-ink); }
html.vp :focus-visible { outline: 2px solid var(--vp-accent) !important; outline-offset: 2px; }

/* Shared light fixes for hard-coded dark chrome */
html.vp.vp-light body > header:not(.navbar) {
  background: var(--vp-surface) !important; color: var(--vp-ink) !important;
  border-bottom: 1px solid var(--vp-line) !important; box-shadow: none !important;
}
html.vp.vp-light .tab-nav, html.vp.vp-light .nav-tabs { background: var(--vp-bg2) !important; border-color: var(--vp-line) !important; }
html.vp.vp-light .toast { background: var(--vp-ink) !important; color: var(--vp-surface) !important; border-color: var(--vp-ink) !important; box-shadow: 0 10px 30px rgba(0,0,0,.15) !important; }
html.vp.vp-light .toast.err { background: var(--vp-danger) !important; }
html.vp.vp-light .toast.ok { background: var(--vp-ok) !important; }
html.vp.vp-light h1, html.vp.vp-light h2, html.vp.vp-light h3 { color: var(--vp-ink); }

/* Owner dashboard (shared header + restaurant-style dashboard.php) */
html.vp.vp-light a[style*="rgba(31,41,55"], html.vp.vp-light div[style*="rgba(31,41,55"] {
  background: var(--vp-surface) !important; border-color: var(--vp-line) !important;
}
html.vp.vp-light a[style*="rgba(31,41,55"]:hover { border-color: var(--vp-accent) !important; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
html.vp.vp-light div[style*="box-shadow:0 10px 30px rgba(0,0,0,0.3)"] { box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; }
html.vp .navbar .nav-logo-icon {
  background: var(--vp-accent) !important; color: var(--vp-on-accent) !important; box-shadow: none !important;
}
html.vp .navbar .nav-logo-text { font-family: var(--vp-head) !important; }
html.vp.vp-light .navbar .nav-logo-tag {
  background: var(--vp-accent-soft) !important; color: var(--vp-accent) !important; border-color: transparent !important;
}

/* Supervisor / front desk / nurse station (same file in all four businesses) */
html.vp-page-supervisor_dashboard .header { background: var(--vp-surface) !important; border-bottom: 1px solid var(--vp-line) !important; top: var(--vp-strip-h) !important; }
html.vp-page-supervisor_dashboard .header h1, html.vp-page-supervisor_dashboard .stat-card .num, html.vp-page-supervisor_dashboard .request-card .origin { color: var(--vp-ink) !important; }
html.vp-page-supervisor_dashboard .header .role-badge { background: var(--vp-accent-soft) !important; color: var(--vp-accent) !important; }
html.vp-page-supervisor_dashboard .header .logout { color: var(--vp-muted) !important; border-color: var(--vp-line) !important; }
html.vp-page-supervisor_dashboard .stat-card, html.vp-page-supervisor_dashboard .request-card { background: var(--vp-surface) !important; border-color: var(--vp-line) !important; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
html.vp-page-supervisor_dashboard .stat-card .label, html.vp-page-supervisor_dashboard .request-card .meta, html.vp-page-supervisor_dashboard .empty { color: var(--vp-muted) !important; }
html.vp-page-supervisor_dashboard .stat-card.pending .num { color: var(--vp-warn) !important; }
html.vp-page-supervisor_dashboard .stat-card.ack .num { color: var(--vp-accent2) !important; }
html.vp-page-supervisor_dashboard .stat-card.today .num { color: var(--vp-ok) !important; }
html.vp-page-supervisor_dashboard .request-card .category { color: var(--vp-accent) !important; }
html.vp-page-supervisor_dashboard .btn-ack { background: var(--vp-accent-soft) !important; color: var(--vp-accent) !important; }
html.vp-page-supervisor_dashboard .btn-resolve { background: rgba(46,125,79,.12) !important; color: var(--vp-ok) !important; }
html.vp-page-supervisor_dashboard .escalated { border-left-color: var(--vp-danger) !important; }

/* Hotel / event guest service portal */
html.vp-page-menu_hotel .hero, html.vp-page-menu_event .hero {
  background: var(--vp-surface) !important; border-bottom: 1px solid var(--vp-line);
  padding-top: calc(36px + var(--vp-strip-h)) !important;
}
html.vp-page-menu_hotel .hero::before, html.vp-page-menu_hotel .hero::after,
html.vp-page-menu_event .hero::before, html.vp-page-menu_event .hero::after { display: none !important; }
html.vp-page-menu_hotel .hero-title, html.vp-page-menu_event .hero-title { font-family: var(--vp-head) !important; color: var(--vp-ink) !important; }
html.vp-page-menu_hotel .room-input, html.vp-page-menu_event .seat-input,
html.vp-page-menu_hotel .menu-name, html.vp-page-menu_event .menu-name,
html.vp-page-menu_hotel .cart-total, html.vp-page-menu_event .cart-total,
html.vp-page-menu_hotel .modal-sh h3, html.vp-page-menu_event .modal-sh h3,
html.vp-page-menu_hotel .qty-btn, html.vp-page-menu_event .qty-btn { color: var(--vp-ink) !important; }
html.vp-page-menu_hotel [class^="svc-"]:not(.svc-label):not(.svc-icon),
html.vp-page-menu_event [class^="svc-"]:not(.svc-label):not(.svc-icon),
html.vp-page-menu_hotel [class*=" svc-"]:not(.svc-label):not(.svc-icon),
html.vp-page-menu_event [class*=" svc-"]:not(.svc-label):not(.svc-icon) {
  background: var(--vp-surface) !important; border: 1px solid var(--vp-line) !important;
  border-top: 4px solid var(--vp-accent) !important; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
html.vp-page-menu_hotel .svc-roomservice, html.vp-page-menu_event .svc-cleanup { border-top-color: var(--vp-ok) !important; }
html.vp-page-menu_hotel .svc-amenity, html.vp-page-menu_event .svc-chair { border-top-color: var(--vp-accent2) !important; }
html.vp-page-menu_hotel .svc-label, html.vp-page-menu_event .svc-label { color: var(--vp-ink) !important; }
html.vp-page-menu_hotel .menu-thumb, html.vp-page-menu_event .menu-thumb { background: var(--vp-bg2) !important; color: var(--vp-muted); }
html.vp-page-menu_hotel .menu-thumb:not(:has(img)), html.vp-page-menu_event .menu-thumb:not(:has(img)) {
  aspect-ratio: auto !important; height: 6px; font-size: 0 !important; background: var(--vp-accent-soft) !important; border: 0 !important;
}
html.vp-page-menu_hotel .menu-card, html.vp-page-menu_event .menu-card { background: var(--vp-surface) !important; border-color: var(--vp-line) !important; }
html.vp-page-menu_hotel .menu-price, html.vp-page-menu_event .menu-price { color: var(--vp-accent) !important; font-weight: 700; }
html.vp-page-menu_hotel .cart-fab, html.vp-page-menu_event .cart-fab,
html.vp-page-menu_hotel .modal-sh .msub, html.vp-page-menu_event .modal-sh .msub { background: var(--vp-accent) !important; color: var(--vp-on-accent) !important; }
html.vp-page-menu_hotel .order-btn, html.vp-page-menu_event .order-btn { background: var(--vp-ok) !important; }
html.vp-page-menu_hotel .modal-sh textarea, html.vp-page-menu_event .modal-sh textarea { color: var(--vp-ink) !important; }

/* Shop storefront: receipt paper cards, ink buttons with price-tag yellow text */
html.vp-page-b2b_shop .top-bar { background: var(--vp-surface) !important; border-bottom: 1px solid var(--vp-line) !important; top: var(--vp-strip-h) !important; }
html.vp-page-b2b_shop .filters { background: var(--vp-surface) !important; border-bottom: 1px solid var(--vp-line); top: calc(57px + var(--vp-strip-h)) !important; }
html.vp-shop.vp-page-b2b_shop .filters, html.vp-shop.vp-page-b2b_shop .product-badges { display: none !important; }
html.vp-page-b2b_shop .product-stock.low { color: var(--vp-warn) !important; font-weight: 600; }
html.vp-page-b2b_shop .product-card { background: var(--vp-surface) !important; border-color: var(--vp-line) !important; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
html.vp-page-b2b_shop .product-card:hover { border-color: var(--vp-ink) !important; background: var(--vp-surface) !important; box-shadow: 4px 4px 0 #FFD23F !important; }
html.vp-page-b2b_shop .product-img, html.vp-page-b2b_shop .detail-img { background: var(--vp-bg2) !important; }
html.vp-page-b2b_shop .add-btn, html.vp-page-b2b_shop .checkout-btn, html.vp-page-b2b_shop .btn-submit,
html.vp-page-b2b_shop .order-success .btn-primary { background: #161616 !important; color: #FFD23F !important; }
html.vp-page-b2b_shop .cart-btn { background: #FFD23F !important; border-color: #161616 !important; color: #161616 !important; }
html.vp-page-b2b_shop .cart-badge-count { background: #161616 !important; color: #FFD23F !important; }
html.vp-page-b2b_shop .filter-btn, html.vp-page-b2b_shop .lang-btn, html.vp-page-b2b_shop .qty-btn,
html.vp-page-b2b_shop .radio-group label, html.vp-page-b2b_shop .tip-btn, html.vp-page-b2b_shop .btn-cancel { background: var(--vp-surface) !important; color: var(--vp-ink) !important; }
html.vp-page-b2b_shop .filter-btn.active { background: #161616 !important; color: #FFD23F !important; border-color: #161616 !important; }
html.vp-page-b2b_shop .form-group input, html.vp-page-b2b_shop .form-group textarea, html.vp-page-b2b_shop .tip-btn.custom-input { color: var(--vp-ink) !important; }
html.vp-page-b2b_shop ::-webkit-scrollbar { background: var(--vp-bg2) !important; }

/* Hospital */
html.vp-hospital .hdr-title { font-family: var(--vp-head) !important; color: var(--vp-ink) !important; }
html.vp-hospital .controls-bar { background: var(--vp-bg2) !important; border-color: var(--vp-line) !important; }
html.vp-hospital .filter-btn { color: var(--vp-muted) !important; background: var(--vp-surface) !important; }
html.vp-hospital .filter-btn.active, html.vp-hospital .filter-btn:hover { color: var(--vp-on-accent) !important; background: var(--vp-accent) !important; border-color: var(--vp-accent) !important; }
html.vp-hospital [class*="token"], html.vp-hospital .appt-token { letter-spacing: .02em; }
html.vp-page-book_appointment .nav { background: var(--vp-surface) !important; top: var(--vp-strip-h); }
html.vp-page-live_queue .header h1, html.vp-page-book_appointment .page-header h1 span {
  background: none !important; -webkit-text-fill-color: var(--vp-accent) !important; color: var(--vp-accent) !important;
}

/* Staff unlock terminal */
html.vp-page-staff_login body { color: var(--vp-ink) !important; }
html.vp-page-staff_login button[type=submit], html.vp-page-staff_login .btn-login, html.vp-page-staff_login .btn-primary {
  background: var(--vp-accent) !important; color: var(--vp-on-accent) !important; box-shadow: none !important;
}

/* Public /demo-xxx login card */
html.vp-page-index .store-badge .avatar { background: var(--vp-accent) !important; color: var(--vp-on-accent) !important; }
html.vp-page-index .card .btn { background: var(--vp-accent) !important; color: var(--vp-on-accent) !important; }
html.vp-page-index .card { box-shadow: 0 12px 32px rgba(0,0,0,.06); }

@media (prefers-reduced-motion: reduce) {
  html.vp *, html.vp *::before, html.vp *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ===== Owner dashboard (dashboard.php, shared header) ===== */
/* The shared shell reserved a 380px column for a side panel these dashboards no longer have */
html.vp .workspace-wrapper { grid-template-columns: minmax(0, 1fr) !important; max-width: 1240px; padding: 28px 24px !important; gap: 24px !important; }
html.vp .workspace-wrapper::before { display: none !important; }
@media (max-width: 640px) { html.vp .workspace-wrapper { padding: 16px 14px !important; } }

/* One navigation group: tab pills in a single row, overflow under More, one menu button on phones (assets/js/staff_tabnav.js) */
html.vp .tab-nav {
  display: flex !important; flex-wrap: nowrap !important; gap: 6px; align-items: center; position: relative; overflow: visible !important;
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--vp-line) !important; border-radius: 0 !important;
  padding: 0 0 12px !important; margin: 0 0 22px !important; box-shadow: none !important;
}
html.vp .tab-nav > a, html.vp .tab-nav-more-btn, html.vp .tab-nav-phone-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 8px 14px !important; border-radius: 999px !important;
  border: 1px solid var(--vp-line) !important; background: var(--vp-surface) !important; background-image: none !important;
  color: var(--vp-ink) !important; font: 700 13.5px/1.2 var(--vp-body) !important; white-space: nowrap; text-decoration: none; box-shadow: none !important; cursor: pointer;
}
html.vp .tab-nav > a:hover, html.vp .tab-nav-more-btn:hover, html.vp .tab-nav-phone-btn:hover { border-color: var(--vp-accent) !important; color: var(--vp-accent) !important; }
html.vp .tab-nav > a.active, html.vp .tab-nav-more-btn.active {
  background: var(--vp-accent) !important; border-color: var(--vp-accent) !important; color: var(--vp-on-accent) !important;
}
html.vp .tab-nav a .count { background: rgba(0, 0, 0, .08) !important; color: inherit !important; border-radius: 999px; padding: 1px 7px; font-size: 12px; }
html.vp .tab-nav a.active .count { background: rgba(255, 255, 255, .24) !important; }
html.vp .tab-nav a .badge { background: var(--vp-danger) !important; color: #fff !important; }
html.vp .tab-nav-more, html.vp .tab-nav-phone { position: relative; flex: 0 0 auto; }
html.vp .tab-nav-phone { display: none; margin: 0 0 16px; }
html.vp .tab-nav-more-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 300; min-width: 210px; max-height: 70vh; overflow: auto; padding: 6px;
  border-radius: 12px; background: var(--vp-surface); border: 1px solid var(--vp-line); box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}
html.vp .tab-nav-more.open .tab-nav-more-menu, html.vp .tab-nav-phone.open .tab-nav-more-menu { display: block; }
html.vp .tab-nav-phone .tab-nav-more-menu { left: 0; right: auto; min-width: 240px; }
html.vp .tab-nav-more-menu a {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  font: 700 14px/1.2 var(--vp-body) !important; color: var(--vp-ink) !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
html.vp .tab-nav-more-menu a:hover { background: var(--vp-accent-soft) !important; color: var(--vp-accent) !important; }
html.vp .tab-nav-more-menu a.active { background: var(--vp-accent) !important; color: var(--vp-on-accent) !important; }
html.vp .tab-nav-more-menu a .count { margin-left: auto; }
@media (max-width: 768px) {
  html.vp .tab-nav { display: none !important; }
  html.vp .tab-nav-phone { display: block; }
}
html.vp-shop .tab-nav > a.active, html.vp-shop .tab-nav-more-btn.active, html.vp-shop .tab-nav-more-menu a.active { color: #FFD23F !important; }

/* Status text that stays readable on the light surfaces */
html.vp.vp-light {
  --ok-text: var(--vp-ok); --warn-text: var(--vp-warn); --bad-text: var(--vp-danger); --info-text: var(--vp-accent2);
  --wa-text: #12803F; --text-muted: var(--vp-muted);
  --input-bg: var(--vp-surface); --input-bg-solid: var(--vp-surface); --input-border: var(--vp-line); --input-text: var(--vp-ink);
  --glass: rgba(0, 0, 0, .025); --glass-line: var(--vp-line); --inset: rgba(0, 0, 0, .035);
}
/* Primary actions drawn with an inline gradient: one solid accent */
html.vp button[style*="linear-gradient(135deg"]:not(.danger):not(.btn-d) {
  background: var(--vp-accent) !important; background-image: none !important; color: var(--vp-on-accent) !important; border-color: var(--vp-accent) !important; box-shadow: none !important;
}
html.vp a[style*="linear-gradient"], html.vp a[style*="linear-gradient"] * { color: var(--vp-on-accent) !important; }
html.vp a[style*="linear-gradient"] { background: var(--vp-accent) !important; background-image: none !important; box-shadow: none !important; }
/* The old violet info ribbon above the tabs and other violet tints */
html.vp.vp-light :not(button):not(a)[style*="139,92,246"], html.vp.vp-light :not(button):not(a)[style*="139, 92, 246"],
html.vp.vp-light :not(button):not(a)[style*="99,102,241"], html.vp.vp-light :not(button):not(a)[style*="99, 102, 241"] {
  background-image: none !important; background-color: var(--vp-accent-soft) !important; border-color: var(--vp-line) !important; color: var(--vp-accent) !important;
}
html.vp.vp-light :not(button):not(a)[style*="#c4b5fd"], html.vp.vp-light :not(button):not(a)[style*="#a78bfa"], html.vp.vp-light :not(button):not(a)[style*="#8b5cf6"] { color: var(--vp-accent) !important; }

/* Phones: the top bar, wide forms and tables must not push the page sideways */
@media (max-width: 640px) {
  html.vp .navbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px !important; }
  html.vp .navbar .nav-logo-text { font-size: 17px !important; }
  html.vp .navbar .nav-logo-tag { display: none !important; }
  html.vp .nav-user-area { margin-left: auto; gap: 6px !important; flex-wrap: nowrap; min-width: 0; }
  html.vp .nav-user-area a span { display: none !important; }
  html.vp main [style*="grid-template-columns: 1fr 1fr 1fr"], html.vp main [style*="grid-template-columns:1fr 1fr 1fr"],
  html.vp main [style*="grid-template-columns: 1fr 1fr"], html.vp main [style*="grid-template-columns:1fr 1fr"],
  html.vp main [style*="grid-template-columns: repeat(2"], html.vp main [style*="grid-template-columns:repeat(2"],
  html.vp main [style*="grid-template-columns: repeat(3"], html.vp main [style*="grid-template-columns:repeat(3"],
  html.vp main [style*="grid-template-columns: repeat(4"], html.vp main [style*="grid-template-columns:repeat(4"] { grid-template-columns: minmax(0, 1fr) !important; }
  html.vp main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html.vp main select, html.vp main input, html.vp main textarea, html.vp main button { max-width: 100%; }
  html.vp main [style*="display: flex"], html.vp main [style*="display:flex"] { flex-wrap: wrap; }
}

/* Guest portal: the small description under each service name is plain text, not another card */
html.vp-page-menu_hotel .svc-btn .svc-sub:not(.x):not(.y), html.vp-page-menu_event .svc-btn .svc-sub:not(.x):not(.y),
html.vp-page-menu_hotel .svc-btn .svc-sub, html.vp-page-menu_event .svc-btn .svc-sub {
  background: none !important; border: 0 !important; border-top: 0 !important; box-shadow: none !important;
  color: var(--vp-muted) !important; font-size: 12px !important; padding: 0 !important; margin: 0 !important;
}


/* Hospital ward portal (menu_hospital.php): calm light ward, red only for the nurse call */
html.vp-page-menu_hospital .header { background: var(--vp-surface) !important; border-bottom: 1px solid var(--vp-line) !important; padding-top: calc(18px + var(--vp-strip-h)) !important; }
html.vp-page-menu_hospital .header-logo { background: var(--vp-accent) !important; color: var(--vp-on-accent) !important; }
html.vp-page-menu_hospital .header-info h1 { color: var(--vp-ink) !important; }
html.vp-page-menu_hospital .header-info p { color: var(--vp-muted) !important; }
html.vp-page-menu_hospital .bed-display { background: var(--vp-accent-soft) !important; border: 1px solid var(--vp-line) !important; }
html.vp-page-menu_hospital .bed-label { color: var(--vp-accent) !important; }
html.vp-page-menu_hospital .bed-input { color: var(--vp-ink) !important; }
html.vp-page-menu_hospital .emergency-banner { background: rgba(198, 40, 40, .07) !important; border: 1px solid rgba(198, 40, 40, .3) !important; color: var(--vp-ink) !important; }
html.vp-page-menu_hospital .emergency-banner * { color: var(--vp-ink) !important; }
html.vp-page-menu_hospital .section-title { color: var(--vp-muted) !important; letter-spacing: .02em !important; }
html.vp-page-menu_hospital .service-btn { background: var(--vp-surface) !important; border: 1px solid var(--vp-line) !important; border-top: 4px solid var(--vp-accent) !important; box-shadow: none !important; }
html.vp-page-menu_hospital .service-btn .btn-label { color: var(--vp-ink) !important; }
html.vp-page-menu_hospital .service-btn .btn-sub { color: var(--vp-muted) !important; }
html.vp-page-menu_hospital .service-btn.medication { border-top-color: var(--vp-warn) !important; }
html.vp-page-menu_hospital .service-btn.wheelchair, html.vp-page-menu_hospital .service-btn.tv-help { border-top-color: var(--vp-accent2) !important; }
html.vp-page-menu_hospital .service-btn.cleanup { border-top-color: var(--vp-ok) !important; }
html.vp-page-menu_hospital .service-btn.nurse-call { background: var(--vp-danger) !important; border-color: var(--vp-danger) !important; border-top-width: 1px !important; }
html.vp-page-menu_hospital .service-btn.nurse-call .btn-label, html.vp-page-menu_hospital .service-btn.nurse-call .btn-sub { color: #fff !important; }
html.vp-page-menu_hospital .service-btn.food-order { background: var(--vp-accent) !important; border-color: var(--vp-accent) !important; border-top-width: 1px !important; }
html.vp-page-menu_hospital .service-btn.food-order .btn-label, html.vp-page-menu_hospital .service-btn.food-order .btn-sub { color: var(--vp-on-accent) !important; }
html.vp-page-menu_hospital .category-name { color: var(--vp-accent) !important; border-bottom-color: var(--vp-line) !important; }
html.vp-page-menu_hospital .food-card { background: var(--vp-surface) !important; border: 1px solid var(--vp-line) !important; }
html.vp-page-menu_hospital .food-card:hover { border-color: var(--vp-accent) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .08) !important; }
html.vp-page-menu_hospital .food-img { background: var(--vp-bg2) !important; border-bottom-color: var(--vp-line) !important; }
html.vp-page-menu_hospital .food-name { color: var(--vp-ink) !important; }
html.vp-page-menu_hospital .food-price { color: var(--vp-accent) !important; }
html.vp-page-menu_hospital .cart-fab { background: var(--vp-accent) !important; color: var(--vp-on-accent) !important; }
html.vp-page-menu_hospital .cart-count { background: var(--vp-on-accent) !important; color: var(--vp-accent) !important; }
html.vp-page-menu_hospital .cart-drawer, html.vp-page-menu_hospital .modal-sheet { background: var(--vp-surface) !important; border-color: var(--vp-line) !important; }
html.vp-page-menu_hospital .cart-total, html.vp-page-menu_hospital .modal-title, html.vp-page-menu_hospital .qty-btn { color: var(--vp-ink) !important; }
html.vp-page-menu_hospital #cart-items div[style*="color:#fff"], html.vp-page-menu_hospital [style*="color:#fff"]:not(button) { color: var(--vp-ink) !important; }
html.vp-page-menu_hospital .place-order-btn { background: var(--vp-ok) !important; color: #fff !important; }
html.vp-page-menu_hospital .modal-textarea { background: var(--vp-bg) !important; color: var(--vp-ink) !important; }
html.vp-page-menu_hospital .modal-submit { background: var(--vp-accent) !important; color: var(--vp-on-accent) !important; }
html.vp-page-menu_hospital .session-btn.login { background: var(--vp-accent-soft) !important; color: var(--vp-accent) !important; border-color: var(--vp-line) !important; }
html.vp-page-menu_hospital .toast { background: var(--vp-ink) !important; color: var(--vp-surface) !important; border-color: var(--vp-ink) !important; }
html.vp-page-menu_hospital .toast.success { background: var(--vp-ok) !important; color: #fff !important; }
html.vp-page-menu_hospital .toast.error, html.vp-page-menu_hospital .toast.urgent { background: var(--vp-danger) !important; color: #fff !important; }


/* Hospital: OPD booking by QR and the bed QR landing page */
html.vp-page-opd_booking body, html.vp-page-nurse_call body { background-image: none !important; color: var(--vp-ink) !important; }
html.vp-page-opd_booking .card, html.vp-page-nurse_call .card { background: var(--vp-surface) !important; border: 1px solid var(--vp-line) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important; }
html.vp-page-opd_booking h1 { background: none !important; -webkit-text-fill-color: var(--vp-ink) !important; color: var(--vp-ink) !important; }
html.vp-page-opd_booking .sub, html.vp-page-opd_booking .qr-hint, html.vp-page-opd_booking .token-label { color: var(--vp-muted) !important; }
html.vp-page-opd_booking label { color: var(--vp-muted) !important; text-transform: none !important; font-size: 12px !important; letter-spacing: 0 !important; }
html.vp-page-opd_booking input, html.vp-page-opd_booking select, html.vp-page-opd_booking textarea { background: var(--vp-surface) !important; border: 1px solid var(--vp-line) !important; color: var(--vp-ink) !important; }
html.vp-page-opd_booking .btn { background: var(--vp-accent) !important; color: var(--vp-on-accent) !important; box-shadow: none !important; }
html.vp-page-opd_booking .token { background: none !important; -webkit-text-fill-color: var(--vp-accent) !important; color: var(--vp-accent) !important; }
html.vp-page-opd_booking .error { background: rgba(198, 40, 40, .08) !important; border-color: rgba(198, 40, 40, .3) !important; color: var(--vp-danger) !important; }
html.vp-page-opd_booking .success { background: rgba(46, 125, 79, .08) !important; border-color: rgba(46, 125, 79, .3) !important; color: var(--vp-ok) !important; }
html.vp-page-opd_booking .qr-hint a { color: var(--vp-accent) !important; }
html.vp-page-nurse_call .header .hospital, html.vp-page-nurse_call .header .location, html.vp-page-nurse_call .big-btn .body .desc, html.vp-page-nurse_call .success-screen p, html.vp-page-nurse_call .footer { color: var(--vp-muted) !important; opacity: 1 !important; }
html.vp-page-nurse_call .header h1, html.vp-page-nurse_call .success-screen h2 { color: var(--vp-ink) !important; }
html.vp-page-nurse_call .header .location strong, html.vp-page-nurse_call .success-screen .detail strong { color: var(--vp-accent) !important; }
html.vp-page-nurse_call .big-btn { background: var(--vp-surface) !important; border: 1px solid var(--vp-line) !important; color: var(--vp-ink) !important; }
html.vp-page-nurse_call .big-btn .icon { background: var(--vp-accent-soft) !important; color: var(--vp-accent) !important; }
html.vp-page-nurse_call .big-btn.emergency { background: var(--vp-danger) !important; border-color: var(--vp-danger) !important; color: #fff !important; }
html.vp-page-nurse_call .big-btn.emergency .body .desc { color: rgba(255, 255, 255, .85) !important; }
html.vp-page-nurse_call .big-btn.emergency .icon { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
html.vp-page-nurse_call .big-btn:hover { border-color: var(--vp-accent) !important; box-shadow: none !important; }
html.vp-page-nurse_call .name-input input { background: var(--vp-surface) !important; border: 1px solid var(--vp-line) !important; color: var(--vp-ink) !important; }
html.vp-page-nurse_call .success-screen .detail { background: var(--vp-bg2) !important; border-color: var(--vp-line) !important; }