/* Order&Eat — shared motion for the staff apps (POS, hostess, back office, admin, staff, home).
 * The same feel as "פעולות נוספות": windows pop in, tiles rise one after another, buttons give a little press.
 * Only the independent `scale` / `translate` / `opacity` properties are animated, never `transform`,
 * so positions, rotations and table sizes set by the apps are untouched.
 * Delete this file's <link> (or the file) to go back to no animations.
 */

/* --- press feedback: buttons and clickable tiles shrink a bit while pressed --- */
button, .btn, .ma-tile, [role="button"], .cursor-pointer {
    transition-property: scale, translate, transform, background-color, border-color, color, box-shadow, opacity, filter;
    transition-duration: .14s;
    transition-timing-function: ease-out;
}
button:not(:disabled):active, .btn:not(:disabled):active, [role="button"]:active, .cursor-pointer:active { scale: .96; }
/* the floor plan keeps its own behaviour (tables are dragged in the editor) */
.table-btn, .table-btn:active, .editor-table, .editor-table:active { scale: none; }

/* --- windows: the dark backdrop fades in, the window pops up --- */
@keyframes oe-fade { from { opacity: 0; } }
@keyframes oe-pop { from { opacity: 0; scale: .97; } }
@keyframes oe-up { from { opacity: 0; translate: 0 24px; } }
@keyframes oe-rise { from { opacity: 0; translate: 0 6px; } }

/* Tailwind apps (POS, hostess, back office): every modal is a fixed backdrop shown by removing .hidden */
.fixed.inset-0[class*="bg-black/"]:not(.hidden) { animation: oe-fade .12s ease-out; }
.fixed.inset-0[class*="bg-black/"]:not(.hidden) > :first-child { animation: oe-pop .14s ease-out; }
/* staff app: the bottom sheet slides up; home page: the QR window */
#sheet:not(.hidden) { animation: oe-fade .12s ease-out; }
#sheet:not(.hidden) .panel { animation: oe-up .18s ease-out; }
#staff-qr:not([hidden]):not(.hidden) > :first-child { animation: oe-pop .14s ease-out; }

/* "פעולות נוספות" tiles rise one after another each time the window opens */
.fixed.inset-0:not(.hidden) .ma-tile { animation: oe-rise .16s ease-out both; }
.fixed.inset-0:not(.hidden) .ma-tile:nth-child(2) { animation-delay: 0.012s; }
.fixed.inset-0:not(.hidden) .ma-tile:nth-child(3) { animation-delay: 0.024s; }
.fixed.inset-0:not(.hidden) .ma-tile:nth-child(4) { animation-delay: 0.036s; }
.fixed.inset-0:not(.hidden) .ma-tile:nth-child(5) { animation-delay: 0.048s; }
.fixed.inset-0:not(.hidden) .ma-tile:nth-child(6) { animation-delay: 0.06s; }
.fixed.inset-0:not(.hidden) .ma-tile:nth-child(7) { animation-delay: 0.072s; }
.fixed.inset-0:not(.hidden) .ma-tile:nth-child(8) { animation-delay: 0.084s; }
.fixed.inset-0:not(.hidden) .ma-tile:nth-child(9) { animation-delay: 0.096s; }
.fixed.inset-0:not(.hidden) .ma-tile:nth-child(10) { animation-delay: 0.108s; }
.fixed.inset-0:not(.hidden) .ma-tile:nth-child(n+11) { animation-delay: .12s; }

/* staff / admin: cards lift a little under the mouse, like the tiles */
@media (hover: hover) {
    .btn:not(:disabled):hover { translate: 0 -1px; }
    .card[onclick], a.card { transition: translate .15s ease-out, box-shadow .15s ease-out; }
    .card[onclick]:hover, a.card:hover { translate: 0 -2px; box-shadow: 0 10px 22px -12px rgba(40, 30, 20, .35); }
}

/* ===================== tiles and action buttons: the "פעולות נוספות" look =====================
 * Soft card tinted by --c1, icon in a rounded chip with a --c1 → --c2 gradient, a gentle glow on hover.
 * The tint is mixed with transparent, so it sits on any background (light or dark).
 *   .oe-tile  big card (icon on top, label under it) — put the icon inside .oe-ic
 *   .oe-act   action button — its first <i> becomes the chip; add .col for icon-over-label
 *   .oe-nav   side-menu item (back office) — first <i> becomes a small chip, .on is tinted
 */
