:root { --lonc-ink: #1f2740; --lonc-muted: #667085; --lonc-primary: #1f4b99; --lonc-primary-dark: #163b7c; --lonc-accent: #ebf3ff; --lonc-surface: #ffffff; --lonc-background: #f4f7fb; --lonc-border: rgba(31, 39, 64, 0.08); --bs-primary: #1f4b99; --bs-primary-rgb: 31, 75, 153; --bs-body-color: #1f2740; --bs-body-bg: #f4f7fb; --bs-border-color: rgba(31, 39, 64, 0.08); --bs-font-sans-serif: "Avenir Next", "Segoe UI", sans-serif; } body { color: var(--lonc-ink); background: radial-gradient(circle at top left, rgba(90, 169, 255, 0.18), transparent 22%), linear-gradient(180deg, #f8fbff 0%, var(--lonc-background) 42%, #eef2f8 100%); } .app-shell { position: relative; } .app-footer { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); } .input-group-label-submit .input-group-text { background: rgba(255, 255, 255, 0.9); white-space: nowrap; } .label-actions-row .btn { white-space: nowrap; } .input-group-label-submit { width: auto; flex: 0 0 auto; } .input-group-label-submit .btn { white-space: nowrap; } .label-action-btn { white-space: nowrap !important; flex: 0 0 auto; min-width: max-content; } @media (min-width: 768px) { .label-actions-row { flex-wrap: nowrap !important; } .label-actions-primary { flex-wrap: nowrap !important; } } .brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.75rem; background: linear-gradient(135deg, var(--lonc-primary), #5da9ff); color: #fff; font-weight: 700; } .eyebrow { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; color: var(--lonc-primary); } .hero-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 243, 255, 0.92)), linear-gradient(135deg, rgba(93, 169, 255, 0.18), rgba(31, 75, 153, 0.08)); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 2rem; box-shadow: 0 24px 48px rgba(24, 42, 79, 0.08); } .glass-panel { border-radius: 1.5rem; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); } .quick-card, .kitchen-card { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; min-height: 100%; padding: 1.25rem; border-radius: 1.5rem; border: 1px solid var(--lonc-border); background: rgba(255, 255, 255, 0.88); color: inherit; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .quick-card:hover, .kitchen-card:hover, .clickable-row:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(24, 42, 79, 0.08); border-color: rgba(31, 75, 153, 0.2); } .quick-card-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lonc-primary); } .preview-frame, .empty-preview { min-height: 24rem; border-radius: 1.5rem; border: 1px dashed rgba(31, 75, 153, 0.22); background: linear-gradient(135deg, rgba(235, 243, 255, 0.88), rgba(255, 255, 255, 0.88)), repeating-linear-gradient( 45deg, transparent, transparent 12px, rgba(31, 75, 153, 0.04) 12px, rgba(31, 75, 153, 0.04) 24px ); } .preview-frame { display: grid; place-items: center; padding: 1rem; } .empty-preview { display: grid; place-items: center; text-align: center; color: var(--lonc-muted); padding: 2rem; } .status-chip { text-transform: capitalize; } .detail-grid dt, .detail-grid dd { padding-top: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 0; border-bottom: 1px solid var(--lonc-border); } .toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; width: min(24rem, calc(100vw - 2rem)); } .clear-field-button { position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); z-index: 2; text-decoration: none; font-size: 1.4rem; line-height: 1; padding: 0; background: transparent; } .search-suggestions-picker { z-index: 20; } .search-field-with-clear .search-clear-button { top: calc(50% + 1rem); } .text-field-with-clear .inline-clear-button { top: calc(50% + 1rem); } .text-field-with-clear .textarea-clear-button { top: 2.5rem; transform: none; } .location-field-with-clear .location-clear-button { top: 50%; } .location-picker { z-index: 20; } .quantity-unit-picker { z-index: 20; border-radius: 0.9rem; border: 1px solid var(--lonc-border); background: rgba(255, 255, 255, 0.96); } .expiration-days-picker { padding: 0.75rem; min-width: 18rem; width: max-content; max-width: min(22rem, calc(100vw - 2rem)); } .expiration-days-grid { display: grid; grid-template-columns: repeat(4, minmax(3.25rem, 1fr)); gap: 0.5rem; } .expiration-days-inline { padding: 0.85rem 0.9rem; border: 1px solid var(--lonc-border); border-radius: 1rem; background: rgba(255, 255, 255, 0.72); } .expiration-days-option { padding: 0.55rem 0.4rem; border-radius: 0.7rem; min-height: 2.75rem; white-space: nowrap; line-height: 1.1; } .expiration-days-option.active { color: #fff; background: var(--lonc-primary); border-color: var(--lonc-primary); } @media (max-width: 575.98px) { .expiration-days-picker { min-width: 0; width: min(100vw - 2rem, 18rem); } .expiration-days-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .expiration-days-grid-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .location-level-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; padding: 0.15rem 0.45rem; border-radius: 999px; background: rgba(31, 75, 153, 0.1); color: var(--lonc-primary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .grouped-field-with-clear { position: relative; } .grouped-field-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .stock-filter-reset { font-size: 0.95rem; color: var(--lonc-muted); } .stock-filter-reset:hover { color: var(--lonc-primary); } .stock-filter-hub { background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 255, 0.88)), linear-gradient(135deg, rgba(93, 169, 255, 0.1), rgba(31, 75, 153, 0.06)); } .stock-workspace { align-items: flex-start; } .stock-results-pane { min-width: 0; } .stock-filter-summary { padding: 0.85rem 0.95rem; border-radius: 0.9rem; border: 1px dashed rgba(31, 75, 153, 0.24); background: rgba(255, 255, 255, 0.7); min-height: 100%; } .stock-filter-rail .overview-list-locations { max-height: 18rem; } .stock-filter-rail .location-overview-columns { grid-template-columns: 1fr; } @media (min-width: 768px) and (max-width: 1199.98px) { .stock-filter-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .stock-filter-panels.stock-filter-panels-single-open { grid-template-columns: 1fr; } } @media (min-width: 1200px) { .stock-filter-rail .stock-filter-hub { position: sticky; top: 1rem; } } .stock-view-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .stock-view-switch-wrap { min-width: min(100%, 38rem); } .stock-view-tab { display: grid; align-content: start; gap: 0.2rem; text-align: left; border: 1px solid var(--lonc-border); border-radius: 0.9rem; background: rgba(255, 255, 255, 0.66); color: inherit; padding: 0.65rem 0.85rem; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease; } .stock-view-tab:hover { transform: translateY(-1px); border-color: rgba(31, 75, 153, 0.24); box-shadow: 0 8px 16px rgba(24, 42, 79, 0.08); } .stock-view-tab:focus-visible { outline: 2px solid rgba(31, 75, 153, 0.4); outline-offset: 2px; } .stock-view-tab-active { border-color: rgba(31, 75, 153, 0.42); background: rgba(31, 75, 153, 0.1); box-shadow: inset 0 0 0 1px rgba(31, 75, 153, 0.18); } .stock-view-tab-title { font-weight: 700; font-size: 0.95rem; } .stock-view-tab-subtitle { font-size: 0.78rem; color: var(--lonc-muted); } @media (max-width: 767.98px) { .stock-view-switch { grid-template-columns: 1fr; } } .overview-row-single-open > [class*='col-'] { width: 100%; } .overview-panel { align-self: flex-start; height: auto; } .stock-filter-panel-card { border: 1px solid var(--lonc-border); border-radius: 1rem; background: rgba(255, 255, 255, 0.84); } .stock-filter-panel-card[open] { box-shadow: 0 10px 24px rgba(24, 42, 79, 0.08); } .overview-summary { display: block; cursor: pointer; list-style: none; } .overview-summary::-webkit-details-marker { display: none; } .overview-list { display: grid; gap: 0.85rem; } .overview-list-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .overview-list-locations { max-height: 28rem; overflow-y: auto; padding-right: 0.35rem; } .location-overview-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .location-overview-column { display: grid; gap: 0.85rem; } .location-overview-group { display: grid; gap: 0.85rem; break-inside: avoid; } .overview-option { appearance: none; width: 100%; padding: 0.95rem 1rem; border-radius: 1rem; border: 1px solid var(--lonc-border); transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease, border-color 160ms ease, filter 160ms ease; } .overview-option:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(24, 42, 79, 0.08); } .overview-option:focus-visible { outline: 2px solid rgba(31, 75, 153, 0.4); outline-offset: 2px; } .overview-option-location { position: relative; } .location-overview-parent { padding: 0.95rem 1rem; } .location-overview-child { padding: 0.75rem 0.9rem; border-radius: 0.85rem; } .location-type-frozen { background: rgba(86, 156, 214, 0.14); } .location-type-refrigerated { background: rgba(80, 180, 140, 0.12); } .location-type-ambient { background: rgba(224, 176, 65, 0.14); } .location-type-unknown { background: rgba(108, 117, 125, 0.08); } .stock-filter-location-rail { position: absolute; left: 0.65rem; top: 0.65rem; bottom: 0.65rem; width: 2px; border-radius: 999px; background: rgba(31, 75, 153, 0.16); } @media (max-width: 575.98px) { .overview-list-split, .location-overview-columns { grid-template-columns: 1fr; } .overview-list-locations { max-height: 20rem; } } .legend-card { height: 100%; padding: 1rem; border-radius: 1rem; border: 1px solid var(--lonc-border); transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease, border-color 160ms ease, filter 160ms ease; } button.legend-card { appearance: none; width: 100%; } button.legend-card:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(24, 42, 79, 0.08); } button.legend-card:focus-visible { outline: 2px solid rgba(31, 75, 153, 0.4); outline-offset: 2px; } .legend-card-active { border-color: rgba(31, 75, 153, 0.35); box-shadow: 0 16px 28px rgba(24, 42, 79, 0.1); filter: saturate(1.05); } .legend-card-inactive { opacity: 0.45; filter: saturate(0.7); } .legend-expired, .expiration-expired { background: rgba(220, 53, 69, 0.1); } .legend-use-first, .expiration-use-first { background: rgba(253, 126, 20, 0.12); } .legend-upcoming, .expiration-upcoming { background: rgba(255, 193, 7, 0.14); } .legend-within-date, .expiration-within-date { background: rgba(25, 135, 84, 0.08); } .legend-none, .expiration-none { background: rgba(108, 117, 125, 0.08); } .expiration-badge-expired { background: #dc3545; color: #fff; } .expiration-badge-use-first { background: #fd7e14; color: #fff; } .expiration-badge-upcoming { background: #ffc107; color: #2f2a12; } .expiration-badge-within-date { background: #198754; color: #fff; } .expiration-badge-none { background: #6c757d; color: #fff; } .stock-review-table tbody tr td { vertical-align: top; transition: background-color 160ms ease; } .stock-review-table tbody tr.expiration-expired td { background: rgba(220, 53, 69, 0.08); } .stock-review-table tbody tr.expiration-use-first td { background: rgba(253, 126, 20, 0.1); } .stock-review-table tbody tr.expiration-upcoming td { background: rgba(255, 193, 7, 0.12); } .stock-review-table tbody tr.expiration-within-date td { background: rgba(25, 135, 84, 0.07); } .stock-review-table tbody tr.expiration-none td { background: rgba(108, 117, 125, 0.06); } .stock-review-table tbody tr td:first-child { border-left: 4px solid transparent; } .stock-review-table tbody tr.expiration-expired td:first-child { border-left-color: #dc3545; } .stock-review-table tbody tr.expiration-use-first td:first-child { border-left-color: #fd7e14; } .stock-review-table tbody tr.expiration-upcoming td:first-child { border-left-color: #ffc107; } .stock-review-table tbody tr.expiration-within-date td:first-child { border-left-color: #198754; } .stock-review-table tbody tr.expiration-none td:first-child { border-left-color: #6c757d; } .grouped-stock-card { border-left: 4px solid transparent; } .grouped-stock-summary { display: block; cursor: pointer; list-style: none; } .grouped-stock-summary-row { min-height: 0; } .grouped-stock-summary-title { font-size: 1.1rem; line-height: 1.2; } .grouped-stock-summary-description { margin: 0.12rem 0 0.35rem; } .grouped-stock-summary::-webkit-details-marker { display: none; } .grouped-stock-summary-meta { align-items: center; align-content: flex-start; column-gap: 0.95rem; row-gap: 0.08rem; line-height: 1.25; } .grouped-stock-summary-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.4rem 0.75rem; } .grouped-stock-secondary-details { border-top: 1px dashed rgba(31, 39, 64, 0.14); padding-top: 0.75rem; } .grouped-stock-secondary-toggle { border-radius: 0.85rem; border: 1px solid var(--lonc-border); padding: 0.5rem 0.75rem; background: rgba(255, 255, 255, 0.66); } .grouped-stock-secondary-toggle > summary { list-style: none; cursor: pointer; } .grouped-stock-secondary-toggle > summary::-webkit-details-marker { display: none; } .grouped-stock-toggle-label { color: var(--lonc-primary); font-size: 0.8rem; line-height: 1.1; } .grouped-stock-toggle-label::after { content: 'Expand'; margin-left: 0.25rem; } .grouped-stock-card[open] .grouped-stock-toggle-label::after { content: 'Hide'; } .grouped-stock-card.expiration-expired { border-left-color: #dc3545; } .grouped-stock-card.expiration-use-first { border-left-color: #fd7e14; } .grouped-stock-card.expiration-upcoming { border-left-color: #ffc107; } .grouped-stock-card.expiration-within-date { border-left-color: #198754; } .grouped-stock-card.expiration-none { border-left-color: #6c757d; } @media (min-width: 1200px) { .grouped-stock-summary-status { justify-content: flex-end; } } .grouped-stock-items { display: grid; gap: 0.55rem; } .grouped-stock-item { display: block; padding: 0.65rem 0.8rem; border-radius: 0.95rem; border: 1px solid var(--lonc-border); background: rgba(255, 255, 255, 0.72); color: inherit; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .grouped-stock-item:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(24, 42, 79, 0.08); border-color: rgba(31, 75, 153, 0.18); } .grouped-stock-item.expiration-soft-expired { background: rgba(220, 53, 69, 0.09); } .grouped-stock-item.expiration-soft-use-first { background: rgba(253, 126, 20, 0.1); } .grouped-stock-item.expiration-soft-upcoming { background: rgba(255, 193, 7, 0.11); } .grouped-stock-item.expiration-soft-within-date { background: rgba(25, 135, 84, 0.08); } .grouped-stock-item.expiration-soft-none { background: rgba(108, 117, 125, 0.08); } .grouped-stock-item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem; } .grouped-stock-item-main { min-width: 0; } .grouped-stock-item-title-line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; } .grouped-stock-item-name { font-size: 1rem; line-height: 1.2; } .grouped-stock-item-id { color: var(--lonc-muted); font-size: 0.8rem; } .grouped-stock-item-aux { display: grid; gap: 0.2rem; text-align: right; justify-items: end; white-space: nowrap; } .grouped-stock-item-actions { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .grouped-stock-item-link { font-size: 0.8rem; } .stock-item-link-disabled { pointer-events: none; opacity: 0.55; } .stock-item-refresh-indicator { color: rgba(31, 39, 64, 0.78) !important; font-weight: 600; margin-top: 0.15rem; } .stock-item-refreshing { opacity: 0.94; } .grouped-stock-mark-gone { padding: 0.2rem 0.55rem; line-height: 1.2; white-space: nowrap; } .grouped-stock-item-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .grouped-stock-subline-separator { color: var(--lonc-muted); } .grouped-stock-date-pair { display: inline-flex; align-items: center; gap: 0.45rem; } .grouped-stock-date-separator { color: var(--lonc-muted); font-weight: 700; } .grouped-stock-close-row { display: flex; justify-content: flex-end; margin-top: 0.2rem; padding-top: 0.2rem; border-top: 1px dashed rgba(31, 39, 64, 0.12); } .grouped-stock-close { padding: 0.1rem 0.2rem; font-size: 0.78rem; color: rgba(31, 39, 64, 0.82); line-height: 1.1; } .grouped-stock-close:hover { color: var(--lonc-primary-dark); } @media (max-width: 991.98px) { .grouped-stock-item-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .grouped-stock-item-actions { grid-column: 1 / -1; justify-content: space-between; padding-top: 0.15rem; } .grouped-stock-item-aux { text-align: left; justify-items: start; } } @media (max-width: 575.98px) { .grouped-stock-item { padding: 0.6rem 0.7rem; } .grouped-stock-item-row { grid-template-columns: 1fr; gap: 0.4rem; } .grouped-stock-item-aux { display: flex; flex-wrap: wrap; gap: 0.5rem; text-align: left; } .grouped-stock-item-title-line { gap: 0.45rem; } } .stock-review-card { border-left: 6px solid transparent; } .stock-review-card.expiration-expired { border-left-color: #dc3545; } .stock-review-card.expiration-use-first { border-left-color: #fd7e14; } .stock-review-card.expiration-upcoming { border-left-color: #ffc107; } .stock-review-card.expiration-within-date { border-left-color: #198754; } .stock-review-card.expiration-none { border-left-color: #6c757d; } .quick-edit-stack { min-width: 13rem; } .quick-select { min-width: 8rem; } .quick-number { max-width: 6rem; } .stock-guide-summary { list-style: none; cursor: pointer; } .stock-guide-summary::-webkit-details-marker { display: none; } .stock-filter-details summary { list-style: none; } .stock-filter-details summary::-webkit-details-marker { display: none; } .stock-filter-toolbar { position: relative; min-height: 3rem; } .stock-filter-panel { width: 100%; padding: 1rem; border-radius: 1rem; border: 1px solid var(--lonc-border); background: rgba(255, 255, 255, 0.75); } .stock-filter-clear { position: absolute; top: 0; right: 0; min-width: 5.5rem; } .clickable-row { cursor: pointer; } .scanner-modal-backdrop { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 1rem; background: rgba(16, 24, 40, 0.62); backdrop-filter: blur(2px); } .scanner-modal { width: min(40rem, 100%); border-radius: 1rem; } .scanner-video-shell { border-radius: 0.85rem; overflow: hidden; border: 1px solid rgba(31, 75, 153, 0.2); background: #0f172a; } .scanner-video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } @media (max-width: 991.98px) { .navbar { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.92) !important; } .hero-card, .quick-card, .kitchen-card, .preview-frame, .empty-preview { border-radius: 1.25rem; } .scanner-modal-backdrop { align-items: end; } .scanner-modal { width: 100%; margin-bottom: 0.75rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } }