/* VERVE POS WEB-P1A — UI FOUNDATION
   Scope: app shell, sidebar, header, themes, responsive behavior only. */
:root{
  --p1a-sidebar:248px;--p1a-sidebar-collapsed:78px;
  --p1a-bg:#f5f6f8;--p1a-surface:#ffffff;--p1a-surface-2:#f8f9fb;
  --p1a-text:#20242a;--p1a-muted:#717984;--p1a-border:#e3e7ec;
  --p1a-accent:#9c005b;--p1a-accent-soft:#f7e8f1;--p1a-green:#2f9e55;
  --p1a-shadow:0 6px 24px rgba(22,28,36,.07);
  --page:var(--p1a-bg);--surface:var(--p1a-surface);--surface-2:var(--p1a-surface-2);
  --text:var(--p1a-text);--muted:var(--p1a-muted);--border:var(--p1a-border);
}
html[data-theme="dark"]{
  --p1a-bg:#0d0f12;--p1a-surface:#15181d;--p1a-surface-2:#1b1f25;
  --p1a-text:#f3f4f6;--p1a-muted:#9ba3ad;--p1a-border:#2a3038;
  --p1a-accent-soft:#321422;
  --page:var(--p1a-bg);--surface:var(--p1a-surface);--surface-2:var(--p1a-surface-2);
  --text:var(--p1a-text);--muted:var(--p1a-muted);--border:var(--p1a-border);
}
html,body{background:var(--p1a-bg)!important;color:var(--p1a-text)!important}
body{display:block!important;min-height:100vh}
body.p1aReady aside{
  width:var(--p1a-sidebar)!important;height:100vh!important;position:fixed!important;inset:0 auto 0 0!important;
  background:var(--p1a-surface)!important;color:var(--p1a-text)!important;border-right:1px solid var(--p1a-border)!important;
  border-radius:0!important;box-shadow:none!important;padding:12px 10px!important;z-index:90;overflow-x:hidden;overflow-y:auto;
  transition:width .18s ease,transform .18s ease;
}
body.p1aReady main{
  margin-left:var(--p1a-sidebar)!important;width:calc(100% - var(--p1a-sidebar))!important;max-width:none!important;
  padding:0 28px 40px!important;transition:margin-left .18s ease,width .18s ease;
}
body.p1aSidebarCollapsed aside{width:var(--p1a-sidebar-collapsed)!important}
body.p1aSidebarCollapsed main{margin-left:var(--p1a-sidebar-collapsed)!important;width:calc(100% - var(--p1a-sidebar-collapsed))!important}

.p1aSidebarToggle,.p1aHeaderMenu{
  width:42px;height:42px;min-height:42px;border:1px solid var(--p1a-border)!important;background:var(--p1a-surface)!important;
  border-radius:10px!important;padding:10px!important;display:grid;align-content:center;gap:4px;box-shadow:none!important
}
.p1aSidebarToggle{margin:2px 4px 10px auto}
.p1aSidebarToggle span,.p1aHeaderMenu span{display:block;height:2px;border-radius:2px;background:var(--p1a-text)}
.p1aHeaderMenu{display:none;margin-right:10px}
.brand{height:88px!important;padding:4px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
.brandLogo{width:104px!important;height:76px!important;max-width:100%!important;object-fit:contain!important;background:transparent!important;border-radius:0!important}
.brand span{display:none!important}
body.p1aSidebarCollapsed .brandLogo{width:58px!important;height:58px!important}

#nav{display:block!important;margin:8px 0 90px!important;padding:0!important;overflow:visible!important}
#nav>button{
  width:100%!important;min-height:48px!important;margin:3px 0!important;padding:8px 10px!important;border:0!important;border-radius:10px!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:11px!important;
  background:transparent!important;color:var(--p1a-muted)!important;font-size:13px!important;text-align:left!important;
  transition:background .13s ease,color .13s ease;
}
#nav>button:hover{background:var(--p1a-surface-2)!important;color:var(--p1a-text)!important;filter:none!important}
#nav>button.active{background:var(--p1a-accent-soft)!important;color:var(--p1a-accent)!important;box-shadow:none!important;font-weight:700}
.p1aNavIcon{width:24px;height:24px;min-width:24px;display:grid;place-items:center}
.p1aNavIcon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.p1aNavLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.p1aSidebarCollapsed .p1aNavLabel{display:none}
body.p1aSidebarCollapsed #nav>button{justify-content:center!important;padding:8px!important}
.foot{position:absolute!important;left:18px!important;right:18px!important;bottom:16px!important;font-size:10px!important;color:var(--p1a-muted)!important;line-height:1.45!important}
body.p1aSidebarCollapsed .foot{display:none!important}

