/* * Palettes. Light lives on :root, dark on :root[data-theme="dark"]. * wwwroot/js/theme.js resolves the preference (auto / light / dark) and stamps * data-theme on from , before first paint. */ :root { --me-radius: 18px; --me-radius-sm: 12px; --mobile-nav-height: 76px; --me-color-scheme: light; --me-bg: #f2f5f6; --me-surface: #ffffff; --me-surface-2: #f6f8f9; --me-surface-3: #eaeff0; --me-border: #d8e0e2; --me-border-soft: #e6ebed; --me-border-strong: #c2ccce; --me-text: #10191b; --me-text-soft: #33454a; --me-muted: #5f6f73; --me-muted-dim: #8b9a9d; --me-placeholder: #93a1a4; --me-accent: #0a7480; --me-accent-strong: #086670; --me-accent-soft: rgba(10, 116, 128, .10); --me-accent-ring: rgba(10, 116, 128, .18); --me-accent-line: rgba(10, 116, 128, .28); --me-on-accent: #ffffff; --me-success: #1b9d6b; --me-success-text: #0f7a51; --me-success-soft: rgba(27, 157, 107, .12); --me-danger: #d64550; --me-danger-text: #b3202e; --me-danger-soft: rgba(214, 69, 80, .10); --me-warning: #b9750d; --me-neutral-text: #4d5c60; --me-neutral-soft: rgba(95, 111, 115, .12); --me-favorite: #d94452; --me-favorite-soft: rgba(217, 68, 82, .14); --me-sidebar-bg: #ffffff; --me-topbar-bg: rgba(255, 255, 255, .92); --me-bottombar-bg: rgba(255, 255, 255, .97); --me-floating-bg: rgba(255, 255, 255, .98); --me-toast-bg: #ffffff; --me-row-hover: rgba(16, 25, 27, .03); --me-mark-hole: #ffffff; --me-visual-a: #dfe7e9; --me-visual-b: #eff3f4; --me-visual-sheen: rgba(255, 255, 255, .55); --me-visual-icon-bg: rgba(16, 25, 27, .06); --me-visual-icon-border: rgba(16, 25, 27, .08); --me-visual-icon-fg: rgba(16, 25, 27, .62); --me-code-bg: rgba(255, 255, 255, .82); --me-code-fg: #3d4d51; --me-chip-bg: rgba(255, 255, 255, .84); --me-chip-border: rgba(16, 25, 27, .10); --me-chip-fg: #55686c; --me-cat-vedella: linear-gradient(135deg, #f0dcdd, #f8eeee); --me-cat-porc: linear-gradient(135deg, #efdfe3, #f8f0f2); --me-cat-pollastre: linear-gradient(135deg, #f1e8d5, #f9f4ea); --me-cat-elaborats: linear-gradient(135deg, #dee5ef, #eff3f8); --me-cat-altres: linear-gradient(135deg, #e0e9df, #f0f4ef); --me-accent-card: linear-gradient(135deg, rgba(10, 116, 128, .16), rgba(10, 116, 128, .05)); --me-backdrop-opacity: .4; --me-shadow: 0 18px 48px rgba(16, 25, 27, .12); --me-select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235f6f73' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } :root[data-theme="dark"] { --me-color-scheme: dark; --me-bg: #090b0c; --me-surface: #111415; --me-surface-2: #171a1b; --me-surface-3: #1d2122; --me-border: #2a3032; --me-border-soft: #202527; --me-border-strong: #3a4244; --me-text: #f7f8f8; --me-text-soft: #d8ddde; --me-muted: #9aa4a7; --me-muted-dim: #687275; --me-placeholder: #737e81; --me-accent: #0798a5; --me-accent-strong: #0bb0bd; --me-accent-soft: rgba(7, 152, 165, .14); --me-accent-ring: rgba(7, 152, 165, .16); --me-accent-line: rgba(11, 176, 189, .36); --me-on-accent: #ffffff; --me-success: #2fbe85; --me-success-text: #73d7b0; --me-success-soft: rgba(47, 190, 133, .12); --me-danger: #ef5a61; --me-danger-text: #ff9aa0; --me-danger-soft: rgba(239, 90, 97, .12); --me-warning: #e5a440; --me-neutral-text: #c4cdd0; --me-neutral-soft: rgba(154, 164, 167, .13); --me-favorite: #ff8e99; --me-favorite-soft: rgba(96, 27, 36, .55); --me-sidebar-bg: #101314; --me-topbar-bg: rgba(9, 11, 12, .92); --me-bottombar-bg: rgba(13, 16, 17, .97); --me-floating-bg: rgba(20, 24, 25, .97); --me-toast-bg: #171b1c; --me-row-hover: rgba(255, 255, 255, .025); --me-mark-hole: #090b0c; --me-visual-a: #243034; --me-visual-b: #151a1c; --me-visual-sheen: rgba(255, 255, 255, .09); --me-visual-icon-bg: rgba(255, 255, 255, .07); --me-visual-icon-border: rgba(255, 255, 255, .08); --me-visual-icon-fg: rgba(255, 255, 255, .82); --me-code-bg: rgba(0, 0, 0, .42); --me-code-fg: #d9dfe0; --me-chip-bg: rgba(8, 10, 11, .58); --me-chip-border: rgba(255, 255, 255, .12); --me-chip-fg: #d6dcdd; --me-cat-vedella: linear-gradient(135deg, #41272a, #201719); --me-cat-porc: linear-gradient(135deg, #3d2c32, #1f181b); --me-cat-pollastre: linear-gradient(135deg, #3e3525, #211d16); --me-cat-elaborats: linear-gradient(135deg, #2a3340, #171b21); --me-cat-altres: linear-gradient(135deg, #2d382c, #171d17); --me-accent-card: linear-gradient(135deg, rgba(7, 152, 165, .28), rgba(7, 152, 165, .10)); --me-backdrop-opacity: .74; --me-shadow: 0 18px 48px rgba(0, 0, 0, .25); --me-select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa4a7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } html { color-scheme: var(--me-color-scheme); } * { box-sizing: border-box; } html, body { min-height: 100%; background: var(--me-bg); color: var(--me-text); } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } /* Bootstrap's `a:hover{color:#0a58ca}` outranks a bare `a` rule, so the reset has to cover the interactive states too or links flash Bootstrap blue. */ a, a:hover, a:focus { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } svg.lucide { width: 20px; height: 20px; flex: 0 0 auto; } .min-w-0 { min-width: 0; } .text-secondary { color: var(--me-muted) !important; } /* Bootstrap ships .btn as inline-block, which baseline-aligns any inline SVG icon inside it and drags the label off-centre. Centre both axes instead. */ .btn { min-height: 44px; border-radius: 11px; font-weight: 650; border-width: 1px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; } .btn-lg { min-height: 50px; font-size: 1rem; } .btn-primary { background: var(--me-accent); border-color: var(--me-accent); color: var(--me-on-accent); } .btn-primary:hover, .btn-primary:focus { background: var(--me-accent-strong); border-color: var(--me-accent-strong); color: var(--me-on-accent); } /* Bootstrap's own .btn-primary.disabled / :disabled rule carries the stock blue and outranks .btn-primary on specificity, so restate the disabled state. */ .btn-primary.disabled, .btn-primary:disabled { background: var(--me-accent); border-color: var(--me-accent); color: var(--me-on-accent); } .btn-outline-light { border-color: var(--me-border); color: var(--me-text); } .btn-outline-light:hover { background: var(--me-surface-3); border-color: var(--me-border-strong); } .btn-outline-light.disabled, .btn-outline-light:disabled { background: transparent; border-color: var(--me-border); color: var(--me-muted); } .form-control, .form-select { color: var(--me-text); background-color: var(--me-surface-2); border: 1px solid var(--me-border); border-radius: 11px; min-height: 46px; } .form-control:focus, .form-select:focus { color: var(--me-text); background-color: var(--me-surface-2); border-color: var(--me-accent); box-shadow: 0 0 0 3px var(--me-accent-ring); } .form-select { background-image: var(--me-select-caret); } .form-check-input { background-color: var(--me-surface-3); border-color: var(--me-border-strong); } .form-check-input:checked { background-color: var(--me-accent); border-color: var(--me-accent); } .form-label { color: var(--me-text-soft); font-size: .88rem; font-weight: 650; } .app-shell { min-height: 100vh; } .app-main { min-height: 100vh; } .page-container { width: 100%; max-width: 1540px; margin: 0 auto; padding: 24px 16px calc(var(--mobile-nav-height) + 32px); } .mobile-topbar { position: sticky; top: 0; z-index: 1020; height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--me-border-soft); background: var(--me-topbar-bg); backdrop-filter: blur(16px); } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand-mark { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; background: transparent; border: 5px solid var(--me-accent); color: transparent; position: relative; font-size: 0; } .brand-mark::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--me-mark-hole); } .brand-copy { display: flex; flex-direction: column; line-height: 1.1; } .brand-copy strong { font-size: .95rem; letter-spacing: .01em; } .brand-copy small { color: var(--me-muted); margin-top: 4px; font-size: .74rem; } .brand.compact .brand-mark { width: 34px; height: 34px; border-width: 4px; } .icon-button { width: 42px; height: 42px; padding: 0; border: 1px solid var(--me-border); background: var(--me-surface-2); color: var(--me-text); border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; } .icon-button:hover { background: var(--me-surface-3); } .icon-button.subtle { background: transparent; } .mobile-bottom-nav { position: fixed; z-index: 1030; left: 0; right: 0; bottom: 0; height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--me-border); background: var(--me-bottombar-bg); backdrop-filter: blur(18px); } .mobile-bottom-nav > a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--me-muted); font-size: .72rem; } .mobile-bottom-nav > a.active { color: var(--me-accent-strong); } .bottom-nav-primary { width: 38px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--me-accent); color: var(--me-on-accent); } .mobile-bottom-nav a:nth-child(2) { color: var(--me-text); } .desktop-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1030; width: 260px; flex-direction: column; padding: 20px 16px; border-right: 1px solid var(--me-border-soft); background: var(--me-sidebar-bg); } .desktop-sidebar .brand { padding: 2px 8px 20px; } .desktop-sidebar .store-switch { margin-bottom: 18px; } .store-pill { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--me-border); background: var(--me-surface-2); border-radius: 13px; color: var(--me-text); text-align: left; } .store-pill:hover { border-color: var(--me-border-strong); } /* A single store means there is nothing to switch between. */ .store-switch.single .store-pill { pointer-events: none; } .store-switch.single .store-pill-caret { display: none; } .store-pill-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: var(--me-accent-soft); color: var(--me-accent-strong); } .store-pill small { color: var(--me-muted); display: block; font-size: .68rem; } .store-pill strong { font-size: .85rem; } .store-pill-caret { margin-left: auto; width: 18px; height: 18px; color: var(--me-muted); } .app-dropdown { width: 100%; min-width: 232px; margin-top: 6px; padding: 6px; border: 1px solid var(--me-border); border-radius: 13px; background: var(--me-surface); box-shadow: var(--me-shadow); } .app-dropdown-item { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--me-text); text-align: left; } .app-dropdown-item:hover { background: var(--me-surface-2); } .app-dropdown-item.active { background: var(--me-accent-soft); color: var(--me-accent-strong); } .app-dropdown-item svg { margin-left: auto; width: 17px; height: 17px; } .app-dropdown-copy { min-width: 0; } .app-dropdown-copy strong, .app-dropdown-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-dropdown-copy strong { font-size: .85rem; } .app-dropdown-copy small { color: var(--me-muted); font-size: .68rem; margin-top: 2px; } .sidebar-nav { display: flex; flex-direction: column; gap: 4px; } .nav-item, .mobile-menu-link { min-height: 46px; border-radius: 11px; padding: 0 12px; display: flex; align-items: center; gap: 12px; color: var(--me-text-soft); } .nav-item:hover, .nav-item.active { color: var(--me-text); background: var(--me-accent-soft); } .nav-item.active { color: var(--me-accent-strong); } .nav-section { margin: 20px 12px 7px; color: var(--me-muted-dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; } .sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--me-border-soft); } .nav-button, .btn-reset { width: 100%; border: 0; text-align: left; background: transparent; } .language-switcher { display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--me-surface-2); border: 1px solid var(--me-border); } .language-switcher a { min-width: 34px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--me-muted); font-size: .72rem; font-weight: 700; } .language-switcher a.active { background: var(--me-accent); color: var(--me-on-accent); } .theme-switcher { display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--me-surface-2); border: 1px solid var(--me-border); } .theme-switcher button { width: 34px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--me-muted); } .theme-switcher button svg { width: 16px; height: 16px; } .theme-switcher button:hover { color: var(--me-text); } .theme-switcher button.active { background: var(--me-accent); color: var(--me-on-accent); } .sidebar-switchers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 12px 10px; } .page-heading, .order-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; } .page-heading h1, .order-page-head h1 { margin: 0; font-size: clamp(1.85rem, 5vw, 2.5rem); letter-spacing: -.04em; font-weight: 760; } .page-heading p { max-width: 640px; } .compact-heading { margin-bottom: 18px; } .eyebrow { display: inline-block; margin-bottom: 6px; color: var(--me-accent-strong); font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 750; } .dashboard-grid { display: grid; gap: 16px; } .action-card { min-height: 112px; padding: 20px; display: flex; align-items: center; gap: 14px; border-radius: var(--me-radius); background: var(--me-surface-2); border: 1px solid var(--me-border); } .action-card-primary { background: var(--me-accent-card); border-color: var(--me-accent-line); } .action-card:hover { border-color: var(--me-accent); } .action-card-icon, .stat-icon, .recent-order-icon, .empty-icon, .admin-row-icon, .review-store-icon, .confirm-icon { width: 46px; height: 46px; display: inline-grid; place-items: center; border-radius: 13px; background: var(--me-accent-soft); color: var(--me-accent-strong); } .action-card strong { display: block; font-size: 1.08rem; } .action-card small { display: block; color: var(--me-muted); margin-top: 3px; } .action-card-arrow { margin-left: auto; color: var(--me-muted); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat-card { min-width: 0; padding: 14px 12px; border-radius: 15px; border: 1px solid var(--me-border); background: var(--me-surface); } .stat-icon { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px; } .stat-icon svg { width: 17px; height: 17px; } .stat-icon.success { color: var(--me-success); background: var(--me-success-soft); } .stat-value { display: block; font-size: 1.65rem; font-weight: 760; letter-spacing: -.04em; } .stat-label { display: block; color: var(--me-muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .content-card { border-radius: var(--me-radius); border: 1px solid var(--me-border); background: var(--me-surface); padding: 18px; } .content-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .content-card-header h2 { margin: 0; font-size: 1.2rem; font-weight: 720; } .text-link { color: var(--me-accent-strong); font-size: .87rem; font-weight: 650; } .text-link:hover { color: var(--me-accent-strong); text-decoration: underline; } .recent-orders-list { display: flex; flex-direction: column; } .recent-order-row { min-height: 70px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--me-border-soft); } .recent-order-row:first-child { border-top: 0; } .recent-order-row:hover { background: var(--me-row-hover); } .recent-order-icon { width: 38px; height: 38px; border-radius: 11px; } .recent-order-main { min-width: 0; flex: 1; } .recent-order-main strong, .recent-order-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent-order-main strong { font-size: .9rem; } .recent-order-main small { color: var(--me-muted); margin-top: 3px; font-size: .74rem; } .recent-order-arrow { color: var(--me-muted-dim); } .status-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; } .status-badge.sent { color: var(--me-success-text); background: var(--me-success-soft); } .status-badge.draft { color: var(--me-neutral-text); background: var(--me-neutral-soft); } .status-badge.error { color: var(--me-danger-text); background: var(--me-danger-soft); } .status-dot { color: var(--me-success-text); background: var(--me-success-soft); padding: 5px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; } .store-meta { display: grid; gap: 11px; color: var(--me-muted); } .store-meta > div { display: flex; align-items: center; gap: 10px; } .empty-state, .cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--me-muted); gap: 7px; } .empty-state { min-height: 190px; } .empty-state strong { color: var(--me-text); } .empty-state small { max-width: 320px; } .product-toolbar, .history-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .search-field { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--me-border); border-radius: 12px; background: var(--me-surface-2); color: var(--me-muted); } .search-field:focus-within { border-color: var(--me-accent); box-shadow: 0 0 0 3px var(--me-accent-ring); } .search-field input { width: 100%; min-width: 0; color: var(--me-text); border: 0; outline: 0; background: transparent; } .search-field input::placeholder { color: var(--me-placeholder); } .search-clear { border: 0; padding: 3px; background: transparent; color: var(--me-muted); } .filter-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .filter-pills::-webkit-scrollbar { display: none; } .filter-pill { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; border: 1px solid var(--me-border); border-radius: 999px; background: var(--me-surface-2); color: var(--me-text-soft); font-weight: 650; } .filter-pill svg { width: 16px; height: 16px; } .filter-pill.active { border-color: var(--me-accent-line); background: var(--me-accent-soft); color: var(--me-accent-strong); } .order-head-actions { display: inline-flex; border: 1px solid var(--me-border); background: var(--me-surface-2); border-radius: 11px; padding: 3px; } .view-toggle { width: 38px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; color: var(--me-muted); background: transparent; } .view-toggle.active { color: var(--me-text); background: var(--me-surface-3); } .section-label-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--me-text-soft); font-size: .82rem; } .section-label-row small { color: var(--me-muted); } .order-layout { display: grid; gap: 18px; } .product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .product-card { overflow: hidden; border-radius: 15px; border: 1px solid var(--me-border); background: var(--me-surface); transition: border-color .15s ease, transform .15s ease; } .product-card.selected { border-color: var(--me-accent); box-shadow: inset 0 0 0 1px var(--me-accent-line); } .product-visual { position: relative; min-height: 112px; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, var(--me-visual-sheen), transparent 36%), linear-gradient(135deg, var(--me-visual-a), var(--me-visual-b)); } .product-visual.category-vedella { background: var(--me-cat-vedella); } .product-visual.category-porc { background: var(--me-cat-porc); } .product-visual.category-pollastre { background: var(--me-cat-pollastre); } .product-visual.category-elaborats { background: var(--me-cat-elaborats); } .product-visual.category-altres { background: var(--me-cat-altres); } .product-visual-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--me-visual-icon-fg); background: var(--me-visual-icon-bg); border: 1px solid var(--me-visual-icon-border); } .product-visual-icon svg { width: 28px; height: 28px; } .product-code { position: absolute; left: 10px; bottom: 9px; padding: 4px 7px; border-radius: 7px; background: var(--me-code-bg); color: var(--me-code-fg); font-size: .65rem; font-weight: 700; } .favorite-button { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--me-chip-border); border-radius: 11px; background: var(--me-chip-bg); color: var(--me-chip-fg); } .favorite-button.active { color: var(--me-favorite); background: var(--me-favorite-soft); } .favorite-button.active svg { fill: currentColor; } .product-card-body { padding: 12px; } .product-badges { min-height: 19px; display: flex; gap: 5px; margin-bottom: 5px; } .product-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--me-muted); font-size: .62rem; font-weight: 700; } .product-badge.favorite { color: var(--me-favorite); } .product-badge svg { width: 12px; height: 12px; } .product-card h3 { min-height: 40px; margin: 0; font-size: .88rem; line-height: 1.25; font-weight: 700; } .product-card p { margin: 5px 0 10px; color: var(--me-muted); font-size: .7rem; } .product-add { width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .product-add svg { width: 17px; height: 17px; } .quantity-control { height: 44px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: stretch; border: 1px solid var(--me-accent-line); background: var(--me-accent-soft); border-radius: 11px; overflow: hidden; } .quantity-control button { border: 0; background: transparent; color: var(--me-accent-strong); } .quantity-control button:active { background: var(--me-accent-ring); } .quantity-input-wrap { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 3px; } .quantity-input-wrap input { width: 52px; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--me-text); text-align: right; font-weight: 750; } .quantity-input-wrap small { color: var(--me-muted); font-size: .66rem; } .product-grid.list-mode { grid-template-columns: 1fr; } .product-grid.list-mode .product-card { display: grid; grid-template-columns: 86px minmax(0, 1fr); } .product-grid.list-mode .product-visual { min-height: 100%; } .product-grid.list-mode .product-code { display: none; } .product-grid.list-mode .product-visual-icon { width: 42px; height: 42px; } .product-grid.list-mode .favorite-button { width: 34px; height: 34px; top: 7px; right: 7px; } .product-grid.list-mode .product-card-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .product-grid.list-mode .product-card h3 { min-height: 0; } .mobile-cart-bar { position: fixed; left: 10px; right: 10px; bottom: calc(var(--mobile-nav-height) + 10px + env(safe-area-inset-bottom)); z-index: 1025; min-height: 68px; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border-radius: 15px; border: 1px solid var(--me-border-strong); background: var(--me-floating-bg); box-shadow: var(--me-shadow); backdrop-filter: blur(16px); } .mobile-cart-summary { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--me-text); border: 0; background: transparent; text-align: left; } .mobile-cart-summary > span:last-child { min-width: 0; } .mobile-cart-summary strong, .mobile-cart-summary small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-cart-summary strong { font-size: .83rem; } .mobile-cart-summary small { color: var(--me-muted); font-size: .68rem; } .cart-icon-wrap { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--me-accent-soft); color: var(--me-accent-strong); } .cart-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--me-accent); color: var(--me-on-accent); font-size: .64rem; font-weight: 800; border: 2px solid var(--me-surface); } .mobile-cart-bar .btn { min-height: 48px; padding: 0 13px; white-space: nowrap; font-size: .82rem; } .cart-offcanvas { height: min(72vh, 640px) !important; border-radius: 20px 20px 0 0; background: var(--me-surface); border-top: 1px solid var(--me-border); } .cart-panel { position: sticky; top: 24px; align-self: start; min-height: 560px; flex-direction: column; padding: 18px; border-radius: var(--me-radius); border: 1px solid var(--me-border); background: var(--me-surface); } .cart-panel-head { display: flex; justify-content: space-between; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--me-border-soft); } .cart-panel-head h2 { margin: 0; font-size: 1.1rem; } .cart-count { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--me-accent-soft); color: var(--me-accent-strong); font-weight: 750; } .cart-lines { display: flex; flex-direction: column; } .cart-line { min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--me-border-soft); } .cart-line-copy { min-width: 0; flex: 1; } .cart-line-copy strong, .cart-line-copy small { display: block; } .cart-line-copy strong { font-size: .86rem; } .cart-line-copy small { color: var(--me-muted); font-size: .72rem; margin-top: 3px; } .cart-line-controls { display: flex; align-items: center; gap: 5px; } .cart-line-controls button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--me-border); border-radius: 9px; background: var(--me-surface-2); color: var(--me-text); } .cart-line-controls button svg { width: 15px; height: 15px; } .cart-line-controls span { min-width: 30px; text-align: center; font-weight: 700; } .cart-empty { min-height: 180px; } .cart-empty svg { width: 28px; height: 28px; } .review-layout { display: grid; gap: 16px; } .review-store { display: flex; align-items: center; gap: 13px; } .review-store > div { min-width: 0; } .review-store small, .review-store strong, .review-store span { display: block; } .review-store small, .review-store span { color: var(--me-muted); font-size: .76rem; } .review-store strong { font-size: 1rem; margin: 1px 0 2px; } .review-lines { display: flex; flex-direction: column; } .review-line { min-height: 68px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-top: 1px solid var(--me-border-soft); } .review-line:first-child { border-top: 0; } .review-line-index { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--me-surface-3); color: var(--me-muted); font-size: .7rem; font-weight: 750; } .review-line-copy { min-width: 0; } .review-line-copy strong, .review-line-copy small { display: block; } .review-line-copy strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; } .review-line-copy small { color: var(--me-muted); font-size: .7rem; margin-top: 3px; } .review-line-qty { font-size: .86rem; white-space: nowrap; } .confirm-card { text-align: center; } .confirm-icon { width: 58px; height: 58px; margin: 4px auto 15px; } .confirm-card h2 { font-size: 1.28rem; } .confirm-card p { font-size: .88rem; } .confirm-checklist { display: grid; gap: 9px; margin-top: 18px; text-align: left; } .confirm-checklist span { display: flex; align-items: center; gap: 9px; color: var(--me-text-soft); font-size: .8rem; } .confirm-checklist svg { width: 17px; height: 17px; color: var(--me-accent-strong); } .success-burst { width: 70px; height: 70px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--me-success-text); background: var(--me-success-soft); box-shadow: 0 0 0 12px var(--me-success-soft); } .success-burst svg { width: 34px; height: 34px; } .history-toolbar .status-select { width: 100%; } .history-card, .admin-list-card { padding: 0; } .history-list, .admin-list { display: flex; flex-direction: column; } .history-row { width: 100%; min-height: 82px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 13px 15px; border: 0; border-top: 1px solid var(--me-border-soft); background: transparent; color: var(--me-text); text-align: left; } .history-row:first-child { border-top: 0; border-radius: var(--me-radius) var(--me-radius) 0 0; } .history-row:hover { background: var(--me-row-hover); } .history-main { min-width: 0; } .history-number, .history-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .history-number { font-weight: 720; font-size: .88rem; } .history-sub { color: var(--me-muted); font-size: .7rem; margin-top: 4px; } .history-lines { display: none; } .history-row > svg { display: none; color: var(--me-muted-dim); } .detail-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .detail-meta > div { padding: 11px; border-radius: 10px; background: var(--me-surface-2); border: 1px solid var(--me-border-soft); } .detail-meta small, .detail-meta strong { display: block; } .detail-meta small { color: var(--me-muted); font-size: .68rem; } .detail-meta strong { margin-top: 3px; font-size: .8rem; } .detail-observations { padding: 12px; border-radius: 10px; background: var(--me-surface-2); } .detail-observations small { color: var(--me-muted); } .detail-observations p { margin: 4px 0 0; } .admin-row { min-height: 76px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--me-border-soft); } .admin-row:first-child { border-top: 0; } .admin-row-icon { width: 38px; height: 38px; border-radius: 10px; } .admin-row-icon svg { width: 18px; height: 18px; } .admin-row-main { min-width: 0; } .admin-row-main strong, .admin-row-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-row-main strong { font-size: .86rem; } .admin-row-main small { margin-top: 3px; color: var(--me-muted); font-size: .69rem; } .app-offcanvas, .app-modal { background: var(--me-surface); color: var(--me-text); border-color: var(--me-border); } .app-offcanvas { max-width: 340px; } .mobile-menu-link { background: var(--me-surface-2); border: 1px solid var(--me-border-soft); } a.mobile-menu-link:hover, button.mobile-menu-link:hover { color: var(--me-text); background: var(--me-surface-3); } .compact-switcher { flex: 0 0 auto; } .modal-backdrop.show { opacity: var(--me-backdrop-opacity); } .app-toast { min-width: min(360px, calc(100vw - 32px)); border: 1px solid var(--me-border); background: var(--me-toast-bg); color: var(--me-text); box-shadow: var(--me-shadow); } .app-toast .toast-body { min-height: 56px; display: flex; align-items: center; gap: 10px; } .toast-icon { color: var(--me-accent-strong); } .app-toast-success .toast-icon { color: var(--me-success); } .app-toast-danger .toast-icon { color: var(--me-danger); } .toast-close { border: 0; background: transparent; color: var(--me-muted); } /* Bootstrap's .toast-container has no z-index of its own, so toasts landed behind the sidebar, the mobile topbar and the login switchers. */ #appToast { z-index: 1090; } /* Clear the fixed language/theme controls instead of covering them. */ .login-body #appToast { padding: 74px 16px 16px; } .login-body { min-height: 100vh; background: var(--me-bg); } .login-shell { min-height: 100vh; } .login-panel { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 72px 20px 32px; } .login-card-wrap { width: 100%; max-width: 420px; } .login-card-wrap h2 { font-size: 1.8rem; font-weight: 760; letter-spacing: -.035em; } .login-controls { position: fixed; z-index: 10; top: 18px; right: 18px; display: flex; align-items: center; gap: 8px; } .password-field { position: relative; } .password-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: var(--me-muted); } .pagination-bar { display: flex; flex-direction: column; gap: 12px; padding: 14px 15px; border-top: 1px solid var(--me-border-soft); background: var(--me-surface-2); border-radius: 0 0 var(--me-radius) var(--me-radius); } .pager-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--me-muted); font-size: .78rem; } .pager-size-switch { flex: 0 0 auto; } .pager-size { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--me-border); border-radius: 9px; background: var(--me-surface); color: var(--me-text-soft); font-size: .78rem; font-weight: 650; white-space: nowrap; } .pager-size:hover { border-color: var(--me-border-strong); color: var(--me-text); } .pager-size svg { width: 15px; height: 15px; color: var(--me-muted); } /* The bar is the foot of the card, so the list opens upward, and it is anchored to the trigger's right edge so it never pokes out of the card on either layout. */ .pager-size-menu { top: auto; bottom: 100%; left: auto; right: 0; width: auto; min-width: 168px; margin: 0 0 6px; } .pager-size-menu .app-dropdown-item { min-height: 38px; } .pager-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; } .pager-pages { display: flex; align-items: center; gap: 4px; } .pager-step, .pager-page { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; border: 1px solid var(--me-border); border-radius: 9px; background: var(--me-surface); color: var(--me-text-soft); font-size: .8rem; font-weight: 650; } .pager-page { min-width: 38px; padding: 0 8px; } .pager-step svg { width: 16px; height: 16px; } .pager-step:hover:not(:disabled), .pager-page:hover:not(.active) { border-color: var(--me-border-strong); color: var(--me-text); } .pager-step:disabled { opacity: .45; } .pager-page.active { background: var(--me-accent); border-color: var(--me-accent); color: var(--me-on-accent); } .pager-gap { min-width: 22px; text-align: center; color: var(--me-muted-dim); } .login-hero { display: none; } @media (min-width: 576px) { .page-container { padding-left: 24px; padding-right: 24px; } .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .history-toolbar, .product-toolbar { flex-direction: row; align-items: center; } .history-toolbar .status-select { width: 190px; } .pagination-bar { flex-direction: row; align-items: center; justify-content: space-between; } .pager-info { justify-content: flex-start; } .pager-controls { justify-content: flex-end; } .history-row { grid-template-columns: minmax(0, 1fr) 70px auto 20px; padding: 14px 18px; } .history-lines { display: flex; flex-direction: column; align-items: center; font-weight: 750; } .history-lines small { color: var(--me-muted); font-size: .63rem; font-weight: 500; } .history-row > svg { display: block; } } @media (min-width: 768px) { .login-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 14px; } .login-panel { min-height: calc(100vh - 28px); padding: 40px; } .login-hero { position: relative; min-height: calc(100vh - 28px); overflow: hidden; flex-direction: column; justify-content: space-between; padding: clamp(36px, 6vw, 72px); border-radius: 22px; background: radial-gradient(circle at 75% 75%, rgba(255,255,255,.12), transparent 24%), linear-gradient(145deg, #078b97, #0a9ba6 55%, #0b7f89); } .login-hero-copy { position: relative; z-index: 2; max-width: 590px; } .login-hero-copy .eyebrow { color: rgba(255,255,255,.72); } .login-hero h1 { margin: 5px 0 18px; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -.05em; font-weight: 780; } .login-hero p { max-width: 530px; color: rgba(255,255,255,.78); font-size: 1rem; } .hero-visual { position: relative; height: 42vh; min-height: 300px; } .hero-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; transform: translate(-50%, -50%); } .orbit-one { width: 360px; height: 210px; transform: translate(-50%, -50%) rotate(-10deg); } .orbit-two { width: 260px; height: 320px; transform: translate(-50%, -50%) rotate(28deg); } .hero-box { position: absolute; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); background: rgba(5, 64, 70, .38); box-shadow: 0 24px 60px rgba(3, 45, 50, .22); backdrop-filter: blur(8px); color: #fff; } .hero-box-main { width: 150px; height: 150px; left: calc(50% - 75px); top: calc(50% - 75px); border-radius: 38px; } .hero-box-main svg { width: 66px; height: 66px; } .hero-box-small { width: 88px; height: 88px; left: 16%; bottom: 12%; border-radius: 25px; transform: rotate(-8deg); } .hero-box-store { width: 100px; height: 100px; right: 13%; top: 15%; border-radius: 28px; transform: rotate(8deg); } .dashboard-grid { grid-template-columns: 1.35fr .65fr; } .action-card, .stats-grid { grid-column: 1 / -1; } .recent-card { grid-column: 1; } .store-card { grid-column: 2; } .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .product-grid.list-mode .product-card-body { grid-template-columns: minmax(0, 1fr) 210px; align-items: center; } .review-layout { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); align-items: start; } .confirm-card { position: sticky; top: 24px; } } @media (min-width: 992px) { .app-main { margin-left: 260px; } .page-container { padding: 44px 34px; } .dashboard-grid { gap: 18px; } .action-card { min-height: 128px; padding: 24px; } .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .stat-card { min-height: 156px; padding: 19px; } .content-card { padding: 22px; } .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .order-layout { grid-template-columns: minmax(0, 1fr) 340px; } .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1450px) { .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 390px) { .page-container { padding-left: 12px; padding-right: 12px; } .product-grid { gap: 8px; } .product-card-body { padding: 10px; } .product-visual { min-height: 102px; } .quantity-control { grid-template-columns: 36px 1fr 36px; } .mobile-cart-bar { left: 8px; right: 8px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }