/* =========================================================================
   MMTAX Admin — Theme.css
   Light, modern back-office skin. Loaded LAST (after the AdminCSS bundle,
   jQuery UI theme and Font Awesome) so it can override the legacy classes
   used by every admin page without touching page markup.
   ========================================================================= */

:root {
    --bg-page: #f8fafc;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --row-divider: #f1f5f9;
    --surface: #f8fafc;
    --card-radius: 14px;
    --card-shadow: 0 1px 2px rgba(20, 30, 50, .04), 0 4px 16px rgba(20, 30, 50, .05);
    --pop-shadow: 0 10px 32px rgba(24, 24, 27, .12), 0 2px 6px rgba(24, 24, 27, .06);

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-soft: #475569;
    --text-tertiary: #475569;
    --text-subtle: #64748b;
    --text-faint: #cbd5e1;

    /* accent = logo leaf green; links = logo "TAX" blue, one step darker for contrast */
    --accent: #0b7c3f;
    --accent-hover: #096a35;
    --accent-focus: #0a6b36;
    --accent-soft: #e6f4ec;
    --accent-soft-hover: #d6ede0;
    --accent-soft-border: #b9dfc6;
    --link: #056a9c;
    --link-hover: #03557d;

    --brand-green: #0b7c3f;      /* logo leaf + "MM" */
    --brand-green-dark: #096a35;
    --brand-green-soft: #e6f4ec;
    --brand-green-border: #b9dfc6;
    --brand-blue: #037db8;       /* logo "TAX" */

    --control-border: #cbd5e1;
    --control-bg: #ffffff;
    --nav-hover-bg: #f1f5f9;
    --nav-active-bg: #eef2f7;

    --side-w: 228px;             /* left navigation width */
    --top-h: 48px;               /* top bar height */

    --danger-bg: #fef2f2; --danger-border: #fecaca; --danger-text: #b91c1c;
    --warn-bg: #fffbeb;   --warn-border: #fde68a;   --warn-text: #92400e;
    --info-bg: #f0f9ff;   --info-border: #bae6fd;   --info-text: #075985;
    --ok-bg: #ecfdf5;     --ok-border: #a7f3d0;     --ok-text: #047857;

    --badge-warning-bg: #fef3c7; --badge-warning-text: #92400e;
    --badge-danger-bg: #fee2e2;  --badge-danger-text: #991b1b;
    --badge-success-bg: #d1fae5; --badge-success-text: #065f46;
    --badge-neutral-bg: #f1f5f9; --badge-neutral-text: #334155;

    /* named so CSS/Modes.css can give them Dusk / Night values; in Light they are the colours these rules always had */
    --on-accent: #ffffff;        /* text and icons on a solid accent fill */
    --surface-raised: #ffffff;   /* white boxes: secondary buttons, chips, the search box */
    --pop-bg: #ffffff;           /* menus, popovers, dialogs */
    --row-alt: #fbfcfd;          /* striped rows, past days */
    --row-hover: #fbfbfb;
    --hover-tint: rgba(24, 24, 27, .06);   /* hover wash on small icon buttons */
    --focus-glow: rgba(11, 124, 63, .12);
    --bar-bg: #18181b; --bar-text: #ffffff; --bar-muted: #d4d4d8; --bar-dim: #a1a1aa; --bar-hover: rgba(255, 255, 255, .12);   /* toasts, the bulk bar */
    /* file-type pills: T2 green, T4/T4A/T5 teal, T1 blue, tasks violet */
    --tag-t2-bg: #dbf2e2; --tag-t2-text: #185f37;
    --tag-t4-bg: #d5f2ee; --tag-t4-text: #0b5b54;
    --tag-t1-bg: #dfeafd; --tag-t1-text: #184e9e;
    --tag-task-bg: #ece4fd; --tag-task-text: #4f2d99;

    /* background icons as tokens, so Modes.css recolours them only where light shows them: a dark rule that set the
       image itself would bring it back, tiled, on boxes whose own background shorthand clears it (disabled selects) */
    --icon-select: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --icon-date: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
    --icon-search: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
    --icon-crumb: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2397a4b3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");

    --font: "Roboto", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --radius-ctl: 8px;
    --ctl-h: 30px;               /* boxes and buttons: compact - 34px read oversized on 27" 1080p screens at 125% */

    /* the whole admin is drawn at this size, as if the browser were zoomed to 90% (the user's choice, 2026-10-26:
       80% read too small); Scripts/AppZoom.js reads it and keeps script-placed popups and drag helpers in line. 1 turns it off. */
    --app-zoom: .9;
}

/* ---------- base ---------- */
html { color-scheme: light; }
body { zoom: var(--app-zoom); }
/* under zoom, 100vh is scaled too: heights tied to the window divide by the zoom to still fill it */
html, body {
    background: var(--bg-page);
    color: var(--text-soft);
    font-family: var(--font);
    font-size: 12.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }
a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--text-primary); font-weight: 600; margin: 0; line-height: 1.3; }
label { font-weight: 400; margin-bottom: 0; color: var(--text-secondary); }
img { vertical-align: middle; }
hr { border-top: 1px solid var(--card-border); margin: 16px 0; }
b, strong { font-weight: 600; }
::selection { background: var(--accent-soft-border); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-faint); border-radius: 8px; border: 2px solid var(--bg-page); }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ---------- application chrome: left navigation + top bar ---------- */
#wrapper { background: var(--bg-page); }
#wrapper.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh / var(--app-zoom)); }
.app-main { min-width: 0; display: flex; flex-direction: column; }

