/* www3 shared look (billing, help desk, mis, ops, partners, United).
   Colors and sizes are variables here; dark mode overrides them below. */

:root {
    --accent: #F26C36;
    --accent-hover: #E25A23;
    --accent-soft: rgba(242, 108, 54, 0.12);
    --accent-ring: rgba(242, 108, 54, 0.28);
    /* light = homepage concept E (warm ivory, never pure white — Clancy 2026-10-04) */
    --page-bg: #F3EFE7;
    --card-bg: #EAE4D9;
    --field-bg: #F8F5EF;
    --border: #D8D0C2;
    --border-strong: #C6BCAB;
    --text-primary: #1F1C18;
    --text-secondary: #5C574F;
    --text-muted: #8A847A;
    --edit-btn-text: rgba(42, 42, 38, 0.75);
    --tint-warning: rgba(230, 180, 30, 0.15);
    --text-warning: #8A6D1A;
    --tint-danger: rgba(220, 70, 70, 0.15);
    --text-danger-tint: #A83232;
    --shadow-sm: 0 1px 2px rgba(20, 18, 14, 0.06);
    --shadow-md: 0 1px 2px rgba(20, 18, 14, 0.05), 0 6px 18px -8px rgba(20, 18, 14, 0.14);
    --shadow-lg: 0 2px 4px rgba(20, 18, 14, 0.06), 0 18px 40px -16px rgba(20, 18, 14, 0.28);
    --radius: 10px;
    --radius-lg: 14px;
    --ease: cubic-bezier(.2, .7, .3, 1);
    --font-scale: 1;
}

[data-theme="dark"] {
    --accent-hover: #FF7D4A;
    --accent-soft: rgba(242, 108, 54, 0.16);
    --accent-ring: rgba(242, 108, 54, 0.35);
    --page-bg: #121416;
    --card-bg: #1A1D21;
    --field-bg: #14171A;
    --border: #2A2E34;
    --border-strong: #3A3F47;
    --text-primary: #ECEAE5;
    --text-secondary: #A9A59D;
    --text-muted: #7A766F;
    --edit-btn-text: rgba(255, 255, 255, 0.75);
    --tint-warning: rgba(230, 180, 30, 0.15);
    --text-warning: #E6C85A;
    --tint-danger: rgba(220, 70, 70, 0.18);
    --text-danger-tint: #E08080;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px -10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 22px 48px -18px rgba(0, 0, 0, 0.75);
}

html {
    font-size: calc(24px * var(--font-scale));
}

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    background: var(--page-bg);
    color: var(--text-primary);
    color-scheme: light;
}

[data-theme="dark"] body {
    color-scheme: dark;
}

.page-center {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 2rem 1rem;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.5rem 1.5rem;
    width: 280px;
}

.controls-row {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 12px;
}

.font-size-group {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.font-size-group button {
    border: none;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    padding: 3px 8px;
    cursor: pointer;
}

.font-size-group button:first-child {
    border-left: none;
}

.font-size-group button.active {
    background: var(--border);
    color: var(--text-primary);
}

.theme-toggle {
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 6px;
    padding: 3px 8px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
}

label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 4px;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    background: var(--field-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.9375rem;
    margin-bottom: 12px;
}

input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: var(--accent);
}

