@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* ============================================================================
   SkyHotelier — "Console" theme  (v3 — clarity, brightness, layout, mobile)
   Loaded LAST on every page. Single-hue two-tone accent (indigo on light,
   periwinkle on dark). Never sets heading colour globally, so no title is ever
   forced dark-on-dark. Brightens navigation, insets the public pages, and makes
   the whole site responsive. No content is touched.
   ============================================================================ */

:root {
  --cn-page:#F4F5F7; --cn-surface:#FFFFFF; --cn-surface-2:#FBFBFC; --cn-hover:#EDF0F5;
  --cn-ink:#14181F; --cn-muted:#5E6675; --cn-faint:#8A93A3;
  --cn-line:#E4E7EC; --cn-line-soft:#EEF0F3;
  --cn-accent:#635BFF; --cn-accent-h:#5147E0; --cn-accent-bg:#EFEEFF;
  --cn-accent-dk:#C3BFFF; --cn-accent-dk-bg:rgba(195,191,255,.16);
  --cn-slate:#1B2130; --cn-slate-2:#141922; --cn-slate-ln:#2A3140;
  --cn-on-dark:#EEF1F7; --cn-on-dark-mute:#C2C9D6;

  --gold:var(--cn-accent)!important; --gold-bright:var(--cn-accent)!important;
  --gold-light:var(--cn-accent)!important; --gold-dark:var(--cn-accent-h)!important;
  --gold-deep:var(--cn-accent-h)!important; --gold-500:var(--cn-accent)!important;
  --gold-soft:var(--cn-accent-bg)!important; --gold-line:var(--cn-line)!important;
  --accent:var(--cn-accent)!important; --accent-light:var(--cn-accent)!important; --accent-dark:var(--cn-accent-h)!important;
  --primary:var(--cn-accent)!important; --primary-dark:var(--cn-accent)!important; --primary-light:var(--cn-accent)!important;
  --navy:var(--cn-slate)!important; --navy-800:var(--cn-slate)!important; --navy-900:var(--cn-slate-2)!important;
  --navy-700:var(--cn-slate)!important; --navy-600:var(--cn-slate-ln)!important;
  --charcoal:var(--cn-slate)!important; --charcoal-dark:var(--cn-slate-2)!important; --charcoal-light:var(--cn-slate)!important;
  --dark:var(--cn-slate)!important; --darker:var(--cn-slate-2)!important;
  --bg:var(--cn-page)!important; --paper:var(--cn-page)!important; --light:var(--cn-page)!important;
  --white:var(--cn-surface)!important; --surface:var(--cn-surface)!important; --surface-2:var(--cn-surface-2)!important;
  --gray-50:#F7F8FA!important; --gray-100:#F1F2F5!important; --gray-200:var(--cn-line)!important;
  --gray-500:var(--cn-muted)!important; --gray:var(--cn-muted)!important;
  --text:var(--cn-ink)!important; --ink:var(--cn-ink)!important; --text-muted:var(--cn-muted)!important;
  --muted:var(--cn-muted)!important; --text-light:var(--cn-faint)!important; --text-inverse:#FFFFFF!important;
  --border:var(--cn-line)!important; --line:var(--cn-line)!important; --line-soft:var(--cn-line-soft)!important;
  --success:#177A4C!important; --ok:#177A4C!important; --danger:#C43C3C!important; --stop:#C43C3C!important;
  --warning:#B4791A!important; --wait:#B4791A!important; --info:var(--cn-accent)!important;
  --purple:#5B54C9!important; --teal:#178A6E!important; --pink:#C0417A!important;
  --pos-bg:var(--cn-page)!important; --pos-surface:var(--cn-surface)!important; --pos-panel:var(--cn-surface)!important;
  --pos-hover:var(--cn-hover)!important; --pos-accent:var(--cn-accent)!important; --pos-text:var(--cn-ink)!important;
  --pos-text-muted:var(--cn-muted)!important; --pos-border:var(--cn-line)!important; --pos-success:#177A4C!important;
  --pos-warning:#B4791A!important; --pos-danger:#C43C3C!important; --pos-info:var(--cn-accent)!important;
  --shadow:none!important; --shadow-sm:none!important; --shadow-md:none!important; --shadow-lg:none!important; --shadow-gold:none!important;
  --radius:8px!important; --radius-sm:6px!important; --radius-lg:10px!important; --radius-xl:14px!important;
  --font:'Inter',system-ui,sans-serif!important; --font-body:'Inter',system-ui,sans-serif!important;
  --font-display:'Space Grotesk',system-ui,sans-serif!important; --font-mono:'JetBrains Mono',ui-monospace,monospace!important;
  --gradient-gold:var(--cn-accent)!important; --gradient-dark:var(--cn-slate)!important;
}

/* ---- Base typography (NB: no global heading colour — pages keep theirs) --- */
html body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--cn-ink);
  background:var(--cn-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.55;}
html body h1,html body h2,html body h3,html body h4,html body h5,html body .h1,html body .h2,
html body .title,html body .page-title,html body .card-title,html body .section-title,html body .hero-title{
  font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-.02em;}