/* left navigation: Lucide line icons, compact rows, neutral active row with a green marker, sub-menus on a guide line */
.side {
    position: sticky; top: 0; height: calc(100vh / var(--app-zoom)); z-index: 1001; display: flex; flex-direction: column; min-height: 0;
    background: var(--card-bg); border-right: 1px solid var(--card-border); overflow: hidden;
}
.side-brand { display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 16px; border-bottom: 1px solid var(--card-border); flex: none; color: var(--text-primary) !important; text-decoration: none !important; }
.side-brand img { height: 28px; width: auto; flex: none; }
.side-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.side-brand-text b { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--brand-green); }
.side-brand-text b em { font-style: normal; color: var(--brand-blue); }
.side-brand-text span { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 16px; }
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: transparent; border: 0; }
.side-nav:hover::-webkit-scrollbar-thumb { background: var(--text-faint); }
.side-menu, .side-sub { list-style: none; margin: 0; padding: 0; }
.side-menu > li { margin: 0 0 2px; }
.side-label { font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); padding: 16px 10px 6px; white-space: nowrap; }
.side-menu > li.side-label:first-child { padding-top: 8px; }
.side-item {
    position: relative; display: flex !important; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 10px !important; margin: 0; border: 0; border-radius: 8px !important;
    background: transparent !important; color: var(--text-secondary) !important; font: 500 12.5px/1 var(--font) !important; text-align: left; white-space: nowrap; text-decoration: none !important; cursor: pointer;
    min-height: 0; box-shadow: none; transition: background-color .12s, color .12s;
}
.side-item > i:first-child { width: 16px; text-align: center; font-size: 16px; color: var(--text-tertiary); flex: none; transition: color .12s; }
.side-item > span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.side-item:hover { background: var(--nav-hover-bg) !important; color: var(--text-primary) !important; }
.side-item:hover > i:first-child { color: var(--text-primary); }
.side-item.on { background: var(--nav-active-bg) !important; color: var(--text-primary) !important; font-weight: 600 !important; }
.side-item.on > i:first-child { color: var(--accent); }
.side-item.on::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.side-group.has-on > .side-item { color: var(--text-primary) !important; }
.side-group.has-on > .side-item > i:first-child { color: var(--accent); }
.side-chev { margin-left: auto; font-size: 14px !important; color: var(--text-subtle); transition: transform .18s ease; }
.side-group.open > button > .side-chev { transform: rotate(180deg); }
.side-sub { display: none; margin: 2px 0 6px 18px; padding: 0 0 0 9px; border-left: 1px solid var(--card-border); }
.side-group.open > .side-sub { display: block; }
.side-sub li { list-style: none; margin: 0 0 1px; }
.side-sub a, .side-subtoggle {
    position: relative; display: flex !important; align-items: center; gap: 8px; width: 100%; min-height: 28px; height: auto; padding: 5px 10px !important; margin: 0; border: 0; border-radius: 6px !important;
    background: transparent !important; color: var(--text-soft) !important; font: 400 12.5px/1.3 var(--font) !important; text-align: left; text-decoration: none !important; cursor: pointer; box-shadow: none;
    transition: background-color .12s, color .12s;
}
.side-sub a:hover, .side-subtoggle:hover { background: var(--nav-hover-bg) !important; color: var(--text-primary) !important; }
.side-sub a.on { background: var(--nav-active-bg) !important; color: var(--text-primary) !important; font-weight: 500 !important; }
.side-sub a.on::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--accent); }
.side-sub .side-sub { margin-left: 10px; }
.side-foot { border-top: 1px solid var(--card-border); padding: 8px 10px; flex: none; position: relative; }
.side-user { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px; border-radius: 8px; color: var(--text-primary) !important; text-decoration: none !important; transition: background-color .12s; }
.side-user:hover { background: var(--nav-hover-bg); }
.side-user .who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.side-user .WelcomeText { font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; }
.side-user .side-role { font-size: 11.5px; color: var(--text-tertiary); }
.side-user .side-chev { font-size: 15px !important; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-green); color: var(--on-accent); display: grid; place-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; flex: none; }
.side-foot .dropdown-menu { left: 10px; right: 10px; min-width: 0; margin-bottom: 6px; border: 1px solid var(--card-border); border-radius: 10px; box-shadow: var(--pop-shadow); padding: 4px; }
/* Common.js hides every .dropdown-menu (inline display:none) on any click in the page; the account menu must still open afterwards */
.side-foot.open > .dropdown-menu { display: block !important; }
.side-foot .dropdown-menu > li > a { padding: 7px 10px; border-radius: 6px; color: var(--text-secondary); font-size: 12.5px; display: flex; align-items: center; gap: 9px; }
.side-foot .dropdown-menu > li > a i { color: var(--text-tertiary); font-size: 15px; width: 16px; text-align: center; }
.side-foot .dropdown-menu > li > a:hover { background: var(--nav-hover-bg); color: var(--text-primary); text-decoration: none; }
.side-foot .dropdown-menu .divider { margin: 4px 2px; background: var(--row-divider); }
.side-scrim { display: none; }
.side-hamb { display: none !important; }

