/*
 * MMK Appica UI adaptation.
 * Based on the MIT-licensed Appica UI token model and component behavior:
 * https://github.com/appica-dev/appica-ui
 *
 * Tools-Int remains a PHP app without a React/Tailwind build chain. This layer
 * maps Appica's component language onto the existing server-rendered markup.
 */

:root {
    --appica-foreground: oklch(0.278 0.033 256.848);
    --appica-foreground-muted: oklch(0.551 0.027 264.364);
    --appica-foreground-subtle: oklch(0.707 0.022 261.325);
    --appica-background: oklch(1 0 0);
    --appica-background-subtle: oklch(0.985 0.002 247.839);
    --appica-background-muted: oklch(0.967 0.003 264.542);
    --appica-background-strong: oklch(0.928 0.006 264.531);
    --appica-background-inverse: oklch(0.13 0.028 261.692);
    --appica-border: oklch(0.928 0.006 264.531);
    --appica-border-strong: oklch(0.872 0.01 258.338);
    --appica-primary: oklch(0.21 0.034 264.665);
    --appica-primary-muted: oklch(0.373 0.034 259.733);
    --appica-secondary: oklch(0.809 0.105 251.813);
    --appica-secondary-emphasis: oklch(0.623 0.214 259.815);
    --appica-success-soft: oklch(0.696 0.17 162.48 / 16%);
    --appica-success-text: oklch(0.596 0.145 163.225);
    --appica-error-soft: oklch(0.637 0.237 25.331 / 14%);
    --appica-error-text: oklch(0.577 0.245 27.325);
    --appica-warning-soft: oklch(0.705 0.213 47.604 / 15%);
    --appica-warning-text: oklch(0.646 0.222 41.116);
    --appica-info-soft: oklch(0.685 0.169 237.323 / 13%);
    --appica-info-text: oklch(0.588 0.158 241.966);
    --appica-ring: oklch(0.623 0.214 259.815 / 28%);
    --appica-radius: 0.875rem;
    --appica-radius-sm: 0.75rem;
    --appica-radius-xs: 0.625rem;
    --appica-shadow-sm: 0 2px 8px -2px oklch(0.551 0.027 264.364 / 16%);
    --appica-shadow-md: 0 10px 30px -12px oklch(0.551 0.027 264.364 / 24%);
    --appica-shadow-lg: 0 24px 42px -24px oklch(0.551 0.027 264.364 / 30%);

    --bg: var(--appica-background-muted);
    --panel: var(--appica-background);
    --panel-soft: var(--appica-background-subtle);
    --ink: var(--appica-foreground);
    --muted: var(--appica-foreground-muted);
    --line: var(--appica-border);
    --border: var(--appica-border);
    --text: var(--appica-foreground);
    --brand: var(--appica-primary);
    --brand-strong: var(--appica-primary-muted);
    --shadow: var(--appica-shadow-md);
    --focus-ring: 0 0 0 4px var(--appica-ring);
}

::selection {
    background: oklch(0.623 0.214 259.815 / 16%);
}

body {
    background:
        linear-gradient(180deg, var(--appica-background-subtle) 0%, var(--appica-background-muted) 42%, var(--appica-background-muted) 100%);
    color: var(--appica-foreground);
}

.login-shell {
    background:
        radial-gradient(circle at 50% 0%, oklch(0.623 0.214 259.815 / 12%), transparent 42%),
        var(--appica-background-muted);
}

.login-card,
.panel,
.table-wrap,
.module-card,
.kpi {
    border-color: var(--appica-border);
    border-radius: var(--appica-radius);
    box-shadow: var(--appica-shadow-sm);
}

.login-card,
.panel {
    background:
        linear-gradient(180deg, oklch(1 0 0 / 96%), oklch(1 0 0 / 100%)),
        var(--appica-background);
}

.panel,
.module-card {
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.panel:hover,
.module-card:hover {
    border-color: var(--appica-border-strong);
    box-shadow: var(--appica-shadow-md);
}

.app-shell {
    grid-template-columns: 256px minmax(0, 1fr);
}

.sidebar {
    background:
        linear-gradient(180deg, oklch(0.16 0.03 261.692) 0%, var(--appica-background-inverse) 100%);
    border-right: 1px solid oklch(1 0 0 / 8%);
    box-shadow: inset -1px 0 0 oklch(1 0 0 / 4%);
}

.brand-sign {
    border: 1px solid oklch(1 0 0 / 9%);
    background: oklch(1 0 0 / 7%);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 8%);
}

.login-card .brand-sign {
    background: var(--appica-primary);
}

.nav-item {
    position: relative;
    min-height: 42px;
    border-radius: var(--appica-radius-xs);
    color: oklch(0.872 0.01 258.338 / 82%);
    transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.nav-item:hover {
    background: oklch(1 0 0 / 9%);
    transform: translateX(1px);
}

.nav-item.active {
    background: oklch(1 0 0 / 12%);
    box-shadow: inset 3px 0 0 var(--appica-secondary-emphasis), inset 0 1px 0 oklch(1 0 0 / 6%);
}

.content {
    padding: clamp(22px, 2.5vw, 36px);
}

.topbar {
    min-height: 62px;
    padding-bottom: 20px;
    border-bottom-color: var(--appica-border);
}

h1 {
    font-size: clamp(1.55rem, 1.2rem + 0.7vw, 2rem);
    letter-spacing: 0;
}

h2 {
    font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.35rem);
}

.muted {
    color: var(--appica-foreground-muted);
}

.kpi {
    min-height: 88px;
    padding: 18px;
    background: var(--appica-background);
}

.kpi span {
    color: var(--appica-foreground-subtle);
    letter-spacing: 0.02em;
}

.kpi strong {
    font-variant-numeric: tabular-nums;
}

.button,
button {
    position: relative;
    isolation: isolate;
    min-height: 40px;
    border-radius: var(--appica-radius-xs);
    background: var(--appica-primary);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 760;
    overflow: hidden;
    transition: transform 160ms cubic-bezier(0.175, 0.885, 0.32, 1.35), border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.button::before,
button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(138% 78% at 52% 50%, var(--appica-primary) 0%, var(--appica-primary-muted) 85%);
    opacity: 0;
    transition: opacity 180ms ease;
}

.button:hover,
button:hover {
    background: var(--appica-primary);
    box-shadow: var(--appica-shadow-sm);
}

.button:hover::before,
button:hover::before {
    opacity: 1;
}

.button:active,
button:active {
    transform: translateY(1px) scale(0.98);
}

.button.secondary,
button.secondary {
    background: var(--appica-background);
    border-color: var(--appica-border);
    color: var(--appica-foreground);
}

.button.secondary::before,
button.secondary::before {
    background: var(--appica-background-subtle);
}

.button.secondary:hover,
button.secondary:hover {
    border-color: var(--appica-border-strong);
    background: var(--appica-background);
    color: var(--appica-foreground);
}

.button.danger,
button.danger {
    background: var(--appica-error-text);
}

input,
select,
textarea {
    min-height: 42px;
    border-color: var(--appica-border);
    border-radius: var(--appica-radius-xs);
    background: var(--appica-background);
    color: var(--appica-foreground);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--appica-border-strong);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--appica-secondary-emphasis);
    box-shadow: 0 0 0 4px var(--appica-ring);
}

.check input,
.select-cell input[type="checkbox"] {
    border-radius: 0.35rem;
    accent-color: var(--appica-secondary-emphasis);
}

.badge,
.placeholder-chip,
.file-count-badge,
.inventory-kpi-chip,
.alarm-chip {
    border: 1px solid var(--appica-border);
    border-radius: 999px;
    background: var(--appica-background-subtle);
    color: var(--appica-foreground-muted);
}

.badge.ok,
.alarm-chip.ok {
    border-color: oklch(0.696 0.17 162.48 / 26%);
    background: var(--appica-success-soft);
    color: var(--appica-success-text);
}

.badge.danger,
.alarm-chip.danger {
    border-color: oklch(0.637 0.237 25.331 / 22%);
    background: var(--appica-error-soft);
    color: var(--appica-error-text);
}

.alarm-chip.warning,
.flash.warning {
    border-color: oklch(0.705 0.213 47.604 / 24%);
    background: var(--appica-warning-soft);
    color: var(--appica-warning-text);
}

.flash,
.password-policy {
    border-radius: var(--appica-radius-sm);
    box-shadow: var(--appica-shadow-sm);
}

.flash.success {
    border-color: oklch(0.696 0.17 162.48 / 26%);
    background: var(--appica-success-soft);
    color: var(--appica-success-text);
}

.flash.error {
    border-color: oklch(0.637 0.237 25.331 / 22%);
    background: var(--appica-error-soft);
    color: var(--appica-error-text);
}

.filter-head {
    align-items: center;
}

.quick-filter-grid,
.filter-tool,
.list-toolbar {
    border-color: var(--appica-border);
    border-radius: var(--appica-radius-sm);
    background: oklch(1 0 0 / 78%);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 80%);
}