html body .stat-value,html body .kpi-value,html body .metric-value,html body .value,html body .amount,
html body .figure,html body .count,html body .number,html body .mono,html body code,html body kbd,html body pre{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
html body table{font-variant-numeric:tabular-nums;}
::selection{background:var(--cn-accent-bg);color:var(--cn-accent-h);}

/* ---- Flat surfaces + accessible focus + scrollbars -------------------- */
*{box-shadow:none!important;text-shadow:none!important;}
html body input:focus,html body select:focus,html body textarea:focus,
html body button:focus-visible,html body a:focus-visible,html body [contenteditable]:focus{
  outline:none!important;box-shadow:0 0 0 3px var(--cn-accent-bg),0 0 0 1px var(--cn-accent)!important;}
html body *::-webkit-scrollbar{width:10px;height:10px;}
html body *::-webkit-scrollbar-thumb{background:#C7CDD6;border-radius:8px;border:2px solid transparent;background-clip:content-box;}

/* ---- Accent links on light surfaces ----------------------------------- */
html body a:not(.btn):not(.button):not([class*="btn-"]):not(.nav-item):not(.nav-link){color:var(--cn-accent);}
html body a:not(.btn):not(.nav-item):not(.nav-link):hover{color:var(--cn-accent-h);}

/* =======================================================================
   DARK CHROME — force LIGHT, legible text on dark backgrounds
   ======================================================================= */
html body .sidebar,html body .side,html body aside,html body .app-sidebar,html body .admin-sidebar,
html body .side-nav,html body .navigation,html body .mobile-menu,html body .hero,html body .hero-stats-bar,
html body .footer,html body .site-footer,html body .nav.scrolled,html body .cta-dark,html body .dark-section{color:var(--cn-on-dark);}
/* headings & generic text inside dark chrome become light (fixes black-on-navy) */
html body .sidebar :is(h1,h2,h3,h4,h5,p,span,label,td,th,li),
html body .footer :is(h1,h2,h3,h4,h5,p,span,li,a),
html body .mobile-menu :is(h1,h2,h3,h4,h5,a,span){color:var(--cn-on-dark);}
/* hero: only the genuinely dark-background text goes light (NOT the white float cards) */
html body .hero .hero-content :is(h1,h2,p),html body .hero-eyebrow,html body .hero-subtitle,
html body .hero-trust-badge,html body .hero-stat-content :is(.hero-stat-value,.hero-stat-label){color:var(--cn-on-dark);}
html body .sidebar a,html body aside a,html body .mobile-menu a{color:var(--cn-on-dark);}

/* ---- NAVIGATION — bright & unmistakable ------------------------------- */
html body .sidebar .nav-item,html body aside .nav-item,html body .side-nav .nav-item,
html body .sidebar .menu-item,html body .sidebar .nav-link{
  color:rgba(255,255,255,.84)!important;font-weight:500!important;border-radius:0 8px 8px 0;transition:background .15s,color .15s;}
html body .sidebar .nav-item:hover,html body aside .nav-item:hover,html body .sidebar .menu-item:hover,html body .sidebar .nav-link:hover{
  color:#FFFFFF!important;background:rgba(255,255,255,.08)!important;}
/* ACTIVE: bright white text + bright accent bar + subtle pill */
html body .sidebar .nav-item.active,html body aside .nav-item.active,html body .side-nav .nav-item.active,
html body .sidebar .menu-item.active,html body .sidebar .nav-link.active,html body .sidebar .active,
html body aside .active,html body .module-section.active,html body .mobile-menu-link.active{
  color:#FFFFFF!important;font-weight:600!important;background:var(--cn-accent-dk-bg)!important;
  border-left:3px solid var(--cn-accent-dk)!important;}
/* bright accent icons + indicator bar */
html body .sidebar .nav-item.active i,html body .sidebar .nav-item:hover i,
html body aside .nav-item.active i,html body .side-nav .nav-item.active i{color:var(--cn-accent-dk)!important;}
html body .sidebar .nav-item.active::before,html body aside .nav-item.active::before{background:var(--cn-accent-dk)!important;}
/* marketing top-nav links — brighter for legibility */
html body .nav-link{font-size:14px;font-weight:500!important;color:#F4F6FB!important;letter-spacing:.1px;}
html body .nav-link:hover{color:#fff!important;background:rgba(195,191,255,.18)!important;}
html body .nav-logo-text{color:#fff;}
/* sub-menu (dropdown) — sit on ONE line, size to content, clean look */
html body .nav-dropdown-menu{width:max-content!important;min-width:200px!important;max-width:340px!important;
  border-radius:12px!important;border:1px solid var(--cn-line)!important;overflow:hidden;}
html body .nav-dropdown-item{white-space:nowrap!important;padding:11px 18px!important;color:var(--cn-ink)!important;
  border-bottom:1px solid var(--cn-line-soft)!important;}
html body .nav-dropdown-item:hover{background:var(--cn-accent-bg)!important;color:var(--cn-accent-h)!important;}
html body .nav-dropdown-item i{color:var(--cn-accent)!important;}
/* hero FLOAT CARDS — white cards need dark, legible text (fixes faint text) */
html body .hero-float-card{background:#fff!important;border:1px solid var(--cn-line)!important;border-radius:14px!important;padding:14px 18px!important;}
html body .hero-float-text h5{color:var(--cn-ink)!important;font-weight:700!important;font-size:17px!important;}
html body .hero-float-text p{color:var(--cn-muted)!important;font-size:12.5px!important;font-weight:500!important;}
html body .hero-float-icon{color:#fff!important;}

/* accent chips/eyebrows/icons on dark backgrounds -> periwinkle */
html body .hero .hero-eyebrow,html body .hero-trust-badge i,html body .hero-stat-icon,
html body .hero-stat-value span,html body .hero-metric-icon.gold,html body .nav-logo-text span,
html body .nav-mobile-toggle,html body .mobile-menu-close{color:var(--cn-accent-dk)!important;}
html body .hero .hero-eyebrow,html body .hero-stat-icon,html body .nav-mobile-toggle{
  background:var(--cn-accent-dk-bg)!important;border-color:rgba(195,191,255,.34)!important;}

/* ---- Buttons ---------------------------------------------------------- */
html body .btn,html body button.btn,html body .button,html body input[type="submit"]{
  border-radius:8px;font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:0;
  padding:9px 18px;transition:background-color .15s,border-color .15s,transform .15s;}
html body .btn-primary,html body .btn.primary,html body .button.primary,html body .btn-gold,
html body .btn-accent,html body .pricing-btn,html body input[type="submit"]{
  background:var(--cn-accent)!important;border:1px solid var(--cn-accent)!important;color:#fff!important;}
html body .btn-primary:hover,html body .btn.primary:hover,html body .btn-gold:hover,
html body .btn-accent:hover,html body .pricing-btn:hover,html body input[type="submit"]:hover{
  background:var(--cn-accent-h)!important;border-color:var(--cn-accent-h)!important;transform:translateY(-1px);}
html body .btn-secondary,html body .btn.secondary,html body .btn-outline,html body .btn.ghost,html body .btn-ghost{
  background:var(--cn-surface);border:1px solid var(--cn-line);color:var(--cn-ink);}
html body .btn-secondary:hover,html body .btn.secondary:hover,html body .btn-outline:hover,html body .btn.ghost:hover{background:var(--cn-hover);}

/* ---- Inputs / tables / badges / cards --------------------------------- */
html body input,html body select,html body textarea{border-radius:8px;font-family:'Inter',sans-serif;
  border:1px solid var(--cn-line);background:var(--cn-surface);color:var(--cn-ink);}
html body input::placeholder,html body textarea::placeholder{color:var(--cn-faint);}
html body table th{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cn-muted);}
html body table td,html body table th{border-color:var(--cn-line)!important;}
html body table tbody tr:hover td{background:var(--cn-surface-2);}
html body .badge,html body .pill,html body .tag,html body .status,html body .chip,html body .label{border-radius:6px;font-weight:600;}
html body .card,html body .panel,html body .box,html body .widget,html body .tile,html body .stat-card,
html body .kpi-card,html body .content-card,html body .container-card{border-radius:12px;background:var(--cn-surface);border:1px solid var(--cn-line);}

/* =======================================================================
   PUBLIC / MARKETING — inset content with left/right margins
   ======================================================================= */
html body .container,html body .hero-container,html body .hero-stats-container,html body .nav-container,
html body .section-header,html body .features-grid,html body .footer-container,html body .about-container,
html body .compare-container,html body .faq-container,html body .contact-container,html body [class$="-container"],html body .wrapper{
  max-width:1180px!important;margin-left:auto!important;margin-right:auto!important;
  padding-left:clamp(20px,5vw,44px)!important;padding-right:clamp(20px,5vw,44px)!important;}
html body .features,html body .about-section,html body .compare-section,html body .faq-section,
html body .contact-section,html body .roles-section,html body .paperless-section,html body .why-section{padding-top:84px;padding-bottom:84px;}
/* hero + titles */
html body .hero-title{font-size:clamp(34px,5vw,52px);line-height:1.08;}
html body .hero-title span{background:none!important;-webkit-text-fill-color:var(--cn-accent-dk)!important;color:var(--cn-accent-dk)!important;}
html body .hero-subtitle{font-size:16px;color:#D5DBE6;line-height:1.7;max-width:500px;}
html body .section-title{font-size:clamp(28px,4vw,40px);line-height:1.15;}
html body .section-header .section-title::after,html body .section-label::after{background:var(--cn-accent)!important;}
html body .section-label,html body .eyebrow,html body .section-eyebrow{color:var(--cn-accent)!important;letter-spacing:.12em;}
/* feature grid + cards */
html body .features-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:20px!important;}
html body .feature-card{background:var(--cn-surface);border:1px solid var(--cn-line);border-radius:12px;padding:26px 24px;
  transition:border-color .18s,transform .18s;}
html body .feature-card:hover{border-color:var(--cn-accent);transform:translateY(-3px);}
html body .feature-title,html body .feature-name{color:var(--cn-ink);font-weight:600;}
html body .feature-desc{color:var(--cn-muted);line-height:1.65;}
html body .feature-icon{border-radius:10px;}
html body .feature-icon.gold,html body .feature-icon.primary{background:var(--cn-accent-bg)!important;color:var(--cn-accent)!important;}
html body .feature-icon.success{background:#E7F4EC!important;color:#177A4C!important;}
html body .footer,html body .site-footer{background:var(--cn-slate-2);}
html body .footer h4,html body .site-footer h4{color:#fff;}
html body .footer a,html body .site-footer a{color:var(--cn-on-dark-mute);}
html body .footer a:hover,html body .site-footer a:hover{color:#fff;}

/* ---- fresh / classy polish (additive, non-destructive) ---------------- */
html{scroll-behavior:smooth;}
html body .nav{border-bottom:1px solid rgba(255,255,255,.08);}
html body .nav-links{gap:2px;}
html body .hero-cta .btn{padding:13px 26px;font-size:15px;}
html body .hero-trust-badge{color:var(--cn-on-dark)!important;}
html body .hero-trust-badge i{color:var(--cn-accent-dk)!important;}
html body .feature-card{transition:border-color .18s,transform .18s;}

/* =======================================================================
   MOBILE / RESPONSIVE — usable on any device
   ======================================================================= */
html,body{max-width:100%;overflow-x:hidden;}
html body img,html body svg,html body video,html body canvas,html body iframe{max-width:100%;height:auto;}
html body pre,html body table{max-width:100%;}
html body .table-responsive,html body .table-wrap,html body .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
html body .btn,html body button,html body .nav-item,html body .nav-link,html body a.button{min-height:40px;}
@media(max-width:900px){
  html body .hero-container{grid-template-columns:1fr!important;}
  html body .features-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;}
  html body .hero-visual,html body .hero-float-card{display:none!important;}
}
@media(max-width:640px){
  html body .features-grid,
  html body [class$="-grid"]:not([class*="numpad"]):not([class*="keypad"]):not([class*="room-grid"]):not([class*="table-grid"]):not([class*="seat"]){
    grid-template-columns:1fr!important;}
  html body .hero-title{font-size:clamp(28px,8vw,38px)!important;}
  html body .section-title{font-size:clamp(24px,6vw,32px)!important;}
  html body .features,html body .about-section,html body .compare-section,html body .contact-section,
  html body .faq-section{padding-top:56px!important;padding-bottom:56px!important;}
  html body .hero-stats-container{grid-template-columns:1fr 1fr!important;gap:16px!important;}
  html body .container,html body [class$="-container"]{padding-left:18px!important;padding-right:18px!important;}
}

/* =======================================================================
   REPORTED FIXES — nav legibility, one-line sub-menus, language selector
   ======================================================================= */
/* App sidebar + sub-items: brighter text, remove opacity dimming, ONE line */
html body .sidebar .nav-item,html body aside .nav-item,html body .side-nav .nav-item,
html body .sidebar .menu-item,html body .sidebar .nav-link{
  color:#E9EDF6!important;opacity:1!important;font-weight:400!important;white-space:nowrap!important;}
html body .sidebar .nav-item:hover,html body aside .nav-item:hover,html body .sidebar .nav-link:hover{color:#FFFFFF!important;}
html body .sidebar .nav-item.active,html body aside .nav-item.active,html body .sidebar .nav-link.active{color:#FFFFFF!important;opacity:1!important;}
/* EVERY menu / sub-menu / dropdown / tab link stays on a single line */
html body .nav-item,html body .nav-link,html body .nav-dropdown-item,html body .menu-item,
html body .mobile-menu-link,html body .sky-lang-option,html body .module-tab,html body .tab,
html body .dropdown-item,html body .submenu-item,html body .ho-config-nav-item,html body .spa-cat-btn{
  white-space:nowrap!important;}
/* marketing top-nav links: lighter for legibility */
html body .nav-link{color:#F4F6FB!important;font-weight:500!important;}

/* Language selector (top-right on public pages): light text, no overlap */
html body .sky-lang-selector{flex-shrink:0;margin-left:10px;}
html body .sky-lang-btn{background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.24)!important;
  color:#F4F6FB!important;white-space:nowrap!important;gap:8px!important;padding:8px 14px!important;line-height:1.1!important;}
html body .sky-lang-btn:hover,html body .sky-lang-selector.open .sky-lang-btn{
  background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.42)!important;color:#fff!important;}
html body .sky-lang-btn .code{color:#F4F6FB!important;font-weight:700!important;}
html body .sky-lang-btn .flag{line-height:1!important;}
html body .sky-lang-btn i{color:#C2C9D6!important;}
html body .sky-lang-dropdown{max-width:min(280px,calc(100vw - 24px))!important;right:0!important;}
html body .sky-lang-option-text .native{color:var(--cn-ink)!important;}
html body .sky-lang-option-text .english{color:var(--cn-muted)!important;}

/* =======================================================================
   FIX — invisible titles on the app's DARK banners (#content .section-header)
   Scoped to #content (app only — public pages have no #content) and to banners
   WITHOUT an inline background (the dark default from .section-header). Banners
   with a light inline background (e.g. green success headers) keep dark text.
   This catches titles that hardcode a dark colour AND titles that inherit the
   dark body colour — Front Office & Concierge Configuration, Price Approvals,
   and every similar module banner in one rule.
   ======================================================================= */
html body #content .section-header:not([style*="background"]) h1,
html body #content .section-header:not([style*="background"]) h2,
html body #content .section-header:not([style*="background"]) h3,
html body #content .section-header:not([style*="background"]) h4{color:#FFFFFF!important;}
html body #content .section-header:not([style*="background"]) p{color:rgba(255,255,255,.82)!important;}
html body #content .section-header:not([style*="background"]) h1 i,
html body #content .section-header:not([style*="background"]) h2 i,
html body #content .section-header:not([style*="background"]) h3 i{color:var(--cn-accent-dk)!important;}

/* ---- Kill decorative animated glows ----------------------------------- */
html body [class*="glow"],html body [class*="shimmer"]{animation:none!important;}

/* ============================================================================
   v5 — button visibility, brighter sidebar, compaction, sleeker feel, POS fix
   ============================================================================ */

/* ---- 1. BUTTON TEXT VISIBILITY -----------------------------------------
   Several variants defined their background ONLY as a gradient, so any rule
   that removed the gradient left white text on a transparent button. Every
   variant now gets an explicit SOLID fill paired with its text colour.       */
html body .btn-primary,html body .btn.primary,html body .button.primary,
html body .btn-accent,html body .btn-gold,html body .pricing-btn,html body input[type="submit"]{
  background:var(--cn-accent)!important;border:1px solid var(--cn-accent)!important;color:#FFFFFF!important;}
html body .btn-primary:hover,html body .btn-accent:hover,html body .pricing-btn:hover,
html body input[type="submit"]:hover{background:var(--cn-accent-h)!important;border-color:var(--cn-accent-h)!important;}
html body .btn-success{background:#177A4C!important;border:1px solid #177A4C!important;color:#FFFFFF!important;}
html body .btn-success:hover{background:#12603B!important;border-color:#12603B!important;}
html body .btn-danger{background:#C43C3C!important;border:1px solid #C43C3C!important;color:#FFFFFF!important;}
html body .btn-danger:hover{background:#A83030!important;border-color:#A83030!important;}
html body .btn-warning{background:#966214!important;border:1px solid #966214!important;color:#FFFFFF!important;}
html body .btn-warning:hover{background:#7F520E!important;border-color:#7F520E!important;}
html body .btn-info{background:#345E86!important;border:1px solid #345E86!important;color:#FFFFFF!important;}
html body .btn-info:hover{background:#2A4C6D!important;border-color:#2A4C6D!important;}
html body .btn-secondary{background:#4A5162!important;border:1px solid #4A5162!important;color:#FFFFFF!important;}
html body .btn-secondary:hover{background:#3B4252!important;}
/* outline / ghost on LIGHT surfaces */
html body .btn-outline{background:#FFFFFF!important;border:1px solid var(--cn-line)!important;color:var(--cn-ink)!important;}
html body .btn-outline:hover{background:var(--cn-hover)!important;border-color:#CFD5DE!important;}
html body .btn-ghost{background:transparent!important;color:var(--cn-muted)!important;}
html body .btn-ghost:hover{background:var(--cn-hover)!important;color:var(--cn-ink)!important;}
html body .btn-ghost.text-danger,html body .text-danger{color:#C43C3C!important;}
/* outline / ghost sitting on the DARK banner keep a light treatment */
html body #content .section-header:not([style*="background"]) .btn-outline,
html body #content .section-header:not([style*="background"]) .btn-ghost,
html body #content .section-header:not([style*="background"]) .btn:not([class*="btn-"]){
  background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.30)!important;color:#FFFFFF!important;}
html body #content .section-header:not([style*="background"]) .btn:hover{background:rgba(255,255,255,.22)!important;}
/* any button that still resolves to a transparent fill keeps readable text */
html body .btn:not([class*="btn-"]){color:var(--cn-ink);}

/* ---- 2. LEFT NAVIGATION — brighter, lighter, always one line ------------ */
html body .sidebar .nav-item,html body aside .nav-item{
  color:#C3BFFF!important;opacity:1!important;font-weight:400!important;
  letter-spacing:.01em!important;white-space:nowrap!important;
  overflow:visible!important;text-overflow:clip!important;}
html body .sidebar .nav-item span{
  color:inherit!important;opacity:1!important;white-space:nowrap!important;
  overflow:visible!important;text-overflow:clip!important;flex:0 1 auto!important;min-width:0!important;}
html body .sidebar .nav-item i{color:#9A93FF!important;opacity:1!important;flex-shrink:0!important;}
html body .sidebar .nav-item:hover{color:#E4E2FF!important;background:rgba(195,191,255,.12)!important;}
html body .sidebar .nav-item:hover i{color:#C3BFFF!important;}
html body .sidebar .nav-item.active{color:#FFFFFF!important;font-weight:600!important;
  background:rgba(195,191,255,.18)!important;border-left-color:#C3BFFF!important;}
html body .sidebar .nav-item.active i{color:#C3BFFF!important;}
/* section labels were using the indigo accent on dark = unreadable */
html body .sidebar .nav-separator,html body .sidebar .nav-separator span{
  color:var(--cn-accent-dk)!important;opacity:1!important;font-weight:600!important;
  border-top-color:rgba(255,255,255,.10)!important;}
html body .sidebar-header,html body .sidebar-header *{color:#FFFFFF!important;}

/* ---- 3. COMPACT — more content per screen ------------------------------ */
:root{--sidebar-width:238px!important;}
/* sub-items: real scope is .nav-submenu .nav-item — less indent, no dimming,
   so full labels ("FO Dashboard", "F&B Requisitions") render complete */
html body .sidebar .nav-item{padding-right:10px!important;}
html body .sidebar .nav-submenu .nav-item{
  padding:6px 10px 6px 34px!important;font-size:11.5px!important;font-weight:400!important;
  opacity:1!important;color:#C3BFFF!important;white-space:nowrap!important;
  overflow:visible!important;text-overflow:clip!important;}
html body .sidebar .nav-submenu .nav-item span{font-size:11.5px!important;opacity:1!important;}
html body .sidebar .nav-submenu .nav-item.active{color:#FFFFFF!important;}
html body .sidebar .nav-item .nav-badge{flex-shrink:0!important;margin-left:auto!important;}
html body .content{padding:14px!important;}
html body .card{margin-bottom:12px!important;border-width:1px!important;}
html body .section-card{margin-bottom:12px!important;}
html body #content .section-header{padding:15px 20px!important;margin-bottom:14px!important;
  border-width:1px!important;gap:12px!important;}
html body #content .section-header h1,html body #content .section-header h2{font-size:19px!important;}
html body #content .section-header p{font-size:12.5px!important;margin-top:2px!important;}
html body table th{padding:7px 10px!important;}
html body table td{padding:7px 10px!important;font-size:12.5px!important;}
html body .card-body,html body .panel-body{padding:14px!important;}
html body .card-header,html body .panel-header{padding:11px 14px!important;}
html body h3{font-size:15px;}

/* ---- 4. LIGHTER & SLEEKER --------------------------------------------- */
html body{background:#F7F8FA;}
html body .content{background:#F7F8FA;}
html body .card,html body .section-card,html body .panel{
  background:#FFFFFF!important;border:1px solid var(--cn-line)!important;border-radius:10px!important;}
html body .sidebar{background:#1E2432!important;border-right:1px solid rgba(255,255,255,.08)!important;}
html body #content .section-header{background:#232B3B!important;border:1px solid rgba(255,255,255,.07)!important;}
html body table th{background:#F7F8FA!important;font-weight:600!important;}
html body .badge,html body .pill,html body .tag{font-size:10.5px!important;padding:2px 8px!important;}

/* ---- 5. POS KEYPAD — must stay a 3-column grid on mobile --------------- */
html body .pos-numpad-grid,html body [class*="numpad-grid"],html body [class*="keypad"]{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:10px!important;width:100%!important;}
html body .pos-numpad-key,html body [class*="numpad-key"]{
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:56px!important;font-size:20px!important;color:#FFFFFF!important;}
@media(max-width:640px){
  html body .pos-numpad-grid,html body [class*="numpad-grid"],html body [class*="keypad"]{
    grid-template-columns:repeat(3,1fr)!important;max-width:320px!important;margin-left:auto!important;margin-right:auto!important;}
  html body .pos-numpad-key,html body [class*="numpad-key"]{min-height:52px!important;font-size:19px!important;}
  html body .content{padding:10px!important;}
  html body #content .section-header{padding:12px 14px!important;}
}

/* ---- 6. MODALS (Hotel Setup Wizard etc.) — tight, nothing cut off ------
   Trims chrome so more content fits, and guarantees long text wraps and the
   body scrolls instead of clipping.                                        */
html body .modal-overlay{padding:16px!important;}
html body .modal{max-height:92vh!important;border-width:1px!important;border-radius:12px!important;
  display:flex!important;flex-direction:column!important;}
html body .modal-header{padding:14px 20px!important;border-bottom-width:1px!important;
  background:#FFFFFF!important;flex-shrink:0!important;gap:12px!important;}
html body .modal-header h2,html body .modal-header h3,html body .modal-title{
  font-size:17px!important;line-height:1.3!important;margin:0!important;
  overflow-wrap:anywhere!important;white-space:normal!important;}
html body .modal-body{padding:16px 20px!important;overflow-y:auto!important;overflow-x:hidden!important;
  flex:1 1 auto!important;min-height:0!important;}
html body .modal-footer{padding:12px 20px!important;background:#FFFFFF!important;
  border-top-width:1px!important;flex-shrink:0!important;flex-wrap:wrap!important;gap:8px!important;}
/* nothing inside a modal may clip or overflow horizontally */
html body .modal *,html body .modal-body *{overflow-wrap:break-word!important;word-break:normal!important;
  max-width:100%!important;}
html body .modal label,html body .modal .form-label,html body .modal p,html body .modal li,
html body .modal td,html body .modal th,html body .modal .wizard-step-label{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.45!important;}
html body .modal input,html body .modal select,html body .modal textarea{
  width:100%!important;box-sizing:border-box!important;padding:8px 10px!important;font-size:13px!important;}
html body .modal .form-group,html body .modal .form-row{margin-bottom:12px!important;}
html body .modal .form-grid,html body .modal [class*="-grid"]{gap:12px!important;}
html body .modal table{table-layout:auto!important;width:100%!important;}
html body .modal table td,html body .modal table th{padding:6px 8px!important;font-size:12px!important;}
/* wizard step indicators must not squash or clip */
html body .modal [class*="wizard"],html body .modal [class*="step"]{
  flex-wrap:wrap!important;overflow:visible!important;}
html body .modal .btn{padding:8px 14px!important;font-size:13px!important;}
@media(max-width:640px){
  html body .modal-overlay{padding:8px!important;align-items:flex-start!important;}
  html body .modal{max-width:100%!important;width:100%!important;max-height:94vh!important;margin:4px!important;}
  html body .modal-header{padding:12px 14px!important;}
  html body .modal-body{padding:12px 14px!important;}
  html body .modal-footer{padding:10px 14px!important;}
  html body .modal-footer .btn{flex:1 1 auto!important;}
  html body .modal .form-grid,html body .modal [class*="-grid"]:not([class*="numpad"]):not([class*="keypad"]){
    grid-template-columns:1fr!important;}
}

/* ---- 7. SIDEBAR COLLAPSE INTEGRITY (fixes overlapping menu text) -------
   The accordion hides sections with overflow:hidden + max-height:0 + opacity:0
   on .nav-items-container. Nothing here may relax those, or collapsed
   sub-menus spill out and print on top of the section headers.            */
html body .sidebar .nav-items-container{
  overflow:hidden!important;transition:max-height .3s ease,opacity .25s ease!important;}
html body .sidebar .nav-section:not(.collapsed) .nav-items-container{
  max-height:2000px!important;opacity:1!important;pointer-events:auto!important;}
html body .sidebar .nav-section.collapsed .nav-items-container{
  max-height:0!important;opacity:0!important;padding:0!important;pointer-events:none!important;overflow:hidden!important;}
/* sub-menus stay in normal flow, only visible when opened by the app */
html body .sidebar .nav-submenu{position:static!important;background:rgba(0,0,0,.20)!important;}
html body .sidebar .nav-submenu:not(.open){display:none!important;}
html body .sidebar .nav-submenu.open{display:block!important;}
/* section rows keep their own line and never overlap the items below */
html body .sidebar .nav-section{padding:3px 0!important;position:relative!important;}
html body .sidebar .nav-separator{
  color:#C3BFFF!important;opacity:1!important;font-weight:600!important;font-size:9.5px!important;
  letter-spacing:.09em!important;white-space:nowrap!important;position:relative!important;
  background:transparent!important;border-top-color:rgba(255,255,255,.10)!important;}
html body .sidebar .nav-chevron{flex-shrink:0!important;margin-left:auto!important;color:#9A93FF!important;}

/* ---- 8. SCOPE GUARD — keep the public-page container rule off the app ---
   [class$="-container"] was also matching .nav-items-container in the sidebar
   (and app containers), injecting max-width + side padding where it must not. */
html body .sidebar [class$="-container"],
html body .sidebar .nav-items-container,
html body #content [class$="-container"]{
  max-width:none!important;margin-left:0!important;margin-right:0!important;
  padding-left:0!important;padding-right:0!important;}
html body .sidebar .nav-items-container{overflow:hidden!important;}

/* ---- 9. SIDEBAR SECTION LABELS (.nav-title) — the real fix -------------
   "FRONT OFFICE", "HOUSEKEEPING" etc. are .nav-title, not .nav-separator.
   Their colour was the old gold (#E0B860), which recolouring turned into a
   mid-tone blue: only ~3.3:1 on the dark rail, and dimmed further by
   opacity:.9 at 10px. Now a light tone of Stripe blue at ~11:1.           */
html body .sidebar .nav-title{
  color:#D8D5FF!important;opacity:1!important;font-weight:600!important;
  font-size:10.5px!important;letter-spacing:.08em!important;padding:9px 14px!important;
  white-space:nowrap!important;}
html body .sidebar .nav-title.collapsible:hover{
  background:rgba(195,191,255,.12)!important;color:#FFFFFF!important;opacity:1!important;}
html body .sidebar .nav-title .nav-chevron,html body .sidebar .nav-chevron{
  color:#C3BFFF!important;opacity:1!important;font-size:10px!important;flex-shrink:0!important;}
html body .sidebar .nav-title.collapsible:hover .nav-chevron{color:#FFFFFF!important;}
/* standalone top item ("PMS Dashboard") stays the brightest anchor */
html body .sidebar .nav-section-standalone .nav-item{color:#FFFFFF!important;font-weight:500!important;}
html body .sidebar .nav-section-standalone{border-bottom-color:rgba(255,255,255,.10)!important;}

/* ############################################################################
   ██  SkyHotelier — "MERIDIAN"  (v4 layer, appended 2026-07-26)
   ############################################################################
   Loaded last, appended last: this layer has the final word on every page.

   What it changes, and why:
     1. TYPE      IBM Plex Sans becomes the only voice — crisp, compact,
                  tabular figures. Space Grotesk / Inter / JetBrains retired.
     2. COLOUR    The charcoal greys (#1B2130 / #141922 / #2A3140) are replaced
                  by a deep-navy ramp anchored on #0A2540. Stripe blue #635BFF
                  is untouched — it remains the single accent.
     3. FIT       Nothing overlaps: min-width guards on every flex/grid child,
                  wrapping on modal copy, capped modal heights with an interior
                  scroll, and guaranteed gutters for icon-inset inputs.
     4. RESTRAINT No neon glows, no gradient text, no glassmorphism, no lift-on-
                  hover. Flat surfaces, hairline rules, one accent, borrowed
                  from ledger stationery rather than from an AI landing page.
     5. POS       Bright by default, and the order panel now shows the whole
                  check as it is posted instead of one line at a time.
   ############################################################################ */

/* ===========================================================================
   1. TOKENS — deep navy replaces charcoal; Stripe blue is preserved
   =========================================================================== */
:root{
  /* -- Navy ramp. Anchored on Stripe's own #0A2540, cooled and extended. -- */
  --mn-950:#04101F;   /* deepest — page-level dark, hero floor          */
  --mn-900:#071B33;   /* sidebar / header base                          */
  --mn-850:#0A2540;   /* THE navy — primary dark surface                */
  --mn-800:#0E2E4E;   /* raised dark surface, dark cards                */
  --mn-750:#123A5F;   /* hover on dark                                  */
  --mn-700:#17456F;   /* borders / dividers on dark                     */
  --mn-600:#22578A;   /* strong divider, dark-surface outline           */

  /* -- Accent: Stripe blue. Unchanged. ---------------------------------- */
  --mn-acc:#635BFF;
  --mn-acc-h:#5147E0;      /* hover / pressed                            */
  --mn-acc-bg:#EFEEFF;     /* tint on light                              */
  --mn-acc-ln:#D6D3FF;     /* tinted hairline                            */
  --mn-acc-dk:#A9A3FF;     /* accent legible ON navy                     */
  --mn-acc-dk-bg:rgba(169,163,255,.14);

  /* -- Light surfaces ---------------------------------------------------- */
  --mn-page:#F5F7FA;
  --mn-surf:#FFFFFF;
  --mn-surf2:#FAFBFC;
  --mn-hover:#EFF3F8;
  --mn-line:#E1E7EF;
  --mn-line-soft:#EDF1F6;

  /* -- Ink. Navy-tinted, never pure black. ------------------------------- */
  --mn-ink:#0A2540;
  --mn-mut:#4C6076;
  --mn-fnt:#7B8CA0;
  --mn-on-dark:#E8EEF6;
  --mn-on-dark-mut:#A9BDD3;

  /* -- Status. Desaturated so the accent stays the loudest thing. -------- */
  --mn-ok:#0B7A4B;  --mn-ok-bg:#E6F4ED;  --mn-ok-dk:#4ED9A0;
  --mn-wr:#9A6A12;  --mn-wr-bg:#FBF2DF;  --mn-wr-dk:#F0C674;
  --mn-no:#BC3B3B;  --mn-no-bg:#FBECEC;  --mn-no-dk:#FF8A8A;

  /* -- Type ---------------------------------------------------------------
     One family. IBM Plex Mono is reserved for code, nothing else.         */
  --mn-sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mn-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* -- Geometry. Tighter radii read as software, not as a product page. -- */
  --mn-r-sm:5px; --mn-r:7px; --mn-r-lg:10px;

  /* ---------------------------------------------------------------------
     Re-point every legacy token the app already consumes. The pages keep
     their own variable names; only what those names resolve to changes.
     --------------------------------------------------------------------- */
  --cn-page:var(--mn-page)!important;      --cn-surface:var(--mn-surf)!important;
  --cn-surface-2:var(--mn-surf2)!important;--cn-hover:var(--mn-hover)!important;
  --cn-ink:var(--mn-ink)!important;        --cn-muted:var(--mn-mut)!important;
  --cn-faint:var(--mn-fnt)!important;      --cn-line:var(--mn-line)!important;
  --cn-line-soft:var(--mn-line-soft)!important;
  --cn-accent:var(--mn-acc)!important;     --cn-accent-h:var(--mn-acc-h)!important;
  --cn-accent-bg:var(--mn-acc-bg)!important;
  --cn-accent-dk:var(--mn-acc-dk)!important;
  --cn-accent-dk-bg:var(--mn-acc-dk-bg)!important;
  --cn-slate:var(--mn-850)!important;      --cn-slate-2:var(--mn-900)!important;
  --cn-slate-ln:var(--mn-700)!important;
  --cn-on-dark:var(--mn-on-dark)!important;
  --cn-on-dark-mute:var(--mn-on-dark-mut)!important;

  /* charcoal family -> navy */
  --charcoal:var(--mn-850)!important;      --charcoal-dark:var(--mn-900)!important;
  --charcoal-light:var(--mn-800)!important;
  --navy:var(--mn-850)!important;          --navy-blue:var(--mn-800)!important;
  --navy-900:var(--mn-900)!important;      --navy-800:var(--mn-850)!important;
  --navy-700:var(--mn-800)!important;      --navy-600:var(--mn-700)!important;
  --dark:var(--mn-850)!important;          --darker:var(--mn-950)!important;
  --primary:var(--mn-850)!important;       --primary-dark:var(--mn-900)!important;
  --primary-light:var(--mn-800)!important;
  --purple:var(--mn-acc)!important;        --indigo:var(--mn-850)!important;
  --pink:var(--mn-acc)!important;          --cyan:var(--mn-600)!important;
  --teal:var(--mn-acc)!important;          --orange:var(--mn-acc)!important;

  /* accent family -> Stripe blue (kept) */
  --accent:var(--mn-acc)!important;        --accent-light:var(--mn-acc)!important;
  --accent-dark:var(--mn-acc-h)!important;
  --gold:var(--mn-acc)!important;          --gold-bright:var(--mn-acc)!important;
  --gold-light:var(--mn-acc-bg)!important; --gold-dark:var(--mn-acc-h)!important;
  --gold-deep:var(--mn-acc-h)!important;   --gold-500:var(--mn-acc)!important;
  --gold-soft:var(--mn-acc-bg)!important;  --gold-line:var(--mn-acc-ln)!important;

  /* neutrals + ink */
  --bg:var(--mn-page)!important;           --bg-alt:var(--mn-page)!important;
  --bg-light:var(--mn-page)!important;     --paper:var(--mn-page)!important;
  --light:var(--mn-page)!important;        --white:var(--mn-surf)!important;
  --surface:var(--mn-surf)!important;      --surface-2:var(--mn-surf2)!important;
  --card-bg:var(--mn-surf)!important;      --hover:var(--mn-hover)!important;
  --text:var(--mn-ink)!important;          --ink:var(--mn-ink)!important;
  --text-muted:var(--mn-mut)!important;    --muted:var(--mn-mut)!important;
  --secondary:var(--mn-mut)!important;     --text-light:var(--mn-fnt)!important;
  --text-inverse:#FFFFFF!important;
  --border:var(--mn-line)!important;       --line:var(--mn-line)!important;
  --line-soft:var(--mn-line-soft)!important;
  --gray-50:#F8FAFC!important;             --gray-100:#F1F5F9!important;
  --gray-200:var(--mn-line)!important;     --gray-500:var(--mn-mut)!important;
  --gray:var(--mn-mut)!important;

  /* status */
  --success:var(--mn-ok)!important;        --ok:var(--mn-ok)!important;
  --success-light:var(--mn-ok)!important;
  --danger:var(--mn-no)!important;         --stop:var(--mn-no)!important;
  --warning:var(--mn-wr)!important;        --wait:var(--mn-wr)!important;
  --warning-light:var(--mn-wr)!important;  --info:var(--mn-acc)!important;

  /* geometry + type + gradients */
  --radius:var(--mn-r)!important;          --radius-sm:var(--mn-r-sm)!important;
  --radius-lg:var(--mn-r-lg)!important;    --radius-xl:var(--mn-r-lg)!important;
  --font:var(--mn-sans)!important;         --font-body:var(--mn-sans)!important;
  --font-display:var(--mn-sans)!important; --font-heading:var(--mn-sans)!important;
  --font-mono:var(--mn-mono)!important;
  --gradient-gold:var(--mn-acc)!important;
  --gradient-dark:var(--mn-850)!important;
  --gradient-navy:var(--mn-850)!important;

  /* elevation — hairlines instead of glow */
  --shadow:none!important;    --shadow-sm:none!important; --shadow-md:none!important;
  --shadow-lg:none!important; --shadow-xl:none!important; --shadow-gold:none!important;
}

/* ===========================================================================
   2. TYPOGRAPHY — one family, compact, crisp
   ===========================================================================
   Compactness is done with a reduced base size and tightened tracking rather
   than by squeezing line-height, which is what makes descenders collide.     */
html body,
html body button, html body input, html body select, html body textarea,
html body .btn, html body .form-input, html body .form-control,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .hero-title, html body .section-title, html body .page-title,
html body .card-title, html body .about-title, html body .faq-title,
html body .hod-title, html body .paperless-title, html body .global-title,
html body .roles-title, html body .hr-docs-title, html body .why-card-title,
html body .nav-link, html body .nav-item, html body .logo-text, html body .brand{
  font-family:var(--mn-sans)!important;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1;
}
html body code, html body kbd, html body pre, html body samp, html body .mono{
  font-family:var(--mn-mono)!important;
}

html body{
  font-size:13.5px!important;
  line-height:1.5!important;
  letter-spacing:-.005em!important;
  color:var(--mn-ink)!important;
  background:var(--mn-page)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Headings: tight tracking, restrained weight, no gradient fills. */
html body :is(h1,h2,h3,h4,h5,h6){
  letter-spacing:-.021em!important;
  line-height:1.2!important;
  font-weight:600!important;
  text-wrap:balance;
}
html body h1{font-size:1.85rem!important;font-weight:650!important;}
html body h2{font-size:1.4rem!important;}
html body h3{font-size:1.12rem!important;}
html body h4{font-size:.98rem!important;}
html body h5,html body h6{font-size:.88rem!important;}

/* Figures line up in columns. Plex Sans has real tabular figures. */
html body :is(table,.stat-value,.kpi-value,.metric-value,.value,.amount,.figure,
  .count,.number,.price,.total,.money,[class*="-amount"],[class*="-total"],
  [class*="-price"],[class*="-value"]){
  font-variant-numeric:tabular-nums lining-nums!important;
  font-feature-settings:'tnum' 1,'lnum' 1;
}
html body :is(.stat-value,.kpi-value,.metric-value){letter-spacing:-.03em!important;}

/* Uppercase micro-labels get air, or they read as a smudge. */
html body :is(.eyebrow,.overline,.label-sm,.nav-title,.table th,thead th,
  .form-label,.stat-label,.kpi-label){
  letter-spacing:.055em!important;
}

/* ===========================================================================
   3. RESTRAINT — retire the visual tics of a generated landing page
   ===========================================================================
   Radial neon blobs, gradient headline fills, frosted glass, hover levitation
   and shine sweeps. All of it goes. What is left is flat colour and hairlines. */

/* 3a. Decorative glow / orb / grid-overlay layers */
html body :is(.hero-glow,.glow,.orb,.blob,.gradient-orb,.bg-glow,.aurora,
  .hero-grid-pattern,.grid-pattern,.bg-pattern,.particles,.mesh-gradient){
  display:none!important;
}

/* 3b. Gradient-filled headline text -> solid ink */
html body [style*="background-clip:text"],
html body [style*="background-clip: text"],
html body .gradient-text,html body .text-gradient{
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
  background:none!important;
  color:inherit!important;
}

/* 3c. Frosted glass */
html body *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}

/* 3d. Levitation, scale-jiggle and shine sweeps on hover */
html body :is(.card,.stat-card,.feature-card,.pricing-card,.why-card,.plan-card,
  .btn,.pos-item,.pos-dark-item,.hotel-option,.data-table tbody tr):hover{
  transform:none!important;
}
html body :is(.btn-primary,.btn-accent)::before{display:none!important;}
html body .float,html body [class*="animate-float"]{animation:none!important;}

/* 3e. Motion budget. Fast, short, and honoured only if the user allows it. */
html body *{transition-duration:.14s!important;animation-duration:.24s!important;}
@media (prefers-reduced-motion:reduce){
  html body *{transition:none!important;animation:none!important;}
}

/* 3f. Hairlines, not shadows. A card is defined by its edge. */
html body :is(.card,.stat-card,.panel,.widget,.feature-card,.pricing-card,
  .plan-card,.why-card,.modal,.dropdown-menu,.nav-dropdown-menu){
  box-shadow:none!important;
  border:1px solid var(--mn-line)!important;
  border-radius:var(--mn-r-lg)!important;
  background:var(--mn-surf)!important;
}
html body :is(.card,.stat-card,.panel,.widget):hover{
  border-color:#CFD9E6!important;
}

/* 3g. Sections that were dark charcoal become navy. */
html body :is(.hero,.cta-dark,.dark-section,.footer,.site-footer,.nav,
  .mobile-menu,.login-header,.section-header){
  background-image:none!important;
}
html body :is(.hero,.cta-dark,.dark-section){background-color:var(--mn-850)!important;}
html body :is(.footer,.site-footer){background-color:var(--mn-900)!important;}
html body .nav{background-color:var(--mn-900)!important;}
html body .nav.scrolled{background-color:rgba(7,27,51,.97)!important;}
html body .mobile-menu{background-color:var(--mn-900)!important;}
html body .sidebar,html body aside.sidebar,html body .app-sidebar,html body .admin-sidebar{
  background:var(--mn-900)!important;
  border-right:1px solid var(--mn-700)!important;
}

/* ===========================================================================
   4. FIT — nothing overlaps, nothing is clipped
   ===========================================================================
   Overlap in this app came from four recurring causes, addressed in order:
   flex/grid children that refuse to shrink, long unbroken strings, modals
   taller than the viewport, and icon-inset inputs whose padding was set on a
   sibling rule that a later stylesheet overwrote.                            */

/* 4a. The single most valuable line here. A flex/grid child defaults to
       min-width:auto, so it refuses to shrink below its content and pushes
       its neighbours out of the box. */
html body :is(.card,.modal,.panel,.form-group,.stat-card,.row,.col,
  .flex,[class*="-row"],[class*="-col"],[class*="-grid"],[class*="-flex"]) > *{
  min-width:0;
  min-height:0;
}

/* 4b. Long strings — emails, subdomains, reference codes, URLs — wrap
       instead of running past the edge. */
html body :is(.modal,.modal-body,.card,.card-body,.panel,.form-group,
  .hotel-option,.dropdown-menu,.tooltip,.badge,.alert,.notice,td,th,
  .stat-label,.form-label,.help-text,.hint,.error-message,.success-message){
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}

/* 4c. Genuinely single-line things truncate rather than wrap and shove. */
html body :is(.nav-item,.nav-link,.nav-title,.breadcrumb,.tab,
  .hotel-option-subdomain,.pos-dark-item-name,.pos-cart-item-name,
  .pos-dark-order-item-name,.list-item-title,.truncate){
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 4d. Modals: capped height, scrolling interior, sticky header and footer,
       and a body that can actually shrink (min-height:0). */
html body :is(.modal,.modal-content,.modal-dialog,.sky-translate-modal){
  max-width:min(96vw,760px)!important;
  max-height:min(90vh,900px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:var(--mn-r-lg)!important;
}
html body :is(.modal-body,.modal-content > .body,.wizard-body){
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  padding:16px 20px!important;
}
html body :is(.modal-header,.modal-footer,.wizard-header,.wizard-footer){
  flex:0 0 auto!important;
  padding:13px 20px!important;
}
html body .modal-header{
  border-bottom:1px solid var(--mn-line)!important;
  background:var(--mn-surf)!important;
}
html body .modal-footer{
  border-top:1px solid var(--mn-line)!important;
  background:var(--mn-surf2)!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  justify-content:flex-end!important;
}
html body .modal-title{font-size:15px!important;font-weight:600!important;}
html body .modal-overlay{background:rgba(4,16,31,.55)!important;}

/* 4e. Form controls never exceed their container, and the icon gutter is
       guaranteed here so a later rule cannot reclaim it. */
html body :is(input,select,textarea,.form-input,.form-control){
  max-width:100%!important;
  font-family:var(--mn-sans)!important;
  font-size:13.5px!important;
  line-height:1.4!important;
  color:var(--mn-ink)!important;
  background:var(--mn-surf)!important;
  border:1px solid var(--mn-line)!important;
  border-radius:var(--mn-r)!important;
  padding:9px 11px!important;
}
html body textarea{min-height:76px!important;resize:vertical!important;}
html body .input-wrapper{position:relative!important;display:block!important;}
html body .input-wrapper > :is(i,svg,.icon){
  position:absolute!important;left:12px!important;top:50%!important;
  transform:translateY(-50%)!important;pointer-events:none!important;
  color:var(--mn-fnt)!important;font-size:13px!important;line-height:1!important;
}
html body .input-wrapper > :is(input,.form-input){padding-left:36px!important;}
html body .input-wrapper > :is(button,.toggle-password){
  position:absolute!important;right:6px!important;top:50%!important;
  transform:translateY(-50%)!important;pointer-events:auto!important;
  background:none!important;border:none!important;cursor:pointer!important;
  color:var(--mn-fnt)!important;padding:6px!important;line-height:1!important;
}
html body .input-wrapper:has(> button,> .toggle-password) > :is(input,.form-input){
  padding-right:38px!important;
}
html body :is(input,select,textarea,.form-input,.form-control):focus{
  outline:none!important;
  border-color:var(--mn-acc)!important;
  box-shadow:0 0 0 3px var(--mn-acc-bg)!important;
}
html body ::placeholder{color:var(--mn-fnt)!important;opacity:1!important;}
html body .form-label,html body label{
  font-size:11.5px!important;font-weight:600!important;
  color:var(--mn-mut)!important;text-transform:uppercase!important;
  margin-bottom:5px!important;display:block!important;
}
html body .form-group{margin-bottom:14px!important;}

/* 4f. Buttons. Flat, single hue, text always legible on its own background. */
html body :is(.btn,button,.button){
  font-family:var(--mn-sans)!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:-.005em!important;
  border-radius:var(--mn-r)!important;
  padding:9px 15px!important;
  line-height:1.35!important;
  cursor:pointer;
  white-space:nowrap;
}
html body :is(.btn-primary,.btn-accent,.btn-gold){
  background:var(--mn-acc)!important;color:#FFFFFF!important;border:1px solid var(--mn-acc)!important;
}
html body :is(.btn-primary,.btn-accent,.btn-gold):hover{
  background:var(--mn-acc-h)!important;border-color:var(--mn-acc-h)!important;
}
html body .btn-secondary,html body .btn-dark{
  background:var(--mn-850)!important;color:#FFFFFF!important;border:1px solid var(--mn-850)!important;
}
html body .btn-secondary:hover,html body .btn-dark:hover{background:var(--mn-800)!important;}
html body .btn-outline{
  background:transparent!important;color:var(--mn-acc)!important;
  border:1px solid var(--mn-acc-ln)!important;
}
html body .btn-outline:hover{background:var(--mn-acc-bg)!important;border-color:var(--mn-acc)!important;}
/* on navy chrome an outline button must not go invisible */
html body :is(.nav,.mobile-menu,.footer,.sidebar) .btn-outline{
  color:var(--mn-acc-dk)!important;border-color:rgba(169,163,255,.42)!important;
}
html body :is(.nav,.mobile-menu,.footer,.sidebar) .btn-outline:hover{
  background:var(--mn-acc-dk-bg)!important;border-color:var(--mn-acc-dk)!important;
}
html body .btn-sm{padding:6px 11px!important;font-size:12px!important;}
html body .btn-lg{padding:12px 20px!important;font-size:14px!important;}
html body .btn:disabled,html body button:disabled{opacity:.5!important;cursor:not-allowed!important;}

/* 4g. Tables. Compact rows, sticky heads, figures right-aligned. */
html body table{
  border-collapse:separate!important;border-spacing:0!important;
  width:100%!important;font-size:12.5px!important;
}
html body :is(table th,thead th){
  font-size:10.5px!important;font-weight:600!important;
  text-transform:uppercase!important;color:var(--mn-mut)!important;
  background:var(--mn-surf2)!important;
  padding:8px 10px!important;text-align:left!important;
  border-bottom:1px solid var(--mn-line)!important;
  position:sticky!important;top:0!important;z-index:2!important;
  white-space:nowrap!important;
}
html body table td{
  padding:8px 10px!important;
  border-bottom:1px solid var(--mn-line-soft)!important;
  vertical-align:middle!important;
}
html body table tbody tr:hover{background:var(--mn-hover)!important;}
html body :is(td,th).amt,html body :is(td,th)[class*="amount"],
html body :is(td,th)[class*="total"],html body :is(td,th)[class*="price"]{
  text-align:right!important;font-variant-numeric:tabular-nums!important;
}
html body .table-container,html body .table-wrap{
  overflow:auto!important;max-height:none!important;
  border:1px solid var(--mn-line)!important;border-radius:var(--mn-r-lg)!important;
}

/* 4h. Badges, pills, alerts. */
html body :is(.badge,.pill,.chip,.tag){
  font-size:10.5px!important;font-weight:600!important;
  padding:2px 8px!important;border-radius:20px!important;
  letter-spacing:.02em!important;line-height:1.6!important;
  display:inline-block!important;
}
html body :is(.badge-success,.pill.paid,.badge.success){background:var(--mn-ok-bg)!important;color:var(--mn-ok)!important;}
html body :is(.badge-danger,.pill.void,.badge.danger){background:var(--mn-no-bg)!important;color:var(--mn-no)!important;}
html body :is(.badge-warning,.badge.warning){background:var(--mn-wr-bg)!important;color:var(--mn-wr)!important;}
html body :is(.badge-info,.badge.info,.badge-primary){background:var(--mn-acc-bg)!important;color:var(--mn-acc-h)!important;}

/* 4i. Dark chrome keeps light text — re-asserted against the new navy. */
html body :is(.sidebar,.nav,.footer,.mobile-menu,.cta-dark,.dark-section){
  color:var(--mn-on-dark)!important;
}
html body :is(.sidebar,.footer,.mobile-menu) :is(h1,h2,h3,h4,h5,p,span,li,a,label,small){
  color:var(--mn-on-dark)!important;
}
html body :is(.sidebar,.footer,.mobile-menu,.nav) a:hover{color:#FFFFFF!important;}
html body .sidebar .nav-item.active{
  background:var(--mn-acc-dk-bg)!important;color:#FFFFFF!important;
  box-shadow:inset 3px 0 0 var(--mn-acc-dk)!important;
}
html body .sidebar .nav-item:hover{background:rgba(255,255,255,.06)!important;color:#FFFFFF!important;}

/* 4j. Compact application shell — more rows per screen. */
html body :is(.card-body,.panel-body){padding:14px 16px!important;}
html body .card-header{padding:11px 16px!important;border-bottom:1px solid var(--mn-line)!important;}
html body .stat-card{padding:13px 15px!important;}
html body .stat-value{font-size:22px!important;font-weight:650!important;}
html body .stat-label{font-size:10.5px!important;color:var(--mn-mut)!important;text-transform:uppercase!important;}
html body .section-header{padding:12px 16px!important;border-radius:var(--mn-r-lg)!important;}
html body .section-header :is(h1,h2,h3,.section-title){color:#FFFFFF!important;}

/* ===========================================================================
   5. POINT OF SALE — bright, legible, and showing the whole check
   ===========================================================================
   Two problems were fixed here.

   BRIGHTNESS. The terminal was near-black (#1B2130 on #1B2130, so panels had
   no edge at all) with a red #e94560 accent and #00d26a price text that fails
   contrast on anything. It is now a white terminal on the page grey, navy ink,
   hairline edges, Stripe blue for the active state.

   THE ONE-ITEM PROBLEM. The order list was capped twice —
   `max-height:calc(100% - 230px)` and, in the light skin,
   `max-height:calc(100vh - 450px)` — while each posted line stacked its name
   and its quantity stepper on separate rows, ~62px tall. On a laptop that left
   room for a single line. The panel is now a five-row grid where the list is
   the only `1fr` row, so it absorbs every spare pixel, the double cap is
   removed, and each line is a single ~34px row: stepper, name, price. Fifteen
   or more posted items are visible at once, before anyone previews a bill.    */

/* 5a. Terminal variables — the dark skin is repainted rather than toggled, so
       markup that hardcodes `pos-dark-theme` comes out bright anyway. */
html body .pos-dark-theme,
html body .pos-light-theme,
html body .pos-light,
:root{
  --pos-bg:var(--mn-page)!important;
  --pos-surface:var(--mn-surf)!important;
  --pos-panel:var(--mn-surf)!important;
  --pos-hover:var(--mn-hover)!important;
  --pos-accent:var(--mn-acc)!important;
  --pos-text:var(--mn-ink)!important;
  --pos-text-muted:var(--mn-mut)!important;
  --pos-border:var(--mn-line)!important;
  --pos-success:var(--mn-ok)!important;
  --pos-warning:var(--mn-wr)!important;
  --pos-danger:var(--mn-no)!important;
  --pos-info:var(--mn-acc)!important;
}

/* 5b. Shell */
html body .pos-dark-container{
  background:var(--mn-page)!important;
  color:var(--mn-ink)!important;
  border:1px solid var(--mn-line)!important;
  border-radius:var(--mn-r-lg)!important;
  grid-template-columns:1fr 420px!important;
  height:calc(100vh - 118px)!important;   /* was -170px: 52px given back */
  min-height:560px!important;
  overflow:hidden!important;
}
html body .pos-dark-menu{background:var(--mn-page)!important;min-height:0!important;}

/* 5c. Category rail */
html body .pos-dark-categories{
  background:var(--mn-surf)!important;
  border-bottom:1px solid var(--mn-line)!important;
  padding:8px 10px!important;gap:6px!important;
}
html body .pos-dark-category{
  background:var(--mn-surf2)!important;
  border:1px solid var(--mn-line)!important;
  border-radius:var(--mn-r)!important;
  padding:7px 12px!important;min-width:70px!important;gap:3px!important;
}
html body .pos-dark-category:hover{background:var(--mn-hover)!important;border-color:#CFD9E6!important;}
html body .pos-dark-category.active{
  background:var(--mn-acc-bg)!important;border-color:var(--mn-acc)!important;
}
html body .pos-dark-category-icon{width:28px!important;height:28px!important;font-size:15px!important;}
html body .pos-dark-category-name{color:var(--mn-ink)!important;font-size:10.5px!important;font-weight:600!important;}
html body .pos-dark-category.active .pos-dark-category-name{color:var(--mn-acc-h)!important;}
html body .pos-dark-category-count{color:var(--mn-fnt)!important;font-size:9px!important;}

/* 5d. Search */
html body .pos-dark-search{
  background:var(--mn-surf)!important;border-bottom:1px solid var(--mn-line)!important;
  padding:8px 10px!important;
}
html body .pos-dark-search input{
  background:var(--mn-surf2)!important;border:1px solid var(--mn-line)!important;
  color:var(--mn-ink)!important;border-radius:var(--mn-r)!important;
  padding:9px 12px 9px 38px!important;font-size:13px!important;
}
html body .pos-dark-search input::placeholder{color:var(--mn-fnt)!important;}
html body .pos-dark-search input:focus{
  border-color:var(--mn-acc)!important;box-shadow:0 0 0 3px var(--mn-acc-bg)!important;
}

/* 5e. Menu grid — denser, so more of the menu is reachable without scrolling */
html body .pos-dark-items{
  background:var(--mn-page)!important;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr))!important;
  gap:7px!important;padding:9px!important;
}
html body .pos-dark-item{
  background:var(--mn-surf)!important;
  border:1px solid var(--mn-line)!important;
  border-radius:var(--mn-r)!important;
  padding:8px 7px!important;
  box-shadow:none!important;
}
html body .pos-dark-item:hover{
  border-color:var(--mn-acc)!important;background:var(--mn-acc-bg)!important;
  transform:none!important;box-shadow:none!important;
}
html body .pos-dark-item:active{background:var(--mn-acc-bg)!important;}
html body .pos-dark-item-image{
  height:34px!important;font-size:20px!important;margin-bottom:5px!important;
  background:var(--mn-surf2)!important;border-radius:var(--mn-r-sm)!important;
}
html body .pos-dark-item-name{
  color:var(--mn-ink)!important;font-size:11.5px!important;font-weight:600!important;
  line-height:1.3!important;white-space:normal!important;
  display:-webkit-box!important;-webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;overflow:hidden!important;min-height:2.6em!important;
}
html body .pos-dark-item-price{
  color:var(--mn-ink)!important;font-size:12.5px!important;font-weight:700!important;
  font-variant-numeric:tabular-nums!important;
}

/* 5f. ORDER PANEL — a five-row grid. Only the item list flexes.
       This is what removes the double max-height cap for good. */
html body .pos-dark-order{
  background:var(--mn-surf)!important;
  border-left:1px solid var(--mn-line)!important;
  display:grid!important;
  grid-template-rows:auto 1fr auto auto auto!important;   /* header | ITEMS | summary | actions | pay */
  grid-template-columns:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
html body .pos-dark-order-header{
  background:var(--mn-850)!important;
  background-image:none!important;
  color:#FFFFFF!important;
  padding:10px 14px!important;
}
html body .pos-dark-check-row{margin-bottom:8px!important;}
html body .pos-dark-check-number{font-size:15px!important;font-weight:650!important;}
html body .pos-dark-check-type{
  background:rgba(169,163,255,.20)!important;color:var(--mn-acc-dk)!important;
  padding:3px 8px!important;font-size:10px!important;border-radius:var(--mn-r-sm)!important;
}
html body .pos-dark-table-field{
  background:rgba(255,255,255,.07)!important;border-radius:var(--mn-r-sm)!important;padding:5px 7px!important;
}
html body .pos-dark-table-field-label{font-size:8.5px!important;opacity:.72!important;}
html body .pos-dark-table-field-value{font-size:13px!important;font-weight:650!important;}

/* THE FIX: the list is the grid's only 1fr row. Both caps are lifted. */
html body .pos-dark-order-items,
html body .pos-light .pos-dark-order-items{
  grid-row:2!important;
  background:var(--mn-surf)!important;
  max-height:none!important;      /* was calc(100% - 230px) / calc(100vh - 450px) */
  min-height:0!important;
  height:auto!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  padding:7px 8px!important;
  display:block!important;
  scroll-behavior:smooth;
}
html body .pos-dark-order-items::-webkit-scrollbar{width:8px;}
html body .pos-dark-order-items::-webkit-scrollbar-track{background:var(--mn-surf2)!important;}
html body .pos-dark-order-items::-webkit-scrollbar-thumb{background:#C6D0DC!important;border-radius:4px;}

/* Each posted line is ONE row ~34px tall, not a two-row stack ~62px. */
html body .pos-dark-order-item{
  background:var(--mn-surf)!important;
  border:1px solid var(--mn-line-soft)!important;
  border-radius:var(--mn-r-sm)!important;
  padding:5px 8px!important;
  margin-bottom:4px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  grid-template-areas:'qty name price' 'mods mods mods' 'note note note'!important;
  align-items:center!important;
  column-gap:8px!important;row-gap:3px!important;
  scroll-margin:8px;
}
html body .pos-dark-order-item:nth-child(odd){background:var(--mn-surf2)!important;}
html body .pos-dark-order-item.sent{
  background:var(--mn-ok-bg)!important;border-color:#BFE3D0!important;
}
html body .pos-dark-order-item-row{
  grid-area:name!important;display:block!important;margin:0!important;min-width:0!important;
}
html body .pos-dark-order-item-name{
  color:var(--mn-ink)!important;font-size:12px!important;font-weight:600!important;
  display:block!important;
}
html body .pos-dark-order-item-price{
  grid-area:price!important;
  color:var(--mn-ink)!important;font-size:12px!important;font-weight:700!important;
  font-variant-numeric:tabular-nums!important;justify-self:end!important;white-space:nowrap!important;
}
html body .pos-dark-order-item-qty{
  grid-area:qty!important;margin:0!important;gap:4px!important;flex-shrink:0!important;
}
html body .pos-dark-qty-btn{
  width:20px!important;height:20px!important;
  background:var(--mn-surf)!important;border:1px solid var(--mn-line)!important;
  color:var(--mn-ink)!important;font-size:11px!important;border-radius:var(--mn-r-sm)!important;
}
html body .pos-dark-qty-btn:hover{background:var(--mn-acc)!important;border-color:var(--mn-acc)!important;color:#FFFFFF!important;}
html body .pos-dark-qty-btn.delete{color:var(--mn-no)!important;}
html body .pos-dark-qty-btn.delete:hover{background:var(--mn-no)!important;border-color:var(--mn-no)!important;color:#FFFFFF!important;}
html body .pos-dark-order-item-mods{
  grid-area:mods!important;margin:0!important;padding:0!important;border:none!important;
}
html body .pos-dark-mod-tag{
  background:var(--mn-acc-bg)!important;color:var(--mn-acc-h)!important;
  font-size:9.5px!important;padding:1px 6px!important;margin:0 3px 0 0!important;
}
html body .pos-dark-order-item-note{
  grid-area:note!important;margin:0!important;
  color:var(--mn-mut)!important;font-size:10.5px!important;font-style:normal!important;
}
html body .pos-dark-order-empty{
  height:auto!important;padding:44px 16px!important;color:var(--mn-fnt)!important;
}
html body .pos-dark-order-empty i{color:var(--mn-line)!important;opacity:1!important;font-size:32px!important;}
html body .pos-dark-order-empty p{color:var(--mn-mut)!important;font-size:13px!important;}

/* 5g. Summary + actions — trimmed, because every pixel here is a pixel the
       item list does not get. */
html body .pos-dark-order-summary{
  grid-row:3!important;
  background:var(--mn-surf2)!important;
  border-top:1px solid var(--mn-line)!important;
  padding:9px 14px!important;
}
html body .pos-dark-summary-row{
  color:var(--mn-mut)!important;font-size:12px!important;margin-bottom:3px!important;
  font-variant-numeric:tabular-nums!important;
}
html body .pos-dark-summary-row.discount{color:var(--mn-ok)!important;}
html body .pos-dark-summary-row.total{
  color:var(--mn-ink)!important;font-size:16px!important;font-weight:700!important;
  padding-top:7px!important;margin-top:6px!important;
  border-top:1px solid var(--mn-line)!important;
}
html body .pos-dark-summary-row.total .value{color:var(--mn-acc-h)!important;}
html body .pos-dark-actions{
  grid-row:4!important;
  background:var(--mn-surf)!important;border-top:1px solid var(--mn-line)!important;
  padding:8px 10px!important;gap:6px!important;
}
html body .pos-payment-action{grid-row:5!important;background:var(--mn-surf)!important;padding:0 10px 10px!important;}
html body .pos-dark-action-btn{
  padding:8px 5px!important;font-size:10.5px!important;gap:2px!important;
  border-radius:var(--mn-r)!important;
  background:var(--mn-surf)!important;color:var(--mn-ink)!important;
  border:1px solid var(--mn-line)!important;
}
html body .pos-dark-action-btn i{font-size:14px!important;}
html body .pos-dark-action-btn:hover{background:var(--mn-hover)!important;border-color:#CFD9E6!important;}
html body .pos-dark-action-btn.outline{background:var(--mn-surf)!important;color:var(--mn-ink)!important;border:1px solid var(--mn-line)!important;}
html body .pos-dark-action-btn.outline:hover{background:var(--mn-acc-bg)!important;border-color:var(--mn-acc)!important;color:var(--mn-acc-h)!important;}
html body .pos-dark-action-btn.kot{background:var(--mn-850)!important;color:#FFFFFF!important;border-color:var(--mn-850)!important;}
html body .pos-dark-action-btn.kot:hover{background:var(--mn-800)!important;}
html body .pos-dark-action-btn.bill{background:var(--mn-wr-bg)!important;color:var(--mn-wr)!important;border-color:#E8D3A6!important;}
html body .pos-dark-action-btn.pay,html body .pos-dark-action-btn.success{
  background:var(--mn-acc)!important;color:#FFFFFF!important;border-color:var(--mn-acc)!important;
}
html body .pos-dark-action-btn.pay:hover,html body .pos-dark-action-btn.success:hover{background:var(--mn-acc-h)!important;}

/* 5h. The older `.pos-cart-*` terminal gets the same treatment. */
html body .pos-layout{grid-template-columns:1fr 400px!important;height:calc(100vh - 150px)!important;}
html body .pos-cart{
  display:grid!important;grid-template-rows:auto 1fr auto auto!important;
  background:var(--mn-surf)!important;border:1px solid var(--mn-line)!important;
  border-radius:var(--mn-r-lg)!important;overflow:hidden!important;min-height:0!important;
}
html body .pos-cart-items{
  max-height:none!important;min-height:0!important;height:auto!important;
  overflow-y:auto!important;background:var(--mn-surf)!important;
}
html body .pos-cart-item{padding:6px 12px!important;border-bottom:1px solid var(--mn-line-soft)!important;}
html body .pos-cart-item:nth-child(odd){background:var(--mn-surf2)!important;}
html body .pos-cart-item-name{font-size:12px!important;color:var(--mn-ink)!important;}
html body .pos-cart-item-price{font-size:11px!important;color:var(--mn-mut)!important;}
html body .pos-cart-item-qty button{
  width:20px!important;height:20px!important;background:var(--mn-surf)!important;
  border:1px solid var(--mn-line)!important;color:var(--mn-ink)!important;
}
html body .pos-cart-item-qty button:hover{background:var(--mn-acc)!important;color:#FFFFFF!important;border-color:var(--mn-acc)!important;}
html body .pos-cart-summary{background:var(--mn-surf2)!important;border-top:1px solid var(--mn-line)!important;padding:10px 14px!important;}
html body .pos-cart-total{color:var(--mn-ink)!important;font-size:15px!important;border-top:1px solid var(--mn-line)!important;}
html body .pos-cart-header{background:var(--mn-850)!important;color:#FFFFFF!important;border-bottom:none!important;}
html body .pos-items{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))!important;}
html body .pos-item{background:var(--mn-surf)!important;border:1px solid var(--mn-line)!important;}
html body .pos-item:hover{border-color:var(--mn-acc)!important;background:var(--mn-acc-bg)!important;transform:none!important;}
html body .pos-item-name{color:var(--mn-ink)!important;font-size:11.5px!important;}
html body .pos-item-price{color:var(--mn-ink)!important;font-weight:700!important;}
html body .pos-category{background:var(--mn-surf)!important;border:1px solid var(--mn-line)!important;color:var(--mn-ink)!important;}
html body .pos-category.active,html body .pos-category:hover{
  background:var(--mn-acc)!important;border-color:var(--mn-acc)!important;color:#FFFFFF!important;
}

/* 5i. Mobile terminal: the cart summary bar and expanded sheet stay bright,
       and the sheet gets most of the screen so posting is still visible. */
@media (max-width:900px){
  html body .pos-dark-container{
    grid-template-columns:1fr!important;height:calc(100vh - 96px)!important;
  }
  html body .pos-mobile-cart-summary{
    background:var(--mn-850)!important;color:#FFFFFF!important;
    border-top:1px solid var(--mn-700)!important;
  }
  html body .pos-dark-order.expanded{
    background:var(--mn-surf)!important;height:88vh!important;
  }
  html body .pos-dark-order.expanded .pos-dark-order-items{
    max-height:none!important;min-height:38vh!important;
  }
  html body .pos-cart-toggle-bar{background:var(--mn-850)!important;}
  html body .pos-layout{grid-template-columns:1fr!important;height:auto!important;}
}

/* ===========================================================================
   6. PUBLIC PAGES — the marketing surface, calmed down
   =========================================================================== */
html body .hero{
  min-height:auto!important;padding:96px 0 64px!important;
  background:var(--mn-850)!important;
}
html body .hero-title{
  font-family:var(--mn-sans)!important;
  font-size:clamp(1.9rem,4vw,3rem)!important;
  font-weight:650!important;letter-spacing:-.028em!important;
  line-height:1.1!important;color:#FFFFFF!important;
}
html body .hero-subtitle,html body .hero p{
  color:var(--mn-on-dark-mut)!important;font-size:15px!important;
  line-height:1.55!important;max-width:60ch!important;
}
html body .section-title{
  font-family:var(--mn-sans)!important;
  font-size:clamp(1.4rem,2.4vw,2rem)!important;
  font-weight:650!important;letter-spacing:-.025em!important;color:var(--mn-ink)!important;
}
html body .nav-logo-text span,html body .logo-text span{color:var(--mn-acc-dk)!important;}
html body .nav-logo-icon,html body .logo-icon{
  background:var(--mn-acc)!important;background-image:none!important;
  color:#FFFFFF!important;border-radius:var(--mn-r)!important;box-shadow:none!important;
}
html body .nav-link{font-size:12.5px!important;color:rgba(232,238,246,.86)!important;}
html body .nav-link:hover{color:#FFFFFF!important;background:rgba(169,163,255,.12)!important;}
html body .nav-dropdown-item i{color:var(--mn-acc)!important;}
html body .nav-dropdown-item:hover{background:var(--mn-acc-bg)!important;background-image:none!important;}
html body .mobile-menu-link i,html body .mobile-menu-close{color:var(--mn-acc-dk)!important;}
html body .mobile-menu-link:hover{background:var(--mn-acc-dk-bg)!important;color:var(--mn-acc-dk)!important;border-left-color:var(--mn-acc-dk)!important;}

/* ===========================================================================
   7. RESPONSIVE — the compact scale must not become an unreadable scale
   =========================================================================== */
@media (max-width:640px){
  html body{font-size:14px!important;}
  html body h1{font-size:1.5rem!important;}
  html body h2{font-size:1.25rem!important;}
  html body :is(input,select,textarea,.form-input){font-size:16px!important;} /* no iOS zoom */
  html body :is(.btn,button){min-height:42px!important;}
  html body :is(.modal,.modal-content){max-width:96vw!important;max-height:92vh!important;}
  html body :is(.card-body,.panel-body){padding:12px 13px!important;}
}
@media print{
  html body :is(.sidebar,.nav,.footer,.pos-dark-actions,.btn){display:none!important;}
  html body *{background:#FFFFFF!important;color:#000000!important;}
}

/* ===========================================================================
   8. STAND-DOWN — the sign-in page styles itself
   ===========================================================================
   /login/ is a single self-contained composition and loads this file after its
   own <style>. Without this block the generic rules above would win on
   !important alone and quietly undo the page: the display heading would snap to
   1.85rem, the "remember my email" label would go uppercase because
   text-transform inherits from <label>, and the buttons and inputs would take
   the compact console metrics instead of the roomier ones a login form wants.
   Only the properties that actually collide are handed back.                 */
html body.sky-auth :is(h1,h2,h3,h4,h5,h6){font-size:revert!important;font-weight:revert!important;}
html body.sky-auth .aside-head{
  font-size:clamp(1.7rem,2.9vw,2.45rem)!important;font-weight:650!important;
  letter-spacing:-.032em!important;line-height:1.08!important;
}
html body.sky-auth .aside-rule-title{font-size:26px!important;font-weight:600!important;}
html body.sky-auth .panel-title{font-size:25px!important;font-weight:650!important;letter-spacing:-.03em!important;}
html body.sky-auth .forgot-form h3{font-size:19px!important;font-weight:650!important;}
html body.sky-auth .access-card h3{font-size:14px!important;font-weight:600!important;}

/* labels: only .form-label is a caps micro-label; the checkbox label is prose */
html body.sky-auth label{text-transform:none!important;font-size:inherit!important;
  font-weight:inherit!important;color:inherit!important;margin-bottom:0!important;display:inline-flex!important;}
html body.sky-auth .form-label{
  display:block!important;text-transform:uppercase!important;
  font-size:10px!important;font-weight:600!important;letter-spacing:.12em!important;
  color:var(--mn-mut)!important;margin-bottom:6px!important;
}
html body.sky-auth .remember span{text-transform:none!important;font-size:12px!important;color:var(--mn-mut)!important;}

/* controls keep the login page's own metrics */
html body.sky-auth .btn{padding:12px 16px!important;font-size:13.5px!important;width:100%!important;}
html body.sky-auth .back-to-login{padding:0!important;width:auto!important;font-size:12px!important;font-weight:400!important;}
html body.sky-auth .toggle-password{padding:7px!important;width:auto!important;}
html body.sky-auth .form-input{padding:11px 12px 11px 36px!important;font-size:13.5px!important;background:var(--mn-surf2)!important;}
html body.sky-auth .form-input:focus{background:var(--mn-surf)!important;}
html body.sky-auth .remember input{width:14px!important;height:14px!important;padding:0!important;min-height:0!important;}
html body.sky-auth .form-group{margin-bottom:15px!important;}
html body.sky-auth .aside{color:var(--mn-on-dark)!important;}
html body.sky-auth .aside::before{display:block!important;}   /* the hairline grid is structure, not a glow */
@media (max-width:520px){
  html body.sky-auth .form-input{font-size:16px!important;}
  html body.sky-auth .btn{padding:13px 16px!important;font-size:14px!important;}
}

/* ############################################################################
   ██  v5 — CORRECTIONS  (appended 2026-07-26, after live review)
   ############################################################################
   Two of these are regressions from the v4 layer above. They are fixed here
   rather than edited out of v4 so the reasoning stays on the record.
   ############################################################################ */

/* ===========================================================================
   R1. REGRESSION — `background-image:none` erased gradient-only buttons
   ===========================================================================
   v4 set `background-image:none!important` on every button to kill the shine
   sweep. But 30 buttons in main.html declare their colour INLINE and ONLY as a
   gradient, e.g. the KOT button:
       style="background:linear-gradient(135deg,#177A4C,#177A4C);color:white"
   A gradient is a background-IMAGE. Stripping it left background-color
   transparent, so those buttons became white text on a white bar — invisible.
   The blanket declaration has been deleted from the v4 rule above (it cannot
   be undone from here — `revert` rolls back to the UA origin, where
   background-image is also `none`). Only the classed buttons that v4 gives a
   solid background-color still have their gradient removed.                  */
html body :is(.btn-primary,.btn-accent,.btn-gold,.btn-secondary,.btn-dark,.btn-outline){
  background-image:none!important;
}
/* the shine sweep is removed by hiding the pseudo-element, not the background */
html body :is(.btn-primary,.btn-accent)::before{display:none!important;}

/* ===========================================================================
   R2. REGRESSION — the app's section banner lost its background
   ===========================================================================
   main.html paints `.section-header` with a gradient and nothing else. v4 put
   it in the list that gets `background-image:none` but gave it no
   background-color to fall back to, so the banner went transparent while v4
   still forced its title white: white on white.

   It is now a solid mid navy — lighter than the original near-black, which is
   also what was asked for: no dark-blue text sitting on a dark panel, and no
   jump between two extremes.                                                 */
html body .section-header{
  background:#123A5F!important;          /* mid navy, not #141922 */
  background-image:none!important;
  border:1px solid #1D4874!important;
  border-radius:var(--mn-r-lg)!important;
  padding:16px 20px!important;
}
html body .section-header :is(h1,h2,h3,h4,.section-title,.page-title){
  color:#FFFFFF!important;
  font-family:var(--mn-sans)!important;
  font-size:17px!important;font-weight:600!important;letter-spacing:-.022em!important;
}
html body .section-header :is(p,.section-subtitle,small,span:not(.badge):not([class*="badge"])){
  color:#C5D5E6!important;
}
html body .section-header .badge,html body .section-header [class*="badge"]{
  background:rgba(169,163,255,.20)!important;color:#CFCBFF!important;border:none!important;
}
/* the same guarantee for the marketing login banner */
html body .login-header{background:var(--mn-850)!important;background-image:none!important;}

/* ===========================================================================
   R3. APP TOP BAR — solid navy, light type, nothing dark-on-dark
   =========================================================================== */
html body .header:not(.section-header){
  background:var(--mn-850)!important;background-image:none!important;
  border-bottom:1px solid var(--mn-700)!important;box-shadow:none!important;
}
html body .header:not(.section-header) :is(h1,h2,h3,h4,p,span,a,label,small,b,strong,i){
  color:#E8EEF6!important;
}
html body .header:not(.section-header) :is(.logo h1,.logo-text,.brand){color:#FFFFFF!important;}
html body .header:not(.section-header) a:hover{color:#FFFFFF!important;}

/* ===========================================================================
   1. POS SIGN-IN SCREEN — lighter, and every key legible
   ===========================================================================
   Three faults. The overlay was a near-black gradient. `.pos-login-title` is
   declared twice in main.html; the first sets `color:#fff` and the second does
   not reset it, so the title was white text inside the white box. And the
   numpad's hover state resolved to a dark navy behind dark navy text, which is
   why a key vanished the moment the pointer touched it.                       */
html body .pos-login-overlay{
  background:#EEF2F8!important;background-image:none!important;
}
html body .pos-login-box{
  background:var(--mn-surf)!important;
  border:1px solid var(--mn-line)!important;
  border-radius:var(--mn-r-lg)!important;
  box-shadow:none!important;
  padding:30px 28px!important;max-width:390px!important;
}
html body .pos-login-logo{color:var(--mn-acc)!important;font-size:34px!important;margin-bottom:10px!important;}
html body .pos-login-title{
  color:var(--mn-ink)!important;                 /* was #fff on a white box */
  font-size:19px!important;font-weight:650!important;letter-spacing:-.026em!important;
}
html body .pos-login-subtitle{color:var(--mn-mut)!important;font-size:12.5px!important;margin-bottom:20px!important;}
html body .pos-login-outlet select,html body .pos-login-box select{
  background:var(--mn-surf2)!important;color:var(--mn-ink)!important;
  border:1px solid var(--mn-line)!important;
}
html body .pos-login-outlet select option,html body .pos-login-box select option{
  background:var(--mn-surf)!important;color:var(--mn-ink)!important;
}
html body .pos-pin-display{
  background:var(--mn-surf2)!important;border:1px solid var(--mn-line)!important;
  border-radius:var(--mn-r)!important;padding:14px!important;min-height:54px!important;
  color:var(--mn-ink)!important;
}
html body .pos-pin-dot{background:var(--mn-acc)!important;}

/* Numpad: light key, navy digit, accent tint on hover — never dark-on-dark. */
html body .pos-numpad-grid{gap:8px!important;margin-bottom:16px!important;}
html body .pos-numpad-key{
  background:var(--mn-surf)!important;background-image:none!important;
  border:1px solid var(--mn-line)!important;border-radius:var(--mn-r)!important;
  color:var(--mn-ink)!important;
  font-family:var(--mn-sans)!important;font-size:19px!important;font-weight:600!important;
  padding:15px 10px!important;font-variant-numeric:tabular-nums!important;
}
html body .pos-numpad-key:hover{
  background:var(--mn-acc-bg)!important;border-color:var(--mn-acc)!important;
  color:var(--mn-acc-h)!important;                /* the fix: stays legible */
}
html body .pos-numpad-key.accent,
html body .pos-numpad-key.enter,
html body .pos-numpad-key[class*="enter"]{
  background:var(--mn-acc)!important;background-image:none!important;
  border-color:var(--mn-acc)!important;color:#FFFFFF!important;
}
html body :is(.pos-numpad-key.accent,.pos-numpad-key.enter):hover{
  background:var(--mn-acc-h)!important;border-color:var(--mn-acc-h)!important;color:#FFFFFF!important;
}
html body .pos-numpad-key.clear{
  background:var(--mn-no-bg)!important;background-image:none!important;
  border-color:#F2CFCF!important;color:var(--mn-no)!important;
}
html body .pos-numpad-key.clear:hover{background:var(--mn-no)!important;border-color:var(--mn-no)!important;color:#FFFFFF!important;}
/* whatever else sits in that box, give it a readable default */
html body .pos-login-box button:not(.pos-numpad-key){
  background:var(--mn-acc)!important;color:#FFFFFF!important;
  border:1px solid var(--mn-acc)!important;border-radius:var(--mn-r)!important;
}

/* ===========================================================================
   2. POS AFTER SIGN-IN — meet in the middle
   ===========================================================================
   v4 swung the terminal from near-black to white, which traded one extreme for
   another against the navy order header. The header is now a light slate panel
   with navy type, so the panel reads as one surface with tonal steps rather
   than two opposing blocks.                                                   */
html body .pos-dark-order-header{
  background:#E7EDF6!important;background-image:none!important;
  color:var(--mn-ink)!important;
  border-bottom:1px solid #D3DEEC!important;
}
html body .pos-dark-check-number{color:var(--mn-ink)!important;}
html body .pos-dark-check-type{
  background:var(--mn-acc-bg)!important;color:var(--mn-acc-h)!important;
}
html body .pos-dark-table-field{
  background:var(--mn-surf)!important;border:1px solid #D3DEEC!important;
}
html body .pos-dark-table-field-label{color:var(--mn-mut)!important;opacity:1!important;}
html body .pos-dark-table-field-value{color:var(--mn-ink)!important;}
html body .pos-dark-order-header :is(i,svg,button){color:var(--mn-mut)!important;}

/* the menu side gets a faint tint so the two halves are distinguishable
   without either going dark */
html body .pos-dark-container{background:#F1F4F9!important;}
html body .pos-dark-menu{background:#F1F4F9!important;}
html body .pos-dark-items{background:transparent!important;}

/* Action buttons: every variant gets an explicit pair, so none can inherit
   its way into invisibility. */
html body .pos-dark-action-btn{
  background:var(--mn-surf)!important;background-image:none!important;
  color:var(--mn-ink)!important;border:1px solid var(--mn-line)!important;
}
html body .pos-dark-action-btn i{color:inherit!important;}
html body .pos-dark-action-btn.kot{background:#0B7A4B!important;color:#FFFFFF!important;border-color:#0B7A4B!important;}
html body .pos-dark-action-btn.kot:hover{background:#096440!important;border-color:#096440!important;}
html body .pos-dark-action-btn.bill{background:var(--mn-wr-bg)!important;color:#7A5310!important;border-color:#E4CB9C!important;}
html body .pos-dark-action-btn.bill:hover{background:#9A6A12!important;color:#FFFFFF!important;border-color:#9A6A12!important;}
html body :is(.pos-dark-action-btn.pay,.pos-dark-action-btn.success){
  background:var(--mn-acc)!important;color:#FFFFFF!important;border-color:var(--mn-acc)!important;
}
html body :is(.pos-dark-action-btn.danger,.pos-dark-action-btn.void){
  background:var(--mn-no-bg)!important;color:var(--mn-no)!important;border-color:#F2CFCF!important;
}
/* the five inline-styled buttons under the order panel keep their own colours;
   only guarantee the label is readable on them */
html body .pos-dark-order ~ * button[style*="linear-gradient"],
html body .pos-dark-order button[style*="linear-gradient"]{color:#FFFFFF!important;}

/* Quick-action strip */
html body .pos-quick-btn{
  background:var(--mn-surf)!important;color:var(--mn-ink)!important;
  border:1px solid var(--mn-line)!important;
}
html body .pos-quick-btn.active{
  background:var(--mn-acc)!important;color:#FFFFFF!important;border-color:var(--mn-acc)!important;
}
html body .pos-quick-btn.active .badge{background:rgba(255,255,255,.24)!important;color:#FFFFFF!important;}

/* ===========================================================================
   3. TYPE — sharper and more compact across the signed-in app
   ===========================================================================
   Confirming the family: IBM Plex Sans, imported on line 1 of this file and
   forced on body, all headings, and every control. Nothing else is loaded.
   IBM Plex Mono appears only inside <code>. To verify in the browser: inspect
   any element and read `font-family` under Computed.

   The scale drops a further half-step and the tracking tightens, which is what
   reads as "sharp" — Plex has a large x-height, so it stays legible small.    */
html body{font-size:13px!important;line-height:1.46!important;letter-spacing:-.008em!important;}
html body :is(h1,h2,h3,h4,h5,h6){letter-spacing:-.026em!important;line-height:1.16!important;}
html body h1{font-size:1.62rem!important;}
html body h2{font-size:1.28rem!important;}
html body h3{font-size:1.05rem!important;}
html body h4{font-size:.94rem!important;}
html body :is(.card-body,.panel-body){padding:12px 14px!important;}
html body :is(table,table td){font-size:12px!important;}
html body table th{font-size:10px!important;}
html body :is(.btn,button,.button){font-size:12.5px!important;padding:8px 14px!important;}
html body :is(input,select,textarea,.form-input,.form-control){font-size:13px!important;padding:8px 10px!important;}
html body .stat-value{font-size:21px!important;}
html body .nav-item{font-size:12.5px!important;}
/* never dark type on the dark rail or the banners */
html body .sidebar :is(a,span,li,p,i){color:#E8EEF6!important;}
html body .sidebar .nav-item i{color:#A9A3FF!important;}

/* ===========================================================================
   4. LANDING PAGE — simplicity, visibility, elegance
   =========================================================================== */

/* 4a. VISIBILITY. main.html and index.html both carry a late override,
   `.section-title{color:#ffffff}`, which is correct for the two banners that
   sit on navy and wrong for the eight headings on light backgrounds — hence
   "Everything You Need to" and "How We Compare" disappearing. The colour is
   set here WITHOUT !important on purpose: it outranks the stylesheet rule on
   specificity, while the inline `style="color:white"` on the genuinely dark
   sections still outranks this. Both cases land correctly from one rule.     */
html body .section-title{color:var(--mn-ink);}
html body .section-title span{color:var(--mn-acc);}
html body :is(.about-title,.faq-title,.hod-title,.paperless-title,.global-title,
  .roles-title,.hr-docs-title,.why-card-title){color:var(--mn-ink);}
html body :is(.about-title,.faq-title,.global-title,.roles-title,.hr-docs-title) span{color:var(--mn-acc);}
/* the little rule under a centred heading: one hairline, one colour */
html body .section-title::after{
  background:var(--mn-acc)!important;background-image:none!important;
  width:36px!important;height:2px!important;margin-top:14px!important;
}

/* 4b. ONE PALETTE. The page was carrying cream, mint, powder blue, amber and
   warm gold as section tints. Every band is now either white or the single
   page grey, so the only colour on the page is the accent.                   */
html body :is(.global-section,.hr-docs-section,.payroll-section,.roles-section,
  .paperless-section,.hod-showcase,.support-section,.faq-section,.compare-section,
  .features,.contact-section,.hod-submit-section){
  background:var(--mn-page)!important;background-image:none!important;
}
html body :is(.about-section,.pricing,.hod-progress-section){
  background:var(--mn-surf)!important;background-image:none!important;
}
html body .why-section{background:var(--mn-850)!important;background-image:none!important;}
html body :is(.global-section,.hr-docs-section,.payroll-section,.roles-section,
  .paperless-section,.hod-showcase,.support-section,.faq-section,.compare-section,
  .features,.contact-section,.about-section,.pricing){
  padding-top:72px!important;padding-bottom:72px!important;
  border-top:1px solid var(--mn-line)!important;
}

/* 4c. MARGINS. Generous, equal gutters that scale with the viewport, and a
   narrower measure so text does not run the full width of a large monitor.   */
html body :is(.container,.nav-container,.section-container,.global-container,
  .hr-docs-container,.payroll-container,.roles-container,.hero-container,
  .hero-stats-container,.about-container,.faq-container,.compare-container,
  .pricing-container,.contact-container,.footer-container){
  max-width:1200px!important;
  padding-left:clamp(20px,5vw,56px)!important;
  padding-right:clamp(20px,5vw,56px)!important;
  margin-left:auto!important;margin-right:auto!important;
}
html body .hero-container{padding-top:84px!important;padding-bottom:56px!important;}
html body .section-header{max-width:none!important;}
html body .hero-subtitle,html body .section-subtitle{max-width:58ch!important;}

/* 4d. LANGUAGE SHOWCASE. The band was near-black with #94a3b8 labels at 11px —
   about 3.2:1, which is why the abbreviations could not be read. Lighter
   panel, brighter labels.                                                     */
html body .lang-showcase{
  background:var(--mn-800)!important;background-image:none!important;
  border:1px solid var(--mn-700)!important;border-radius:var(--mn-r-lg)!important;
  padding:32px!important;
}
html body .lang-showcase-glow{display:none!important;}
html body .lang-flag-item{
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:var(--mn-r)!important;padding:14px 18px!important;
}
html body .lang-flag-item:hover{
  background:rgba(169,163,255,.16)!important;border-color:var(--mn-acc-dk)!important;transform:none!important;
}
html body .lang-flag-item .native{color:#FFFFFF!important;font-size:13px!important;font-weight:600!important;}
html body .lang-flag-item .english{
  color:#B9C9DB!important;                 /* was #94a3b8 — now ~7:1 */
  font-size:11.5px!important;font-weight:500!important;letter-spacing:.02em!important;
}
html body .lang-showcase-header :is(h2,h3,.section-title){color:#FFFFFF!important;}
html body .lang-showcase-header p{color:#B9C9DB!important;}
html body .lang-disclaimer{
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;
}
html body .lang-disclaimer :is(p,span,small,i){color:#C5D5E6!important;}

/* 4e. LESS CLUTTER. Decorative badges and icon tiles lose their individual
   colours and share the one accent.                                          */
html body :is(.feature-icon,.why-icon,.hod-icon,.step-icon,.benefit-icon,
  .hr-docs-badge,.section-badge,.hero-badge,.badge-pill){
  background:var(--mn-acc-bg)!important;background-image:none!important;
  color:var(--mn-acc-h)!important;border:1px solid var(--mn-acc-ln)!important;
}
html body :is(.feature-card,.why-card,.pricing-card,.plan-card,.faq-item,.compare-card){
  background:var(--mn-surf)!important;background-image:none!important;
  border:1px solid var(--mn-line)!important;box-shadow:none!important;
}
html body .why-section :is(.why-card,.feature-card){
  background:rgba(255,255,255,.05)!important;border-color:var(--mn-700)!important;
}
html body .why-section :is(.why-card-title,h2,h3,p,li,span){color:#E8EEF6!important;}
html body .why-section .section-title{color:#FFFFFF;}

/* ===========================================================================
   5. SIGN-IN PAGE — fits one screen, no scrolling
   ===========================================================================
   The composition is compressed rather than cropped: the vertical rhythm tiers
   down as the viewport gets shorter, so a 720px-tall laptop gets the same
   content in less space instead of losing the bottom of the form.            */
@media (min-width:901px){
  html body.sky-auth,html body.sky-auth .shell{height:100vh!important;height:100svh!important;overflow:hidden!important;}
  html body.sky-auth .aside{padding:24px 40px 26px!important;overflow:hidden!important;}
  html body.sky-auth .panel{padding:24px 44px!important;overflow-y:auto!important;overscroll-behavior:contain;}
  html body.sky-auth .aside-brand{margin-bottom:18px!important;}
  html body.sky-auth .aside-rule{margin-bottom:20px!important;}
  html body.sky-auth .aside-body{gap:16px!important;}
  html body.sky-auth .aside-quote{margin-top:18px!important;}
}
/* laptop heights */
@media (min-width:901px) and (max-height:900px){
  html body.sky-auth .aside-rule{display:none!important;}
  html body.sky-auth .aside{padding:20px 36px 22px!important;}
  html body.sky-auth .panel{padding:20px 40px!important;}
  html body.sky-auth .aside-head{font-size:1.85rem!important;}
  html body.sky-auth .panel-title{font-size:22px!important;}
  html body.sky-auth .panel-lede{margin-bottom:16px!important;}
  html body.sky-auth .aside-tiles{gap:8px!important;}
  html body.sky-auth .aside-tile{padding:9px 11px!important;}
  html body.sky-auth .form-group{margin-bottom:11px!important;}
  html body.sky-auth .divider{margin:14px 0!important;}
  html body.sky-auth .access-card{padding:12px 13px!important;}
  html body.sky-auth .panel-foot{margin-top:16px!important;padding-top:12px!important;}
}
/* short laptops — drop the quote and the access blurb, keep every control */
@media (min-width:901px) and (max-height:760px){
  html body.sky-auth .aside-quote{display:none!important;}
  html body.sky-auth .aside-head{font-size:1.6rem!important;}
  html body.sky-auth .aside-lede{font-size:12.5px!important;}
  html body.sky-auth .aside-tile-n{margin-bottom:3px!important;}
  html body.sky-auth .access-card p{display:none!important;}
  html body.sky-auth .access-card{padding:11px 12px!important;}
  html body.sky-auth .step-indicator{margin-bottom:14px!important;}
  html body.sky-auth .panel-lede{font-size:12px!important;margin-bottom:13px!important;}
  html body.sky-auth .btn{padding:10px 16px!important;}
}
@media (min-width:901px) and (max-height:660px){
  html body.sky-auth .aside-tiles{display:none!important;}
  html body.sky-auth .panel-foot{font-size:10.5px!important;margin-top:12px!important;}
}

/* The sky-auth stand-down neutralises <label> so the "remember my email"
   checkbox reads as prose. Every OTHER label on those pages is still a caps
   micro-label — app/login.php marks its fields with bare <label>. */
html body.sky-auth label:not(.remember){
  display:block!important;text-transform:uppercase!important;
  font-size:10px!important;font-weight:600!important;letter-spacing:.12em!important;
  color:var(--mn-mut)!important;margin-bottom:6px!important;
}
html body.sky-auth label.remember{display:inline-flex!important;align-items:center!important;gap:7px!important;}

/* ############################################################################
   ██  v6 — EDITORIAL  (appended 2026-07-26)
   ############################################################################
   The reference is the HotelCompass composition, rendered in Stripe blue.

   What actually makes that page feel expensive is not colour, it is restraint:
     · a WARM off-white ground, not a cool clinical grey
     · near-black panels rather than mid navy, so the contrast is decisive
     · hairline rules doing the work that shadows usually do
     · small uppercase eyebrows with wide tracking above every title
     · one accent, used sparingly, never as a gradient
     · generous, consistent whitespace and a narrow measure

   Those six moves are applied here to the landing page and to the signed-in
   app so all three surfaces read as one product.

   NOTE ON TYPE: the reference sets its display line in a serif. Everything here
   stays IBM Plex Sans, per the earlier instruction that the UI read crisp and
   compact — elegance is carried by size, tracking and weight instead. If the
   serif is wanted, adding Playfair Display to the @import on line 1 and
   switching --mn-display below is the whole change.
   ############################################################################ */

:root{
  /* Warm ground — the single biggest contributor to the reference's feel. */
  --mn-page:#F7F7F4!important;
  --mn-surf:#FFFFFF!important;
  --mn-surf2:#FBFBF9!important;
  --mn-hover:#F1F1EC!important;
  --mn-line:#E5E3DE!important;        /* warm hairline, not blue-grey */
  --mn-line-soft:#EFEEE9!important;

  /* Decisive darks. Near-black, as in the reference. */
  --mn-950:#03101C!important;
  --mn-900:#061726!important;
  --mn-850:#071F35!important;
  --mn-800:#0B2A45!important;
  --mn-750:#0F3A5C!important;
  --mn-700:#16405F!important;
  --mn-600:#1F5480!important;

  --mn-ink:#0F1D2C!important;
  --mn-mut:#55636F!important;
  --mn-fnt:#8A929B!important;

  --mn-display:var(--mn-sans);
}
/* ---- Eyebrow: the reference's signature label ---------------------------- */
html body :is(.eyebrow,.overline,.section-eyebrow,.hero-eyebrow,.panel-eyebrow,
  .aside-tip-dept,.stat-label,.form-label,.nav-title,.card-eyebrow){
  font-size:10px!important;font-weight:600!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  line-height:1.6!important;
}

/* ---- Display headings: large, light-ish, tightly tracked ----------------- */
html body :is(.hero-title,.section-title,.welcome-title,.aside-head,.panel-title){
  font-family:var(--mn-display)!important;
  font-weight:600!important;letter-spacing:-.032em!important;line-height:1.08!important;
}
html body .hero-title{font-size:clamp(2rem,4.4vw,3.4rem)!important;}
html body .section-title{font-size:clamp(1.5rem,2.8vw,2.35rem)!important;}
html body :is(.hero-subtitle,.section-subtitle){
  font-size:15px!important;line-height:1.65!important;color:var(--mn-mut)!important;
  max-width:56ch!important;font-weight:400!important;
}

/* ---- Hairlines instead of shadows, everywhere ---------------------------- */
html body :is(.card,.stat-card,.panel,.widget,.feature-card,.pricing-card,
  .plan-card,.why-card,.faq-item,.compare-card,.help-card,.content-card,.tile){
  background:var(--mn-surf)!important;background-image:none!important;
  border:1px solid var(--mn-line)!important;border-radius:8px!important;
  box-shadow:none!important;
}
html body :is(.card,.stat-card,.panel):hover{border-color:#D6D3CC!important;}

/* the one place depth is allowed: things that genuinely float */
html body :is(.modal,.modal-content,.dropdown-menu,.nav-dropdown-menu,.sky-lang-dropdown){
  box-shadow:0 18px 48px -12px rgba(6,23,38,.28)!important;
  border:1px solid var(--mn-line)!important;
}

/* ---- Landing page: editorial rhythm -------------------------------------- */
html body :is(.global-section,.hr-docs-section,.payroll-section,.roles-section,
  .paperless-section,.hod-showcase,.support-section,.faq-section,.compare-section,
  .features,.contact-section,.about-section,.pricing,.hod-progress-section){
  padding-top:88px!important;padding-bottom:88px!important;
  border-top:1px solid var(--mn-line)!important;
}
html body .section-header,html body :is(.hr-docs-header,.lang-showcase-header){
  margin-bottom:44px!important;
}
/* the short rule under a centred heading — one hairline, one colour */
html body .section-title::after{
  width:28px!important;height:1px!important;margin-top:18px!important;
  background:var(--mn-acc)!important;
}
/* v8 makes the hero light; the v6 dark-hero rule that lived here is retired
   so no later edit can resurrect it by deleting v8. */
html body .nav{background-color:var(--mn-950)!important;}
html body .nav.scrolled{background-color:rgba(3,16,28,.97)!important;}
html body :is(.footer,.site-footer){
  background-color:var(--mn-950)!important;border-top:1px solid rgba(255,255,255,.08)!important;
}
html body .why-section{background:var(--mn-950)!important;}
html body .lang-showcase{
  background:var(--mn-900)!important;border:1px solid rgba(255,255,255,.1)!important;
}

/* numbered tiles — the reference's 01/02/03/04 device, reusable */
html body :is(.feature-card,.why-card,.help-card){padding:22px!important;}
html body :is(.feature-icon,.why-icon,.help-icon,.hod-icon,.step-icon,.benefit-icon){
  background:transparent!important;border:1px solid var(--mn-line)!important;
  color:var(--mn-acc)!important;border-radius:6px!important;box-shadow:none!important;
}

/* ---- Signed-in app: the page header becomes editorial, not a banner ------
   A solid navy block at the top of every screen is heavy and, as we found,
   fragile. An eyebrow, a large dark title and a hairline read as considered
   and cannot go invisible.                                                   */
html body .section-header{
  background:transparent!important;background-image:none!important;
  border:none!important;border-bottom:1px solid var(--mn-line)!important;
  border-radius:0!important;padding:4px 0 18px!important;margin-bottom:22px!important;
  align-items:flex-end!important;
}
html body .section-header :is(h1,h2,h3,.section-title,.page-title){
  color:var(--mn-ink)!important;
  font-size:clamp(1.15rem,2vw,1.55rem)!important;font-weight:600!important;
  letter-spacing:-.03em!important;line-height:1.15!important;
}
html body .section-header :is(p,.section-subtitle){
  color:var(--mn-mut)!important;font-size:12.5px!important;margin-top:5px!important;
}
html body .section-header .badge,html body .section-header [class*="badge"]{
  background:var(--mn-acc-bg)!important;color:var(--mn-acc-h)!important;
  border:1px solid var(--mn-acc-ln)!important;
}
html body .sidebar,html body .app-sidebar,html body .admin-sidebar{
  background:var(--mn-950)!important;border-right:1px solid rgba(255,255,255,.08)!important;
}
html body .header:not(.section-header){
  background:var(--mn-950)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
}
html body .content{background:var(--mn-page)!important;}

/* ===========================================================================
   POS SIGN-IN — a composition, not a sketch
   ===========================================================================
   The previous pass made the overlay light and the card white with a hairline
   and no shadow. On a light ground that reads as unfinished — there was nothing
   holding the composition together. It now has a near-black ground, a card with
   real elevation, a defined header band, and a numpad with weight.            */
html body .pos-login-overlay{
  background:var(--mn-950)!important;background-image:none!important;
  padding:24px!important;
}
html body .pos-login-box{
  background:var(--mn-surf)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:10px!important;
  box-shadow:0 32px 80px -20px rgba(0,0,0,.7)!important;
  padding:0!important;max-width:392px!important;overflow:hidden!important;
  text-align:left!important;
}
/* header band inside the card */
html body .pos-login-logo{
  display:block!important;margin:0!important;padding:22px 26px 0!important;
  font-size:26px!important;color:var(--mn-acc)!important;text-align:left!important;
}
html body .pos-login-title{
  padding:12px 26px 0!important;margin:0!important;text-align:left!important;
  font-size:21px!important;font-weight:600!important;letter-spacing:-.03em!important;
  color:var(--mn-ink)!important;
}
html body .pos-login-subtitle{
  padding:7px 26px 22px!important;margin:0!important;text-align:left!important;
  font-size:12.5px!important;line-height:1.55!important;color:var(--mn-mut)!important;
  border-bottom:1px solid var(--mn-line)!important;
}
html body .pos-login-box > :is(select,.pos-login-outlet){margin:18px 26px 0!important;width:calc(100% - 52px)!important;}
html body .pos-login-outlet select,html body .pos-login-box select{
  background:var(--mn-surf2)!important;color:var(--mn-ink)!important;
  border:1px solid var(--mn-line)!important;border-radius:7px!important;
  padding:11px 12px!important;font-size:13.5px!important;
}
html body .pos-pin-display{
  margin:18px 26px!important;padding:16px!important;min-height:58px!important;
  background:var(--mn-950)!important;border:none!important;border-radius:8px!important;
  color:#fff!important;letter-spacing:14px!important;
}
html body .pos-pin-dot{
  background:var(--mn-acc-dk)!important;width:12px!important;height:12px!important;
}
html body .pos-numpad-grid{
  margin:0 26px 22px!important;gap:9px!important;
}
html body .pos-numpad-key{
  background:var(--mn-surf)!important;background-image:none!important;
  border:1px solid var(--mn-line)!important;border-radius:8px!important;
  color:var(--mn-ink)!important;
  font-family:var(--mn-sans)!important;font-size:20px!important;font-weight:500!important;
  padding:16px 10px!important;font-variant-numeric:tabular-nums!important;
  box-shadow:none!important;
}
html body .pos-numpad-key:hover{
  background:var(--mn-acc-bg)!important;border-color:var(--mn-acc)!important;
  color:var(--mn-acc-h)!important;
}
html body .pos-numpad-key:active{background:var(--mn-acc)!important;color:#fff!important;}
html body :is(.pos-numpad-key.accent,.pos-numpad-key.enter,.pos-numpad-key[class*="enter"]){
  background:var(--mn-acc)!important;border-color:var(--mn-acc)!important;color:#fff!important;
  font-weight:600!important;
}
html body :is(.pos-numpad-key.accent,.pos-numpad-key.enter):hover{
  background:var(--mn-acc-h)!important;border-color:var(--mn-acc-h)!important;color:#fff!important;
}
html body .pos-numpad-key.clear{
  background:var(--mn-surf)!important;border-color:#EBD4D4!important;color:var(--mn-no)!important;
}
html body .pos-numpad-key.clear:hover{background:var(--mn-no)!important;border-color:var(--mn-no)!important;color:#fff!important;}
html body .pos-login-box button:not(.pos-numpad-key){
  margin:0 26px 22px!important;width:calc(100% - 52px)!important;
  background:var(--mn-acc)!important;color:#fff!important;
  border:1px solid var(--mn-acc)!important;border-radius:7px!important;
  padding:12px 16px!important;font-size:13.5px!important;font-weight:600!important;
}

/* ===========================================================================
   POS TERMINAL — overhaul
   ===========================================================================
   Reworked as three bands: a category rail, a product grid, and an order
   column. The grid now carries real product cards — a tinted media tile, a
   two-line name that cannot collide, a price with tabular figures, and an
   add affordance that appears on hover. The order column is an editorial
   panel: eyebrow, check number, a clean line list, and a total that is the
   largest thing on the screen.                                              */

/* -- Shell ---------------------------------------------------------------- */
html body .pos-dark-container{
  background:var(--mn-page)!important;
  border:1px solid var(--mn-line)!important;border-radius:10px!important;
  grid-template-columns:1fr 388px!important;
  height:calc(100vh - 112px)!important;min-height:580px!important;
}
html body .pos-dark-menu{background:var(--mn-page)!important;}

/* -- Category rail: quiet pills, one active ------------------------------- */
html body .pos-dark-categories{
  background:var(--mn-surf)!important;border-bottom:1px solid var(--mn-line)!important;
  padding:10px 12px!important;gap:6px!important;
}
html body .pos-dark-category{
  flex-direction:row!important;align-items:center!important;gap:7px!important;
  background:transparent!important;border:1px solid var(--mn-line)!important;
  border-radius:20px!important;padding:7px 13px!important;min-width:0!important;
}
html body .pos-dark-category:hover{background:var(--mn-hover)!important;border-color:#D6D3CC!important;}
html body .pos-dark-category.active{
  background:var(--mn-ink)!important;border-color:var(--mn-ink)!important;
}
html body .pos-dark-category-icon{
  width:18px!important;height:18px!important;font-size:13px!important;
  background:transparent!important;border-radius:0!important;
}
html body .pos-dark-category-name{
  font-size:11.5px!important;font-weight:500!important;color:var(--mn-ink)!important;
}
html body .pos-dark-category.active :is(.pos-dark-category-name,.pos-dark-category-icon,.pos-dark-category-count){
  color:#fff!important;
}
html body .pos-dark-category-count{
  font-size:10px!important;color:var(--mn-fnt)!important;
  font-variant-numeric:tabular-nums!important;
}

/* -- Search --------------------------------------------------------------- */
html body .pos-dark-search{
  background:var(--mn-surf)!important;border-bottom:1px solid var(--mn-line)!important;
  padding:10px 12px!important;
}
html body .pos-dark-search input{
  background:var(--mn-page)!important;border:1px solid var(--mn-line)!important;
  border-radius:7px!important;color:var(--mn-ink)!important;
  padding:10px 14px 10px 38px!important;font-size:13px!important;
}

/* -- Product grid --------------------------------------------------------- */
html body .pos-dark-items{
  background:var(--mn-page)!important;
  grid-template-columns:repeat(auto-fill,minmax(146px,1fr))!important;
  gap:10px!important;padding:12px!important;
}
html body .pos-dark-item{
  position:relative!important;
  background:var(--mn-surf)!important;
  border:1px solid var(--mn-line)!important;border-radius:8px!important;
  padding:0!important;overflow:hidden!important;text-align:left!important;
  box-shadow:none!important;
  transition:border-color .14s,background .14s!important;
}
html body .pos-dark-item:hover{
  border-color:var(--mn-acc)!important;background:var(--mn-surf)!important;
  transform:none!important;box-shadow:none!important;
}
/* media tile — a calm tinted field, and the emoji/icon sits large in it */
html body .pos-dark-item-image{
  width:100%!important;height:78px!important;margin:0!important;
  background:linear-gradient(160deg,#EFEFEA,#F7F7F4)!important;
  border-bottom:1px solid var(--mn-line)!important;border-radius:0!important;
  font-size:30px!important;
}
html body .pos-dark-item:hover .pos-dark-item-image{
  background:linear-gradient(160deg,var(--mn-acc-bg),#F7F7F4)!important;
}
html body .pos-dark-item-name{
  display:-webkit-box!important;-webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;overflow:hidden!important;
  white-space:normal!important;
  margin:9px 11px 3px!important;min-height:2.7em!important;
  font-size:12px!important;font-weight:500!important;line-height:1.35!important;
  color:var(--mn-ink)!important;
}
html body .pos-dark-item-price{
  display:block!important;margin:0 11px 10px!important;
  font-size:13.5px!important;font-weight:600!important;color:var(--mn-ink)!important;
  font-variant-numeric:tabular-nums!important;letter-spacing:-.02em!important;
}
/* add affordance */
html body .pos-dark-item::after{
  content:'+';position:absolute;right:8px;top:8px;
  width:22px;height:22px;border-radius:50%;
  background:var(--mn-acc);color:#fff;
  font-size:14px;font-weight:600;line-height:22px;text-align:center;
  opacity:0;transition:opacity .14s;pointer-events:none;
}
html body .pos-dark-item:hover::after{opacity:1;}
html body .pos-dark-item-badge{
  top:auto!important;bottom:84px!important;left:8px!important;right:auto!important;
  padding:2px 7px!important;border-radius:3px!important;font-size:8.5px!important;
  letter-spacing:.08em!important;
}

/* -- Order column --------------------------------------------------------- */
html body .pos-dark-order{
  background:var(--mn-surf)!important;
  border-left:1px solid var(--mn-line)!important;
  grid-template-rows:auto 1fr auto auto auto!important;
}
html body .pos-dark-order-header{
  background:var(--mn-surf)!important;background-image:none!important;
  color:var(--mn-ink)!important;
  border-bottom:1px solid var(--mn-line)!important;
  padding:16px 16px 13px!important;
}
html body .pos-dark-check-number{
  font-size:19px!important;font-weight:600!important;letter-spacing:-.03em!important;
  color:var(--mn-ink)!important;
}
html body .pos-dark-check-type{
  background:transparent!important;border:1px solid var(--mn-line)!important;
  color:var(--mn-mut)!important;
  font-size:9.5px!important;font-weight:600!important;letter-spacing:.14em!important;
  text-transform:uppercase!important;padding:3px 9px!important;border-radius:20px!important;
}
html body .pos-dark-table-field{
  background:transparent!important;border:none!important;
  border-right:1px solid var(--mn-line)!important;
  border-radius:0!important;padding:2px 0 2px 0!important;text-align:left!important;
}
html body .pos-dark-table-info > .pos-dark-table-field:last-child{border-right:none!important;}
html body .pos-dark-table-field-label{
  font-size:9px!important;font-weight:600!important;letter-spacing:.16em!important;
  text-transform:uppercase!important;color:var(--mn-fnt)!important;opacity:1!important;
}
html body .pos-dark-table-field-value{
  font-size:14px!important;font-weight:600!important;color:var(--mn-ink)!important;
  font-variant-numeric:tabular-nums!important;
}

/* line items */
html body .pos-dark-order-items{
  background:var(--mn-surf)!important;padding:6px 10px!important;
}
html body .pos-dark-order-item{
  background:transparent!important;
  border:none!important;border-bottom:1px solid var(--mn-line-soft)!important;
  border-radius:0!important;padding:9px 2px!important;margin:0!important;
  column-gap:10px!important;
}
html body .pos-dark-order-item:nth-child(odd){background:transparent!important;}
html body .pos-dark-order-item:hover{background:var(--mn-surf2)!important;}
html body .pos-dark-order-item.sent{
  background:transparent!important;border-bottom-color:var(--mn-line-soft)!important;
  box-shadow:inset 2px 0 0 var(--mn-ok)!important;padding-left:8px!important;
}
html body .pos-dark-order-item-name{
  font-size:12.5px!important;font-weight:500!important;color:var(--mn-ink)!important;
}
html body .pos-dark-order-item-price{
  font-size:12.5px!important;font-weight:600!important;color:var(--mn-ink)!important;
}
html body .pos-dark-qty-btn{
  width:19px!important;height:19px!important;border-radius:4px!important;
  background:transparent!important;border:1px solid var(--mn-line)!important;
  color:var(--mn-mut)!important;font-size:10px!important;
}
html body .pos-dark-qty-btn:hover{background:var(--mn-ink)!important;border-color:var(--mn-ink)!important;color:#fff!important;}
html body .pos-dark-order-empty{padding:56px 20px!important;}
html body .pos-dark-order-empty i{font-size:26px!important;color:var(--mn-line)!important;}
html body .pos-dark-order-empty p{font-size:12.5px!important;color:var(--mn-mut)!important;}
html body .pos-dark-order-empty small{color:var(--mn-fnt)!important;}

/* summary — the total is the loudest thing in the column */
html body .pos-dark-order-summary{
  background:var(--mn-surf)!important;border-top:1px solid var(--mn-line)!important;
  padding:13px 16px!important;
}
html body .pos-dark-summary-row{font-size:12px!important;color:var(--mn-mut)!important;}
html body .pos-dark-summary-row.total{
  font-size:24px!important;font-weight:600!important;letter-spacing:-.035em!important;
  color:var(--mn-ink)!important;border-top:1px solid var(--mn-line)!important;
  padding-top:11px!important;margin-top:9px!important;align-items:baseline!important;
}
html body .pos-dark-summary-row.total .value{color:var(--mn-ink)!important;}

/* actions — one primary, the rest quiet */
html body .pos-dark-actions{
  background:var(--mn-surf)!important;border-top:1px solid var(--mn-line)!important;
  padding:10px 12px!important;gap:7px!important;
}
html body .pos-dark-action-btn{
  background:var(--mn-surf)!important;color:var(--mn-mut)!important;
  border:1px solid var(--mn-line)!important;border-radius:7px!important;
  font-size:10px!important;font-weight:600!important;letter-spacing:.04em!important;
  text-transform:uppercase!important;padding:9px 5px!important;
}
html body .pos-dark-action-btn i{font-size:14px!important;color:var(--mn-mut)!important;}
html body .pos-dark-action-btn:hover{
  background:var(--mn-hover)!important;border-color:#D6D3CC!important;color:var(--mn-ink)!important;
}
html body .pos-dark-action-btn.kot{background:var(--mn-ink)!important;border-color:var(--mn-ink)!important;color:#fff!important;}
html body .pos-dark-action-btn.kot i{color:#fff!important;}
html body .pos-dark-action-btn.kot:hover{background:#000!important;border-color:#000!important;}
html body .pos-dark-action-btn.bill{background:var(--mn-surf)!important;color:var(--mn-wr)!important;border-color:#E4D6B4!important;}
html body .pos-dark-action-btn.bill i{color:var(--mn-wr)!important;}
html body .pos-payment-action{background:var(--mn-surf)!important;padding:0 12px 12px!important;}
html body :is(.pos-dark-action-btn.pay,.pos-dark-action-btn.success){
  background:var(--mn-acc)!important;border-color:var(--mn-acc)!important;color:#fff!important;
  font-size:12.5px!important;padding:13px 10px!important;flex-direction:row!important;gap:8px!important;
}
html body :is(.pos-dark-action-btn.pay,.pos-dark-action-btn.success) i{color:#fff!important;}
html body :is(.pos-dark-action-btn.pay,.pos-dark-action-btn.success):hover{
  background:var(--mn-acc-h)!important;border-color:var(--mn-acc-h)!important;
}

@media (max-width:900px){
  html body .pos-dark-container{grid-template-columns:1fr!important;height:calc(100vh - 92px)!important;}
  html body .pos-dark-items{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important;}
  html body .pos-dark-item-image{height:64px!important;font-size:26px!important;}
  html body .pos-mobile-cart-summary{background:var(--mn-ink)!important;color:#fff!important;}
  html body .pos-dark-order.expanded{background:var(--mn-surf)!important;}
}

/* ############################################################################
   ██  v7 — DECLUTTER  (appended 2026-07-26, alongside the main.html rework)
   ############################################################################
   The heavy lifting this round happened inside main.html itself: the POS was
   inline-styled with no classes, so no stylesheet could ever reach it. Its
   palette is now normalised at the source. What remains here is small.       */

/* Landing hero: the three animated floating cards are the clutter. The static
   dashboard preview stays; the things bobbing over it go. */
html body :is(.hero-float-card,.hero-float-icon){display:none!important;}
html body .hero-dashboard{
  border:1px solid rgba(255,255,255,.14)!important;border-radius:10px!important;
  box-shadow:0 32px 80px -24px rgba(0,0,0,.55)!important;
}
html body .hero-eyebrow{
  color:var(--mn-acc-dk)!important;
  font-size:10px!important;font-weight:600!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
}
html body .hero-cta{gap:10px!important;}
html body .hero .btn-ghost{
  background:transparent!important;color:#E8EEF6!important;
  border:1px solid rgba(255,255,255,.22)!important;
}
html body .hero .btn-ghost:hover{border-color:#fff!important;background:rgba(255,255,255,.06)!important;}

/* POS: the terminal markup is inline-styled, so these are the only class hooks
   it exposes. Keep them consistent with the normalised palette. */
html body .pos-login-overlay{background:#03101C!important;}
html body #posSearchInput:focus{
  outline:none!important;border-color:var(--mn-acc)!important;
  box-shadow:0 0 0 3px var(--mn-acc-bg)!important;
}

/* ############################################################################
   ██  v8 — LIGHT HERO + MODAL FIT  (appended 2026-07-26)
   ############################################################################ */

/* ===========================================================================
   1. LANDING HERO — light
   ===========================================================================
   The v6 near-black hero is retired. The page now opens on the same warm
   ground as everything below it, with ink type and the one accent; the only
   dark object is the dashboard preview, which becomes the focal point. The
   navigation bar stays near-black above it — a deliberate dark band, not a
   leak. */
html body .hero{
  background:var(--mn-page)!important;background-image:none!important;
  border-bottom:1px solid var(--mn-line)!important;
  padding:110px 0 72px!important;min-height:auto!important;
}
html body .hero-title{color:var(--mn-ink)!important;}
html body .hero-title span{
  color:var(--mn-acc)!important;
  -webkit-text-fill-color:var(--mn-acc)!important;background:none!important;
}
html body .hero-subtitle,html body .hero p{color:var(--mn-mut)!important;}
html body .hero-eyebrow{color:var(--mn-acc-h)!important;}
html body .hero-badge{
  background:var(--mn-surf)!important;border:1px solid var(--mn-line)!important;
  color:var(--mn-mut)!important;
}
html body .hero .btn-ghost{
  background:transparent!important;color:var(--mn-ink)!important;
  border:1px solid #CFCBC2!important;
}
html body .hero .btn-ghost:hover{border-color:var(--mn-ink)!important;background:var(--mn-surf)!important;}
html body .hero-dashboard{
  border:1px solid var(--mn-line)!important;
  box-shadow:0 28px 70px -28px rgba(15,29,44,.35)!important;
}
/* anything inside the hero that was styled for a dark ground */
html body .hero :is(.hero-stat,.hero-stats) :is(b,strong,.value){color:var(--mn-ink)!important;}
html body .hero :is(.hero-stat,.hero-stats) :is(span,small,.label){color:var(--mn-mut)!important;}
html body .hero a:not(.btn){color:var(--mn-acc)!important;}

/* ===========================================================================
   2. MODAL FIT — nothing cut off, ever
   ===========================================================================
   Belt-and-braces on top of the v4 rules: media scales, single-line titles
   truncate instead of pushing the close button out, wide tables scroll inside
   the modal rather than beyond it, and footers wrap their buttons. */
html body .modal :is(img,svg,canvas,video,iframe){
  max-width:100%!important;height:auto!important;
}
html body .modal-header{gap:10px!important;}
html body .modal-header .modal-title{
  flex:1 1 auto!important;min-width:0!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
html body .modal-header :is(button,.close,.modal-close){flex:0 0 auto!important;}
html body .modal-body :is(.table-container,.table-wrap){
  max-width:100%!important;overflow-x:auto!important;
}
html body .modal-body table{width:100%!important;}
html body .modal-body :is(pre,code){
  white-space:pre-wrap!important;overflow-wrap:anywhere!important;max-width:100%!important;
}
html body .modal-body :is(.row,.grid,[class*="-grid"],[class*="-row"]){
  max-width:100%!important;
}
html body .modal-footer .btn{max-width:100%!important;white-space:normal!important;}
html body .modal :is(h1,h2,h3,h4,p,label,td,th,li,dd,dt){overflow-wrap:anywhere;}

/* ===========================================================================
   3. TYPE PIN — one family on every surface
   =========================================================================== */
html body,html body :is(input,button,select,textarea,h1,h2,h3,h4,h5,h6){
  font-family:var(--mn-sans)!important;
}

/* ############################################################################
   ██  v9 — LEGIBILITY GUARANTEE  (appended 2026-07-26)
   ############################################################################
   The v4 on-dark list above no longer includes .hero (the hero is light).
   The specific elements reported illegible are pinned here with !important so
   neither stylesheet order, caching, nor a future layer can lose them. Dark
   sections that legitimately carry white titles are re-asserted after. */
html body .hero-trust-badge{color:var(--mn-ink)!important;}
html body .hero-trust-badge i{color:var(--mn-acc)!important;}
html body .hero-modules span{color:var(--mn-mut)!important;background:var(--mn-surf)!important;border:1px solid var(--mn-line)!important;}
html body .section-title{color:var(--mn-ink)!important;}
html body .section-title span{color:var(--mn-acc-h)!important;}
html body .section-subtitle{color:var(--mn-mut)!important;}
html body .section-eyebrow{
  background:var(--mn-surf)!important;color:var(--mn-acc-h)!important;
  border:1px solid var(--mn-line)!important;
}
/* the two dark bands keep white titles */
html body .why-section .section-title,
html body .lang-showcase .section-title,
html body .lang-showcase-header .section-title{color:#FFFFFF!important;}
html body .why-section .section-title span,
html body .lang-showcase .section-title span{color:var(--mn-acc-dk)!important;}
html body :is(.why-section,.lang-showcase) .section-subtitle{color:#B9C9DB!important;}