/* top bar */
.chrome { background: var(--card-bg); border-bottom: 1px solid var(--card-border); position: sticky; top: 0; z-index: 1000; }
.chrome-top { height: var(--top-h); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 24px; }
.chrome-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chrome-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gsearch { width: 440px; max-width: 100%; justify-self: center; min-width: 0; height: 32px; border: 1px solid var(--card-border); border-radius: var(--radius-ctl); background: var(--surface); display: flex; align-items: center; gap: 6px; padding: 0 6px 0 10px; color: var(--text-subtle); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.gsearch:hover { border-color: var(--control-border); background: var(--surface-raised); }
.gsearch:focus-within { background: var(--surface-raised); border-color: var(--accent-focus); box-shadow: 0 0 0 3px var(--focus-glow); }
.gsearch div { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.gsearch > div:first-child, .gsearch > div:first-child div { flex: none; }
/* the search ImageButton keeps working; its PNG is swapped for the Lucide search glyph (zero content box, icon as background) */
.gsearch input[type=image] {
    box-sizing: content-box; width: 0; height: 0; padding: 15px 0 0 15px; margin: 0 2px 0 0; opacity: 1; border-radius: 0;
    background: var(--icon-search) center / 15px 15px no-repeat;
}
.gsearch input[type=text].MainSearchTextbox {
    flex: 1 1 auto; min-width: 0; width: 100% !important; height: 30px; margin: 0 !important; padding: 0 6px;
    border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
    font: 12.5px/30px var(--font); color: var(--text-primary);
}
.gsearch input[type=text].MainSearchTextbox::placeholder { color: var(--text-subtle); }
.gsearch label { white-space: nowrap; font-size: 11.5px; color: var(--text-tertiary); margin: 0 4px 0 0; display: inline-flex; align-items: center; gap: 4px; }
.gsearch input[type=checkbox] { width: 13px; height: 13px; margin: 0 4px 0 6px !important; }
.gsearch span:has(> input[type=checkbox]), .gsearch #UpdatePanel_TSearch > span { display: inline-flex; align-items: center; flex: none; white-space: nowrap; padding-left: 8px; border-left: 1px solid var(--card-border); height: 18px; }
.gsearch .is-invisible, .gsearch .is-visible { transform: none !important; }

.chrome-right { justify-self: end; display: flex; align-items: center; gap: 4px; flex: none; }
.chrome-right > * { display: inline-flex; align-items: center; }
.WelcomeText { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.hsel { height: 32px; border: 1px solid var(--card-border); border-radius: var(--radius-ctl); padding: 0 4px 0 10px; margin-right: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); background: var(--surface-raised); transition: border-color .15s; }
.hsel:hover { border-color: var(--control-border); }
.hsel .hsel-label { color: var(--text-tertiary); font-size: 12px; }
.chrome select.DDLTaxList {
    width: auto !important; min-width: 64px; height: 30px !important; min-height: 0 !important; margin: 0 !important;
    border: 0; background-color: transparent; font: 600 12.5px var(--font); color: var(--text-primary); padding: 0 22px 0 4px; cursor: pointer; box-shadow: none !important;
}
.hicon, .hicon a, .hicon .EmailPageAsPDF, .hicon .Calendar, .hicon .HelpIcon, .hicon .mode-toggle {
    width: 32px !important; height: 32px !important; min-height: 0 !important; display: inline-grid !important; place-items: center;
    color: var(--text-tertiary) !important; background: transparent !important; border: 0 !important; border-radius: var(--radius-ctl); font-size: 16px !important; padding: 0 !important; text-decoration: none !important;
    transition: background-color .15s, color .15s;
}
.hicon a:hover, .hicon .EmailPageAsPDF:hover, .hicon .Calendar:hover, .hicon .mode-toggle:hover { background: var(--nav-hover-bg) !important; color: var(--text-primary) !important; }
.hicon .EmailIcon { color: inherit; }
.hicon .GeneratePDF, .hicon .GeneratePDF a { height: 32px !important; padding: 0 !important; }
/* AjaxControlToolkit DropDownExtender (QuickBooks / Print / Email-as-PDF icons): on hover it drew its own blue frame
   and a blue arrow strip over the icon. Clicking the icon opens the menu, so both go; the icon's own hover stays. */
.ajax__dropdown_frame_line, .ajax__dropdown_arrow { display: none !important; }

/* ---------- page shell ---------- */
#page-wrapper { position: relative; padding: 24px 24px 40px !important; margin: 0 !important; width: 100%; min-height: calc(100vh / var(--app-zoom) - var(--top-h) - 1px); border: 0 !important; background: transparent; }
#page-wrapper > .row, #PageBody.row { margin-left: 0; margin-right: 0; }
#page-wrapper .col-lg-12 { padding: 0 !important; }

.page-head { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 16px; }
.page-header {
    margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); width: 100%;
}
.page-header td { font-size: 13px; font-weight: 400; color: var(--text-soft); }
.page-header table { width: 100%; }
.page-header td { padding: 0; vertical-align: middle; }
.PageTitle, .PageTitle_Master, .SubTitle { display: block; color: var(--text-primary) !important; font-size: 18px !important; line-height: 26px; font-weight: 600 !important; letter-spacing: -.01em; padding: 0 !important; margin: 0; }
.PageSubTitle { color: var(--text-primary); font-weight: 600; font-size: 13px; }
.page-desc { color: var(--text-tertiary); font-size: 12px; margin: -8px 0 16px; }
.page-desc:empty { display: none; }
/* Breadcrumb. The text comes from a compiled helper (MyComponent.dll): "Back", a "::::::" spacer, then links
   separated by ">>" with a trailing ">>". Hide those characters and draw a divider / chevrons instead. */
.NavigationMenu { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: 4px; font-size: 12px; }
.NavigationMenuLink { font-size: 12px; font-weight: 500; color: var(--link); }
.NavigationMenu > a:has(+ .NavigationMenuLink_BackButtonSpace)::before { content: "\2190"; margin-right: 5px; }
.NavigationMenuLink_BackButtonSpace { font-size: 0; display: inline-block; width: 1px; height: 14px; padding: 0 !important; background: var(--text-faint); margin: 0 10px; }
.NavigationMenuSplitter {
    font-size: 0; display: inline-block; width: 14px; height: 14px; margin: 0 2px;
    background: var(--icon-crumb) center / 11px no-repeat;
}
.NavigationMenu > .NavigationMenuSplitter:last-child { display: none; }
.BackButton { text-align: right; }
/* list pages put the title and the "Add New …" link in a two-row table; show them side by side */
.page-header table { display: block; }
.page-header table > tbody { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.page-header table > tbody > tr { display: contents; }
.page-header table > tbody > tr > td { display: block; padding: 0; }
.page-header table > tbody > tr:first-child > td { flex: 1 1 auto; min-width: 0; }

/* success / failure banner */
.alert.PageAlert {
    margin: 0 0 16px !important; padding: 10px 40px 10px 14px; border-radius: 10px !important; position: relative;
    background: var(--ok-bg) !important; border: 1px solid var(--ok-border) !important; color: var(--ok-text) !important; font-weight: 500 !important; font-size: 12px;
}
.alert.PageAlert.PageAlert_Failed { background: var(--danger-bg) !important; border-color: var(--danger-border) !important; color: var(--danger-text) !important; }
.alert.PageAlert .close { position: absolute; right: 10px; top: 6px; color: inherit !important; opacity: .6; font-size: 16px; background: none; text-indent: 0; width: auto; height: auto; }

/* ---------- typography helpers used across pages ---------- */
.FormNote, .supData { font-size: 12px; color: var(--text-tertiary); font-weight: 400; }
.Message { color: var(--ok-text) !important; font-weight: 500 !important; font-size: 12px; }
.RedNote, .RedMessage, .RedAlert, .RedNote_Admin, .OutOfStock { color: var(--danger-text) !important; font-weight: 500; font-size: 12px; }
.OrangeNote, .OrangeNote_Admin, .GOA, .RelatedTo { color: var(--warn-text) !important; font-weight: 500; font-size: 12px; }
.GreenNote, .DiscountNote { color: var(--ok-text); font-weight: 500; font-size: 12px; }
.BlueNote, .BlueLabel, .BlueHeaderNote, .FormValueOnUpdate, .DeliveryScheduleInventory { color: var(--link) !important; font-weight: 500; font-size: 12px; }
.BlackNote, .BrownNote { color: var(--text-primary); font-weight: 500; font-size: 12px; }
.NoData, .DeleteData { color: var(--text-tertiary) !important; font-weight: 500; font-size: 12px; padding: 14px 0; }
.DeleteData { color: var(--danger-text) !important; }
.ValidationError { color: var(--danger-text); font-weight: 500; font-size: 12px; padding-left: 6px; }
.RequiredStar { color: var(--danger-text); font-weight: 500; }
.Pending { color: var(--warn-text); font-weight: 500; }
.Completed { color: var(--ok-text); font-weight: 500; }
.Cancelled { color: var(--danger-text); font-weight: 500; }
.TurnedOn_False, .ProjectCompleted td { text-decoration: line-through; color: var(--text-subtle); }

/* ---------- buttons ---------- */
.BigButton, input[type=submit], input[type=button], button.btn, .btn, .HyperlinkAsButton, .MainSearchButton, .LinkAsButton, .ButtonWithIcon, .ButtonWithIcon_Selected {
    height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 14px !important; margin: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font: 500 12.5px/1 var(--font) !important; text-decoration: none !important; white-space: nowrap; cursor: pointer;
    border-radius: var(--radius-ctl) !important; border: 1px solid var(--accent); background: var(--accent); background-image: none !important; color: var(--on-accent) !important;
    box-shadow: none; transition: background-color .15s, border-color .15s, color .15s;
}
.BigButton:hover, input[type=submit]:hover, input[type=button]:hover, .HyperlinkAsButton:hover, .btn:hover, .btn:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent) !important; }
.BigButton:active, input[type=submit]:active { background: var(--accent-focus); }
input[type=submit][disabled], .btn[disabled], .BigButton[disabled] { opacity: .5; cursor: not-allowed; }

