/* Hanan Cafe · Floating UI + liquid glass (v0.6.0).
   Theme-agnostic: every tint derives from the active scheme's own
   --accent / --surface / --canvas variables, so Orange/Porcelain and
   White/Sky Blue keep their identity while gaining the glass treatment.
   Layered translucent panels, restrained glass, soft shadows, fluid
   transitions, cinematic ambient identity. Dashboard keeps its own
   dashboard-3d.css tuning. */

/* ---- cinematic ambient canvas (adapts to each theme's palette) ---- */
body{background:
  radial-gradient(1000px 500px at 10% -6%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),
  radial-gradient(1100px 560px at 108% 10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 62%),
  radial-gradient(1300px 760px at 50% 118%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%),
  var(--canvas)!important}

/* ---- layered translucent panels (all features, dashboard excluded) ---- */
.top .glass,
.menu-panel,
.cart-panel,
dialog,
.tablewrap,
.clay:not(.dash-activity):not(.dash-status):not(.dash-latest):not(.dash-shortcuts):not(.dash-metric){
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid color-mix(in srgb,#ffffff 55%,transparent);
  box-shadow:0 24px 48px -20px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -10px 24px color-mix(in srgb,var(--accent) 7%,transparent)}
.top .glass,
.menu-panel,
.cart-panel,
dialog,
.clay:not(.dash-activity):not(.dash-status):not(.dash-latest):not(.dash-shortcuts):not(.dash-metric){
  background:linear-gradient(150deg,color-mix(in srgb,var(--surface-glass) 88%,transparent),color-mix(in srgb,var(--surface) 92%,#ffffff 8%))}

/* ---- floating UI: fluid buttons ---- */
.btn{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,filter .2s ease;
  box-shadow:0 10px 22px -10px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 16px 30px -12px color-mix(in srgb,var(--accent) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.99);
  box-shadow:0 4px 10px -6px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 2px 6px color-mix(in srgb,var(--accent) 18%,transparent)}

/* ---- floating UI: cards lift ---- */
.product,.dish-card,.kitchen>.clay{
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .2s ease}
.product:hover:not(:disabled),.dish-card:hover,.kitchen>.clay:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px -14px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.6)}

/* ---- floating UI: gentle entrance (every page) ---- */
@media (prefers-reduced-motion:no-preference){
  #page>*{animation:float-in .22s cubic-bezier(.2,.8,.2,1) both}
  #page>*:nth-child(2){animation-delay:.03s}
  #page>*:nth-child(3){animation-delay:.06s}
  @keyframes float-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  dialog{animation:dialog-in .28s cubic-bezier(.2,.8,.2,1) both}
  @keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
}
dialog::backdrop{background:rgba(46,7,28,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---- restrained glass: inputs ---- */
input,select,textarea{transition:border-color .2s ease,box-shadow .25s ease}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent),inset 0 1px 2px color-mix(in srgb,var(--accent) 8%,transparent)}

/* ---- fluid table rows ---- */
.tablewrap tbody tr:hover td{
  background:color-mix(in srgb,var(--surface-soft) 70%,#ffffff 30%)!important}

/* ---- sidebar fluid glow ---- */
.side button{transition:background .2s ease,transform .2s ease,box-shadow .25s ease}
.side button.active{
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.55)}
.side button:hover:not(.active){transform:translateX(3px)}