/* ============================================================
tidal-theme.css
Tidal Activator redesign theme, ported from the approved mockup.
Added By John - 06/08/2026
Rules of the port:
- EVERY new class is prefixed "ta-" so it can never collide with
the existing /assets/css/styles.min.css or bootstrap.min.css,
both of which are still loaded for the pages that are out of
scope this round (Activate / Create form, Program pages).
- The design tokens keep the mockup's names but are declared on
".ta-scope" (applied to ) instead of ":root", so a token
of the same name declared at :root by another stylesheet stays
usable by that stylesheet on and is only shadowed inside
our own subtree.
- No element-level resets (no bare "ul{}", "a{}", "table{}"):
everything is component scoped so untouched pages keep their
current look.
============================================================ */
/* ============================================================
1. TOKENS + PAGE SHELL
============================================================ */
.ta-scope {
color-scheme: light; /* light locked on purpose */
--nav: #0B2B48; /* app bar + login gate panel */
--nav-2: #0F3959;
--brand-800: #0A3B63;
--brand-700: #0C4A7D;
--brand-600: #0E5C9E; /* the single accent */
--brand-500: #1877C4;
--brand-200: #BFD9F0;
--brand-100: #DDEBF8;
--brand-050: #EFF6FC;
--teal-500: #0E7C7B;
--teal-400: #3FB8B5;
--ink: #0F2438;
--text-2: #4C5F75;
--text-3: #5F7288;
--line: #E1E8F0;
--line-2: #CBD8E5;
--bg: #F3F7FA;
--surface: #FFFFFF;
--ok-700: #0B6B45;
--ok-100: #DEF3E9;
--ok-200: #B6E1CD;
--warn-700: #8A5300;
--warn-100: #FDF0DA;
--warn-200: #F1D6A4;
--bad-700: #A32A21;
--bad-100: #FBE5E2;
--bad-200: #F1C3BD;
/* radius system: panels 14, controls 9, chips/pills full, tiles 8 */
--r-panel: 14px;
--r-ctl: 9px;
--r-tile: 8px;
--r-pill: 999px;
/* shadows tinted to the page hue, never pure black */
--sh-1: 0 1px 2px rgba(12,42,71,.05), 0 1px 3px rgba(12,42,71,.04);
--sh-2: 0 1px 2px rgba(12,42,71,.06), 0 14px 30px -18px rgba(12,42,71,.35);
--sh-pop: 0 10px 34px -10px rgba(12,42,71,.30), 0 2px 6px rgba(12,42,71,.08);
--ring: 0 0 0 3px rgba(14,92,158,.28);
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
/* z scale, documented so nobody invents a z-9999 later */
--z-appbar: 40;
--z-menu: 50;
--z-tip: 60;
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 14.5px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* keeps the footer at the bottom on short screens */
display: flex;
flex-direction: column;
min-height: 100vh;
}
.ta-scope *, .ta-scope *::before, .ta-scope *::after {
box-sizing: border-box;
}
/* the only body child that grows */
.ta-main {
flex: 1 0 auto;
width: 100%;
}
/* ============================================================
2. SMALL UTILITIES
============================================================ */
.ta-ic {
width: 1em;
height: 1em;
fill: currentColor;
flex: none;
display: inline-block;
vertical-align: -.125em;
}
.ta-sr {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.ta-wrap {
width: 100%;
max-width: 1220px;
margin: 0 auto;
padding: 0 24px;
}
/* Full width variant for data heavy pages (Activated apps) that want to use the whole
screen instead of the 1220px reading width the dashboard/forms use - John - 06/08/2026 */
.ta-wrap-fluid {
max-width: none;
}
.ta-num {
font-variant-numeric: tabular-nums;
}
.ta-mono {
font-family: var(--mono);
font-size: .92em;
letter-spacing: .01em;
}
.ta-scope :focus-visible {
outline: none;
box-shadow: var(--ring);
border-radius: 6px;
}
/* ============================================================
3. APP BAR
Real active state, real user identity, one wordmark, no dead
links - replaces the old mixed BS3/BS4 navbar.
============================================================ */
.ta-scope .ta-appbar {
position: sticky;
top: 0;
z-index: 40;
height: 64px;
flex: none;
background: var(--nav);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.09);
}
.ta-appbar-in {
height: 100%;
display: flex;
align-items: center;
gap: 28px;
}
.ta-scope .ta-brand {
display: flex;
align-items: center;
gap: 10px;
flex: none;
padding: 6px;
margin: -6px;
border-radius: var(--r-ctl);
text-decoration: none;
}
.ta-scope .ta-brand:hover, .ta-scope .ta-brand:focus {
text-decoration: none;
}
.ta-brand-mark {
width: 32px;
height: 32px;
border-radius: 9px;
flex: none;
display: grid;
place-items: center;
background: linear-gradient(148deg,var(--brand-500) 12%,var(--teal-500) 100%);
color: #fff;
font-size: 12.5px;
font-weight: 800;
letter-spacing: .03em;
box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 1px 2px rgba(0,0,0,.28);
}
.ta-brand-word {
color: #fff;
font-size: 16px;
letter-spacing: -.012em;
font-weight: 400;
white-space: nowrap;
}
.ta-brand-word b {
font-weight: 700;
}
.ta-brand-word span {
color: rgba(255,255,255,.86);
}
.ta-mainnav {
display: flex;
align-self: stretch;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
}
.ta-scope .ta-mainnav a {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
height: 100%;
color: rgba(255,255,255,.74);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
border-radius: 9px 9px 0 0;
transition: color .16s ease, background-color .16s ease;
}
.ta-scope .ta-mainnav a .ta-ic {
font-size: 15px;
opacity: .9;
}
.ta-scope .ta-mainnav a:hover, .ta-scope .ta-mainnav a:focus {
color: #fff;
background: rgba(255,255,255,.07);
text-decoration: none;
}
.ta-scope .ta-mainnav a.ta-is-active {
color: #fff;
background: rgba(255,255,255,.10);
}
.ta-scope .ta-mainnav a.ta-is-active::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 0;
height: 2px;
background: var(--teal-400);
border-radius: 2px 2px 0 0;
}
.ta-appbar-right {
display: flex;
align-items: center;
gap: 8px;
flex: none;
}
/* ---- user chip + dropdown (plain CSS/JS, no Bootstrap JS) ---- */
.ta-usermenu {
position: relative;
}
.ta-scope .ta-userchip {
display: flex;
align-items: center;
gap: 9px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
padding: 5px 10px 5px 5px;
border-radius: var(--r-pill);
cursor: pointer;
font: inherit;
transition: background-color .16s ease,border-color .16s ease;
}
.ta-scope .ta-userchip:hover {
background: rgba(255,255,255,.15);
border-color: rgba(255,255,255,.26);
}
.ta-scope .ta-userchip:active {
transform: translateY(1px);
}
.ta-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
flex: none;
display: grid;
place-items: center;
background: linear-gradient(160deg,var(--brand-500),var(--teal-500));
color: #fff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .02em;
}
.ta-userchip-name {
font-size: 13.5px;
font-weight: 500;
letter-spacing: -.005em;
}
.ta-scope .ta-userchip .ta-ic {
font-size: 12px;
opacity: .75;
}
.ta-menu {
position: absolute;
right: 0;
top: calc(100% + 10px);
z-index: 50;
width: 258px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: var(--sh-pop);
padding: 6px;
transform-origin: top right;
}
.ta-menu[hidden] {
display: none;
}
.ta-menu-head {
padding: 10px 10px 11px;
border-bottom: 1px solid var(--line);
margin-bottom: 6px;
}
.ta-menu-head strong {
display: block;
font-size: 13.5px;
font-weight: 650;
letter-spacing: -.005em;
word-break: break-all;
}
.ta-menu-head span {
display: block;
font-size: 12px;
color: var(--text-3);
margin-top: 2px;
}
.ta-scope .ta-menu-item {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border: 0;
background: none;
border-radius: var(--r-tile);
font: inherit;
font-size: 13.5px;
text-align: left;
cursor: pointer;
color: var(--ink);
text-decoration: none;
transition: background-color .14s ease,color .14s ease;
}
.ta-scope .ta-menu-item .ta-ic {
font-size: 15px;
color: var(--text-3);
transition: color .14s ease;
}
.ta-scope .ta-menu-item:hover, .ta-scope .ta-menu-item:focus {
background: var(--brand-050);
color: var(--brand-700);
text-decoration: none;
}
.ta-scope .ta-menu-item:hover .ta-ic {
color: var(--brand-600);
}
.ta-scope .ta-menu-item.ta-is-danger:hover, .ta-scope .ta-menu-item.ta-is-danger:focus {
background: var(--bad-100);
color: var(--bad-700);
}
.ta-scope .ta-menu-item.ta-is-danger:hover .ta-ic {
color: var(--bad-700);
}
.ta-scope .ta-menu-item.ta-is-current {
background: var(--brand-050);
color: var(--brand-700);
font-weight: 600;
}
.ta-scope .ta-menu-item.ta-is-current .ta-ic {
color: var(--brand-600);
}
.ta-menu-sep {
border: 0;
border-top: 1px solid var(--line);
margin: 6px 0;
}
.ta-scope .ta-navtoggle {
display: none;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
color: #fff;
width: 38px;
height: 38px;
border-radius: var(--r-ctl);
cursor: pointer;
align-items: center;
justify-content: center;
font-size: 17px;
}
/* ============================================================
4. SHARED UI
============================================================ */
.ta-page {
padding-top: 30px;
padding-bottom: 56px;
}
.ta-pagehead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.ta-scope .ta-pagehead h1 {
font-size: 25px;
font-weight: 680;
letter-spacing: -.022em;
line-height: 1.2;
margin: 0;
color: var(--ink);
}
.ta-scope .ta-sub {
margin: 5px 0 0;
font-size: 14px;
color: var(--text-2);
max-width: 64ch;
}
.ta-panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-panel);
box-shadow: var(--sh-1);
}
.ta-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 15px 18px;
border-bottom: 1px solid var(--line);
}
.ta-scope .ta-panel-head h2 {
font-size: 14.5px;
font-weight: 650;
letter-spacing: -.008em;
margin: 0;
color: var(--ink);
}
.ta-panel-head .ta-hint {
font-size: 12.5px;
color: var(--text-3);
}
/* ---- buttons (deliberately NOT reusing bootstrap .btn) ---- */
.ta-scope .ta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 15px;
border-radius: var(--r-ctl);
border: 1px solid transparent;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
letter-spacing: -.005em;
line-height: 1.4;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
transition: background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .06s ease;
}
.ta-scope .ta-btn:hover, .ta-scope .ta-btn:focus {
text-decoration: none;
}
.ta-scope .ta-btn .ta-ic {
font-size: 15px;
}
.ta-scope .ta-btn:active {
transform: translateY(1px);
}
.ta-scope .ta-btn-primary {
background: var(--brand-600);
color: #fff;
box-shadow: 0 1px 2px rgba(12,42,71,.20);
}
.ta-scope .ta-btn-primary:hover, .ta-scope .ta-btn-primary:focus {
background: var(--brand-700);
color: #fff;
}
.ta-scope .ta-btn-ghost {
background: var(--surface);
border-color: var(--line-2);
color: var(--ink);
}
.ta-scope .ta-btn-ghost:hover, .ta-scope .ta-btn-ghost:focus {
background: var(--brand-050);
border-color: var(--brand-200);
color: var(--brand-700);
}
.ta-scope .ta-btn-soft {
background: var(--brand-050);
border-color: var(--brand-100);
color: var(--brand-700);
}
.ta-scope .ta-btn-soft:hover, .ta-scope .ta-btn-soft:focus {
background: var(--brand-100);
border-color: var(--brand-200);
color: var(--brand-700);
}
.ta-scope .ta-btn-sm {
padding: 6px 10px;
font-size: 12.5px;
gap: 6px;
}
.ta-scope .ta-btn-block {
width: 100%;
padding: 11px 15px;
font-size: 14.5px;
}
.ta-scope .ta-btn[disabled] {
opacity: .45;
cursor: not-allowed;
}
.ta-scope .ta-btn[disabled]:active {
transform: none;
}
/* icon-only buttons always carry an aria-label + a visible tooltip */
.ta-scope .ta-iconbtn {
width: 32px;
height: 32px;
display: inline-grid;
place-items: center;
border-radius: var(--r-tile);
border: 1px solid transparent;
background: none;
color: var(--text-2);
font-size: 15px;
cursor: pointer;
text-decoration: none;
transition: background-color .14s ease,color .14s ease,border-color .14s ease;
}
.ta-scope .ta-iconbtn:hover, .ta-scope .ta-iconbtn:focus {
background: var(--brand-050);
border-color: var(--brand-100);
color: var(--brand-700);
text-decoration: none;
}
.ta-scope .ta-iconbtn:active {
transform: translateY(1px);
}
.ta-scope .ta-iconbtn-danger:hover, .ta-scope .ta-iconbtn-danger:focus {
background: var(--bad-100);
border-color: var(--bad-200);
color: var(--bad-700);
}
.ta-scope [data-tip] {
position: relative;
}
.ta-scope [data-tip]::after {
content: attr(data-tip);
position: absolute;
z-index: 60;
bottom: calc(100% + 7px);
left: 50%;
transform: translateX(-50%) translateY(3px);
background: var(--ink);
color: #fff;
font-size: 11.5px;
font-weight: 500;
letter-spacing: .005em;
padding: 5px 8px;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity .14s ease, transform .14s ease;
box-shadow: 0 6px 18px -6px rgba(12,42,71,.5);
}
.ta-scope [data-tip]:hover::after, .ta-scope [data-tip]:focus::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.ta-scope [data-tip].ta-tip-end::after {
left: auto;
right: 0;
transform: translateX(0) translateY(3px);
}
.ta-scope [data-tip].ta-tip-end:hover::after, .ta-scope [data-tip].ta-tip-end:focus::after {
transform: translateX(0) translateY(0);
}
/* ---- status pills. Replace the Bootstrap alert boxes the old table used ---- */
.ta-pill {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
padding: 3px 10px 3px 8px;
border-radius: var(--r-pill);
font-size: 12.5px;
font-weight: 600;
letter-spacing: -.002em;
border: 1px solid;
}
.ta-pill .ta-ic {
font-size: 12px;
}
.ta-pill-ok {
background: var(--ok-100);
border-color: var(--ok-200);
color: var(--ok-700);
}
.ta-pill-warn {
background: var(--warn-100);
border-color: var(--warn-200);
color: var(--warn-700);
}
.ta-pill-bad {
background: var(--bad-100);
border-color: var(--bad-200);
color: var(--bad-700);
}
.ta-pill-owned {
background: var(--brand-100);
border-color: var(--brand-200);
color: var(--brand-700);
}
.ta-pill-sub {
margin-top: 4px;
font-size: 12px;
color: var(--text-3);
}
/* ---- forms: label above, helper present, error below ---- */
.ta-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
}
.ta-scope .ta-field label {
font-size: 13px;
font-weight: 600;
letter-spacing: -.004em;
margin: 0;
color: var(--ink);
}
.ta-scope .ta-help {
font-size: 12.5px;
color: var(--text-3);
line-height: 1.45;
margin: 0;
}
.ta-scope .ta-input, .ta-scope .ta-select {
display: block;
width: 100%;
height: auto;
background: #fff;
border: 1px solid var(--line-2);
border-radius: var(--r-ctl);
padding: 10px 12px;
font-family: inherit;
font-size: 14px;
line-height: 1.45;
color: var(--ink);
box-shadow: none;
transition: border-color .14s ease,box-shadow .14s ease,background-color .14s ease;
}
.ta-scope .ta-input::placeholder {
color: var(--text-3);
}
.ta-scope .ta-input:hover, .ta-scope .ta-select:hover {
border-color: #B4C6D8;
}
.ta-scope .ta-input:focus, .ta-scope .ta-select:focus {
outline: none;
border-color: var(--brand-500);
box-shadow: var(--ring);
}
.ta-scope .ta-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 34px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
}
.ta-inputwrap {
position: relative;
display: flex;
}
.ta-scope .ta-inputwrap .ta-input {
padding-right: 42px;
}
.ta-scope .ta-reveal {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 0;
background: none;
color: var(--text-3);
border-radius: var(--r-tile);
cursor: pointer;
font-size: 15px;
}
.ta-scope .ta-reveal:hover {
background: var(--brand-050);
color: var(--brand-700);
}
.ta-scope .ta-err {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--bad-700);
font-weight: 550;
margin: 0;
}
.ta-scope .ta-err .ta-ic {
font-size: 13px;
flex: none;
}
/* MVC renders an empty span for every valid field; don't let it eat the .ta-field gap */
.ta-scope .ta-err:empty,
.ta-scope .ta-err.field-validation-valid {
display: none;
}
.ta-scope .ta-field.ta-has-error .ta-input {
border-color: var(--bad-700);
box-shadow: 0 0 0 3px rgba(163,42,33,.16);
}
.ta-scope .ta-check {
display: flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
font-weight: 400;
color: var(--text-2);
cursor: pointer;
margin: 0;
}
.ta-scope .ta-check input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--brand-600);
cursor: pointer;
}
/* validation summary / status banners */
.ta-banner {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 11px 14px;
border-radius: var(--r-ctl);
border: 1px solid;
font-size: 13.5px;
font-weight: 550;
margin-bottom: 18px;
}
.ta-banner .ta-ic {
font-size: 15px;
margin-top: 2px;
}
.ta-banner-ok {
background: var(--ok-100);
border-color: var(--ok-200);
color: var(--ok-700);
}
.ta-banner-bad {
background: var(--bad-100);
border-color: var(--bad-200);
color: var(--bad-700);
}
/* MVC's ValidationSummary renders - ; flatten it inside a banner */
.ta-scope .ta-banner ul {
margin: 0;
padding: 0;
list-style: none;
}
.ta-scope .ta-banner li {
list-style: none;
}
.ta-scope .ta-banner:empty,
.ta-scope .ta-banner.validation-summary-valid {
display: none;
}
/* ============================================================
5. HOME DASHBOARD
============================================================ */
.ta-statgrid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 16px;
margin-bottom: 22px;
}
.ta-stat {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-panel);
padding: 16px 18px 17px;
box-shadow: var(--sh-1);
}
.ta-stat-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.ta-scope .ta-stat-label {
font-size: 12.5px;
font-weight: 600;
color: var(--text-2);
letter-spacing: -.002em;
margin: 0;
}
.ta-stat-ic {
width: 30px;
height: 30px;
border-radius: var(--r-tile);
display: grid;
place-items: center;
font-size: 16px;
flex: none;
}
.ta-tint-slate {
background: #EBF0F6;
color: #42566D;
}
.ta-tint-warn {
background: var(--warn-100);
color: var(--warn-700);
}
.ta-tint-brand {
background: var(--brand-100);
color: var(--brand-700);
}
.ta-tint-ok {
background: var(--ok-100);
color: var(--ok-700);
}
.ta-scope .ta-stat-num {
font-size: 32px;
font-weight: 680;
letter-spacing: -.03em;
line-height: 1.15;
margin: 8px 0 0;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.ta-scope .ta-stat-note {
font-size: 12.5px;
color: var(--text-3);
margin: 3px 0 0;
}
.ta-homegrid {
display: grid;
grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
gap: 16px;
align-items: start;
}
.ta-scope .ta-actlist {
margin: 0;
padding: 0;
list-style: none;
}
.ta-scope .ta-act {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 18px;
border-bottom: 1px solid var(--line);
list-style: none;
}
.ta-scope .ta-act:last-child {
border-bottom: 0;
}
.ta-ava {
width: 30px;
height: 30px;
border-radius: 50%;
flex: none;
display: grid;
place-items: center;
background: #E7EDF4;
color: #3E5470;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
margin-top: 1px;
}
.ta-ava.ta-is-me {
background: var(--brand-100);
color: var(--brand-700);
}
.ta-act-b {
flex: 1 1 auto;
min-width: 0;
}
.ta-act-t {
font-size: 13.5px;
line-height: 1.5;
}
.ta-act-t b {
font-weight: 650;
}
.ta-act-m {
display: block;
font-size: 12px;
color: var(--text-3);
margin-top: 2px;
}
.ta-scope .ta-act time {
font-size: 12px;
color: var(--text-3);
flex: none;
white-space: nowrap;
margin-top: 2px;
}
.ta-scope .ta-qa {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
padding: 14px 18px;
background: none;
border: 0;
border-bottom: 1px solid var(--line);
color: var(--ink);
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease;
}
.ta-scope .ta-qa:last-child {
border-bottom: 0;
}
.ta-scope .ta-qa:hover, .ta-scope .ta-qa:focus {
background: var(--brand-050);
color: var(--ink);
text-decoration: none;
}
.ta-qa-ic {
width: 34px;
height: 34px;
border-radius: var(--r-tile);
display: grid;
place-items: center;
flex: none;
font-size: 16px;
background: var(--brand-100);
color: var(--brand-700);
transition: background-color .15s ease;
}
.ta-scope .ta-qa:hover .ta-qa-ic {
background: var(--brand-200);
}
.ta-qa-b {
flex: 1 1 auto;
min-width: 0;
}
.ta-qa-t {
display: block;
font-size: 13.5px;
font-weight: 640;
letter-spacing: -.006em;
}
.ta-qa-d {
display: block;
font-size: 12.5px;
color: var(--text-3);
margin-top: 2px;
line-height: 1.45;
}
.ta-qa-arrow {
font-size: 13px;
color: var(--text-3);
flex: none;
transition: transform .15s ease,color .15s ease;
}
.ta-scope .ta-qa:hover .ta-qa-arrow {
transform: translateX(3px);
color: var(--brand-600);
}
/* ============================================================
6. ACTIVATED APPS TABLE
============================================================ */
/* Toolbar: search + program/status filters + live visible count - John - 06/08/2026 */
.ta-toolbar {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.ta-searchbox {
position: relative;
flex: 1 1 260px;
min-width: 220px;
max-width: 340px;
}
.ta-searchbox .ta-ic {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: var(--text-3);
pointer-events: none;
}
.ta-searchbox .ta-input {
padding-left: 34px;
}
.ta-toolbar .ta-select {
width: auto;
min-width: 158px;
flex: 0 0 auto;
}
.ta-toolbar-count {
margin-left: auto;
font-size: 12.5px;
color: var(--text-3);
white-space: nowrap;
}
.ta-toolbar-count b {
color: var(--ink);
font-weight: 650;
}
/* Hide the DataTables built in search box - our own .ta-searchbox input drives the same
table via mydatatable.search(), so there is no need for two search fields. Everything
else Bfrtip renders (length, print button, pagination, info) is untouched - John - 06/08/2026 */
.ta-scope .ta-panel .dataTables_filter {
display: none;
}
@media (max-width:640px) {
.ta-toolbar-count {
margin-left: 0;
}
}
.ta-tablewrap {
overflow-x: auto;
position: relative;
}
@media (min-width:1280px) {
/* so row tooltips are not clipped on desktop */
.ta-tablewrap {
overflow: visible;
}
}
.ta-scope table.ta-data {
width: 100%;
max-width: none;
margin: 0;
border-collapse: collapse;
font-size: 13.5px;
color: var(--ink);
background-color: transparent;
}
.ta-scope table.ta-data thead th {
text-align: left;
font-size: 11.5px;
font-weight: 650;
letter-spacing: .02em;
color: var(--text-3);
padding: 10px 12px;
/* background-color, not the background shorthand: DataTables paints its sort arrows as a
background-image on these cells and the shorthand would wipe them out */
background-color: #F7FAFC;
border: 0;
border-bottom: 1px solid var(--line);
white-space: nowrap;
vertical-align: middle;
}
.ta-scope table.ta-data thead th:first-child {
padding-left: 18px;
}
.ta-scope table.ta-data thead th:last-child {
padding-right: 18px;
text-align: right;
}
.ta-scope table.ta-data tbody td {
padding: 13px 12px;
border: 0;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.ta-scope table.ta-data tbody td:first-child {
padding-left: 18px;
}
.ta-scope table.ta-data tbody td:last-child {
padding-right: 18px;
}
.ta-scope table.ta-data tbody tr {
background-color: transparent;
transition: background-color .13s ease;
}
.ta-scope table.ta-data tbody tr:hover {
background-color: #F8FBFD;
}
.ta-scope table.ta-data tbody tr:last-child td {
border-bottom: 0;
}
.ta-scope .ta-cust {
font-weight: 640;
letter-spacing: -.008em;
font-size: 14px;
color: var(--ink);
text-decoration: none;
}
.ta-scope .ta-cust:hover, .ta-scope .ta-cust:focus {
color: var(--brand-700);
text-decoration: underline;
}
.ta-machine {
font-family: var(--mono);
font-size: 12px;
color: var(--text-2);
letter-spacing: .015em;
white-space: nowrap;
}
.ta-prog {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ta-prog-ic {
width: 24px;
height: 24px;
border-radius: 6px;
display: grid;
place-items: center;
background: #EDF2F7;
color: #42566D;
font-size: 13px;
flex: none;
}
.ta-dt {
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.ta-audit {
font-size: 12.5px;
color: var(--text-2);
}
/* Features column redesign - John - 06/08/2026
The old version stacked every feature name in its own line inside the cell, so a row with
15-20 features (the common case with real program data) grew to 300-400px tall while its
neighbours stayed under 100px, making the whole table look broken. Now only the first two
feature names show as chips; anything past that collapses into a "+N more" chip that opens
a small popover with the full list, so every row keeps a normal, consistent height. */
.ta-feature {
font-size: 12.5px;
color: var(--text-2);
min-width: 220px;
}
.ta-feature-empty {
color: var(--text-3);
}
.ta-feature-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: flex-start;
}
.ta-chip {
display: inline-flex;
align-items: center;
max-width: 150px;
padding: 3px 9px;
border-radius: var(--r-pill);
background: var(--brand-050);
color: var(--brand-700);
font-size: 12px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ta-chip-more {
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--text-2);
cursor: pointer;
font-family: inherit;
}
.ta-chip-more:hover, .ta-chip-more:focus-visible {
border-color: var(--brand-500);
color: var(--brand-700);
}
.ta-feature-more {
position: relative;
display: inline-flex;
}
.ta-feature-pop {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: var(--z-tip);
min-width: 200px;
max-width: 260px;
max-height: 220px;
overflow-y: auto;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-ctl);
box-shadow: var(--sh-pop);
}
.ta-feature-pop-item {
padding: 3px 0;
font-size: 12.5px;
color: var(--ink);
white-space: normal;
}
.ta-feature-pop-item + .ta-feature-pop-item {
border-top: 1px solid var(--line);
}
.ta-rowacts {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
}
/* ---- restyle the controls DataTables generates inside the panel ----
Selectors mirror DataTables 1.10's own chain so we win on specificity
without touching InitDataTable(). */
.ta-scope .ta-panel .dataTables_wrapper {
padding: 0;
position: relative;
}
.ta-scope .ta-panel .dataTables_wrapper .dataTables_length,
.ta-scope .ta-panel .dataTables_wrapper .dataTables_filter {
padding: 14px 18px 12px;
font-size: 12.5px;
color: var(--text-3);
}
/* the mockup puts the search box on the left of the toolbar; DataTables floats it right by default */
.ta-scope .ta-panel .dataTables_wrapper .dataTables_filter {
float: left;
text-align: left;
}
.ta-scope .ta-panel .dataTables_wrapper .dataTables_filter input {
background: #fff;
border: 1px solid var(--line-2);
border-radius: var(--r-ctl);
padding: 8px 12px;
margin-left: 8px;
font-size: 13.5px;
color: var(--ink);
min-width: 220px;
}
.ta-scope .ta-panel .dataTables_wrapper .dataTables_filter input:focus {
outline: none;
border-color: var(--brand-500);
box-shadow: var(--ring);
}
.ta-scope .ta-panel .dataTables_wrapper .dataTables_length select {
background: #fff;
border: 1px solid var(--line-2);
border-radius: var(--r-ctl);
padding: 6px 8px;
font-size: 13px;
color: var(--ink);
}
.ta-scope .ta-panel .dataTables_wrapper .dataTables_info {
padding: 14px 18px;
font-size: 12.5px;
color: var(--text-3);
font-variant-numeric: tabular-nums;
}
.ta-scope .ta-panel .dataTables_wrapper .dataTables_paginate {
padding: 12px 18px;
}
/* DataTables sets colour with !important on these, so we have to match it */
.ta-scope .ta-panel .dataTables_wrapper .dataTables_paginate .paginate_button {
min-width: 32px;
padding: 5px 10px;
margin: 0 2px;
border: 1px solid transparent;
border-radius: var(--r-tile);
background: none;
font-size: 13px;
font-weight: 600;
color: var(--text-2) !important;
}
.ta-scope .ta-panel .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--brand-050);
border-color: var(--brand-100);
color: var(--brand-700) !important;
}
.ta-scope .ta-panel .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.ta-scope .ta-panel .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--brand-600);
border-color: var(--brand-600);
color: #fff !important;
}
.ta-scope .ta-panel .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.ta-scope .ta-panel .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
background: none;
border-color: transparent;
opacity: .4;
color: var(--text-3) !important;
}
/* ============================================================
7. CREATE USER
============================================================ */
.ta-formgrid {
display: grid;
grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
gap: 16px;
align-items: start;
max-width: 940px;
}
.ta-formbody {
padding: 20px 22px 22px;
}
.ta-formbody .ta-field:last-child {
margin-bottom: 0;
}
.ta-formfoot {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 22px;
border-top: 1px solid var(--line);
background: #FAFCFD;
border-radius: 0 0 var(--r-panel) var(--r-panel);
}
.ta-note {
display: flex;
gap: 11px;
padding: 13px 18px;
border-bottom: 1px solid var(--line);
}
.ta-note:last-child {
border-bottom: 0;
}
.ta-note-ic {
color: var(--brand-600);
font-size: 15px;
margin-top: 2px;
flex: none;
}
.ta-scope .ta-note-t {
font-size: 13.5px;
font-weight: 640;
letter-spacing: -.006em;
margin: 0;
color: var(--ink);
}
.ta-scope .ta-note-d {
font-size: 12.5px;
color: var(--text-3);
margin: 2px 0 0;
line-height: 1.5;
}
/* ============================================================
8. FOOTER
============================================================ */
.ta-appfoot {
border-top: 1px solid var(--line);
background: #fff;
flex: none;
}
.ta-appfoot-in {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 16px 24px;
font-size: 12.5px;
color: var(--text-3);
}
.ta-appfoot .ta-mark {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-2);
font-weight: 600;
}
.ta-appfoot .ta-mark .ta-brand-mark {
width: 22px;
height: 22px;
border-radius: 6px;
font-size: 9.5px;
}
/* ============================================================
9. MOTION + RESPONSIVE
============================================================ */
@keyframes taMenuIn {
from {
opacity: 0;
transform: scale(.97) translateY(-4px);
}
to {
opacity: 1;
transform: none;
}
}
.ta-menu {
animation: taMenuIn .15s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion:reduce) {
.ta-scope *, .ta-scope *::before, .ta-scope *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.ta-scope .ta-qa:hover .ta-qa-arrow {
transform: none;
}
}
@media (max-width:1080px) {
.ta-statgrid {
grid-template-columns: repeat(2,1fr);
}
.ta-homegrid {
grid-template-columns: 1fr;
}
.ta-formgrid {
grid-template-columns: 1fr;
}
}
@media (max-width:860px) {
.ta-scope .ta-navtoggle {
display: inline-flex;
}
.ta-mainnav {
position: absolute;
top: 64px;
left: 0;
right: 0;
display: none;
flex-direction: column;
gap: 0;
background: var(--nav);
padding: 8px 14px 14px;
box-shadow: 0 14px 24px -14px rgba(0,0,0,.5);
}
.ta-mainnav.ta-is-open {
display: flex;
}
.ta-scope .ta-mainnav a {
height: auto;
padding: 11px 12px;
border-radius: var(--r-tile);
}
.ta-scope .ta-mainnav a.ta-is-active {
padding-left: 22px;
}
.ta-scope .ta-mainnav a.ta-is-active::after {
left: 12px;
right: auto;
bottom: auto;
top: 50%;
width: 3px;
height: 18px;
transform: translateY(-50%);
border-radius: 3px;
}
.ta-appbar-in {
position: relative;
gap: 12px;
}
.ta-userchip-name {
display: none;
}
.ta-scope .ta-userchip {
padding: 5px;
}
}
@media (max-width:640px) {
.ta-wrap {
padding-left: 16px;
padding-right: 16px;
}
.ta-statgrid {
grid-template-columns: 1fr;
}
.ta-pagehead {
align-items: flex-start;
}
.ta-brand-word {
font-size: 15px;
}
}