/* secondary (plain) buttons: <asp:Button> without BigButton, .btn-default, .LinkAsButton */
input[type=submit]:not(.BigButton):not(.btn):not(.RedButton):not(.GreenButton):not(.OrangeButton),
.btn.btn-default, .LinkAsButton, .btn-secondary {
    background: var(--surface-raised) !important; border-color: var(--control-border) !important; color: var(--text-secondary) !important;
}
input[type=submit]:not(.BigButton):not(.btn):not(.RedButton):not(.GreenButton):not(.OrangeButton):hover,
.btn.btn-default:hover, .LinkAsButton:hover { background: var(--surface) !important; border-color: var(--text-subtle) !important; color: var(--text-primary) !important; }

/* soft accent */
.HyperlinkAsButton, .btn-soft { background: var(--accent-soft) !important; border-color: var(--accent-soft-border) !important; color: var(--accent) !important; }
.HyperlinkAsButton:hover, .btn-soft:hover { background: var(--accent-soft-hover) !important; color: var(--accent-hover) !important; }

/* semantic */
.btn-green, .GreenButton { background: var(--ok-text) !important; border-color: var(--ok-text) !important; color: #fff !important; }
.btn-green:hover, .GreenButton:hover { background: #036c4e !important; border-color: #036c4e !important; }
.RedButton { background: var(--danger-text) !important; border-color: var(--danger-text) !important; color: #fff !important; }
.RedButton:hover { background: #991b1b !important; border-color: #991b1b !important; }
.OrangeButton { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }
.btn-danger { background: var(--danger-bg) !important; border-color: var(--danger-border) !important; color: var(--danger-text) !important; }
.btn-danger:hover, .btn-danger:focus { background: #fee2e2 !important; border-color: #fca5a5 !important; color: var(--danger-text) !important; }
.GreenBackGround { background-color: var(--ok-text) !important; }
.OrangeBackGround { background-color: #d97706 !important; }
.GreenButtonText { color: var(--ok-text) !important; }
.OrangeButtonText { color: var(--warn-text) !important; }

/* "Add New ..." link with icon */
.CreateButton {
    display: inline-flex !important; align-items: center; gap: 6px; height: var(--ctl-h); padding: 0 12px 0 10px; margin: 0;
    background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-ctl);
    color: var(--on-accent) !important; font-size: 12.5px !important; font-weight: 500; line-height: 28px !important; text-decoration: none !important; white-space: nowrap;
    transition: background-color .15s;
}
.CreateButton:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* the orange "+" gif is replaced by a text plus in the button colour */
.CreateButton img { display: none; }
.CreateButton::before { content: "+"; font-size: 15.5px; font-weight: 500; line-height: 1; margin-top: -1px; }

/* icon-only image/link buttons inside grids */
.DeleteButton, .ViewLink, .Refresh { background: transparent !important; border: 0; padding: 0; cursor: pointer; opacity: .75; transition: opacity .15s; }
.DeleteButton:hover, .ViewLink:hover, .Refresh:hover { opacity: 1; }
input[type=image] { border-radius: 4px; }
.fa-trash-alt, .DeleteButton .fa { color: var(--danger-text); }
.cs_cbl_DD_reset { color: var(--text-subtle); cursor: pointer; }
.cs_cbl_DD_reset:hover { color: var(--danger-text); }

/* ---------- forms ---------- */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=date], select, textarea, .form-control {
    height: var(--ctl-h); margin: 2px 0; padding: 0 10px;
    border: 1px solid var(--control-border); border-radius: var(--radius-ctl); background: var(--control-bg);
    color: var(--text-primary); font: 400 12.5px/28px var(--font); box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
select { min-height: var(--ctl-h) !important; padding: 0 28px 0 10px; line-height: normal; cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: var(--icon-select);
    background-repeat: no-repeat; background-position: right 9px center; background-size: 12px 12px;
}
select[multiple], select[size] { height: auto; padding: 6px 10px; background-image: none; line-height: 22px; }
textarea { height: auto; min-height: 80px; padding: 8px 10px; line-height: 20px; resize: vertical; }
input[type=text]:hover, select:hover, textarea:hover { border-color: var(--text-subtle); }
input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--accent-focus); box-shadow: 0 0 0 3px var(--focus-glow); outline: none;
}
input[type=text][disabled], input[type=text][readonly], select[disabled], textarea[disabled] { background: var(--surface); color: var(--text-secondary); -webkit-text-fill-color: var(--text-secondary); cursor: not-allowed; }
/* A locked record (the Unlock button) disables most of its fields. Show those as plain values rather than
   greyed-out boxes; the few controls that stay editable keep their borders, which marks them as such. */
.Panel input[type=text].aspNetDisabled, .Panel select.aspNetDisabled, .Panel textarea.aspNetDisabled {
    background: transparent !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important;
    color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary); opacity: 1; padding-left: 0 !important; cursor: default;
}
.Panel .aspNetDisabled label, .Panel .aspNetDisabled + label { color: var(--text-secondary) !important; cursor: default; }
.Panel .aspNetDisabled input[type=checkbox], .Panel .aspNetDisabled input[type=radio] { cursor: default; }
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input[type=text].NumberField, input[type=text].PriceField, input[type=text].DateField, input[type=text].PostalCode { font-variant-numeric: tabular-nums; }
input[type=text].DateField { background-image: var(--icon-date); background-repeat: no-repeat; background-position: right 9px center; padding-right: 30px; min-width: 120px; }

input[type=checkbox], input[type=radio] {
    width: 15px; height: 15px; margin: 0 6px 0 0 !important; vertical-align: -2px; accent-color: var(--accent); cursor: pointer;
}
input[type=checkbox] + label, input[type=radio] + label { cursor: pointer; font-weight: 400 !important; color: var(--text-secondary); vertical-align: baseline; }
.CheckBox label, .CBL label, .RBL label, .CheckBoxInTab label, .SelectDate label { font-weight: 400 !important; color: var(--text-secondary) !important; }
.RBL label { padding-right: 20px !important; }
.RBL, .RBL tr, .RBL tr td, .CBL, .CBL td { border: 0 !important; background: transparent !important; padding: 2px 6px 2px 0 !important; }

/* form table (every Manage page) */
.Panel, .PanelInsideTab {
    background: var(--card-bg); border: 1px solid var(--card-border) !important; border-radius: var(--card-radius) !important; box-shadow: var(--card-shadow);
    padding: 12px 16px !important; margin: 0 0 16px !important; width: 100%;
    color: var(--text-secondary) !important; font-weight: 400 !important; font-size: 12.5px !important; line-height: 20px;
}
.Panel > tbody > tr > td, .PanelInsideTab > tbody > tr > td { padding: 4px 8px; vertical-align: middle; }
/* a full-width text box (Width="100%" in the markup) stops at a readable width instead of crossing a wide screen */
.Panel input[type=text]:is([style*="width:100%"], [style*="width: 100%"]) { max-width: 640px; }
.Panel .Panel, .Panel .PanelInsideTab { border: 0 !important; box-shadow: none; padding: 0 !important; margin: 0 !important; background: transparent; }
td.FormLabel, td.FormLabel_Medium, td.FormLabel_X, td.FormLabel_Mini, td.FormLabel_Large, .FormLabelWithoutPanel {
    color: var(--text-tertiary) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 20px; white-space: nowrap; vertical-align: middle; padding-right: 16px !important;
}
.Panel .RequiredStar { color: var(--danger-text); }
.InnerTable td { padding: 4px 6px 4px 0; }
.SearchQueryAsText { color: var(--text-primary) !important; }

/* ---------- cards from tables (dashboard + report tables) ---------- */
#PageBody .table, .GridView, .TableListView {
    background: var(--card-bg); border: 1px solid var(--card-border) !important; border-radius: var(--card-radius); box-shadow: var(--card-shadow);
    border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden; margin: 0 0 16px !important; width: 100%; font-size: 12.5px;
}
/* header cells: semibold, as ChannelSnap's column titles (MMTAX keeps sentence case) */
.table > thead > tr > th, .GridViewHeader, .GridViewHeader th, th.GridViewHeader, .TableListView tr:first-child th, .GridView th, .GridView .OneHeader {
    background: var(--surface) !important; color: var(--text-secondary) !important;
    font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0; text-transform: none; line-height: 16px;
    height: 36px !important; padding: 8px 12px !important; vertical-align: middle !important;
    border: 0 !important; border-bottom: 1px solid var(--card-border) !important; border-radius: 0 !important; white-space: nowrap;
}
.GridViewHeader th { border-bottom: 1px solid var(--card-border) !important; }
.GridViewHeader select, .GridViewHeader input[type=text], .GridViewHeader .DDLAction { height: 28px; min-height: 28px !important; margin: 0; font-size: 11.5px; text-transform: none; letter-spacing: 0; }
.GridViewHeader input[type=checkbox] { margin: 0 !important; }
.GridViewHeader a { color: var(--text-secondary) !important; }
/* body cells */
.table > tbody > tr > td, .table > tfoot > tr > td, .GridView td, .TableListView tr td, .GridViewCommonRow td {
    padding: 7px 12px !important; border: 0 !important; border-top: 1px solid var(--row-divider) !important;
    color: var(--text-secondary); vertical-align: middle !important; line-height: 20px; height: auto;
}
.GridViewCommonRow, .TableListView tr { height: 40px !important; color: var(--text-secondary) !important; font-size: 12.5px !important; }
.table > tbody > tr:first-child > td, .GridView tbody tr:first-child td { border-top: 0 !important; }
.GridViewRow, .GridViewAlternativeRow, .TableListView tr:nth-child(odd), .TableListView tr:nth-child(even), .table-striped > tbody > tr:nth-of-type(odd), .table-striped > tbody > tr:nth-of-type(even) { background-color: transparent !important; }
.GridViewAlternativeRow, .table-striped > tbody > tr:nth-of-type(odd), .TableListView tr:nth-child(even) { background-color: var(--row-alt) !important; }
.table-striped-white-first > tbody > tr:nth-of-type(odd) { background-color: transparent !important; }
.table-striped-white-first > tbody > tr:nth-of-type(even) { background-color: var(--row-alt) !important; }
.table > tbody > tr:hover > td, .GridView tbody tr:hover td, .TableListView tr:hover td { background-color: var(--accent-soft); }
.table > tfoot > tr > td, .GridViewFooter, .GridViewFooter td {
    background: var(--surface) !important; color: var(--text-primary) !important; font-weight: 600; height: auto !important; min-height: 0 !important; line-height: 20px !important; text-align: inherit;
    border-top: 1px solid var(--card-border) !important;
}
.GridViewTable { margin: 0 !important; }
.GridViewCorners { border: 1px solid var(--card-border); border-radius: var(--card-radius); }
.GridViewhr { border-top: 1px solid var(--card-border); }
.GridView a, .table a, .CustomerName, .CompanyName, .StatusName a, .AccountName a { color: var(--link); font-weight: 500; }
/* buttons inside table rows are row actions: compact and soft, never solid green */
.GridView td .btn, .GridView td input[type=submit], .table td input[type=submit], .GridView td .BigButton, .TaxTable td .BigButton {
    height: 28px; min-height: 28px; padding: 0 10px !important; font-size: 12px !important; font-weight: 500;
    background: var(--accent-soft) !important; border-color: var(--accent-soft-border) !important; color: var(--accent) !important;
}
.GridView td .btn:hover, .GridView td input[type=submit]:hover, .table td input[type=submit]:hover, .GridView td .BigButton:hover, .TaxTable td .BigButton:hover {
    background: var(--accent-soft-hover) !important; border-color: var(--accent-soft-border) !important; color: var(--accent-hover) !important;
}
/* columns size to their content; the fixed header widths from the markup otherwise squeeze the name column at laptop widths */
.GridView th[style*="width"] { width: auto !important; }
.GridView td img, .table td img { max-height: 18px; }
.LPhone, .TPhone, .GridView td .NumberField { white-space: nowrap; }
.GridView td .DeleteButton, .table td .DeleteButton, .table td input[type=image] { max-height: 18px; }
.ReportView tr { height: auto !important; }
.ImageRow td { padding-top: 6px; }
.Count { font-variant-numeric: tabular-nums; }

/* tax list (Project_List / TaxUserControl) */
.TaxTable td, .table.TaxTable > tbody > tr > td, .table.TaxTable > thead > tr > th { font-family: var(--font) !important; font-size: 12.5px !important; color: var(--text-secondary) !important; height: auto !important; border: 0 !important; }
.table.TaxTable > thead > tr > th { font-size: 12px !important; font-weight: 600 !important; color: var(--text-secondary) !important; }
.TaxTable tr { height: auto; min-height: 44px; align-items: center; }
.TaxTable > tbody > tr { border-top: 1px solid var(--row-divider); }
.TaxTable > tbody > tr:first-child { border-top: 0; }
.TaxTable > tbody > tr:hover { background: var(--accent-soft); }
.TaxTable > tbody > tr:hover td { background: transparent; }
.TaxTable td table, .TaxTable td table tr, .TaxTable td table td { border: 0 !important; background: transparent !important; box-shadow: none; }
.TaxTable .BigButton { margin: 0 !important; }
.TaxTable thead tr { align-items: center; }
/* Tax list (TaxUserControl). Admin.css makes every row a flexbox, so a long client name used to
   widen its cell and push the rest of that row out of line with the header. Pin every cell to the
   width it declares (header and rows use the same widths), wrap long text, let Notes take the rest,
   and keep the header row stuck under the top bar while the page scrolls. */
table.fixedheader { overflow: visible !important; }
.fixedheader thead:not(.dontfix) { position: sticky !important; top: calc(var(--top-h) + 1px); z-index: 5; width: auto !important; }
.fixedheader .tbody:not(.dontfix) { display: table-row-group; width: auto; height: auto; overflow: visible; margin-top: 0 !important; }
.TaxTable > thead > tr, .TaxTable > tbody > tr { display: flex; flex-wrap: nowrap; }
.TaxTable > thead > tr > th, .TaxTable > tbody > tr > td { flex: 0 0 auto; min-width: 0; overflow-wrap: anywhere; }
.TaxTable > thead > tr > .NotesColumn, .TaxTable > tbody > tr > .NotesColumn { flex: 1 1 0; min-width: 100px; }
/* the bulk-action column is declared 85px in the header but 65px in the rows: give both 85px */
.TaxTable > thead > tr > th[id*="RAction"], .TaxTable > tbody > tr > td[id*="RAction1"] { width: 85px !important; min-width: 85px !important; }
.TaxTable > thead > tr > th { background: var(--surface) !important; }
.fixedheader thead:not(.dontfix), .fixedheader thead:not(.dontfix) > tr { background: var(--surface) !important; }
.fixedheader thead:not(.dontfix) { box-shadow: 0 -8px 0 var(--bg-page), 0 1px 0 var(--card-border); }
.Panel.SearchTaxTable { padding: 8px 12px !important; overflow-x: auto; }
.SearchTaxTable td { padding: 0 3px !important; color: var(--text-tertiary); font-size: 11.5px; white-space: nowrap; }
.SearchTaxTable select, .SearchTaxTable input[type=text] { margin: 0 !important; height: 32px; font-size: 11.5px; }
.SearchTaxTable .cs_cbl_DD_trigger { height: 32px !important; line-height: 30px !important; font-size: 11.5px; padding-left: 8px !important; padding-right: 20px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-position: 96% !important; }
.ExportFile { position: absolute; top: 24px; right: 24px; z-index: 5; }
.DueDateOverdue {
    background: var(--badge-danger-bg) !important; color: var(--badge-danger-text) !important; font-weight: 500; border-radius: 6px; padding: 2px 8px; display: inline-block; line-height: 16px; font-size: 11.5px;
}
.StatusName { font-weight: 500; padding-top: 0; }
.NotesColumn { padding-right: 12px !important; }

/* ---------- search tab (jQuery UI tabs, #tabs.SearchTab) ---------- */
.SearchTab.ui-tabs, #tabs.ui-tabs {
    background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; border-radius: var(--card-radius) !important; box-shadow: var(--card-shadow);
    padding: 0 !important; margin: 0 0 16px !important; font-family: var(--font) !important; font-size: 13px !important;
}
.SearchTab .ui-tabs-nav, #tabs .ui-tabs-nav {
    background: transparent !important; border: 0 !important; border-radius: var(--card-radius) var(--card-radius) 0 0 !important; padding: 8px 12px !important; margin: 0 !important; min-height: 48px;
    display: flex; align-items: center; justify-content: flex-start;
}
.SearchTab .ui-tabs-nav li, #tabs .ui-tabs-nav li {
    float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; list-style: none; white-space: nowrap;
}
.SearchTab .ui-tabs-nav .ui-tabs-anchor, #tabs .ui-tabs-nav .ui-tabs-anchor {
    display: inline-flex !important; align-items: center; gap: 8px; float: none !important; height: 32px; padding: 0 12px !important;
    background: var(--accent-soft) !important; border: 1px solid var(--accent-soft-border) !important; border-radius: var(--radius-ctl) !important;
    color: var(--accent) !important; font-size: 12.5px !important; font-weight: 500 !important; font-family: var(--font) !important; text-decoration: none !important; outline: none;
    transition: background-color .15s;
}
.SearchTab .ui-tabs-nav .ui-tabs-anchor:hover, .SearchTab .ui-tabs-nav .ui-tabs-active .ui-tabs-anchor { background: var(--accent-soft-hover) !important; }
.SearchTab .ui-tabs-nav .ui-tabs-anchor img { height: 13px; width: 13px; opacity: .8; }
.SearchTab .ui-tabs-panel, #tabs .ui-tabs-panel {
    border: 0 !important; border-top: 1px solid var(--card-border) !important; border-radius: 0 0 var(--card-radius) var(--card-radius) !important;
    background: transparent !important; padding: 12px 16px 16px !important; font-family: var(--font) !important; font-size: 13px !important;
}
/* The filter form is a table with one label/control pair per row. Let the pairs flow two per row
   so a long form stays above the fold. Every search form in the admin has exactly that shape. */
