/* ============================================================ Admin styles. THERE IS NOT ONE COLOUR VALUE IN THIS FILE. Every colour is var(--token), and every token is emitted into from the settings table by app/includes/theme.php. That is what makes the rebrand an afternoon rather than a migration. If you are about to type a # followed by six hex digits in here: don't. Add a token instead. The last build of this kind had half its colours written longhand, and the day the palette moved, six buttons turned unreadable and nobody noticed until a screenshot arrived. The display face is a webfont loaded with display=swap, for headings and numbers only. Body text stays on the system stack. This is the screen someone opens when something is wrong, on whatever connection they have — the words have to arrive first and they still do; the face catches up. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* The header is sticky, so anything scrolled to the top of the viewport lands underneath it and cannot be clicked. Reserve its height for every scroll the browser performs itself — jumping to an anchor, focusing a field, or scrolling a control into view. */ html { scroll-padding-top: 74px; } body { margin: 0; background: var(--void); color: var(--text); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; /* The same grid as the public site and the portal, same pitch. Three surfaces, one company. */ background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; background-attachment: fixed; } /* The display face. Headings, the big counts, and buttons — the things that should read as struck rather than typed. */ .display, h1, .stuck-card .n, .brand-word, button, .btn, .signin-card .mark { font-family: "Saira Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Layout ---------- */ .wrap { max-width: 1180px; margin: 0 auto; padding: 26px 24px 80px; } .page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } /* Chrome fill, with the per-line background-size that stops a wrapped heading fading to grey at the bottom. Same rule as the public site — see site.css for the full reasoning. */ h1, .brand-word { color: var(--chrome-1); background-image: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-1) 26%, var(--chrome-2) 52%, var(--chrome-3) 74%, var(--chrome-2) 100%); background-repeat: repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } h1 { font-size: 30px; margin: 0; letter-spacing: 0.005em; font-weight: 800; text-transform: uppercase; line-height: 1.1; background-size: 100% 1.1em; } h2 { font-family: "Saira", system-ui, sans-serif; font-size: 11px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-faint); font-weight: 700; } .sub { color: var(--text-dim); font-size: 13px; margin: 4px 0 0; } /* ---------- The four counts ---------- */ /* Deliberately the first thing on the dashboard: each one is a specific job someone has to go and do, not a metric to admire. */ .stuck-row { /* auto-fit rather than a fixed count: the row grew from four to five when renewals arrived, and a hardcoded 4 wrapped the fifth onto a line of its own. It will grow again. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 26px; } @media (max-width: 460px) { .stuck-row { grid-template-columns: minmax(0,1fr); } } .stuck-card { background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--edge-loud); padding: 16px 17px; border-radius: 6px; display: block; color: inherit; transition: background .12s ease, border-color .12s ease; } .stuck-card:hover { background: var(--rise); text-decoration: none; border-color: var(--edge-loud); } /* The count carries the status colour, so it never wears the chrome fill — a number that means "three visits are overdue" has to stay the colour that says so. */ .stuck-card .n { font-size: 40px; font-weight: 800; line-height: 0.95; letter-spacing: 0.01em; } .stuck-card .lbl { font-family: "Saira", system-ui, sans-serif; font-size: 11px; color: var(--text-dim); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .stuck-card.is-zero { opacity: 0.5; } .stuck-card.is-zero .n { color: var(--text-faint); } /* Each stuck state gets its own status colour, and those four colours mean nothing else anywhere in the product. */ .stuck-card.k-unproposed { border-left-color: var(--waiting); } .stuck-card.k-unproposed .n { color: var(--waiting); } .stuck-card.k-unanswered { border-left-color: var(--finding); } .stuck-card.k-unanswered .n { color: var(--finding); } .stuck-card.k-missed { border-left-color: var(--overdue); } .stuck-card.k-missed .n { color: var(--overdue); } .stuck-card.k-unreported { border-left-color: var(--accent); } .stuck-card.k-unreported .n { color: var(--accent); } /* Both of these sit before a report goes out. Waiting on a reviewer is the calm one — somebody just has not looked yet — so it wears the waiting colour. Sent back is a fault that was caught and is now sitting on the writer, so it wears the finding colour: it needs doing, and it is not urgent the way a missed window is. */ .stuck-card.k-unreviewed { border-left-color: var(--waiting); } .stuck-card.k-unreviewed .n { color: var(--waiting); } .stuck-card.k-returned { border-left-color: var(--finding); } .stuck-card.k-returned .n { color: var(--finding); } /* Renewals get their own class rather than borrowing one of the four above. Those name a specific stuck state, and reusing k-unanswered for a colour made a renewals card indistinguishable from a stuck visit to anything selecting on it. */ .stuck-card.k-renewal { border-left-color: var(--waiting); } .stuck-card.k-renewal .n { color: var(--waiting); } .stuck-card.k-renewal.is-late { border-left-color: var(--overdue); } .stuck-card.k-renewal.is-late .n { color: var(--overdue); } /* ---------- Panels and tables ---------- */ .panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 6px; padding: 20px 22px; margin-bottom: 20px; position: relative; overflow: hidden; } .panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glow), transparent); opacity: .4; } /* An inset block INSIDE a panel — the site editor, and anything else that opens in place. Deliberately a step up from the panel it sits in rather than another panel: a second identical card reads as a separate object and flattens the hierarchy. */ .panel-inset { background: var(--rise); border: 1px solid var(--edge); border-left: 3px solid var(--accent); border-radius: 4px; padding: 18px 20px; } .panel-inset h3 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin-bottom: 14px; } /* Moving or calling off a check is the exception, not the daily job, so it folds away. Native
— no JavaScript, which the CSP forbids and which would fail on bad signal anyway. */ .visit-more { margin-top: 12px; border-top: 1px solid var(--edge-soft); padding-top: 10px; } .visit-more > summary { cursor: pointer; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); font-family: "Saira Condensed", "Arial Narrow", sans-serif; list-style: none; width: max-content; } .visit-more > summary::-webkit-details-marker { display: none; } .visit-more > summary::before { content: "+ "; color: var(--accent); } .visit-more[open] > summary::before { content: "– "; } .visit-more > summary:hover { color: var(--text); } .visit-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .visit-more .btn-row { margin-top: 10px; } .visit-more .hint { margin-top: 6px; } .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); padding: 0 12px 9px; border-bottom: 1px solid var(--edge); white-space: nowrap; } td { padding: 11px 12px; border-bottom: 1px solid var(--edge-soft); vertical-align: top; } tbody tr:hover { background: var(--rise); } tbody tr:last-child td { border-bottom: none; } /* `.tbl` marks a data table — rows you scan and act on, as against a table used for layout. It was on four tables for months while being defined nowhere: they still looked right because the bare `table` rules above carried them, which is exactly why nobody noticed. It now earns its place by doing the one thing those rules cannot — sizing the leading and trailing columns so a thumbnail or a row of buttons does not stretch the column it sits in. */ .tbl { table-layout: auto; } .tbl td:last-child { white-space: nowrap; } .empty { color: var(--text-faint); padding: 22px 12px; } .nowrap { white-space: nowrap; } /* ---------- State pills ---------- */ .pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; border: 1px solid currentColor; } .pill.due { color: var(--text-faint); } .pill.proposed { color: var(--finding); } .pill.confirmed { color: var(--accent); } .pill.attended { color: var(--waiting); } .pill.reported { color: var(--clear); } .pill.cancelled { color: var(--text-faint); opacity: 0.7; } .pill.missed { color: var(--overdue); } /* No status colour: an archived visit has no per-item outcome, and any of the four status colours would claim one. */ .pill.archive { color: var(--text-faint); text-transform: none; letter-spacing: 0.02em; } /* The old system's report, shown verbatim and never edited. */ .archive-log { margin: 0; padding: 15px 17px; overflow-x: auto; background: var(--rise); border: 1px solid var(--edge); border-radius: 6px; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); white-space: pre-wrap; word-break: break-word; } .res-clear { color: var(--clear); } .res-finding { color: var(--finding); } .res-none { color: var(--text-faint); } /* A finding that keeps coming back. Falls out of the structure rather than being tracked by anyone. */ .repeat { display: inline-block; font-size: 11px; font-weight: 700; color: var(--overdue); border: 1px solid var(--overdue); padding: 1px 6px; border-radius: 3px; margin-left: 8px; } /* ---------- Forms ---------- */ label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=time], select, textarea { width: 100%; background: var(--void); color: var(--text); border: 1px solid var(--edge); border-radius: 5px; padding: 9px 11px; font: inherit; font-size: 14px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--edge-soft); } textarea { min-height: 80px; resize: vertical; } .field { margin-bottom: 15px; } .row-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; } @media (max-width: 620px) { .row-2 { grid-template-columns: minmax(0,1fr); } } .hint { font-size: 12px; color: var(--text-faint); margin: 5px 0 0; } /* `a.btn-quiet` is in this selector deliberately. A