/* Matilda Apartment — shared device & browser compatibility layer
   Loaded after each page stylesheet so it can normalize behavior without redesigning the UI. */
:root{
  --matilda-app-height:100vh;
  --matilda-safe-top:env(safe-area-inset-top,0px);
  --matilda-safe-right:env(safe-area-inset-right,0px);
  --matilda-safe-bottom:env(safe-area-inset-bottom,0px);
  --matilda-safe-left:env(safe-area-inset-left,0px);
}
@supports (height:100dvh){:root{--matilda-app-height:100dvh}}
html{
  width:100%;
  min-width:0;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
body{
  width:100%;
  min-width:0;
  min-height:100vh;
  min-height:var(--matilda-app-height);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:anywhere;
}
*,*::before,*::after{min-width:0}
img,svg,canvas,video{max-width:100%;height:auto}
button,input,select,textarea{font-family:inherit;max-width:100%}
button,[role="button"],a{touch-action:manipulation}
button:disabled{cursor:not-allowed}
[hidden]{display:none!important}
.table-wrap,.category-tabs,.board,.cart-lines{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.table-wrap{max-width:100%;overflow-x:auto;overflow-y:hidden}
.modal-card,.guest-confirm-sheet{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.app-shell{min-height:100vh;min-height:var(--matilda-app-height)}
.sidebar{height:100vh;height:var(--matilda-app-height);overflow-y:auto;-webkit-overflow-scrolling:touch}
.toast,.guest-toast{max-width:calc(100vw - 28px);bottom:max(18px,calc(12px + var(--matilda-safe-bottom)))}

/* Stop touch devices from getting a stuck desktop hover state. */
@media (hover:none),(pointer:coarse){
  button:hover{transform:none!important}
}

/* Tablet and smaller */
@media (max-width:950px){
  .pos-layout,.bar-layout{width:100%;max-width:100%}
  .cart{max-width:100%}
  .products{min-width:0}
}

/* Phones / compact tablets */
@media (max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{padding-left:var(--matilda-safe-left);padding-right:var(--matilda-safe-right)}
  input,select,textarea{font-size:16px} /* prevents Safari auto-zoom on form focus */
  .app-shell,.main,.view,.panel,.stat-card,.module-stat,.inventory-card,.folio-card,.qr-card,
  .journey-step,.room-manager,.modal-card{width:100%;max-width:100%}
  .sidebar{
    height:var(--matilda-app-height);
    max-height:var(--matilda-app-height);
    padding-top:max(18px,calc(12px + var(--matilda-safe-top)));
    padding-bottom:max(18px,calc(12px + var(--matilda-safe-bottom)));
  }
  .topbar{
    padding-top:max(16px,calc(10px + var(--matilda-safe-top)));
    padding-left:max(14px,calc(10px + var(--matilda-safe-left)));
    padding-right:max(14px,calc(10px + var(--matilda-safe-right)));
  }
  .view{
    padding-left:max(14px,calc(10px + var(--matilda-safe-left)));
    padding-right:max(14px,calc(10px + var(--matilda-safe-right)));
    padding-bottom:max(22px,calc(14px + var(--matilda-safe-bottom)));
  }
  .top-actions,.section-toolbar,.section-toolbar>div,.panel-head,.folio-top{max-width:100%}
  .table-wrap{margin-left:0;margin-right:0;border-radius:12px}
  table{max-width:none}
  .modal{padding:max(12px,var(--matilda-safe-top)) max(12px,var(--matilda-safe-right)) max(12px,var(--matilda-safe-bottom)) max(12px,var(--matilda-safe-left))}
  .modal-card{max-height:calc(var(--matilda-app-height) - 24px)}
  .invoice{max-width:100%;overflow-x:auto}
  .qr-box{max-width:70vw;max-height:70vw}
}

/* POS, kitchen and laundry phone layouts */
@media (max-width:620px){
  .pos-head,.bar-head,.kitchen-topbar,.staff-topbar{
    padding-top:max(15px,calc(10px + var(--matilda-safe-top)))!important;
    padding-left:max(14px,calc(10px + var(--matilda-safe-left)))!important;
    padding-right:max(14px,calc(10px + var(--matilda-safe-right)))!important;
    flex-wrap:wrap;
  }
  main{max-width:100%}
  .head-actions{flex-wrap:wrap;max-width:100%}
  .category-tabs{display:flex;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-bottom:3px}
  .category-tabs::-webkit-scrollbar{display:none}
  .category-tabs .cat{flex:0 0 auto}
  .products,.product,.cart,.recent,.pos-layout>section{max-width:100%}
  .room-picker select,.payment,.pay-grid{width:100%}
  .pay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pay-grid button{white-space:normal;min-height:42px}
  .checkout{min-height:46px}
  .line,.sale-row{max-width:100%}
  .incoming-alert{left:0;right:0}
  .kitchen-hero,.staff-hero{max-width:100%}
  .modal-card{border-radius:20px}
}

/* Very narrow phones */
@media (max-width:390px){
  .bar-stats,.pos-stats,.stats{gap:8px}
  .stat,.stat-card{padding:12px}
  .sale-mode{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
  .section-head h2,.cart h2{font-size:21px}
  .room-chip{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Guest portal safe-area handling on iPhone/iPad. */
.guest-app{min-height:100vh;min-height:var(--matilda-app-height)}
.guest-header{padding-top:max(16px,calc(10px + var(--matilda-safe-top)));-webkit-backdrop-filter:blur(18px)}
.guest-bottom-nav{padding-bottom:max(8px,calc(8px + var(--matilda-safe-bottom)));-webkit-backdrop-filter:blur(18px)}
@media(max-width:560px){.guest-header{padding-top:max(13px,calc(8px + var(--matilda-safe-top)))}}
.guest-confirm-overlay{min-height:100vh;min-height:var(--matilda-app-height)}

/* Landscape phones: keep key controls reachable rather than vertically clipping. */
@media (max-height:500px) and (orientation:landscape){
  .sidebar{overflow-y:auto}
  .modal-card,.guest-confirm-sheet{max-height:calc(var(--matilda-app-height) - 16px)}
  .kitchen-hero,.staff-hero{padding-top:14px!important;padding-bottom:14px!important}
}

/* Respect OS reduced-motion settings and improve older Safari/Firefox stability. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@supports not (height:100dvh){
  body,.app-shell,.guest-app,.guest-confirm-overlay{min-height:var(--matilda-js-height,100vh)}
  .sidebar{height:var(--matilda-js-height,100vh);max-height:var(--matilda-js-height,100vh)}
}
/* Safari/WebKit prefix and opaque fallback for frosted sticky headers. */
.kitchen-topbar,.staff-topbar{-webkit-backdrop-filter:blur(18px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .guest-header,.guest-bottom-nav,.kitchen-topbar,.staff-topbar{background:#faf8f3}
}

/* Desktop shell guard: the mobile drawer backdrop must never become a grid item. */
.sidebar-backdrop{display:none}
@media (min-width:761px){
  .main{grid-column:2;grid-row:1}
}

/* ===== V2.9 mobile-view refinement ===== */
@media (max-width:760px){
  /* Management shell */
  .app-shell{display:block!important}
  .main{width:100%;min-width:0}
  .topbar{
    min-height:68px;
    position:sticky;
    top:0;
    z-index:25;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:center!important;
    padding:max(10px,calc(8px + var(--matilda-safe-top))) 12px 10px!important;
    background:rgba(255,255,255,.96)!important;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    box-shadow:0 5px 18px rgba(16,36,62,.055);
  }
  .menu-btn{
    display:grid!important;
    place-items:center;
    width:44px;
    min-width:44px;
    height:44px;
    padding:0!important;
    border-radius:13px!important;
    font-size:11px;
    font-weight:800;
  }
  .topbar>div:not(.top-actions){overflow:hidden}
  .topbar h1{font-size:18px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  .topbar p{font-size:10.5px!important;line-height:1.25!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px!important}
  .top-actions{grid-column:auto!important;width:auto!important;margin:0!important;justify-content:flex-end!important}
  .date-pill{display:none!important}

  .view{padding:15px 12px max(24px,calc(18px + var(--matilda-safe-bottom)))!important}
  .panel,.stat-card,.folio-card,.qr-card,.module-stat,.inventory-card{box-shadow:0 6px 18px rgba(16,36,62,.055)!important}
  .panel{padding:16px!important}
  .panel-head{gap:9px!important;margin-bottom:13px!important}
  .panel h2,.section-toolbar h2{font-size:17px!important;line-height:1.25}
  .panel p,.section-toolbar p{font-size:11px!important;line-height:1.5!important}

  /* Useful dashboard information remains visible without a very long single column. */
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin-bottom:12px!important}
  .stat-card{padding:14px!important;border-radius:14px!important}
  .stat-card .label{font-size:10px!important;line-height:1.25}
  .stat-card .value{font-size:22px!important;margin-top:6px!important}
  .stat-card .hint{font-size:9px!important;line-height:1.35}
  .ops-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .ops-card{padding:13px!important}
  .ops-card strong{font-size:18px!important}
  .ops-card span{font-size:10px!important}
  .room-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .room-mini{padding:11px!important}
  .room-mini strong{font-size:12px}
  .room-mini .badge{font-size:9px;padding:4px 6px;margin-top:5px}

  /* Page headings + action buttons */
  .section-toolbar{gap:12px!important;margin-bottom:14px!important;align-items:stretch!important}
  .section-toolbar>div{width:100%}
  .section-toolbar>div:last-child:not(:first-child){display:flex!important;gap:8px!important;flex-wrap:wrap!important}
  .section-toolbar>button,.section-toolbar>div:last-child button{min-height:44px;flex:1 1 145px}
  .section-toolbar>.primary,.section-toolbar>.secondary{width:100%}
  .primary,.secondary,.danger{min-height:42px}

  /* Rooms keep the requested compact grid, but are easier to tap and read. */
  .rooms-grid{gap:8px!important}
  .room-tile{min-height:122px!important;padding:13px 9px!important;touch-action:manipulation}
  .room-tile>strong{font-size:22px!important}
  .room-tile>small{font-size:8.5px!important}
  .room-tile-label{font-size:7px!important}
  .room-tile>em{font-size:8.5px!important}

  /* Horizontal data should scroll inside its own container only. */
  .table-wrap{width:100%;max-width:100%;overflow-x:auto!important;border-radius:13px!important}
  .table-wrap table{min-width:680px}
  th,td{padding:12px 13px!important;font-size:11px!important;white-space:nowrap}

  /* Mobile modal = bottom sheet; controls remain reachable above browser chrome. */
  .modal{align-items:flex-end!important;padding:0!important}
  .modal-card{
    width:100%!important;
    max-width:100%!important;
    max-height:92vh!important;
    max-height:92dvh!important;
    border-radius:24px 24px 0 0!important;
    padding:20px 15px max(20px,calc(14px + var(--matilda-safe-bottom)))!important;
  }
  .modal-close{position:sticky!important;float:right;top:0;z-index:2}
  .form-grid{gap:11px!important}
  .field input,.field select,.field textarea{min-height:46px}
  .room-manager{padding:0!important}
  .room-manager-head{padding-right:38px}
  .room-manager-head h2{font-size:24px!important}
  .room-manager-grid{gap:8px!important}
  .room-manager-grid>div{padding:11px!important}

  /* Journey / arrivals */
  .journey-hero{padding:20px!important;border-radius:18px!important;gap:15px!important}
  .journey-hero h2{font-size:24px!important}
  .journey-hero p{font-size:11px!important;line-height:1.55!important}
  .journey-hero .primary{width:100%}
  .journey-step{padding:15px!important;border-radius:16px!important}
  .step-no{width:38px!important;height:38px!important;flex-basis:38px!important}

  /* Inventory / accounting / laundry */
  .module-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .module-stat{padding:14px!important}
  .module-stat strong{font-size:20px!important}
  .inventory-grid{grid-template-columns:1fr!important;gap:10px!important}
  .laundry-board,.accounting-grid{grid-template-columns:1fr!important}
  .laundry-col{min-height:0!important}

  /* Sidebar behaves like a mobile drawer. */
  .sidebar{
    width:min(86vw,310px)!important;
    left:-330px!important;
    z-index:80!important;
    transition:left .22s ease!important;
    box-shadow:20px 0 55px rgba(8,21,38,.28)!important;
  }
  .sidebar.open{left:0!important}
  .sidebar nav{padding-bottom:16px}
  .nav-item{min-height:44px;padding:11px 13px!important}
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:70;
    background:rgba(8,18,32,.45);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
  }
  .sidebar-backdrop.show{opacity:1;pointer-events:auto}
}

@media (max-width:430px){
  .topbar p{display:none!important}
  .topbar{min-height:62px}
  .stats-grid,.module-stats{gap:8px!important}
  .stat-card,.module-stat{padding:12px!important}
  .stat-card .value{font-size:20px!important}
  .panel{padding:14px!important}
  .view{padding-left:10px!important;padding-right:10px!important}
  .folio-summary{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .room-manager-grid{grid-template-columns:1fr 1fr!important}
}

@media (max-width:340px){
  .stats-grid,.module-stats,.ops-grid,.room-mini-grid{grid-template-columns:1fr!important}
  .rooms-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* POS pages: compact but still finger-friendly on phones. */
@media (max-width:620px){
  .pos-head,.bar-head{gap:10px!important;align-items:flex-start!important}
  .pos-head>div:first-child,.bar-head>div:first-child{min-width:0;flex:1}
  .pos-head h1,.bar-head h1{font-size:23px!important;white-space:normal}
  .head-actions{width:100%;justify-content:flex-start!important;gap:7px!important}
  .head-actions button{min-height:40px}
  main{padding:12px!important}
  .pos-stats,.bar-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:12px!important}
  .stat{padding:12px!important;border-radius:13px!important}
  .stat strong{font-size:18px!important}
  .pos-layout{gap:12px!important}
  .pos-layout>section,.cart,.recent{padding:14px!important;border-radius:17px!important}
  .section-head,.cart-head{margin-bottom:12px!important}
  .section-head h2,.cart h2{font-size:21px!important}
  .products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .product{min-height:136px!important;padding:12px!important;border-radius:15px!important}
  .product h3{font-size:12px!important}
  .product-bottom{align-items:flex-end!important;flex-direction:column!important;margin-top:12px!important}
  .product-bottom strong{align-self:flex-start}
  .product button{width:100%;min-height:38px}
  .cart-lines{min-height:90px!important}
  .checkout{min-height:48px!important}
}
@media (max-width:380px){
  .products{grid-template-columns:1fr!important}
  .product{min-height:0!important}
  .product-bottom{flex-direction:row!important;align-items:center!important}
  .product button{width:auto}
}

/* Kitchen/laundry staff boards become a natural vertical phone workflow. */
@media (max-width:620px){
  .kitchen-topbar,.staff-topbar{min-height:62px!important;gap:8px!important}
  .kitchen-hero,.staff-hero{padding:17px!important;border-radius:18px!important}
  .kitchen-hero h1,.staff-hero h1{font-size:27px!important}
  .stats{gap:8px!important}
  .stats .stat{padding:12px!important}
  .board{display:grid!important;grid-template-columns:1fr!important;min-width:0!important;width:100%!important;overflow:visible!important;gap:10px!important}
  .column,.laundry-column{min-height:0!important;border-radius:17px!important}
  .incoming-alert{position:sticky!important;top:62px!important}
}

/* Guest phone view: preserve the premium layout while maximizing usable width. */
@media (max-width:560px){
  .guest-app{width:100%;max-width:100%}
  .guest-main{width:100%;max-width:100%;padding-left:12px!important;padding-right:12px!important}
  .guest-header{padding-left:12px!important;padding-right:12px!important}
  .guest-bottom-nav{left:0!important;right:0!important;width:100%!important}
  .menu-card,.order-review,.verify-card,.farewell-card,.feedback-card{max-width:100%}
  .verify-card,.farewell-card,.feedback-card{padding:19px!important;border-radius:20px!important}
  .rating-picker{gap:5px!important}
  .rating-picker span{height:42px!important}
}