.SearchTab .ui-tabs-panel > div { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: 12px; align-items: center; }
.SearchTab .ui-tabs-panel > div > table, .SearchTab .ui-tabs-panel > div > table > tbody, .SearchTab .ui-tabs-panel > div > table > tbody > tr { display: contents; }
.SearchTab .ui-tabs-panel > div > table td { display: block; padding: 4px 0 !important; min-width: 0; }
.SearchTab .ui-tabs-panel > div > table td.FormLabel { width: auto !important; padding-right: 4px !important; }
/* filter labels read like ChannelSnap's: medium weight in the secondary ink, a step up from the record-form labels */
.SearchTab .ui-tabs-panel td.FormLabel { font-size: 12.5px !important; font-weight: 500 !important; color: var(--text-secondary) !important; }
.SearchTab .ui-tabs-panel > div > table td[colspan] { display: none; }
.SearchTab .ui-tabs-panel > div > table td:has(> input[type=submit]) { grid-column: 2 / -1; padding-top: 10px !important; }
.SearchTab .ui-tabs-panel > div > table td:has(+ td > input[type=submit]) { grid-column: 1; }
/* a cell holding a text box and a dropdown together (tags + and/or) gets the whole row */
.SearchTab .ui-tabs-panel > div > table td:has(> input[type=text] ~ select) { grid-column: 2 / -1; }
.SearchTab .ui-tabs-panel > div > table td:has(+ td > input[type=text] ~ select) { grid-column: 1; }
.SearchTab .ui-tabs-panel td input[type=text], .SearchTab .ui-tabs-panel td select, .SearchTab .ui-tabs-panel td textarea { max-width: 100% !important; }
/* "Export Data" is the table row right after the search card; park it at the right of the card's toolbar row */
#PageBody > table:has(> tbody > tr > td > .SearchTab) { position: relative; }
#PageBody > table > tbody > tr > td > input[type=submit][id$="BExportCSV"] { position: absolute; top: 8px; right: 12px; z-index: 2; height: 32px; min-height: 32px; }
#PageBody > table > tbody > tr:has(> td > input[id$="BExportCSV"]) > td { padding: 0 !important; height: 0; line-height: 0; font-size: 0; }

