/* Shared layout and interaction rules. Page colors use the tokens in app.css. */
html {
    color-scheme: light;
    scroll-padding-top: 9rem;
}

body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
img, video, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }

:focus-visible {
    outline: 3px solid var(--app-primary);
    outline-offset: 3px;
}

.app-shell :is(h1, h2, h3) { color: var(--app-text-primary); line-height: 1.25; }
h1 { font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight: 650; }
p { overflow-wrap: break-word; }
a { text-underline-offset: .2em; }

.skip-link {
    position: fixed;
    top: .75rem;
    left: 1rem;
    z-index: 1200;
    padding: .75rem 1rem;
    background: var(--app-primary);
    color: #fff;
    border-radius: var(--app-radius-sm);
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100dvh; }
.app-shell__header {
    height: 72px;
    gap: .75rem;
    padding: .75rem max(1.5rem, calc((100vw - 1280px) / 2));
    z-index: 40;
    box-shadow: 0 1px 0 var(--app-border);
}
.app-shell__home { flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--app-radius-sm); }
.app-shell__title { min-width: 0; font-size: 1.0625rem; letter-spacing: -.02em; }
.app-shell__title-short { display: none; }
.app-shell__user { min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--app-border); }
.app-shell__user-menu-panel { box-shadow: var(--app-shadow-lg); }
.app-shell__user-menu-link { min-height: 44px; }
.app-shell__main { min-width: 0; padding: 2rem 1.5rem 3rem; }
.app-shell__content { width: min(1280px, 100%); min-width: 0; }
.app-shell--embedded .app-shell__main { padding: 1rem; }
.app-shell .language-switcher__select { min-width: 0; width: 4rem; min-height: 44px; padding: .5rem; border-color: var(--app-border); }
.notification-menu { margin-right: 0; }
.notification-menu__button { width: 44px; height: 44px; border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); }
.notification-menu__button:hover { background: var(--app-surface-muted); }
.notification-menu__button svg { width: 22px; height: 22px; }
.notification-menu__panel { box-shadow: var(--app-shadow-lg); }

/* The same authorized links are visible on desktop and in the mobile tab bar. */
.primary-nav {
    position: sticky;
    top: 72px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem max(1.5rem, calc((100vw - 1280px) / 2));
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
}
.primary-nav:not(:has(a)) { display: none; }
.primary-nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .6rem 1rem;
    border-radius: var(--app-radius-sm);
    color: var(--app-text-muted);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}
.primary-nav__link:hover { background: var(--app-surface-muted); color: var(--app-primary); }
.primary-nav__link--active { background: var(--app-primary-soft); color: var(--app-primary-dark); }
.primary-nav__icon { display: flex; flex: 0 0 20px; width: 20px; height: 20px; }
.primary-nav__icon svg { width: 100%; height: 100%; }
.primary-nav__label { min-width: 0; }

.app-breadcrumb { margin-bottom: 1.5rem; font-size: .8125rem; }
.app-breadcrumb__item { min-width: 0; overflow-wrap: anywhere; }
.app-breadcrumb__current { color: var(--app-text-primary); }

