:root {
    color-scheme: light;
    --bg-primary: #ffffff;
    --bg-canvas: #f8fafc;
    --bg-secondary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --brand: #2563eb;
    --brand-text: #1d4ed8;
    --success: #15803d;
    --danger: #dc2626;
    --border: #e2e8f0;
}

* {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

.bg-app-primary {
    background-color: var(--bg-primary) !important;
}

.bg-app-canvas {
    background-color: var(--bg-canvas) !important;
}

.bg-app-secondary {
    background-color: var(--bg-secondary) !important;
}

.bg-app-brand {
    background-color: var(--brand) !important;
}

.bg-app-success {
    background-color: var(--success) !important;
}

.text-app-text {
    color: var(--text-primary) !important;
}

.text-app-muted {
    color: var(--text-secondary) !important;
}

.text-app-brandText {
    color: var(--brand-text) !important;
}

.text-app-success {
    color: var(--success) !important;
}

.text-app-danger {
    color: var(--danger) !important;
}

.border-app-brand {
    border-color: var(--brand) !important;
}

.focus\:border-app-brand:focus {
    border-color: var(--brand) !important;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    touch-action: manipulation;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.page-view {
    animation: page-fade 180ms ease-out;
}

@keyframes page-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-button {
    min-height: 58px;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-button:active {
    transform: scale(0.96);
}

.nav-button.active:not(.center-nav) {
    background: #eff6ff;
    color: var(--brand-text);
}

.center-nav {
    aspect-ratio: 1 / 1;
    background: var(--brand) !important;
    color: #ffffff !important;
    min-height: 68px;
    min-width: 68px;
    justify-self: center;
}

.center-nav svg,
#openProductModalButton svg {
    display: block;
    color: currentColor;
    stroke: currentColor;
}

.center-nav.active {
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.32);
    transform: translateY(-2px);
}

#openProductModalButton {
    background: var(--brand) !important;
    color: #ffffff !important;
}

.subtab-button {
    min-height: 40px;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.subtab-button.active {
    background: #ffffff;
    color: var(--brand-text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.product-card,
.category-card,
.ledger-row,
.history-row {
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.product-card:active,
.category-card:active {
    transform: scale(0.99);
}

.status-pill,
.stock-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.status-active {
    background: #dcfce7;
    color: var(--success);
}

.status-inactive {
    background: #f1f5f9;
    color: var(--text-secondary);
}

.stock-ok {
    background: #eff6ff;
    color: var(--brand-text);
}

.stock-low {
    background: #fee2e2;
    color: var(--danger);
}

.chart-bar {
    border-radius: 999px;
    min-height: 10px;
}

#salesCategoryChart {
    display: block;
    max-width: 100%;
}

#salesTrendChart {
    display: block;
    max-width: 100%;
}

.image-preview-canvas {
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: block;
    max-width: 100%;
    width: 100%;
}

input[type="range"] {
    accent-color: var(--brand);
}

#productModal {
    align-items: end;
}

#productModal:not(.hidden) {
    display: flex;
}

#productModal > div {
    animation: modal-rise 180ms ease-out;
}

@keyframes modal-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#toast {
    animation: toast-drop 180ms ease-out;
}

@keyframes toast-drop {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.ai-output {
    white-space: pre-wrap;
}

.loading-shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

@media (min-width: 768px) {
    #productModal {
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}