/*
 * Cashier panel only (single <link> via CashierPanelProvider::assets; never loaded by
 * Admin / Owner / Deliverer).
 *
 * COSMETIC ONLY: colours, soft shadows, radii and hover/press states. No transform,
 * filter, will-change, overflow, position, z-index, contain, pointer-events or display
 * rules anywhere, so modals, dropdowns, selects, date pickers, sticky table columns and
 * fixed elements keep working. No layout dimensions change (no padding/margin/border/
 * width/height), so POS / order-taking layouts are untouched.
 */

/* ---- Gentle fade-in of the page content (opacity only, <=200ms) ------------------- */
@keyframes cashier-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* "backwards": nothing is left applied after the animation ends. */
.fi-main {
    animation: cashier-fade-in 0.18s ease-out backwards;
}

/* ---- Soft page tint (light + dark) ------------------------------------------------ */
html:not(.dark) .fi-body {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary-500, #22c55e) 5%, transparent), transparent 360px);
}

.dark .fi-body {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary-400, #4ade80) 7%, transparent), transparent 360px);
}

/* ---- Cards: soft shadow + rounder corners + faint brand tint ------------------------ */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart {
    border-radius: 0.875rem;
}

.fi-section:not(.fi-section-not-contained),
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 6px 18px -10px rgb(15 23 42 / 0.18);
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.dark .fi-section:not(.fi-section-not-contained),
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 22px -12px rgb(0 0 0 / 0.6);
}

.fi-section:not(.fi-section-not-contained),
.fi-wi-stats-overview-stat {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary-500, #22c55e) 5%, transparent), transparent 55%);
}

.dark .fi-section:not(.fi-section-not-contained),
.dark .fi-wi-stats-overview-stat {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary-400, #4ade80) 7%, transparent), transparent 55%);
}

@media (hover: hover) {
    .fi-section:not(.fi-section-not-contained):hover,
    .fi-wi-stats-overview-stat:hover {
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 12px 26px -12px color-mix(in srgb, var(--primary-500, #22c55e) 45%, transparent);
    }
}

/* Stat icons pick up the brand / status colours (colour only, no size change). */
.fi-wi-stats-overview-stat-label-ctn > svg {
    color: var(--primary-500, #22c55e);
}

.fi-wi-stats-overview-stat:nth-child(4n + 2) .fi-wi-stats-overview-stat-label-ctn > svg,
.fi-grid-col:nth-child(4n + 2) .fi-wi-stats-overview-stat-label-ctn > svg { color: var(--info-500, #0ea5e9); }
.fi-wi-stats-overview-stat:nth-child(4n + 3) .fi-wi-stats-overview-stat-label-ctn > svg,
.fi-grid-col:nth-child(4n + 3) .fi-wi-stats-overview-stat-label-ctn > svg { color: var(--warning-500, #f59e0b); }
.fi-wi-stats-overview-stat:nth-child(4n) .fi-wi-stats-overview-stat-label-ctn > svg,
.fi-grid-col:nth-child(4n) .fi-wi-stats-overview-stat-label-ctn > svg { color: var(--accent-500, #8b5cf6); }

/* ---- Inputs / buttons: radii + soft focus glow -------------------------------------- */
.fi-input-wrp,
.fi-btn,
.fi-badge {
    border-radius: 0.625rem;
}

.fi-input-wrp {
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500, #22c55e) 22%, transparent);
}

.fi-badge {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}

/* ---- Press / hover feedback: colour and shadow only (no transform) ------------------- */
.fi-btn,
.fi-icon-btn,
.fi-dropdown-list-item,
.fi-sidebar-item > .fi-sidebar-item-btn,
.fi-ta-row {
    transition: box-shadow 0.18s ease, background-color 0.18s ease, opacity 0.15s ease;
}

@media (hover: hover) {
    .fi-btn:not([disabled]):hover {
        box-shadow: 0 4px 12px -6px color-mix(in srgb, currentColor 45%, transparent);
    }

    .fi-ta-row:hover {
        background-color: color-mix(in srgb, var(--primary-500, #22c55e) 6%, transparent);
    }
}

.fi-btn:not([disabled]):active,
.fi-icon-btn:not([disabled]):active {
    box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.2);
    opacity: 0.92;
}

/* ---- Sidebar: tinted active item (background only) ----------------------------------- */
.fi-sidebar-item > .fi-sidebar-item-btn {
    border-radius: 0.625rem;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-500, #22c55e) 20%, transparent),
        color-mix(in srgb, var(--info-500, #0ea5e9) 12%, transparent));
}

/* ---- Modals: plain dim overlay instead of blur (lighter on cheap phones) -------------- */
.fi-modal-close-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ---- Reduced motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .fi-main {
        animation: none;
    }

    .fi-section,
    .fi-wi-stats-overview-stat,
    .fi-ta-ctn,
    .fi-input-wrp,
    .fi-btn,
    .fi-icon-btn,
    .fi-dropdown-list-item,
    .fi-sidebar-item > .fi-sidebar-item-btn,
    .fi-ta-row {
        transition-duration: 0.01ms;
    }
}