/* Pontiac Land — Asset Management. Mobile-first.
Follows the PLG App Design Guidelines (§1 Pontiac Land Group): Navy #002957 and White are
the only brand colours; the other values are non-brand UI neutrals or functional status colours. */
:root {
/* PLG brand: only these two are brand colours */
--plg-navy: #002957;
--plg-white: #FFFFFF;
/* Non-brand UI neutrals (from the guideline deck) */
--plg-text: #222222;
--plg-text-muted: #595959;
--plg-border: #CCCCCC;
--plg-surface-alt: #EEF1F6;
--plg-navy-tint: #B8C9DC;
--plg-font: "Futura Book BT", "Futura", "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif;
--plg-fs-header: 28px; /* bold */
--plg-fs-subheader: 20px; /* bold */
--plg-fs-detail: 14px; /* regular */
--plg-logo-min-h: 40px;
/* App tokens, all resolved to the PLG values above */
--font-sans: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* the user kept the original font */
--navy-900: #001b3a; /* pressed / darker shade of PLG navy */
--navy-800: var(--plg-navy);
--navy-700: #0d3a6b; /* hover shade of PLG navy */
--navy-600: var(--plg-navy);
--navy-100: var(--plg-surface-alt);
--navy-050: #f6f8fb;
--paper: #f6f8fb;
--surface: var(--plg-white);
--surface-alt: #f6f8fb;
--hairline: #e1e5eb;
--hairline-strong: var(--plg-border);
--ink: var(--plg-text);
--ink-muted: var(--plg-text-muted);
--ink-faint: #8a8a8a;
--ink-on-navy: rgba(255, 255, 255, 0.94);
--ink-on-navy-muted: rgba(255, 255, 255, 0.66);
/* The old brass accent is now PLG navy (the palette has no secondary colour). */
--brass: var(--plg-navy);
--brass-light: var(--plg-navy-tint);
--brass-tint: var(--plg-surface-alt);
/* Functional status colours (not brand), kept muted */
--ok: #2c6b52;
--ok-tint: #e7f0ec;
--warn: #8a6416;
--warn-tint: #f6eeda;
--danger: #9c3227;
--danger-tint: #f6e8e6;
--info: var(--plg-navy);
--info-tint: var(--plg-surface-alt);
--radius: 6px;
--radius-lg: 10px;
--shadow-sm: 0 1px 2px rgba(0, 41, 87, 0.05);
--shadow-card: 0 1px 2px rgba(0, 41, 87, 0.04), 0 6px 20px rgba(0, 41, 87, 0.05);
--shadow-pop: 0 24px 60px rgba(0, 41, 87, 0.28);
--topbar-h: 56px;
--bottomnav-h: 62px;
--safe-b: env(safe-area-inset-bottom, 0px);
color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--plg-fs-detail);
line-height: 1.45;
color: var(--ink);
background: var(--paper);
-webkit-tap-highlight-color: transparent;
}
a { color: var(--navy-600); text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
/* PLG type scale: Header 28px bold, Sub-header 19–20px bold (panel & card headings), Detail 13–15px. */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: normal; color: var(--plg-navy); }
h1 { font-size: var(--plg-fs-header); line-height: 1.2; }
h2 { font-size: var(--plg-fs-subheader); line-height: 1.25; }
h3 { font-size: 15px; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: 0.8125rem; }
.label {
font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-muted); font-weight: 600;
}
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; word-break: break-word; }
/* ---------- shell: left panel only (no top bar) ---------- */
.layout { display: flex; min-height: 100vh; }
main {
flex: 1; min-width: 0;
padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(var(--bottomnav-h) + var(--safe-b) + 24px);
width: 100%; /* full width: pages use the whole space left and right */
}
.sidebar {
display: flex; flex-direction: column; gap: 4px;
width: 276px; flex: none; /* wide enough for "Corrective Work Order" on one line */
padding: calc(18px + env(safe-area-inset-top, 0px)) 12px calc(14px + var(--safe-b));
background: var(--navy-800); color: var(--ink-on-navy);
position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* Full Pontiac Land lockup, centred, with a divider under it (like the PLG Intranet). */
.brand {
display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; min-width: 0;
padding: 6px 8px 16px; margin: 0 -12px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.brand img { height: 84px; width: auto; flex: none; }
.brand .brand-mini { display: none; height: 36px; }
/* Collapse / expand button (desktop only): a round tab on the panel's right edge, halfway down. */
.side-toggle {
/* Centred on the panel's edge: the desktop panel is 292px (the `.sidebar { width: 292px }` rule further down). */
display: none; position: fixed; top: 50%; left: calc(292px - 14px); z-index: 40; transform: translateY(-50%);
width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer; place-items: center;
border: 1px solid var(--hairline-strong); background: #fff; color: var(--navy-800);
box-shadow: 0 2px 6px rgba(0, 27, 58, 0.18); transition: left 0.2s ease;
}
.side-toggle:hover { background: var(--navy-800); color: #fff; }
.side-toggle svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
@media (min-width: 900px) {
.side-toggle { display: grid; }
.sidebar { transition: width 0.2s ease, padding 0.2s ease; }
/* Collapsed: a narrow navy strip with the small logo and the menu icons (names show on hover). */
body.side-collapsed .sidebar { width: 72px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
body.side-collapsed .side-toggle { left: calc(72px - 14px); }
body.side-collapsed .side-toggle svg { transform: rotate(180deg); }
body.side-collapsed .brand { margin: 0 -10px 4px; padding: 6px 0 14px; }
body.side-collapsed .brand .brand-full, body.side-collapsed .brand-name { display: none; }
body.side-collapsed .brand .brand-mini { display: block; }
body.side-collapsed .sidebar .navlink { justify-content: center; padding: 12px 0; gap: 0; }
body.side-collapsed .sidebar .navlink span { display: none; }
body.side-collapsed .side-user { flex-direction: column; padding: 12px 0 2px; gap: 6px; }
body.side-collapsed .side-user .who { display: none; }
}
.brand-name { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-on-navy-muted); }
/* Section headings in the menu (MAIN, WORK ORDERS, …). */
.side-label {
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-on-navy-muted); padding: 14px 14px 4px;
}
.side-label:first-child { padding-top: 6px; }
.side-prop { padding: 0 4px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 8px; }
.prop-select {
width: 100%;
background: rgba(255, 255, 255, 0.1); color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius);
padding: 7px 10px; font-size: 0.85rem;
}
.prop-select option { color: var(--ink); }
.side-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sidebar .navlink {
flex-direction: row; justify-content: flex-start; gap: 14px;
padding: 13px 14px; border-radius: var(--radius);
font-size: 1.05rem; color: var(--ink-on-navy-muted);
white-space: nowrap; /* each item stays on one line */
}
.sidebar .navlink span { overflow: hidden; text-overflow: ellipsis; }
.sidebar .navlink:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.sidebar .navlink.active { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 3px 0 0 var(--plg-white); }
.sidebar .navlink svg { width: 22px; height: 22px; }
.sidebar .sep { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 10px 4px; }
.side-user {
display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 6px 2px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.side-user .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.side-user .who b { color: #fff; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .who small { color: var(--ink-on-navy-muted); font-size: 0.72rem; }
.side-user .icon-btn { color: var(--ink-on-navy-muted); }
.side-user .icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.avatar {
width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center;
background: var(--plg-white); color: var(--plg-navy); font-weight: 700; font-size: 0.8rem;
border: 0; flex: none;
}
.drawer-backdrop { display: none; }
.bottomnav {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
display: grid; grid-template-columns: repeat(5, 1fr);
height: calc(var(--bottomnav-h) + var(--safe-b));
padding-bottom: var(--safe-b);
background: var(--surface); border-top: 1px solid var(--hairline);
}
.navlink {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
color: var(--ink-faint); font-size: 0.68rem; font-weight: 600;
background: none; border: 0; cursor: pointer; font-family: inherit;
}
.navlink svg { width: 22px; height: 22px; }
.bottomnav .navlink.active { color: var(--navy-700); }
.bottomnav .navlink.active svg { stroke-width: 2.2; }
/* Phones/tablets: the left panel becomes a slide-in drawer (opened from "More"). */
@media (max-width: 899px) {
.sidebar {
position: fixed; left: 0; top: 0; bottom: 0; z-index: 70; height: auto; width: min(290px, 84vw);
transform: translateX(-102%); transition: transform 0.22s ease-out; box-shadow: var(--shadow-pop);
}
body.drawer-open .sidebar { transform: none; }
body.drawer-open .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0, 27, 58,0.45); animation: fade 0.15s; }
body.drawer-open { overflow: hidden; }
}
@media (min-width: 900px) {
.bottomnav { display: none; }
main { padding: 24px 28px 48px; }
}
/* ---------- page head ---------- */
.page-head {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-bottom: 16px;
}
.page-head .grow { flex: 1; min-width: 0; }
.page-head .sub { margin-top: 2px; }
.back {
display: inline-flex; align-items: center; gap: 4px;
color: var(--ink-muted); font-size: 0.85rem; font-weight: 600; margin-bottom: 8px;
}
.back svg { width: 16px; height: 16px; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
min-height: 40px; padding: 8px 15px;
border-radius: var(--radius); border: 1px solid transparent;
font-weight: 600; font-size: 0.875rem; cursor: pointer;
background: var(--navy-700); color: #fff;
transition: background 0.15s, border-color 0.15s;
white-space: nowrap;
}
.btn:hover { background: var(--navy-800); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--hairline-strong); }
.btn.secondary:hover { background: var(--navy-050); }
.btn.ghost { background: transparent; color: var(--navy-600); padding-left: 8px; padding-right: 8px; }
.btn.ghost:hover { background: var(--navy-050); }
.btn.danger { background: var(--surface); color: var(--danger); border-color: #e4c3bf; }
.btn.danger:hover { background: var(--danger-tint); }
.btn.ok { background: var(--ok); }
.btn.ok:hover { background: #22563f; }
/* Same as the primary button ("Add work order" matches "New schedule"). */
.btn.brass { background: var(--navy-700); }
.btn.brass:hover { background: var(--navy-800); }
.btn.sm { min-height: 32px; padding: 5px 11px; font-size: 0.8rem; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.icon-btn {
width: 36px; height: 36px; display: inline-grid; place-items: center;
border: 0; background: transparent; border-radius: var(--radius); cursor: pointer; color: var(--ink-muted);
}
.icon-btn:hover { background: var(--navy-050); }
.icon-btn svg { width: 19px; height: 19px; }
.fab {
position: fixed; right: 18px; bottom: calc(var(--bottomnav-h) + var(--safe-b) + 18px); z-index: 25;
height: 52px; padding: 0 20px 0 16px; border-radius: 26px;
display: inline-flex; align-items: center; gap: 8px;
background: var(--brass); color: #fff; font-weight: 700; border: 0;
box-shadow: 0 8px 24px rgba(0, 27, 58,0.25); cursor: pointer;
}
.fab svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .fab { display: none; } }
.desktop-only { display: none; }
@media (min-width: 900px) { .desktop-only { display: inline-flex; } }
/* ---------- cards & lists ---------- */
.card {
background: var(--surface); border: 1px solid var(--hairline);
border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 16px; }
.card-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
min-height: 57px; /* same height with or without a button (e.g. Attachments vs QR code) */
padding: 12px 16px; border-bottom: 1px solid var(--hairline);
background: var(--navy-100); color: var(--navy-800);
border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.card-head h2 { font-size: 19px; } /* PLG sub-header (19–20px) for panel headings */
.section { margin-top: 18px; }
.section > .label { display: block; margin-bottom: 8px; }
.stack > * + * { margin-top: 12px; }
.list { display: flex; flex-direction: column; }
.list-item {
display: flex; gap: 12px; align-items: center;
padding: 12px 16px; border-top: 1px solid var(--hairline);
color: inherit;
}
.list-item:first-child { border-top: 0; }
a.list-item:hover { background: var(--surface-alt); }
.list-item .body { flex: 1; min-width: 0; }
.list-item .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.list-item .meta { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.list-item .right { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.list-item .chev { color: var(--ink-faint); width: 18px; height: 18px; flex: none; }
/* PWO assets: ID over description on the left, category over location on the right. */
.wo-asset { align-items: flex-start; }
.wo-asset .wa-l { flex: 1; min-width: 0; }
.wo-asset .wa-r { flex: 0 1 auto; min-width: 0; max-width: 50%; text-align: right; }
.wo-asset .wa-id { font-weight: 700; }
.wo-asset .wa-sub { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 2px; overflow-wrap: anywhere; }
.wo-asset .wa-x { flex: none; align-self: center; padding: 4px 8px; }
.thumb {
width: 56px; height: 56px; border-radius: var(--radius); flex: none;
background: var(--navy-050); object-fit: cover; display: grid; place-items: center; color: var(--ink-faint);
overflow: hidden;
}
.thumb svg { width: 24px; height: 24px; }
.asset-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .asset-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .asset-grid { grid-template-columns: repeat(3, 1fr); } }
.asset-card { display: flex; flex-direction: column; overflow: hidden; color: inherit; transition: box-shadow 0.15s; }
.asset-card:hover { box-shadow: var(--shadow-card); }
.asset-card .photo { aspect-ratio: 16 / 10; background: var(--navy-050); display: grid; place-items: center; color: var(--ink-faint); overflow: hidden; }
.asset-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.asset-card .photo svg { width: 36px; height: 36px; }
.asset-card .info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.asset-card .row { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.asset-card .name { font-weight: 700; }
@media (max-width: 639px) {
.asset-card { flex-direction: row; }
.asset-card .photo { width: 96px; aspect-ratio: auto; flex: none; }
.asset-card .info { min-width: 0; padding: 10px 12px; }
}
/* Asset list: one light-grey rounded row per asset, no header. */
.alist { display: flex; flex-direction: column; gap: 12px; }
.alist { gap: 8px; }
/* Asset details: 3 columns at every width from 640px up. The Asset ID column is
widest, Description next, and Asset category (right) narrowest, so the 2nd and
3rd columns sit further right. */
@media (min-width: 640px) {
/* Exact starts requested: Description at 45%, Asset category at 80% of the panel width. */
.kv.kv-fill { grid-template-columns: 45% 35% 20%; column-gap: 0; } /* .kv.kv-fill beats the later generic .kv rule */
.kv.kv-fill > div { padding-right: 16px; }
.kv.kv-fill > div:nth-child(3n) { padding-right: 0; }
}
/* Asset page: paired rows so each left card matches the height of its right partner.
details | photo + QR, attachments | work orders, movement | schedules */
.asset-layout {
display: grid; gap: 16px; grid-template-columns: 1fr;
grid-template-areas: "photo" "det" "att" "mov" "wo" "qr";
}
.asset-layout .a-det { grid-area: det; }
.asset-layout .a-photo { grid-area: photo; }
.asset-layout .a-qr { grid-area: qr; }
.asset-layout .a-att { grid-area: att; }
.asset-layout .a-mov { grid-area: mov; }
.asset-layout .a-wo { grid-area: wo; }
/* Wide screens:
details (4 of 6 cols) | photo (2)
attachments (4) | QR code (2)
movement (3) | work orders (3) — half and half */
@media (min-width: 900px) { /* same breakpoint as the left panel */
.asset-layout {
grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch;
grid-template-areas: "det det det det photo photo" "att att att att qr qr" "mov mov mov wo wo wo";
}
/* Details card fills its row: fields spread across 4 columns and the rows spread vertically. */
.a-det { display: flex; flex-direction: column; }
.a-det-body { flex: 1; display: flex; }
.kv-fill { flex: 1; align-content: space-evenly; gap: 18px 24px; }
.kv-fill .v { font-size: 0.98rem; }
}
/* Settings → Properties & locations tree */
.ptree .arow { grid-template-columns: minmax(170px, 1.2fr) minmax(170px, 1.5fr) minmax(140px, 1fr) 70px 84px; }
.ptree .indent { display: inline-block; width: calc(var(--depth, 0) * 20px); flex: none; }
.ptree .prow .c-id { display: flex; align-items: center; }
.ptree .prow[style*="--depth:0"] { border-left-color: var(--brass); }
.ptree .tree { color: var(--ink-faint); margin-right: 6px; font-weight: 400; }
.ptree .twisty {
width: 22px; height: 22px; margin-right: 4px; flex: none; display: inline-grid; place-items: center;
border: 0; background: none; border-radius: 4px; cursor: pointer; color: var(--ink-muted); padding: 0;
}
.ptree .twisty:hover { background: var(--navy-100); }
.ptree .twisty svg { width: 15px; height: 15px; transition: transform 0.15s; }
.ptree .twisty.open svg { transform: rotate(90deg); }
.ptree .twisty-gap { width: 26px; flex: none; display: inline-block; }
.ptree .prow-act { display: flex; justify-content: flex-end; gap: 2px; }
.settings-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: inherit; }
.settings-link:hover { box-shadow: var(--shadow-card); }
.settings-link .body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.settings-link > svg { width: 18px; height: 18px; color: var(--ink-faint); }
@media (max-width: 699px) {
.ptree .arow.ahead { display: none; }
.ptree .arow { grid-template-columns: 1fr auto; }
.ptree .prow-act { grid-column: 2; grid-row: 1 / span 2; }
}
/* Asset movement rows: "From: MS.CT.RF ⟶ To: MS.CCS" */
.mv-line { font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.mv-line b { color: var(--navy-800); }
.mv-arrow { color: var(--brass); font-size: 1.15rem; line-height: 1; margin: 0 4px; }
.mv-toggle {
display: block; width: 100%; padding: 11px 16px; border: 0; border-top: 1px solid var(--hairline);
background: var(--surface-alt); color: var(--navy-600); font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.mv-toggle:hover { background: var(--navy-050); }
/* Search field: the input sits inside the .search box, so it has no border of its own. */
.search input, .search input[type=search], .dd-search input[type=search] {
border: 0 !important; outline: none !important; box-shadow: none !important;
background: transparent; min-height: 0; padding: 9px 0; border-radius: 0;
}
.search:focus-within { border-color: var(--navy-600); box-shadow: 0 0 0 2px rgba(0, 41, 87,0.15); }
/* Header row: same card style as the rows; each column name sorts the list. */
.arow.ahead {
background: transparent; border: 0; border-bottom: 2px solid var(--hairline-strong); border-radius: 0; box-shadow: none;
padding: 2px 19px 6px 23px; /* matches the rows' 4px accent + 18px padding so columns line up */
}
.arow .hcol {
display: inline-flex; align-items: center; gap: 6px; justify-self: start;
border: 0; background: none; padding: 6px 0; cursor: pointer; font-family: inherit;
font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted);
}
.arow .hcol:hover { color: var(--navy-700); }
.arow .hcol.on { color: var(--navy-800); }
.arow .hcol .arr { font-size: 0.7rem; color: var(--ink-faint); letter-spacing: 0; }
.arow .hcol.on .arr { color: var(--brass); }
/* Phones: no column-name row on the table-style lists (Assets, Checklists, …). */
@media (max-width: 699px) {
.alist .arow.ahead { display: none; }
}
.arow {
display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(160px, 1.4fr) minmax(110px, 0.8fr) minmax(130px, 1fr);
gap: 16px; align-items: center; padding: 14px 18px;
background: var(--surface); border: 1px solid var(--hairline-strong); border-left: 4px solid var(--navy-600);
border-radius: 6px; box-shadow: var(--shadow-sm); color: var(--ink); font-size: 0.9rem;
transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.arow:hover { background: var(--navy-050); border-left-color: var(--brass); box-shadow: var(--shadow-card); }
.arow > span { min-width: 0; overflow-wrap: anywhere; }
.arow .c-id { font-weight: 700; color: var(--navy-800); }
.arow .c-desc { color: var(--ink); }
.arow .c-cat { color: var(--ink-muted); }
.arow .c-loc { display: flex; align-items: center; gap: 7px; color: var(--ink-muted); }
.arow .c-loc svg { width: 15px; height: 15px; color: var(--navy-600); flex: none; }
@media (max-width: 699px) {
.arow { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; }
.arow .c-id, .arow .c-desc { grid-column: 1 / -1; }
.arow .c-cat, .arow .c-loc { font-size: 0.8rem; }
.arow .c-loc { justify-content: flex-end; }
}
/* Preventive Maintenance work orders and Schedules use the same table rows, with their own columns. */
/* Status is wide enough for "Acknowledged & Assigned" (≈215px), so the badge never runs into Due. */
/* WO No. | Schedule | Frequency | Location | Category | Servicer (with dept) | Assignee | Status | Due.
Small minimums so the whole row always fits the page (no sideways scroll); text wraps in its column. */
.pwo-list .arow {
/* Minimums are at least each header label's width (FREQUENCY ≈ 92px, LOCATION ≈ 80px). */
/* WO No. | Schedule | Location | Servicer | Assignee | Status | Due (date) */
grid-template-columns: minmax(88px, 0.8fr) minmax(84px, 1.3fr) minmax(84px, 0.7fr)
minmax(100px, 1.3fr) minmax(84px, 0.9fr) minmax(110px, 1.1fr) minmax(84px, 0.7fr);
gap: 10px;
}
/* "Acknowledged & Assigned" is split with a
(pwoARow), so the badge is exactly as wide as its
longer line instead of stretching across the column. */
.pwo-list .arow .chip, .sched-list .arow .chip { white-space: nowrap; line-height: 1.25; text-align: left; width: max-content; max-width: 100%; }
/* Schedule | Frequency | Type | Category | Location | Servicer (with department) | Next WO */
.sched-list .arow {
grid-template-columns: minmax(90px, 1.5fr) minmax(96px, 1fr) minmax(80px, 0.9fr) minmax(88px, 1fr)
minmax(84px, 0.8fr) minmax(110px, 1.4fr) minmax(90px, 0.8fr);
gap: 10px;
}
/* Header labels wrap inside their own column instead of running into the next one. */
.pwo-list .arow.ahead .hcol, .sched-list .arow.ahead .hcol { min-width: 0; white-space: normal; text-align: left; line-height: 1.25; }
/* Same text size as the Assets / Checklists rows (14.4px). */
.pwo-list .arow > span, .sched-list .arow > span { font-size: 0.9rem; }
.pwo-list .arow .c-desc { font-size: 0.9rem; color: var(--ink); }
/* Desktop, very narrow (sidebar open on a ~1100px window): scroll sideways instead of spilling out. */
@media (min-width: 700px) { .pwo-list, .sched-list { overflow-x: auto; } }
/* Phone card (.m-card, built by mCard): "#no [status]", bold title, photo, Created at | Assignee, and
"More details". Hidden on desktop; on phones it replaces the table cells and the header row. */
.m-card { display: none; }
@media (max-width: 699px) {
.pwo-list .arow.ahead, .sched-list .arow.ahead { display: none; }
.pwo-list .arow, .sched-list .arow { display: block; padding: 12px 14px; }
.pwo-list .arow > span, .sched-list .arow > span { display: none; }
.m-card { display: flex; flex-direction: column; gap: 8px; }
.m-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m-no { color: var(--ink-muted); font-size: 0.85rem; }
.m-top .chip { flex: none; }
.m-title { font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.m-img { width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--navy-050); border: 1px solid var(--hairline);
display: grid; place-items: center; overflow: hidden; color: var(--ink-muted); }
.m-img img { width: 100%; height: 100%; object-fit: cover; }
.m-img svg { width: 18px; height: 18px; }
.m-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.m-k { font-size: 0.75rem; color: var(--ink-muted); }
.m-v { font-size: 0.875rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-more summary { cursor: pointer; font-size: 0.8rem; color: var(--ink-muted); list-style: none; }
.m-more summary::-webkit-details-marker { display: none; }
.m-more summary::before { content: "▸ "; }
.m-more[open] summary::before { content: "▾ "; }
.m-more .m-facts { margin-top: 8px; }
.m-more .m-v { white-space: normal; }
}
.group-title { margin: 20px 0 10px; display: flex; align-items: baseline; gap: 8px; }
.group-title:first-child { margin-top: 0; }
/* ---------- chips ---------- */
.chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px; border-radius: 999px;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
background: var(--navy-050); color: var(--ink-muted); white-space: nowrap;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.chip.plain::before { display: none; }
.chip.ok { background: var(--ok-tint); color: var(--ok); }
.chip.warn { background: var(--warn-tint); color: var(--warn); }
.chip.danger { background: var(--danger-tint); color: var(--danger); }
.chip.info { background: var(--info-tint); color: var(--info); }
.chip.brass { background: var(--plg-navy-tint); color: var(--plg-navy); }
.chip.grey { background: #eeedea; color: var(--ink-faint); }
/* Work-order status: bright solid chips with white text. */
.chip.st-open { background: #1e88e5; color: #fff; }
.chip.st-progress { background: #fb8c00; color: #fff; }
.chip.st-ack { background: #5e35b1; color: #fff; }
.chip.st-done { background: #2e9d4f; color: #fff; }
.chip.st-cancel { background: #e53935; color: #fff; }
.chip[class*=" st-"]::before { opacity: 1; background: #fff; }
.due-overdue { color: var(--danger); font-weight: 700; }
.due-soon { color: var(--warn); font-weight: 600; }
/* ---------- toolbar / filters ---------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.search {
flex: 1 1 220px; display: flex; align-items: center; gap: 8px;
background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius);
padding: 0 12px; min-height: 42px;
}
.search svg { width: 17px; height: 17px; color: var(--ink-faint); flex: none; }
.search input { border: 0; outline: none; flex: 1; min-width: 0; background: transparent; padding: 9px 0; }
.toolbar select { min-height: 42px; }
.seg {
display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px;
padding-bottom: 2px;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
flex: none; border: 1px solid var(--hairline-strong); background: var(--surface);
padding: 7px 13px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--ink-muted);
}
.seg button.on { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.seg button .n { opacity: 0.7; margin-left: 4px; font-weight: 500; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hairline); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs a {
padding: 10px 14px; font-weight: 600; font-size: 0.9rem; color: var(--ink-muted);
border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs a.on { color: var(--navy-800); border-color: var(--brass); }
/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.stat { padding: 14px 16px; color: inherit; display: block; transition: box-shadow 0.15s; }
.stat:hover { box-shadow: var(--shadow-card); }
.stat .v { font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 0.78rem; color: var(--ink-muted); margin-top: 2px; }
.stat.alert .v { color: var(--danger); }
.stat.warn .v { color: var(--warn); }
.two-col { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .two-col { grid-template-columns: 1fr 1fr; } }
.detail-cols { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .detail-cols { grid-template-columns: minmax(0, 2.25fr) minmax(0, 1fr); align-items: start; } /* right column ≈31% (80% of the old 38%) */ }
/* All Home shortcuts on one line, whatever their number. */
.quick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin: 16px 0 4px; }
.quick a {
display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
padding: 14px 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink);
}
.quick a svg { width: 24px; height: 24px; color: var(--brass); }
/* ---------- details ---------- */
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (min-width: 640px) { .kv { grid-template-columns: repeat(3, 1fr); } }
.kv .k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 600; }
.kv .v { margin-top: 2px; word-break: break-word; }
.kv .full { grid-column: 1 / -1; }
/* Schedule details: same columns (via .kv-fill, 45/35/20) and row spacing as the asset
details panel, where rows measure ~30px apart. */
.kv.kv-roomy { row-gap: 30px; }
.kv.kv-roomy .v { font-size: 0.98rem; }
/* Schedule page: the checklist row opens the checklist dialog. */
.list-item.cl-open { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.list-item.cl-open > svg { width: 18px; height: 18px; color: var(--ink-faint); flex: none; }
.task-q { font-weight: 600; }
/* Planned WO list: "created | schedule | location | …" with roomy separators. */
.meta.wo-desc { display: block; }
.wo-desc .sep { margin: 0 10px; color: var(--hairline-strong); }
/* Schedule pattern tag beside a planned WO number (a soft .chip colour per pattern). */
.chip.freq-tag { margin-left: 8px; vertical-align: 2px; }
/* Each frequency and each priority has its own colour (functional, not brand colours). */
.chip.f-day { background: #e3f2fd; color: #1565c0; }
.chip.f-week { background: #ede7f6; color: #5e35b1; }
.chip.f-month { background: #e0f2f1; color: #00796b; }
.chip.f-year { background: #fff3e0; color: #e65100; }
.chip.p-low { background: #eceff1; color: #546e7a; }
.chip.p-medium { background: #fff8e1; color: #a66b00; }
.chip.p-high { background: #fff3e0; color: #e65100; }
.chip.p-urgent { background: #ffebee; color: #c62828; }
.task-view .task-num { width: 44px; }
.hero-photo {
position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-050);
height: 220px; display: grid; place-items: center; color: var(--ink-faint); cursor: zoom-in;
}
@media (min-width: 900px) {
.hero-photo { height: 390px; }
/* Fixed row heights on the asset page: details + photo 400px, attachments + QR 200px. */
.asset-layout { grid-template-rows: 400px 200px auto; }
.asset-layout .a-photo { min-height: 0; }
.asset-layout .a-photo > div { display: flex; flex-direction: column; height: 100%; }
.asset-layout .a-photo .hero-photo { flex: 1; height: auto; min-height: 0; }
.asset-layout .a-det { overflow: hidden; }
.asset-layout .a-att, .asset-layout .a-qr { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.asset-layout .a-att .card-pad { flex: 1; min-height: 0; overflow: hidden; padding: 6px; } /* no scrolling */
/* Tight tiles: minimal padding around each attachment so a row fits the 200px panel. */
.asset-layout .a-att .files { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
/* 200px panel − 57px header − 12px padding − ~22px label/border ≈ 108px, so the bottom gap matches top/left (6px). */
.asset-layout .a-att .file .prev { aspect-ratio: auto; height: 108px; }
.asset-layout .a-att .file .nm { padding: 2px 5px; font-size: 0.68rem; }
.asset-layout .a-qr .card-pad { flex: 1; min-height: 0; display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; }
} /* 30% taller than the earlier 300px; details panel matches it */
.hero-photo img { width: 100%; height: 100%; object-fit: contain; background: #1b2a30; }
.hero-photo svg { width: 48px; height: 48px; }
.hero-photo .count {
position: absolute; right: 10px; bottom: 10px; background: rgba(0, 27, 58,0.7); color: #fff;
font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
}
.strip { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; scrollbar-width: thin; }
.strip button { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--navy-050); }
.strip button.on { border-color: var(--brass); }
.strip img { width: 100%; height: 100%; object-fit: cover; }
/* CWO list: small photo thumbnail at the start of the row. */
.list-item .wo-thumb { width: 48px; height: 48px; align-self: center; }
/* Service Request list: one row per request, photo gallery on the left, details on the right
(stacked on phones). */
.sr-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.sr-grid > :not(.sr-card) { grid-column: 1 / -1; }
.sr-card {
display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg);
overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow 0.15s, border-color 0.15s;
}
.sr-card:hover { border-color: var(--navy-600); box-shadow: 0 4px 14px rgba(0, 41, 87, 0.12); }
.sr-media { position: relative; height: 190px; background: var(--navy-050); }
.sr-main { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-none { height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--ink-faint); font-size: 0.8rem; }
.sr-none svg { width: 36px; height: 36px; }
.sr-badges { position: absolute; top: 10px; left: 10px; right: 84px; display: flex; flex-wrap: wrap; gap: 6px; }
.sr-badges .chip { text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.sr-nav { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.sr-nav button {
width: 32px; height: 32px; border: 0; border-radius: 8px; padding: 0; cursor: pointer;
background: rgba(0, 0, 0, 0.45); color: #fff; display: grid; place-items: center;
}
.sr-nav button:hover { background: rgba(0, 0, 0, 0.65); }
.sr-nav svg { width: 18px; height: 18px; }
.sr-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 6px 0; }
.sr-thumbs button { aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--navy-050); }
.sr-thumbs button.on { border-color: var(--navy-600); }
.sr-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-more {
aspect-ratio: 4 / 3; border-radius: 8px; background: #3a3f45; color: #fff; display: grid; place-items: center;
text-align: center; font-size: 0.85rem; font-weight: 600; line-height: 1.2;
}
.sr-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.sr-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; }
.sr-head b { color: var(--navy-800); }
.sr-head span { color: var(--ink-muted); white-space: nowrap; }
.sr-title { font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: 4px; overflow-wrap: anywhere; }
.sr-fact { display: grid; grid-template-columns: 74px 1fr; gap: 8px; font-size: 0.8125rem; }
.sr-fact span { color: var(--ink-muted); }
.sr-fact b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
/* Compact cards, 2 per line from 700px, same height as the single-column rows: the photo fills
the left 40% edge to edge (110px tall), details on the right. Phones: photo across the top. */
.sr-grid { gap: 10px; }
.sr-in { display: flex; flex-direction: column; flex: 1; }
.sr-gallery { display: flex; flex-direction: column; }
.sr-media { height: 150px; }
@media (min-width: 700px) {
.sr-grid { grid-template-columns: 1fr 1fr; }
.sr-in { flex-direction: row; }
.sr-gallery { flex: none; width: 40%; border-right: 1px solid var(--hairline); }
/* The photo is pinned inside its box, so its own size never makes the card taller: the card is as
tall as its details (min 110px) and the photo fills that. */
.sr-media { height: auto; flex: 1; min-height: 110px; }
.sr-media > .sr-main, .sr-media > .sr-none { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Every card is exactly 190px (user's choice): the photo fills it above any thumbnail strip, and
the details are centred (cut off rather than growing the card). */
.sr-card { height: 190px; }
/* Tighter sides so the WO no., status and priority stay on one line with the date. */
.sr-body { padding-left: 8px; padding-right: 8px; }
.sr-no { flex-wrap: nowrap; gap: 6px; }
.sr-head { gap: 6px; flex-wrap: nowrap; }
.sr-head b, .sr-head .chip { white-space: nowrap; }
.sr-head b { font-size: 0.8rem; }
.sr-badges .chip { letter-spacing: 0; padding: 2px 5px; }
.sr-date { font-size: 0.72rem; }
.sr-gallery { width: 33%; }
.sr-in { min-height: 0; }
.sr-media { min-height: 0; }
.sr-body { overflow: hidden; }
.sr-body { flex: 1; min-width: 0; justify-content: center; }
}
/* Status / priority badges sit beside the CWO number, on one line. */
.sr-head { align-items: center; }
.sr-no { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.sr-badges { position: static; display: inline-flex; gap: 4px; flex-wrap: nowrap; }
.sr-badges .chip { font-size: 0.62rem; padding: 2px 6px; white-space: nowrap; flex: none; letter-spacing: 0.02em; box-shadow: none; }
.sr-date { flex: none; }
.sr-nav { top: auto; bottom: 6px; right: 6px; gap: 4px; }
.sr-nav button { width: 24px; height: 24px; border-radius: 6px; }
.sr-nav svg { width: 14px; height: 14px; }
/* Thumbnails: a tight strip flush under the photo (no padding or rounding, 2px gaps). */
.sr-thumbs { gap: 2px; padding: 2px 0 0; }
.sr-thumbs button, .sr-more { border-radius: 0; aspect-ratio: 3 / 2; border-width: 2px; }
.sr-more { font-size: 0.7rem; }
.sr-body { padding: 8px 12px 10px; gap: 2px; }
.sr-title { font-size: 0.95rem; margin-bottom: 2px; }
.sr-fact { grid-template-columns: 64px 1fr; font-size: 0.78rem; }
/* CWO detail on phones: Details, Work description, photo, Progress, Assets, then everything else. */
@media (max-width: 899px) {
.cwo-cols > .stack { display: contents; }
.cwo-cols > .stack > * { order: 6; }
.cwo-cols .c-det { order: 1; }
.cwo-cols .c-desc { order: 2; }
.cwo-cols .wo-photo { order: 3; }
.cwo-cols .c-prog { order: 4; }
.cwo-cols .c-assets { order: 5; }
}
.qr { display: flex; gap: 14px; align-items: center; }
.qr .code { width: 112px; height: 112px; flex: none; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 4px; }
.qr .code svg { width: 100%; height: 100%; }
/* ---------- attachments ---------- */
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.file {
position: relative; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden;
background: var(--surface-alt); cursor: pointer; display: flex; flex-direction: column; text-align: left; padding: 0;
}
.file .prev { aspect-ratio: 1; display: grid; place-items: center; background: var(--navy-050); color: var(--navy-600); overflow: hidden; position: relative; }
.file .prev img, .file .prev video { width: 100%; height: 100%; object-fit: cover; }
.file .prev .ext { font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; }
.file .prev svg { width: 26px; height: 26px; }
.file .prev .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 27, 58,0.25); }
.file .prev .play svg { width: 32px; height: 32px; }
.file .nm { font-size: 0.72rem; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-muted); }
.file .del {
position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%;
border: 0; background: rgba(0, 27, 58,0.65); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.file .del svg { width: 14px; height: 14px; }
.picker { border: 1.5px dashed var(--hairline-strong); border-radius: var(--radius-lg); padding: 12px; background: var(--surface-alt); }
.picker .btn-row { justify-content: flex-start; }
.picker .files { margin-top: 10px; }
.picker .files:empty { display: none; }
.picker .hint { margin-top: 8px; }
/* ---------- forms ---------- */
.form { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font-size: 0.8rem; font-weight: 600; color: var(--ink-muted); }
.field > span em { color: var(--danger); font-style: normal; }
/* Schedule form: "Recurrence pattern" (type radios | options) and "Range of recurrence" panels,
each under a normal field label. */
.recur {
min-width: 0; padding: 14px; display: grid; grid-template-columns: 1fr; gap: 14px;
border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--navy-050);
}
.recur [hidden] { display: none !important; }
.recur-row em, .recur-sub em { color: var(--danger); font-style: normal; }
.recur-types { display: flex; flex-wrap: wrap; gap: 10px 18px; padding-bottom: 12px; border-bottom: 2px solid var(--navy-100); }
.recur-body > [data-p] { display: flex; flex-direction: column; gap: 16px; }
.recur-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.9rem; }
/* Every input / dropdown box in both panels is the same size. */
/* All match the Start date box exactly: 180 × 42px, same padding, border and font. */
.recur-row input:not([type=radio]):not([type=checkbox]), .recur-row .dd-btn, .range-start input {
box-sizing: border-box; width: 180px; max-width: 100%; height: 42px; min-height: 42px; flex: none;
padding: 9px 11px; font-size: 16px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--surface);
}
.recur-row input[type=radio], .recur-row input[type=checkbox] { width: 18px; }
.recur-row .check { min-width: 120px; }
.recur-sub { display: flex; flex-direction: column; gap: 10px; }
.recur-sub > span { font-size: 0.8rem; font-weight: 600; color: var(--ink-muted); }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.range-start { display: flex; flex-direction: column; gap: 14px; }
.range-end { display: flex; flex-direction: column; gap: 16px; }
.recur .full-row { grid-column: 1 / -1; }
@media (min-width: 700px) {
/* Same left column in both panels so their dividers line up. */
.recur { grid-template-columns: 200px 1fr; column-gap: 20px; }
.recur-types { flex-direction: column; flex-wrap: nowrap; gap: 16px; padding: 4px 16px 4px 0; border-bottom: 0; border-right: 2px solid var(--navy-100); }
.range-start { padding-right: 16px; border-right: 2px solid var(--navy-100); }
.range-end { padding-top: 22px; }
}
/* Schedule form: selected assets as removable chips; picker rows; checklist preview. */
.asset-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.achip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; font-size: 0.85rem;
border: 1px solid var(--hairline-strong); border-radius: 999px; background: var(--surface); }
.achip .icon-btn { width: 26px; height: 26px; }
.pick-list { max-height: 55vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.pick-row { padding: 8px 6px; border-bottom: 1px solid var(--hairline); align-items: flex-start; }
/* Checklist dialog: name | description | duration, then task cards
(number + drag handle | text, type, options, answer preview | minutes, attachment, remark, delete). */
@media (min-width: 1200px) { .cl-form { grid-template-columns: 1fr 1.4fr 170px; } }
.cl-duration { min-height: 42px; display: flex; align-items: center; padding: 0 11px; font-weight: 700;
border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--navy-050); }
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.task { display: flex; border: 1px solid var(--hairline-strong); border-left: 3px solid var(--navy-600);
border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.task.dragging { opacity: 0.5; }
.task [hidden] { display: none !important; }
.task-num { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
border-right: 1px solid var(--hairline); color: var(--ink-muted); }
.task-num b { font-size: 1.1rem; }
.task-grip { cursor: grab; display: grid; place-items: center; }
.task-grip svg { width: 16px; height: 16px; }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 0; }
.task-top { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .task-top { grid-template-columns: 1fr 200px; } }
.task-preview { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.task-preview textarea, .task-preview input[type=text] { width: 100%; }
.task-preview input[type=number], .task-preview input[type=date] { width: 180px; }
.pill-opt { padding: 6px 18px; border: 1px solid var(--navy-600); border-radius: 999px; color: var(--navy-600); font-size: 0.85rem; font-weight: 600; }
.switch { display: inline-block; flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--hairline-strong); position: relative; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.task-bar { display: flex; align-items: center; gap: 4px; margin: 0 -12px; padding: 6px 8px 6px 12px;
background: var(--surface-alt); border-top: 1px solid var(--hairline); }
.task-min { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-muted); }
.task-min svg { width: 15px; height: 15px; }
.task-min input { width: 64px; min-height: 32px; padding: 4px 8px; }
.task-bar .grow { flex: 1; }
.task-req { margin-left: 14px; font-size: 0.85rem; color: var(--ink-muted); }
.req-star { color: var(--danger); font-weight: 700; }
/* Answer values typed straight into the card. */
.task-opts { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.opt-row { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 480px; }
.opt-row input { flex: 1; }
.opt-mark { flex: none; width: 16px; height: 16px; border: 2px solid var(--hairline-strong); }
.opt-mark.single { border-radius: 50%; }
.opt-mark.multi { border-radius: 3px; }
.opt-toggle, .opt-check { display: flex; align-items: center; gap: 12px; }
.opt-toggle input { width: 180px; flex: 0 1 180px; min-width: 0; }
/* Checklist dialog: the checklist being built on the left, existing checklists to pick tasks
from on the right. On tablets/desktops it fills the screen and each side scrolls on its own,
split by a clear divider; on phones the library stacks below. */
.cl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cl-library { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--hairline);
border-radius: var(--radius-lg); background: var(--navy-050); }
@media (min-width: 700px) {
.sheet.xwide .cl-layout { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(300px, 32%); gap: 0;
margin: 0 -22px -22px; border-top: 1px solid var(--hairline); }
.sheet.xwide .cl-form { overflow: auto; padding: 18px 22px 22px; align-content: start; }
.sheet.xwide .cl-library { overflow: auto; padding: 18px 18px 22px; border: 0; border-left: 3px solid var(--navy-100); border-radius: 0; }
}
.cl-lib-head { display: flex; flex-direction: column; gap: 2px; }
.cl-library .search { flex: none; background: var(--surface); } /* one line, not stretched down the column */
.cl-lib { display: flex; flex-direction: column; gap: 8px; }
.cl-lib details { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); }
.cl-lib summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; }
.cl-lib summary::-webkit-details-marker { display: none; }
.cl-lib .grow { flex: 1; min-width: 0; }
.lib-task { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--hairline); font-size: 0.88rem; }
.lib-task.added { opacity: 0.55; }
.opt-check input[type=text] { width: 260px; }
.fake-upload { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px dashed var(--hairline-strong);
border-radius: var(--radius); color: var(--ink-muted); font-size: 0.9rem; }
.fake-upload svg { width: 16px; height: 16px; }
.q-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-top: 4px; }
.q-from { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.q-from .field { width: 260px; }
.cl-preview ol, .cl-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.field .help { font-size: 0.75rem; color: var(--ink-faint); }
input[type=text], input[type=email], input[type=date], input[type=time], input[type=number], input[type=search], select, textarea {
width: 100%; min-height: 42px; padding: 9px 11px;
border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--surface);
font-size: 16px; /* stops iOS zooming on focus */
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(0, 41, 87,0.25); border-color: var(--navy-600); }
.inline { display: flex; gap: 8px; align-items: center; }
.inline > * { flex: 1; }
.check { display: flex; gap: 9px; align-items: center; font-size: 0.9rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--navy-700); }
.form-actions {
display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap;
}
@media (max-width: 699px) {
.form-actions {
position: sticky; bottom: calc(var(--bottomnav-h) + var(--safe-b)); margin: 18px -16px 0; padding: 12px 16px;
background: rgba(245, 244, 241, 0.96); border-top: 1px solid var(--hairline); z-index: 5;
}
.form-actions .btn { flex: 1; }
}
.picker-btn {
display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
min-height: 42px; padding: 8px 11px; border: 1px solid var(--hairline-strong); border-radius: var(--radius);
background: var(--surface); cursor: pointer; width: 100%;
}
.picker-btn .ph { color: var(--ink-faint); }
.picker-btn svg { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
/* ---------- timeline ---------- */
.timeline { display: flex; flex-direction: column; }
.tl { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.tl:first-child { border-top: 0; }
.tl .dot { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--navy-050); color: var(--navy-600); font-size: 0.7rem; font-weight: 700; }
.tl .dot svg { width: 14px; height: 14px; }
/* Kinds are prefixed (tl-comment, tl-file, …): a bare "file" class picked up the attachment-tile styles. */
.tl.tl-comment .dot { background: var(--plg-navy-tint); color: var(--plg-navy); }
.tl > div { flex: 1; min-width: 0; } /* lets long text (e.g. "Attached IMG_2026…jpg") wrap instead of overflowing the panel */
.tl .who { font-size: 0.78rem; color: var(--ink-faint); }
.tl .what { font-size: 0.9rem; overflow-wrap: anywhere; }
.comment-box { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.comment-box textarea { min-height: 44px; height: 44px; }
/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-head h2 { flex: 1; text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; }
.cal .dow { padding: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); text-align: center; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface-alt); }
.cal .day { min-height: 54px; padding: 4px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal .day.out { background: var(--surface-alt); color: var(--ink-faint); }
.cal .day.today .num { background: var(--navy-700); color: #fff; }
.cal .day.sel { box-shadow: inset 0 0 0 2px var(--brass); }
.cal .num { font-size: 0.75rem; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.cal .dots { display: flex; gap: 3px; flex-wrap: wrap; padding-left: 3px; }
.cal .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-600); }
.cal .dots i.cor { background: var(--danger); }
.cal .dots i.proj { background: transparent; border: 1.5px solid var(--navy-600); width: 7px; height: 7px; }
.cal .dots i.done { background: var(--ok); }
.cal .ev { display: none; font-size: 0.7rem; padding: 1px 5px; border-radius: 3px; background: var(--navy-100); color: var(--navy-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .ev.cor { background: var(--danger-tint); color: var(--danger); }
.cal .ev.proj { background: transparent; border: 1px dashed var(--navy-600); }
.cal .ev.done { background: var(--ok-tint); color: var(--ok); text-decoration: line-through; }
.cal .more { display: none; font-size: 0.68rem; color: var(--ink-faint); padding-left: 4px; }
@media (min-width: 800px) {
.cal .day { min-height: 104px; }
.cal .dots { display: none; }
.cal .ev, .cal .more { display: block; }
}
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.75rem; color: var(--ink-muted); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--navy-600); display: inline-block; }
.legend i.cor { background: var(--danger); }
.legend i.proj { background: transparent; border: 1.5px solid var(--navy-600); }
.legend i.done { background: var(--ok); }
/* Settings: collapsible group cards. */
.fold-head { cursor: pointer; user-select: none; gap: 8px; }
.fold-head h2 { flex: 1; min-width: 0; }
.fold-chev { display: inline-flex; color: var(--ink-faint); transition: transform 0.15s; transform: rotate(90deg); }
.fold-chev svg { width: 18px; height: 18px; }
.card.folded .fold-chev { transform: none; }
.folded > :not(.fold-head) { display: none; }
.card.folded > .card-head { border-bottom: 0; }
/* Service categories (folding) with their problem types inside, in one card. */
.lk-search { padding-bottom: 6px; }
.lk-group { border-top: 1px solid var(--hairline); }
.lk-ghead { display: flex; align-items: center; padding: 10px 16px; background: var(--surface-alt); }
.lk-ghead h2 { font-size: 0.95rem; font-weight: 600; }
.lk-group .tbl td:first-child { padding-left: 44px; }
.lk-none { padding: 10px 16px 12px 44px; }
.lk-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; max-height: 260px; overflow-y: auto;
border: 1px solid var(--hairline); border-radius: var(--radius); padding: 10px 12px; }
/* PWO calendar: events in the status chip colours. */
.cal .ev.st-open { background: #1e88e5; color: #fff; }
.cal .ev.st-ack { background: #5e35b1; color: #fff; }
.cal .ev.st-progress { background: #fb8c00; color: #fff; }
.cal .ev.st-done { background: #2e9d4f; color: #fff; }
.cal .dots i.st-open, .legend i.st-open { background: #1e88e5; }
.cal .dots i.st-ack, .legend i.st-ack { background: #5e35b1; }
.cal .dots i.st-progress, .legend i.st-progress { background: #fb8c00; }
.cal .dots i.st-done, .legend i.st-done { background: #2e9d4f; }
/* (older frequency tints, no longer used by the calendar) */
.cal .ev.f-day { background: #e3f2fd; color: #1565c0; }
.cal .ev.f-week { background: #ede7f6; color: #5e35b1; }
.cal .ev.f-month { background: #e0f2f1; color: #00796b; }
.cal .ev.f-year { background: #fff3e0; color: #e65100; }
.cal .ev.proj { background: transparent; border: 1px dashed currentColor; }
.cal .ev.done { background: var(--surface-alt); color: var(--ink-faint); text-decoration: line-through; }
.cal .dots i.f-day, .legend i.f-day { background: #1565c0; }
.cal .dots i.f-week, .legend i.f-week { background: #5e35b1; }
.cal .dots i.f-month, .legend i.f-month { background: #00796b; }
.cal .dots i.f-year, .legend i.f-year { background: #e65100; }
.cal .dots i.proj { background: transparent; border: 1.5px solid var(--navy-600); }
.cal .dots i.f-day.proj { border-color: #1565c0; }
.cal .dots i.f-week.proj { border-color: #5e35b1; }
.cal .dots i.f-month.proj { border-color: #00796b; }
.cal .dots i.f-year.proj { border-color: #e65100; }
.cal .dots i.done, .legend i.done { background: var(--ink-faint); }
.cal-views { margin-bottom: 12px; }
.cal-sel { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-sel .label { margin: 0; }
.cal-count { margin: -2px 0 10px; text-align: center; }
/* ---------- modal / sheet ---------- */
.overlay {
position: fixed; inset: 0; z-index: 60; background: rgba(0, 27, 58,0.5);
display: flex; align-items: flex-end; justify-content: center;
animation: fade 0.15s;
}
.sheet {
background: var(--surface); width: 100%; max-height: 92vh; overflow: auto;
border-radius: 16px 16px 0 0; padding: 18px 16px calc(18px + var(--safe-b));
box-shadow: var(--shadow-pop); animation: up 0.2s ease-out;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
@media (min-width: 700px) {
.overlay { align-items: center; padding: 24px; }
.sheet { max-width: 560px; border-radius: var(--radius-lg); padding: 22px; }
.sheet.wide { max-width: 760px; }
/* Large working dialog (e.g. the checklist builder): 80% of the screen. */
.sheet.xwide { max-width: none; width: 80vw; height: 80vh; max-height: none; display: flex; flex-direction: column; overflow: hidden; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(30px); opacity: 0.6; } }
.lightbox {
position: fixed; inset: 0; z-index: 80; background: rgba(0, 10, 14, 0.94);
display: flex; flex-direction: column;
}
.lightbox .lb-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #fff; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.lightbox .lb-top .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.lightbox .icon-btn { color: #fff; }
.lightbox .icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
/* Scrollable photo viewer: the photo is shown at full width and the area scrolls. */
.lightbox .lb-body {
flex: 1; min-height: 0; overflow: auto; position: relative;
touch-action: pan-x pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.lightbox .lb-stage { display: flex; min-width: 100%; min-height: 100%; width: max-content; }
.lightbox .lb-stage img {
display: block; margin: auto; max-width: none; max-height: none; height: auto;
cursor: zoom-in; user-select: none; -webkit-user-drag: none;
}
.lightbox.zoomed .lb-stage img { cursor: grab; }
.lightbox.dragging .lb-stage img { cursor: grabbing; }
.lightbox .lb-stage video { margin: auto; max-width: 100vw; max-height: calc(100vh - 70px); }
.lightbox .lb-pct { color: rgba(255, 255, 255, 0.8); font-size: 0.8rem; min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.lightbox.zoomed .nav { display: none; }
.asset-title { word-break: break-word; }
.page-head .sub + .sub { margin-top: 0; }
.lightbox .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lightbox .nav.prev { left: 10px; }
.lightbox .nav.next { right: 10px; }
.lightbox .nav svg { width: 22px; height: 22px; }
.progress { height: 6px; background: var(--navy-100); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.progress > div { height: 100%; background: var(--brass); width: 0; transition: width 0.2s; }
.toast {
position: fixed; left: 50%; transform: translateX(-50%); z-index: 90;
bottom: calc(var(--bottomnav-h) + var(--safe-b) + 18px);
background: var(--navy-900); color: #fff; padding: 11px 18px; border-radius: 8px;
font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow-pop); max-width: calc(100vw - 32px);
animation: up 0.2s ease-out;
}
.toast.err { background: var(--danger); }
@media (min-width: 900px) { .toast { bottom: 28px; } }
.empty { padding: 36px 16px; text-align: center; color: var(--ink-muted); }
.empty svg { width: 40px; height: 40px; color: var(--hairline-strong); margin: 0 auto 10px; }
.empty .btn { margin-top: 14px; }
.loading { padding: 48px; display: grid; place-items: center; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--navy-100); border-top-color: var(--navy-600); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.menu {
position: absolute; right: 12px; top: calc(var(--topbar-h) + 4px); z-index: 70;
background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
box-shadow: var(--shadow-pop); min-width: 220px; padding: 6px; color: var(--ink);
}
.menu .who { padding: 10px 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
.menu a { display: block; padding: 10px 12px; border-radius: var(--radius); color: var(--ink); font-size: 0.9rem; }
.menu a:hover { background: var(--navy-050); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tbl th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 600; padding: 10px 16px; border-bottom: 1px solid var(--hairline); }
.tbl td { padding: 10px 16px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.scroll-x { overflow-x: auto; }
/* Home work-order table: clickable rows. */
.home-wo tbody tr { cursor: pointer; }
.home-wo tbody tr:hover td, .home-wo tbody tr:focus-visible td { background: var(--navy-050); }
.home-wo td { padding-top: 9px; padding-bottom: 9px; }
.home-wo th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.home-wo th.sortable:hover, .home-wo th.on { color: var(--plg-navy); }
.home-wo .sort-ar { margin-left: 5px; font-size: 0.65rem; opacity: 0.55; }
.home-wo th.on .sort-ar { opacity: 1; }
.home-wo .hw-img { width: 56px; padding-right: 0; }
/* Every column fits its data; only Subject / Schedule (3rd) takes the spare width. Every row has the
same 44px photo slot (blank when there's no photo), so all rows are the same height. */
.home-wo th, .home-wo td { width: 1%; white-space: nowrap; }
.home-wo th:nth-child(3), .home-wo td:nth-child(3) { width: auto; white-space: normal; }
/* Location gets a share of the width. The table never scrolls sideways: it fits its card, and on
narrow screens the cells wrap instead. */
.home-wo th:nth-child(4), .home-wo td:nth-child(4) { width: 13%; } /* Location */
.home-wo { min-width: 0; width: 100%; }
@media (max-width: 1100px) { .home-wo td { white-space: normal; } }
.home-wo td { height: 70px; }
.home-wo td.hw-img .ph { width: 44px; height: 44px; border-radius: var(--radius); background: var(--navy-050); }
.home-wo td.hw-img img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius); display: block; }
/* Bigger photo (60px) and tighter cells (5px top/bottom, 10px sides). */
.home-wo th, .home-wo td { padding-left: 10px; padding-right: 10px; }
.home-wo td { padding-top: 5px; padding-bottom: 5px; }
.home-wo th.hw-img, .home-wo td.hw-img { padding-left: 6px; padding-right: 2px; }
/* Photo column 5% and WO No. 10% (≈80px / 170px on a 1720px table). The square photo fills its
column, up to 72px. */
.home-wo th.hw-img, .home-wo td.hw-img { width: 5%; }
.home-wo td.hw-img img, .home-wo td.hw-img .ph { width: 100%; max-width: 72px; height: auto; aspect-ratio: 1 / 1; }
.home-wo th:nth-child(2), .home-wo td:nth-child(2) { width: 10%; }
.home-wo td { height: 82px; }
/* ---------- in-app dropdowns (replace native