main>header{
  min-height:72px!important;position:sticky!important;top:0!important;z-index:60!important;
  display:flex!important;align-items:center!important;gap:16px!important;margin:0 -4px 18px!important;padding:10px 4px!important;
  background:color-mix(in srgb,var(--p1a-bg) 92%,transparent)!important;backdrop-filter:blur(14px);
}
main>header>div:first-child{display:flex;align-items:center;min-width:0;flex:1}
main>header>div:first-child>small{display:none!important}
main>header h1{font-size:24px!important;line-height:1.2!important;margin:0!important;letter-spacing:-.02em!important;color:var(--p1a-text)!important}
.p1aHeaderTools{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.p1aOutlet{display:flex!important;align-items:center!important;gap:7px!important;margin:0!important;padding:0 4px 0 10px!important;height:42px;border:1px solid var(--p1a-border);border-radius:10px;background:var(--p1a-surface)}
.p1aOutlet>span{font-size:10px;color:var(--p1a-muted);text-transform:uppercase;letter-spacing:.08em}
.p1aOutlet select{height:38px!important;min-height:38px!important;border:0!important;box-shadow:none!important;background:transparent!important;padding:0 24px 0 2px!important;color:var(--p1a-text)!important}
.p1aStatusPill{height:42px!important;min-height:42px!important;padding:0 12px!important;border:1px solid var(--p1a-border)!important;border-radius:10px!important;background:var(--p1a-surface)!important;color:var(--p1a-muted)!important;display:flex;align-items:center;gap:7px;font-size:11px!important}
.p1aStatusPill i{width:8px;height:8px;border-radius:50%;background:#a6adb6}
.p1aStatusPill[data-state="healthy"] i{background:#2f9e55}.p1aStatusPill[data-state="warning"] i{background:#d39a2c}.p1aStatusPill[data-state="offline"] i{background:#d45a67}
.p1aTheme{position:relative}
.p1aThemeButton{width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;border:1px solid var(--p1a-border)!important;border-radius:10px!important;background:var(--p1a-surface)!important;color:var(--p1a-text)!important;font-size:20px!important}
.p1aThemeMenu{position:absolute;right:0;top:49px;min-width:132px;padding:6px;background:var(--p1a-surface);border:1px solid var(--p1a-border);border-radius:10px;box-shadow:var(--p1a-shadow);z-index:150}
.p1aThemeMenu button{display:block;width:100%;min-height:36px!important;padding:7px 9px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:var(--p1a-text)!important;text-align:left!important}
.p1aThemeMenu button:hover,.p1aThemeMenu button.active{background:var(--p1a-surface-2)!important;color:var(--p1a-accent)!important}
.saleNotice{display:none!important}

.card,dialog,.tableWrap{background:var(--p1a-surface)!important;color:var(--p1a-text)!important;border-color:var(--p1a-border)!important}
input,select,textarea,button{color:var(--p1a-text)}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea,html[data-theme="dark"] button{background:var(--p1a-surface);border-color:var(--p1a-border)}
#p1aBackdrop{display:none}

@media(max-width:900px){
  body.p1aReady aside{
    width:min(82vw,290px)!important;transform:translateX(-103%);box-shadow:0 20px 55px rgba(0,0,0,.26)!important
  }
  body.p1aSidebarOpen aside{transform:translateX(0)}
  body.p1aReady main,body.p1aSidebarCollapsed main{margin-left:0!important;width:100%!important;padding:0 16px 28px!important}
  .p1aSidebarToggle{display:none!important}
  .brand{height:86px!important}.brandLogo{width:112px!important;height:72px!important}
  .p1aHeaderMenu{display:grid!important}
  #p1aBackdrop{position:fixed;inset:0;z-index:80;border:0!important;border-radius:0!important;background:rgba(0,0,0,.36)!important;padding:0!important}
  body.p1aSidebarOpen #p1aBackdrop{display:block}
  .p1aHeaderTools{gap:6px}
}
@media(max-width:620px){
  body.p1aReady main{padding:0 10px 24px!important}
  main>header{min-height:64px!important;gap:8px!important;margin-bottom:10px!important}
  main>header h1{font-size:20px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .p1aOutlet>span,.p1aStatusPill span{display:none}
  .p1aOutlet{padding-left:5px!important}.p1aOutlet select{max-width:118px}
  .p1aStatusPill{width:42px!important;padding:0!important;justify-content:center}
}