/* ---------- tabs on Manage pages (the jQuery UI #tabs that is not the search card) ---------- */
#tabs.ui-tabs:not(.SearchTab) { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none; margin: 8px 0 0 !important; padding: 0 !important; }
/* overflow must stay visible: the 1px negative margin on the tabs would otherwise produce a scrollbar */
#tabs.ui-tabs:not(.SearchTab) .ui-tabs-nav { justify-content: flex-start; flex-wrap: wrap; gap: 0 4px; padding: 0 !important; min-height: 0; border-bottom: 1px solid var(--card-border) !important; border-radius: 0 !important; overflow: visible; }
#tabs.ui-tabs:not(.SearchTab) .ui-tabs-nav li { margin: 0 0 -1px !important; }
#tabs.ui-tabs:not(.SearchTab) .ui-tabs-nav .ui-tabs-anchor {
    height: 36px; padding: 0 12px !important; gap: 7px; background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
    color: var(--text-tertiary) !important; font-weight: 500 !important; transition: color .15s, border-color .15s;
}
#tabs.ui-tabs:not(.SearchTab) .ui-tabs-nav .ui-tabs-anchor:hover { color: var(--text-primary) !important; background: transparent !important; }
#tabs.ui-tabs:not(.SearchTab) .ui-tabs-nav .ui-tabs-active .ui-tabs-anchor { color: var(--text-primary) !important; border-bottom-color: var(--accent) !important; font-weight: 600 !important; }
/* "(3)" counters become small pills; the literal parentheses in the markup are hidden */
#tabs.ui-tabs:not(.SearchTab) .ui-tabs-anchor .Count { font-size: 0; }
#tabs.ui-tabs:not(.SearchTab) .ui-tabs-anchor .Count > span { display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 18px; min-width: 18px; padding: 0 6px; border-radius: 99px; text-align: center; color: var(--text-tertiary); background: var(--row-divider); vertical-align: 1px; }
#tabs.ui-tabs:not(.SearchTab) .ui-tabs-active .ui-tabs-anchor .Count > span { color: var(--accent); background: var(--accent-soft); }
#tabs.ui-tabs:not(.SearchTab) .ui-tabs-panel { border: 0 !important; border-radius: 0 !important; padding: 16px 0 0 !important; }
.Panel .GridView { box-shadow: none; }