.app-shell .home-page__intro { margin-bottom: 1.75rem; text-align: left; }
.app-shell .home-page__title { margin: 0; font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); }
.app-shell .home-page__subtitle { max-width: 55rem; margin: .5rem 0 0; }
.app-shell .home-page__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1rem; }
.app-shell .home-card, .app-shell .inventory-card, .app-shell .reports-index__card {
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
    text-decoration: none;
}
.app-shell .home-card:hover, .app-shell .inventory-card:hover {
    transform: translateY(-2px);
    border-color: var(--app-primary);
    box-shadow: var(--app-shadow-md);
}
.app-shell .home-card:focus-visible, .app-shell .inventory-card:focus-visible { outline: 3px solid var(--app-primary); outline-offset: 3px; }
.app-shell .home-card__icon, .app-shell .inventory-card__icon, .app-shell .reports-index__card-icon {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: var(--app-primary-soft);
    color: var(--app-primary);
}
.app-shell .home-card__icon svg, .app-shell .inventory-card__icon svg, .app-shell .reports-index__card-icon svg { width: 24px; height: 24px; color: inherit; }
.app-shell .home-card__label, .app-shell .inventory-card__label { text-align: left; font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.app-shell .inventory-page__topbar, .app-shell .inventory-detail { border: 1px solid var(--app-border); border-radius: var(--app-radius); }

/* Bootstrap, native fields and MudBlazor retain their own layout semantics. */
.app-shell :is(input:not([type]), input[type="text"], input[type="search"], input[type="password"],
    input[type="email"], input[type="tel"], input[type="number"], input[type="date"],
    input[type="time"], input[type="datetime-local"], select, textarea, .form-control):not(.mud-input-slot) {
    max-width: 100%;
    min-height: 44px;
    border-color: var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    background-color: var(--app-surface);
    color: var(--app-text-primary);
    font-size: 1rem;
}
input[type="checkbox"], input[type="radio"] { padding: 0; accent-color: var(--app-primary); }
input[type="range"] { padding: 0; border: 0; box-shadow: none; }
input:disabled, select:disabled, textarea:disabled { background-color: var(--app-surface-muted); cursor: not-allowed; }
.app-shell .form-floating > .form-control { min-height: calc(3.5rem + 2px); }
.app-shell .form-floating > .form-control::placeholder { color: transparent; }
.app-shell .form-floating > .form-control:focus::placeholder { color: var(--app-text-subtle); text-align: start; }
.app-shell .form-control:focus, select:focus, textarea:focus { border-color: var(--app-primary); box-shadow: 0 0 0 3px var(--app-primary-soft); }
.app-shell .form-check { min-height: 44px; display: flex; align-items: center; gap: .6rem; }
.app-shell .form-check .form-check-input { margin-top: 0; flex-shrink: 0; }
.app-shell .btn { min-height: 44px; padding: .625rem 1rem; border-radius: var(--app-radius-sm); font-weight: 600; }
.app-shell .btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-dark); --bs-btn-hover-border-color: var(--app-primary-dark); --bs-btn-active-bg: var(--app-primary-dark); }
.app-shell .btn-primary:disabled { background: var(--app-primary); border-color: var(--app-primary); opacity: .55; }
.app-shell .auth-page { padding: clamp(1rem, 5vw, 3rem) 0; }
.app-shell .auth-card { width: min(440px, 100%); border: 1px solid var(--app-border); border-radius: var(--app-radius); padding: clamp(1.25rem, 4vw, 2rem); box-shadow: var(--app-shadow-md); }
.app-shell .auth-card .d-flex { flex-wrap: wrap; gap: .5rem; }
.app-shell .auth-card .link-button { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 0; font-size: .875rem; }

/* Keep wide data within its own scroll region, rather than scrolling the page. */
.app-shell :is([class$="__table-wrapper"], [class$="-table-wrapper"], .table-responsive, .movement-summary__table-wrap) {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-color: var(--app-border);
    scrollbar-width: thin;
    scrollbar-color: var(--app-border-strong) transparent;
}
.app-shell .mud-table-container { max-width: 100%; min-width: 0; overflow-x: auto; }
.app-shell :is(.product-list__table, .storage-products__table) .mud-table-root { min-width: 36rem; }
.app-shell .mud-table-cell { font-size: .875rem; line-height: 1.5; }
.app-shell .mud-table-dense .mud-table-row .mud-table-cell { padding: .625rem .875rem; }
.app-shell .mud-table thead th { background: var(--app-surface-muted); color: var(--app-text-muted); }
.app-shell .mud-table tbody tr:nth-child(odd) { background: var(--app-surface); }
.app-shell .mud-table tbody tr:nth-child(even) { background: #f8fafc; }
.app-shell .mud-table tbody tr:hover { background: var(--app-primary-soft); }
.app-shell .table { --bs-table-color: var(--app-text-primary); --bs-table-border-color: var(--app-border); --bs-table-striped-bg: var(--app-surface-muted); --bs-table-hover-bg: var(--app-primary-soft); font-size: .875rem; }
.app-shell .table > :not(caption) > * > * { padding: .75rem 1rem; }
.app-shell .table thead th { background: var(--app-surface-muted); color: var(--app-text-muted); font-weight: 600; }

/* Page headers, actions and filters share the same rhythm. */
.app-shell :is(.issue-page, .transfer-page, .inventory-summary, .storage-products, .reports-index, .sale-report,
    .inventory-history, .loan-report, .report-by-user, .report-by-user-list, .product-list, .scan-page, .pos-page,
    .inventory-report, .storages-page, .print-devices, .exchange-rates, .settings-page, .movement-summary) {
    padding: 0;
    min-width: 0;
}
.app-shell :is(.intake-page__header, .issue-page__header, .transfer-page__header, .storage-products__header,
    .reports-index__header, .scan-page__header) { text-align: left; gap: .5rem; }
.app-shell :is(.intake-page__title, .issue-page__title, .transfer-page__title, .storage-products__title,
    .reports-index__title, .pos-page__title, .issue-history__title) { font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); letter-spacing: -.025em; }