.btn-primary {
    width: 100%;
    background: var(--accent);
    color: #FBF6EF;
    border: none;
    border-radius: 6px;
    padding: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-primary:hover {
    opacity: 0.92;
}

.btn-primary-sm {
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    vertical-align: middle;
    line-height: normal;
    margin: 0;
    background: var(--accent);
    color: #FBF6EF;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
}

button.btn-primary-sm::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.btn-secondary-sm {
    background: var(--border-strong);
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary-sm:hover {
    opacity: 0.92;
}

.detailGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.detailCardHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.detailCardHeader h3 {
    font-size: 0.8125rem;
    font-weight: 500;
    margin: 0;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.viewToggleBtn {
    border: 1px solid var(--border-strong);
    background: var(--border-strong);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.navJumpBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-strong);
    background: var(--border-strong);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    margin-right: 4px;
}

.navJumpBtn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.viewToggleBtn.active {
    border: 1px solid var(--accent);
    background: rgba(242, 108, 54, 0.18);
    color: var(--accent);
}

.editBtn {
    border: 1px solid rgba(242, 108, 54, 0.4);
    background: rgba(242, 108, 54, 0.12);
    color: var(--edit-btn-text);
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
}

.editBtn:hover {
    background: rgba(242, 108, 54, 0.22);
    border-color: var(--accent);
}

.detailRow {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
}

.detailRow:last-child {
    border-bottom: none;
}

.topActionsBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.topActionsBar .custHeading {
    font-size: 1rem;
    font-weight: 500;
}

.detailLabel {
    color: var(--text-secondary);
}

.detailValue {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}

.detailActions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.rowLine {
    display: grid;
    grid-template-columns: auto 3ch 200px 1fr 50px 150px 140px;
    align-items: center;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
    text-align: left;
}

.rowLine:last-child {
    border-bottom: none;
}

.rowNum {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.rowName {
    text-align: left;
}

.rowAddress {
    text-align: left;
    color: var(--text-secondary);
}

.rowBr,
.rowContact,
.rowTel {
    text-align: left;
    color: var(--text-secondary);
}

.moveRowLine {
    display: grid;
    grid-template-columns: 46px 3ch 1fr max-content 3ch 1fr 90px 100px;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
    text-align: left;
}

.moveRowLine:last-child {
    border-bottom: none;
}

.moveRowNum {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.moveRowName {
    text-align: left;
}

.moveRowAmt {
    text-align: right;
}

.rowLine:nth-child(even),
.moveRowLine:nth-child(even) {
    background: var(--page-bg);
}

.modalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modalBox {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    width: 480px;
    max-width: 90%;
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
}

select {
    width: 100%;
    box-sizing: border-box;
    background: var(--field-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.9375rem;
    margin-bottom: 12px;
}

select:focus {
    outline: none;
    border-color: var(--accent);
}

input:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rowGroupHeader {
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 0;
}

.statusGroupSuspended > summary {
    background: var(--tint-warning);
    color: var(--text-warning);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 8px;
}

.statusGroupTerminated > summary {
    background: var(--tint-danger);
    color: var(--text-danger-tint);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 8px;
}

.backLink {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.backLink:hover {
    color: var(--text-primary);
}

.error-message {
    font-size: 0.8125rem;
    color: #C0392B;
    margin: 0 0 12px;
}

.topBar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
    box-sizing: border-box;
}

.topBar .appName {
    font-weight: 500;
    font-size: 0.9375rem;
}

.navCenter {
    display: flex;
    justify-content: center;
}

.topBar .rightGroup {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.topBar .userName {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.topBar .signOutLink {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.topBar .signOutLink:hover {
    color: var(--text-primary);
}

.menuGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    max-width: 700px;
    margin: 48px auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.menuCard {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 0 28px;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9375rem;
    display: block;
    overflow: hidden;
}

.menuCard:hover {
    border-color: var(--accent);
}

.menuCardAccent {
    height: 4px;
    background: var(--accent);
    margin-bottom: 24px;
}
/* header row of a rowLine / moveRowLine list */
.rowLine.rowHead,
.moveRowLine.rowHead {
    border-bottom: 1px solid var(--border-strong);
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.75rem;
    background: transparent;
}


/* ========== refinements: font, buttons, fields, depth, motion ========== */

/* ---------- base ---------- */

body {
    font-family: Inter, -apple-system, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -0.005em;
}

h1, h2, h3, h4 { letter-spacing: -0.015em; }

a { transition: color .15s var(--ease); }

::selection { background: var(--accent-ring); }

/* ---------- cards ---------- */

.card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.page-center .card {
    width: 320px;
    padding: 1.1rem 1.6rem 1.6rem;
    box-shadow: var(--shadow-lg);
}

.page-center .card h3 { font-weight: 600; }

/* ---------- top bar ---------- */

.topBar {
    position: sticky;
    top: 0;
    z-index: 50;
    /* solid, no backdrop blur (2026-10-21): the blur was redrawn on every scroll, heavy for Chrome on the terminal server (Aw, Snap) */
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.topBar .appName {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* every app's name top left (TRICOR, Customer, Cost Control, POD ...): the homepage logo's typeface */
.topBar .appName {
    font-family: "Space Grotesk", Inter, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;   /* CUSTOMER, COST CONTROL ... (the name itself stays as written) */
}

.topBar .userName { font-weight: 500; }

/* ---------- buttons: one system, variants only change color ---------- */

.btn-primary,
.btn-primary-sm,
.btn-secondary-sm,
.editBtn,
.viewToggleBtn,
.navJumpBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
    border-radius: 8px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease),
                box-shadow .15s var(--ease), transform .12s var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:focus-visible,
.btn-primary-sm:focus-visible,
.btn-secondary-sm:focus-visible,
.editBtn:focus-visible,
.viewToggleBtn:focus-visible,
.navJumpBtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.btn-primary:active,
.btn-primary-sm:active,
.btn-secondary-sm:active,
.editBtn:active,
.viewToggleBtn:active,
.navJumpBtn:active {
    transform: translateY(1px);
}

/* primary (big, full width on forms) */
.btn-primary {
    display: flex;
    width: 100%;
    min-height: 2.1em;
    padding: 0 1em;
    font-size: 0.9375rem;
    background: var(--accent);
    color: #FBF6EF;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-primary:hover {
    opacity: 1;
    background: var(--accent-hover);
    box-shadow: 0 4px 12px -4px rgba(242, 108, 54, 0.55);
}

/* small primary + secondary share size */
.btn-primary-sm,
.btn-secondary-sm {
    min-height: 1.85em;
    padding: 0 0.9em;
    font-size: 0.8125rem;
    border: 1px solid transparent;
}

.btn-primary-sm {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.btn-primary-sm:hover {
    opacity: 1;
    background: var(--accent);
    color: #FBF6EF;
    box-shadow: 0 4px 12px -4px rgba(242, 108, 54, 0.55);
}

.btn-secondary-sm {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.btn-secondary-sm:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* edit: soft orange chip, same family */
.editBtn {
    min-height: 1.5em;
    padding: 0 0.75em;
    font-size: 0.75rem;
    background: var(--accent-soft);
    border: 1px solid transparent;
    color: var(--text-primary);
}

.editBtn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #FBF6EF;
}

/* toggles + jump letters */
.viewToggleBtn {
    min-height: 1.65em;
    padding: 0 0.8em;
    font-size: 0.75rem;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
}

.viewToggleBtn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.viewToggleBtn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.navJumpBtn {
    width: 1.5em;
    height: 1.5em;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    margin-right: 6px;
}

.navJumpBtn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* header controls match the buttons */
.font-size-group {
    border-color: var(--border-strong);
    border-radius: 8px;
    background: var(--card-bg);
}

.font-size-group button {
    border-left-color: var(--border-strong);
    font-family: inherit;
    font-weight: 600;
    min-height: 2em;
    padding: 0 0.6em;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}

.font-size-group button:hover { color: var(--text-primary); }

.font-size-group button.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.theme-toggle {
    border-color: var(--border-strong);
    border-radius: 8px;
    background: var(--card-bg);
    min-height: 2em;
    padding: 0 0.6em;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}

.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- form fields ---------- */

label {
    font-weight: 500;
    color: var(--text-secondary);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
textarea,
select {
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background-color: var(--field-bg);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 0.4em 0.6em;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
    border-color: var(--text-muted);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2396938B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8em center;
    background-size: 0.65em auto;
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
    width: 1.05em;
    height: 1.05em;
    cursor: pointer;
}

::placeholder { color: var(--text-muted); opacity: 1; }

/* ---------- lists, rows, tables ---------- */

.rowLine,
.moveRowLine,
.detailRow {
    transition: background-color .12s var(--ease);
}

.rowLine:not(.rowHead):hover,
.moveRowLine:not(.rowHead):hover {
    background: var(--accent-soft);
}

th {
    font-weight: 600;
    color: var(--text-secondary);
}

.detailCardHeader h3 {
    font-weight: 600;
    letter-spacing: 0.06em;
}

.statusGroupSuspended > summary,
.statusGroupTerminated > summary {
    border-radius: 8px;
    font-weight: 600;
    transition: filter .15s var(--ease);
}

.statusGroupSuspended > summary:hover,
.statusGroupTerminated > summary:hover {
    filter: brightness(0.97);
}

/* ---------- modals ---------- */

.modalOverlay {
    background: rgba(10, 10, 12, 0.45);
    animation: lookFade .15s var(--ease);
}

.modalBox {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: lookPop .18s var(--ease);
}

@keyframes lookFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lookPop { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- portal cards ---------- */

.menuGrid { gap: 18px; }

.menuCard {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    font-weight: 600;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.menuCard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}

.menuCardAccent {
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #FF9A6B);
}

/* ---------- messages ---------- */

.error-message {
    background: var(--tint-danger);
    color: var(--text-danger-tint);
    border-radius: 8px;
    padding: 0.6em 0.8em;
}

.error-message a { color: inherit; font-weight: 600; }

/* ---------- scrollbars ---------- */

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- shared chrome ---------- */

.topBarLeft { display: flex; align-items: center; gap: 14px; }
.font-size-group button[data-size="big"] { font-size: 14px; }
.font-size-group button[data-size="biggest"] { font-size: 16px; }
.page-center .card h3 { margin: 0 0 12px; }

/* portal pages (ops, partners) */
.portal { max-width: 1000px; margin: 40px auto; padding: 0 16px; }
.portalHead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.portalHead h3 { margin: 0; }
.portalUser { display: flex; gap: 12px; align-items: center; }

[data-theme="dark"] .menuCard { color: #D2CEC6; }

/* top bar clock (every page: templates/header.php, partner portal) */
.navCenter { align-items: center; }
.topClock { font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; }
.navCenter .topClock { text-align: center; } /* the clock is the top bar's middle */

/* Staff sign-in (/ops/login.php): the homepage logo centered over the card */
.page-center.loginStack { flex-direction: column; gap: 22px; }
/* Two equal columns (logo + TRICOR | LOGISTICS): the space between the two words is the exact
   centre of the page, whatever each side's width. TRICOR's trailing letter-spacing is taken back
   so the visible gap is just the column gap. */
.loginBrand { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: center;
    font-family: "Space Grotesk", Inter, sans-serif; font-size: 25px; letter-spacing: 0.12em; color: var(--text-primary); }
.loginBrandLeft { display: flex; align-items: center; gap: 12px; justify-self: end; }
.loginBrand svg { width: 42px; height: 42px; flex: none; }
.loginBrand b { font-weight: 700; margin-right: -0.12em; }
.loginBrand > span:last-child { font-weight: 500; color: var(--text-secondary); }
/* Staff sign-in in December: tree + Happy Holidays centred between the top of the page and the logo (logo + card don't move) */
.loginXmas { position: absolute; top: 0; left: 0; right: 0; height: calc(50vh - 200px); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.loginXmasPair { display: flex; align-items: flex-end; gap: 18px; }
.loginXmas .xmasTree { display: block; width: 72px; height: 139px; }
.loginXmas .xmasWords { display: block; width: 260px; height: auto; margin-bottom: 10px; }
@media (max-height: 760px), (max-width: 480px) { .loginXmas { display: none; } }

/* Bill pages: airline panel for one airbill (public/assets/js/airbillCheck.js) */
a.abCheck { color: var(--accent); text-decoration: none; }
a.abCheck:hover { text-decoration: underline; }
.abBox { width: 520px; }
.abHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; cursor: move; user-select: none; }
.abHead h3 { margin: 0; font-variant-numeric: tabular-nums; }
.abTable { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-bottom: 14px; }
.abTable th { text-align: left; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.abTable td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.abTable .n { text-align: right; font-variant-numeric: tabular-nums; }
.abTable tr.abDiff td { color: var(--text-danger-tint); font-weight: 600; }
.abInfo { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; font-size: 0.8125rem; }
.abInfo dt { color: var(--text-secondary); }
.abInfo dd { margin: 0; }
.abEvents { width: 100%; border-collapse: collapse; font-size: 0.75rem; color: var(--text-secondary); }
.abEvents td { padding: 2px 6px; border-top: 1px solid var(--border); white-space: nowrap; }
.abNote, .abWait { font-size: 0.8125rem; color: var(--text-secondary); }
.abErr { font-size: 0.8125rem; color: var(--text-danger-tint); }

/* × inside Filter / Search boxes (preferences.js) */
.clearWrap { position: relative; display: inline-block; max-width: 100%; }
.clearWrap > input { padding-right: 1.8em; }
.clearX { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: none; padding: 0 4px;
    color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; }
.clearX:hover { color: var(--text-primary); }
.clearX[hidden] { display: none; }
.clearWrapFull { display: block; }
.clearWrapFull > input { width: 100%; box-sizing: border-box; }

/* Working as a receipt (domain/air/receipt.php): one step per line, amounts lined up right,
   total in bold under a rule; in the opposite stripe colour of its row. Opened by clicking
   the amount (td.calcOpen) on Cost Control → Airline / Customer. */
td.calcOpen { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
td.calcOpen.isOpen { color: var(--accent); }
.receipt { display: inline-block; vertical-align: top; text-align: left; margin: 6px 6px 0; padding: 8px 14px; min-width: 300px;
    border-radius: 6px; border: 1px solid var(--border); background: var(--page-bg); font-size: 0.8125rem; line-height: 1.6; white-space: normal; }
tr.ccStripe .receipt, tr.airStripe .receipt { background: var(--card-bg); }
.rcHead { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); margin-bottom: 2px; }
.rcRow { display: flex; justify-content: space-between; gap: 28px; }
.rcAmt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcTotal { font-weight: 700; border-top: 1px solid var(--border-strong); margin-top: 4px; padding-top: 4px; }
.rcNote { font-weight: 400; color: var(--text-secondary); }

/* ---------- tables ---------- */
/* Every data table sits in a .tableBox. preferences.js sizes the boxes to the window (max-height only,
   so a short table never scrolls); this max-height is just the fallback before it runs. */
.tableBox { overflow: auto; max-height: calc(100vh - 160px); }
.tableBox thead th { position: sticky; top: 0; z-index: 1; background: var(--card-bg); }
/* Tables fill their card (never narrower than their columns need; wider = the box scrolls), nothing
   wraps. The page (tablePage) is as wide as its widest thing, so every table on it lines up with the card.
   A box marked keepLayout is left to its own page CSS (entry tables with inputs in the cells; Cron). */
.tableBox:not(.keepLayout) table { width: 100%; table-layout: auto; }
.tableBox:not(.keepLayout) th, .tableBox:not(.keepLayout) td { white-space: nowrap; }
/* Long free text (notes, descriptions): wraps at a set text width instead of stretching the table. */
.tableBox td.wrapText { white-space: normal; width: 26em; min-width: 26em; }

/* A page with tables: its wrapper gets tablePage. As wide as the widest thing on it, up to a 1920 screen's
   window (1870px, grows with the text size). A narrower window folds nothing: the browser scrolls sideways.
   body + class so it beats each app's own wrapper width. */
body .tablePage { box-sizing: border-box; width: max-content; min-width: 0; max-width: calc(1870px * var(--font-scale));
    margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
/* tableFixed: the page is the full window (up to the same cap) whatever is in it, so its card and table keep
   their place and width when the data changes (Customer bills: switching branch / date / airline). */
body .tablePage.tableFixed { width: 100%; }

/* under the top bar, centred: the page's back link (preferences.js moves it here) + billing's letter buttons; hidden when empty */
.subBar { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 8px 16px 0; }
.subBar:empty { display: none; }
.subBar .topBack { display: inline-block; margin-right: 8px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; }
.subBar .topBack:hover { border-color: var(--accent); color: var(--text-primary); }

/* Every page: the Tricor logo big and faint, fixed in the middle of the window, under everything (cards and
   tables cover it where they are, it shows in the gaps). Mockup www/html/homepageConcepts/f-portal-watermark.html:
   orange, 5%, page centre. It sits at z-index -1 on the page background: the page colour is on <html>, so
   <body> is see-through and nothing on the page has to be lifted above it. Not printed. */
html { background: var(--page-bg); }
body { background: transparent; }
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    /* tricorMarkFaint.png = tricorMark1024.png already faded to 5% (2026-10-21), so Chrome doesn't fade a full-window layer live */
    background: url("/assets/img/tricorMarkFaint.png") center / auto 62vh no-repeat;
}
body.noMark::before { display: none; } /* login pages: the logo is only once signed in */
@media print { body::before { display: none; } }