/* In a form card only Save (SaveData) is the primary action; other full-size buttons in the form are secondary.
   :where() keeps the specificity low so the in-grid button rule below still wins inside tables. */
:where(.Panel:not(.SearchTaxTable)) input[type=submit].BigButton:where(:not(.SaveData):not([id$="BSave"]):not(.GreenButton):not(.RedButton):not(.OrangeButton):not(.btn)) {
    background: var(--surface-raised) !important; border-color: var(--control-border) !important; color: var(--text-secondary) !important;
}
:where(.Panel:not(.SearchTaxTable)) input[type=submit].BigButton:where(:not(.SaveData):not([id$="BSave"]):not(.GreenButton):not(.RedButton):not(.OrangeButton):not(.btn)):hover {
    background: var(--surface) !important; border-color: var(--text-subtle) !important; color: var(--text-primary) !important;
}
/* the Save row closes the form card */
.Panel > tbody > tr:last-child:has(> td > input[type=submit].SaveData) > td { padding-top: 14px !important; border-top: 1px solid var(--row-divider); }
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: var(--font) !important; font-size: 12px; }

/* jQuery UI datepicker + autocomplete lists */
.ui-datepicker { border: 1px solid var(--card-border) !important; border-radius: 12px !important; box-shadow: var(--pop-shadow); padding: 10px !important; background: var(--pop-bg) !important; font-family: var(--font) !important; font-size: 12px; }
.ui-datepicker .ui-datepicker-header { background: transparent !important; border: 0 !important; color: var(--text-primary) !important; font-weight: 600; }
.ui-datepicker th { color: var(--text-subtle); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.ui-datepicker td a, .ui-datepicker td span { border: 0 !important; background: transparent !important; text-align: center !important; border-radius: 6px; color: var(--text-secondary) !important; }
.ui-datepicker td a:hover { background: var(--nav-hover-bg) !important; }
.ui-datepicker td .ui-state-active { background: var(--accent) !important; color: var(--on-accent) !important; }
.ui-datepicker td .ui-state-highlight { background: var(--accent-soft) !important; color: var(--accent) !important; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { border: 0 !important; background: transparent !important; border-radius: 6px; cursor: pointer; }
.autocomplete_completionListElement, .autocomplete_completionListElement_Custom {
    background: var(--pop-bg) !important; border: 1px solid var(--card-border) !important; border-radius: 10px; box-shadow: var(--pop-shadow); padding: 4px !important; font-size: 12px; color: var(--text-secondary);
}
.autocomplete_listItem, .autocomplete_highlightedListItem { background: transparent !important; padding: 6px 10px; border-radius: 6px; }
.autocomplete_highlightedListItem { background: var(--nav-hover-bg) !important; color: var(--text-primary); }

/* custom checkbox-dropdown (year end / status filters) */
.cs_cbl_DD_trigger {
    height: var(--ctl-h) !important; line-height: 28px !important; border: 1px solid var(--control-border) !important; border-radius: var(--radius-ctl); background-color: var(--control-bg) !important;
    padding-left: 10px !important; color: var(--text-secondary); font-size: 12.5px;
}
.cs_cbl_DD { border: 1px solid var(--card-border) !important; border-radius: 10px; box-shadow: var(--pop-shadow); margin-top: 36px; padding: 6px 4px !important; max-width: 240px; }
.cs_cbl_DD td { padding: 4px 8px !important; }
.cs_cbl_DD td label { font-size: 12px !important; }

/* tags */
.white-input-box { background: var(--surface); box-shadow: none; border: 1px solid var(--control-border); border-radius: var(--radius-ctl); }
.tag-search-container input { border: 1px solid var(--control-border) !important; border-radius: 6px; height: 28px; }
.tag span { background: var(--accent-soft) !important; color: var(--accent) !important; border: 1px solid var(--accent-soft-border); border-right: 0; font-size: 11.5px !important; padding: 3px 8px !important; }
.delete-tag { background: var(--accent) !important; padding: 0 7px !important; }

/* ---------- pager ---------- */
.PageNavigation { color: var(--text-tertiary) !important; font-size: 12px; padding: 4px 0 8px; }
.PageNavigation font { font-weight: 500 !important; color: var(--text-tertiary); }
.PageNavigation table { width: auto !important; }
.PageNavigation td { padding: 0 4px !important; border: 0 !important; }
.PageNavigation table td { width: auto !important; }
.PageNavigation input[type=image] { box-sizing: border-box; width: 30px !important; height: 30px !important; padding: 6px; vertical-align: middle; border: 1px solid var(--control-border) !important; border-radius: 8px; background: var(--card-bg); cursor: pointer; transition: background-color .15s, border-color .15s, opacity .15s; }
.PageNavigation input[type=image]:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-soft-border) !important; }
.PageNavigation input[type=image]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.PageNavigation input[type=image]:disabled { opacity: .4; cursor: default; }
.PageNavigation select { width: 64px !important; height: 30px !important; min-height: 30px !important; margin: 0 4px !important; font-size: 12px; }
.PageNavigation_ShowingPage { font-weight: 500; }

