* { box-sizing: border-box; margin: 0; padding: 0; } /* ── Theme tokens ────────────────────────────────────────────────────────────── Light is the default. Dark applies when the user picks it () or when they follow the system (data-theme="system") and the OS is in dark mode. The toggle lives in My Account; an inline script sets the attribute before first paint to avoid a flash. Brand colours (green/red/blue/ orange) and the navy header stay the same in both themes. */ :root { color-scheme: light; --bg: #f0f2f5; /* page background */ --surface: #ffffff; /* cards, panels, modals, rows */ --surface-2: #f7f8fa; /* subtle/alt surfaces */ --surface-3: #f0f2ff; /* hover tint */ --text: #2c2c2c; /* primary text */ --text-strong: #1a1a2e; /* headings / emphasis */ --text-muted: #5a6473; /* secondary text */ --text-faint: #8a929e; /* tertiary / placeholders */ --border: #e3e6ea; /* default borders / dividers */ --border-strong: #d0d5dd; --input-bg: #ffffff; --shadow-sm: rgba(0,0,0,.08); --shadow-md: rgba(0,0,0,.14); --success-bg: #eafaf1; --warn-bg: #fff8e1; --error-bg: #fdecea; --info-bg: #f0f4ff; /* Readable "ink" for accent text/icons that sit on surfaces or the tints above. These flip with the theme so a dark accent never lands on a dark surface. */ --success-text: #1e8449; --warn-text: #b45309; --error-text: #c0392b; --info-text: #1a5490; --bar-bg: rgba(240,242,245,.95); /* translucent page bg for sticky bars */ } :root[data-theme="dark"] { color-scheme: dark; --bg: #14161b; --surface: #1e2128; --surface-2: #262a33; --surface-3: #2c313c; --text: #e6e8ec; --text-strong: #f3f5f8; --text-muted: #a7adb8; --text-faint: #7f8693; --border: #2f343d; --border-strong: #3c424d; --input-bg: #1b1e24; --shadow-sm: rgba(0,0,0,.45); --shadow-md: rgba(0,0,0,.55); --success-bg: #14301f; --warn-bg: #3a2f10; --error-bg: #3a1c1a; --info-bg: #1a2436; --success-text: #54d98c; --warn-text: #f0b757; --error-text: #f08a82; --info-text: #6db3f2; --bar-bg: rgba(20,22,27,.95); } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; --bg:#14161b; --surface:#1e2128; --surface-2:#262a33; --surface-3:#2c313c; --text:#e6e8ec; --text-strong:#f3f5f8; --text-muted:#a7adb8; --text-faint:#7f8693; --border:#2f343d; --border-strong:#3c424d; --input-bg:#1b1e24; --shadow-sm:rgba(0,0,0,.45); --shadow-md:rgba(0,0,0,.55); --success-bg:#14301f; --warn-bg:#3a2f10; --error-bg:#3a1c1a; --info-bg:#1a2436; --success-text:#54d98c; --warn-text:#f0b757; --error-text:#f08a82; --info-text:#6db3f2; --bar-bg:rgba(20,22,27,.95); } } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; } /* ── Header ─────────────────────────────── */ header { background: #1a1a2e; color: #fff; padding: 14px 24px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.3); } .header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 16px; } header h1 { font-size: 1.25rem; font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 8px; } .h1-logo { height: 28px; width: 28px; border-radius: 6px; flex: 0 0 auto; } .h1-text { line-height: 1; } #search { flex: 1; max-width: 380px; padding: 8px 16px; border: none; border-radius: 20px; font-size: .95rem; background: rgba(255,255,255,.15); color: #fff; outline: none; transition: background .15s; } #search::placeholder { color: rgba(255,255,255,.55); } #search:focus { background: rgba(255,255,255,.25); } .scan-btn { padding: 8px 16px; background: rgba(255,255,255,.15); color: #fff; border: 1.5px solid rgba(255,255,255,.3); border-radius: 20px; cursor: pointer; font-size: .875rem; white-space: nowrap; transition: background .15s; } .scan-btn:hover { background: rgba(255,255,255,.28); } /* ── App layout (sidebar + main) ─────────── */ .app-layout { display: flex; align-items: flex-start; gap: 20px; max-width: 1320px; margin: 0 auto; padding: 24px 16px; } /* ── Sidebar ─────────────────────────────── */ .sidebar { width: 188px; flex-shrink: 0; background: var(--surface); border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 10px 8px; position: sticky; top: 80px; display: flex; flex-direction: column; } .sidebar-group { display: flex; flex-direction: column; gap: 2px; } .sidebar-sep { height: 1px; background: var(--surface-2); margin: 8px 6px; } .sidebar-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border: none; background: transparent; color: var(--text-muted); border-radius: 8px; cursor: pointer; font-size: .875rem; font-weight: 500; text-align: left; text-decoration: none; transition: background .12s, color .12s; line-height: 1.3; } .sidebar-btn:hover { background: var(--surface-3); color: var(--text-strong); } .sb-icon { font-size: 1rem; flex-shrink: 0; } /* Unseen-posts badge next to "Nástenka" — count of board posts the user hasn't opened yet. Sits at the far right of the button. */ .sidebar-badge { margin-left: auto; flex-shrink: 0; background: #e74c3c; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; padding: 2px 6px; min-width: 18px; text-align: center; border-radius: 10px; } .sidebar-badge.hidden { display: none; } /* ── Nested inventory submenu ────────────────────────────── */ /* Tools that belong under "Sklad" render indented with a left guide line so they read as children of the Inventory item, not as top-level nav. */ .sidebar-submenu { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 2px 18px; padding-left: 8px; border-left: 2px solid var(--border); } .sidebar-subitem { padding: 7px 10px; font-size: .82rem; font-weight: 500; color: var(--text-muted); } .sidebar-subitem .sb-icon { font-size: .9rem; } /* ── Language switcher ───────────────────────────────────── */ .lang-switcher { display: flex; gap: 4px; padding: 4px 4px 2px; } .lang-btn { flex: 1; padding: 6px 0; border: 1.5px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text-muted); font-size: .78rem; font-weight: 600; cursor: pointer; text-align: center; transition: all .15s; } .lang-btn:hover { border-color: var(--text-faint); color: var(--text); } .lang-btn-active { background: #1a1a2e; border-color: var(--text-strong); color: #fff !important; } /* ── Main ────────────────────────────────── */ main { flex: 1; min-width: 0; } /* ── Filters ─────────────────────────────── */ /* ── Type filters — horizontal scrolling cards ─────────────────── */ /* Inventory page action bar — holds the "Add product" button (was a menu item). Sits on the same row as the stats line, pushed to the right. */ .stats-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .stats-row .stats { margin-bottom: 0; } .inv-actions { display: flex; justify-content: flex-end; gap: 10px; } @media (max-width: 520px) { .stats-row { flex-direction: column; align-items: stretch; } .inv-actions { width: 100%; } .inv-actions .btn-apply, .inv-actions .btn-secondary { flex: 1; text-align: center; } } /* Import / Export chooser — two side-by-side cards inside the modal */ .impexp-choices { display: flex; gap: 14px; } .impexp-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); cursor: pointer; text-decoration: none; text-align: center; font: inherit; transition: background .15s, border-color .15s; } .impexp-card:hover { background: var(--surface-2); border-color: var(--border-strong); } .impexp-card-icon { font-size: 1.7rem; } .impexp-card-title { font-weight: 600; color: var(--text); } .impexp-card-desc { font-size: .8rem; color: var(--text-muted); } @media (max-width: 520px) { .impexp-choices { flex-direction: column; } } .filters { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 10px; /* space for shadow + scrollbar */ scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .filters::-webkit-scrollbar { height: 5px; } .filters::-webkit-scrollbar-track { background: transparent; } .filters::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; } .filter-btn { padding: 10px 18px; border: none; background: var(--surface); border-radius: 12px; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--text-muted); transition: transform .12s, box-shadow .15s, background .15s, color .15s; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); flex-shrink: 0; white-space: nowrap; } .filter-btn:hover:not(.active) { box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06); transform: translateY(-1px); } .filter-btn.active { background: #1a1a2e; color: #fff; box-shadow: 0 3px 8px rgba(26,26,46,.3); } .filter-sep { width: 1px; background: #ddd; align-self: stretch; margin: 6px 4px; flex-shrink: 0; } .last-updated { margin-left: auto; font-size: .78rem; font-weight: 600; align-self: center; white-space: nowrap; flex-shrink: 0; padding-left: 8px; } .last-updated-today { color: #27ae60; } .last-updated-old { color: #e67e22; } .filter-low { color: #e67e22; } .filter-empty { color: var(--error-text); } .filter-low.active { background: #e67e22; color: #fff; box-shadow: 0 3px 8px rgba(230,126,34,.3); } .filter-empty.active { background: #c0392b; color: #fff; box-shadow: 0 3px 8px rgba(192,57,43,.3); } /* ── Sub-filters — horizontal scrolling cards ─────────────────── */ .sub-filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 10px 8px; border-left: 3px solid #1a1a2e; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .sub-filters::-webkit-scrollbar { height: 5px; } .sub-filters::-webkit-scrollbar-track { background: transparent; } .sub-filters::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; } .sub-filters.hidden { display: none; } .sub-filter-btn { padding: 8px 16px; border: none; background: var(--surface); border-radius: 10px; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--text-muted); transition: transform .12s, box-shadow .15s, background .15s, color .15s; box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.03); flex-shrink: 0; white-space: nowrap; } .sub-filter-btn:hover:not(.active) { box-shadow: 0 3px 8px rgba(0,0,0,.1); transform: translateY(-1px); } .sub-filter-btn.active { background: #2c3e6b; color: #fff; box-shadow: 0 3px 8px rgba(44,62,107,.3); } /* ── Stats bar ───────────────────────────── */ .stats { display: flex; gap: 18px; margin-bottom: 16px; font-size: .875rem; color: var(--text-muted); } .stats b { color: var(--text); } .stats .s-low { color: #d68910; font-weight: 600; } .stats .s-empty { color: var(--error-text); font-weight: 600; } /* ── Table ───────────────────────────────── */ .table-wrap { background: var(--surface); border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.08); overflow: hidden; } table { width: 100%; border-collapse: collapse; } thead { background: var(--surface-2); } th { padding: 11px 14px; text-align: left; font-size: .78rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--border); } td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: .92rem; vertical-align: middle; } tr:last-child td { border-bottom: none; } /* Row-hover tint only on real pointer devices — on touch, :hover sticks to the last-tapped row and leaves a grey background behind it. */ @media (hover: hover) { tbody tr:hover td { background: var(--surface-2); } } /* ── Badges ──────────────────────────────── */ .sheet-badge { display: inline-block; padding: 3px 9px; border-radius: 10px; font-size: .78rem; font-weight: 600; } /* Colours cycle through indices 0-7 for any number of types */ .sheet-color-0 { background: var(--warn-bg); color: #7d4e05; } /* amber – Spirits */ .sheet-color-1 { background: var(--error-bg); color: var(--error-text); } /* red – Wine */ .sheet-color-2 { background: var(--success-bg); color: #1a7a42; } /* green – Syrups */ .sheet-color-3 { background: var(--info-bg); color: var(--info-text); } /* blue */ .sheet-color-4 { background: var(--info-bg); color: #5b21b6; } /* purple */ .sheet-color-5 { background: var(--success-bg); color: #0f766e; } /* teal */ .sheet-color-6 { background: var(--warn-bg); color: var(--warn-text); } /* orange */ .sheet-color-7 { background: var(--surface-2); color: var(--text-muted); } /* slate */ .status-badge { display: inline-block; padding: 3px 9px; border-radius: 10px; font-size: .78rem; font-weight: 600; } .s-ok { background: var(--success-bg); color: var(--success-text); } .s-low { background: var(--warn-bg); color: #d68910; } .s-empty { background: var(--error-bg); color: var(--error-text); } /* ── Per-row updated timestamp ───────────── */ .upd-cell { font-size: .8rem; font-weight: 600; white-space: nowrap; } .upd-today { color: #27ae60; } .upd-old { color: #e67e22; } /* ── Editable name ───────────────────────── */ .name-editable { cursor: pointer; border-bottom: 2px dashed transparent; transition: border-color .15s; } .name-editable:hover { border-bottom-color: #3498db; } .name-input { width: 200px; padding: 4px 8px; border: 2px solid #3498db; border-radius: 5px; font-size: .92rem; outline: none; } .name-input.error { border-color: #e74c3c; } /* ── Editable category ───────────────────── */ .cat-editable { cursor: pointer; color: var(--text-muted); font-size: .88rem; border-bottom: 2px dashed transparent; transition: border-color .15s; } .cat-editable:hover { border-bottom-color: #3498db; } .cat-edit-input { width: 150px; padding: 4px 8px; border: 2px solid #3498db; border-radius: 5px; font-size: .88rem; outline: none; } .cat-edit-input.error { border-color: #e74c3c; } /* ── Supplier cell ───────────────────────── */ .supplier-cell { font-size: .82rem; color: var(--text-muted); } .no-supplier { color: #ccc; } .supplier-editable { cursor: pointer; border-bottom: 2px dashed transparent; transition: border-color .15s; } .supplier-editable:hover { border-bottom-color: #3498db; } /* ── Stock cell ──────────────────────────── */ .stock-num { font-size: 1rem; font-weight: 700; cursor: pointer; border-bottom: 2px dashed transparent; transition: border-color .15s; } .stock-num:hover { border-color: #3498db; } .stock-edit { display: flex; align-items: center; gap: 4px; } .stock-edit input { width: 62px; padding: 4px 8px; border: 2px solid #3498db; border-radius: 5px; font-size: .95rem; font-weight: 700; text-align: center; outline: none; } .stock-edit input.error { border-color: #e74c3c; } .btn-save { padding: 5px 8px; background: #27ae60; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: .85rem; } .btn-cancel { padding: 5px 8px; background: #bdc3c7; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: .85rem; } /* ── Delete button ───────────────────────── */ .btn-del { background: none; border: none; cursor: pointer; color: #ddd; font-size: .95rem; padding: 2px 5px; border-radius: 4px; transition: color .15s; } .btn-del:hover { color: #e74c3c; } .del-confirm { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: #e74c3c; white-space: nowrap; } .btn-del-yes { padding: 3px 7px; background: #e74c3c; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: .8rem; } .btn-del-no { padding: 3px 7px; background: var(--surface-2); color: var(--text-muted); border: none; border-radius: 4px; cursor: pointer; font-size: .8rem; } /* ── Drag & drop ─────────────────────────── */ .drag-th { width: 28px; padding: 0 !important; } .drag-handle { cursor: grab; color: var(--text-faint); font-size: 1.05rem; user-select: none; text-align: center; width: 28px; padding: 11px 4px !important; } .drag-handle:hover { color: var(--text-faint); } tr.dragging { opacity: .35; } tr.dragging .drag-handle { cursor: grabbing; } tr.drag-over-above td { box-shadow: inset 0 2px 0 #3498db; } tr.drag-over-below td { box-shadow: inset 0 -2px 0 #3498db; } /* ── Empty / loading ─────────────────────── */ .msg-row td { text-align: center; color: var(--text-faint); padding: 48px 16px; font-size: .95rem; } /* ══ Scan Modal ═════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 200; } .modal-overlay.hidden { display: none; } .modal { background: var(--surface); border-radius: 12px; width: 92%; max-width: 780px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.25); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-header h2 { font-size: 1.05rem; font-weight: 700; } .modal-close { width: 30px; height: 30px; border: none; background: none; cursor: pointer; font-size: 1.1rem; color: var(--text-faint); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .modal-close:hover { background: var(--surface-2); } .modal-body { padding: 24px; overflow-y: auto; flex: 1; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0; } .modal-footer.hidden { display: none; } /* ── Clock-out confirmation modal ───────────────────────────────── */ .clockout-lead { margin: 0 0 16px; color: var(--text-muted); font-size: 14px; } .clockout-stats { display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .clockout-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; } .clockout-label { color: var(--text-muted); } .clockout-value { font-weight: 600; color: var(--text); } .clockout-row.clockout-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid #e2e2e2; font-size: 16px; } .clockout-row.clockout-total .clockout-value { color: #27ae60; } /* ── Entry step: choose method (scan vs manual) ─────────────────── */ .entry-step-desc { text-align: center; color: var(--text-muted); padding: 12px 20px 4px; font-size: .95rem; } .entry-choices { display: flex; flex-direction: column; gap: 12px; padding: 12px 20px 24px; } .entry-choice { background: var(--surface); border: 2px solid #e3e3e3; border-radius: 12px; padding: 18px 20px; cursor: pointer; text-align: left; transition: border-color .15s, transform .12s, box-shadow .15s; font: inherit; width: 100%; } .entry-choice:hover { border-color: var(--text-strong); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.08); } .entry-choice:active { transform: scale(.99); } .entry-choice-title { font-size: 1.05rem; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; } .entry-choice-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.4; } /* Back-to-entry link inside any step */ .step-back-btn { background: transparent; border: none; color: var(--text-muted); font-size: .9rem; font-weight: 600; cursor: pointer; padding: 12px 20px 0; text-align: left; display: block; } .step-back-btn:hover { color: var(--text-strong); } /* ── Manual entry step ─────────────────────── */ .man-mode-row { padding: 8px 20px 0; text-align: center; } .man-mode-label { display: inline-block; font-size: .82rem; font-weight: 700; color: var(--text-strong); background: var(--bg); padding: 6px 14px; border-radius: 10px; } .man-search-wrap { padding: 12px 20px 0; position: relative; } .man-search-input { width: 100%; padding: 12px 14px; font-size: 16px; /* prevent iOS zoom */ border: 1.5px solid var(--border); border-radius: 10px; outline: none; transition: border-color .15s; } .man-search-input:focus { border-color: #3498db; } .man-search-dropdown { display: none; position: absolute; top: 54px; left: 20px; right: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; z-index: 5; } .man-search-dropdown.visible { display: block; } .man-search-dropdown .psd-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); } .man-search-dropdown .psd-item:last-child { border-bottom: none; } .man-search-dropdown .psd-item:hover { background: var(--surface-2); } .man-search-dropdown .psd-item:active { background: var(--info-bg); } .psd-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1; } .psd-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .psd-cat { font-size: .78rem; color: var(--text-faint); } .psd-stock { font-size: .78rem; color: var(--text-muted); white-space: nowrap; } .psd-empty { padding: 14px; color: var(--text-faint); text-align: center; font-size: .9rem; } /* Cart list */ .man-cart-section { padding: 16px 20px 0; margin-top: 4px; border-top: 1px solid var(--border); } .man-cart-title { font-size: .75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 10px; } .man-cart-count { display: inline-block; margin-left: 6px; background: #1a1a2e; color: #fff; font-size: .68rem; padding: 2px 8px; border-radius: 10px; vertical-align: middle; } .man-cart-empty { color: var(--text-faint); font-style: italic; font-size: .85rem; text-align: center; padding: 18px 8px; } .man-cart-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; } .man-cart-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .man-cart-row.warn { border-color: #f5c2c0; background: var(--error-bg); } .man-cart-info { flex: 1; min-width: 0; } .man-cart-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .man-cart-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: .76rem; color: var(--text-faint); margin-top: 3px; } .man-cart-stock { color: var(--text-muted); } .man-cart-stock b { color: var(--text-strong); } .man-warn { color: #e67e22; font-weight: 600; } .man-qty-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .man-qty-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font-size: 1.1rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; } .man-qty-btn:hover { border-color: var(--text-strong); background: var(--bg); } .man-qty-btn:active { transform: scale(.95); } .man-qty-input { width: 50px; height: 32px; border: 1.5px solid var(--border); border-radius: 8px; text-align: center; font-size: 16px; /* prevent iOS zoom */ font-weight: 700; outline: none; } .man-qty-input:focus { border-color: #3498db; } .man-remove-btn { width: 32px; height: 32px; border: none; background: transparent; color: var(--error-text); cursor: pointer; font-size: 1rem; font-weight: 700; border-radius: 6px; flex-shrink: 0; } .man-remove-btn:hover { background: var(--error-bg); } /* Mobile tweaks */ @media (max-width: 520px) { .entry-choices { padding: 12px 16px 18px; } .entry-choice { padding: 16px; } .man-search-wrap { padding: 10px 14px 0; } .man-search-dropdown { left: 14px; right: 14px; top: 50px; } .man-cart-section { padding: 14px 14px 0; } .man-cart-row { padding: 10px; } .man-cart-name { font-size: .95rem; } } /* ── Mode toggle ─────────────────────────── */ .scan-mode-toggle { display: flex; gap: 8px; justify-content: center; padding: 18px 20px 0; } .mode-btn { flex: 1; max-width: 200px; padding: 10px 18px; border: 2px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: .9rem; font-weight: 600; transition: all .15s; } .mode-btn:hover:not(.active) { border-color: var(--text-faint); color: var(--text); } .mode-btn.active { background: #1a1a2e; border-color: var(--text-strong); color: #fff; } /* ── Upload step ─────────────────────────── */ .scan-upload-area { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 20px; text-align: center; } .scan-upload-area .icon { font-size: 3rem; } .scan-upload-area p { color: var(--text-muted); max-width: 340px; line-height: 1.5; } /* Two-button upload row: take photo + pick file */ .upload-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .upload-label { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; background: #1a1a2e; color: #fff; border-radius: 8px; cursor: pointer; font-size: .95rem; font-weight: 600; transition: background .15s, transform .12s; } .upload-label:hover { background: #2c2c4e; } .upload-label:active { transform: scale(.97); } .upload-label input { display: none; } /* "Take photo" — primary action on mobile, accent color */ .upload-camera { background: #27ae60; } .upload-camera:hover { background: #229954; } .scan-hint { font-size: .78rem; color: var(--text-faint); } /* ── Loading step ────────────────────────── */ .scan-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 20px; text-align: center; color: var(--text-muted); } .spinner { width: 40px; height: 40px; border: 4px solid var(--border); border-top-color: var(--text-strong); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Results step ────────────────────────── */ .scan-summary { color: var(--text-muted); margin-bottom: 14px; font-size: .9rem; } .scan-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .scan-table th { padding: 8px 10px; background: var(--surface-2); border-bottom: 2px solid var(--border); text-align: left; font-size: .75rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase; } .scan-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .scan-table tr:last-child td { border-bottom: none; } .scan-table tr.no-match { opacity: .45; } /* Confidence dots */ .conf-dot { font-size: 1rem; cursor: default; } .conf-high { color: #27ae60; } .conf-medium { color: #e67e22; } .conf-low { color: #e74c3c; } .conf-none { color: var(--text-faint); } .scan-qty-input { width: 56px; padding: 4px 6px; border: 1.5px solid var(--border); border-radius: 4px; text-align: center; font-size: .9rem; outline: none; } .scan-qty-input:focus { border-color: #3498db; } .scan-price-cell, .scan-vat-cell { white-space: nowrap; } .scan-price-input { width: 72px; padding: 4px 6px; border: 1.5px solid var(--border); border-radius: 4px; text-align: right; font-size: .9rem; outline: none; } .scan-price-input:focus { border-color: #3498db; } .scan-vat-sel { padding: 3px 4px; font-size: .78rem; border: 1.5px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); outline: none; cursor: pointer; } .scan-vat-sel:focus { border-color: #3498db; } .ns-val { font-weight: 700; } .ns-warn { color: var(--error-text); } /* ── Add product form ────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 5px; flex: 1; /* Allow flex columns to shrink below their input's intrinsic width — without this, side-by-side fields overflow their row on narrow screens. */ min-width: 0; } .form-group label { font-size: .75rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; } .form-input { padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 6px; font-size: .92rem; outline: none; background: var(--surface); transition: border-color .15s; } .form-input { width: 100%; } .form-input:focus { border-color: #3498db; } .form-input.error { border-color: #e74c3c; } /* Native with chevron — used across the report controls and any place we want a polished dropdown */ .custom-select-wrap { position: relative; display: block; } .custom-select-wrap::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-65%) rotate(45deg); width: 8px; height: 8px; border-right: 2px solid #888; border-bottom: 2px solid #888; pointer-events: none; transition: border-color .15s; } .custom-select-wrap:hover::after { border-color: var(--text-strong); } .custom-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; padding: 9px 36px 9px 12px; border: 1.5px solid #d8dde3; border-radius: 8px; background: var(--surface); font-size: .95rem; font-weight: 500; color: var(--text-strong); cursor: pointer; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; } .custom-select:hover { border-color: var(--text-strong); background: var(--surface-2); } .custom-select:focus { border-color: #3498db; box-shadow: 0 0 0 3px rgba(52,152,219,.15); } .custom-select:disabled { background: var(--surface-2); color: var(--text-faint); cursor: not-allowed; } @media (max-width: 520px) { .hours-report-controls { flex-direction: column; align-items: stretch; } .hours-report-controls .form-group { min-width: 0; } .hours-report-buttons { width: 100%; } .hours-report-buttons .btn-apply, .hours-report-buttons .btn-secondary { flex: 1; } } /* Manager: active-now section */ .hours-active-section { margin-bottom: 20px; } .hours-section-title { font-size: 1rem; font-weight: 700; color: var(--text-strong); margin-bottom: 10px; } .hours-active-list { display: flex; flex-direction: column; gap: 8px; } .hours-active-row { display: flex; align-items: center; gap: 12px; background: var(--success-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .hours-active-main { flex: 1; min-width: 0; } .hours-active-name { font-weight: 700; color: var(--text-strong); } .hours-active-meta { font-size: .82rem; color: var(--text-muted); margin-top: 2px; } /* History */ .hours-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; margin-top: 8px; gap: 10px; flex-wrap: wrap; } .hours-history-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hours-history-user-wrap { min-width: 170px; } .hours-view-toggle { display: inline-flex; background: var(--bg); border-radius: 8px; padding: 2px; border: 1px solid var(--border); } .hours-view-btn { background: transparent; border: none; padding: 6px 12px; font-size: .8rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-radius: 6px; } .hours-view-btn.active { background: var(--surface); color: var(--text-strong); box-shadow: 0 1px 3px rgba(0,0,0,.08); } /* Status filter (All / Pending / Approved) + count of entries awaiting approval */ #hours-status-pending { display: inline-flex; align-items: center; } .hours-pending-badge { margin-left: 5px; background: #e67e22; color: #fff; font-size: .66rem; font-weight: 700; line-height: 1; padding: 2px 6px; border-radius: 10px; min-width: 16px; text-align: center; } .hours-pending-badge.hidden { display: none; } .hours-history { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; } .hours-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.03); } .hours-row.active { border-left: 4px solid #27ae60; background: var(--success-bg); } .hours-row-date { font-size: .76rem; color: var(--text-faint); width: 120px; flex-shrink: 0; } .hours-row-info { flex: 1; min-width: 0; } .hours-row-times { font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: 10px; font-size: .92rem; } .hours-row-duration { font-size: .82rem; font-weight: 600; color: var(--text-muted); background: var(--bg); padding: 1px 8px; border-radius: 6px; } .hours-now { color: #27ae60; font-weight: 700; } .hours-row-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--text-muted); margin-top: 4px; align-items: center; } .hours-row-who { font-weight: 600; } .hours-row-reason { font-style: italic; color: var(--text-faint); } .hours-src { font-size: .72rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; } .hours-src.gps { background: var(--success-bg); color: #27ae60; } .hours-src.manual { background: var(--warn-bg); color: #d68910; } .hours-src.auto { background: var(--error-bg); color: var(--error-text); } .hours-row.auto { border-left: 3px solid #c0392b; } .hours-dist { font-size: .72rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; background: var(--info-bg); color: #5a6b7b; white-space: nowrap; } .hours-dist.far { background: var(--error-bg); color: var(--error-text); } .hours-row-actions { flex-shrink: 0; } @media (max-width: 520px) { .hours-clock-card { padding: 18px 14px; } .hours-clock-elapsed { font-size: 1.8rem; } .hours-clock-btn { width: 100%; min-width: 0; padding: 16px; } .hours-row { flex-wrap: wrap; } .hours-row-date { width: 100%; margin-bottom: 4px; } .hours-row-actions { width: 100%; justify-content: flex-end; display: flex; } } /* ── Employee modal form alignment ────────────────────────────────── Some labels are longer than others (e.g. "Dátum narodenia" vs "Rola *"), so when paired in a .form-row the inputs end up at slightly different vertical positions because each form-group stretches independently. Scope a CSS Grid override that keeps inputs flush at the bottom. */ #staff-emp-modal .form-row { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 12px; } #staff-emp-modal .form-group label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 520px) { #staff-emp-modal .form-row { grid-template-columns: 1fr; gap: 14px; } } /* ── Stocktake tabs ──────────────────────────────────────────────── */ .st-tabs { margin-bottom: 14px; } /* ── Stocktake history list ──────────────────────────────────────── */ .st-history-list { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 24px; } .st-hist-row { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: box-shadow .15s, transform .12s, border-color .15s; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .st-hist-row:hover { border-color: var(--text-strong); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.08); } .st-hist-main { flex: 1; min-width: 0; } .st-hist-date { font-weight: 700; color: var(--text-strong); font-size: .92rem; } .st-hist-scope { font-size: .82rem; color: var(--text-muted); margin-top: 3px; } .st-hist-user { font-size: .76rem; color: var(--text-faint); margin-top: 1px; } .st-hist-stats { display: flex; gap: 16px; flex-shrink: 0; } .st-hist-stat { display: flex; flex-direction: column; align-items: center; font-size: .82rem; } .st-hist-stat-label { font-size: .65rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; } .st-hist-stat b { color: var(--text-strong); font-weight: 700; } .st-hist-disc-bad b { color: #e67e22; } .st-hist-disc-ok b { color: #27ae60; } .st-hist-view-btn { background: transparent; border: 1.5px solid var(--border); border-radius: 8px; color: var(--text-muted); font-weight: 600; font-size: .82rem; padding: 7px 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .15s, border-color .15s; } .st-hist-view-btn:hover { background: #1a1a2e; color: #fff; border-color: var(--text-strong); } /* ── Stocktake detail modal ──────────────────────────────────────── */ .st-detail-head { display: flex; flex-direction: column; gap: 4px; padding: 14px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .st-detail-row { display: flex; gap: 12px; font-size: .88rem; } .st-detail-label { min-width: 80px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; align-self: center; } .st-detail-items { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px 20px; } .st-det-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; padding: 10px 14px; } .st-det-row.st-row-match { border-left-color: #27ae60; background: var(--success-bg); } .st-det-row.st-row-diff { border-left-color: #e67e22; background: var(--warn-bg); } .st-det-info { flex: 1; min-width: 0; } .st-det-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-det-meta { font-size: .76rem; color: var(--text-faint); } .st-det-numbers { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .st-det-num { display: flex; flex-direction: column; align-items: center; font-size: .76rem; color: var(--text-faint); } .st-det-num b { color: var(--text-strong); font-weight: 700; font-size: .95rem; } .st-det-arrow { color: var(--text-faint); font-size: 1.1rem; } /* Mobile tweaks for history + detail */ @media (max-width: 520px) { .st-hist-row { padding: 12px; gap: 10px; flex-wrap: wrap; } .st-hist-stats { gap: 12px; width: 100%; justify-content: space-around; padding-top: 8px; border-top: 1px solid var(--border); } .st-hist-view-btn { display: none; } /* whole row is tappable on mobile */ .st-detail-head { padding: 12px 14px; } .st-detail-items { padding: 12px 14px 16px; } .st-det-row { padding: 10px 12px; gap: 8px; } .st-det-numbers { gap: 8px; } .st-det-num b { font-size: .88rem; } } /* Reuse plan badge styles from admin (define here for main app too) */ .adm-plan-badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; } .adm-plan-badge-starter { background: var(--surface-2); color: var(--text-muted); } .adm-plan-badge-pro { background: var(--info-bg); color: #5b21b6; } .adm-plan-badge-business { background: var(--info-bg); color: #0369a1; } /* ── Stock Suggestions modal ──────────────────────────────────────────────── */ .sug-modal-inner { max-width: 820px; width: 96vw; } .sug-loading-wrap { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; gap: 14px; } .sug-loading-text { font-size: .9rem; color: var(--text-faint); text-align: center; } .sug-section-title { font-size: .82rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 8px; } .sug-section-title:first-child { margin-top: 0; } .sug-details summary.sug-summary { cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 6px; } .sug-details summary.sug-summary::before { content: '▶'; font-size: .7rem; transition: transform .15s; } .sug-details[open] summary.sug-summary::before { transform: rotate(90deg); } .sug-table-wrap { overflow-x: auto; margin-bottom: 4px; } .sug-table { width: 100%; border-collapse: collapse; font-size: .84rem; } .sug-table th { padding: 6px 8px; text-align: left; font-size: .76rem; font-weight: 600; color: var(--text-faint); background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap; } .sug-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } .sug-table tr:last-child td { border-bottom: none; } .sug-table tr:hover td { background: var(--row-hover); } .sug-check { width: 28px; text-align: center !important; } .sug-check input { cursor: pointer; } .sug-name { min-width: 160px; font-weight: 500; vertical-align: middle !important; } .sug-cat { display: block; font-size: .76rem; color: var(--text-faint); font-weight: 400; } .sug-num { text-align: center !important; width: 72px; white-space: nowrap; vertical-align: middle !important; } .sug-suggested { font-weight: 700; } .sug-delta { font-weight: 700; } .sug-delta-up .sug-delta { color: #27ae60; } .sug-delta-down .sug-delta { color: var(--error-text); } tr.sug-delta-up .sug-suggested { color: #27ae60; } tr.sug-delta-down .sug-suggested { color: var(--error-text); } .sug-comment { font-size: .8rem; color: var(--text-muted); max-width: 260px; line-height: 1.4; } .sug-selected-count { font-size: .85rem; color: var(--text-faint); margin-right: 6px; } /* ── Purchase Orders modal ────────────────────────────────────────────────── */ .po-summary { font-size: .85rem; color: var(--text-faint); margin: 0 0 14px; } .po-empty { text-align: center; padding: 32px 0; color: #27ae60; font-size: 1rem; } .po-groups { display: flex; flex-direction: column; gap: 18px; } .po-group { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .po-group-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-alt); border-bottom: 1px solid var(--border); } .po-sup-name { font-weight: 600; font-size: .95rem; flex: 1; } .po-item-count { font-size: .8rem; color: var(--text-faint); } .po-dl-btn { text-decoration: none; font-size: .8rem !important; padding: 3px 10px !important; } .po-table-wrap { overflow-x: auto; } .po-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .po-table th { padding: 6px 10px; text-align: left; font-weight: 600; font-size: .78rem; color: var(--text-faint); background: var(--bg); border-bottom: 1px solid var(--border); } .po-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .po-table tr:last-child td { border-bottom: none; } .po-table tr:hover td { background: var(--row-hover); } .po-num { text-align: center !important; width: 60px; white-space: nowrap; } .po-needed { font-weight: 700; color: var(--low-color, #e67e22); } .po-name { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .po-cat { color: var(--text-muted); font-size: .82rem; } .po-sheet-tag { display: inline-block; font-size: .7rem; padding: 1px 5px; border-radius: 3px; background: var(--info-bg); color: var(--text-muted); margin-right: 3px; font-weight: 600; white-space: nowrap; } /* Upsell message */ .po-upsell { text-align: center; padding: 36px 24px; } .po-upsell-icon { font-size: 2.5rem; margin: 0 0 8px; } .po-upsell-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; color: var(--text); } .po-upsell-desc { font-size: .9rem; color: var(--text-faint); max-width: 360px; margin: 0 auto; line-height: 1.5; } /* ── Product History Modal ───────────────────────────────────── */ /* ── Product History Modal ───────────────────────────────────── */ /* Wider dialog for history */ .modal.modal-dialog-wide { max-width: 860px; width: 96%; } /* History icon — same size/weight as delete button, invisible until hover */ /* Product row — clickable for history */ tr.product-row { cursor: pointer; } tr.product-row:hover td { background: rgba(52,152,219,.06); } /* ── Price column ─────────────────────────────────────────────────────────── */ .th-price { white-space: nowrap; vertical-align: middle; } .vat-toggle-btn { margin-left: 6px; padding: 2px 7px; font-size: .7rem; font-weight: 700; border: 1.5px solid #3498db; border-radius: 10px; background: transparent; color: #3498db; cursor: pointer; transition: background .15s, color .15s; vertical-align: middle; white-space: nowrap; } .vat-toggle-btn:hover { background: #3498db; color: #fff; } td.price-cell { white-space: nowrap; text-align: right; vertical-align: middle; } .price-num { font-size: .95rem; font-weight: 700; display: block; } .price-editable { cursor: pointer; border-bottom: 2px dashed transparent; transition: border-color .15s; } .price-editable:hover { border-bottom-color: #3498db; } .price-vat-note { display: block; font-size: .7rem; color: var(--text-faint); margin-top: 1px; font-weight: 400; } .price-edit-wrap { display: flex; align-items: center; gap: 4px; } .price-input { width: 72px; padding: 4px 6px; border: 2px solid #3498db; border-radius: 5px; font-size: .9rem; font-weight: 700; text-align: right; outline: none; } .price-input.error { border-color: #e74c3c; } .vat-select { padding: 3px 5px; border: 1.5px solid #3498db; border-radius: 5px; font-size: .78rem; background: var(--surface); color: var(--text); cursor: pointer; outline: none; } /* Last-column actions cell — flush right, no layout shift */ td.row-actions { padding: 0 8px; white-space: nowrap; text-align: right; width: 1%; /* shrink to content */ } td.row-actions .del-confirm { justify-content: flex-end; } /* ── History modal inner layout ── */ #hist-modal .modal { display: flex; flex-direction: column; max-height: 88vh; } /* ── Product detail form (inside hist-modal) ───────────────────── */ /* Header row: big editable name + close button */ .pf-header { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } /* Name input styled as a heading */ .pf-title-input { flex: 1; font-size: 1.25rem; font-weight: 700; color: var(--text-strong); border: none; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; outline: none; padding: 2px 4px; transition: border-color .15s; min-width: 0; } .pf-title-input:hover { border-bottom-color: var(--text-faint); } .pf-title-input:focus { border-bottom-color: #3498db; } /* Form section wrapper — scrolls internally if content is taller than allowed */ .pf-form-section { padding: 16px 20px 4px; border-bottom: 1px solid var(--border); max-height: 45vh; /* leave room for history below */ overflow-y: auto; flex-shrink: 0; } /* History scroll wrapper — divider + summary + chart + table all scroll together */ .pf-history-scroll { flex: 1; overflow-y: auto; min-height: 0; /* allow flex item to shrink below content height */ } /* 2-column responsive grid */ .pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; } /* Single field row */ .pf-row { display: flex; flex-direction: column; gap: 4px; } /* Field that spans both columns */ .pf-row-full { grid-column: 1 / -1; } /* Label */ .pf-label { font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } /* Input / select */ .pf-input { padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 7px; font-size: .92rem; background: var(--surface); color: var(--text); outline: none; transition: border-color .15s; width: 100%; } .pf-input:focus { border-color: #3498db; } .pf-input:disabled { background: var(--surface-2); color: var(--text-faint); cursor: default; } /* Save button row */ .pf-save-row { padding: 12px 20px 16px; display: flex; justify-content: flex-end; } /* "História" section divider */ .pf-history-divider { display: flex; align-items: center; padding: 0 20px; margin: 0; color: var(--text-faint); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--surface-2); border-bottom: 1px solid var(--border); flex-shrink: 0; } .pf-history-divider span { padding: 8px 0; } /* Summary strip */ .hist-summary-bar { display: flex; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; } .hist-stat { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 0; border-right: 1px solid var(--border); } .hist-stat:last-child { border-right: none; } .hist-stat-label { font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; } .hist-stat-val { font-size: 1.25rem; font-weight: 700; margin-top: 3px; color: var(--text); } .hist-in { color: #27ae60 !important; } .hist-out { color: #e74c3c !important; } /* ── Price section (history modal) ────────────────────────────── */ .hist-price-section { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; flex-wrap: wrap; } .hist-price-view, .hist-price-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; } .hist-price-label { font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .hist-price-val { font-size: 1.1rem; font-weight: 700; } .hist-price-vat { font-size: .8rem; color: var(--text-faint); } .hist-price-edit-btn { margin-left: auto; padding: 4px 12px; font-size: .8rem; border: 1.5px solid #3498db; border-radius: 6px; background: transparent; color: #3498db; cursor: pointer; transition: background .15s, color .15s; } .hist-price-edit-btn:hover { background: #3498db; color: #fff; } /* Chart area */ .hist-chart-wrap { padding: 14px 20px 6px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .hist-chart-title { font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; } .hist-svg { width: 100%; height: 160px; display: block; } .hist-grid { stroke: #f0f0f0; stroke-width: 1; } .hist-axis { font-size: 10px; fill: #bbb; font-family: inherit; } .hist-dot { fill: #3498db; stroke: #fff; stroke-width: 1.5; cursor: default; } /* Table wrapper */ #hist-modal-body { padding: 0; } .hist-table { width: 100%; border-collapse: collapse; font-size: .86rem; } .hist-table thead th { position: sticky; top: 0; z-index: 1; padding: 9px 14px; background: var(--surface-2); border-bottom: 2px solid var(--border); font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; text-align: left; white-space: nowrap; } /* Override global td padding inside history table */ .hist-table td { padding: 8px 14px !important; border-bottom: 1px solid var(--border) !important; vertical-align: middle; } .hist-table tbody tr:last-child td { border-bottom: none !important; } .hist-table tbody tr:hover td { background: var(--info-bg); } .hist-td-date { white-space: nowrap; color: var(--text-muted); font-size: .82rem; font-variant-numeric: tabular-nums; } .hist-td-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; width: 70px; } .hist-td-note { color: var(--text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hist-td-user { color: var(--text-faint); font-size: .8rem; white-space: nowrap; } .hist-chg-in { color: #27ae60; } .hist-chg-out { color: #e74c3c; } .hist-empty { text-align: center; color: var(--text-faint); padding: 48px 0; font-size: .95rem; } /* ── Movement Log Modal ──────────────────────────────────────── */ .log-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .log-back-btn { background: none; border: 1.5px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: .8rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s; flex-shrink: 0; } .log-back-btn:hover { border-color: var(--text-faint); color: var(--text); } .log-back-btn.hidden { display: none; } .log-period-btns { display: flex; gap: 4px; flex-shrink: 0; } .log-period-btn { padding: 4px 12px; border: 1.5px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text-muted); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .15s; } .log-period-btn:hover { border-color: var(--text-faint); color: var(--text); } .log-period-btn.active { background: #1a1a2e; border-color: var(--text-strong); color: #fff; } .log-period-btns.hidden { display: none; } /* Log modal body — no extra padding, scrollable */ #log-modal-body { padding: 0; overflow-y: auto; flex: 1; } #log-modal .modal { display: flex; flex-direction: column; max-height: 88vh; } .log-empty { text-align: center; color: var(--text-faint); padding: 48px 0; font-size: .95rem; } /* Shared log table */ .log-table { width: 100%; border-collapse: collapse; font-size: .87rem; } .log-table thead th { position: sticky; top: 0; z-index: 1; padding: 9px 14px; background: var(--surface-2); border-bottom: 2px solid var(--border); font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; text-align: left; white-space: nowrap; } .log-table td { padding: 10px 14px !important; border-bottom: 1px solid var(--border) !important; vertical-align: middle; } .log-table tbody tr:last-child td { border-bottom: none !important; } /* List view rows — clickable */ .log-list-row { cursor: pointer; transition: background .1s; } .log-list-row:hover td { background: var(--surface-2) !important; } .log-td-date { font-weight: 600; color: var(--text); white-space: nowrap; } .log-td-count { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; } .log-td-in { color: #27ae60; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .log-td-out { color: #e74c3c; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .log-td-users { color: var(--text-faint); font-size: .82rem; } /* Detail view */ .log-detail-table .log-td-time { color: var(--text-faint); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .log-detail-table .log-td-product { font-weight: 600; color: var(--text); } .log-detail-table .log-td-cat {} .log-detail-table .log-td-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; width: 60px; } .log-detail-table .log-td-note { color: var(--text-faint); font-size: .82rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .log-detail-table .log-td-who { color: var(--text-faint); font-size: .8rem; white-space: nowrap; } .log-cat { display: inline-block; padding: 2px 8px; background: var(--bg); border-radius: 10px; font-size: .78rem; color: var(--text-muted); white-space: nowrap; } /* ── Movement log (Reports → "Pohyby skladu" tab) ────────────── */ .sidebar-btn-active { background: var(--surface-3); color: var(--text-strong); font-weight: 600; } .mr-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .mr-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; } .mr-page-title { font-size: 1.15rem; font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mr-back-btn { background: none; border: 1.5px solid var(--border); border-radius: 7px; padding: 5px 13px; font-size: .85rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s; flex-shrink: 0; } .mr-back-btn:hover { border-color: var(--text-faint); color: var(--text); } .mr-back-btn.hidden { display: none; } .mr-period-btns { display: flex; gap: 4px; flex-shrink: 0; } .mr-period-btn { padding: 6px 16px; border: 1.5px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text-muted); font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .15s; } .mr-period-btn:hover { border-color: var(--text-faint); color: var(--text); } .mr-period-btn.active { background: #1a1a2e; border-color: var(--text-strong); color: #fff; } .mr-period-btns.hidden { display: none; } /* Detail summary strip */ .mr-detail-summary { display: flex; gap: 0; background: var(--surface); border-radius: 10px 10px 0 0; border: 1px solid var(--border); border-bottom: none; overflow: hidden; margin-bottom: 0; } .mr-sum-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 12px 28px; border-right: 1px solid var(--border); } .mr-sum-item:last-child { border-right: none; flex: 1; align-items: flex-start; padding-left: 20px; } .mr-sum-label { font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; } .mr-sum-val { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-top: 2px; } .mr-in { color: #27ae60 !important; } .mr-out { color: #e74c3c !important; } .mr-sum-user-names { font-size: .9rem; } /* When summary is shown, join it visually with the table below */ .mr-detail-summary + .table-wrap { border-radius: 0 0 10px 10px; } /* ── Top / Bottom product ranking cards ────────────────────────────────────── */ .mr-top-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } @media (max-width: 700px) { .mr-top-wrap { grid-template-columns: 1fr; } } .mr-rank-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); } .mr-rank-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .mr-rank-header-top { background: var(--success-bg); color: var(--success-text); border-bottom: 1px solid var(--border); } .mr-rank-header-bottom { background: var(--warn-bg); color: var(--warn-text); border-bottom: 1px solid #fed7aa; } .mr-rank-icon { font-size: 1rem; } .mr-rank-body { padding: 8px 0; } .mr-rank-loading, .mr-rank-empty { padding: 20px 16px; text-align: center; color: var(--text-faint); font-size: .85rem; } .mr-rank-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--border); } .mr-rank-row:last-child { border-bottom: none; } .mr-rank-medal { font-size: .95rem; min-width: 24px; text-align: center; color: var(--text-faint); font-weight: 700; } .mr-rank-info { flex: 1; min-width: 0; } .mr-rank-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mr-rank-cat { font-size: .72rem; color: var(--text-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mr-rank-bar-wrap { height: 4px; background: var(--surface-2); border-radius: 2px; margin-top: 5px; overflow: hidden; } .mr-rank-bar { height: 100%; border-radius: 2px; min-width: 4px; transition: width .3s; } .mr-rank-bar-top { background: linear-gradient(90deg, #27ae60, #2ecc71); } .mr-rank-bar-bottom { background: linear-gradient(90deg, #e67e22, #f39c12); } .mr-rank-val { font-size: .9rem; font-weight: 700; white-space: nowrap; min-width: 40px; text-align: right; } .mr-rank-val-top { color: #e74c3c; } .mr-rank-val-bottom { color: #e67e22; } /* Table shared styles */ .mr-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .mr-table thead th { padding: 11px 14px; background: var(--surface-2); border-bottom: 2px solid var(--border); font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; text-align: left; white-space: nowrap; } .mr-table td { padding: 12px 14px !important; border-bottom: 1px solid var(--border) !important; vertical-align: middle; } .mr-table tbody tr:last-child td { border-bottom: none !important; } /* List row */ .mr-list-row { cursor: pointer; transition: background .1s; } .mr-list-row:hover td { background: var(--surface-2) !important; } .mr-td-date { font-weight: 600; color: var(--text); } .mr-td-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .mr-td-in { text-align: right; color: #27ae60; font-weight: 700; font-variant-numeric: tabular-nums; } .mr-td-out { text-align: right; color: #e74c3c; font-weight: 700; font-variant-numeric: tabular-nums; } .mr-td-users { color: var(--text-muted); font-size: .85rem; } /* Detail row */ .mr-td-time { color: var(--text-faint); font-size: .83rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .mr-td-product { font-weight: 600; color: var(--text); } .mr-td-note { color: var(--text-faint); font-size: .83rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mr-td-who { color: var(--text-faint); font-size: .82rem; white-space: nowrap; } .mr-chg-in { color: #27ae60; } .mr-chg-out { color: #e74c3c; } .mr-loading { text-align: center; color: var(--text-faint); padding: 40px 0 !important; } .mr-empty { text-align: center; color: var(--text-faint); padding: 48px 0 !important; font-size: .95rem; } /* ── Movement Report accordion ───────────────────────────────── */ .mr-chevron-cell { width: 28px; padding: 0 4px 0 12px !important; color: var(--text-faint); font-size: 1.1rem; } .mr-chevron { display: inline-block; transition: transform .2s; line-height: 1; } .mr-list-row { cursor: pointer; transition: background .1s; } .mr-list-row:hover td { background: var(--surface-2) !important; } .mr-list-row.mr-row-open td { background: var(--info-bg) !important; font-weight: 600; color: var(--text-strong); } .mr-list-row.mr-row-open .mr-chevron { color: var(--info-text); } /* Inline detail row */ .mr-detail-tr > td { padding: 0 !important; border-bottom: 2px solid var(--border) !important; } .mr-detail-cell { background: var(--info-bg); border-top: none; padding: 14px 20px 18px 40px; } /* Mini summary chips */ .mr-inline-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .mr-sum-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; background: var(--surface); border: 1px solid #e0e4ee; font-size: .8rem; color: var(--text-muted); } .mr-sum-chip.mr-in { border-color: #a8e6bf; color: var(--success-text); background: var(--success-bg); font-weight: 700; } .mr-sum-chip.mr-out { border-color: #f5b7b1; color: var(--error-text); background: var(--error-bg); font-weight: 700; } .mr-sum-chip.mr-chip-users { color: var(--text-muted); } /* Inner detail table */ .mr-inner-table { width: 100%; border-collapse: collapse; font-size: .85rem; background: var(--surface); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.07); } .mr-inner-table thead th { padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid #e0e4ee; font-size: .7rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; text-align: left; white-space: nowrap; } .mr-inner-table td { padding: 8px 12px !important; border-bottom: 1px solid var(--border) !important; vertical-align: middle; } .mr-inner-table tbody tr:last-child td { border-bottom: none !important; } .mr-inner-table tbody tr:hover td { background: var(--info-bg); } /* Movements (Pohyby skladu) on mobile: trim columns so nothing runs off-screen. The dropped numbers are still shown in the expanded summary chips. */ @media (max-width: 640px) { /* Day rows: keep Date · In · Out · chevron; drop changes-count + users. */ .mr-table thead th:nth-child(3), .mr-table tbody td:nth-child(3), .mr-table thead th:nth-child(6), .mr-table tbody td:nth-child(6) { display: none; } .mr-table .mr-td-date { white-space: normal; } .mr-table th, .mr-table td { padding-left: 8px; padding-right: 8px; } /* Expanded detail: tighter padding + keep Time · Product · Change only (category / stock / type / note / user dropped to fit the screen). */ .mr-detail-cell { padding: 12px 12px 14px; } .mr-inner-table thead th:nth-child(3), .mr-inner-table tbody td:nth-child(3), /* category */ .mr-inner-table thead th:nth-child(5), .mr-inner-table tbody td:nth-child(5), /* stock after */ .mr-inner-table thead th:nth-child(6), .mr-inner-table tbody td:nth-child(6), /* type */ .mr-inner-table thead th:nth-child(7), .mr-inner-table tbody td:nth-child(7), /* note */ .mr-inner-table thead th:nth-child(8), .mr-inner-table tbody td:nth-child(8) /* user */ { display: none; } .mr-inner-table .mr-td-product { white-space: normal; word-break: break-word; } } /* ── Reports standalone page — tab buttons ─────────────────────────── */ .rp-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; } .rp-tab { padding: 7px 20px; border: 1.5px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text-muted); font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; display: inline-block; } .rp-tab:hover:not(.active) { border-color: var(--text-faint); color: var(--text); } .rp-tab.active { background: #1a1a2e; border-color: var(--text-strong); color: #fff; } /* Mobile: 3 equal-width tabs in one tidy row (instead of a ragged 2+1 wrap). Placed after the base rules so it wins source order; extra specificity too. */ @media (max-width: 640px) { .rp-tabs { flex-wrap: nowrap; gap: 6px; } .rp-tabs .rp-tab { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: .78rem; line-height: 1.2; text-align: center; white-space: normal; word-break: break-word; } } /* Current-page highlight for a toolbar link (e.g. Role permissions page) */ .btn-secondary[aria-current="page"] { background: #1a1a2e; color: #fff; } .btn-secondary[aria-current="page"]:hover { background: #1a1a2e; } /* ══════════════════════════════════════════════════════════════════════════ MOBILE DRAWER — hamburger + slide-in nav (always in DOM, hidden on desktop) ══════════════════════════════════════════════════════════════════════════ */ /* Hamburger button — hidden on desktop */ .mob-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border: none; background: rgba(255,255,255,.15); border-radius: 8px; cursor: pointer; flex-shrink: 0; order: -1; /* sit first → far left of the header on mobile */ } .mob-hamburger span { display: block; width: 100%; height: 2px; background: var(--surface); border-radius: 2px; transition: all .2s; } /* Overlay */ .mob-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 298; backdrop-filter: blur(1px); } .mob-overlay.open { display: block; } /* Drawer */ .mob-drawer { position: fixed; top: 0; left: 0; width: 280px; height: 100dvh; background: var(--surface); z-index: 299; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: 4px 0 24px rgba(0,0,0,.18); overflow: hidden; } .mob-drawer.open { transform: translateX(0); } /* Drawer header */ .mob-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 14px; background: #1a1a2e; flex-shrink: 0; } .mob-drawer-user { display: flex; align-items: center; gap: 10px; min-width: 0; } .mob-drawer-name { color: #fff; font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mob-drawer-close { width: 34px; height: 34px; border: none; background: rgba(255,255,255,.15); color: #fff; border-radius: 8px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Drawer body (scrollable nav) */ .mob-drawer-body { flex: 1; overflow-y: auto; padding: 8px 8px; display: flex; flex-direction: column; gap: 2px; } .mob-nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: none; background: transparent; color: var(--text); border-radius: 10px; cursor: pointer; font-size: .93rem; font-weight: 500; text-align: left; text-decoration: none; min-height: 48px; transition: background .12s; } .mob-nav-btn:hover, .mob-nav-btn:active { background: var(--surface-3); color: var(--text-strong); } .mob-nav-btn-active { background: var(--info-bg); color: var(--text-strong); font-weight: 700; } /* Indented Sklad sub-tools (mirrors the desktop sidebar submenu) */ .mob-nav-sub { padding-left: 36px; min-height: 42px; font-size: .88rem; color: var(--text-muted); } .mob-nav-sep { height: 1px; background: var(--surface-2); margin: 4px 6px; } .mob-nav-signout { color: var(--error-text); } .mob-nav-signout:hover { background: var(--error-bg); color: var(--error-text); } /* Drawer footer (language switcher) */ .mob-drawer-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); flex-shrink: 0; } .mob-drawer-foot .lang-btn { flex: 1; min-height: 40px; } /* Sign-out: full-width button on its own row below the language switcher */ .mob-drawer-foot .mob-nav-signout { flex: 1 0 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 4px; padding: 0 14px; border: 1px solid #f0c2bc; border-radius: 10px; background: var(--error-bg); color: var(--error-text); font-size: .92rem; font-weight: 600; text-decoration: none; } .mob-drawer-foot .mob-nav-signout::before { content: "⏻"; font-size: 1.05rem; line-height: 1; } .mob-drawer-foot .mob-nav-signout:hover, .mob-drawer-foot .mob-nav-signout:active { background: var(--error-bg); border-color: #e3a39b; color: #a93226; } /* ══════════════════════════════════════════════════════════════════════════ MOBILE (≤ 520px) — phone-first overrides ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 520px) { /* ── Header ── */ header { padding: 8px 12px; } /* Keep everything on one non-overflowing row. The title shows in full when it fits and only ellipsizes when a long tenant name would otherwise push the row past the 🐞 report button / hamburger (it can shrink to 0 — min-width:0 — so the row never overflows). The search box takes the leftover space but yields to the title; the action buttons stay fixed. */ .header-inner { gap: 8px; min-width: 0; flex-wrap: nowrap; } header h1 { font-size: 1.1rem; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .h1-logo { display: none; } /* hide glass icon, show app name */ /* Keep the notification bell (+ its dropdown panel) reachable on mobile; the rest of the user block — name / role / sign-out — lives in the drawer. The panel already has a mobile full-width rule above. */ .header-user { margin-left: 0; gap: 0; flex: 0 0 auto; } .header-user .user-name, .header-user .role-badge, .header-user .btn-signout { display: none; } .notif-btn { flex: 0 0 auto; } .mob-hamburger { display: flex; flex: 0 0 auto; } /* show hamburger */ .bugreport-hdr-btn { flex: 0 0 auto; } /* Prevent iOS auto-zoom (font-size must be ≥ 16px on inputs) */ input, select, textarea { font-size: 16px !important; } #search { flex: 1 1 90px; min-width: 64px; max-width: 220px; padding: 7px 14px; } /* ── Layout — no sidebar, full width ── */ .app-layout { padding: 10px 10px 24px; gap: 0; } .sidebar { display: none; } /* desktop sidebar hidden on mobile */ main { width: 100%; } /* ── Filters ── */ .filter-btn { padding: 6px 12px; font-size: .82rem; min-height: 38px; } .sub-filter-btn { padding: 5px 10px; font-size: .8rem; } .last-updated { display: none; } .stats { font-size: .8rem; gap: 10px; } /* ── Product table — hide non-essential columns ── 1=drag 2=Product 3=Supplier 4=Category 5=Type 6=Stock 7=Required 8=Price 9=Status 10=Updated 11=actions Keep: Product(2) · Stock(6) · Status(9) · Actions(11) */ .table-wrap { border-radius: 8px; } /* Columns: 1=drag 2=Product 3=Supplier 4=Category 5=Type 6=Stock 7=Required 8=Status 9=Updated 10=Actions Keep on mobile: Product(2) · Stock(6) · Status(8) · Actions(10) Scoped to .products-table so it doesn't leak into other tables (movements, scan, history, etc. — which also live in .table-wrap). */ .products-table thead tr th:nth-child(1), .products-table tbody tr td:nth-child(1), /* drag */ .products-table thead tr th:nth-child(3), .products-table tbody tr td:nth-child(3), /* Supplier */ .products-table thead tr th:nth-child(4), .products-table tbody tr td:nth-child(4), /* Category */ .products-table thead tr th:nth-child(5), .products-table tbody tr td:nth-child(5), /* Type */ .products-table thead tr th:nth-child(7), .products-table tbody tr td:nth-child(7), /* Required */ .products-table thead tr th:nth-child(9), .products-table tbody tr td:nth-child(9) /* Updated */ { display: none; } .table-wrap th { padding: 9px 8px; font-size: .72rem; } .table-wrap td { padding: 12px 8px; font-size: .9rem; } .name-editable { white-space: normal; word-break: break-word; max-width: 200px; } .stock-input { width: 58px; font-size: .9rem; padding: 5px 6px; } td.row-actions { padding: 8px 6px; text-align: center; } /* ── Modals — slide up as bottom sheet ── */ .modal-overlay { align-items: flex-end; padding: 0; } .modal { width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; margin: 0; } .modal-header { position: relative; padding: 20px 16px 14px; } /* Drag-handle indicator */ .modal-header::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; background: #ddd; border-radius: 2px; } .modal-body { padding: 16px; } .modal-footer { padding: 12px 16px; gap: 8px; } .modal-footer .btn { flex: 1; min-height: 44px; justify-content: center; } .modal.modal-dialog-wide { max-width: 100%; } /* Multi-column form rows would overflow the narrow sheet — stack them. (#staff-emp-modal uses display:grid and has its own 1fr override.) */ .modal .form-row { flex-direction: column; gap: 14px; } /* ── Scan ── */ .scan-upload-area { padding: 24px 16px; } .upload-actions { width: 100%; flex-direction: column; gap: 10px; } .upload-actions .upload-label { width: 100%; justify-content: center; min-height: 48px; } /* ── Scan results — convert table into card list ── */ .scan-table { display: block; } .scan-table thead { display: none; } /* hide column headers */ .scan-table tbody { display: block; } .scan-table tr { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .scan-table tr.no-match { background: var(--error-bg); border-color: #f5c2c0; opacity: 1; } .scan-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); min-height: 36px; } .scan-table tr td:last-child { border-bottom: none; padding-bottom: 0; } .scan-table tr td:first-child { padding-top: 0; } /* Label on the left, value on the right */ .scan-table td::before { content: attr(data-label); font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; flex-shrink: 0; } /* Special-case the checkbox row — center the checkbox, hide label */ .scan-table td.scan-td-check { border-bottom: 1px solid var(--border); padding: 4px 0 10px; margin-bottom: 4px; justify-content: flex-start; gap: 10px; } .scan-table td.scan-td-check::before { display: none; } .scan-table td.scan-td-check input[type="checkbox"] { width: 22px; height: 22px; accent-color: #27ae60; } /* Show the "recognized" text right next to the checkbox as the card title */ .scan-table td.scan-td-recognized { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 4px; font-weight: 700; font-size: 1rem; color: var(--text); justify-content: flex-start; } .scan-table td.scan-td-recognized::before { content: '🔍'; font-size: .9rem; text-transform: none; letter-spacing: 0; } /* Inputs full-width on the right for easy tapping */ .scan-qty-input, .scan-price-input { width: 90px; min-height: 36px; font-size: 16px; /* prevents iOS zoom */ } .scan-vat-sel { min-height: 36px; font-size: 14px; } /* Match cell — let the product name wrap and be a big tap target */ .scan-td-match .match-link { text-align: right; flex: 1; padding: 6px 10px; background: var(--info-bg); border-radius: 6px; color: var(--info-text); font-weight: 600; } .scan-td-match .match-link.match-none { background: var(--error-bg); color: var(--error-text); } /* Stock arrow visual: In stock → New stock */ .scan-td-new { font-weight: 700; } .scan-td-new .ns-warn, .scan-td-new.ns-warn { color: #e67e22; } /* Summary text */ .scan-summary { padding: 0 4px 10px; } /* ── Touch targets ── */ .btn-primary, .btn-secondary, .btn-danger { padding: 10px 18px; min-height: 44px; } /* ── Product detail form — single column on mobile ── */ .pf-header { padding: 22px 14px 12px; } .pf-title-input { font-size: 1.1rem; } .pf-form-section { padding: 12px 14px 4px; } .pf-grid { grid-template-columns: 1fr; gap: 10px; } .pf-row-full { grid-column: 1; } .pf-save-row { padding: 10px 14px 14px; } .pf-input { font-size: 16px; } /* prevent iOS zoom */ } /* ── Bug report ("Report a problem") floating button + modal ──────────────── */ .bugreport-fab { position: fixed; right: 16px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 3px 12px rgba(0,0,0,.18); font-size: 1.35rem; line-height: 1; cursor: pointer; z-index: 880; opacity: .9; transition: opacity .15s, transform .15s; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; } .bugreport-fab:hover { opacity: 1; transform: scale(1.06); } /* Header variant — matches the notification bell button. */ .bugreport-hdr-btn { padding: 6px 10px; background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.2); border-radius: 8px; cursor: pointer; font-size: 1.05rem; line-height: 1; transition: background .15s; -webkit-tap-highlight-color: transparent; } .bugreport-hdr-btn:hover { background: rgba(255,255,255,.2); } .bugreport-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 16px; } .bugreport-overlay.hidden { display: none; } .bugreport-box { background: var(--surface); border-radius: 14px; width: 100%; max-width: 420px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.3); } .bugreport-head { display: flex; align-items: center; justify-content: space-between; font-size: 1.05rem; color: var(--text); margin-bottom: 8px; } .bugreport-x { background: transparent; border: none; font-size: 1.1rem; cursor: pointer; color: #94a3b8; -webkit-tap-highlight-color: transparent; } .bugreport-hint { font-size: .85rem; color: var(--text-muted); margin: 0 0 12px; line-height: 1.45; } .bugreport-box textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; font: inherit; font-size: .95rem; resize: vertical; box-sizing: border-box; } .bugreport-err { color: #dc2626; font-size: .82rem; margin: 8px 0 0; min-height: 1em; } .bugreport-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; } .bugreport-cancel { background: var(--surface-2); border: none; border-radius: 8px; padding: 9px 16px; font-weight: 600; color: var(--text-muted); cursor: pointer; } .bugreport-send { background: #16a34a; border: none; border-radius: 8px; padding: 9px 18px; font-weight: 700; color: #fff; cursor: pointer; } .bugreport-send:disabled { opacity: .6; cursor: default; } .bugreport-done { text-align: center; padding: 28px 10px; font-size: 1rem; font-weight: 600; color: #16a34a; } .bugreport-done.hidden, .bugreport-form.hidden { display: none; } /* ── "Na vybavenie" action centre ────────────────────────────────────────── */ .todo-main { min-width: 0; } .todo-title { font-size: 1.4rem; font-weight: 700; color: var(--text-strong); } .todo-sub { color: var(--text-muted); margin: 4px 0 16px; font-size: .92rem; } .todo-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; } .todo-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .12s, background .12s; } .todo-card:hover { border-color: var(--border-strong); background: var(--surface-2); } .todo-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; } .todo-count { background: #e67e22; color: #fff; font-weight: 700; font-size: .8rem; min-width: 24px; text-align: center; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; } .todo-card-title { font-weight: 600; color: var(--text); flex: 1; min-width: 0; } .todo-card-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .todo-go { color: var(--info-text); font-weight: 700; font-size: .9rem; white-space: nowrap; } .todo-dismiss { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px; padding: 5px 10px; font-size: .82rem; cursor: pointer; } .todo-dismiss:hover { border-color: var(--border-strong); color: var(--text); } .todo-done { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--text-muted); padding: 48px 16px; font-size: 1.05rem; } .todo-empty { text-align: center; color: var(--text-faint); padding: 40px 16px; } @media (max-width: 520px) { .todo-card { flex-wrap: wrap; } .todo-card-actions { width: 100%; justify-content: flex-end; } } /* ── Typy zmien (shift templates) ──────────────────────────────────────────── */ .tmpl-intro { color: var(--text-muted); font-size: .9rem; margin: 4px 0 14px; max-width: 640px; } .tmpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .tmpl-day { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; } .tmpl-day-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .tmpl-day-name { font-weight: 700; color: var(--text-strong); font-size: .9rem; } .tmpl-add { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 1rem; line-height: 1; flex-shrink: 0; } .tmpl-add:hover { background: var(--surface-3); border-color: var(--border-strong); } .tmpl-day-shifts { display: flex; flex-direction: column; gap: 6px; } .tmpl-shift { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--info-text); border-radius: 8px; padding: 6px 9px; cursor: pointer; transition: background .12s, border-color .12s; } .tmpl-shift:hover { border-color: var(--border-strong); background: var(--surface-3); } .tmpl-shift-name { font-weight: 600; color: var(--text); font-size: .85rem; } .tmpl-shift-time { color: var(--text-muted); font-size: .78rem; font-variant-numeric: tabular-nums; } .tmpl-empty { color: var(--text-faint); font-size: .8rem; font-style: italic; } .tmpl-toolbar { margin-bottom: 14px; } .tmpl-weekday-pick { display: flex; flex-wrap: wrap; gap: 6px; } .tmpl-wd { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: .85rem; color: var(--text); background: var(--surface-2); user-select: none; } .tmpl-wd input { cursor: pointer; margin: 0; } /* Shift template quick-pick (in the add-shift modal) */ .shift-tmpl-pick { display: flex; flex-wrap: wrap; gap: 6px; } .shift-tmpl-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: .82rem; color: var(--text); cursor: pointer; } .shift-tmpl-chip:hover { border-color: var(--border-strong); background: var(--surface-3); } .shift-tmpl-chip.active { border-color: var(--info-text); background: var(--info-bg); } .sched-ag-name { font-weight: 700; color: var(--text-strong); } /* Vacation shift picker (step 3) */ .vac-shift-pick { display: flex; flex-direction: column; gap: 6px; } .vac-shift-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; cursor: pointer; background: var(--surface-2); font-size: .85rem; color: var(--text); } .vac-shift-chip input { margin: 0; cursor: pointer; } .vac-shift-hint { font-size: .78rem; color: var(--text-faint); margin-top: 4px; } /* ── Toast (transient success/info message) ─────────────────────── */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 12px 18px; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,.25); z-index: 9999; max-width: 90vw; text-align: center; } .toast-success { border-color: var(--success-text); color: var(--success-text); }