.filter-tool summary {
    border-radius: inherit;
}

.filter-tool summary > span,
.collapsible-panel-toggle {
    border-color: var(--appica-border);
    background: var(--appica-background);
    box-shadow: var(--appica-shadow-sm);
}

.date-range-filter {
    padding: 4px;
    border: 1px solid var(--appica-border);
    border-radius: 999px;
    background: var(--appica-background);
}

.range-chip {
    min-height: 30px;
    border: 0;
    background: transparent;
    color: var(--appica-foreground-muted);
}

.range-chip:hover,
.range-chip.active {
    background: var(--appica-primary);
    color: #fff;
}

.table-wrap {
    border-radius: var(--appica-radius);
    background: var(--appica-background);
    box-shadow: var(--appica-shadow-sm);
}

table {
    font-size: 0.93rem;
}

th {
    height: 44px;
    color: var(--appica-foreground-subtle);
    background: var(--appica-background-subtle);
}

td {
    background: var(--appica-background);
}

tbody tr:hover td {
    background: var(--appica-background-subtle);
}

.sort-link {
    color: var(--appica-foreground-subtle);
}

.sort-link.active,
.sort-link:hover {
    color: var(--appica-secondary-emphasis);
}

.dropzone {
    min-height: 168px;
    border-color: oklch(0.623 0.214 259.815 / 32%);
    border-radius: var(--appica-radius);
    background:
        linear-gradient(180deg, oklch(1 0 0 / 95%), oklch(0.985 0.002 247.839 / 92%)),
        var(--appica-background-subtle);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 70%);
}

.dropzone:hover,
.dropzone.is-dragover {
    border-color: var(--appica-secondary-emphasis);
    background: var(--appica-info-soft);
    box-shadow: 0 0 0 4px var(--appica-ring), var(--appica-shadow-md);
}

.dropzone-kicker {
    color: var(--appica-secondary-emphasis);
}

.inventory-list .inventory-col-title {
    min-width: 460px;
    width: 40%;
}

.inventory-list .inventory-col-quantity {
    min-width: 76px;
    width: 86px;
}

.inventory-article-title {
    font-size: 0.97rem;
    color: var(--appica-foreground);
}

.inventory-article-description {
    color: var(--appica-foreground-muted);
}

.inventory-grid-quantity,
.inventory-grid-quantity .inventory-grid-input {
    max-width: 84px;
}

.inventory-quantity-control {
    border-color: var(--appica-border-strong);
    border-radius: var(--appica-radius-sm);
    background: var(--appica-background);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 72%), var(--appica-shadow-sm);
}

.inventory-quantity-input {
    border-color: var(--appica-border);
    color: var(--appica-foreground);
    background: var(--appica-background);
    text-align: center !important;
}

.inventory-quantity-input:focus {
    box-shadow: none;
}

.inventory-quantity-step {
    position: static;
    isolation: auto;
    overflow: visible;
    min-height: 0;
    border-color: transparent;
    background: var(--appica-background-subtle);
    color: var(--appica-foreground);
    box-shadow: none;
    transform: none;
}

.inventory-quantity-step::before {
    display: none;
}

.inventory-quantity-step:hover {
    background: var(--appica-info-soft);
    color: var(--appica-secondary-emphasis);
    box-shadow: none;
}

.inventory-quantity-step-plus {
    background: var(--appica-primary);
    color: #fff;
}

.inventory-quantity-step-plus:hover {
    background: var(--appica-primary-muted);
    color: #fff;
}

.expense-workbench,
.receipt-workbench {
    align-items: start;
}

.receipt-viewer {
    border-radius: var(--appica-radius);
    background: var(--appica-background-strong);
}

.ocr-panel,
.receipt-files-panel {
    box-shadow: var(--appica-shadow-sm);
}

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

@media (max-width: 820px) {
    .app-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .mobile-appbar {
        background: var(--appica-background-inverse);
        box-shadow: 0 1px 0 oklch(1 0 0 / 9%), var(--appica-shadow-md);
    }

    .sidebar {
        border-radius: var(--appica-radius);
        box-shadow: var(--appica-shadow-lg);
    }

    .content {
        padding: 18px 14px 28px;
    }

    .topbar {
        align-items: stretch;
    }

    .date-range-filter {
        border-radius: var(--appica-radius-sm);
    }

    .range-chip-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .range-chip {
        justify-content: center;
        border-radius: var(--appica-radius-xs);
    }

    .list-toolbar {
        align-items: stretch;
    }
}