/* ============================================================================= POS Application Stylesheet — V23.0 Tailscale Fingerprint Ultra-clean, minimal borders, airy spacing ============================================================================= */ /* NO WEBFONT @import HERE — DELIBERATE. A CSS @import from an external host is RENDER-BLOCKING: the browser paints nothing until it resolves or times out. fonts.googleapis.com is routinely slow or unreachable on the networks this runs on, and every page (the shell plus each of its iframes) paid that cost on every fresh load — which is what made sign-out and refresh sit "loading" until the browser offered to kill the tab. It was also fetching nothing of value: Inter is not in --font-main, and Cairo is already shipped locally in fonts/cairo.css with the arabic, latin and latin-ext subsets. Pages link that file directly. */ /* ============================================================================= 1. PAGE LOAD & TRANSITION EFFECTS ============================================================================= */ /* Anti-flash: hide body until page is fully ready */ html.lang-loading body { opacity: 0 !important; } html.lang-ready body { opacity: 1; transition: opacity 0.15s ease-in; } /* Page transition overlay — prevents white flash between pages */ #page-transition-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-background, #f5f5f5); z-index: 999999; pointer-events: none; opacity: 0; transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1); } #page-transition-overlay.active { opacity: 1; } body.page-loading { overflow: hidden; } /* ============================================================================= 2. ANIMATIONS & KEYFRAMES ============================================================================= */ /* Content & rows — no opacity animations (prevents flashing) */ .pos-main, main { opacity: 1; } .product-table tbody tr, .sales-list tr { opacity: 1; } .pos-card, .summary-card, .stat-card { transition: box-shadow 0.15s ease; } /* Modal open/close — scale + fade */ @keyframes modalOpen { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal[style*="display: block"], .modal[style*="display:block"], #purchase-modal[style*="display: block"], #purchase-modal[style*="display:block"], #detail-modal[style*="display: block"], #detail-modal[style*="display:block"] { animation: modalOpen 0.2s cubic-bezier(0.4, 0, 0.2, 1) both; } /* Smooth dropdown/select interactions */ select, input, textarea { transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Active nav link — instant highlight, no jarring change */ .nav-btn { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important; } .nav-btn:active { transform: scale(0.97); transition: transform 0.08s ease !important; } /* Toast slide-in */ @keyframes toastSlide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } #toast-notification.show { animation: toastSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1) both; } /* Skeleton loading placeholder */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton-row td { background: linear-gradient(90deg, var(--color-border-light) 25%, var(--color-border) 50%, var(--color-border-light) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); color: transparent !important; user-select: none; } .skeleton-row td * { visibility: hidden; } /* ============================================================================= 3. CSS CUSTOM PROPERTIES (Design Tokens) ============================================================================= */ :root { /* ── Navigation ── */ --nav-bg: #ffffff; --nav-bg-flat: #ffffff; --nav-bg-hover: #f9fafb; --nav-active-bg: transparent; --nav-text: #6b6b70; --nav-text-active: #1d1d1f; /* ── Core Palette — monochrome BLACK accent (modern, unified) ── */ --color-primary: #1d1d1f; --color-primary-dark: #000000; --color-primary-light: #f1f1f3; --color-primary-glow: rgba(0, 0, 0, 0.06); --color-on-primary: #ffffff; /* text/icon sitting on a primary-filled surface */ --color-on-accent: #ffffff; /* ...and on a red / amber / green one */ /* Contrast pass (2026-10-07): every accent reads at >= 4.5:1 as text on white AND carries white ink at >= 4.5:1 as a fill. */ --color-green: #047857; --color-green-dark: #065f46; --color-green-light: #ecfdf5; --color-green-glow: rgba(5, 150, 105, 0.06); --color-red: #dc2626; --color-red-dark: #b91c1c; --color-red-light: #fef2f2; --color-red-glow: rgba(220, 38, 38, 0.06); --color-amber: #b45309; --color-amber-light: #fffbeb; --color-amber-glow: rgba(217, 119, 6, 0.06); --color-amber-border: #fcd34d; --color-green-border: #a7f3d0; --color-red-border: #fecaca; --color-cyan: #0891b2; --color-violet: #7c3aed; --color-violet-light: #f5f3ff; --color-orange: #e67e22; --color-orange-light: #fff7ed; /* ── Text & Surface — Tailscale's near-monochrome ── */ --color-text: #1d1d1f; --color-text-secondary: #55555a; /* Was #a1a1a6 (2.6:1 on white). Muted is for hints and meta, not for text nobody needs to read — it still has to be readable on a bright shop screen. */ --color-text-muted: #646a6f; --color-background: #f5f5f7; --color-surface: #ffffff; /* Firm enough that a field reads as a shape rather than a suggestion. The lightest of the three skins by design, so it takes the smallest lift. */ --color-border: #c9ccd1; --color-border-light: #dcdee2; /* Barcode label preview: a picture of the paper label, which is white with black ink in every skin (barcode-labels.js). */ --color-label-paper: #ffffff; --color-label-ink: #000000; /* SERVICES — the same warm ochre the printed services table uses, so a tile in the POS and a section on the customer's invoice read as one thing. */ --svc-ink: #7a5426; --svc-line: #cbb08a; --svc-tint: #f7f2ea; /* ── Typography — Cairo primary (Arabic-first UI), system stack as fallback ── */ --font-main: 'Cairo', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Arabic', 'Segoe UI', system-ui, sans-serif; --font-arabic: 'Cairo', 'Segoe UI Arabic', 'Segoe UI', system-ui, sans-serif; /* ── Type scale — EIGHT sizes, no more (11/12/13/14/16/18/22/28px). The audit found ~20 ad-hoc sizes in use; every font-size in the app now maps to one of these. 13px (--fs-sm) is the working size — tables, inputs, buttons — the same chrome size Fusion 360 and VS Code run on. Print pages are exempt: paper has its own rules. ── */ --fs-2xs: 0.6875rem; /* 11px — badges, footnote hints */ --fs-xs: 0.75rem; /* 12px — secondary labels, table meta */ --fs-sm: 0.8125rem; /* 13px — THE working size: cells, fields, buttons */ --fs-md: 0.875rem; /* 14px — emphasized rows, section labels */ --fs-lg: 1rem; /* 16px — in-page headings */ --fs-xl: 1.125rem; /* 18px — modal titles */ --fs-2xl: 1.375rem; /* 22px — page titles, KPI figures */ --fs-3xl: 1.75rem; /* 28px — hero numbers only */ /* ── Shadows — subtle depth cues ── */ --shadow-xs: 0 0 0 .5px rgba(0,0,0,0.03), 0 1px 1px rgba(0,0,0,0.04); --shadow-sm: 0 0 0 .5px rgba(0,0,0,0.035), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 0 0 .5px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06); --shadow-lg: 0 0 0 .5px rgba(0,0,0,0.04), 0 10px 28px rgba(0,0,0,0.08); --shadow-xl: 0 0 0 .5px rgba(0,0,0,0.05), 0 20px 48px rgba(0,0,0,0.12); /* ── Shape — crisp, near-square corners (user preference: ~square). lg/xl kept tiny so cards/panels/modals are square too; pills stay round. ── */ /* ONE unified radius for every rectangular element — inputs, buttons, cards, panels, toolbars, modals — so shapes read as a single system across all tabs. Pills/circles (--radius-pill, 50%) stay round. */ --radius-sm: 10px; --radius: 10px; --radius-lg: 10px; --radius-xl: 10px; --radius-pill: 100px; --transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1); --transition-spring: all 0.28s cubic-bezier(0.34, 1.32, 0.64, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ── Airy spacing scale ── */ --space-xs: 4px; --space-sm: 6px; --space-md: 10px; --space-lg: 14px; --space-xl: 20px; /* ── Fixed Sizing ── 32px controls since the 2026-10-07 refresh (13px text in a 28px box left 7px for an Arabic ascender + descender). The old 28px scale lives on as html.density-compact — Settings → المظهر → كثافة العرض — for tills that need every row on one screen. ── */ --input-height: 32px; --btn-height: 32px; --btn-height-sm: 26px; --row-pad-y: 7px; /* table cell padding: 13px text -> ~34px rows */ /* ── Global accent for native controls ── */ accent-color: var(--color-primary); } /* ============================================================================= 3a-2. FUSION SKIN — the DEFAULT appearance (Autodesk Fusion 360 inspired). Toggled by `theme-fusion` on ; the selector lives in Settings → المظهر. WHY THIS IS AN OVERRIDE AND NOT A REWRITE OF :root -------------------------------------------------- :root above is left exactly as it was — it IS the "macOS" skin. Making Fusion the default by editing those values in place would have meant no way back except a git revert, and would have silently changed every screen for anyone who preferred the old look. As an additive class, switching skins is one attribute on and the old appearance is never lost. WHAT THIS BLOCK DELIBERATELY DOES NOT TOUCH ------------------------------------------- --input-height / --btn-height / --btn-height-sm (the 28px compact system — a separate, hard-won scale; Fusion is dense too, so there is no reason to disturb it), the spacing scale, the font stack, and the transitions. Appearance changes; geometry and rhythm do not. ORDER MATTERS: this sits BEFORE .theme-dark so dark mode still wins on colour while this keeps control of shape and depth. The two compose. ============================================================================= */ :root.theme-fusion { /* Chrome reads as chrome. The single biggest reason the current UI feels "soft" is that sidebar, toolbar and content are all pure white — nothing tells the eye where the tool ends and the document begins. */ --nav-bg: #f4f5f6; --nav-bg-flat: #f4f5f6; --nav-bg-hover: #e4e7e9; --nav-active-bg: transparent; --nav-text: #5a5f63; --nav-text-active: #2b2b2b; /* Autodesk blue, used sparingly — accent, not decoration. Deepened in the 2026-10-07 contrast pass: #0696D7 carried white button text at 3.31:1 and read as link text at the same 3.31:1. #056e9e is 5.6:1 under white ink and at least 4.5:1 as text on EVERY ground of this skin — white, the page (#e9ebec), the sidebar and its hover, and the selected-row tint below. Hover moves one step deeper. */ --color-primary: #056e9e; --color-primary-dark: #045a82; --color-primary-light: #e6f4fb; --color-primary-glow: rgba(5, 110, 158, 0.18); --color-on-primary: #ffffff; --color-on-accent: #ffffff; /* Status hues pulled slightly toward the cooler ground so they sit in the same world as the accent instead of looking borrowed. */ /* 2026-10-07: green #3d8b40 (4.23:1) and amber #c77700 (3.46:1) failed as text and as fills under white ink; both now clear 4.5:1 either way. */ --color-green: #2e7d32; --color-green-dark: #1b5e20; --color-green-light: #eef5ee; --color-red: #c62828; --color-red-dark: #a51f1f; --color-red-light: #fdf0f0; --color-amber: #9a5c00; --color-amber-light: #fdf6ea; /* Cool neutral greys. #2b2b2b rather than pure black: at this density a true black on grey vibrates. */ --color-text: #2b2b2b; --color-text-secondary: #50555a; /* Was #8b9196: 3.19:1 on white and 2.67:1 on the page ground. */ --color-text-muted: #646a6f; --color-background: #e9ebec; --color-surface: #ffffff; /* A border you can actually see — and now one the eye resolves as an EDGE without looking for it, which is what "solid" means on a screen a cashier scans rather than reads. */ --color-border: #a8aeb4; --color-border-light: #c8ccd0; /* Barcode label preview: a picture of the paper label, which is white with black ink in every skin (barcode-labels.js). */ --color-label-paper: #ffffff; --color-label-ink: #000000; /* SERVICES — see :root. Same hue, a touch firmer to sit on this skin's ground. */ --svc-ink: #6f4b20; --svc-line: #c0a37a; --svc-tint: #f5efe5; /* Depth comes from hairlines, not haze. Shadows are reserved for things that genuinely float (modals, menus) — everything else gets a border. */ --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05); --shadow-sm: none; --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.13); --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.16); --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.20); /* The tightest corner that still reads as intentional. This one change carries more of the "precision instrument" feel than the palette does. */ --radius-sm: 3px; --radius: 3px; --radius-lg: 4px; --radius-xl: 4px; /* --radius-pill stays 100px — pills and avatars must remain round. */ } /* ============================================================================= 3b. DARK MODE — flips the design tokens; every surface built on the CSS variables adapts automatically. Toggled by `theme-dark` on . ============================================================================= */ :root.theme-dark { --nav-bg: #1c1c1e; --nav-bg-flat: #1c1c1e; --nav-bg-hover: #2c2c2e; --nav-active-bg: transparent; --nav-text: #a1a1a6; --nav-text-active: #f2f2f7; /* The accent KEEPS ITS HUE on dark (2026-10-07). It used to invert to near-white #f2f2f7, so a primary button looked like any other light surface and a selected row like a hovered one. A lightened Autodesk blue reads as the same brand on the dark ground: 7.4:1 under the dark ink below, 7.0:1 as text on #1c1c1e. Still a LIGHT accent, so the ink rule is unchanged — --color-on-primary stays dark. */ --color-primary: #4fb6ea; --color-primary-dark: #7cc8f0; /* "hover" lightens on a dark ground */ --color-primary-light: #1f3846; /* selected / hover tint, blue not grey */ --color-primary-glow: rgba(79, 182, 234, 0.22); --color-on-primary: #1d1d1f; /* EVERY accent lightens on this skin — red to #f87171, amber to #f0a53a, green to #10b981 — precisely so they read AS colours against the dark ground. White text on any of them lands around 2.8:1, so the ink has to invert with them. One token, because the arithmetic is the same for all three. */ --color-on-accent: #1d1d1f; --color-green: #10b981; --color-green-dark: #059669; --color-green-light: #13291f; --color-green-glow: rgba(16, 185, 129, 0.10); --color-green-border: #1e5340; --color-red: #f87171; --color-red-dark: #ef4444; --color-red-light: #2b1618; --color-red-glow: rgba(248, 113, 113, 0.10); --color-red-border: #5e2b2b; --color-amber: #f0a53a; --color-amber-light: #2a2010; --color-amber-glow: rgba(240, 165, 58, 0.10); --color-amber-border: #5c4519; --color-cyan: #22b8cf; --color-violet: #a78bfa; --color-violet-light: #241f33; --color-orange: #f0894a; --color-orange-light: #2a1c12; --color-text: #f2f2f7; --color-text-secondary: #b4b4bb; --color-text-muted: #9a9aa1; /* 6.2:1 on #1c1c1e — already fine */ --color-background: #1c1c1e; --color-surface: #2c2c2e; /* On a dark ground an edge is firmed by lightening it, not darkening it — the same perceptual step as the two light skins, in the other direction. */ --color-border: #4e5052; --color-border-light: #414244; /* Barcode label preview: a picture of the paper label, which is white with black ink in every skin (barcode-labels.js). */ --color-label-paper: #ffffff; --color-label-ink: #000000; /* SERVICES — the same hue carried onto a dark ground: lightened to stay legible, and the tint darkened so it reads as a surface, not a highlight. */ --svc-ink: #d9b585; --svc-line: #6d5b3c; --svc-tint: #332a1e; --shadow-xs: 0 0 0 .5px rgba(0,0,0,0.5), 0 1px 1px rgba(0,0,0,0.4); --shadow-sm: 0 0 0 .5px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 0 0 .5px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 0 0 .5px rgba(0,0,0,0.5), 0 10px 28px rgba(0,0,0,0.55); --shadow-xl: 0 0 0 .5px rgba(0,0,0,0.6), 0 20px 48px rgba(0,0,0,0.6); color-scheme: dark; } :root.theme-dark body { background-color: var(--color-background); color: var(--color-text); } /* ============================================================================= 3c. DENSITY — the 2026-10-07 refresh moved controls to 32px and table text to 13px. `density-compact` on (Settings → المظهر → كثافة العرض, applied before first paint by desktop-bridge.js from localStorage.ui_density) brings back the old 28px scale for tills that need every row on one screen. It only moves geometry, so it composes with every skin, light or dark. ============================================================================= */ :root.density-compact { --input-height: 28px; --btn-height: 28px; --btn-height-sm: 24px; --row-pad-y: 4px; } /* Money in a column: digits of equal width, aligned to the END so units sit under units, and the whole figure laid out as one left-to-right unit (the formatter isolates negatives; this covers figures written by other code). */ .money, td.money, th.money, .col-num { font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; } .money { unicode-bidi: isolate; } /* ============================================================================= 4. BASE RESET & TYPOGRAPHY ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } button, input, select, textarea { font-family: var(--font-main); } body { font-family: var(--font-main); direction: rtl; background-color: var(--color-background); color: var(--color-text); overflow: hidden; height: 100vh; display: flex; flex-direction: column; font-size: var(--fs-sm); line-height: 1.4; font-weight: 400; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Removed contain:style — it was causing rendering glitches and flash-through */ img { content-visibility: auto; } /* Thin OUTLINE icons app-wide — match the reference's clean line-icon look. FILL 0 = outline (not filled); lighter weight = thinner strokes. The `span.` selector out-specifies Google's base .material-symbols-rounded regardless of stylesheet load order. */ span.material-symbols-rounded, span.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } /* Lucide SVG icons — icons.js swaps the Material glyph for a Lucide SVG (exact reference icon design). The SVG sizes to the element's font-size and inherits its color via stroke=currentColor. */ .material-symbols-rounded > svg.lucide-svg, .material-symbols-outlined > svg.lucide-svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } /* ============================================================================= 5. NAVIGATION (Header, Topbar, Nav Buttons) ============================================================================= */ .pos-container { display: flex; flex-direction: column; height: 100%; } .pos-header { background: var(--nav-bg); color: var(--color-text); padding: 0 16px; display: flex; justify-content: space-between; align-items: center; z-index: 100; flex-shrink: 0; position: relative; height: 42px; border-bottom: 1px solid var(--color-border); } .header-brand { display: flex; align-items: center; gap: 8px; } .pos-header h1 { font-size: var(--fs-sm); font-weight: 700; margin: 0; color: var(--color-text); letter-spacing: 0; } .mobile-menu-btn { display: none; background: transparent; border: none; font-size: var(--fs-2xl); color: var(--color-text); cursor: pointer; padding: 4px; } /* Nav: Tailscale-style — clean icons + text, subtle active */ .main-nav { display: flex; gap: 0; align-items: stretch; height: 100%; } .main-nav .nav-btn { color: var(--nav-text); text-decoration: none; padding: 0 8px; height: 100%; font-weight: 500; font-size: var(--fs-xs); transition: color 0.15s ease; white-space: nowrap; line-height: 40px; display: inline-flex; align-items: center; gap: 3px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .main-nav .nav-btn .material-symbols-rounded { font-size: var(--fs-lg); font-variation-settings: 'wght' 300, 'FILL' 0, 'opsz' 20; opacity: 0.7; } .main-nav .nav-btn.active { color: var(--nav-text-active); border-bottom-color: var(--color-primary); font-weight: 600; } .main-nav .nav-btn.active .material-symbols-rounded { opacity: 1; } .main-nav .nav-btn:hover:not(.active) { color: var(--color-primary); background: var(--color-primary-light); border-bottom-color: var(--color-primary-glow); } .main-nav a[style*="margin-right: auto"] { background: var(--color-red) !important; color: var(--color-on-accent) !important; margin-right: 0 !important; margin-left: auto; border-radius: var(--radius); border-bottom: 2px solid transparent !important; padding: 0 14px !important; height: 34px; line-height: 34px; align-self: center; font-size: var(--fs-xs) !important; } /* ============================================================================= 6. LAYOUT COMPONENTS (Containers, Grid, Flex) ============================================================================= */ .pos-main, .warehouse-main, .report-main { display: flex; flex: 1; padding: 12px; gap: 10px; overflow: hidden; align-items: stretch; } .warehouse-main { display: flex; flex-direction: row; align-items: stretch; overflow: hidden; } .product-list-panel { flex: 1 1 0%; display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px; min-width: 0; } .product-form-panel { flex: 0 0 440px; overflow-y: auto; padding: 12px 14px; } .settings-panel { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); padding: 10px; height: auto !important; overflow: visible !important; } .control-panel { flex: 0 0 33%; max-width: 33%; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-bottom: 6px; background: transparent !important; border: none !important; box-shadow: none !important; } .sales-panel { flex: 0 0 67%; max-width: 67%; display: flex; flex-direction: column; padding: 0; overflow: hidden; } .report-main { overflow-y: auto; flex-direction: column; } .settings-user-section { display: flex; gap: 10px; padding: 0; } /* ============================================================================= 7. CARDS & PANELS ============================================================================= */ .product-list-panel, .product-form-panel, .control-panel > div, .settings-form-container, .report-filters, .report-content-wrapper, .sales-panel { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } /* ============================================================================= 8. FORM ELEMENTS (Inputs, Selects, Textareas) ============================================================================= */ .form-row { display: flex; gap: 14px; margin-bottom: 14px; } .form-row .form-group { flex: 1; min-width: 0; } .form-group { margin-bottom: 14px; } .form-group label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--color-text-secondary); font-size: var(--fs-xs); letter-spacing: normal; } /* :where() contributes ZERO specificity, so this whole selector is (0,0,1) — a plain element rule. Written as `input[type="text"]` it was (0,1,1), which silently out-ranked every single-class rule in the app: a component that set its own padding, border, width or background got those declarations discarded no matter where they sat, because specificity beats source order. That is why the POS search icon and the purchases selected-tick were painted on top of text, and why e.g. `.pos-cust-input` asks for `border:none` yet still draws a border. These are DEFAULTS; a component that states an intention should win. */ input:where([type="text"], [type="password"], [type="number"], [type="date"], [type="email"], [type="datetime-local"]), select, textarea { width: 100%; height: var(--input-height); padding: 0 10px; font-size: var(--fs-sm); border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-main); background-color: var(--color-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; color: var(--color-text); line-height: normal; appearance: none; -webkit-appearance: none; font-weight: 500; } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M3 5l3 3 3-3H3z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; padding-left: 28px; cursor: pointer; accent-color: var(--color-primary); } select option { padding: 6px 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--color-text); background: var(--color-surface); line-height: 1.5; min-height: 28px; } select option:checked, select option:hover { background: var(--color-primary-light); color: var(--color-primary); } select:hover { border-color: var(--color-text-muted); } textarea { height: auto; padding: 6px 8px; min-height: 50px; line-height: 1.5; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); } input::placeholder, textarea::placeholder { color: var(--color-text-muted); } /* A FIELD BEING EDITED IS UNMISTAKABLE. Everything else firms by colour at the same 1px, but focus is the one state where the extra weight carries meaning — it says "your typing lands here", and on a till that is worth the pixel. */ input:focus, select:focus, textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 22%, transparent); } input:disabled, select:disabled { background-color: var(--color-border-light); cursor: not-allowed; color: var(--color-text-muted); } .form-group-row { display: flex; gap: 8px; } .form-group-row .form-group { flex: 1; } #fees-section input[type="number"] { text-align: center; font-weight: 600; } #delivery-fee-input { color: var(--color-green); border-color: var(--color-green-border); background-color: var(--color-green-light); } #discount-input { color: var(--color-red); border-color: var(--color-red-border); background-color: var(--color-red-light); } /* ============================================================================= 9. BUTTONS ============================================================================= */ .btn { height: var(--btn-height); padding: 0 12px; font-size: var(--fs-sm); font-weight: 600; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; font-family: var(--font-main); transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; gap: 5px; line-height: 1; white-space: nowrap; letter-spacing: 0; box-shadow: var(--shadow-xs); } .btn:hover { box-shadow: var(--shadow-sm); } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .btn-dark { background: var(--color-text); color: var(--color-surface); border-color: var(--color-text); } .btn-dark:hover { background: var(--color-text-secondary); border-color: var(--color-text-secondary); } .btn-danger { background: var(--color-red); color: var(--color-on-accent); border-color: var(--color-red); } .btn-danger:hover { background: var(--color-red-dark); border-color: var(--color-red-dark); } .btn-danger-outline { background: var(--color-red-light); color: var(--color-red); border: 1px solid var(--color-red); } .btn-danger-outline:hover { background: var(--color-red); color: var(--color-on-accent); } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .btn-secondary:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } .btn-outline { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .btn-outline:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } .btn-full-width { width: 100%; } /* Small buttons */ .btn-small, .product-table .btn-small-pay, .product-table .btn-edit, .product-table .btn-view { height: var(--btn-height-sm); padding: 0 8px; font-size: var(--fs-2xs); border-radius: var(--radius); border: 1px solid var(--color-border); cursor: pointer; font-family: var(--font-main); margin-left: 3px; color: var(--color-text-secondary); font-weight: 500; background: var(--color-surface); transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; } .product-table .btn-small-pay:hover { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); } .product-table .btn-edit:hover, .product-table .btn-view:hover { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); } .btn-delete, .btn-small-cancel, .product-table .btn-small-cancel, .product-table .btn-delete { height: var(--btn-height-sm); padding: 0 8px; font-size: var(--fs-2xs); border-radius: var(--radius); margin-left: 3px; font-weight: 500; cursor: pointer; background: var(--color-red); color: var(--color-on-accent) !important; border: 1px solid var(--color-red); transition: var(--transition); font-family: var(--font-main); display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .btn-delete:hover, .btn-small-cancel:hover { background: var(--color-red-dark); border-color: var(--color-red-dark); } .btn-delete-item { width: 26px; height: 26px; font-size: var(--fs-xs); margin: 0 auto; padding: 0; background: var(--color-red-light) !important; color: var(--color-red) !important; border: 1px solid var(--color-red) !important; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--font-main); transition: var(--transition); } .btn-delete-item:hover { background: var(--color-red) !important; color: var(--color-on-accent) !important; } /* ============================================================================= 10. TABLES ============================================================================= */ .table-container { flex: 1; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); } .product-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: var(--fs-sm); overflow: hidden; } /* 13px cells and 12px BOLD headers (2026-10-07). They had drifted to 12px with 11px muted headers — small for Arabic letterforms, and a header lighter than its data reads as a placeholder. Row height follows --row-pad-y, which the compact density shrinks back. */ .product-table th, .product-table td { padding: var(--row-pad-y) 10px; text-align: start; border-bottom: 1px solid var(--color-border-light); font-size: var(--fs-sm); white-space: nowrap; font-weight: 500; line-height: 1.4; } .product-table th { background: var(--color-background); font-weight: 700; color: var(--color-text-secondary); position: sticky; top: 0; font-size: var(--fs-xs); letter-spacing: 0; z-index: 5; border-bottom: 1px solid var(--color-border); padding: var(--row-pad-y) 10px; } .product-table tbody tr { transition: background 0.1s; cursor: pointer; } .product-table tbody tr:hover { background: var(--color-background); } .product-table tfoot td { font-weight: 700; font-size: var(--fs-sm); background: var(--color-background); border-top: 1px solid var(--color-border); } /* ── Warehouse product table ───────────────────────────────────────── Every column is addressed by its OWN CLASS, never by nth-child. The block this replaces was written for 14 columns and keyed on position. When the store-sync column (المتجر) was later inserted at position 14 it pushed إجراءات out to position 15 — which had no rule at all. Under table-layout:fixed a column with no width, in a table whose other columns already claim 100% (121% once the ≥1920px block widened columns 1 and 2), is given nothing: the actions column measured 0.09px. It had not scrolled off the edge, it had been squeezed out of existence. Keying widths to classes means inserting a column can never again starve another one. The widths below are only a FALLBACK. table-columns.js writes the live widths onto the elements, normalised across the columns that are actually visible so they always total exactly 100% — that is what keeps the table inside the viewport with no horizontal scrollbar, and what lets a user drag one column wider without shoving the last one off the screen. */ .warehouse-products-table { table-layout: fixed; } .warehouse-products-table thead th { background: var(--color-background); border-bottom: 1px solid var(--color-border); } .warehouse-products-table tbody tr:hover { background: var(--color-primary-light); } /* zebra off, 2026-10-07 */ /* Fallback widths — used only until table-columns.js applies the stored ones. */ .warehouse-products-table .wh-c-num { width: 6%; } .warehouse-products-table .wh-c-sku { width: 9%; } /* a 12-digit UPC-A fits on one line */ .warehouse-products-table .wh-c-name { width: 14%; } .warehouse-products-table .wh-c-cost { width: 7%; } .warehouse-products-table .wh-c-price { width: 7%; } .warehouse-products-table .wh-c-box { width: 7%; } .warehouse-products-table .wh-c-ws { width: 6%; } .warehouse-products-table .wh-c-wws { width: 6%; } .warehouse-products-table .wh-c-stock { width: 6%; } .warehouse-products-table .wh-c-alert { width: 4%; } .warehouse-products-table .wh-c-unit { width: 6%; } .warehouse-products-table .wh-c-cat { width: 6%; } .warehouse-products-table .wh-c-country { width: 5%; } .warehouse-products-table .wh-c-store { width: 6%; } .warehouse-products-table .wh-c-actions { width: 5%; } /* Per-column behaviour: alignment, wrapping, numerals. */ .warehouse-products-table .wh-c-num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default; } /* SKU wraps so the whole code stays readable however narrow it is dragged. */ .warehouse-products-table .wh-c-sku { white-space: normal; word-break: break-all; overflow-wrap: anywhere; font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.4; } /* The product name is the column that absorbs the slack; it wraps to 2–3 lines. */ .warehouse-products-table .wh-c-name { white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.4; font-weight: 600; text-align: start; } /* Money: right-aligned, tabular, one line. */ .warehouse-products-table .wh-c-cost, .warehouse-products-table .wh-c-price, .warehouse-products-table .wh-c-box, .warehouse-products-table .wh-c-ws, .warehouse-products-table .wh-c-wws { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-sm); } /* Stock shows a box/unit breakdown and may run to two lines. */ .warehouse-products-table .wh-c-stock { white-space: normal; line-height: 1.4; } .warehouse-products-table .wh-c-alert { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; } .warehouse-products-table .wh-c-unit, .warehouse-products-table .wh-c-cat, .warehouse-products-table .wh-c-country { /* break-word, not anywhere (2026-10-07): "anywhere" split Arabic words between their joined letters — «قطع / ة», «الوحد / ة» — in the narrow columns. A word now only breaks if it cannot fit the cell on its own; the columns were widened from the name column's share so the common words fit. */ white-space: normal; text-align: center; line-height: 1.35; overflow-wrap: break-word; } .warehouse-products-table thead th.wh-c-unit, .warehouse-products-table thead th.wh-c-cat, .warehouse-products-table thead th.wh-c-country { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .warehouse-products-table .wh-c-store { text-align: center; } .warehouse-products-table .wh-c-actions { text-align: center; white-space: nowrap; } .product-table td { vertical-align: middle; } /* ── Resolution-adaptive sizing (customers run everything from small laptops to 4K) ── The table never shrinks below a legible width; on wide screens it fills the space (proportional columns + sticky header), and on narrower laptops it scrolls horizontally instead of squishing the columns. Phones (≤768px) use cards instead. */ /* No unconditional floor. A floor makes the percentages resolve against 1060px instead of the container, so on anything narrower the table overflowed and the last column paid for it again — the exact failure this change removes. Below 1024px, where 15 columns genuinely cannot stay legible, scrolling is the deliberate escape hatch rather than an accident. */ @media (max-width: 1024px) { .warehouse-products-table { min-width: 1000px; } .wh-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Denser cells on common laptop widths so every column fits comfortably */ @media (max-width: 1440px) { .warehouse-products-table th, .warehouse-products-table td { padding-top: 8px; padding-bottom: 8px; padding-inline: 9px; } } @media (max-width: 1280px) { .warehouse-products-table { font-size: var(--fs-xs); } .warehouse-products-table th, .warehouse-products-table td { padding-inline: 7px; } .warehouse-products-table .wh-c-cost, .warehouse-products-table .wh-c-price, .warehouse-products-table .wh-c-box, .warehouse-products-table .wh-c-ws, .warehouse-products-table .wh-c-wws { font-size: var(--fs-xs); } } /* ── Warehouse: product purchase history ─────────────────────────────── Its own class, never .product-table: auth.js injects a global `.product-table th:nth-child(3){display:none!important}` for users without warehouse.view_cost, and this table's third column is the supplier. */ .wh-po-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); } .wh-po-table th { text-align: start; font-weight: 700; font-size: var(--fs-2xs); color: var(--color-text-secondary); padding: 6px 8px; white-space: nowrap; border-bottom: 1px solid var(--color-border); background: var(--color-background); } .wh-po-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; } .wh-po-table tbody tr:last-child td { border-bottom: none; } .wh-po-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } /* The native figure sits under the dinars, and only when it says something the dinars do not — i.e. the line was bought in dollars. */ .wh-po-table .native { display: block; font-size: var(--fs-2xs); color: var(--color-text-muted); } .wh-po-doc { font-weight: 700; font-variant-numeric: tabular-nums; } .wh-po-ref { display: block; font-size: var(--fs-2xs); color: var(--color-text-muted); } .wh-po-lines { display: inline-block; margin-inline-start: 6px; padding: 0 6px; border-radius: var(--radius-sm); font-size: var(--fs-2xs); font-weight: 600; color: var(--color-amber, #d97706); border: 1px solid currentColor; vertical-align: middle; } .wh-po-scroll { max-height: 260px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .wh-po-empty { text-align: center; padding: 14px; color: var(--color-text-muted); font-size: var(--fs-xs); } .wh-po-open { cursor: pointer; } .wh-po-open:hover { background: var(--color-primary-light); } /* ── Warehouse: product-detail MODAL (opens centered like the purchases edit window) ── 2026-10-09: the owner found it messy. Now: who the product is and its four figures at the top, then one tab at a time (details / photos / purchase invoices / price history), and the barcode + "edit in purchases" line at the foot — instead of everything stacked with an empty photo column beside it. */ #wh-detail-modal { width: 94%; max-width: 760px; padding: 0; } #detail-content { padding: 18px 22px 16px; } .wh-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .wh-pv-id { display: flex; align-items: center; gap: 12px; min-width: 0; } .wh-pv-face { flex: none; width: 52px; height: 52px; border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); color: var(--color-primary); font-size: var(--fs-xl); font-weight: 800; } .wh-pv-face.has-img { background: var(--color-background); } .wh-pv-face img { width: 100%; height: 100%; object-fit: cover; } .wh-pv-names { min-width: 0; } .wh-detail-head h2.wh-pv-eyebrow { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-muted); } .wh-pv-name { font-size: var(--fs-lg); font-weight: 800; color: var(--color-text); line-height: 1.35; overflow-wrap: anywhere; } .wh-pv-meta { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 2px; overflow-wrap: anywhere; } .wh-pv-meta:empty { display: none; } .wh-pv-close { flex: none; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--color-background); color: var(--color-text-secondary); } .wh-pv-close:hover { background: var(--color-border-light); color: var(--color-text); } .wh-pv-close svg, .wh-pv-close .material-symbols-rounded { width: 18px; height: 18px; } .wh-pv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; } .wh-pv-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--color-background); border: 1px solid var(--color-border-light); } .wh-pv-k { font-size: var(--fs-2xs); font-weight: 600; color: var(--color-text-secondary); } .wh-pv-v { font-size: var(--fs-md); font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wh-pv-v small { font-size: var(--fs-2xs); font-weight: 600; color: var(--color-text-secondary); } .wh-pv-s { font-size: var(--fs-2xs); color: var(--color-text-muted); min-height: 1.2em; } .wh-pv-stat.low { background: var(--color-amber-light); border-color: transparent; } .wh-pv-stat.low .wh-pv-v, .wh-pv-stat.low .wh-pv-s { color: var(--color-amber); } .wh-pv-stat.out { background: var(--color-red-light); border-color: transparent; } .wh-pv-stat.out .wh-pv-v, .wh-pv-stat.out .wh-pv-s { color: var(--color-red); } .wh-pv-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--color-background); border-radius: var(--radius); overflow-x: auto; scrollbar-width: none; } .wh-pv-tabs::-webkit-scrollbar { display: none; } .wh-pv-tab { flex: 1 0 auto; height: 34px; min-height: 34px; padding: 0 12px; margin: 0; border: 0; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; white-space: nowrap; background: transparent; color: var(--color-text-secondary); font: 600 var(--fs-sm)/1 var(--font-main); } .wh-pv-tab:hover { color: var(--color-text); } .wh-pv-tab.active { background: var(--color-surface); color: var(--color-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .wh-pv-tab[hidden] { display: none; } .wh-pv-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-primary-light); color: var(--color-primary); font-size: var(--fs-2xs); } .wh-pv-n:empty { display: none; } .wh-pv-panel[hidden] { display: none !important; } .wh-pv-hint { margin: 0 0 10px; font-size: var(--fs-xs); color: var(--color-text-muted); } #detail-content #product-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: start; } #detail-content #product-form > .form-group-row, #detail-content #product-form > .wh-span, #detail-content #product-form > hr, #detail-content #product-form > .form-buttons, #detail-content #product-form > #product-suppliers-group { grid-column: 1 / -1; } #detail-content #product-form > .form-group-row { display: flex; gap: 16px; margin: 0; } #detail-content #product-form > .form-group-row > .form-group { flex: 1; } #detail-content #product-form .form-group { margin: 0; } .wh-pv-suppliers { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; max-height: 160px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } #detail-content #product-images-section { margin-top: 0; border-top: none !important; padding-top: 0 !important; } .wh-pv-panel .wh-hist-section { margin-top: 0; border-top: none; padding-top: 0; } /* The tab already names the section; its own heading would say it twice. */ .wh-pv-panel h3 { display: none; } .wh-pv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); } #print-barcode-btn { display: inline-flex; align-items: center; gap: 6px; } #print-barcode-btn svg, #print-barcode-btn .material-symbols-rounded { width: 16px; height: 16px; } .wh-pv-redirect { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: var(--fs-xs); color: var(--color-text-secondary); } .wh-pv-redirect-txt { display: inline-flex; align-items: center; gap: 4px; } .wh-pv-redirect-txt svg, .wh-pv-redirect-txt .material-symbols-rounded { width: 16px; height: 16px; flex: none; } /* Invoices table widths are defined by the class-based .col-* block below (8 columns). The old positional nth-child(1..9) block was removed — it was written for a defunct 9-column layout and skewed the current columns. */ /* Stock display badges */ .stock-detail { display: inline-flex; align-items: center; gap: 2px; margin-inline-end: 6px; } .stock-badge { display: inline-block; font-weight: 600; font-size: var(--fs-xs); padding: 3px 8px; border-radius: var(--radius-sm); min-width: 20px; text-align: center; } .stock-badge.box { background: var(--color-primary-light); color: var(--color-primary); } .stock-badge.unit { background: var(--color-background); color: var(--color-text-secondary); } .stock-lbl { font-size: var(--fs-xs); color: var(--color-text-secondary); } .stock-total { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 1px; } /* ============================================================================= 11. POS SALES LIST ============================================================================= */ .sales-list-header { display: grid; grid-template-columns: 40% 15% 18% 17% 10%; padding: 5px 10px; font-weight: 500; border-bottom: 1px solid var(--color-border); background: var(--color-surface); gap: 3px; font-size: var(--fs-2xs); color: var(--color-text-muted); letter-spacing: 0; } .sales-list-body { flex: 1; overflow-y: auto; padding: 0; } .sales-item { display: grid; grid-template-columns: 33% 25% 15% 17% 10%; padding: 4px 10px; border-bottom: 1px solid var(--color-border-light); font-size: var(--fs-2xs); gap: 3px; align-items: center; transition: background 0.1s; font-weight: 400; } .sales-item:hover { background: var(--color-primary-light); } .sales-item .product-name-cell { text-align: left !important; white-space: normal !important; word-wrap: break-word !important; line-height: 1.5; display: block; width: 100%; } .sales-item span:first-child { text-align: left !important; white-space: normal !important; } .sales-total { padding: 8px 10px; border-top: 1px solid var(--color-border); background: var(--color-surface); text-align: left; } .sales-total h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; } #barcode-input { text-align: start; font-size: var(--fs-sm); } .item-qty-wrapper input, .item-price-wrapper input { padding: 2px 4px; font-size: var(--fs-2xs); height: 24px; } .item-stock-hint, .item-cost-hint { font-size: var(--fs-xs); margin-top: 2px; } /* POS cart — merged quantity steppers ( − input + unit ) with smart unit labels */ .sales-item .item-qty-wrapper { display: flex; flex-direction: column; gap: 4px; align-items: stretch; } .qty-stepper { display: flex; align-items: center; gap: 2px; } .qty-stepper input.qty-box, .qty-stepper input.qty-unit { width: 40px; height: 26px; padding: 2px; font-size: var(--fs-sm); text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); -moz-appearance: textfield; } .qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-step { width: 24px; height: 26px; flex: 0 0 auto; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-background); color: var(--color-text); font-size: var(--fs-lg); font-weight: 700; line-height: 1; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: center; } .qty-step:hover { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); } .qty-step:active { transform: scale(0.92); } .qty-unit-lbl { font-size: var(--fs-2xs); color: var(--color-text-secondary); margin-inline-start: 2px; white-space: nowrap; } .qty-size-badge { font-size: 0.7em; background: var(--color-amber, #d97706); color: var(--color-on-accent); padding: 1px 6px; border-radius: var(--radius-sm); margin-inline-start: 4px; font-weight: 700; } /* Per-line price tier toggle ( عادي / جملة / ج.الجملة ) inside a cart line */ .pos-tier-toggle { display: inline-flex; margin-top: 5px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .pos-tier-btn { font-size: var(--fs-2xs); padding: 3px 8px; border: none; line-height: 1.2; cursor: pointer; background: var(--color-surface); color: var(--color-text-secondary); border-inline-start: 1px solid var(--color-border); } .pos-tier-btn:first-child { border-inline-start: none; } .pos-tier-btn:hover { background: var(--color-background); } .pos-tier-btn.active { background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; } .transaction-type { display: flex; background: var(--color-background); border-radius: var(--radius); padding: 3px; margin-bottom: 6px; border: 1px solid var(--color-border); } .transaction-type input[type="radio"] { display: none; } .transaction-type label { flex: 1; text-align: center; padding: 5px; font-weight: 500; font-size: var(--fs-xs); color: var(--color-text-secondary); border-radius: var(--radius); cursor: pointer; transition: var(--transition); } .transaction-type input[type="radio"]:checked + label { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-xs); } /* ============================================================================= 12. LOGIN PAGE ============================================================================= */ /* Login backdrop — the graph-paper grid from partnertech.ly, so the POS and the public site read as one product. Values taken from the live site's own body rule: 1px lines of rgba(15,23,32,.05) on a 34px cell, anchored `center top`. Two linear-gradients (horizontal + vertical) rather than an image, so it is resolution-independent, weightless, and works offline — the old login-bg.svg was a fixed raster-ish asset that had to load before the page looked right. */ .login-body { height: 100vh; width: 100vw; overflow: hidden; margin: 0; background-color: #ffffff; background-image: linear-gradient(rgba(15, 23, 32, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 32, 0.05) 1px, transparent 1px); background-size: 34px 34px; background-position: center top; background-repeat: repeat; display: flex; align-items: center; justify-content: center; position: relative; } /* The two dark overlays that used to sit on top of the navy photo are gone. Kept as explicit `none` rather than deleted: both pseudo-elements are still referenced by the animation and z-index stack below, and a stray dark scrim over a white page would grey the whole thing out. */ .login-body::before, .login-body::after { content: none; } /* Dark skin keeps the same grid, inverted — a blazing white sheet behind a dark UI is the one place the appearance setting could look broken. */ :root.theme-dark .login-body { background-color: #16181c; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); } .login-container { position: relative !important; top: auto !important; left: auto !important; /* Compact login card */ transform: none !important; z-index: 500; width: 90%; max-width: 400px; /* Opaque, not translucent. At 0.95 alpha the grid showed through the card and read as dirt; the backdrop-filter then blurred those lines into a smudge behind the form. Both existed to sit over a dark photo — on a white sheet they only cost GPU time and legibility. */ background: var(--color-surface); padding: 32px 30px; border-radius: var(--radius-sm); /* Was 0 8px 32px rgba(0,0,0,.3) — tuned for a navy backdrop, and grubby on white. This lifts the card off the grid without staining it, and follows the appearance setting (near-flat under Fusion, softer under Classic). */ box-shadow: var(--shadow-lg); margin: 0; border: 1px solid var(--color-border); animation: loginCardAppear 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes loginCardAppear { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-form { padding: 0 !important; } .login-form h2 { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: 4px; color: var(--color-text); letter-spacing: 0; } .login-form .form-group { margin-bottom: 10px; } .login-form .form-group label { font-weight: 600; color: var(--color-text); font-size: var(--fs-xs); } .login-form input[type="text"], .login-form input[type="password"], .login-form input[type="email"] { height: 38px; font-size: var(--fs-xs); font-weight: 500; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .login-form input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); } .login-form .btn-primary { height: 40px !important; font-size: var(--fs-sm) !important; font-weight: 700 !important; border-radius: var(--radius-sm) !important; letter-spacing: 0; /* The skin's own accent — the old mono-era override painted this black with var(--color-text), which is why the Fusion accent never appeared on login. */ background: var(--color-primary) !important; color: var(--color-on-primary) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; transition: all 0.2s ease !important; } .login-form .btn-primary:hover { background: var(--color-primary-dark) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important; transform: translateY(-1px); } .login-form .btn-outline { height: 38px !important; font-size: var(--fs-xs) !important; font-weight: 600 !important; border-radius: var(--radius-sm) !important; border: 1.5px solid var(--color-border) !important; } /* Login page language toggle — glass effect */ #login-lang-toggle button { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.9) !important; font-weight: 600 !important; transition: all 0.2s ease; } #login-lang-toggle button:hover { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; color: white !important; } /* Signup form in login — glass card */ #tenant-signup-form { animation: loginCardAppear 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Forgot password modal on login page */ .login-body .modal-overlay { background: rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(4px); } .login-body .modal-content { border-radius: var(--radius-sm) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important; } /* ============================================================================= 13. BADGES & STATUS INDICATORS ============================================================================= */ .status-paid { color: var(--color-green); font-weight: 600; } .status-pending { color: var(--color-amber); font-weight: 600; } .status-overdue { color: var(--color-red); font-weight: 600; } .search-container { margin-bottom: 12px; } #invoice-search, #rfq-search { font-size: var(--fs-sm); } /* ============================================================================= 14. REPORT & SETTINGS PAGES ============================================================================= */ .report-filters { padding: 10px 14px; } .report-content-wrapper { padding: 14px; min-height: 200px; } .settings-form-container { padding: 10px; margin-bottom: 8px; border-radius: var(--radius-lg); } /* ============================================================================= 15. MODALS & OVERLAYS ============================================================================= */ .modal-overlay, #modal-overlay, #transfer-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: 2000; backdrop-filter: blur(2px); } .modal, #transfer-modal, #supplier-modal, #customer-modal, #rep-modal, .modal-content, #expense-modal { display: none; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 2001 !important; background: var(--color-surface); padding: 14px 16px; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 90%; max-width: 580px; max-height: 90vh; overflow-y: auto; margin: 0 !important; border: 1px solid var(--color-border); } .modal-content h3 { margin-bottom: 10px; color: var(--color-text); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; } .show-modal { display: block !important; } /* ── The document-policy editor ──────────────────────────────────────────── Wider than the 580px default because it is a TEXT editor: a policy runs to 4,000 characters and used to be typed into a window.prompt(). Everything here is built from existing tokens, so the three skins are covered without inventing a colour. */ .policy-modal { max-width: 760px; } .policy-modal-cell { margin: -4px 0 12px; font-size: var(--fs-xs); color: var(--color-text-muted); } .policy-modal-bodyhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* Counts UP to the limit rather than showing a bare number, because 4000 is the thing the writer needs to know about and nothing said so before. */ .policy-modal-count { font-size: var(--fs-2xs); color: var(--color-text-muted); } .policy-modal-count[data-full="1"] { color: var(--color-red); font-weight: 700; } .policy-modal-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; } .policy-modal-hint { font-size: var(--fs-2xs); color: var(--color-text-muted); } .policy-chip { font-family: inherit; font-size: var(--fs-2xs); font-weight: 600; padding: 3px 9px; cursor: pointer; color: var(--color-primary); background: var(--color-primary-light); border: 1px solid var(--color-primary); border-radius: var(--radius-pill); } .policy-chip:hover { background: var(--color-primary); color: var(--color-on-primary); } #policy-modal-body { width: 100%; box-sizing: border-box; resize: vertical; min-height: 320px; line-height: 1.7; font-family: inherit; font-size: var(--fs-sm); } /* ── Terms editors are writing surfaces (2026-10-09) ── The till's note and terms boxes carried .pos-input-sm, an INPUT class with a fixed height (--btn-height-sm, 28–34px): rows="5" was ignored and the policy showed two lines at a time. They are as tall as the text they hold (autoGrow, ui-kit.js), never shorter than a real editing window, and the Settings dialog is wide enough to read a clause on one line. */ textarea.pos-input-sm { height: auto; min-height: 64px; padding: 8px 10px; line-height: 1.6; font-size: var(--fs-sm); } #doc-policy-input, #doc-policy-svc-input { min-height: 260px; } .policy-modal { max-width: 960px; width: min(960px, calc(100vw - 32px)); } .policy-modal-preview { max-height: 220px; } @media (max-width: 768px) { /* A phone gives the editor half the screen; the keyboard takes the rest. */ #doc-policy-input, #doc-policy-svc-input, #policy-modal-body { min-height: 45vh; } textarea.pos-input-sm { min-height: 88px; } .policy-modal { width: auto; } } /* What the customer will actually read. pre-wrap because a policy is one clause per line and that shape is the whole formatting it has. */ .policy-modal-preview { white-space: pre-wrap; line-height: 1.6; font-size: var(--fs-xs); color: var(--color-text-secondary); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 10px; max-height: 130px; overflow-y: auto; min-height: 34px; } .policy-modal-preview:empty::before { content: 'لا شيء بعد'; color: var(--color-text-muted); } /* A placeholder is not literal text — it is replaced by the document's own figure at print time, and it has to LOOK like a token or nobody knows why {warranty} is sitting in their terms. */ .policy-modal-preview .ph { color: var(--color-primary); background: var(--color-primary-light); border-radius: var(--radius-sm); padding: 0 4px; font-weight: 700; } .policy-modal-error { margin-top: 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--color-red); } .policy-modal-actions { display: flex; justify-content: flex-start; gap: 8px; margin-top: 14px; } .modal-content select { text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Customers / Suppliers / Representatives — wide all-detail tables + detail shown as a modal */ .entity-table { min-width: 900px; } .entity-table th, .entity-table td { white-space: nowrap; } @media (max-width: 1000px) { .entity-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } } .entity-detail-modal { max-width: 820px !important; width: 92% !important; padding: 18px !important; } .entity-detail-modal .table-container { overflow-x: auto; } /* ============================================================================= 16. TOAST NOTIFICATIONS ============================================================================= */ #toast-notification { visibility: hidden; opacity: 0; min-width: 200px; background: var(--color-text); color: var(--color-surface); text-align: center; border-radius: var(--radius-lg); padding: 6px 12px; position: fixed; z-index: 99999; left: 50%; transform: translateX(-50%); top: -60px; font-size: var(--fs-2xs); font-weight: 600; box-shadow: var(--shadow-lg); transition: top 0.3s ease, opacity 0.2s ease; } #toast-notification.show { visibility: visible; opacity: 1; top: 14px; } #toast-notification.error { background: var(--color-red); } #toast-notification.store-order { background: var(--color-primary); text-align: right; min-width: 320px; padding: 10px 16px; font-size: var(--fs-sm); } .suggestion-item, .customer-suggestion-item { padding: 7px 10px; cursor: pointer; font-size: var(--fs-md); border-inline-start: 3px solid transparent; transition: none; } .suggestion-item.sg-expired { background: var(--color-red-light); } .suggestion-item.sg-near-expiry { background: var(--color-red-light); } .suggestion-item.sg-low-stock { background: var(--color-amber-light); } .suggestion-item:hover, .suggestion-item.active, .customer-suggestion-item:hover, .customer-suggestion-item.active { background: var(--color-primary-light) !important; border-inline-start-color: var(--color-primary); } /* Unified dropdown/suggestion list style — matches customer list design */ .dropdown-list { position: absolute; top: 100%; left: 0; width: 100%; z-index: 10000; background: var(--color-surface); border: 1px solid var(--color-border); border-top: none; max-height: 400px; overflow-y: auto; box-shadow: var(--shadow-md); border-radius: 0 0 var(--radius) var(--radius); } .dropdown-list-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--color-border-light); font-size: var(--fs-md); display: flex; justify-content: space-between; align-items: center; transition: background 0.1s; } .dropdown-list-item:last-child { border-bottom: none; } .dropdown-list-item:hover, .dropdown-list-item.active { background-color: var(--color-primary-light); border-inline-end: 3px solid var(--color-primary); } .dropdown-list-item .item-secondary { font-size: var(--fs-sm); color: var(--color-text-secondary); direction: ltr; } .dropdown-list-empty { padding: 12px 14px; font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; } /* ============================================================================= 17. SWITCHES & TOGGLES ============================================================================= */ .switch-group { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 0; background: transparent; transition: var(--transition); } .switch-group:last-child { border-bottom: none; } .switch-group:hover { background: transparent; } .switch-label { font-weight: 500; color: var(--color-text); font-size: var(--fs-2xs); } .switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-border); transition: .2s ease; border-radius: var(--radius-xl); } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; transition: .2s ease; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } input:checked + .slider { background: var(--color-primary); } input:checked + .slider:before { transform: translateX(18px); } /* THE ON STATE WAS INVISIBLE IN DARK MODE. The checked track fills with --color-primary, which inverts to near-white there, and the knob is a white circle — 1.13:1, so a switched-on toggle looked switched off on every settings page. Only the CHECKED knob moves: unchecked it sits on the grey track where white is right. */ :root.theme-dark input:checked + .slider:before { background: var(--color-on-primary); } /* ============================================================================= 18. STAT CARDS ============================================================================= */ .stats-row { display: flex; gap: 6px; margin: 0 0 6px 0; } .stat-card { flex: 1; background: var(--color-surface); padding: 6px 10px; border-radius: var(--radius); border: 1px solid var(--color-border); transition: var(--transition); box-shadow: var(--shadow-xs); } .stat-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .stat-card .stat-label { color: var(--color-text-secondary); font-size: var(--fs-2xs); margin-bottom: 1px; font-weight: 500; text-transform: none; letter-spacing: normal; } .stat-card .stat-value { font-size: var(--fs-lg); font-weight: 700; color: var(--color-text); letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1.25; } .stat-card.danger { border-right: 3px solid var(--color-red); } .stat-card.danger .stat-value { color: var(--color-red); } .stat-card.success { border-right: 3px solid var(--color-green); } .stat-card.success .stat-value { color: var(--color-green); } /* ============================================================================= 19. FILTER BARS & SEARCH ============================================================================= */ .filter-bar { display: flex; gap: 8px; background: var(--color-surface); padding: 10px 12px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .filter-bar input, .filter-bar select { height: var(--input-height); padding: 0 10px; font-size: var(--fs-sm); } .filter-bar .btn { height: var(--btn-height-sm); padding: 0 12px; font-size: var(--fs-xs); } /* ============================================================================= 20. TEMPLATE SELECTOR ============================================================================= */ .template-grid { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; } .template-option { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 6px; cursor: pointer; width: 90px; text-align: center; transition: var(--transition); font-size: var(--fs-xs); } .template-option:hover { border-color: var(--color-primary); background: var(--color-primary-light); } .template-option.selected { border-color: var(--color-primary); background: var(--color-primary-light); font-weight: 500; box-shadow: 0 0 0 1px var(--color-primary); } /* The template preview fills the space this block was already occupying: the settings page is a two-column grid, so it stretches to its taller neighbour whether or not it has anything to show. It had nothing. */ .template-preview-pane { position: relative; margin-top: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-background); overflow: hidden; height: 330px; } .template-preview-label { position: absolute; top: 6px; inset-inline-start: 8px; z-index: 1; font-size: var(--fs-2xs); font-weight: 700; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 1px 8px; } /* Rendered at document width and scaled down, rather than drawn small: at document width the real stylesheet's own proportions survive. */ #template-preview-frame { /* Rendered at DOCUMENT width and scaled to fit, rather than drawn small: at document width the print stylesheet's own proportions survive. The scale is set from the pane width at runtime — a fixed one left a third of the pane empty on a wide screen and overflowed it on a narrow one. */ width: 780px; height: 660px; border: 0; display: block; transform: scale(var(--tpl-scale, 0.62)); transform-origin: top right; background: #fff; pointer-events: none; } .template-preview { height: 42px; background: var(--color-background); margin-bottom: 5px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); color: var(--color-text-muted); } /* ============================================================================= 21. CURRENCY OPTIONS ============================================================================= */ .currency-options.disabled { opacity: 0.5; pointer-events: none; filter: grayscale(1); } /* ============================================================================= 22. FORM BUTTONS ============================================================================= */ .form-buttons { margin-top: 8px; display: flex; gap: 5px; } .form-buttons .btn { flex: 1; } /* ============================================================================= 23. ACCORDION ============================================================================= */ .accordion-header { padding: 5px 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; font-weight: 600; font-size: var(--fs-2xs); display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; transition: var(--transition); color: var(--color-text); } .accordion-header:hover { background: var(--color-primary-light); color: var(--color-primary); } /* ============================================================================= 24. POS-SPECIFIC COMPONENTS (Control Panel, Inputs, Checkout) ============================================================================= */ .control-panel { gap: 12px !important; } .pos-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; transition: var(--transition); box-shadow: var(--shadow-xs); } .pos-card:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border); } .pos-card-header { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; } .pos-card-header .material-symbols-rounded { color: var(--color-primary); font-size: 1rem; } .pos-card-title { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); text-transform: none; letter-spacing: normal; } .pos-label { display: block; font-weight: 600; font-size: var(--fs-2xs); color: var(--color-text-secondary); margin-bottom: 4px; text-transform: none; letter-spacing: normal; } .pos-label-sm { display: block; font-weight: 500; font-size: var(--fs-2xs); color: var(--color-text-muted); margin-bottom: 2px; } .pos-input-main { width: 100%; height: var(--input-height); padding: 0 10px; font-size: var(--fs-md); border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-main); background: var(--color-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; font-weight: 400; } .pos-input-main:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); outline: none; } .pos-input-num { width: 100%; height: var(--input-height); padding: 0 8px; font-size: var(--fs-md); font-weight: 500; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-main); background: var(--color-surface); font-variant-numeric: tabular-nums; } .pos-input-sm { width: 100%; height: var(--btn-height-sm); padding: 0 6px; font-size: var(--fs-xs); border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-main); background: var(--color-surface); font-weight: 400; } .pos-select { width: 100%; height: var(--input-height); padding: 0 8px; font-size: var(--fs-md); font-weight: 400; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-main); background: var(--color-surface); cursor: pointer; padding-left: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M3 5l3 3 3-3H3z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 8px center; } .pos-btn-add { width: 100%; margin-top: 4px; height: var(--btn-height); font-size: var(--fs-sm); font-weight: 500; background: var(--color-primary); color: var(--color-on-primary); border: none; border-radius: var(--radius); cursor: pointer; font-family: var(--font-main); transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 4px; } .pos-btn-add:hover { background: var(--color-primary-dark); } .pos-input-fee { width: 100%; height: var(--input-height); padding: 0 8px; font-size: var(--fs-md); font-weight: 500; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-main); background: var(--color-surface); color: var(--color-text); font-variant-numeric: tabular-nums; } .pos-input-fee:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 2px var(--color-primary-glow); } .pos-tax-row { display: flex; align-items: center; justify-content: space-between; background: var(--color-background); padding: 8px 12px; border-radius: var(--radius); margin-top: 6px; border: 1px solid var(--color-border-light); font-size: var(--fs-xs); } .pos-btn-draft { height: var(--btn-height); padding: 0 14px; font-size: var(--fs-md); font-weight: 500; background: var(--color-amber); color: var(--color-on-accent); border: none; border-radius: var(--radius); cursor: pointer; font-family: var(--font-main); transition: var(--transition); } .pos-btn-draft:hover { filter: brightness(0.9); } .pos-btn-drafts-view { height: var(--btn-height); padding: 0 12px; font-size: var(--fs-md); font-weight: 400; background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; font-family: var(--font-main); transition: var(--transition); } .pos-btn-drafts-view:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } .pos-btn-checkout { flex: 2; height: var(--btn-height); font-size: var(--fs-md); font-weight: 500; background: var(--color-primary); color: var(--color-on-primary); border: none; border-radius: var(--radius); cursor: pointer; font-family: var(--font-main); transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 5px; } .pos-btn-checkout:hover { background: var(--color-primary-dark); } .pos-btn-cancel { height: var(--btn-height); padding: 0 12px; font-size: var(--fs-md); font-weight: 400; background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; font-family: var(--font-main); transition: var(--transition); } .pos-btn-cancel:hover { background: var(--color-red-light); color: var(--color-red); border-color: var(--color-red-border); } .pos-checkout-card { background: var(--color-surface); border-color: var(--color-border); padding: 8px 12px; } /* ============================================================================= 25. PAYMENT TYPE TOGGLE ============================================================================= */ .payment-type-toggle { display: flex; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-background); } .pay-type-btn { flex: 1; height: var(--btn-height); font-size: var(--fs-xs); font-weight: 500; border: none; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: var(--transition); font-family: var(--font-main); display: flex; align-items: center; justify-content: center; gap: 3px; } .pay-type-btn.active { background: var(--color-primary); color: var(--color-on-primary); } .pay-type-btn:not(.active):hover { background: var(--color-primary-light); color: var(--color-primary); } /* ============================================================================= 26. SETTINGS PAGE (Vertical Tabs Layout) ============================================================================= */ .settings-layout { display: flex; gap: 0; flex: 1; overflow: hidden; height: calc(100vh - 42px); } .settings-sidebar { width: 210px; min-width: 210px; background: var(--color-surface); border-left: 1px solid var(--color-border); overflow-y: auto; padding: 8px 0; } .settings-sidebar .sidebar-group { margin-bottom: 10px; } .settings-sidebar-search { margin-bottom: 10px; } .settings-sidebar-search input { width: 100%; height: var(--input-height); padding: 0 10px; font-size: var(--fs-sm); } .settings-sidebar .sidebar-group-title { font-size: var(--fs-2xs); font-weight: 700; color: var(--color-text-muted); letter-spacing: 0; padding: 0 12px; margin-bottom: 3px; } .settings-sidebar .sidebar-link { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: var(--fs-xs); font-weight: 400; color: var(--color-text-secondary); cursor: pointer; transition: var(--transition); text-decoration: none; border-right: 3px solid transparent; } .settings-sidebar .sidebar-link:hover { background: var(--color-primary-light); color: var(--color-primary); } .settings-sidebar .sidebar-link.active { color: var(--color-text); background: var(--color-background); border-right-color: var(--color-primary); font-weight: 600; } .settings-sidebar .sidebar-link .material-symbols-rounded { font-size: 0.88rem; } .settings-content { flex: 1; overflow-y: auto; padding: 16px 24px; padding-bottom: 60px; } .settings-content .settings-page { display: none; width: 100%; } .settings-content .settings-page.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: start; } /* minmax(0, …), not 1fr: a bare 1fr is minmax(auto, 1fr), so one wide child (a long switch description, a table) pushed its column past the page and the other column off the left edge — on a phone it hid the switches themselves. */ .settings-content .settings-page.active > * { min-width: 0; } /* A block that needs the page's width (the template picker, the terms list). */ .settings-content .settings-page .section-block.sb-wide { grid-column: 1 / -1; } .settings-content .settings-page .page-title, .settings-content .settings-page .page-description, .settings-content .settings-page .sub-header { grid-column: 1 / -1; } .settings-content .settings-page--full.active { grid-template-columns: minmax(0, 1fr); } .settings-content .sub-banner { width: 100%; } .settings-content .page-title { font-size: var(--fs-xl); font-weight: 700; color: var(--color-text); margin-bottom: 2px; letter-spacing: 0; } .settings-content .page-description { font-size: var(--fs-2xs); color: var(--color-text-secondary); margin-bottom: 14px; font-weight: 400; } .settings-content .section-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 10px; } .settings-content .section-block h4 { font-size: var(--fs-md); font-weight: 600; color: var(--color-text); margin-bottom: 8px; padding-bottom: 0; border-bottom: none; letter-spacing: 0; } /* ============================================================================= 27. RESPONSIVE / MEDIA QUERIES ============================================================================= */ @media (max-width: 992px) { body { overflow-y: auto; } .main-nav .nav-btn { padding: 0 6px; font-size: var(--fs-2xs); } .main-nav .nav-btn .material-symbols-rounded { font-size: 0.9rem; } .warehouse-main td, .product-list-panel td { padding: 4px 6px !important; font-size: var(--fs-2xs); } .sales-item { padding: 4px 8px; font-size: var(--fs-2xs); } .stats-row { flex-direction: column; } .settings-sidebar { width: 190px; min-width: 190px; } .settings-content { padding: 14px; } } @media (max-width: 768px) { .main-nav { display: none; flex-direction: column; position: absolute; top: 100%; right: 0; background: var(--color-surface); box-shadow: var(--shadow-lg); border-radius: 0 0 var(--radius-lg) var(--radius-lg); width: 100%; z-index: 1000; padding: 8px; border: 1px solid var(--color-border); border-top: none; } .main-nav.show { display: flex; } .main-nav .nav-btn { border-bottom: none !important; height: auto; line-height: 1.4; padding: 10px 14px; } .main-nav .nav-btn.active { background: var(--color-primary-light); border-radius: var(--radius); } .mobile-menu-btn { display: block; } .warehouse-main, .pos-main { flex-direction: column; overflow-y: auto; } .control-panel, .sales-panel, .product-list-panel, .product-form-panel { flex: 1 1 auto; max-width: 100%; } .pos-header { padding: 0 12px; } /* ── POS card-mode (mobile): pin the checkout controls (total + payment + pay) as an always-visible bottom action bar, so the cashier never has to scroll past the whole product list to reach them. Products + cart items scroll above the bar. ── */ .pos-main.pos-cardmode { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 172px; } .pos-main.pos-cardmode > .pos-products, .pos-main.pos-cardmode > .pos-cart { flex: 0 0 auto; width: 100%; max-width: 100%; } .pos-main.pos-cardmode .pos-cart-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.12); padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; } .pos-main.pos-cardmode .pos-cart-foot .pos-totals { margin: 0; } .pos-main.pos-cardmode .pos-cart-foot .pos-trow { padding: 1px 0; font-size: var(--fs-sm); } .pos-main.pos-cardmode .pos-cart-foot .pos-trow.grand { font-size: var(--fs-lg); } .pos-main.pos-cardmode .pos-cart-foot .pos-pay { padding: 12px; font-size: var(--fs-md); } /* Give the product grid a comfortable, self-contained scroll feel */ .pos-main.pos-cardmode .pos-grid { padding-bottom: 8px; } /* Settings layout mobile */ .settings-layout { flex-direction: column; } .settings-sidebar { width: 100%; min-width: auto; border-left: none; border-bottom: 1px solid var(--color-border); overflow-x: auto; display: flex; padding: 0; } .settings-sidebar .sidebar-group { display: flex; margin: 0; } .settings-sidebar .sidebar-group-title { display: none; } .settings-sidebar .sidebar-link { white-space: nowrap; border-right: none; border-bottom: 2px solid transparent; padding: 12px 16px; } .settings-sidebar .sidebar-link.active { border-bottom-color: var(--color-primary); border-right-color: transparent; } .settings-content .settings-page.active { grid-template-columns: minmax(0, 1fr); } /* POS mobile enhancements */ .pos-card { padding: 8px; margin-bottom: 6px; } .pos-grid-3 { grid-template-columns: 1fr 1fr; gap: 6px; } .pos-btn-add { padding: 10px; font-size: var(--fs-sm); } .pos-input-main { font-size: var(--fs-sm); padding: 8px 10px; } .pos-input-num, .pos-select { font-size: var(--fs-sm); padding: 6px 8px; } .pos-label, .pos-label-sm { font-size: var(--fs-xs); } /* Sales list mobile */ .sales-item { padding: 8px; gap: 6px; font-size: var(--fs-xs); } .sales-item .product-name-cell { font-size: var(--fs-xs); min-width: 60px; } .sales-item .item-price-wrapper { min-width: auto; } .sales-item .item-price-wrapper input { width: 60px; font-size: var(--fs-xs); } .sales-item .item-qty-wrapper input { width: 36px; font-size: var(--fs-xs); padding: 3px; } .sales-item .item-stock-hint { font-size: var(--fs-2xs); } .sales-item .btn-delete { padding: 2px 6px; font-size: var(--fs-2xs); } .sales-panel-header { font-size: var(--fs-sm); padding: 8px; } /* Totals section mobile */ .total-row { font-size: var(--fs-sm); padding: 4px 0; } .total-label, .total-value { font-size: var(--fs-sm); } /* Modals mobile */ .modal-content { width: 95% !important; max-width: 95% !important; padding: 14px; max-height: 90vh; overflow-y: auto; } /* Table mobile - horizontal scroll */ .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } .product-table { min-width: 600px; } .product-table th, .product-table td { padding: 6px 8px; font-size: var(--fs-xs); white-space: nowrap; } /* Warehouse mobile */ .wh-stats { grid-template-columns: 1fr 1fr 1fr; gap: 4px; } .wh-stat { padding: 6px 8px; } .wh-stat .wh-stat-label { font-size: var(--fs-2xs); } .wh-stat .wh-stat-val { font-size: var(--fs-md); } .wh-toolbar { flex-wrap: wrap; gap: 4px; padding: 6px 8px; } .wh-toolbar input, .wh-toolbar select { font-size: var(--fs-xs); padding: 5px 8px; } .product-form-panel { padding: 6px !important; } .product-form-panel h2 { font-size: var(--fs-sm); } .form-group-row { flex-direction: column; gap: 4px; } /* Reports mobile */ .report-controls-bar { flex-direction: column; gap: 8px; } .report-controls-bar .control-group { width: 100%; } .report-controls-bar select, .report-controls-bar input { width: 100%; } .dash-stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .dash-stat { padding: 8px; } /* Purchases mobile */ .po-item-row { padding: 6px; } /* Header mobile */ .header-brand h1 { font-size: var(--fs-sm); } #exchange-rate-badge { font-size: var(--fs-2xs) !important; padding: 2px 6px !important; } /* Treasury mobile */ .treasury-grid { grid-template-columns: 1fr; } .treasury-card { padding: 10px; } /* Filter bars mobile */ .filter-bar, .filter-row { flex-direction: column; gap: 6px; } .filter-bar input, .filter-bar select { width: 100%; } } /* Extra small screens */ @media (max-width: 480px) { .pos-grid-3 { grid-template-columns: 1fr; gap: 4px; } .wh-stats { grid-template-columns: 1fr; } .sales-item { flex-wrap: wrap; } .sales-item > * { flex: 1 1 auto; } .product-table { min-width: 500px; } .dash-stats-grid { grid-template-columns: 1fr; } .stats-row .stat-card { min-width: auto; } .main-nav .nav-btn { padding: 8px 12px; font-size: var(--fs-xs); } .header-brand h1 { font-size: var(--fs-xs); } } /* ============================================================================= 28. SCROLLBAR ============================================================================= */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* Suggestion/dropdown lists get a FULLY VISIBLE scrollbar. The global 5px ghost thumb on a transparent track reads as "the list ends here" — the user could not tell whether they were at the top, middle, or end of a 30-customer list. A wide thumb on a visible track states the position at a glance. Scoped to the floating list components only; page scrollbars stay thin. */ .dropdown-list::-webkit-scrollbar, #customer-suggestions::-webkit-scrollbar, #product-suggestions::-webkit-scrollbar, #ie-add-results::-webkit-scrollbar { width: 11px; } .dropdown-list::-webkit-scrollbar-track, #customer-suggestions::-webkit-scrollbar-track, #product-suggestions::-webkit-scrollbar-track, #ie-add-results::-webkit-scrollbar-track { background: var(--color-background); border-inline-start: 1px solid var(--color-border-light); } .dropdown-list::-webkit-scrollbar-thumb, #customer-suggestions::-webkit-scrollbar-thumb, #product-suggestions::-webkit-scrollbar-thumb, #ie-add-results::-webkit-scrollbar-thumb { background: var(--color-text-muted); border-radius: var(--radius-sm); border: 2px solid var(--color-background); } .dropdown-list::-webkit-scrollbar-thumb:hover, #customer-suggestions::-webkit-scrollbar-thumb:hover, #product-suggestions::-webkit-scrollbar-thumb:hover, #ie-add-results::-webkit-scrollbar-thumb:hover { background: var(--color-text); } /* Firefox equivalent (it ignores ::-webkit-scrollbar) */ .dropdown-list, #customer-suggestions, #product-suggestions, #ie-add-results { scrollbar-width: auto; scrollbar-color: var(--color-text-muted) var(--color-background); } /* ============================================================================= 29. SIDEBAR NAV MODE (Tailscale-inspired) ============================================================================= */ html.nav-sidebar { overflow: hidden; } html.nav-sidebar .pos-container { flex-direction: row; height: 100vh; } html.nav-sidebar .pos-header { flex-direction: column; width: 190px; min-width: 190px; height: 100vh; border-bottom: none; border-left: 1px solid var(--color-border, #e0e0e0); padding: 0; align-items: stretch; justify-content: flex-start; background: var(--nav-bg); overflow-x: hidden; overflow-y: hidden; display: flex; } html.nav-sidebar .header-brand { padding: 12px 14px 10px; border-bottom: 1px solid var(--color-border, #e0e0e0); justify-content: center; flex-wrap: wrap; } html.nav-sidebar .pos-header h1 { font-size: var(--fs-lg); text-align: center; font-weight: 800; letter-spacing: 0; color: var(--color-text, #202124); } html.nav-sidebar .mobile-menu-btn { display: none; } html.nav-sidebar .main-nav { flex-direction: column; gap: 2px; padding: 10px 8px; align-items: stretch; flex: 1; overflow-y: auto; padding-bottom: 8px; } html.nav-sidebar .main-nav .nav-btn { height: auto; line-height: 1.4; padding: 7px 12px; font-size: var(--fs-xs); font-weight: 500; border-bottom: none; margin-bottom: 0; border-right: none; border-left: none; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary, #5f6368); transition: all 0.15s ease; } html.nav-sidebar .main-nav .nav-btn:hover:not(.active) { background: var(--color-primary-light, #eff6ff); color: var(--color-primary, #37768b); } html.nav-sidebar .main-nav .nav-btn.active { color: var(--color-on-primary); background: var(--color-primary); border-right-color: transparent; border-bottom-color: transparent; font-weight: 700; } html.nav-sidebar .main-nav .nav-btn .material-symbols-rounded { font-size: 1.05rem; opacity: 0.6; } html.nav-sidebar .main-nav .nav-btn.active .material-symbols-rounded { opacity: 1; } /* Logout button in sidebar — pinned to bottom */ html.nav-sidebar .main-nav #logout-btn { margin-right: 0 !important; margin-left: 0 !important; margin-top: auto !important; border-radius: var(--radius-sm) !important; height: 34px !important; line-height: 34px !important; justify-content: center; align-self: stretch; margin-inline: 4px !important; padding: 0 !important; font-size: var(--fs-xs) !important; background-color: var(--color-red) !important; border: none !important; color: var(--color-on-accent) !important; /* was #fff: 2.8:1 on dark's light red */ } html.nav-sidebar .main-nav #logout-btn:hover { background-color: var(--color-red-dark) !important; } /* Main content area when sidebar is active */ html.nav-sidebar .pos-main, html.nav-sidebar .warehouse-main, html.nav-sidebar .report-main, html.nav-sidebar .subscription-main, html.nav-sidebar .accounting-page { flex: 1; height: 100vh; overflow-y: auto; } /* Settings layout adjustment — no header height to subtract */ html.nav-sidebar .settings-layout { height: 100vh; } /* Exchange rate badge — floating (position set via JS, this is override/fine-tune) */ #exchange-rate-badge:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; transform: translateY(-1px); } /* Sidebar scrollbar styling */ html.nav-sidebar .main-nav::-webkit-scrollbar { width: 4px; } html.nav-sidebar .main-nav::-webkit-scrollbar-track { background: transparent; } html.nav-sidebar .main-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: var(--radius-sm); } html.nav-sidebar .main-nav::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); } /* ── Sidebar collapse toggle button ── */ .sidebar-toggle-btn { display: none; /* only shows in sidebar mode */ width: 100%; height: 32px; margin-top: 4px; background: transparent; border: none; cursor: pointer; color: var(--color-text-muted); padding: 0; outline: none; font-size: var(--fs-xl); line-height: 32px; text-align: center; border-top: 1px solid var(--color-border-light); transition: color 0.15s ease, background 0.15s ease; } .sidebar-toggle-btn:hover { color: var(--color-primary); background: var(--color-background); } html.nav-sidebar .sidebar-toggle-btn { display: block; } /* ── Collapsed sidebar ── */ html.nav-sidebar.sidebar-collapsed .pos-header { width: 56px; min-width: 56px; transition: width 0.2s ease, min-width 0.2s ease; } html.nav-sidebar .pos-header { transition: width 0.2s ease, min-width 0.2s ease; } html.nav-sidebar.sidebar-collapsed .header-brand h1 { display: none; } /* exchange rate badge is floating (position:fixed), not inside sidebar */ html.nav-sidebar.sidebar-collapsed .header-brand { padding: 12px 6px 10px; justify-content: center; } html.nav-sidebar.sidebar-collapsed .main-nav { padding: 10px 4px; } html.nav-sidebar.sidebar-collapsed .main-nav .nav-btn { padding: 10px 0; justify-content: center; font-size: 0; gap: 0; border-right: none; border-left: none; } html.nav-sidebar.sidebar-collapsed .main-nav .nav-btn .material-symbols-rounded { font-size: var(--fs-xl); margin: 0; } html.nav-sidebar.sidebar-collapsed .main-nav .nav-btn.active { background: var(--color-primary-light); } html.nav-sidebar.sidebar-collapsed .main-nav #logout-btn { font-size: 0 !important; padding: 8px 0 !important; justify-content: center !important; } /* ============================================================================= 30. ACTION DROPDOWN MENU (3-dot) ============================================================================= */ .action-cell { position: relative; text-align: center !important; } .action-dots { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius); cursor: pointer; font-size: var(--fs-xl); letter-spacing: 2px; color: var(--color-text-secondary); background: transparent; border: 1px solid transparent; transition: var(--transition); user-select: none; line-height: 1; } .action-dots:hover, .action-dots.active { background: var(--color-background); border-color: var(--color-border); color: var(--color-text); } .action-menu { display: none; position: fixed; z-index: 99999; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 130px; padding: 4px 0; } .action-menu.show { display: block; } /* ── Reset ALL inherited button styles inside action-menu ── */ .action-menu .action-menu-item, .action-menu .action-menu-item.btn-delete, .action-menu .action-menu-item.btn-edit, .action-menu .action-menu-item.btn-view, .action-menu .action-menu-item.btn-small-pay, .action-menu .action-menu-item.btn-edit-user, .action-menu .action-menu-item.btn-small-cancel { display: block !important; padding: 5px 12px !important; font-size: var(--fs-xs) !important; font-weight: 400 !important; color: var(--color-text) !important; cursor: pointer; transition: background 0.1s; white-space: nowrap; border: none !important; background: none !important; width: 100%; text-align: start !important; line-height: 1.5; letter-spacing: normal; height: auto !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; text-transform: none !important; } .action-menu .action-menu-item:hover { background: var(--color-background) !important; color: var(--color-text) !important; } .action-menu-divider { height: 1px; background: var(--color-border); margin: 2px 0; } /* ============================================================================= 31. UTILITY CLASSES ============================================================================= */ .text-green { color: var(--color-green) !important; } .text-red { color: var(--color-red) !important; } .text-muted { color: var(--color-text-muted) !important; } .text-primary { color: var(--color-primary) !important; } .bg-surface { background: var(--color-surface) !important; } /* ============================================================================= 32. SELECTION & FOCUS ============================================================================= */ ::selection { background: var(--color-primary-light); color: var(--color-text); } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } /* ============================================================================= 33. LINKS ============================================================================= */ a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================================================= 34. RTL/LTR SUPPORT ============================================================================= */ html[dir="ltr"] body { direction: ltr; text-align: left; } html[dir="ltr"] .product-table th, html[dir="ltr"] .product-table td { text-align: left; } html[dir="ltr"] .pos-header { direction: ltr; } html[dir="ltr"] .main-nav { direction: ltr; } html[dir="ltr"] .nav-btn { text-align: left; } html[dir="ltr"] .form-group label { text-align: left; } html[dir="ltr"] input, html[dir="ltr"] select, html[dir="ltr"] textarea { text-align: left; } html[dir="ltr"] select { background-position: right 10px center; padding-left: 12px; padding-right: 28px; } html[dir="ltr"] .stat-label, html[dir="ltr"] .stat-value { text-align: left; } html[dir="ltr"] .sales-list-header { direction: ltr; } html[dir="ltr"] .sales-item { direction: ltr; } html[dir="ltr"] .modal-content { direction: ltr; text-align: left; } /* Sidebar nav LTR */ html[dir="ltr"] html.nav-sidebar .main-nav { border-right: none; border-left: 1px solid var(--color-border); right: auto; left: 0; } html[dir="ltr"] html.nav-sidebar .main-nav .nav-btn { border-right: none; border-left: 2px solid transparent; padding-right: 12px; padding-left: 14px; } html[dir="ltr"] html.nav-sidebar .main-nav .nav-btn.active { border-left-color: var(--color-text); border-right-color: transparent; } html[dir="ltr"] html.nav-sidebar .pos-container { padding-right: 0; padding-left: 0; } html[dir="ltr"] html.nav-sidebar .pos-header { border-left: none; border-right: 1px solid var(--color-border); } html[dir="ltr"] #exchange-rate-badge { left: auto !important; right: 12px !important; } /* Settings sidebar LTR */ html[dir="ltr"] .settings-sidebar { border-right: none; border-left: 1px solid var(--color-border); } html[dir="ltr"] .sidebar-link { border-right: none; border-left: 2px solid transparent; } html[dir="ltr"] .sidebar-link.active { border-left-color: var(--color-text); border-right-color: transparent; } /* Search container LTR */ html[dir="ltr"] .search-container { direction: ltr; } /* General LTR text alignment */ html[dir="ltr"] .page-header, html[dir="ltr"] .section-title, html[dir="ltr"] .section-desc, html[dir="ltr"] .card-title { text-align: left; } html[dir="ltr"] .pos-card { text-align: left; } html[dir="ltr"] .pos-label { text-align: left; } html[dir="ltr"] .pos-search-input { text-align: left; direction: ltr; } /* Stats bar LTR */ html[dir="ltr"] .stats-bar { direction: ltr; } html[dir="ltr"] .stat-card { text-align: left; } /* Control panel & sales panel LTR */ html[dir="ltr"] .control-panel { text-align: left; } html[dir="ltr"] .sales-panel { text-align: left; } html[dir="ltr"] .sales-panel-header { direction: ltr; text-align: left; } /* Buttons & actions alignment */ html[dir="ltr"] .btn-row, html[dir="ltr"] .action-row, html[dir="ltr"] .modal-footer { direction: ltr; } html[dir="ltr"] .page-actions { direction: ltr; } /* Treasury page LTR */ html[dir="ltr"] .treasury-card { text-align: left; } html[dir="ltr"] .treasury-grid { direction: ltr; } /* Modal LTR */ html[dir="ltr"] .modal-header { text-align: left; } html[dir="ltr"] .modal-body { text-align: left; } /* Invoice detail LTR */ html[dir="ltr"] .invoice-detail { text-align: left; direction: ltr; } /* Expenses, Suppliers, Customers, Reps — filter bar LTR */ html[dir="ltr"] .filter-bar, html[dir="ltr"] .filter-row { direction: ltr; } /* Toggle switches & checkboxes */ html[dir="ltr"] .toggle-row { direction: ltr; } html[dir="ltr"] .toggle-label { text-align: left; } /* Sidebar logout button LTR */ html[dir="ltr"] html.nav-sidebar .main-nav #logout-btn { margin-right: 0 !important; margin-left: 0 !important; } /* Reports page LTR */ html[dir="ltr"] .reports-page { text-align: left; direction: ltr; } html[dir="ltr"] .report-controls-bar { direction: ltr; } html[dir="ltr"] .report-controls-bar .control-group label { text-align: left; } html[dir="ltr"] .report-action-btns { margin-right: 0; margin-left: auto; } html[dir="ltr"] .dash-stat { border-right: none; border-left: 3px solid var(--color-border); } html[dir="ltr"] .dash-stat.revenue { border-left-color: var(--color-primary); } html[dir="ltr"] .dash-stat.expenses { border-left-color: var(--color-border); } html[dir="ltr"] .dash-stat.profit { border-left-color: var(--color-border); } html[dir="ltr"] .dash-stat.debt { border-left-color: var(--color-red); } html[dir="ltr"] .report-table thead th { text-align: left; } html[dir="ltr"] .report-table tbody td { text-align: left; } html[dir="ltr"] .report-results-wrapper { text-align: left; direction: ltr; } /* Settings content LTR */ html[dir="ltr"] .settings-content { text-align: left; } html[dir="ltr"] .settings-section { text-align: left; } /* Settings floating save button LTR */ html[dir="ltr"] .floating-save { left: auto; right: 24px; } /* Branch cards LTR */ html[dir="ltr"] .branch-card { text-align: left; direction: ltr; } /* Fix text direction in all inputs for LTR */ html[dir="ltr"] .pos-input-main, html[dir="ltr"] .pos-input-num, html[dir="ltr"] .pos-select { direction: ltr; } /* Ensure table alignment is consistent in LTR */ html[dir="ltr"] table { direction: ltr; } html[dir="ltr"] th { text-align: left; } html[dir="ltr"] td { text-align: left; } /* LTR mobile nav dropdown */ @media (max-width: 768px) { html[dir="ltr"] .main-nav { right: auto; left: 0; } } /* ============================================================================= 35. FHD+ (1920x1080 and above) OPTIMIZATIONS ============================================================================= */ @media (min-width: 1600px) { .pos-header { padding: 0 18px; } .main-nav .nav-btn { padding: 0 10px; font-size: var(--fs-xs); } .main-nav .nav-btn .material-symbols-rounded { font-size: 1rem; } .pos-main, .warehouse-main, .report-main { padding: 14px; gap: 12px; } .product-form-panel { flex: 0 0 480px; padding: 12px 14px; } .product-table th, .product-table td { padding: 5px 8px; font-size: var(--fs-xs); } .stat-card { padding: 8px 12px; } .stat-card .stat-value { font-size: var(--fs-xl); } .stat-card .stat-label { font-size: var(--fs-2xs); } .modal-content { max-width: 680px; } .filter-bar { gap: 6px; } .filter-bar input, .filter-bar select, .filter-bar .btn { font-size: var(--fs-xs); padding: 4px 8px; } .settings-content { padding: 18px 28px; } } @media (min-width: 1920px) { .main-nav .nav-btn { padding: 0 14px; } .product-form-panel { flex: 0 0 520px; } .control-panel { flex: 0 0 33%; max-width: 33%; } .sales-panel { flex: 0 0 67%; max-width: 67%; } /* Warehouse table — a touch more room for the SKU at wide screens. This used to set column 1 to 12% and column 2 to 22% by POSITION, which took the specified widths past 100% on its own. Widths now live in table-columns.js and are normalised, so all this needs to do is give the product number a legible size. */ .warehouse-products-table .wh-c-num { font-size: var(--fs-sm); } } /* ============================================================================= 36. VISUAL POLISH & MICRO-INTERACTIONS (V24 Compact Edition) ============================================================================= */ /* ── Card hover — flat printed feel: firm the border, no lift ── */ .pos-card:hover, .stat-card:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border); } /* ── Active nav items — Fusion treatment: accent-tinted plate, accent text, and the 3px "you are here" bar (drawn by the component layer's ::before). The V24 mono era filled these solid black with !important, which is what kept overriding every later redesign — the !important stays, the look goes. ── */ .shell-sidebar-nav .nav-btn.active, html.nav-sidebar .main-nav .nav-btn.active { position: relative; font-weight: 700; background: var(--color-primary-light) !important; color: var(--color-primary) !important; } .shell-sidebar-nav .nav-btn.active .material-symbols-rounded, html.nav-sidebar .main-nav .nav-btn.active .material-symbols-rounded { color: var(--color-primary) !important; } /* ── Table row hover — neutral darkening (matches treasury .tx-table) ── */ .product-table tbody tr:hover { background: var(--color-background); } /* ── Better focus rings ── */ input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px var(--color-primary-glow); } /* ── Refined badge styles ── */ .stock-badge { font-size: var(--fs-2xs); padding: 2px 5px; border-radius: var(--radius-sm); font-weight: 600; } /* ── Compact action menu ── */ .action-dots { width: 26px; height: 26px; font-size: var(--fs-lg); } .action-menu .action-menu-item, .action-menu .action-menu-item.btn-delete, .action-menu .action-menu-item.btn-edit, .action-menu .action-menu-item.btn-view, .action-menu .action-menu-item.btn-small-pay, .action-menu .action-menu-item.btn-edit-user, .action-menu .action-menu-item.btn-small-cancel { padding: 3px 8px !important; font-size: var(--fs-xs) !important; } /* ── Compact search containers ── */ .search-container { margin-bottom: 6px; } #invoice-search, #rfq-search { font-size: var(--fs-2xs); } /* ── Button active press effect ── */ .btn:active, .pos-btn-add:active, .pos-btn-checkout:active { transform: scale(0.97); transition: transform 0.06s ease !important; } /* ── Subtler panel borders — less visual noise ── */ .product-list-panel, .product-form-panel, .sales-panel { border-color: var(--color-border-light); } /* ── Compact POS tax row ── */ .pos-tax-row { padding: 4px 8px; margin-top: 3px; font-size: var(--fs-xs); } /* ── Compact payment toggle ── */ .pay-type-btn { height: var(--btn-height); font-size: var(--fs-xs); } /* ── Compact collapsed sidebar ── */ html.nav-sidebar.sidebar-collapsed .pos-header { width: 48px; min-width: 48px; } /* ── Status badges — more refined ── */ .status-paid, .status-pending, .status-overdue { font-size: var(--fs-2xs); } /* ── Smooth micro-interactions on all interactive elements ── */ .btn, .nav-btn, .pos-card, .stat-card, .filter-bar .btn, .sidebar-link, .template-option, .action-dots { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Settings sidebar — nav-sidebar height fix ── */ html.nav-sidebar .settings-layout { height: 100vh; } /* ============================================================================= UI ENHANCEMENTS v24 — shared status pills, fixed-layout data tables, states (used by invoices tab; reusable across purchases/treasury/rfqs) ============================================================================= */ /* ── Status tag: flat & professional — neutral border + small colored status dot ── */ .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; background: transparent; border: 1px solid var(--color-border); color: var(--color-text); white-space: nowrap; max-width: 100%; } .status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, currentColor); flex: 0 0 auto; } .status-pill .pill-sub { font-weight: 500; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } /* Only the MARK carries the status colour; the text stays neutral for a clean, flat look. Each state also has its own SHAPE (2026-10-07) — filled dot = settled, ring = part-way, square = owed, dash = returned/closed — so paid, partial and unpaid stay distinct for colour-blind staff, on a faded thermal print and in a greyscale WhatsApp photo. */ .status-pill.is-paid { --dot: var(--color-green); } .status-pill.is-pending { --dot: var(--color-amber); } .status-pill.is-overdue { --dot: var(--color-red); } .status-pill.is-returned { --dot: var(--color-red); } .status-pill.is-partial { --dot: var(--color-amber); } .status-pill.is-neutral { --dot: var(--color-text-muted); } .status-pill.is-info { --dot: var(--color-primary); } .status-pill.is-partial::before, .status-pill.is-info::before { background: transparent; border: 2px solid var(--dot); width: 8px; height: 8px; } .status-pill.is-pending::before, .status-pill.is-overdue::before { border-radius: 1px; } .status-pill.is-returned::before, .status-pill.is-neutral::before { width: 9px; height: 2px; border-radius: 1px; } /* ── Invoices layout: the list panel now spans the full width (detail panel removed) ── */ .invoices-main .product-list-panel { flex: 1 1 100%; min-width: 0; width: 100%; } /* ── Fixed-layout invoices table: no more column collisions / clipped amounts ── */ .invoices-table { table-layout: fixed; width: 100%; } .invoices-table th, .invoices-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* Proportional widths summing to 100% so no single column balloons. (JS column-resize overrides these per-user and persists to localStorage.) The actions column holds the visible «تحصيل» button plus the ⋯ menu since 2026-10-07, so it takes 12.5% (both date columns share .col-date). */ .invoices-table .col-id { width: 6%; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .invoices-table .col-customer { width: 19%; } .invoices-table .col-num { width: 11%; text-align: end; font-variant-numeric: tabular-nums; font-weight: 700; } .invoices-table .col-date { width: 9.5%; color: var(--color-text-secondary); } .invoices-table .col-status { width: 13%; } .invoices-table .col-pay { width: 9.5%; color: var(--color-text-secondary); } .invoices-table .col-user { width: 10%; color: var(--color-text-secondary); } .invoices-table .col-actions { width: 12.5%; text-align: center; } /* ── TABLE KIT (2026-10-07) — pager, column picker, visible row action ── */ .tk-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 2px 0; font-size: var(--fs-sm); color: var(--color-text-secondary); } .tk-pager[hidden] { display: none; } .tk-pager .tk-count { font-variant-numeric: tabular-nums; } .tk-pager .tk-nav { display: inline-flex; align-items: center; gap: 8px; } .tk-pager .tk-page { font-variant-numeric: tabular-nums; color: var(--color-text); } .tk-pager .btn[disabled] { opacity: .5; cursor: default; } .tk-cols { position: relative; display: inline-flex; } .tk-cols-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 60; min-width: 200px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .tk-cols-menu[hidden] { display: none; } .tk-cols-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--color-text); cursor: pointer; white-space: nowrap; } .tk-cols-item:hover { background: var(--color-background); } .tk-cols-item input { flex: none; width: 15px; height: 15px; min-height: 0; margin: 0; padding: 0; accent-color: var(--color-primary); } .tk-cols-reset { margin-top: 4px; border: 0; background: transparent; color: var(--color-primary); cursor: pointer; font: 600 var(--fs-xs)/1 var(--font-main); padding: 6px 8px; text-align: start; border-radius: var(--radius-sm); } .tk-cols-reset:hover { background: var(--color-primary-light); } .row-quick-pay { height: var(--btn-height-sm); padding: 0 10px; margin-inline-end: 6px; vertical-align: middle; border: 1px solid var(--color-primary); border-radius: var(--radius); background: var(--color-surface); color: var(--color-primary); font: 600 var(--fs-xs)/1 var(--font-main); cursor: pointer; white-space: nowrap; } .row-quick-pay:hover { background: var(--color-primary); color: var(--color-on-primary); } .row-quick-pay:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } @media (max-width: 768px) { .tk-cols { display: none; } } /* ── Draggable column-resize handle (smart-table.js) ── */ .col-resizer { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 9px; cursor: col-resize; z-index: 6; touch-action: none; user-select: none; } .col-resizer::after { content: ''; position: absolute; inset-inline-end: 3px; top: 20%; bottom: 20%; width: 2px; background: var(--color-border); border-radius: 2px; opacity: 0; transition: opacity .12s ease, background .12s ease; } .col-resizer:hover::after, .col-resizer:active::after { opacity: 1; background: var(--color-primary); } /* ── RFQ table: reuses the invoices smart styling, its own column proportions (sum 100%) ── */ .rfq-table .col-id { width: 9%; } .rfq-table .col-customer { width: 34%; } .rfq-table .col-num { width: 16%; } .rfq-table .col-date { width: 16%; } .rfq-table .col-user { width: 17%; } .rfq-table .col-actions { width: 8%; } /* ── Shared detail modal (invoices + RFQ) ── */ .inv-modal { max-width: 850px; max-height: 88vh; overflow-y: auto; padding: 24px 28px; } .inv-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); padding-bottom: 12px; } .inv-modal-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; color: var(--color-primary); } .inv-modal-close { background: none; border: none; font-size: var(--fs-2xl); cursor: pointer; color: var(--color-text-secondary); padding: 4px 8px; border-radius: var(--radius); transition: background 0.2s; } .inv-modal-close:hover { background: var(--color-background); } /* The footer wraps: an owed, editable invoice on a till with a roll printer has nine buttons, which a single row squeezed past their labels (2026-10-09). */ .inv-modal-footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; border-top: 1px solid var(--color-border); padding-top: 12px; } .inv-modal-action { flex: 1 1 auto; height: 40px; font-size: var(--fs-md); white-space: nowrap; } .inv-modal-action-sm { flex: 0.6 1 auto; height: 40px; font-size: var(--fs-md); white-space: nowrap; } .inv-modal-pay { border-color: var(--color-primary); color: var(--color-primary); font-weight: 700; } .inv-print-icon { font-size: var(--fs-lg); vertical-align: middle; } .invoices-table tbody tr { cursor: pointer; transition: background-color .12s ease; } .invoices-table tbody tr:hover { background: var(--color-primary-light); } .invoices-table tbody tr.active-row { background: var(--color-primary-light); box-shadow: inset 3px 0 0 var(--color-primary); } .invoices-table .row-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: var(--transition); } .invoices-table .row-action-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); } .invoices-table .row-action-btn .material-symbols-rounded { font-size: 17px; } /* Sortable header affordance */ .invoices-table th.is-sortable { cursor: pointer; user-select: none; } .invoices-table th.is-sortable:hover { color: var(--color-primary); } .invoices-table th .sort-icon { font-size: .8em; opacity: .55; margin-inline-start: 3px; } /* ── Empty / error / loading states for data tables ── */ .table-empty-state { text-align: center; padding: 34px 14px; color: var(--color-text-muted); } .table-empty-state .material-symbols-rounded { font-size: 42px; opacity: .45; display: block; margin: 0 auto 6px; } .table-empty-state .empty-title { font-weight: 600; color: var(--color-text-secondary); font-size: var(--fs-sm); } .table-empty-state .empty-hint { font-size: var(--fs-xs); margin-top: 2px; } /* ── Search/filter row: inline result count ── */ .inv-result-count { font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: 600; white-space: nowrap; padding-inline: 4px; } /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce) { .invoices-table tbody tr, .status-pill, .row-action-btn { transition: none !important; } } /* ============================================================================= SUPPORT WIDGET — floating help icon + slide-in ticket panel ============================================================================= */ .support-fab { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 99998; width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; background: var(--color-primary); color: #fff; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .support-fab:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-xl); } .support-fab .material-symbols-rounded { font-size: 26px; } .support-panel { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 99999; width: 360px; max-width: calc(100vw - 40px); height: 560px; max-height: calc(100vh - 90px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); display: none; flex-direction: column; overflow: hidden; transform: translateY(12px) scale(.98); opacity: 0; transition: opacity .18s ease, transform .18s ease; } .support-panel.open { display: flex; transform: translateY(0) scale(1); opacity: 1; } .support-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--color-primary); color: var(--color-on-primary); } .support-head .support-title { flex: 1; margin: 0; font-size: var(--fs-md); font-weight: 700; } .support-head button { background: rgba(255,255,255,.15); border: none; color: var(--color-on-primary); cursor: pointer; width: 28px; height: 28px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; } .support-head button:hover { background: rgba(255,255,255,.28); } .support-head .material-symbols-rounded { font-size: 18px; } .support-body { flex: 1; overflow-y: auto; padding: 12px; } .support-new-btn { width: 100%; margin-bottom: 10px; } .support-list { display: flex; flex-direction: column; gap: 6px; } .support-item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 9px 11px; cursor: pointer; transition: var(--transition); } .support-item:hover { border-color: var(--color-primary); background: var(--color-primary-light); } .support-item-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; } .support-num { font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .support-item.has-unread { border-color: var(--color-primary); background: var(--color-primary-light); } .support-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-red); margin-inline-end: 6px; vertical-align: middle; } .support-item-title { font-size: var(--fs-sm); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .support-empty { text-align: center; color: var(--color-text-muted); padding: 30px 12px; font-size: var(--fs-sm); } .support-empty .material-symbols-rounded { font-size: 40px; opacity: .45; display: block; margin: 0 auto 6px; } .support-form { display: flex; flex-direction: column; } .support-form label { font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-secondary); margin: 6px 0 3px; } .support-form input[type=text], .support-form textarea, .support-form select { width: 100%; padding: 7px 9px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font-size: var(--fs-sm); } .support-form textarea { resize: vertical; } .support-row { display: flex; gap: 8px; } .support-row > div { flex: 1; } .support-file, .support-file-sm { cursor: pointer; color: var(--color-primary); font-size: var(--fs-xs); margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; } .support-filename { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 4px; } .support-form .btn { margin-top: 12px; } .support-msg { font-size: var(--fs-xs); margin-top: 8px; } .support-msg.err { color: var(--color-red); } .support-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .support-detail-title { font-size: var(--fs-md); font-weight: 600; } .support-stale { font-size: var(--fs-2xs); color: var(--color-amber); background: var(--color-amber-light); border: 1px solid var(--color-amber-border); border-radius: var(--radius); padding: 6px 9px; margin-bottom: 10px; } .support-convo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .support-bubble { max-width: 85%; padding: 7px 10px; border-radius: var(--radius-lg); font-size: var(--fs-sm); } .support-bubble.them { align-self: flex-start; background: var(--color-background); border: 1px solid var(--color-border); } .support-bubble.me { align-self: flex-end; background: var(--color-primary-light); border: 1px solid var(--color-primary); } .support-bubble-who { font-size: var(--fs-2xs); color: var(--color-text-muted); margin-bottom: 2px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .support-bubble-time { font-size: var(--fs-2xs); color: var(--color-text-muted); opacity: 0.8; white-space: nowrap; direction: ltr; } .support-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .support-att-img { display: block; line-height: 0; } .support-att-img img { max-width: 160px; max-height: 160px; border-radius: var(--radius); border: 1px solid var(--color-border); object-fit: cover; } .support-att-file { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); padding: 4px 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: var(--color-primary); } .support-att-file:hover { background: var(--color-primary-light); } .support-att-file .material-symbols-rounded { font-size: 15px; } .support-reply { display: flex; align-items: flex-end; gap: 6px; } .support-reply textarea { flex: 1; padding: 7px 9px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--fs-sm); resize: none; } .support-reply .support-send { padding: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; } .support-file-sm { margin: 0; width: 32px; height: 36px; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius); } html[dir="ltr"] .support-fab, html[dir="ltr"] .support-panel { inset-inline-start: auto; inset-inline-end: 20px; } /* ═══════════════════════════════════════════════════════════════════════════ macOS SHARED ENHANCEMENT COMPONENTS (app-wide) — used by every screen to match the POS craft: page headers, segmented filters, KPI cards, empty states, icons. ═══════════════════════════════════════════════════════════════════════════ */ .pxi { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; color: currentColor; flex: none; } .tnum { font-variant-numeric: tabular-nums; } /* Page header: title + count + primary action */ .mac-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; } .mac-head-titles { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .mac-head h1, .mac-head .mac-title { font-size: var(--fs-lg); font-weight: 700; color: var(--color-text); margin: 0; letter-spacing: 0; } .mac-head .mac-count { font-size: var(--fs-2xs); color: var(--color-text-muted); white-space: nowrap; } .mac-head-actions { display: flex; align-items: center; gap: 6px; flex: none; } /* Primary "new entity" action button (customers / suppliers / representatives) — matches the purchases new-order button so every list header shares one action style. */ .entity-new-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; height: 30px; padding: 0 12px; font-size: var(--fs-xs); font-weight: 600; border-radius: var(--radius); } .entity-new-btn .material-symbols-rounded { font-size: 15px; line-height: 1; } /* Segmented control (status/type/period filters) */ .mac-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius); } .mac-seg > button, .mac-seg > .mac-seg-btn { border: none; background: transparent; color: var(--color-text-secondary); cursor: pointer; font-family: var(--font-main); font-size: var(--fs-xs); font-weight: 500; padding: 4px 12px; border-radius: var(--radius-sm); transition: 0.15s; white-space: nowrap; } .mac-seg > button.active, .mac-seg > .mac-seg-btn.active, .mac-seg > [aria-selected="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-xs); } /* Toolbar (search + filters + actions) */ .mac-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .mac-search { position: relative; flex: 1; min-width: 170px; display: flex; align-items: center; } .mac-search .pxi { position: absolute; inset-inline-start: 9px; font-size: 0.9rem; color: var(--color-text-muted); pointer-events: none; } .mac-search input { width: 100%; height: var(--input-height); border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius); padding: 0 30px; font-family: var(--font-main); font-size: var(--fs-sm); color: var(--color-text); } /* Toolbar controls sit inline. Without this they inherit the global `select/input { width: 100% }` and each filter is forced onto its own full-width row. */ .mac-toolbar > select, .mac-toolbar > input, .mac-toolbar > .pur-filter-field { width: auto; height: var(--input-height); padding: 0 10px; font-size: var(--fs-sm); } .mac-toolbar > label { font-size: var(--fs-xs); } .mac-toolbar > .btn { height: var(--btn-height); padding: 0 12px; font-size: var(--fs-sm); } .mac-search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); } /* KPI stat cards (dashboards) */ .mac-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 6px; margin-bottom: 6px; } .mac-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; box-shadow: var(--shadow-xs); } .mac-stat-label { font-size: var(--fs-2xs); color: var(--color-text-secondary); font-weight: 500; display: flex; align-items: center; gap: 4px; } .mac-stat-label .pxi { font-size: 0.8rem; color: var(--color-text-muted); } .mac-stat-val { font-size: var(--fs-lg); font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.25; } .mac-stat-sub { font-size: var(--fs-2xs); color: var(--color-text-muted); } /* Empty state */ .mac-empty { text-align: center; padding: 44px 20px; color: var(--color-text-muted); } .mac-empty .pxi { font-size: 2rem; opacity: 0.5; display: block; margin: 0 auto 8px; width: 2rem; height: 2rem; } .mac-empty-title { font-size: var(--fs-md); color: var(--color-text-secondary); font-weight: 500; } .mac-empty-sub { font-size: var(--fs-xs); margin-top: 3px; } /* Thin monochrome icon action button */ .mac-iconbtn { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: 0.15s; } .mac-iconbtn:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } .mac-iconbtn.danger:hover { background: var(--color-red-light); border-color: var(--color-red); color: var(--color-red); } .mac-iconbtn .pxi { font-size: 0.95rem; } /* Card-row list (alternative to tables) */ .mac-list { display: flex; flex-direction: column; gap: 8px; } .mac-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color 0.15s, box-shadow 0.15s; } .mac-row:hover { border-color: var(--color-text-muted); box-shadow: var(--shadow-xs); } .mac-row-ic { width: 36px; height: 36px; border-radius: var(--radius); flex: none; display: grid; place-items: center; background: var(--color-background); border: 1px solid var(--color-border-light); color: var(--color-text-secondary); } .mac-row-main { flex: 1; min-width: 0; } .mac-row-title { font-size: var(--fs-sm); font-weight: 500; color: var(--color-text); } .mac-row-sub { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ macOS MOTION POLISH — smooth, fast, restrained (the "everything glides" feel) ═══════════════════════════════════════════════════════════════════════════ */ .btn, .mac-seg > button, .mac-iconbtn, .pcard, .pcard-add, .pos-pay, .nav-btn, .action-menu-item, .mac-row, .stat-card, .pos-card, .product-table tbody tr, .sales-item, .dropdown-list-item, .sidebar-action-btn { transition: background-color 0.17s var(--ease-out), color 0.17s var(--ease-out), border-color 0.17s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.13s var(--ease-out); } /* Press feedback — a quick, subtle scale-in on tap/click */ .btn:active, .mac-iconbtn:active, .pcard-add:active, .pos-pay:active, .pos-btn-add:active, .pos-btn-checkout:active { transform: scale(0.96); } .pcard:active { transform: scale(0.985); } /* Segmented controls glide between selections */ .mac-seg > button, .pos-seg { transition: color 0.16s var(--ease-out), background-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out); } /* Overlays fade smoothly */ .modal-overlay { transition: opacity 0.2s var(--ease-out); } @media (prefers-reduced-motion: reduce) { .btn, .mac-iconbtn, .pcard, .pcard-add, .pos-pay, .pos-btn-add { transition: none; } .btn:active, .mac-iconbtn:active, .pcard:active, .pcard-add:active, .pos-pay:active { transform: none; } } /* ============================================================================= WHATSAPP BUTTON The mark is now an pointing at whatsapp.svg — the official full-colour logo, which carries its own green disc. So this rule paints NO background, NO border-radius and NO fill: every earlier attempt failed because the icon's appearance depended on CSS arriving and being fresh, and a stale stylesheet left a bare shape. Size lives on the img's width/height attributes. What is left here is only what CSS should own: spacing, alignment, hover. ============================================================================= */ .wa-btn { display: inline-flex; align-items: center; margin-inline-start: 6px; vertical-align: middle; text-decoration: none; flex-shrink: 0; transition: transform .15s; } .wa-btn:hover { transform: scale(1.15); } .wa-btn:focus-visible { outline: 2px solid #25d366; outline-offset: 2px; border-radius: 50%; } @media (prefers-reduced-motion: reduce) { .wa-btn { transition: none; } .wa-btn:hover { transform: none; } } /* Inline variant for dropdown menu items — same asset, smaller, on the baseline. */ .wa-inline { display: inline-flex; align-items: center; vertical-align: -3px; flex-shrink: 0; } /* ============================================================================= 17. DISCIPLINE LAYER (2026-08-27) — global enforcement rules that keep every page on the same rhythm regardless of which generation of markup it uses. ============================================================================= */ /* Digits line up in columns everywhere numbers stack: tables, number fields, and money readouts. Arabic text is unaffected — this only fixes digit widths. */ table, input[type="number"], .stat-value, .po-readonly, .pur-paid-full-amount { font-variant-numeric: tabular-nums; } /* Motion is a courtesy, not a requirement. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Number inputs: RTL pages still read figures left-to-right. */ input[type="number"] { direction: ltr; text-align: center; } /* Small muted chip — keyboard keys, counts, passive badges. */ .chip-muted { background: var(--color-background); color: var(--color-text-secondary); border: 1px solid var(--color-border); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 700; } /* ============================================================================= 18. COMPONENT LAYER V2 (2026-08-28) — the VISIBLE redesign. Fusion-360-grade component rendering for every tab at once. Selectors are `html`-prefixed on purpose: (0,1,1) beats the single-class rules embedded in each page's