/* DBX ONE STOCKROOM v0.8.3 — unified Home / Rooms / Deliveries / Shopping navigation.
   Desktop uses a quiet top tab bar; mobile mirrors it in the bottom navigation.
   Home shows only work that needs attention and dynamically warns when the Stock Room
   cannot cover the combined replenishment requirement across rooms. */

/* The same four primary views now work at every viewport size. */
.stock-demo-page .demo-mobile-tab-view[hidden]{display:none!important}
.stock-demo-page .demo-mobile-tab-view:not([hidden]){display:block!important}
.stock-demo-page .demo-mobile-tab-page:not([hidden]){display:block!important}
.stock-demo-page .demo-action-launches{display:none!important}

/* Desktop app navigation. */
.stock-demo-page .demo-desktop-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:max-content;
  max-width:100%;
  margin:0 auto 28px;
  padding:5px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  background:rgba(8,17,29,.72);
  box-shadow:0 14px 38px rgba(0,0,0,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.stock-demo-page .demo-desktop-tabs button{
  min-width:112px;
  min-height:38px;
  padding:8px 16px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#71879a;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.stock-demo-page .demo-desktop-tabs button:hover{color:#b7d6eb;background:rgba(255,255,255,.035)}
.stock-demo-page .demo-desktop-tabs button.active{
  background:#0e2940;
  color:#6ec5ff;
  box-shadow:inset 0 0 0 1px rgba(92,190,255,.16),0 5px 16px rgba(0,0,0,.18);
}

/* Home — intentionally sparse. */
.stock-demo-page .demo-home-view{max-width:980px;margin:0 auto}
.stock-demo-page .demo-home-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:30px 32px;
  border:1px solid rgba(91,184,255,.14);
  border-radius:25px;
  background:
    radial-gradient(circle at 87% 0,rgba(53,145,219,.12),transparent 34%),
    linear-gradient(145deg,#08131f,#07101a 66%,#091625);
  box-shadow:0 22px 58px rgba(0,0,0,.20);
}
.stock-demo-page .demo-home-copy{min-width:0}
.stock-demo-page .demo-home-copy h2{
  margin:6px 0 8px;
  color:#f5faff;
  font-size:clamp(32px,4vw,46px);
  line-height:1.02;
  letter-spacing:-.05em;
}
.stock-demo-page .demo-home-copy>p:last-child{
  margin:0;
  color:#8ca1b4;
  font-size:13px;
  line-height:1.5;
}
.stock-demo-page .demo-home-state{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:205px;
  padding:13px 15px;
  border:1px solid rgba(255,173,56,.18);
  border-radius:15px;
  background:rgba(44,29,8,.52);
}
.stock-demo-page .demo-home-state>span{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:50%;
  background:rgba(255,173,56,.12);
  color:#ffc15e;
  font-size:16px;
  font-weight:900;
}
.stock-demo-page .demo-home-state strong,.stock-demo-page .demo-home-state small{display:block}
.stock-demo-page .demo-home-state strong{color:#f6ead8;font-size:11px;font-weight:850}
.stock-demo-page .demo-home-state small{margin-top:2px;color:#a79277;font-size:9px;font-weight:700}
.stock-demo-page .demo-home-state[data-tone=red]{border-color:rgba(255,101,114,.2);background:rgba(49,14,22,.5)}
.stock-demo-page .demo-home-state[data-tone=red]>span{background:rgba(255,101,114,.12);color:#ff8490}
.stock-demo-page .demo-home-state[data-tone=red] strong{color:#ffe5e8}
.stock-demo-page .demo-home-state[data-tone=red] small{color:#b99398}
.stock-demo-page .demo-home-state[data-tone=green]{border-color:rgba(53,211,151,.2);background:rgba(8,43,31,.5)}
.stock-demo-page .demo-home-state[data-tone=green]>span{background:rgba(53,211,151,.12);color:#64dfac}
.stock-demo-page .demo-home-state[data-tone=green] strong{color:#dcfff0}
.stock-demo-page .demo-home-state[data-tone=green] small{color:#83aa99}

.stock-demo-page .demo-home-actions{margin-top:24px}
.stock-demo-page .demo-home-actions-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:11px;
  padding:0 2px;
}
.stock-demo-page .demo-home-actions-head h3{
  margin:3px 0 0;
  color:#eaf2f9;
  font-size:19px;
  letter-spacing:-.03em;
}
.stock-demo-page .demo-home-actions-head>span{
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:999px;
  color:#72889b;
  font-size:9px;
  font-weight:800;
}
.stock-demo-page .demo-home-action-list{display:grid;gap:8px}
.stock-demo-page .demo-home-action{
  display:grid;
  grid-template-columns:9px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  width:100%;
  min-height:72px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:16px;
  background:#09131e;
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.stock-demo-page .demo-home-action:hover{transform:translateY(-1px);border-color:rgba(97,184,245,.20);background:#0a1724}
.stock-demo-page .demo-home-action-dot{width:8px;height:8px;border-radius:50%;background:#53b9ff;box-shadow:0 0 0 4px rgba(83,185,255,.07)}
.stock-demo-page .demo-home-action[data-tone=orange] .demo-home-action-dot{background:var(--demo-orange);box-shadow:0 0 0 4px rgba(255,173,56,.07)}
.stock-demo-page .demo-home-action[data-tone=red] .demo-home-action-dot{background:var(--demo-red);box-shadow:0 0 0 4px rgba(255,101,114,.08)}
.stock-demo-page .demo-home-action-copy{display:block;min-width:0}
.stock-demo-page .demo-home-action-copy small,.stock-demo-page .demo-home-action-copy strong,.stock-demo-page .demo-home-action-copy>span{display:block}
.stock-demo-page .demo-home-action-copy small{margin-bottom:3px;color:#66849a;font-size:8px;font-weight:850;letter-spacing:.105em;text-transform:uppercase}
.stock-demo-page .demo-home-action[data-tone=red] .demo-home-action-copy small{color:#d97882}
.stock-demo-page .demo-home-action[data-tone=orange] .demo-home-action-copy small{color:#c98c38}
.stock-demo-page .demo-home-action-copy strong{color:#edf5fb;font-size:13px;line-height:1.25}
.stock-demo-page .demo-home-action-copy>span{margin-top:4px;color:#72889b;font-size:10px;line-height:1.4}
.stock-demo-page .demo-home-action-arrow{color:#526c80;font-size:24px;font-weight:300}
.stock-demo-page .demo-home-empty{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px;
  border:1px solid rgba(53,211,151,.13);
  border-radius:17px;
  background:rgba(8,35,27,.36);
}
.stock-demo-page .demo-home-empty>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(53,211,151,.11);color:#65dcad;font-weight:900}
.stock-demo-page .demo-home-empty strong{display:block;color:#dffbef;font-size:13px}
.stock-demo-page .demo-home-empty p{margin:4px 0 0;color:#78998a;font-size:10px;line-height:1.45}

/* Deliveries and Shopping now have proper desktop tab pages too. */
@media(min-width:621px){
  .stock-demo-page .demo-mobile-tab-page{max-width:980px;margin:0 auto;padding:0}
  .stock-demo-page .demo-mobile-tab-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:14px;
    padding:22px 24px;
    border:1px solid rgba(78,177,255,.13);
    border-radius:20px;
    background:linear-gradient(145deg,#081522,#091b2d);
  }
  .stock-demo-page .demo-mobile-tab-head h2{margin:4px 0 0;color:#f3f9ff;font-size:30px;letter-spacing:-.045em}
  .stock-demo-page .demo-mobile-tab-summary{margin:7px 0 0;color:#7f96a9;font-size:10px;font-weight:700}
  .stock-demo-page .demo-mobile-tab-page>.demo-deliveries-intro{margin:0 2px 16px;color:#8298aa;font-size:11px;line-height:1.55}
  .stock-demo-page .demo-mobile-tab-page>.demo-invoice-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:620px){
  .stock-demo-page .demo-desktop-tabs{display:none!important}
  .stock-demo-page .demo-mobile-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .stock-demo-page .demo-mobile-nav button{font-size:9px!important}
  .stock-demo-page .demo-mobile-nav button span{font-size:18px!important}
  .stock-demo-page .demo-home-view{margin-top:2px}
  .stock-demo-page .demo-home-hero{display:block;padding:20px 17px;border-radius:20px}
  .stock-demo-page .demo-home-copy h2{font-size:31px}
  .stock-demo-page .demo-home-copy>p:last-child{font-size:11px}
  .stock-demo-page .demo-home-state{width:100%;min-width:0;margin-top:16px;padding:11px 12px}
  .stock-demo-page .demo-home-actions{margin-top:18px}
  .stock-demo-page .demo-home-action{min-height:68px;padding:12px 13px;border-radius:14px;gap:10px}
  .stock-demo-page .demo-home-action-copy strong{font-size:12px}
  .stock-demo-page .demo-home-action-copy>span{font-size:9.5px}
  .stock-demo-page .demo-home-action-arrow{font-size:20px}
}

@media(max-width:360px){
  .stock-demo-page .demo-mobile-nav button{font-size:8px!important}
  .stock-demo-page .demo-mobile-nav button span{font-size:17px!important}
}


/* v0.8.6 — global stock search on Home */
.stock-demo-page .demo-home-stock-search{margin-top:24px}
.stock-demo-page .demo-home-stock-search-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:11px;padding:0 2px}
.stock-demo-page .demo-home-stock-search-head h3{margin:3px 0 0;color:#eaf2f9;font-size:19px;letter-spacing:-.03em}
.stock-demo-page .demo-home-stock-search-input{margin-bottom:12px}
.stock-demo-page .demo-home-stock-search-results{display:grid;gap:10px}
.stock-demo-page .demo-home-stock-search-empty{padding:18px 18px 17px;border:1px solid rgba(255,255,255,.065);border-radius:16px;background:#09131e}
.stock-demo-page .demo-home-stock-search-empty strong{display:block;color:#e9f3fb;font-size:13px}
.stock-demo-page .demo-home-stock-search-empty p{margin:5px 0 0;color:#72889b;font-size:10px;line-height:1.45}
.stock-demo-page .demo-home-stock-result{padding:14px 14px 12px;border:1px solid rgba(255,255,255,.065);border-radius:18px;background:#09131e;box-shadow:0 10px 28px rgba(0,0,0,.08)}
.stock-demo-page .demo-home-stock-result-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.stock-demo-page .demo-home-stock-result-head small{display:block;margin-bottom:4px;color:#698297;font-size:8px;font-weight:850;letter-spacing:.105em;text-transform:uppercase}
.stock-demo-page .demo-home-stock-result-head h4{margin:0;color:#edf5fb;font-size:16px;line-height:1.2;letter-spacing:-.025em}
.stock-demo-page .demo-home-stock-result-total{text-align:right}
.stock-demo-page .demo-home-stock-result-total strong{display:block;color:#6ec5ff;font-size:24px;line-height:1;font-weight:900}
.stock-demo-page .demo-home-stock-result-total span{display:block;margin-top:2px;color:#7a92a6;font-size:10px;font-weight:700}
.stock-demo-page .demo-home-stock-result-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.stock-demo-page .demo-home-stock-result-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 11px;border:1px solid rgba(255,255,255,.05);border-radius:13px;background:#08111a}
.stock-demo-page .demo-home-stock-result-list li span{display:block;min-width:0}
.stock-demo-page .demo-home-stock-result-list li strong,.stock-demo-page .demo-home-stock-result-list li small,.stock-demo-page .demo-home-stock-result-list li b{display:block}
.stock-demo-page .demo-home-stock-result-list li strong{color:#edf5fb;font-size:12px;line-height:1.25}
.stock-demo-page .demo-home-stock-result-list li small{margin-top:3px;color:#6d869a;font-size:9px;font-weight:700}
.stock-demo-page .demo-home-stock-result-list li b{flex:0 0 auto;color:#dfeaf2;font-size:11px;font-weight:800;text-align:right}
.stock-demo-page .demo-home-stock-result-list li[data-tone=green]{border-color:rgba(53,211,151,.08)}
.stock-demo-page .demo-home-stock-result-list li[data-tone=orange]{border-color:rgba(255,173,56,.10)}
.stock-demo-page .demo-home-stock-result-list li[data-tone=red]{border-color:rgba(255,101,114,.10)}
@media(max-width:620px){
  .stock-demo-page .demo-home-stock-search{margin-top:18px}
  .stock-demo-page .demo-home-stock-result{padding:12px 12px 11px;border-radius:15px}
  .stock-demo-page .demo-home-stock-result-head h4{font-size:14px}
  .stock-demo-page .demo-home-stock-result-total strong{font-size:22px}
  .stock-demo-page .demo-home-stock-result-list li{padding:9px 10px;border-radius:12px;gap:10px}
  .stock-demo-page .demo-home-stock-result-list li strong{font-size:11.5px}
  .stock-demo-page .demo-home-stock-result-list li b{font-size:10px}
}