/* V18.2.5: readable hotel-operations shell. Visual only; never changes permissions. */
:root{
  --hy-canvas:#f4f6f9;
  --hy-surface:#fff;
  --hy-ink:#203047;
  --hy-secondary:#526780;
  --hy-border:#d9e2ed;
  --hy-sidebar:#16264b;
  --hy-sidebar-hover:#243967;
  --hy-sidebar-ink:#dbe5f7;
  --hy-sidebar-muted:#aabbd8;
  --hy-rail-width:70px;
  --hy-sidebar-width:230px;
  --mist-white:var(--hy-canvas);
  --mist-surface:var(--hy-surface);
  --mist-blue:#edf2f8;
  --mist-ice:#f7f9fc;
  --mist-control:#fff;
  --mist-ink:var(--hy-ink);
  --mist-muted:var(--hy-secondary);
  --mist-on-tint:var(--hy-secondary);
  --mist-line:var(--hy-border);
  --mist-shadow:0 1px 3px rgba(31,50,77,.06);
  --mist-shadow-hover:0 5px 18px rgba(31,50,77,.10);
}
html body{background:var(--hy-canvas);color:var(--hy-ink)}
body .app-shell{background:var(--hy-canvas)}
body .page :is(.panel,.supplier-workspace,.invoice-workspace,.delivery-workspace){background:var(--hy-surface);border-color:var(--hy-border);box-shadow:var(--mist-shadow)}
body :is(.page,.modal,.drawer,dialog) label{line-height:1.5}
body :is(.page,.modal,.drawer,dialog) :is(input,select,textarea){color:var(--hy-ink)}
body :is(.page,.modal,.drawer,dialog) :is(input,select,textarea)::placeholder{color:#687b91;opacity:1}

/* The brand remains Haiyue; reference navigation is a hierarchy and size cue. */
html body .app-shell .sidebar{
  width:var(--hy-sidebar-width);padding:0!important;
  background:var(--hy-sidebar);color:var(--hy-sidebar-ink);
  border-right:0;box-shadow:none;overflow:hidden;
}
body .sidebar .brand{
  position:relative;display:flex;align-items:center;flex:0 0 68px;
  height:68px;min-height:68px;gap:10px;margin:0!important;
  padding:9px 14px!important;background:#fff;border-bottom:1px solid var(--hy-border);
}
body .sidebar .sidebar-logo{width:50px;height:42px;flex:0 0 50px;object-fit:contain}
body .sidebar .brand strong{color:#1b3153;font-size:16px;line-height:1.25;white-space:nowrap}
body .sidebar .brand .web-version-link{color:#657891;font-size:12px}
body .sidebar .brand .brand-copy{position:relative;flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-bottom:7px}
body .sidebar .brand .brand-copy .web-version-link{align-self:flex-start}
html body .sidebar .brand .brand-copy .online-pill{position:absolute;display:inline-flex!important;align-items:center;right:0;bottom:4px;margin:0!important;padding:2px 5px;font-size:11px;line-height:1.25;border-radius:4px}
body .sidebar #nav{gap:2px;padding:9px 8px 12px!important;scrollbar-color:#53668f transparent}
body .sidebar #nav .nav-group-label{
  flex:0 0 auto;height:29px;margin:7px 0 0;padding:7px 11px 4px;
  color:var(--hy-sidebar-muted);font-size:12px;line-height:1.4;letter-spacing:0;border-color:#34456b;
}
body .sidebar #nav .nav-group-label:first-child{margin-top:0}
html body .sidebar #nav button{
  display:flex!important;align-items:center!important;gap:11px;
  min-height:42px;padding:8px 10px!important;border:0;border-radius:7px;
  background:transparent;color:var(--hy-sidebar-ink);font-size:15px;
  font-weight:500;line-height:1.35;text-align:left;box-shadow:none;
}
html body .sidebar #nav button:hover:not(.active){background:var(--hy-sidebar-hover);color:#fff}
html body .sidebar #nav button.active,
html body .sidebar #nav button[aria-current="page"]{
  background:var(--hy-selected-bg,#245d91)!important;color:#fff!important;
  font-weight:650;box-shadow:none!important;
}
html body .sidebar #nav button.active::before{content:none}
html body .sidebar #nav .nav-icon{display:grid!important;place-items:center;flex:0 0 22px;width:22px;height:22px;color:inherit}
html body .sidebar #nav .nav-icon svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.85}
body .sidebar #nav button:focus-visible{outline:2px solid #d7e8ff;outline-offset:-3px}
body .sidebar .sidebar-user.account-bar{
  margin-top:0;padding:7px 8px max(8px,env(safe-area-inset-bottom))!important;
  border-top:1px solid #35476d;background:var(--hy-sidebar);
}
body .sidebar .account-trigger{color:var(--hy-sidebar-ink);min-height:50px;padding:7px}
body .sidebar .account-trigger:hover,body .sidebar .account-trigger[aria-expanded="true"]{background:var(--hy-sidebar-hover);border-color:#4b6090}
body .sidebar .account-summary strong{color:#fff;font-size:14px}
body .sidebar .account-summary small{color:var(--hy-sidebar-muted);font-size:12px}
body .sidebar .account-avatar{background:#345d9b;color:#fff}
body .sidebar .account-chevron{stroke:var(--hy-sidebar-muted)}
body .sidebar .account-menu{background:#fff;color:var(--hy-ink);border:1px solid var(--hy-border)}
body .sidebar .account-menu-action{color:#25446e}
body .sidebar .account-logout{color:#a53742}
body .app-shell:not(.hy-sidebar-drawer) .sidebar-close{display:none!important}

/* Shared working canvas: a quiet white header and clear section rhythm. */
html body .app-shell .main{margin-left:var(--hy-sidebar-width);width:calc(100% - var(--hy-sidebar-width));padding:0 24px 32px}
html body .main>.topbar{
  display:flex!important;align-items:center!important;min-height:64px!important;height:auto!important;
  margin:0 -24px 16px;padding:10px 24px!important;gap:12px;
  background:#fff;border-bottom:1px solid var(--hy-border);
}
html body .main>.page{padding-top:0}
body .page :is(.panel-head,.mist-results-heading){margin-bottom:12px}
body .page :is(.panel,.supplier-workspace,.invoice-workspace,.delivery-workspace){border-radius:10px}
body :is(.page,.modal,.drawer,dialog) :is(.form-grid,.filter-grid,.two-col,.detail-grid){row-gap:14px}
@media (max-width:920px){body .ui-sort-button{min-height:44px}}
@media (max-width:599px),(pointer:coarse){
  body .ui-sort-button{min-height:48px}
  body #page-invoices .invoice-filters :is(input,select,summary,.btn){min-height:48px!important;height:48px!important}
  body .purchase-supplier-field .purchase-supplier-add{width:48px;height:48px;min-height:48px}
}

/* A narrow desktop window keeps a 70px icon rail. Hover/focus reveals a flyout,
   while the content width stays fixed, so the page does not jump sideways. */
@media (hover:hover) and (pointer:fine) and (min-width:600px){
  html body .app-shell.hy-sidebar-rail .main{
    margin-left:var(--hy-rail-width)!important;
    width:calc(100% - var(--hy-rail-width))!important;
    padding:0 18px 28px!important;
  }
  html body .app-shell.hy-sidebar-rail .sidebar{
    position:fixed!important;inset:0 auto 0 0!important;
    width:var(--hy-sidebar-width)!important;height:100dvh!important;
    transform:none!important;visibility:visible!important;
    clip-path:inset(0 calc(var(--hy-sidebar-width) - var(--hy-rail-width)) 0 0);
    z-index:300!important;transition:clip-path .16s ease,box-shadow .16s ease!important;
  }
  html body .app-shell.hy-sidebar-rail.hy-rail-open .sidebar,
  html body .app-shell.hy-sidebar-rail .sidebar:has(:focus-visible){
    clip-path:inset(0 0 0 0);box-shadow:12px 0 32px rgba(17,36,71,.18);
  }
  body .hy-sidebar-rail .sidebar .brand>img,
  body .hy-sidebar-rail .sidebar .brand>div{visibility:hidden}
  body .hy-sidebar-rail .sidebar .brand::before{
    content:"";position:absolute;left:17px;top:14px;display:grid;place-items:center;
    width:36px;height:36px;border-radius:9px;background:#203d89 url('/web/haiyue-icon-192.png') center/contain no-repeat;color:#fff;
    font-size:18px;font-weight:750;
  }
  body .hy-sidebar-rail.hy-rail-open .sidebar .brand>img,
  body .hy-sidebar-rail.hy-rail-open .sidebar .brand>div,
  body .hy-sidebar-rail .sidebar:has(:focus-visible) .brand>img,
  body .hy-sidebar-rail .sidebar:has(:focus-visible) .brand>div{visibility:visible}
  body .hy-sidebar-rail.hy-rail-open .sidebar .brand::before,
  body .hy-sidebar-rail .sidebar:has(:focus-visible) .brand::before{display:none}
  body .hy-sidebar-rail:not(.hy-rail-open) .sidebar:not(:has(:focus-visible)) #nav .nav-group-label{
    font-size:0;color:transparent;position:relative;
  }
  body .hy-sidebar-rail:not(.hy-rail-open) .sidebar:not(:has(:focus-visible)) #nav .nav-group-label::after{
    content:"";position:absolute;left:17px;top:14px;width:21px;height:1px;background:#60749b;
  }
  body .hy-sidebar-rail:not(.hy-rail-open) .sidebar:not(:has(:focus-visible)) #nav button{overflow:hidden}
  body .hy-sidebar-rail:not(.hy-rail-open) .sidebar:not(:has(:focus-visible)) #nav button>span:not(.nav-icon),
  body .hy-sidebar-rail:not(.hy-rail-open) .sidebar:not(:has(:focus-visible)) #nav button>.nav-count{opacity:0}
  body .hy-sidebar-rail:not(.hy-rail-open) .sidebar:not(:has(:focus-visible)) .account-summary,
  body .hy-sidebar-rail:not(.hy-rail-open) .sidebar:not(:has(:focus-visible)) .account-chevron{visibility:hidden}
  html body .app-shell.hy-sidebar-rail .mobile-nav{display:none!important}
  html body .app-shell.hy-sidebar-rail #menuBtn{display:none!important}
  html body:has(.app-shell.hy-sidebar-rail){padding-bottom:0!important}
  html body .app-shell.hy-sidebar-rail .main>.topbar{
    display:flex!important;position:sticky!important;top:0;z-index:150;
    grid-template-columns:none!important;margin:0 -18px 16px;padding:9px 18px!important;
    min-height:64px!important;backdrop-filter:none;
  }
  html body .app-shell.hy-sidebar-rail .main>.topbar>.topbar-heading{
    display:block!important;position:static!important;width:auto!important;height:auto!important;
    margin:0!important;overflow:visible!important;clip-path:none!important;white-space:normal!important;
    pointer-events:auto!important;min-width:0;
  }
  body .hy-sidebar-rail .topbar-heading #pageTitle{margin:0;font-size:20px;line-height:1.35;font-weight:700;color:var(--hy-ink)}
  body .hy-sidebar-rail .topbar-heading #pageSubtitle{display:none!important}
  html body .app-shell.hy-sidebar-rail .main>.topbar>.page-header-actions{grid-column:auto!important;grid-row:auto!important;width:auto;max-width:65%;margin-left:auto!important;overflow-x:auto}
  html body .app-shell.hy-sidebar-rail .main>.topbar>.online-pill{grid-column:auto!important;grid-row:auto!important;margin-left:0}
}

/* Full-screen/maximized desktop always shows the complete sidebar. */
@media (hover:hover) and (pointer:fine) and (min-width:600px){
  html body .app-shell.hy-sidebar-expanded .sidebar{clip-path:none;transform:none!important;visibility:visible!important}
  html body .app-shell.hy-sidebar-expanded .mobile-nav{display:none!important}
  html body .app-shell.hy-sidebar-expanded #menuBtn{display:none!important}
  html body:has(.app-shell.hy-sidebar-expanded){padding-bottom:0!important}
  html body .app-shell.hy-sidebar-expanded .main>.topbar>.page-header-actions{margin-left:auto!important}
  html body .app-shell.hy-sidebar-expanded .main>.topbar>.online-pill{margin-left:0}
}

/* Touch and very narrow viewports retain the established drawer and bottom nav. */
body #desktopSidebarToggle{display:none!important}
@media (max-width:920px), (max-width:1100px) and (pointer:coarse){
  html body .main>.topbar{
    display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;
    gap:6px!important;min-height:56px!important;
    margin:0 calc(-1 * var(--page-gutter,12px)) 12px;
    padding:calc(6px + env(safe-area-inset-top)) var(--page-gutter,12px) 6px!important;
  }
}
@media (pointer:coarse),(hover:none),(max-width:599px){
  body .app-shell.hy-sidebar-drawer .sidebar{background:var(--hy-sidebar)}
  body .app-shell.hy-sidebar-drawer .sidebar .brand{border-radius:8px}
  body .app-shell.hy-sidebar-drawer .main{margin-left:0!important;width:100%!important}
  body .app-shell.hy-sidebar-drawer .sidebar-close{color:#25446e;background:#e9f1fa}
}
@media (prefers-reduced-motion:reduce){
  html body .app-shell.hy-sidebar-rail .sidebar{transition:none!important}
}