.app-shell :is(.issue-template, .intake-step, .transfer-step, .pos-section, .home-pie, .sale-chart,
    .inventory-chart, .home-analytics__controls, .ai-search-box, .count-page, .product-detail) {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
}
.app-shell :is(.reports-index__card, .home-stat-card, .product-card, .users-card) { border-radius: var(--app-radius); box-shadow: var(--app-shadow-sm); }
.app-shell :is(.pos-page__header, .pos-section__header, .product-list__top-bar, .ai-search-result__header, .count-detail__header) { flex-wrap: wrap; }
.app-shell :is(.issue-button, .transfer-button, .intake-button, .count-button, .inventory-summary__button,
    .reports-index__quick-button, .product-list__view-button, .product-list__filter-clear,
    .pos-button, .sale-view__print-button, .users-page__add, .ai-search-box__button, .product-list__tab) { min-height: 44px; }
.app-shell .product-list__tab { border-color: var(--app-border-strong); background: var(--app-surface); color: var(--app-text-muted); border-radius: var(--app-radius-sm); }
.app-shell .product-list__tab--active { border-color: var(--app-primary); background: var(--app-primary-soft); color: var(--app-primary-dark); }
.app-shell :is(.discount-page__column, .users-editor, .settings-section, .user-settings-item) { min-width: 0; }
.app-shell .discount-page__column { border: 1px solid var(--app-border); box-shadow: var(--app-shadow-sm); }
.app-shell .product-list__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.app-shell :is(.user-logs-pagination button, .discount-campaign-actions button) { min-width: 44px; min-height: 44px; }
.app-shell .home-analytics__item, .app-shell .home-stat-card__value-block { min-width: 0; }
.app-shell .home-analytics__row--secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-shell .inventory-summary--fullscreen { padding: 1.25rem; }
.app-shell .storage-item { border: 1px solid var(--app-border); box-shadow: var(--app-shadow-sm); }
.app-shell .home-stat-card__value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.app-shell .reports-index__quick-ranges, .app-shell .reports-index__date-picker { justify-content: flex-start; }

