/* Shared responsive layer - one place for the rules that must hold on every
page of MyDesk, whichever of this app's five stylesheets that page
happens to link. Must stay first: @import is only honoured before any
other rule. */
@import url("/System/tl-responsive.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ===== Theme changer ===== =============================================
* CSS custom properties, overridden per theme via a `theme-*` class on
* (set by Global.js's yyapplyMyDeskTheme() from the MyDeskTheme
* cookie - see that file - since there's no single shared include
* every page goes through to set a data-theme attribute server-side
* before first paint). :root's own values ARE the "Classic Blue/White"
* theme (the app's existing, unchanged default look) - Classic needs no
* override block of its own, only the other three do.
*
* Deliberately a small, high-impact variable set (page background, card/
* fieldset surface, text, borders, the button gradient, links, list
* headers) covering the elements that dominate what a page actually
* looks like - not every single colour in this stylesheet. A future pass
* extending more rules to reference these same variables will pick up
* theming for free.
*/
:root
{
--tl-bg: #eef3f4;
--tl-surface: #ffffff;
--tl-surface-border: #d7e2e5;
--tl-text: #08121a;
--tl-text-muted: #5a6d7a;
--tl-heading: #18353d;
--tl-accent: #0c5560;
--tl-accent-2: #00a7ad;
--tl-btn-grad-top: #0db2b8;
--tl-btn-grad-bottom: #0a8b92;
--tl-btn-grad-top-hover: #10c3ca;
--tl-btn-grad-bottom-hover: #0b99a0;
--tl-btn-text: #ffffff;
--tl-link: #0b6670;
--tl-link-hover: #084d55;
--tl-listheader-grad-top: #f6fafb;
--tl-listheader-grad-bottom: #eaf2f4;
--tl-input-border: #b9ccd1;
--tl-input-bg: #ffffff;
--tl-card-shadow: rgba(8, 18, 26, .08);
/* Recessed surface, for legacy panels that hardcode bgcolor="#dddddd".
Classic keeps the exact legacy grey, so mapping those panels to this
token changes nothing at all on the default theme - it only gives the
other three somewhere sensible to send them. */
--tl-bg-recessed: #dddddd;
}
/* Navy/Gold - from the 2026 company profile's cover/section design
(dark navy field, gold headline accent, existing teal kept as the
interactive/accent colour so links and focus states stay recognisably
"Techlight" rather than becoming a wholesale new palette). */
body.theme-navy-gold
{
--tl-bg: #0a1e26;
--tl-surface: #0f2932;
--tl-surface-border: #1c3f4a;
--tl-text: #e8eef0;
--tl-text-muted: #9fb4bb;
--tl-heading: #f4d998;
--tl-accent: #c9a355;
--tl-accent-2: #00a7ad;
--tl-btn-grad-top: #d9bb73;
--tl-btn-grad-bottom: #c9a355;
--tl-btn-grad-top-hover: #e6c988;
--tl-btn-grad-bottom-hover: #d4af63;
--tl-btn-text: #0a1e26;
--tl-link: #4fd6dc;
--tl-link-hover: #7ee6ea;
--tl-listheader-grad-top: #16323c;
--tl-listheader-grad-bottom: #0f2932;
--tl-input-border: #2c4a54;
--tl-input-bg: #0a1e26;
--tl-card-shadow: rgba(0, 0, 0, .35);
--tl-bg-recessed: #081a21;
}
/* Dark - the company profile's full-bleed dark variant, same navy/gold
family as above but darker still and without the gold heading tint, so
it reads as a genuine low-light mode rather than Navy/Gold's branded
cover-page look. */
body.theme-dark
{
--tl-bg: #0b1418;
--tl-surface: #131e23;
--tl-surface-border: #223038;
--tl-text: #dbe4e7;
--tl-text-muted: #8a9ba1;
--tl-heading: #eef3f4;
--tl-accent: #00a7ad;
--tl-accent-2: #0db2b8;
--tl-btn-grad-top: #0db2b8;
--tl-btn-grad-bottom: #0a8b92;
--tl-btn-grad-top-hover: #10c3ca;
--tl-btn-grad-bottom-hover: #0b99a0;
--tl-btn-text: #ffffff;
--tl-link: #4fd6dc;
--tl-link-hover: #7ee6ea;
--tl-listheader-grad-top: #182228;
--tl-listheader-grad-bottom: #131e23;
--tl-input-border: #2a3a41;
--tl-input-bg: #0b1418;
--tl-card-shadow: rgba(0, 0, 0, .4);
--tl-bg-recessed: #090f12;
}
/* Light - an airier variant of Classic: white/near-white throughout,
softer borders, same teal accent - for anyone who finds Classic's
pale-teal page background too much colour. */
body.theme-light
{
--tl-bg: #fbfcfc;
--tl-surface: #ffffff;
--tl-surface-border: #e7edef;
--tl-text: #223138;
--tl-text-muted: #71838a;
--tl-heading: #18353d;
--tl-accent: #0c5560;
--tl-accent-2: #00a7ad;
--tl-btn-grad-top: #0db2b8;
--tl-btn-grad-bottom: #0a8b92;
--tl-btn-grad-top-hover: #10c3ca;
--tl-btn-grad-bottom-hover: #0b99a0;
--tl-btn-text: #ffffff;
--tl-link: #0b6670;
--tl-link-hover: #084d55;
--tl-listheader-grad-top: #fbfdfd;
--tl-listheader-grad-bottom: #f3f7f8;
--tl-input-border: #dce6e8;
--tl-input-bg: #ffffff;
--tl-card-shadow: rgba(8, 18, 26, .05);
--tl-bg-recessed: #eef1f2;
}
body
{
margin: 0;
background: var(--tl-bg);
color: var(--tl-text);
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
font-size: 13px;
line-height: 1.45;
}
#pageLabel, .pageLabelTD
{
color: #08121a;
}
body, p, td, th, input, select, textarea, button
{
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
font-size: 13px;
color: var(--tl-text);
}
body > center,
body > form,
body > table,
body > div
{
width: 100%;
box-sizing: border-box;
}
body > center > table[align="center"],
body > form > table[align="center"],
body > table[align="center"]
{
width: 100% !important;
margin: 0;
}
table
{
border-collapse: separate;
border-spacing: 0;
}
table[bgcolor="#ffffff"],
table[bgcolor="white"],
table[bgcolor="#FFF"],
table[bgcolor="#fff"]
{
background: var(--tl-surface);
border: 1px solid var(--tl-surface-border);
border-radius: 14px;
box-shadow: 0 14px 34px var(--tl-card-shadow);
overflow: hidden;
}
/* ===== Legacy bgcolor attributes, mapped to theme tokens ===================
* An HTML bgcolor attribute is a "presentational hint": any author CSS rule
* beats it. That is why on 107 pages already loses
* to the body rule above and needs nothing here. Tables, rows and cells had
* no such rule, so their hardcoded colours won by default - which is why the
* Dark and Navy/Gold themes showed white and beige patches on every older
* page while the rest of the app went dark.
*
* The rule for table[bgcolor="#ffffff"] above already covered 51 of those.
* These cover the remaining ~72, which is the whole of the rest: the counts
* come from a scan of every .asp in the app, so this is not a sample.
*
* Attribute selectors rather than 166 page edits, deliberately - AGENTS.md's
* guidance for exactly this class of legacy markup is to strengthen the
* shared rules instead of patching pages one at a time.
*/
tr[bgcolor="#ffffff"], tr[bgcolor="white"],
td[bgcolor="#ffffff"], td[bgcolor="white"]
{
background-color: var(--tl-surface);
}
table[bgcolor="#dddddd"], tr[bgcolor="#dddddd"], td[bgcolor="#dddddd"],
body[bgcolor="#eeeeee"] table[bgcolor="#eeeeee"]
{
background-color: var(--tl-bg-recessed);
}
/* The legacy list-header beige. Same colour the home page dashboard already
moved off, so this brings every other list that still uses it onto the one
header treatment rather than leaving two competing looks in the app. */
table[bgcolor="#ebeadb"], tr[bgcolor="#ebeadb"], td[bgcolor="#ebeadb"]
{
background: linear-gradient(180deg, var(--tl-listheader-grad-top) 0%, var(--tl-listheader-grad-bottom) 100%);
color: var(--tl-heading);
}
/* Hairline rules built the old way: a black
holding a 994px-wide 1px
Black.gif. Two problems, not one - the black never themed, and the fixed
994px pushed Report pages into horizontal scroll on a phone. The cell's
own background becomes the rule; the image keeps its layout box (so the
rule stays exactly 1px tall) but stops painting and stops setting width. */
td[bgcolor="#000000"], table[bgcolor="#000000"],
table[bgcolor="#555555"], table[bgcolor="#666666"], table[bgcolor="#cccccc"]
{
background-color: var(--tl-surface-border);
}
td[bgcolor="#000000"]
{
line-height: 0;
font-size: 0;
}
td[bgcolor="#000000"] > img
{
width: 100% !important;
height: 1px !important;
visibility: hidden;
}
/* Shared breadcrumb. Setup > Ask MyDesk AI, Docs and the MYOB pages each
carried their own page-local copy with hardcoded greys, so the trail did
not follow the theme and there were several near-identical definitions to
keep in step. This is the one to use from here on; the existing local
copies still render and are listed in todo.md for migration.
Separators come from CSS rather than the markup, so the trail cannot end
up with a stray slash when a page omits its last crumb. */
.tl-breadcrumb
{
font-size: 12px;
font-weight: 600;
color: var(--tl-text-muted);
margin: 0 0 18px;
}
.tl-breadcrumb a
{
color: var(--tl-text-muted);
text-decoration: none;
}
.tl-breadcrumb a:hover
{
color: var(--tl-accent);
text-decoration: underline;
}
.tl-breadcrumb a + a::before,
.tl-breadcrumb a + span::before
{
content: "/";
margin: 0 7px;
color: var(--tl-surface-border);
}
fieldset
{
border: 1px solid var(--tl-surface-border);
border-radius: 10px;
background: var(--tl-surface);
padding: 10px 12px 12px;
box-shadow: 0 6px 18px var(--tl-card-shadow);
color: var(--tl-text);
margin-bottom: 10px;
}
legend
{
display: none;
}
strong
{
font-size: inherit;
font-weight: 700;
}
.Header
{
font-size: 28px;
font-weight: 800;
line-height: 1.2;
color: var(--tl-heading);
}
.Header2, A.Header2, A:Link.Header2, A:Visited.Header2, A:Active.Header2, A:Hover.Header2
{
font-size: 12px;
color: var(--tl-text-muted);
font-weight: 700;
text-decoration: none;
}
span.Header2, SPAN.Header2
{
display: none;
}
.Header3
{
font-size: 11px;
font-weight: 700;
color: #607278;
text-transform: uppercase;
letter-spacing: .05em;
}
A.Header3, A:Link.Header3, A:Visited.Header3, A:Active.Header3
{
font-size: 20px;
font-weight: 800;
color: #08121a;
text-decoration: none;
}
.ButtonLink, A.ButtonLink, A:Hover.ButtonLink, A:Link.ButtonLink, A:Visited.ButtonLink, A:Active.ButtonLink
{
font-size: 11px;
font-weight: 700;
color: #ffffff;
text-decoration: none;
}
.Link2, A.Link2, A:Hover.Link2, A:Link.Link2, A:Visited.Link2, A:Active.Link2
{
color: #0d6f78;
text-decoration: none;
}
A, A:Link, A:Visited, A:Active
{
color: var(--tl-link);
font-weight: 700;
text-decoration: none;
}
A:hover, A:Hover
{
color: var(--tl-link-hover);
text-decoration: underline;
}
.Error
{
margin: 0 0 18px;
padding: 12px 14px;
text-align: left;
color: #8f1d1d;
font-weight: 700;
background: #fff1f1;
border: 1px solid #f3c4c4;
border-radius: 10px;
}
.Req
{
font-size: 14px;
color: #cc3a32;
font-weight: 800;
}
input, select, textarea
{
border: 1px solid var(--tl-input-border);
border-radius: 6px;
background: var(--tl-input-bg);
color: var(--tl-text);
padding: 4px 8px;
box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
font-size: 12px;
}
input
{
min-height: 28px;
}
select
{
min-height: 30px;
padding-right: 24px;
}
textarea
{
width: 280px;
min-height: 92px;
resize: vertical;
}
input:focus, select:focus, textarea:focus
{
outline: none;
border-color: var(--tl-accent-2);
box-shadow: 0 0 0 4px rgba(0, 167, 173, .12);
}
input[readonly]
{
background: var(--tl-bg);
color: var(--tl-text-muted);
}
input[type="button"], input[type="submit"], input[type="reset"], button
{
/* Setup's button: solid accent, 13px semibold, 8px corners */
min-height: 32px;
padding: 7px 14px;
border: 1px solid #0c5560;
border-radius: 8px;
background: #0c5560;
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
box-shadow: none;
cursor: pointer;
line-height: 1.2;
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover
{
background: #094048;
border-color: #094048;
}
/* Row actions (View, Edit, Delete) are the outline variant, as in Style2.css */
input.grid-btn
{
background: #fff;
color: #0c5560;
padding: 4px 12px;
font-size: 12.5px;
min-height: 28px;
}
input.grid-btn:hover
{
background: #eef3f4;
border-color: #0c5560;
}
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, button:active
{
transform: translateY(1px);
}
/* Keyboard-focus ring, matching the input/select/textarea focus style above -
buttons previously had no visible focus indicator for keyboard/screen-reader
users. :focus-visible skips it for a mouse click, keeps it for Tab. */
input[type="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible, button:focus-visible,
a:focus-visible
{
outline: none;
box-shadow: 0 0 0 4px rgba(0, 167, 173, .35);
}
input[type="button"] + input[type="button"],
input[type="button"] + input[type="submit"],
input[type="submit"] + input[type="button"],
input[type="submit"] + input[type="submit"]
{
margin-left: 4px;
}
/* View page headers */
.Header4
{
font-family: 'Inter', Arial, sans-serif;
font-size: 18px;
font-weight: 700;
color: #08121a;
letter-spacing: -.01em;
}
/* Navbar action button bars on View pages */
.tl-navbar
{
background: linear-gradient(180deg, #f6fafb 0%, #eef3f4 100%);
border-bottom: 1px solid #d7e2e5;
}
.tl-navbar td
{
padding: 10px 12px;
}
/* Toolbar actions on one line; a phone scrolls them sideways rather than
wrapping them into a three-row block above the record. */
.tl-navbar td:has(input[type="button"])
{
display: flex;
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
align-items: center;
}
.tl-navbar td input[type="button"],
.tl-navbar td input[type="submit"]
{
flex: 0 0 auto;
margin: 0;
white-space: nowrap;
}
img
{
max-width: 100%;
}
td
{
vertical-align: top;
}
td[align="right"]
{
text-align: right;
}
.FormTopTD, .FormBtmTD
{
padding: 12px 0 16px;
}
.TDAReq,
td[style*="font-weight:bold"],
td b
{
color: var(--tl-heading);
font-weight: 700;
}
.ListHeaderRow
{
padding: 6px 10px;
font-weight: 800;
border-bottom: 1px solid var(--tl-surface-border);
background: linear-gradient(180deg, var(--tl-listheader-grad-top) 0%, var(--tl-listheader-grad-bottom) 100%);
color: var(--tl-heading);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .03em;
position: sticky;
top: 0;
}
tr td.ListHeaderRow:first-child
{
border-top-left-radius: 12px;
}
tr td.ListHeaderRow:last-child
{
border-top-right-radius: 12px;
}
.ListRow td
{
padding: 5px 10px;
font-size: 12px;
background: var(--tl-surface);
/* Slightly bolder/darker than --tl-surface-border on purpose - that
variable is shared by card/fieldset borders too, and darkening it
there as well wasn't asked for. color-mix keeps this in step with
the active theme instead of a flat hardcoded colour. */
border-bottom: 1px solid color-mix(in srgb, var(--tl-text) 22%, var(--tl-surface-border));
vertical-align: middle;
}
.ListRow:nth-child(even) td
{
background: var(--tl-bg);
}
.ListRow:hover td
{
background: color-mix(in srgb, var(--tl-accent-2) 12%, var(--tl-surface));
}
table tr td
{
padding: 4px 8px;
}
table tr + tr td
{
border-top: 1px solid rgba(151, 172, 180, .75);
}
/* An empty
(e.g. a
spacer used only to align a
button under the right desktop column) still picked up the row-divider
border-top above, plus this stylesheet's own padding - with no content
to fill, that rendered as a stray blank line rather than just... not
being there. Reported live: several thin empty horizontal lines
stacked above a filter's action buttons (PurchaseOrders, and any other
filter fieldset using the same colspan-spacer pattern). An empty cell
should never be visible at all. */
table tr td:empty
{
border: 0 !important;
padding: 0 !important;
}
table tr td[colspan]
{
padding-top: 8px;
padding-bottom: 8px;
}
hr
{
border: 0;
height: 1px;
background: #d7e2e5;
}
li
{
margin-bottom: 6px;
}
iframe
{
border: 0;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 6px 18px rgba(8, 18, 26, .06);
}
/* ===== Compact filter fieldset with expand/collapse ===== */
fieldset.tl-filter
{
padding: 0;
overflow: hidden;
transition: box-shadow .2s ease;
}
fieldset.tl-filter.collapsed
{
box-shadow: 0 2px 8px rgba(8, 18, 26, .04);
}
fieldset.tl-filter .tl-filter__bar
{
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: linear-gradient(180deg, #f6fafb 0%, #eaf2f4 100%);
border-bottom: 1px solid #d7e2e5;
cursor: pointer;
user-select: none;
}
fieldset.tl-filter.collapsed .tl-filter__bar
{
border-bottom: 0;
}
fieldset.tl-filter .tl-filter__title
{
font-size: 11px;
font-weight: 800;
color: #18353d;
text-transform: uppercase;
letter-spacing: .04em;
}
fieldset.tl-filter .tl-filter__toggle
{
font-size: 11px;
color: #0b6670;
font-weight: 700;
margin-left: auto;
}
fieldset.tl-filter .tl-filter__body
{
padding: 10px 12px;
transition: max-height .25s ease, opacity .2s ease, padding .2s ease;
max-height: 800px;
opacity: 1;
overflow: hidden;
}
fieldset.tl-filter.collapsed .tl-filter__body
{
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
}
fieldset.tl-filter table
{
width: 100%;
}
fieldset.tl-filter table tr td
{
padding: 3px 6px;
vertical-align: middle;
white-space: nowrap;
}
fieldset.tl-filter input,
fieldset.tl-filter select
{
min-height: 26px;
padding: 3px 6px;
font-size: 12px;
width: auto;
}
fieldset.tl-filter td[colspan]
{
padding-top: 6px;
padding-bottom: 4px;
}
/* ===== Swoosh decorations ===== */
.tl-swoosh-top
{
position: relative;
}
.tl-swoosh-top::before
{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #00a7ad, #0db2b8, #00a7ad);
border-radius: 0 0 2px 2px;
}
.tl-swoosh-bar
{
position: relative;
overflow: hidden;
}
.tl-swoosh-bar::after
{
content: '';
position: absolute;
bottom: 0;
left: -10%;
width: 120%;
height: 60px;
background: radial-gradient(ellipse at center, rgba(0, 167, 173, .08) 0%, transparent 70%);
pointer-events: none;
}
/* ===== Responsive ===== */
@media (max-width: 1024px)
{
fieldset.tl-filter table tr td
{
white-space: normal;
}
}
@media (max-width: 768px)
{
/* Safety net: this app is built from decades of fixed pixel-width
nested tables that no single selector can all catch. Rather than
guess at every layout and risk squeezing a data grid unreadable,
let the page pan horizontally so nothing gets silently clipped
off-screen. Pages that manage their own scroll region (the
ActiveWidgets grid in IFrame.asp) set body { overflow: hidden }
inline, which - being more specific - still wins over this. */
body
{
overflow-x: auto;
}
body > center > table[align="center"],
body > form > table[align="center"],
body > table[align="center"],
body > center > table[align="center"] table[align="center"],
body > form > table[align="center"] table[align="center"],
body > table[align="center"] table[align="center"]
{
width: 100% !important;
}
/* Broader net: list/filter pages also nest plain `
`
layout tables (no align="center") that the rule above can't reach -
e.g. a filter fieldset wrapped in `
`. Style2.css
(linked by IFrame.asp grid pages, not this stylesheet) is unaffected,
so this can't touch the ActiveWidgets grid's own column widths.
Deliberately NO max-width cap here (there used to be one): a table
whose columns' real minimum content width exceeds the phone screen
(e.g. Setup > Users' 8 columns, or an Edit form whose label column is
a fixed pixel width via inline style rather than the width=
attribute) still has to go SOMEWHERE - capped at max-width:100%, the
browser was squeezing such columns below their own minimum width,
and word-break below then wrapped their text one character per line
instead of the table just growing past the viewport and letting the
body{overflow-x:auto} safety net above scroll it horizontally, which
is what this stylesheet already intends for exactly this legacy
fixed-width-table pattern. A table whose content DOES fit in 100%
still renders at 100% either way - auto table layout only grows past
the specified width when content forces it to. */
table[width]
{
width: 100% !important;
}
/* The two remaining fixed-width elements a scan of every .asp turned up
that table[width] above does not reach. Both are small in number but
both force the whole page into horizontal scroll on a phone, which is
the failure this media query exists to prevent.
on Report pages: four of them, each wider than any
phone. Only the width attribute is cleared, so the rule keeps whatever
height and colour it had.
img[width]: constrains only the width, never the height. A 1px-tall
spacer gif is load-bearing layout on these pages, so adding the usual
companion height:auto would collapse the gap it exists to hold open -
the image simply stops being able to exceed its container. */
hr[width]
{
width: 100% !important;
}
img[width]
{
max-width: 100%;
}
/* Fixed-pixel
attributes (common on older list pages
built like Setup > Expense Types: width=130 + width=350 + width=75
alone total more than a whole phone screen) fight the table[width]
rule above - forced to 100% table width, the browser then squeezes
whichever column was left with NO explicit width down to near-zero,
and the word-break rule below wraps its text one character per line
instead of the column just taking its fair share. Clearing the
attribute-set hint lets auto table layout size columns from actual
content instead. */
table[width] td[width]
{
width: auto !important;
}
/* Add/Edit form pages (Invoices/Quotes/PurchaseOrders/etc Edit.asp)
lay label/value pairs out side-by-side in
pairs sized
for a ~700-770px desktop table (e.g. "Delivery Address" next to
"Invoice Address"). table[width] above forces the table to 100% of
the phone width, but the percentage widths on td[width] survive as
percentages OF that new 100% - still packing two label/value column
pairs into one phone-width row, so each column is still too narrow
for its own label text and word-break above wraps it one letter per
line (e.g. "Invoiced By" rendering as a vertical single-letter
column). Worse, that also squeezes OTHER rows in the same table that
have no width at all (e.g. "Invoiced By" itself), because plain HTML
tables share one column grid across all rows. Stack every %-width
cell as its own full-width block instead - same technique already
used for fieldset.tl-filter below - which both fixes that row and
removes it from the shared column grid so unrelated rows above/below
it size themselves from their own content again. */
table[width] td[width$="%"]
{
display: block;
width: 100% !important;
}
table[width] tr:has(td[width$="%"])
{
display: block;
}
/* Same problem, different pattern: a plain pixel-width label column -