/* ---------- modals (bootstrap 3) ---------- */
.modal-backdrop.in { opacity: .35; background: #0f172a; }
.modal .modal-content, .modal .modal-content.no-border-radius {
    border: 1px solid var(--card-border) !important; border-radius: var(--card-radius) !important; box-shadow: var(--pop-shadow); background: var(--pop-bg); overflow: hidden;
}
.modal-header, .modal-header.bg-lightgray { background: var(--card-bg) !important; border-bottom: 1px solid var(--card-border) !important; padding: 14px 20px; }
.modal-title, .modal-title.fontdefault { font-size: 14px !important; font-weight: 600 !important; color: var(--text-primary); line-height: 20px; }
.modal-title .fa { color: var(--text-subtle); }
.modal-body, .modal-body.fontsmall { padding: 16px 20px; font-size: 13px !important; color: var(--text-secondary); }
.modal-body .Panel { border: 0 !important; box-shadow: none; padding: 0 !important; margin: 0 !important; background: transparent; }
.modal-footer { border-top: 1px solid var(--card-border); padding: 12px 20px; background: var(--surface); }
.modal .close { background: none !important; text-indent: 0 !important; position: static !important; width: auto !important; height: auto !important; font-size: 19px; color: var(--text-subtle) !important; opacity: 1; font-weight: 400; }
.modal .close:hover { color: var(--text-primary) !important; }
.modal-dialog { margin: 60px auto !important; }
#LoadingModel .modal-content { max-height: none !important; }
#LoadingModel .modal-body { height: auto; padding: 24px; text-align: center; color: var(--text-tertiary); font-size: 12px; }
#LoadingModel .modal-footer { display: none; }
#LoadingModel .loaderImg { height: 28px; margin-bottom: 8px; }
.DropDownExtenderPanel { background: var(--pop-bg); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: var(--pop-shadow); padding: 6px !important; width: 160px !important; }
.DropDownExtenderBulletedList { border: 0 !important; background: transparent !important; margin: 0 !important; }
.DropDownExtenderPanel td, .DropDownExtenderPanel a { padding: 6px 8px !important; font-size: 12px; display: block; border-radius: 6px; }
.DropDownExtenderPanel td:hover, .DropDownExtenderPanel a:hover { background: var(--nav-hover-bg); }
.QuickbooksHyperlinks a { margin-top: 0; }

/* ---------- legacy popups ---------- */
.popup_mini, .popup_ContactAndEmail, .popup_address_BillTo, .popup_address_ShipTo, .popup_AccountDiv {
    border: 1px solid var(--card-border) !important; border-radius: var(--card-radius) !important; box-shadow: var(--pop-shadow) !important; font-family: var(--font) !important; padding: 8px;
}
#overlay { background-color: #0f172a; opacity: .35; }

/* ---------- misc ---------- */
.MyCKEditor, .cke_chrome { border: 1px solid var(--control-border) !important; border-radius: var(--radius-ctl); overflow: hidden; }
.RoundIcon { border-color: var(--control-border); color: var(--text-secondary) !important; }
.d-inline { display: inline-flex !important; }
.ButtonsTable td { padding-right: 12px; }
.WithCursor { cursor: pointer; }
.OrderStatus { background: var(--accent) !important; border-color: var(--accent) !important; }
.SelectedLanguage { color: var(--accent); }
.DDLYear_From { background: var(--accent) !important; }
.DDLYear_To { background: var(--text-tertiary) !important; }
.ReminderInDays { color: var(--danger-text); font-weight: 500; }

/* ---------- login page ---------- */
body.login-page { min-height: calc(100vh / var(--app-zoom)); display: flex; align-items: center; justify-content: center; background: var(--bg-page); }
body.login-page form { width: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
    width: 100%; max-width: 400px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--card-shadow); padding: 32px 32px 28px;
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; text-align: center; }
.login-brand img { height: 72px; width: auto; }
.login-brand h1 { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.login-brand p { margin: 0; font-size: 12px; color: var(--text-tertiary); }
.login-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.login-field label { font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.login-field input[type=text], .login-field input[type=password] { width: 100% !important; height: 40px; margin: 0; font-size: 13px; }
.login-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.login-actions .BigButton { width: 100%; height: 40px; font-size: 13px !important; }
.login-actions .Message { text-align: center; }
.login-foot { margin-top: 20px; text-align: center; font-size: 11.5px; color: var(--text-subtle); }

/* ---------- responsive ---------- */
@media (max-width: 1439px) {
    /* tax-list filter bar: let label cells wrap so the row still fits on 1366px laptops */
    .SearchTaxTable td:not(:has(input, select, div, i)) { white-space: normal; text-align: right; line-height: 14px; }
}
@media (max-width: 1279px) {
    .gsearch { width: 340px; }
    .gsearch label { display: none; }
}
/* below 1100px the left navigation becomes a drawer opened from the top bar */
@media (max-width: 1099px) {
    :root { --side-w: 0px; }
    #wrapper.app { display: block; }
    .side { position: fixed; left: 0; top: 0; bottom: 0; width: 232px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: none; }
    body.side-open .side { transform: none; box-shadow: 0 12px 40px rgba(16, 24, 40, .25); }
    body.side-open .side-scrim { display: block; position: fixed; inset: 0; background: rgba(30, 42, 54, .4); z-index: 1000; }
    .side-hamb { display: inline-grid !important; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-ctl); border: 0; background: transparent; color: var(--text-secondary); font-size: 14.5px; cursor: pointer; }
    .side-hamb:hover { background: var(--nav-hover-bg); }
    .chrome-top { padding: 0 16px; gap: 10px; }
    #page-wrapper { padding: 16px 16px 32px !important; }
}
@media (max-width: 767px) {
    .chrome-top { grid-template-columns: auto minmax(0, 1fr) auto; }
    .chrome-title { display: none; }
    .hsel .hsel-label { display: none; }
}

/* ---------- print ---------- */
@media print {
    :root { --app-zoom: 1; }
    html, body { background: #fff; }
    .chrome, .gsearch, .ExportFile, .side, .side-scrim { display: none !important; }
    #wrapper.app { display: block; }
    #page-wrapper { padding: 0 !important; }
    .fixedheader thead:not(.dontfix) { position: static !important; }
    #PageBody .table, .GridView, .TableListView, .Panel { box-shadow: none; border-color: #ddd !important; }
}