/* Native dialogs and photo/detail overlays must stay inside the visible viewport. */
.app-shell :is(.count-modal, .discount-modal__panel, .product-list__modal-content, .pos-modal__content) {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.app-shell .product-list__modal-frame { width: min(1100px, 100%); height: min(850px, calc(100dvh - 5rem)); }
.app-shell .product-list__modal-close, .app-shell .product-list__modal-close--outside { width: 44px; height: 44px; }
.app-shell .product-list__modal-close--outside { top: -3rem; }
.app-toast__close { display: grid; place-items: center; min-width: 44px; min-height: 44px; }

@media (max-width: 1023.98px) {
    .app-shell .home-analytics__row--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-shell .home-analytics__row--secondary .home-analytics__item:last-child { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    html { scroll-padding-top: 5rem; }
    .app-shell__header { height: 64px; gap: .5rem; padding: .625rem 1rem; }
    .app-shell__header { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
    .app-shell__title-full { display: none; }
    .app-shell__title-short { display: inline; }
    .app-shell__title { font-size: 1rem; white-space: nowrap; }
    .app-shell__user { padding: .5rem; }
    .app-shell__user-name { max-width: 5.5rem; font-size: .8125rem; }
    .app-shell__main { padding: 1.25rem 1rem calc(6rem + env(safe-area-inset-bottom)); }
    .app-shell__main { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
    .app-shell--embedded .app-shell__main { padding: .75rem; }
    .app-breadcrumb { margin-bottom: 1.25rem; }
    .primary-nav {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: .125rem;
        padding: .375rem .5rem calc(.375rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--app-border);
        border-bottom: 0;
        box-shadow: 0 -4px 16px rgb(15 23 42 / .06);
        padding-left: max(.5rem, env(safe-area-inset-left));
        padding-right: max(.5rem, env(safe-area-inset-right));
    }
    .primary-nav__link { flex-direction: column; gap: .25rem; min-width: 0; min-height: 56px; padding: .4rem .125rem; font-size: .6875rem; text-align: center; letter-spacing: -.025em; }
    .primary-nav__label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .primary-nav__icon { flex-basis: 22px; width: 22px; height: 22px; }
    .notification-menu__panel { position: fixed; top: 72px; right: 1rem; left: 1rem; width: auto; max-height: calc(100dvh - 10rem); }
    .app-shell .home-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .app-shell .reports-index__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .app-shell .home-card, .app-shell .inventory-card, .app-shell .reports-index__card { padding: 1rem; gap: .75rem; }
    .app-shell .reports-index__card-label { font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
    .app-shell .home-analytics__row--secondary { grid-template-columns: minmax(0, 1fr); }
    .app-shell .home-analytics__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .app-shell .home-analytics__field, .app-shell .home-analytics__input { min-width: 0; width: 100%; }
    .app-shell .home-analytics__field { font-size: .8125rem; }
    .app-shell .home-analytics__input { padding: .5rem; }
    .app-shell .home-stat-card { padding: 1rem; }
    .app-shell .home-stat-card__value { font-size: clamp(1.125rem, 4vw, 1.5rem); }
    .app-shell .inventory-summary__toolbar-group { width: 100%; min-width: 0; flex-wrap: wrap; }
    .app-shell .inventory-summary__search-input { width: 100%; min-width: 0; }
    .app-shell .inventory-summary__actions { flex-wrap: wrap; }
    .app-shell .inventory-summary--fullscreen { padding: 1rem; }
    .app-shell .product-list__filter { width: 100%; }
    .app-shell .product-list__filter-select { flex: 1 1 12rem; min-width: 0; }
    .app-shell .product-list__view-toggle { width: 100%; }
    .app-shell .product-list__view-button { flex: 1; }
    .app-shell .reports-index__date-field { flex: 1 1 9rem; min-width: 0; }
    .app-shell .reports-index__date-input { width: 100%; min-width: 0; padding: .5rem .625rem; }
    .app-shell .reports-index__date-separator { display: none; }
    .app-shell .intake-scan__summary, .app-shell .transfer-scan__summary { width: 100%; min-width: 0; }
    .app-shell .issue-scan__row { flex-wrap: wrap; }
    .app-shell .issue-scan__row input { flex-basis: 100%; }
    .app-shell .issue-scan__row button { flex: 1; min-width: 0; }
    .app-shell .product-detail { padding: 1rem; }
    .app-shell .product-detail__summary { min-width: 0; width: 100%; }
    .app-shell .product-detail__storages { min-width: 0; }
    .app-shell :is(.users-page, .discount-page, .ai-history-layout) { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .app-shell .discount-page__column { padding: 1rem; }
    .app-shell .ai-feature-requests__header { flex-wrap: wrap; }
    .app-shell .ai-feature-requests__header > div { min-width: 0; }
    .app-shell .count-create__grid { grid-template-columns: minmax(0, 1fr); }
    .app-shell .count-create__actions { flex-wrap: wrap; }
    .app-shell .count-modal { padding: 1rem; }
    .app-toast-container { inset: auto 0 calc(5.25rem + env(safe-area-inset-bottom)) 0; padding: 0 1rem; }
    .app-toast { min-width: 0; max-width: 100%; }
    #blazor-error-ui { bottom: calc(5.25rem + env(safe-area-inset-bottom)); right: 1rem; width: calc(100% - 2rem); }
}

@media (max-width: 359.98px) {
    .app-shell__header { padding-inline: .75rem; gap: .375rem; }
    .app-shell__user-name { max-width: 3.5rem; }
    .app-shell__user-caret { display: none; }
    .app-shell .language-switcher__select { width: 3.25rem; }
    .app-shell .home-page__grid { grid-template-columns: minmax(0, 1fr); }
    .app-shell .home-stat__grid { grid-template-columns: minmax(0, 1fr); }
}

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

@media print {
    .app-shell__header, .primary-nav, .skip-link, .app-breadcrumb, .app-toast-container, #blazor-error-ui { display: none !important; }
    .app-shell__main { padding: 0; }
    .app-shell__content { width: 100%; }
    body { background: #fff; }
}