/* Brand palette: matched to the Merlin Group logo — navy primary (#17529e, sampled
directly from the logo artwork) with the logo's gold/red/green accent stripe colors carried
into the warn/bad/good semantic colors so the whole app reads as one consistent brand rather
than a generic default theme. Every color below was contrast-checked at 4.5:1+ against white
(WCAG AA for normal text) before being picked — see the "Team review an earlier release" README note if
you ever need to retune these; they're the only place brand color lives in the whole app. */
:root {
--bg: #f5f7fa;
--surface: #ffffff;
--border: #dfe4e7;
--text: #1c2226;
--text-2: #5b6770;
--accent: #17529e;
--accent-dark: #0d3a73;
--accent-bg: #e8f0fb;
--good: #1f7a4d; --good-bg: #e5f4ec;
--warn: #96650a; --warn-bg: #fdf1d8;
--bad: #b83430; --bad-bg: #fce8e7;
--info: #2358a6; --info-bg: #e7eefa;
--muted: #6b7480; --muted-bg: #eceff1;
--accent-text: var(--accent); /* Text/link ink: equals --accent in light, a lightened tint in dark */
--input-bg: #ffffff;
--surface-2: #f4f6f8; --bg-alt: #f7f7f7; --bg-2: #fafafa; --color-bg-subtle: #f6f7f9;
--ink: #1b2430;
--bad-solid: var(--bad); /* filled red (badge / danger button) that carries white text */
--btn-secondary-bg: #ffffff;
--radius: 8px;
color-scheme: light;
}
/* Dark theme. Chosen per device under My Profile (Light / Dark / Match my device) and kept in
the browser; includes/header.php sets data-theme on before first paint. Everything on the
page reads colour from the tokens above, so this block re-declares the tokens and nothing else.
--accent / --accent-dark stay the configured brand colour (buttons, top bar); only the tinted
backgrounds and the text-ink are derived from it so a custom brand colour still reads on dark. */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #0e1319;
--surface: #161c25;
--border: #2a3340;
--text: #e5e9ee;
--text-2: #9aa6b4;
--accent-text: #8db8f2;
--accent-text: color-mix(in srgb, var(--accent) 45%, #ffffff);
--accent-bg: #16253a;
--accent-bg: color-mix(in srgb, var(--accent) 24%, var(--surface));
--good: #4cc38a; --good-bg: #13301f;
--warn: #e3ac45; --warn-bg: #352a0e;
--bad: #f07a74; --bad-bg: #3b1917;
--info: #7ab0f2; --info-bg: #15263e;
--muted: #8f9aa8; --muted-bg: #222b36;
--input-bg: #0f151c;
--surface-2: #1b232d; --bg-alt: #1b232d; --bg-2: #1b232d; --color-bg-subtle: #1b232d;
--ink: #e5e9ee;
--bad-solid: #c0403b;
--btn-secondary-bg: #1c2430;
}
* { box-sizing: border-box; }
body {
margin: 0; background: var(--bg); color: var(--text);
font-family: "Segoe UI", -apple-system, Arial, sans-serif;
font-size: 14.5px; line-height: 1.5;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Notifications.php list. */
.notif-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.notif-item { background: var(--surface); padding: 12px 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.notif-item.notif-unread { background: var(--info-bg); }
.notif-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-body { min-width: 0; }
.page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
/* ---------------------------------------------------------------------
Mobile / tablet pass — every page in this app is used
from a phone or tablet by employees and vendors (only admins are assumed
to be at a desk), so this isn't an afterthought breakpoint: it collapses
the topbar nav into a proper toggled menu, gives touch targets more room,
and lets the existing auto-fit grid/flex layouts (card-grid, form-row,
table-wrap) do what they were already built to do at narrower widths.
--------------------------------------------------------------------- */
@media (max-width: 640px) {
body { font-size: 15px; }
.page { padding: 16px 12px 48px; }
.card { padding: 14px; }
h1 { font-size: 19px; }
.btn, .btn-secondary, .btn-danger { padding: 10px 16px; font-size: 14px; } /* bigger tap target than the desktop default */
.btn-sm { padding: 7px 12px; font-size: 13px; }
th, td { padding: 8px; font-size: 13px; }
.toolbar { flex-direction: column; align-items: stretch; }
.toolbar .actions, .toolbar > a, .toolbar > div { width: 100%; }
.tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
.tabs a { white-space: nowrap; }
.center-page, .login-wrap { margin-top: 20px; margin-bottom: 20px; max-width: 100%; }
.card-grid { grid-template-columns: 1fr; } /* one stat/card per row reads better than a cramped 2-up on a phone */
.form-row { grid-template-columns: 1fr; }
/* Switch the Tickets and Assets list tables to a stacked "card"
layout at phone width instead of the default sideways-scrolling table (the .table-wrap
overflow-x:auto above still handles every OTHER table in the app unchanged). Opt-in via the
.card-on-mobile class on .table-wrap (added only to tickets.php and assets.php's list tables,
the two pages named), so no Setup master-list table's mobile behaviour changes.
Each
that should show a label on the card carries data-label="Column Name" (rendered via
the ::before content trick below); the checkbox column's
has no data-label and is simply
hidden on mobile — a per-row checkbox is awkward to use in a stacked card anyway, and today's
bulk-action bar already requires selecting on desktop first. */
.table-wrap.card-on-mobile { overflow-x: visible; border: none; }
.table-wrap.card-on-mobile table thead { display: none; }
.table-wrap.card-on-mobile table,
.table-wrap.card-on-mobile table tbody,
.table-wrap.card-on-mobile table tr,
.table-wrap.card-on-mobile table td {
display: block; width: 100%;
}
.table-wrap.card-on-mobile table tr {
border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px;
padding: 10px 12px; background: var(--surface);
}
.table-wrap.card-on-mobile table tr:hover { background: var(--surface); } /* the row-hover tint above is a desktop-only affordance; a "hover" state means nothing on a touch card */
.table-wrap.card-on-mobile table tbody tr:nth-child(even) td { background: transparent; } /* zebra striping likewise reads as a table convention, not a card one */
.table-wrap.card-on-mobile table td {
border: none; padding: 4px 0; display: flex; justify-content: space-between; align-items: baseline;
gap: 12px; text-align: right; font-size: 13.5px;
}
.table-wrap.card-on-mobile table td[data-label]::before {
content: attr(data-label); font-weight: 600; color: var(--text-2); text-align: left; flex-shrink: 0;
}
.table-wrap.card-on-mobile table td:not([data-label]) { display: none; }
}
img { max-width: 100%; height: auto; }
h1 { font-size: 21px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 28px 0 10px; }
.subtitle { color: var(--text-2); font-size: 13.5px; margin: 0 0 20px; }
.card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px 20px; margin-bottom: 18px;
box-shadow: 0 1px 2px rgba(20,26,32,.04); /* an earlier release pass: a hint of lift so cards read as
distinct surfaces on the page background instead of a flat outline — subtle enough to stay out
of the way, not a redesign of the existing card look. */
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
/* Help.php's changelog entries: each highlight gets a divider except the
last one in its card, since a rich (location/type-tagged) highlight now spans a couple of lines. */
.card ul li:last-child { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
.stat-tile {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 16px; border-left: 3px solid var(--border); transition: box-shadow .15s ease;
}
.stat-tile:hover { box-shadow: 0 2px 8px rgba(20,26,32,.06); }
.stat-tile .num { font-size: 26px; font-weight: 700; line-height: 1.15; }
.stat-tile .label { color: var(--text-2); font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.stat-tile.tone-warn { border-left-color: var(--warn); }
.stat-tile.tone-bad { border-left-color: var(--bad); }
.stat-tile.tone-good { border-left-color: var(--good); }
.stat-tile.tone-warn .num { color: var(--warn); }
.stat-tile.tone-bad .num { color: var(--bad); }
.stat-tile.tone-good .num { color: var(--good); }
/* Dashboard stat tiles are now clickable drill-downs (, not