*, *::before, *::after { box-sizing: border-box; } :root { --bg: #f4f6fa; --surface: #ffffff; --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --line: #e2e8f0; --line-soft: #eef2f7; --primary: #4f46e5; --primary-strong: #4338ca; --primary-soft: #eef2ff; --link: #4f46e5; --primary-line: #c7d2fe; --surface-2: #fafbfd; --nav-bg: rgb(255 255 255 / .88); --grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); --ok: #059669; --ok-soft: #ecfdf5; --ok-ink: #047857; --warn: #d97706; --warn-soft: #fffbeb; --warn-ink: #b45309; --bad: #e11d48; --bad-soft: #fff1f2; --bad-ink: #be123c; --info-soft: #eef2ff; --info-ink: #4338ca; --ok-line: #a7f3d0; --warn-line: #fde68a; --bad-line: #fecdd3; --info-line: #e0e7ff; --side-bg: #0b1428; --side-ink: #94a3b8; --side-ink-hi: #f1f5f9; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgb(15 23 42 / .05), 0 10px 30px -18px rgb(15 23 42 / .18); --shadow-lift: 0 2px 4px rgb(15 23 42 / .06), 0 16px 40px -20px rgb(79 70 229 / .35); } html[data-theme="dark"] { color-scheme: dark; --bg: #0b1220; --surface: #121c31; --ink: #e6ecf5; --ink-2: #c2cde0; --muted: #8b9ab3; --line: #24334f; --line-soft: #1c2942; --primary: #6366f1; --primary-strong: #818cf8; --primary-soft: #1c2752; --link: #97a7fd; --primary-line: #3b4a80; --surface-2: #172341; --nav-bg: rgb(13 20 36 / .92); --ok: #10b981; --ok-soft: #0a2b22; --ok-ink: #5eead4; --warn: #d97706; --warn-soft: #33240a; --warn-ink: #fbbf24; --bad: #e11d48; --bad-soft: #3a1424; --bad-ink: #fb7185; --info-soft: #1c2752; --info-ink: #a5b4fc; --ok-line: #14532d; --warn-line: #6b5518; --bad-line: #6b1d33; --info-line: #2c3b63; --side-bg: #070d1a; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -18px rgb(0 0 0 / .6); --shadow-lift: 0 2px 4px rgb(0 0 0 / .5), 0 16px 40px -20px rgb(79 70 229 / .4); } /* ---------------------------------------------------------------- brands A company picks its palette (accounts.Company.brand_theme) and the server writes it to data-brand on . Only the variables above are restated; every rule in the rest of this file already reads them, so a brand cannot drift from the layout. "gold" is black-and-gold, taken from a client logo of a gold monogram on near-black. The trap with gold is contrast: #d4af37 on white is 2.1:1, which fails WCAG AA for text by a wide margin and is exactly how a smart palette turns into an unreadable one. So the bright gold is used for surfaces, borders and large accents, and TEXT gold is a darker bronze in light mode (#8a6a12 on white = 5.06:1). Every pair below was measured; the lowest is 5.06:1 against a 4.5:1 floor. */ html[data-brand="gold"] { --bg: #faf8f3; --surface: #ffffff; --ink: #191510; --ink-2: #463c28; --muted: #6b6152; --line: #e6dcc6; --line-soft: #f2ebdc; --primary: #8a6a12; /* text/icon gold — AA on white */ --primary-strong: #6d5310; --primary-soft: #fdf6e3; --link: #8a6a12; --primary-line: #dcc98d; --surface-2: #fdfbf6; --nav-bg: rgb(255 255 255 / .9); --grad: linear-gradient(135deg, #d4af37 0%, #8a6a12 100%); --info-soft: #fdf6e3; --info-ink: #6d5310; --side-bg: #000000; /* the logo's own ground */ --side-ink: #b9ae95; --side-ink-hi: #f5eeda; --shadow: 0 1px 2px rgb(25 21 16 / .05), 0 10px 30px -18px rgb(25 21 16 / .22); --shadow-lift: 0 2px 4px rgb(25 21 16 / .07), 0 16px 40px -20px rgb(138 106 18 / .38); } html[data-brand="gold"][data-theme="dark"] { --bg: #0b0b0d; --surface: #16161a; --ink: #f2ece0; --ink-2: #d8cfbc; --muted: #9d9482; --line: #2e2a24; --line-soft: #232019; --primary: #d4af37; /* on near-black the bright gold is 9.35:1 */ --primary-strong: #f0d97b; --primary-soft: #241d0c; --link: #e8c85c; --primary-line: #4a3d1a; --surface-2: #1d1d22; --nav-bg: rgb(11 11 13 / .93); --ok: #34d399; --ok-soft: #0c2a1f; --ok-ink: #6ee7b7; --warn: #f0b429; --warn-soft: #2e2409; --warn-ink: #fcd34d; --bad: #f87171; --bad-soft: #2e1416; --bad-ink: #fca5a5; --info-soft: #241d0c; --info-ink: #e8c85c; --side-bg: #000000; --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 10px 30px -18px rgb(0 0 0 / .75); --shadow-lift: 0 2px 4px rgb(0 0 0 / .55), 0 16px 40px -20px rgb(212 175 55 / .28); } /* Logos further down get a white plate, because most client logos are dark ink and would vanish on the dark sidebar. A logo that carries its OWN dark ground is the opposite case: the plate puts a black rectangle inside a white rounded box. This brand's sidebar is already black, so the mark sits straight on it and the join is invisible. */ html[data-brand="gold"] .side-logo, html[data-brand="gold"] .top-logo, html[data-brand="gold"] .paylogo { background: none; padding: 0; } /* Shift chips in the brand's own colours. The stock pastels (blue day, green night) are legible but read as somebody else's palette on a black and gold page. What the roster actually has to answer at a glance is "day or night", so the two are separated by temperature — warm gold for the 09:00 shift, cool slate for the 21:00 one — rather than by hue alone. Measured, all four well past the 4.5:1 floor: 9.20 and 10.22 in light, 10.87 and 8.85 in dark. */ html[data-brand="gold"] .chip-day, html[data-brand="gold"] .chip-morning { background: #f6e6b8; color: #4a3708; border-color: #d4af37; } html[data-brand="gold"] .chip-night, html[data-brand="gold"] .chip-night-12h { background: #dfe3ee; color: #23304d; border-color: #7d8aa8; } html[data-brand="gold"][data-theme="dark"] .chip-day, html[data-brand="gold"][data-theme="dark"] .chip-morning { background: #2e2408; color: #f0d97b; border-color: #6b551a; } html[data-brand="gold"][data-theme="dark"] .chip-night, html[data-brand="gold"][data-theme="dark"] .chip-night-12h { background: #1b2233; color: #b3c2e0; border-color: #3d4a66; } /* "blue" is navy and sky blue, from a client logo of a navy globe with a bright blue swoosh. In light mode navy carries text and filled buttons (#0b5ea8 on white, and white on it, 6.6:1); in dark mode the sky blue carries links (#6cc0ef on #0e1d30, 8.5:1) and buttons keep a deeper blue so their white text still reads (#1675b3, 4.96:1). Measured in tests/test_brand_theme. */ html[data-brand="blue"] { --bg: #f3f6fa; --surface: #ffffff; --ink: #0c1b2e; --ink-2: #2f4257; --muted: #5f6b7a; --line: #dbe4ee; --line-soft: #eaf0f6; --primary: #0b5ea8; --primary-strong: #044778; --primary-soft: #e6f1fb; --link: #0b5ea8; --primary-line: #b6d4ee; --surface-2: #f8fbfe; --nav-bg: rgb(255 255 255 / .9); --grad: linear-gradient(135deg, #044778 0%, #0c8ecd 100%); --info-soft: #e6f1fb; --info-ink: #044778; --side-bg: #03213f; --side-ink: #9db3c9; --side-ink-hi: #f1f6fb; --shadow: 0 1px 2px rgb(12 27 46 / .05), 0 10px 30px -18px rgb(12 27 46 / .2); --shadow-lift: 0 2px 4px rgb(12 27 46 / .06), 0 16px 40px -20px rgb(12 142 205 / .35); } html[data-brand="blue"][data-theme="dark"] { --bg: #07121f; --surface: #0e1d30; --ink: #e5eef7; --ink-2: #bfd0e2; --muted: #8aa0b6; --line: #1f3550; --line-soft: #172a41; --primary: #1675b3; --primary-strong: #5bb8ec; --primary-soft: #0c2a45; --link: #6cc0ef; --primary-line: #1f4f78; --surface-2: #122640; --nav-bg: rgb(7 18 31 / .92); --info-soft: #0c2a45; --info-ink: #8fd0f5; --side-bg: #031526; --side-ink: #9db3c9; --side-ink-hi: #f1f6fb; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -18px rgb(0 0 0 / .6); --shadow-lift: 0 2px 4px rgb(0 0 0 / .5), 0 16px 40px -20px rgb(12 142 205 / .35); } /* The lit menu item is a literal indigo gradient further down; restated in the brand's blues so no indigo shows through. */ html[data-brand="blue"] .side-link.active { background: linear-gradient(90deg, rgb(12 142 205 / .35), rgb(4 71 120 / .18)); } /* The same for gold, which showed a violet bar on its black sidebar. */ /* "green" is Konzept Garden: a dark-grey wordmark inside a green ring, on a white disc. Green carries text and filled buttons; the crimson leaf in their mark is deliberately NOT used as an accent, because --bad is already crimson and a brand colour that reads as an error is a trap. Every pair measured, both modes. Light: ink 16.69 on surface, muted 5.19, primary 7.09, white-on-primary 7.09, side-ink 7.52. Dark: ink 14.52, muted 6.26, link 9.33, white-on-primary 5.50, side-ink 8.70. The lowest anywhere is 5.19, comfortably past the 4.5 floor. The dark block follows the same split blue uses: --primary stays DEEP so a .btn's hardcoded white label keeps 5.50, and --link is the light green that carries text on the surface. Using one green for both fails one or other. */ html[data-brand="green"] { --bg: #f3f7f4; --surface: #ffffff; --ink: #12211a; --ink-2: #33453b; --muted: #5f7168; --line: #dde7e1; --line-soft: #eaf1ec; --primary: #00663a; /* text/icon green - 7.09 on white */ --primary-strong: #004f2c; --primary-soft: #e7f4ec; --link: #00663a; --primary-line: #b3d9c4; --surface-2: #f9fcfa; --nav-bg: rgb(255 255 255 / .9); --grad: linear-gradient(135deg, #00703c 0%, #004f2c 100%); --info-soft: #e7f4ec; --info-ink: #004f2c; --side-bg: #0d2119; /* a deep garden green, not black */ --side-ink: #9bb3a6; --side-ink-hi: #eef6f1; --shadow: 0 1px 2px rgb(18 33 26 / .05), 0 10px 30px -18px rgb(18 33 26 / .2); --shadow-lift: 0 2px 4px rgb(18 33 26 / .07), 0 16px 40px -20px rgb(0 102 58 / .35); } /* Every variable this block leaves out keeps its LIGHT value, not the indigo default - the global dark block has the same specificity and comes first in the file, so the brand block wins either way. Omitting --surface here would paint a white card in dark mode. */ html[data-brand="green"][data-theme="dark"] { --bg: #071310; --surface: #0f2019; --ink: #e6f0ea; --ink-2: #c2d5cb; --muted: #8aa397; --line: #1f3a2d; --line-soft: #172d23; --primary: #14784a; /* deep: .btn paints white on it, 5.50 */ --primary-strong: #5cc48a; --primary-soft: #0c2b1d; --link: #6fd49c; /* light: carries text, 9.33 on surface */ --primary-line: #2f7a52; --surface-2: #132a21; --nav-bg: rgb(7 19 16 / .92); --info-soft: #0c2b1d; --info-ink: #9fe0bd; --side-bg: #050f0c; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -18px rgb(0 0 0 / .55); --shadow-lift: 0 2px 4px rgb(0 0 0 / .45), 0 16px 40px -20px rgb(20 120 74 / .5); } /* The lit menu item is a literal indigo gradient further down; restated so no indigo shows through on a green sidebar. */ html[data-brand="green"] .side-link.active { background: linear-gradient(90deg, rgb(0 112 60 / .34), rgb(0 79 44 / .16)); } /* The payslip letterhead is a hardcoded indigo gradient for every brand. It is the one document staff keep, and a green logo on an indigo band reads as somebody else's stationery. Restated for this brand only - gold and blue are untouched, deliberately, because changing them would alter payslips two other companies have already issued. */ html[data-brand="green"] .payslip-head { background: linear-gradient(135deg, #0d2119 0%, #14432c 100%); --payhead-ink: #9fe0bd; } html[data-brand="gold"] .side-link.active { background: linear-gradient(90deg, rgb(212 175 55 / .24), rgb(138 106 18 / .12)); } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15.5px/1.55 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; } h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.015em; margin: .25rem 0 1.1rem; } h1 .badge { vertical-align: middle; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--primary-strong); } .muted { color: var(--muted); } .small { font-size: .85rem; } .icon { width: 1.15em; height: 1.15em; vertical-align: -.22em; stroke-width: 1.8; } /* ---------- app shell ---------- */ /* One navigation for every screen: below 900px the sidebar slides in as a drawer, above it the same markup is a fixed column. Nothing is dropped from the mobile menu — it is the desktop menu, fitted. */ .sidebar { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(280px, 84vw); max-width: 100%; background: var(--side-bg); color: var(--side-ink); padding: 1.1rem .8rem .9rem; transform: translateX(-100%); /* visibility keeps the closed drawer out of the tab order, and only flips back once the slide-out has finished */ visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; overflow-y: auto; } .sidebar.open { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; box-shadow: 0 0 60px rgb(0 0 0 / .5); } .nav-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(2 6 23 / .55); backdrop-filter: blur(2px); } body.nav-open { overflow: hidden; } .navtoggle { padding: .3rem .45rem; } /* Sidebar internals apply at EVERY width — the drawer is the same nav. */ .side-brand { display: flex; align-items: center; gap: .6rem; color: var(--side-ink-hi); font-weight: 700; padding: .2rem .55rem 1rem; letter-spacing: -.01em; } .side-brand .small { display: block; font-weight: 500; color: var(--side-ink); letter-spacing: 0; } /* a logo is its own wordmark — give it the full column instead of a flex slot */ .side-brand.has-logo { display: block; } .side-nav { flex: 1; overflow-y: auto; scrollbar-width: thin; } .nav-section { font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; /* Dimmer than the links, but past 4.5:1 on every brand's sidebar; the old fixed #475569 was 2.1-2.8:1. */ color: color-mix(in srgb, var(--side-ink) 80%, var(--side-bg)); padding: 1.05rem .6rem .35rem; } .side-link { display: flex; align-items: center; gap: .5rem; color: var(--side-ink); font-weight: 500; font-size: .9rem; padding: .48rem .6rem; border-radius: 9px; margin-bottom: 1px; /* One row, always: Correction approvals and its count wrapped at 236px. */ white-space: nowrap; } .side-link .icon { opacity: .85; } .side-link:hover { color: var(--side-ink-hi); background: rgb(148 163 184 / .10); } .side-link.active { color: #fff; background: linear-gradient(90deg, rgb(79 70 229 / .35), rgb(124 58 237 / .16)); box-shadow: inset 2.5px 0 0 var(--primary); } /* The email above, the buttons below. As one row it fitted three buttons and broke on the fourth: a flex item defaults to min-width:auto, so the email would not shrink past its own text and overflowed the sidebar instead of ellipsising — it read as text showing through from behind the buttons. */ .side-user { border-top: 1px solid rgb(148 163 184 / .18); padding: .8rem .55rem 0; display: flex; flex-direction: column; align-items: stretch; gap: .45rem; font-size: .8rem; color: var(--side-ink); } .side-user .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; /* without this the rule above never takes effect in flex */ } .side-user-actions { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; } /* FIVE BUTTONS ON ONE LINE, in 205px. The row holds a language glyph per language the reader is not in, then light/dark, change password and log out. A third language took it to five buttons at 218px, so log out dropped to a line of its own under the other four and read as a stray control rather than part of the row. The buttons lose horizontal padding rather than the row losing a button: .4rem puts the five at about 168px, and leaves room for the fourth language the markup already plans for (six buttons, about 200px). Their height is untouched, so the tap target is the same size it was. flex-wrap stays as the backstop — a seventh would wrap rather than overflow the sidebar. min-height evens them up: a glyph button is as tall as its line box (32px) and an icon button only as tall as its svg (26px), so the row of five sat visibly ragged. .btn already centres its content, so the shorter ones just grow into the taller ones' height. */ .side-user-actions .btn-sm { padding-inline: .4rem; min-height: 2rem; } .side-user-actions .lang-switch { gap: .25rem; } /* The sidebar is dark in both themes, so these buttons take the brand's sidebar ink, and their hover matches a nav link's. The page-wide ghost hover is --line-soft, a near-white pill that swallowed the icon here. */ .side-user-actions .btn-ghost { color: var(--side-ink); border-color: rgb(148 163 184 / .25); } .side-user-actions .btn-ghost:hover { color: var(--side-ink-hi); background: rgb(148 163 184 / .10); } /* The language switcher is one form holding a button per language the reader is not in (two, with three languages). Laid out as its own flex row so the buttons sit at the same gap as their neighbours, whether the form is in the sidebar, the top bar or the login card. */ .lang-switch { display: inline-flex; align-items: center; gap: .3rem; margin: 0; } .auth-lang.lang-switch { display: flex; justify-content: center; gap: .5rem; margin-top: .9rem; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: .8rem; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: .65rem 1rem; } .brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: -.01em; } .logomark { width: 1.9rem; height: 1.9rem; border-radius: 9px; background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; font-weight: 700; box-shadow: var(--shadow-lift); } /* The top bar is one row at every width. The actions used to be a wrapping .inline-form, and a 375px phone was 4px short of the 379px they needed with the logo, so "Log out" dropped to a second line and the bar doubled to 88px. Now the buttons never wrap or shrink; the brand is the part that gives way — a logo scales down, a name without a logo ends in an ellipsis. */ .topbar > .inline-form { flex: none; flex-wrap: nowrap; } .topbar .brand { min-width: 0; } .topbar .top-logo { min-width: 0; } .topbar .logomark { flex: none; } .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logout-icon { display: none; } @media (max-width: 479px) { /* Height untouched (vertical padding stays .3rem), only the air between. The action gap is .45rem because that is how far the bell's count overhangs its button — any less and the badge sits on the 中 button. */ .topbar { gap: .5rem; } .topbar > .inline-form { gap: .45rem; } .topbar .btn-sm { padding-inline: .5rem; } } @media (max-width: 359px) { /* 320px-class phones: the word no longer fits beside a logo (the bar needs 330px with it, 297px without), so Log out becomes its icon. The label is clipped, not display:none, so it is still the button's accessible name. */ .logout-icon { display: inline; } .logout-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } } .container { max-width: 74rem; margin: 0 auto; padding: 1.1rem 1rem 2rem; } /* ---------- company settings: a section rail beside one column ---------- This page carries 25 fields in 9 groups whose sizes run from one field to five. It used to be CSS multi-column, which packs cards by HEIGHT: related groups landed in different columns, the eye had to run down column one and back up to column two, and the ragged bottoms left the holes the columns were introduced to remove (2026-09-16, "so much empty space"). A rail fixes the reading order without giving the width back: sections go top to bottom in one readable column, and the horizontal space earns its keep as a list you can jump from. No JavaScript — anchors and position: sticky, so there is nothing here that can fail the way template script has before. Below 60rem it collapses to the plain stacked page a phone wants, rail first. */ .settings-layout { display: grid; grid-template-columns: 13rem minmax(0, 44rem); gap: 1.6rem; align-items: start; } .settings-nav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .1rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); } .settings-nav a { padding: .4rem .6rem; border-radius: var(--radius-sm); color: var(--ink-2); font-size: .9rem; font-weight: 600; text-decoration: none; } .settings-nav a:hover { background: var(--primary-soft); color: var(--primary-strong); } /* :target styles the section the URL names, so the rail shows where you are without a scroll listener. */ .settings-section:target > h2 { color: var(--primary); } /* Anchored sections must not slide under the sticky header. */ .settings-section { scroll-margin-top: 1rem; } /* INPUTS SIZED TO THEIR DATA. Every one used to stretch to the card, so a day-of-month between 1 and 31 was as wide as a postal address, which is most of why the page read as noise. */ .settings-layout input[type="number"], #id_pay_day, #id_roster_min_morning, #id_roster_min_day, #id_roster_min_mid, #id_roster_min_night, #id_roster_rest_days, #id_unpaid_leave_divisor, #id_hrdf_rate, #id_claim_signatures_required { max-width: 7rem; } #id_registration_number, #id_tax_number, #id_epf_number, #id_socso_number, #id_eis_number, #id_hrdf_number, #id_bank_account, #id_bank_name, #id_payroll_frequency, #id_claim_first_signer, #id_brand_theme, #id_leave_day_counting { max-width: 22rem; } @media (max-width: 60rem) { .settings-layout { grid-template-columns: minmax(0, 1fr); } .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: .4rem; } } @media (min-width: 1200px) { .container { padding: 1.7rem 2.4rem 2.6rem; } } /* Cards that sit side by side when there's room, full-width when alone. min(23rem, 100%) rather than a bare 23rem: minmax treats its first argument as a floor the column may never go below, so on a phone narrower than 23rem (368px) plus the container's padding the grid stayed 368px wide and pushed the whole page sideways. That is most Android phones at 360px and the iPhone SE and 13 mini at 375px — and it hit nine pages at once, every one that lays its cards out this way. */ .flow-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr)); align-items: start; } .flow-cols > .card { margin-bottom: 0; } /* The row keeps the gap its cards gave up, so the card after it does not sit on their borders; last in its box it adds nothing (2026-09-15). */ .flow-cols:not(:last-child) { margin-bottom: 1rem; } /* A claim with several files: Attached takes the wider column. */ @media (min-width: 1100px) { .flow-cols.flow-cols-files { grid-template-columns: 1fr 2fr; } } /* A table beside a short form: the table takes the wider column. Allowance types is five nowrap columns (~555px) and half the page at 1280 is a 422px card, so Edit/Remove sat behind a sideways scrollbar. */ @media (min-width: 1100px) { .flow-cols.flow-cols-table-first { grid-template-columns: 2fr 1fr; } } /* The claim and its receipts side by side, the same height. */ .flow-cols.claim-top { align-items: stretch; } /* ==================================================== LEAVE PAGE LAYOUT The application form is a narrow column beside the tables rather than a half-width card under them: it is eight short fields, and giving it half the page pushed the balances and the request history apart for nothing. One column until there is room for two. */ .leave-layout { display: grid; gap: 1rem; align-items: start; } .leave-layout > .card { margin-bottom: 0; } /* The balances and the requests are one column, stacked by their own grid. They used to be two rows of the outer grid with the apply form spanning both — and the form is taller than the pair, so the surplus was shared between the rows it spanned while `align-items: start` pinned each card to the top of its row. The result was a band of empty page between the two cards that read as a panel that had failed to load. Nothing spans now, so there is no surplus to distribute. */ .leave-main { display: grid; gap: 1rem; align-content: start; } .leave-main > .card { margin-bottom: 0; } @media (min-width: 1000px) { .leave-layout { grid-template-columns: minmax(0, 1fr) 19rem; } } /* Tight enough that the whole form is on screen at once — the point of moving it. Labels sit on their own line above full-width inputs. */ .form-tight p { margin: 0 0 .55rem; } .form-tight label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .15rem; } .form-tight input[type="file"] { width: 100%; } .form-tight textarea { min-height: 3.4rem; } .form-tight .helptext, .form-tight .small { font-size: .72rem; color: var(--muted); } @media (min-width: 900px) { body { padding-bottom: 2rem; } .topbar { display: none; } .sidebar { width: 248px; z-index: 30; transform: none; visibility: visible; box-shadow: none; transition: none; } .nav-backdrop, .navtoggle { display: none !important; } /* Only indent for the sidebar when one is actually rendered. Logged-out pages (login) have no