/* ============================================================ Affhaat v16 — design system layer ============================================================ Loaded AFTER style.css, so it only adds and overrides. Contents 1. Typography — Bangla + English font pairing, scale 2. Design tokens (spacing / radius / shadow / colour) 3. Cards, tables, buttons, forms, badges — one consistent look 4. Daily Book (the new simple income/expense page) 5. Product share buttons 6. Floating contact buttons (WhatsApp + Messenger) 7. Print / invoice polish (reports + wholesale memo) 8. Responsive pass (mobile: sidebar, tables, forms, buttons) Everything is expressed with variables from :root so one value changes the whole app — this is the "sob kisu alo melo lagse" fix. ============================================================ */ /* --------------------------------------------------------------- 1. TYPOGRAPHY — Bangla + English pairing --------------------------------------------------------------- English headings/UI: 'Inter' (clean, neutral, very legible) English body: 'Inter' Bangla (both): 'Hind Siliguri' -> 'Noto Sans Bengali' Numerals stay LTR and tabular where money is shown so columns line up. The webfonts are requested with display=swap and a full system fallback, so the site still renders correctly on a server with no outbound internet — it simply uses the local fonts. --------------------------------------------------------------- */ :root { --nx-font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --nx-font-bn: 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', 'Kalpurush', var(--nx-font-en); --nx-font-stack: var(--nx-font-en); /* Type scale (1.250 major third, 16px base) */ --nx-fs-xs: .78rem; --nx-fs-sm: .875rem; --nx-fs-base: 1rem; --nx-fs-md: 1.125rem; --nx-fs-lg: 1.375rem; --nx-fs-xl: 1.75rem; --nx-fs-2xl: 2.125rem; /* Spacing scale */ --nx-sp-1: .25rem; --nx-sp-2: .5rem; --nx-sp-3: .75rem; --nx-sp-4: 1rem; --nx-sp-5: 1.5rem; --nx-sp-6: 2rem; --nx-sp-7: 2.5rem; /* Consistent radii + shadows */ --nx-radius-sm: 8px; --nx-radius: 12px; --nx-radius-lg: 16px; --nx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --nx-shadow: 0 2px 10px rgba(15, 23, 42, .07); --nx-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12); /* Semantic colour set — replaces the ad-hoc hex values scattered across admin pages so every green/red/amber means the same thing. */ --nx-ink: #0f172a; --nx-ink-soft: #475569; --nx-ink-mute: #64748b; --nx-line: #e5e7eb; --nx-surface: #ffffff; --nx-surface-2: #f8fafc; --nx-brand: #e11d48; --nx-brand-dark: #be123c; --nx-brand-tint: #fff1f2; --nx-ok: #059669; --nx-ok-tint: #ecfdf5; --nx-warn: #d97706; --nx-warn-tint: #fffbeb; --nx-bad: #dc2626; --nx-bad-tint: #fef2f2; } body { font-family: var(--nx-font-stack); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'kern' 1, 'liga' 1; } /* Bangla text renders with the Bengali face automatically — the browser picks the first family in the stack that has the glyph. Keeping the Bengali faces at the FRONT of the body stack means a Bangla page never falls back to a Latin-only font with broken conjuncts. */ body, input, select, textarea, button { font-family: var(--nx-font-bn), var(--nx-font-en); } h1, h2, h3, h4, h5, h6, .page-title, .card-title { font-family: var(--nx-font-en), var(--nx-font-bn); color: var(--nx-ink); letter-spacing: -.011em; line-height: 1.25; font-weight: 700; } .page-title { font-size: var(--nx-fs-xl); margin: 0 0 var(--nx-sp-4); } h2, .card-title { font-size: var(--nx-fs-lg); margin: 0 0 var(--nx-sp-3); } h3 { font-size: var(--nx-fs-md); } /* Money and other figures: tabular numerals so columns align. */ .nx-num, .nx-kpi-value, .nx-daily-amt, .nx-daily-total-value, td.nx-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } p, li, td, th { line-height: 1.65; } .muted { color: var(--nx-ink-mute); } /* --------------------------------------------------------------- 2. CARDS / SURFACES --------------------------------------------------------------- */ .card { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-radius); padding: var(--nx-sp-5); margin-bottom: var(--nx-sp-4); box-shadow: var(--nx-shadow-sm); } /* --------------------------------------------------------------- 2b. THE GRID-OVERFLOW FIX ("mobile responsive kharap") This single cause broke the mobile layout of the dashboard, products, orders, users and balance-sheet pages. A CSS grid item defaults to `min-width: auto`, meaning it refuses to shrink below its CONTENT. A wide inside a card therefore stretched its `1fr` track to the table's natural width (measured: 620px of table inside a 390px viewport = the page scrolled sideways by 261px). `minmax(0, 1fr)` lets the track shrink, and `min-width: 0` on the flex/grid children lets the card shrink with it — after which the table's own wrapper is the thing that scrolls. This is the standard fix and it must be applied to every breakpoint. --------------------------------------------------------------- */ .grid, .grid-2, .grid-3, .grid-4, .grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .row, .row > *, .flex, .flex-between, .flex-between > *, .stats-grid, .stats-grid > * { min-width: 0; } /* Re-declare the tracks so they may shrink below their content width. */ .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } } /* The admin shell must never be widened by its own content either. */ .admin-shell, .admin-main, .admin-content, .main-content, .container { min-width: 0; max-width: 100%; } .card-title { margin-bottom: var(--nx-sp-3); } /* --------------------------------------------------------------- 3. TABLES — one look everywhere, scrollable on small screens --------------------------------------------------------------- */ .nx-table-wrap, .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--nx-radius-sm); } .table { width: 100%; border-collapse: collapse; font-size: var(--nx-fs-sm); background: var(--nx-surface); } .table thead th { background: var(--nx-surface-2); color: var(--nx-ink-soft); font-size: var(--nx-fs-xs); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding: var(--nx-sp-3) var(--nx-sp-3); border-bottom: 1px solid var(--nx-line); text-align: left; white-space: nowrap; } .table tbody td { padding: var(--nx-sp-3); border-bottom: 1px solid #f1f5f9; vertical-align: middle; } .table tbody tr:hover { background: #fafbff; } .table tbody tr:last-child td { border-bottom: none; } .table td .btn, .table td form { display: inline-block; } /* --------------------------------------------------------------- 4. BUTTONS — consistent size, radius, focus ring --------------------------------------------------------------- */ .btn { border-radius: var(--nx-radius-sm); font-weight: 600; line-height: 1.2; transition: background .15s, border-color .15s, box-shadow .15s, transform .12s; } .btn:focus-visible, .form-control:focus-visible, a:focus-visible { outline: 2px solid var(--nx-brand); outline-offset: 2px; } .btn-sm { padding: var(--nx-sp-2) var(--nx-sp-3); font-size: var(--nx-fs-xs); } .btn-primary { background: var(--nx-brand); border-color: var(--nx-brand); } .btn-primary:hover { background: var(--nx-brand-dark); border-color: var(--nx-brand-dark); } .btn-danger { background: var(--nx-bad); border-color: var(--nx-bad); } /* --------------------------------------------------------------- 5. FORMS --------------------------------------------------------------- */ .form-control { width: 100%; padding: var(--nx-sp-3) var(--nx-sp-3); border: 1px solid var(--nx-line); border-radius: var(--nx-radius-sm); font-size: var(--nx-fs-sm); background: var(--nx-surface); color: var(--nx-ink); transition: border-color .15s, box-shadow .15s; } .form-control:focus { border-color: var(--nx-brand); box-shadow: 0 0 0 3px rgba(225, 29, 72, .12); outline: none; } /* Native
(42 of them). Rather than edit each view, the table's PARENT container is made the scroll box via JS on small screens (see nxMakeTablesScrollable() in footer.php). A pure-CSS `display:block; overflow:auto` on the
does NOT work here: a table's width is driven by its content, so it grows to its natural size and escapes the block box — the page then scrolls sideways. Wrapping the table in a real block element is the correct fix, so the page-level guard below is the belt to that braces. */ /* v38 — `clip` (not `hidden`): no page-level sideways scroll, and no scroll container that would interfere with the product rows' own `overflow-x: auto` scrolling. */ body { overflow-x: clip; } /* Tables that ARE wrapped keep working as before. */ .nx-table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Buttons and links inside a table cell stay comfortably tappable. */ .table td .btn { padding: var(--nx-sp-2) var(--nx-sp-3); font-size: var(--nx-fs-xs); } /* The nested-category action cluster wraps instead of overflowing. */ .table td[style*="nowrap"] { white-space: normal !important; } /* Dialogs that were wider than the screen. */ .nx-modal-box { width: calc(100vw - 28px); max-width: 520px; margin: 14px auto; } } /* --- very small phones --- */ @media (max-width: 380px) { .nx-daily-line { flex-direction: column; align-items: flex-start; gap: 2px; } .nx-daily-amt { align-self: flex-end; } .pdp-share-btn { flex: 1 1 100%; } } /* ============================================================ FIX (audit) — MOBILE ADMIN TABLES WERE CLIPPED, NOT SCROLLABLE ------------------------------------------------------------ `.table { width: 100% }` (nx-v16.css:206) makes the table shrink to the width of its scroll container. On a 390px phone the container is ~340px, so a 7-column product table was compressed into 340px: the "Price" column was cut off mid-number and the action buttons were pushed out of view. `overflow-x: auto` on the wrapper never engaged because the table never became wider than the wrapper. Giving the table a min-width on small screens makes it keep its natural column widths; the wrapper then actually scrolls, which is what the existing `overflow-x: auto` was always meant to do. ============================================================ */ @media (max-width: 900px) { .nx-table-wrap > table, .table-wrap > table, .nx-table-wrap > .table, .table-wrap > .table { min-width: 720px; } /* Keep the first column (usually the product/order name) readable while the rest scrolls. */ .nx-table-wrap > table th:first-child, .nx-table-wrap > table td:first-child, .table-wrap > table th:first-child, .table-wrap > table td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; } }