/* ===================================================================== UB ERP — design system --------------------------------------------------------------------- The palette and typography are taken from uzhavarbumi.com (requirement 23), read out of its own stylesheet rather than guessed: brand green #76A543 .btn.btn-success, footer a, .text-success active green #7CA133 .date-btn.active, .property-type-btn.active section green #75A543 #section-products, #team accent blue #0099E5 .logo a, .copy_right, newsletter button warm orange #FF5722 nav hover ink #292A2B h2.title-w3ls, h3.title-w3ls body font 'Lato', sans-serif (400, 900) heading font 'Montserrat', sans-serif (400, 500), letter-spacing 1px radii 4px images/inputs, 10px cards, 20px pill groups card shadow 0 2px 6px rgba(0,0,0,.08) An accounting screen is read for hours, so the surface is quieter than the marketing site: green is kept for identity, action and positives, and the working surface stays near-white. ===================================================================== */ :root { /* brand */ --brand: #76A543; --brand-600: #6B9A3B; --brand-700: #5C8632; --brand-800: #4A6C28; --brand-100: #EDF4E4; --brand-050: #F6FAF1; --accent: #0099E5; --accent-700: #0077B5; --accent-050: #E8F6FE; --warn: #FF5722; --warn-050: #FFF1EC; --danger: #D13030; --danger-050: #FDECEC; --amber: #B7791F; --amber-050: #FDF6E7; /* surface */ --ink: #292A2B; --ink-2: #4A4C4E; --ink-3: #6B6E70; --ink-4: #93989B; --line: #E4E7E2; --line-2: #EFF1ED; --bg: #F7F8F5; --surface: #FFFFFF; --surface-2: #FBFCFA; /* Zebra striping was a literal, so alternate rows stayed near-white in dark mode — on the widest tables in the system. It is a token now. */ --zebra: #FCFDFB; /* type */ --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-head: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Figures line up only in a tabular face. Money is never in Lato. */ --font-num: 'Segoe UI', 'Roboto Mono', 'Consolas', ui-monospace, monospace; --r-sm: 4px; --r-md: 8px; --r-lg: 10px; --r-pill: 20px; /* A plain left with the OS's own appearance draws its dropdown button INSIDE our rounded border, and that button's own corner is square — on Windows Chrome it is visible as a flat-edged notch at the top-right and bottom-right of every dropdown, on every voucher screen, because a voucher is mostly dropdowns (voucher type, party, place of supply, and an item line's ledger/godown/UOM). appearance:none removes that button so the border-radius above applies to the WHOLE control, arrow included. */ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right .65rem center; background-size: .65rem .4rem; padding-right: 1.9rem; /* A long ledger or godown name in a narrow column has to lose to the arrow, not sit under it — without this the text simply overflows the padding box and runs into the arrow instead of being cut off before it. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } select:disabled { background-image: none; } .form-grid { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .form-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .form-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* --------------------------------------------------------------------- Voucher entry: one screenful --------------------------------------------------------------------- An entry screen is used dozens of times a day by somebody who already knows what the fields mean, and the sales invoice had grown to 1,112px against a 900px viewport — so the total and the Save button were both below the fold while the lines were being typed. Everything here is in service of one thing: the figure and the button stay in view. --------------------------------------------------------------------- */ /* A tighter field: the label sits on the line above but claims less of it, and the hint is a title attribute rather than 35px of permanent prose. */ .form-grid.dense { gap: 0 .7rem; } .form-grid.dense .field { margin-bottom: .5rem; } .form-grid.dense .field > label { font-size: .68rem; margin-bottom: .12rem; } /* The item grid, at the density of a spreadsheet rather than a report. The invoice grid is 15 columns and overflowed its own card horizontally; the padding is what it was spending. */ table.data.grid-tight th, table.data.grid-tight td { padding: .22rem .3rem; font-size: .78rem; } table.data.grid-tight input, table.data.grid-tight select { padding: .2rem .35rem; font-size: .78rem; } /* The general select rule's own right padding (for the custom arrow) would otherwise be wiped out by the shorthand `padding` above — same property, later declaration wins, so the arrow needs its own smaller room back. */ table.data.grid-tight select { padding-right: 1.45rem; background-position: right .4rem center; background-size: .5rem .32rem; } /* The per-cell padding above is column-to-column spacing; the FIRST and LAST column also need to clear the card's own rounded corner, which sits right at the table's edge because .card-body.tight strips its own padding to give the grid the full card width. Without this the "Item" heading sits closer to the card border than "Items" does one row above it — the row of column headers reads as uninset while everything around it is not. */ table.data.grid-tight th:first-child, table.data.grid-tight td:first-child { padding-left: .75rem; } table.data.grid-tight th:last-child, table.data.grid-tight td:last-child { padding-right: .75rem; } /* The bar that replaces a totals card. Sticky to the bottom of the viewport, so the running total and the Save button are reachable from anywhere on the form without scrolling to the end of it. */ /* The voucher key bar is ALSO sticky to bottom 0 on these screens, so the two would occupy the same strip and the later one in the DOM — the key bar — would cover the Save button. Offset by the key bar's own height, which is the one number below, and raise the z-index so that even where :has() is not understood the entry bar is on top and still clickable rather than buried. */ /* voucher-entry.js measures the key bar and publishes it as --vbar-h on :root. The fallback in the var() call covers the moment before that runs — it must live HERE and not as a declaration on .entry-bar, or the local value would shadow the inherited one and the measurement would never be used. */ .app:has(.vbar) .entry-bar { bottom: var(--vbar-h, 3.7rem); } .entry-bar { position: sticky; bottom: 0; z-index: 21; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .55rem .9rem; margin-top: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); } .entry-sums { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; } .entry-chip { font-size: .74rem; color: var(--ink-3); white-space: nowrap; } .entry-chip strong { display: block; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 600; color: var(--ink); } .entry-chip.total strong { font-size: 1.2rem; color: var(--accent-ink, var(--ink)); } .entry-bar .spacer { flex: 1 1 auto; } /* On a narrow screen the bar keeps the total and the button and drops the breakdown, which is a preview and readable on the saved voucher anyway. */ @media (max-width: 700px) { .entry-chip:not(.total) { display: none; } } @media print { .entry-bar { position: static; box-shadow: none; } } .inline-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; } /* --------------------------------------------------------------------- Searchable select --------------------------------------------------------------------- Any