.oe-tile, .oe-act, .oe-nav { --c1: #E85A2A; }
.oe-tile {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    border-radius: 22px; cursor: pointer; text-decoration: none; color: inherit;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 11%, transparent), color-mix(in srgb, var(--c1) 4%, transparent));
    border: 1px solid color-mix(in srgb, var(--c1) 20%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: translate .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out, scale .14s ease-out;
}
.oe-ic {
    width: 56px; height: 56px; border-radius: 18px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px;
    background: linear-gradient(135deg, var(--c1), var(--c2, var(--c1)));
    box-shadow: 0 8px 16px -8px var(--c1), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: scale .25s cubic-bezier(.2, .9, .3, 1.4);
}

.oe-act {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: right;
    padding: 9px 12px; border-radius: 16px; font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none;
    color: color-mix(in srgb, var(--c1) 55%, #1c1917);
    background: color-mix(in srgb, var(--c1) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--c1) 18%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: translate .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out, background-color .2s, scale .14s ease-out;
}
.oe-act.col { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 9px 6px; font-size: 12px; }
.oe-act > i:first-child, .oe-nav > i:first-child {
    width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px;
    background: linear-gradient(135deg, var(--c1), var(--c2, var(--c1)));
    box-shadow: 0 6px 12px -6px var(--c1), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: scale .25s cubic-bezier(.2, .9, .3, 1.4);
}
.oe-act:disabled, .oe-act.opacity-40 { opacity: .4; }

/* back-office side menu: small colored chips, the open section tinted in its own color */
.oe-nav > i:first-child { width: 28px; height: 28px; font-size: 13px; box-shadow: 0 5px 10px -6px var(--c1), inset 0 1px 0 rgba(255, 255, 255, .35); }
html .nav-btn.oe-nav.on {
    background: color-mix(in srgb, var(--c1) 11%, transparent);
    color: color-mix(in srgb, var(--c1) 70%, #1c1917);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 22%, transparent);
}
html.dark .nav-btn.oe-nav.on { color: color-mix(in srgb, var(--c1) 45%, #fff); }

@media (hover: hover) {
    .oe-tile:hover, .oe-act:not(:disabled):hover {
        translate: 0 -2px;
        border-color: color-mix(in srgb, var(--c1) 42%, transparent);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 24px -14px color-mix(in srgb, var(--c1) 75%, transparent), 0 0 0 4px color-mix(in srgb, var(--c1) 7%, transparent);
    }
    .oe-tile:hover .oe-ic, .oe-act:hover > i:first-child, .oe-nav:hover > i:first-child { scale: 1.07; }
}
.oe-tile:active, .oe-act:not(:disabled):active { scale: .97; }

/* back office "במשמרת עכשיו": one soft card per person, the avatar in the status color (--c1) */
.oe-person {
    --c1: #10b981; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 10%, transparent), color-mix(in srgb, var(--c1) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--c1) 20%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    /* no entrance animation: the dashboard redraws every minute and on every POS change */
}
.oe-av {
    position: relative; width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 17px;
    background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 70%, #000));
    box-shadow: 0 6px 14px -7px var(--c1), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.oe-dot { position: absolute; bottom: -2px; left: -2px; width: 12px; height: 12px; border-radius: 99px; background: #22c55e; border: 2px solid #fff; }
.oe-dot::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #22c55e; animation: oe-ping 1.8s ease-out infinite; }
@keyframes oe-ping { from { opacity: .8; scale: 1; } to { opacity: 0; scale: 2.2; } }
.oe-chip {
    --c1: #64748b; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
    color: color-mix(in srgb, var(--c1) 75%, #1c1917); background: color-mix(in srgb, var(--c1) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--c1) 22%, transparent);
}
.oe-person .oe-chip { --c1: inherit; }
.dark .oe-person { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.dark .oe-dot { border-color: #1D1B19; }
.dark .oe-chip { color: color-mix(in srgb, var(--c1) 45%, #fff); }

/* dark screens: a fainter top highlight, lighter text */
.dark .oe-tile, .dark .oe-act { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.dark .oe-act { color: color-mix(in srgb, var(--c1) 35%, #f5f5f4); }

/* blur behind windows / the top bar costs the iPad the most: none, anywhere */
.backdrop-blur-sm, .backdrop-blur, .backdrop-blur-md, .glass-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.glass-panel { background: #fff !important; }
.dark .glass-panel { background: #1D1B19 !important; }

/* slow internet or a device that can't keep up (light-responsive.js sets html.oe-lite): no animations at all */
html.oe-lite *, html.oe-lite *::before, html.oe-lite *::after { animation: none !important; transition: none !important; }
html.oe-lite .backdrop-blur-sm, html.oe-lite .backdrop-blur { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* people who asked their device for less motion get none */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}