itself, not on each -- confirmed live via
getComputedStyle (tr.pol-grid-header had color:white, but its
children showed dark text). The sitewide "table td { color: ... }"
rule (below, BASE/LEGACY section) matches those s directly, and
a direct match always beats an inherited value regardless of the
ancestor rule's specificity, so the tr's white never reached the
text. Targeting the actual s here fixes it for every DataGrid
that uses these header classes (View Employees/Stores/DCS Imports),
not just the one page it was reported on. */
tr.HeaderStyleSortable td,
tr.pol-grid-header td {
color: #faf9f6 !important;
}
.HeaderStyleSortable a,
th.HeaderStyleSortable a {
display: inline;
padding: 0;
background: none;
border: none;
border-radius: 0;
font-weight: 600;
text-transform: uppercase;
color: #faf9f6 !important;
font-family: var(--pol-sans);
font-variant: normal;
font-size: .7rem;
text-decoration: none;
}
.HeaderStyleSortable a:hover,
th.HeaderStyleSortable a:hover {
background: none;
border: none;
color: #f97316;
text-decoration: underline;
}
/* Generic admin list-page card/table/button chrome (9/14/2026) -- reused
across Admin > View Employees / View Stores / View DCS Imports so all
three pick up the same look with minimal markup changes. */
.pol-list-card {
background: var(--pol-surface);
border: 1px solid var(--pol-border);
border-radius: 12px;
padding: 1.4rem;
max-width: 1200px;
box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: #d6d3cd transparent;
}
/* Thin, unobtrusive scrollbar (9/14/2026, per "I don't like the
scroller on the view dcs imports") instead of the browser's
default wide gray scrollbar -- only shows up when a grid is
wider than the card (e.g. View DCS Imports). */
.pol-list-card::-webkit-scrollbar {
height: 6px;
}
.pol-list-card::-webkit-scrollbar-track {
background: transparent;
}
.pol-list-card::-webkit-scrollbar-thumb {
background: #d6d3cd;
border-radius: 4px;
}
.pol-list-card::-webkit-scrollbar-thumb:hover {
background: #a8a29e;
}
/* View DCS Imports has too many columns to fit the standard 1200px
card width even after trimming (9/14/2026, per "we cannot have the
scroller in there") -- --wide drops the width cap so the card can
use the full content area, and --compact tightens cell padding/
font-size so the grid needs less horizontal room in the first
place. Both are additive modifiers on .pol-list-card, opt-in per
page, so View Employees / View Stores are unaffected. */
.pol-list-card--wide {
max-width: none;
}
.pol-list-card--compact table.pol-datagrid td,
.pol-list-card--compact table.pol-datagrid th {
padding: .4rem .5rem;
font-size: .78rem;
box-sizing: border-box;
}
.pol-list-card--compact table.pol-datagrid .HeaderStyleSortable,
.pol-list-card--compact table.pol-datagrid .pol-grid-header {
padding: .5rem .5rem;
font-size: .62rem;
color: #ffffff !important;
}
/* Same tr-vs-td fix as above, scoped to the compact grids
(View DCS Imports) -- see the comment on tr.pol-grid-header td
near the top of this file for why this is needed. */
.pol-list-card--compact table.pol-datagrid tr.HeaderStyleSortable td,
.pol-list-card--compact table.pol-datagrid tr.pol-grid-header td {
color: #ffffff !important;
}
.pol-list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.1rem;
}
.pol-list-filter {
display: flex;
align-items: center;
gap: .6rem;
font-family: var(--pol-sans);
font-size: .85rem;
font-weight: 600;
color: var(--pol-ink2);
}
.pol-list-filter select {
width: auto;
min-width: 200px;
}
a.pol-btn-link {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: .55rem 1.3rem !important;
background: #1c1917 !important;
color: #faf9f6 !important;
border: 1px solid #1c1917 !important;
border-radius: 8px !important;
font-family: var(--pol-sans);
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
a.pol-btn-link:hover {
background: #f97316 !important;
border-color: #f97316 !important;
}
table.pol-datagrid {
border-collapse: separate;
border-spacing: 0;
width: 100%;
font-family: var(--pol-sans);
font-size: .85rem;
color: var(--pol-ink2);
}
table.pol-datagrid td {
padding: .6rem .9rem;
border-bottom: 1px solid var(--pol-border);
}
/* Excluding by class alone wasn't reliable on every grid (the header
row is the DataGrid's first row, rendered with plain cells,
and depending on how the grid renders that class it can land on
the rather than each ) -- excluding the first row
structurally guarantees the header background can never be
overridden by the hover highlight, on any .pol-datagrid grid. */
table.pol-datagrid tr:not(:first-child):hover td {
background: #f5f3ef;
}
table.pol-datagrid a {
color: #f97316;
font-weight: 600;
text-decoration: none;
}
table.pol-datagrid a:hover {
text-decoration: underline;
}
/* ── Edit action button (View Employees / View Stores) ───────────
Changed (9/14/2026, per "change the buttons from blue to black" /
"make it look more uniform") from plain text link to a solid
black pill button, matching the "Add New" button look. */
table.pol-datagrid td.edit-cell a {
display: inline-flex;
align-items: center;
justify-content: center;
background: #1c1917;
color: #faf9f6 !important;
font-weight: 600;
font-size: .78rem;
text-decoration: none !important;
padding: .35rem .9rem;
border-radius: 8px;
transition: background .15s ease;
}
table.pol-datagrid td.edit-cell a:hover {
background: #f97316;
text-decoration: none !important;
}
/* ── Grid action buttons (View DCS Imports: "not found" / "Revert
Post" / "Revert MTD") ──────────────────────────────────────────
Changed (9/14/2026, per "the button colors need to change from
blue to black like everything else") from the sitewide blue
A:not(:has(img)) button look to the same small black pill as the
Edit button above -- applied directly via CssClass="pol-datagrid-btn"
on these HyperLinks (rather than relying on cascade order against
the sitewide rule) so it can't be quietly re-overridden later.
Discrepancies keeps its own inline red style -- that's status
color, not chrome, and is untouched. */
a.pol-datagrid-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
background: #1c1917 !important;
color: #faf9f6 !important;
font-weight: 600;
font-size: .72rem;
text-decoration: none !important;
padding: .3rem .7rem !important;
border-radius: 6px !important;
border: 1px solid #1c1917 !important;
white-space: nowrap;
margin: .1rem;
}
a.pol-datagrid-btn:hover {
background: #f97316 !important;
border-color: #f97316 !important;
}
/* a.pol-datagrid-btn-danger ADDED (9/21/2026, per explicit instruction:
"on the view home page images, please make a delete button that still
keeps it in the database but removes it from this page") -- same shape/
size as a.pol-datagrid-btn, but in the site's existing --pol-red tokens
(already used for validation/error states elsewhere) so a destructive-
looking action reads differently from "Make Active"/"Make Inactive"/
"Preview" at a glance, on top of the confirm() prompt on the button
itself. */
a.pol-datagrid-btn-danger {
display: inline-flex !important;
align-items: center;
justify-content: center;
background: var(--pol-red-bg, #fee2e2) !important;
color: var(--pol-red, #991b1b) !important;
font-weight: 600;
font-size: .72rem;
text-decoration: none !important;
padding: .3rem .7rem !important;
border-radius: 6px !important;
border: 1px solid var(--pol-red-bd, #fca5a5) !important;
white-space: nowrap;
margin: .1rem;
}
a.pol-datagrid-btn-danger:hover {
background: var(--pol-red, #991b1b) !important;
color: #fff !important;
border-color: var(--pol-red, #991b1b) !important;
}
/* Stacks the Actions column's two buttons vertically instead of side
by side (9/14/2026) -- keeps that column as narrow as one button
instead of needing room for both at once. */
.pol-datagrid-btn-stack {
display: flex;
flex-direction: column;
align-items: stretch;
gap: .25rem;
}
/* ── "Add New" style link (Admin > View Documents) ────────────── */
.Links {
font-weight: bold;
font-size: 11pt;
text-transform: uppercase;
color: gray;
text-decoration: none;
}
.SubHeading {
font-weight: normal;
font-size: 12pt;
color: #314d73;
text-decoration: none;
}
.ReportTitle {
font-weight: bold;
font-size: 11pt;
color: #314d73;
text-decoration: none;
}
/* Page title ("Edit Employee", "Enter Sale", etc.) */
.HeaderNew {
font-weight: bolder;
font-family: 'Familjen Grotesk', Arial, 'Times New Roman';
color: #1661A0;
font-size: 25px;
}
/* ═══════════════════════════════════════════════════════════════
LINKS
═══════════════════════════════════════════════════════════════ */
A:not(:has(img)) {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .4rem 1rem;
background: #1661A0;
color: #ffffff;
border: 1px solid #1661A0;
border-radius: 8px;
font-family: 'Familjen Grotesk', Arial, sans-serif;
font-size: 13px;
font-weight: 600;
text-decoration: none;
text-transform: none;
cursor: pointer;
transition: background .12s ease, border-color .12s ease;
}
A:not(:has(img)):hover {
background: #f97316;
border-color: #f97316;
color: #ffffff;
}
A:not(:has(img)):visited {
color: #ffffff;
}
/* Reset GridView/DataGrid links back to plain text links,
overriding the button-style A rule above */
.plain-link-grid a,
.plain-link-grid a:not(:has(img)) {
display: inline;
padding: 0;
background: none;
border: none;
border-radius: 0;
color: #78716c;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-transform: none;
cursor: pointer;
}
.plain-link-grid a:hover,
.plain-link-grid a:not(:has(img)):hover {
background: none;
border: none;
color: #f97316;
text-decoration: underline;
}
/* .text-link ADDED (9/21/2026, per explicit follow-up: "please fix the
look especially with the blue button", re: UploadHomeImage.aspx). Root
cause, confirmed by inspection: EVERY plain tag site-wide gets the
"A:not(:has(img))" blue pill-button treatment above by default unless
something overrides it -- hlinkViewHomeImages sits in the middle of a
sentence on that page and was never meant to look like a standalone
blue call-to-action button, it just had no CssClass to override that
sitewide default with. This resets a link back to plain inline text --
same idea as .plain-link-grid above, just not grid-scoped, for
paragraph copy elsewhere on the site. */
.text-link {
display: inline;
padding: 0;
background: none;
border: none;
border-radius: 0;
color: var(--pol-ink, #1c1917);
font-weight: 600;
text-decoration: underline;
}
.text-link:hover {
background: none;
border: none;
color: #f97316;
}
.text-link:visited {
color: var(--pol-ink, #1c1917);
}
/* ═══════════════════════════════════════════════════════════════
FORM CONTROLS (global defaults)
═══════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea {
width: 80%;
box-sizing: border-box;
font-size: 15px;
color: #111;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 10px;
padding: 10px 14px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
font-family: inherit;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
color: #9ca3af;
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
textarea:hover {
border-color: #9ca3af;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus {
border-color: #f97316;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
textarea {
resize: vertical;
min-height: 90px;
line-height: 1.6;
}
select {
width: 75%;
box-sizing: border-box;
font-size: 15px;
color: #111;
background-color: #fff;
border: 1px solid #d1d5db;
border-radius: 10px;
padding: 10px 36px 10px 14px;
outline: none;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
font-family: inherit;
appearance: none;
-webkit-appearance: none;
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 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
}
select:hover {
border-color: #9ca3af;
}
select:focus {
border-color: #f97316;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
/* ── Modern buttons (generic, site-wide) ─────────────────────── */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
padding: .55rem 1.3rem;
background: #1c1917;
color: #faf9f6;
border: 1px solid #1c1917;
border-radius: 8px;
font-family: 'Familjen Grotesk', Arial, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: .01em;
cursor: pointer;
outline: none;
transition: background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
background: #f97316;
border-color: #f97316;
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
transform: translateY(1px);
box-shadow: 0 1px 1px rgba(0,0,0,.06);
}
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
box-shadow: 0 0 0 3px rgba(249, 115, 22, .3);
}
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled {
background: #d6d3cd;
border-color: #d6d3cd;
color: #78716c;
cursor: default;
box-shadow: none;
transform: none;
}
/* Secondary / low-emphasis button variant — apply with class="btn-secondary"
for lighter actions (e.g. Remove, Pick, Cancel) */
button.btn-secondary,
input.btn-secondary {
background: #faf9f6;
color: #44403c;
border: 1px solid #d6d3cd;
box-shadow: none;
}
button.btn-secondary:hover,
input.btn-secondary:hover {
background: #f5f3ef;
border-color: #a8a29e;
color: #1c1917;
}
/* ── Shared "form-input" class — used to make asp:TextBox and
asp:DropDownList controls match in height/padding/font-size ──── */
.form-input {
box-sizing: border-box;
font-size: 14px;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #fff;
color: #111;
width: 100%;
}
/* ADDED (9/13/2026, per explicit instruction: "grey out MRC if you can't
change it") -- .form-input had no disabled-state styling of its own, so a
disabled control (e.g. txtMRC when Add-A-Line isn't checked -- see
EnterSale.aspx.cs's Enabled tracking) just fell back to the browser's
default disabled look, which isn't very visible in every browser.
STRENGTHENED (9/13/2026, after the plain .form-input:disabled version
wasn't visibly taking effect) -- txtMRC renders as styled as one of this site's
real buttons sits in front of it -- clicking the label opens the native
file picker (standard label-for-input browser behavior; the input
itself never has to render any of its own chrome, so there is no native
button left for any browser to draw in its own color). A small inline
script (see UploadHomeImage.aspx) updates a plain text span with the
chosen file's name, so the person can still see what they picked. */
.file-input-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
label.file-picker-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .55rem 1.3rem;
background: #1c1917;
color: #faf9f6;
border: 1px solid #1c1917;
border-radius: 8px;
font-family: var(--pol-sans, 'Familjen Grotesk', sans-serif);
font-size: 14px;
font-weight: 600;
letter-spacing: .01em;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
label.file-picker-btn:hover {
background: #f97316;
border-color: #f97316;
}
.file-picker-name {
font-family: var(--pol-sans, 'Familjen Grotesk', sans-serif);
font-size: .85rem;
color: var(--pol-ink2, #44403c);
}
/* .date-field-group / .date-input / .date-pick-btn removed (8/25/2026) --
these paired a text input with a JSCal2 "Pick" popup-calendar button.
All three date fields that used them (Add/Edit Employee, Enter Sale) now
use native attempt (tried and removed above -- see git
history / the prior file version if it's ever needed again) didn't
visibly change anything.
Root cause: tblSale is ONE shared HTML table across every section
(identity: 4 cells, transaction: 2-then-3 cells), and a plain HTML table
computes column widths across ALL its rows together. Putting flex
directly on the flags was still fighting that table layout engine,
since the row stayed nested inside --
confirmed not to have visibly changed anything. The actual fix: the
flags row's markup (EnterSale.aspx) was changed from 7 TableCells to a
SINGLE spanning TableCell containing this plain nested .sale-flags-row
div -- so the table's column-width algorithm only ever sees one cell
here, with nothing left for it to spread unevenly, and these rules lay
out the 7 checkboxes entirely ourselves. */
.sale-flags-row {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
/* CHANGED (9/1/2026, per explicit instruction: "adjust spacing between
to fit the whole box") from a fixed 48px gap (which left the row
clustered on the left with empty space after "Ship To") to
space-between + width: 100% -- the 7 items now spread out to use the
full width of the box, with gap kept as a floor so they never sit
closer than 24px together if the box gets narrow. */
justify-content: space-between;
gap: 24px;
width: 100%;
}
.sale-flags-item {
flex: 0 0 auto;
}
.sale-flags-item .sale-field-label {
color: var(--pol-amber);
}
.sale-section-transaction {
background: var(--pol-green-bg);
}
.sale-section-transaction td {
padding: 14px 16px !important;
}
.sale-section-transaction .sale-field-label {
color: var(--pol-green);
}
.sale-field-label {
display: block;
font-family: var(--pol-sans);
font-size: .78rem;
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--pol-ink2);
margin-bottom: 6px;
white-space: nowrap;
}
.sale-required {
color: var(--pol-red);
}
/* ADDED (9/9/2026, per explicit instruction: put a "?" icon next to the
P360 Sold checkbox with an explanatory tooltip). Plain native title=""
tooltip rather than a Bootstrap/JS tooltip component -- no re-init needed
after UpdatePanel partial postbacks (unlike select2 elsewhere on this
page), since it's just a static HTML attribute. */
.sale-help-icon {
box-sizing: border-box;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: 4px;
border-radius: 50%;
border: 1.5px solid var(--pol-ink2);
color: var(--pol-ink2);
font-size: .68rem;
font-weight: 700;
line-height: 1;
cursor: help;
user-select: none;
}
/* ADDED (9/13/2026, per explicit instruction: as soon as an Account Number
is typed on Enter Sale, show any other transaction under that account
number for that Activation Date above the box, summarized with a revenue
total). Kept visually small/quiet -- var(--pol-surface)/border tokens
already used elsewhere on this page (see .sale-notes-section below) --
since this is an informational aid, not a validation error. */
.sale-account-summary {
background: var(--pol-surface);
border: 1px solid var(--pol-border);
border-radius: 4px;
padding: 8px 10px;
margin-bottom: 6px;
font-size: .85rem;
}
.sale-account-summary-header {
font-weight: 600;
margin-bottom: 4px;
}
.sale-account-summary-list {
margin: 0;
padding-left: 18px;
}
.sale-section-divider {
height: 1px;
background: var(--pol-border);
border: none;
margin: 10px 0;
}
.sale-notes-section {
background: var(--pol-surface);
padding: 16px;
}
.sale-submit-row {
padding: 16px !important;
}
/* select2 (Plan Code dropdown) height/font match to .form-input ADDED
(9/21/2026, per explicit instruction: "make the enter sale more mobile
friendly"). Confirmed by direct inspection: select2 had ZERO CSS rules
anywhere in this stylesheet before this, so it was rendering at its own
default ~13px font/28px height, out of step with every other field on
this form (which are all 14px via .form-input, and bumped to 16px on
mobile below) -- and a sub-16px focusable text input is exactly what
triggers iOS Safari's auto-zoom-on-focus, which the rest of this form
was already deliberately avoiding (see .sale-form-table .form-input in
the mobile block below). This just brings select2's rendered box and
its dropdown search field in line with that same standard. */
.sale-form-table .select2-container {
width: 100% !important;
}
.sale-form-table .select2-container .select2-selection--single {
height: auto;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 10px;
}
.sale-form-table .select2-container .select2-selection--single .select2-selection__rendered {
line-height: normal;
padding: 0;
font-size: 14px;
color: #111;
}
.sale-form-table .select2-container .select2-selection--single .select2-selection__arrow {
height: 100%;
}
.select2-dropdown .select2-search__field {
font-size: 14px;
}
/* ── Mobile (9/14/2026, per explicit instruction: "we need to make the
enter sale more mobile friendly") ──────────────────────────────────
tblSale (EnterSale.aspx) is one plain HTML table using ColumnSpan to
lay 2-4 fields side by side per row (Store/Employee/Activation Date/
Account Number, Transaction Type/Activity Type, Phone/Plan Code/MRC).
A browser can only shrink a table's columns so far before the fields
themselves become too narrow to use -- there's no point where a plain
"reflows"; it just keeps squeezing every
cell into the same row. Below the phone breakpoint already used
elsewhere on this site (see LOGIN / UNSECURED SHELL's max-width:600px
above), every table/tr/td in this specific table is switched to
display:block so each field becomes its own full-width stacked row
instead -- same technique used for the DCS Imports column-width fix
earlier, applied here to get a real single-column mobile form rather
than a squeezed table. Only .sale-form-table is targeted (by class),
so no other grid/table on the site is affected. */
@media (max-width: 600px) {
.sale-form-card {
padding: 1rem;
}
.sale-form-table,
.sale-form-table tbody,
.sale-form-table tr,
.sale-form-table td {
display: block;
width: 100% !important;
}
/* td:first-child/:last-child (above) still resolve correctly once
stacked -- they're based on DOM position, not visual column -- so
each color-banded section keeps rounded top/bottom corners as one
stacked group instead of a row. */
.sale-section-identity td,
.sale-section-flags td,
.sale-section-transaction td {
padding: 12px 16px !important;
}
/* Empty filler