/* ==========================================================================
   HistoStock — application styles
   Tailwind utilities + daisyUI components are loaded from CDN; this file holds
   brand touches, data-table behaviour and print rules.
   ========================================================================== */

:root {
    --hs-brand: #0f766e;         /* teal — laboratory / clinical */
    --hs-brand-ink: #0b3b38;
    --hs-accent: #7c3aed;
}

/* Dark theme (daisyUI "business") — brighten the brand accents so they read
   against dark surfaces. */
[data-theme="business"] {
    --hs-brand: #2dd4bf;
    --hs-brand-ink: #ccfbf1;
    --hs-accent: #a78bfa;
}

/* Sticky, scrollable data tables ------------------------------------------ */
.hs-table-wrap {
    overflow-x: auto;
    max-height: 68vh;
    border-radius: 0.75rem;
}
.hs-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: hsl(var(--b1));
    box-shadow: inset 0 -1px 0 hsl(var(--b3));
    white-space: nowrap;
}
.hs-table tbody td {
    vertical-align: middle;
}
.hs-table tbody tr:hover {
    background-color: hsl(var(--b2) / 0.6);
}

/* Numeric alignment for quantities and money */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Compact action buttons inside tables */
.row-actions { display: inline-flex; gap: 0.25rem; }

/* KPI tiles */
.kpi-value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Form controls: give select/input a consistent min height */
.hs-form .input,
.hs-form .select,
.hs-form .textarea { width: 100%; }

.required::after { content: " *"; color: hsl(var(--er)); }

/* Dropdown autocomplete for product pickers */
.hs-picker { position: relative; }
.hs-picker-menu {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 18rem;
    overflow: auto;
}
.hs-picker-menu[hidden] { display: none; }

/* Sidebar scrollbar */
.drawer-side nav { scrollbar-width: thin; }

/* --------------------------------------------------------------------------
   Theme toggle (top bar)
   -------------------------------------------------------------------------- */
.hs-theme-toggle { position: relative; }
.hs-theme-moon,
.hs-theme-sun { display: inline-flex; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.hs-theme-sun { display: none; }
.hs-theme-toggle:hover .hs-theme-moon,
.hs-theme-toggle:hover .hs-theme-sun { transform: rotate(18deg) scale(1.1); }
[data-theme="business"] .hs-theme-sun { display: inline-flex; }
[data-theme="business"] .hs-theme-moon { display: none; }

/* --------------------------------------------------------------------------
   Dashboard cards — colour + motion
   --------------------------------------------------------------------------
   Each KPI tile carries three custom properties set inline:
     --hs-tone      : solid accent colour (icon, bar)
     --hs-tone-rgb  : the same colour as "r,g,b" for translucent washes
     --hs-delay     : entrance stagger, in ms
   Animations use fill-mode "backwards" (never "forwards") so that once the
   entrance finishes the element returns to its base styles and the :hover
   transform is free to apply.
   -------------------------------------------------------------------------- */
.hs-kpi {
    position: relative;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.22,.61,.36,1),
                box-shadow .3s ease,
                border-color .3s ease;
    animation: hs-kpi-in .5s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay: var(--hs-delay, 0ms);
}
/* Translucent tone wash in the top-right corner. */
.hs-kpi::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 140% at 100% 0%,
                rgba(var(--hs-tone-rgb, 15, 118, 110), .16), transparent 62%);
    pointer-events: none;
}
/* Accent bar down the leading edge, growing in on load. */
.hs-kpi::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg,
                var(--hs-tone, var(--hs-brand)),
                rgba(var(--hs-tone-rgb, 15, 118, 110), .35));
    transform-origin: top center;
    animation: hs-kpi-bar .7s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay: var(--hs-delay, 0ms);
}
.hs-kpi:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px -16px rgba(var(--hs-tone-rgb, 15, 118, 110), .65);
    border-color: rgba(var(--hs-tone-rgb, 15, 118, 110), .45);
}
.hs-kpi-icon {
    background: rgba(var(--hs-tone-rgb, 15, 118, 110), .12);
    color: var(--hs-tone, var(--hs-brand));
    transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
    animation: hs-kpi-pop .5s cubic-bezier(.34,1.56,.64,1) backwards;
    animation-delay: calc(var(--hs-delay, 0ms) + 120ms);
}
.hs-kpi:hover .hs-kpi-icon {
    transform: scale(1.1) rotate(-4deg);
    background: rgba(var(--hs-tone-rgb, 15, 118, 110), .2);
}

/* Section cards: gentle rise-in plus a soft hover lift. */
.hs-rise {
    animation: hs-rise .55s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay: var(--hs-delay, 0ms);
}
.hs-card { transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease; }
.hs-card:hover {
    box-shadow: 0 12px 30px -20px hsl(var(--bc) / .6);
    border-color: hsl(var(--bc) / .22);
}

@keyframes hs-kpi-in {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hs-kpi-bar {
    from { transform: scaleY(0); opacity: .2; }
    to   { transform: scaleY(1); opacity: 1; }
}
@keyframes hs-kpi-pop {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes hs-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* Print ------------------------------------------------------------------- */
@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
    .print-sheet { box-shadow: none !important; }
    .hs-table-wrap { max-height: none; overflow: visible; }
    .hs-table thead th { position: static; box-shadow: none; }
    a[href]::after { content: ""; }
    /* Dashboard motion and washes are screen-only. */
    .hs-kpi, .hs-kpi-icon, .hs-rise { animation: none !important; }
    .hs-kpi::before, .hs-kpi::after { display: none !important; }
    .hs-kpi:hover, .hs-card:hover { transform: none !important; box-shadow: none !important; }
    @page { margin: 14mm; }
}