/* ============================================================
   modern.css — Vitro Construct IGU redesign
   Scoped under body.modern so untouched pages keep legacy look.
   Loads AFTER Main.css / Glass.css to win the cascade.
   ============================================================ */

/* Inter 400-700, self-hosted (was fonts.googleapis.com) — resolves relative to this file */
@import url('lib/inter/inter.css');

/* ---------- Design tokens ---------- */
body.modern {
    --color-bg: #f4f6f9;
    --color-surface: #ffffff;
    --color-surface-alt: #f8fafc;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-text-soft: #94a3b8;

    --color-primary: #005776;          /* Vitro deep petrol-blue (brand) */
    --color-primary-hover: #00859b;    /* Vitro teal (links/hover) */
    --color-primary-soft: #e5eef1;     /* Vitro soft teal tint */
    --color-accent: #84bd00;           /* Vitro lime green (CTA accent) */
    --color-accent-hover: #74a800;     /* darker lime for hover */
    --color-accent-soft: #eef6da;      /* light green tint */

    --color-success: #16a34a;
    --color-success-soft: #dcfce7;
    --color-warning: #d97706;
    --color-warning-soft: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;
    --color-info: #0284c7;
    --color-info-soft: #e0f2fe;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-num: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;

    --container-max: 1400px;
    --transition: 150ms ease-out;
}

/* ---------- Base reset (scoped) ---------- */
body.modern {
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.modern * {
    box-sizing: border-box;
}

body.modern h1,
body.modern h2,
body.modern h3,
body.modern h4 {
    font-family: var(--font-ui);
    color: var(--color-text);
    margin: 0;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.modern h1 { font-size: 24px; }
body.modern h2 { font-size: 18px; }
body.modern h3 { font-size: 16px; }
body.modern h4 { font-size: 14px; }

body.modern p {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0 0 var(--space-3);
}

body.modern a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}

body.modern a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ---------- Override legacy fixed-width containers ---------- */
body.modern #page_header,
body.modern #Enclose {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    background: transparent;
    padding: 0;
    height: auto;
}

body.modern #PPGBody {
    width: 100%;
    max-width: var(--container-max);
    margin: var(--space-5) auto;
    padding: 0 var(--space-5) var(--space-6);
    border: none;
    background: transparent;
}

body.modern .ClearIt { display: none; } /* float-clears no longer needed in flex/grid */

/* Kill the legacy floating popover tour boxes on Default.aspx. Color Calc's help
   bubbles are also .popover.fade, shown by its "Help" link, so leave them alone there. */
body.modern:not(.color-calc) .popover.fade {
    display: none !important;
}

/* The generic "select { width: auto }" below would let Bootstrap form controls grow
   to their longest option and spill out of their grid column (over Color Calc's Add button) */
body.modern.color-calc .form-select,
body.modern.color-calc .form-control {
    width: 100%;
}

/* color-calc.css gives .container-fluid font-size 1.5em, and the whole Color Calc app
   renders inside #svelteBody.container-fluid, so every page (products, projects,
   report modals) came out at ~21px. Bring the app back to the site's 14px. */
body.modern.color-calc #svelteBody,
body.modern.color-calc .modal-body {
    font-size: 14px;
}

/* Color Calc data tables (Configuration/Products, Projects): compact rows, aligned
   numbers. Header text keeps its case: a* / b* are case-sensitive colour terms. */
body.modern.color-calc #svelteBody .table {
    font-size: 14px;
    margin-bottom: var(--space-3);
}

body.modern.color-calc #svelteBody .table > :not(caption) > * > * {
    padding: 10px 12px;
    vertical-align: middle;
}

body.modern.color-calc #svelteBody .table thead td,
body.modern.color-calc #svelteBody .table thead th {
    font-size: 13px;
    font-weight: 600;
}

body.modern.color-calc #svelteBody .table td.cc-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.modern.color-calc #svelteBody .table td.cc-name {
    overflow-wrap: anywhere;
    line-height: 1.45;
}

body.modern.color-calc #svelteBody .pagination {
    margin-bottom: 0;
}

body.modern.color-calc #svelteBody .cc-pager-summary {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
}

/* Print settings logo drop zone: the generic .btn is a single nowrap line, which
   ignores its <br>s and runs the file name/messages out past the modal */
/* Browsers drop background colours when printing; the IGU diagram's sun, legend
   swatches and pane fallbacks are backgrounds, so keep them in printed reports */
body.modern.color-calc .igu-diagram,
body.modern.color-calc .igu-diagram *,
body.modern.color-calc #printableReport,
body.modern.color-calc #printableReport * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

body.modern.color-calc .btn-file {
    display: block;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.6;
    border: 2px dashed var(--color-border-strong);
}

/* ---------- Modern top nav ---------- */
body.modern #page_header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    max-width: none;
    width: 100%;
    margin: 0;
}

body.modern #header_container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

body.modern #header_container .pull-right {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
}

body.modern #menu-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
}

body.modern #menu-nav a {
    color: var(--color-text);
    text-decoration: none;
}

body.modern #menu-nav .mainbtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    transition: background var(--transition);
    position: relative;
    background: transparent;
    width: auto;
    height: auto;
}

body.modern #menu-nav .mainbtn:hover {
    background: var(--color-surface-alt);
}

body.modern #menu-nav .mainbtn .menu-item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
}

body.modern #menu-nav .mainbtn .menu-item img {
    width: 16px;
    height: 16px;
    filter: invert(15%) sepia(13%) saturate(800%) hue-rotate(180deg) brightness(95%);
}

body.modern #menu-nav .mainbtn.current {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

body.modern #menu-nav .mainbtn .menu-arrow {
    display: none; /* the old orange arrow indicator — replaced by background highlight */
}

body.modern #header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 13px;
    color: var(--color-text-muted);
    margin-left: auto;
}

body.modern #header-nav a {
    color: var(--color-text-muted);
}

body.modern #header-nav a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* ---------- Footer ---------- */
body.modern footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-7);
    padding: var(--space-5);
}

body.modern .footer_text {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 var(--space-2);
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

body.modern .footer_text a {
    color: var(--color-primary);
}

/* ---------- Card / Section primitive ---------- */
body.modern .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

body.modern .card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--color-surface-alt);
}

body.modern .card-header h2 {
    font-size: 16px;
    font-weight: 600;
}

body.modern .card-body {
    padding: var(--space-5);
}

/* ---------- Hero / page header card ---------- */
body.modern .page-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #00859b 100%);
    color: white;
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

body.modern .page-hero h1 {
    color: white;
    font-size: 22px;
    margin-bottom: var(--space-1);
}

body.modern .page-hero p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    margin: 0;
    max-width: 720px;
}

body.modern .page-hero .hero-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
body.modern .btn,
body.modern .buttonNext,
body.modern input[type="submit"].buttonNext,
body.modern input[type="button"].buttonNext,
body.modern button.buttonNext,
body.modern .color-calc-btn,
body.modern .color-calc-btn-product {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
    min-height: 34px;
    white-space: nowrap;
}

body.modern .btn:hover,
body.modern .buttonNext:hover,
body.modern .color-calc-btn:hover,
body.modern .color-calc-btn-product:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-border-strong);
    color: var(--color-text-muted) !important;
    text-decoration: none;
}

body.modern .btn:disabled,
body.modern .buttonNext:disabled,
body.modern .buttonNext[disabled],
body.modern .color-calc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.modern .btn-primary,
body.modern .color-calc-btn-primary,
body.modern #btnCalculate.buttonNext {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

body.modern .btn-primary:hover,
body.modern .color-calc-btn-primary:hover,
body.modern #btnCalculate.buttonNext:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: white;
}

body.modern .btn-accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

body.modern .btn-accent:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: white;
}

body.modern .btn-ghost {
    background: transparent;
    border-color: transparent;
}

body.modern .btn-ghost:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

body.modern .btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: 12px;
    min-height: 28px;
}

/* ---------- Form controls ---------- */
body.modern input[type="text"],
body.modern input[type="email"],
body.modern input[type="number"],
body.modern textarea,
body.modern select,
body.modern .styled-select select,
body.modern .styled-select-product select,
body.modern input.text,
body.modern .text {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    min-height: 34px;
    line-height: 1.2;
    transition: border-color var(--transition), box-shadow var(--transition);
    width: auto;
}

body.modern input[type="text"]:focus,
body.modern input[type="email"]:focus,
body.modern input[type="number"]:focus,
body.modern textarea:focus,
body.modern select:focus,
body.modern .styled-select select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

body.modern .styled-select,
body.modern .styled-select-product {
    background: transparent;
    padding: 0;
    border: none;
    overflow: visible;
    height: auto;
    width: auto;
    display: inline-block;
}

body.modern .styled-select select,
body.modern .styled-select-product select {
    width: 100%;
    min-width: 160px;
}

body.modern fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin: 0;
}

body.modern legend {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 0 var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.modern label {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--color-text);
}

/* ---------- Pane / layer-selector chip buttons (Single/Double/Triple) ---------- */
body.modern .PaneButtons {
    display: inline-flex;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
    padding: 0;
}

body.modern .PaneButtons a {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
    border-right: 1px solid var(--color-border);
    transition: all var(--transition);
    background: transparent;
    border-radius: 0;
}

body.modern .PaneButtons a:last-child { border-right: none; }
body.modern .PaneButtons a:hover { background: var(--color-surface-alt); color: var(--color-primary); }

body.modern .PaneButtons a.On {
    background: var(--color-primary);
    color: white;
}

/* ---------- Accordion (AjaxControlToolkit) ---------- */
body.modern .accordionHeader,
body.modern .accordionHeaderSelected {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--transition);
}

body.modern .accordionHeader:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-alt);
}

body.modern .accordionHeaderSelected {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    margin-bottom: 0;
}

body.modern .accordionHeader img,
body.modern .accordionHeaderSelected img {
    width: 18px;
    height: 18px;
    margin-right: var(--space-1);
}

body.modern .accordionHeader .lblHeader,
body.modern .accordionHeaderSelected .lblHeader {
    margin-left: auto;
    font-weight: 400;
    font-size: 12px;
    color: var(--color-text-muted);
}

body.modern .accordionContent {
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-top: none;
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-2);
    font-size: 13px;
}

body.modern .accordionContent table {
    width: 100%;
    font-family: var(--font-ui);
    font-size: 13px;
}

body.modern .accordionContent td {
    padding: var(--space-2);
    vertical-align: middle;
}

/* ---------- Results table ---------- */
body.modern .ResultsList {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-ui);
    font-size: 13px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

body.modern .ResultsList thead tr.table_head {
    background: var(--color-surface-alt);
}

body.modern .ResultsList thead th {
    padding: var(--space-3) var(--space-3);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: bottom;
    background: var(--color-surface-alt);
}

body.modern .ResultsList tbody td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    background: var(--color-surface);
}

body.modern .ResultsList tbody tr:last-child td {
    border-bottom: none;
}

body.modern .ResultsList tbody tr.Odd,
body.modern .ResultsList tbody tr.Even {
    background: transparent;
}

body.modern .ResultsList tbody tr:hover td {
    background: var(--color-primary-soft);
}

body.modern .ResultsList .color-icon {
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    width: 36px;
    height: 36px;
}

body.modern .ResultsList .continue {
    color: var(--color-primary);
    font-weight: 500;
}

body.modern .ResultsList .gallery,
body.modern .ResultsList img[src*="gallery.png"] {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    transition: opacity var(--transition);
}

body.modern .ResultsList .gallery:hover { opacity: 1; }

/* ---------- Toolbar / utility row ---------- */
body.modern .utility-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

body.modern .utility-row .btn-group {
    display: inline-flex;
    gap: var(--space-2);
}

body.modern #sdtoolbar {
    background: transparent !important;
    text-align: left !important;
    padding: 0;
}

body.modern #sdtoolbar > div {
    display: flex !important;
    justify-content: flex-end !important;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

body.modern #userEmailLabel,
body.modern #userProjectLabel {
    margin: 0 var(--space-3) 0 0 !important;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* ---------- Help / hero strip ---------- */
body.modern #helpSection {
    background: linear-gradient(135deg, var(--color-primary) 0%, #00859b 100%) !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 0 var(--space-5) !important;
    padding: var(--space-4) var(--space-5) !important;
    border-radius: var(--radius-md);
    color: white;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    filter: none;
}

body.modern #helpSection div {
    display: block;
    vertical-align: initial;
}

body.modern #helpSection #headTitle {
    width: auto !important;
    border-right: none !important;
    margin: 0 !important;
    padding-right: var(--space-5);
    border-right: 1px solid rgba(255,255,255,0.2) !important;
    flex-shrink: 0;
}

body.modern #helpSection #headTitle label,
body.modern #helpSection #headTitle .helvetica {
    font-family: var(--font-ui) !important;
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin: 0;
    letter-spacing: -0.01em;
}

body.modern #helpSection #headInfo {
    width: auto !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13px !important;
    line-height: 1.6;
    text-align: left !important;
}

body.modern #helpSection #headInfo div,
body.modern #helpSection #headInfo label {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.6;
    display: inline;
}

body.modern .help-link {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-pill);
    color: white !important;
    font-size: 12px;
    cursor: pointer;
    margin-top: var(--space-2);
}

body.modern .help-link:hover {
    background: rgba(255, 255, 255, 0.25);
}

body.modern .help-link .div-help-text {
    color: white;
}

body.modern .help-link img {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
}

/* ---------- Stepper ---------- */
body.modern .stepper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

body.modern .stepper-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--color-text-muted);
}

body.modern .stepper-item.active {
    color: var(--color-primary);
    font-weight: 600;
}

body.modern .stepper-item.done {
    color: var(--color-success);
}

body.modern .stepper-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

body.modern .stepper-item.active .stepper-num {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

body.modern .stepper-item.done .stepper-num {
    background: var(--color-success);
    color: white;
    border-color: var(--color-success);
}

body.modern .stepper-sep {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    max-width: 80px;
}

/* ---------- Workbench layout (Default.aspx) ---------- */
body.modern .workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

@media (max-width: 1100px) {
    body.modern .workbench { grid-template-columns: 1fr; }
}

body.modern #ColLeft_new,
body.modern section#ColLeft_new {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

body.modern #ColRight,
body.modern section#ColRight {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) !important;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 80px;
    align-self: start;
}

body.modern .PaneNumber,
body.modern article.PaneNumber {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5) !important;
    box-shadow: var(--shadow-sm);
    margin: 0 !important;
}

body.modern .PaneNumber h1 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

body.modern .PaneImages {
    text-align: center;
}

body.modern .PaneImages label img,
body.modern .PaneImages img {
    max-width: 100%;
    height: auto;
}

/* Notes under the diagram (laminate, Solarban 70 *, tilt, krypton) built in
   Default.aspx.vb - sized to the right column instead of the old fixed 425px */
body.modern .diagram-note {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    margin: var(--space-3) 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 1.4;
    color: #6D6D6D;
    text-align: left;
    overflow-wrap: break-word;
}

/* ---------- Modal popups ---------- */
body.modern .modalBackground {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

body.modern .modalPopup,
body.modern .bp-modal {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 0 !important;
    font-family: var(--font-ui);
    overflow: hidden;
}

body.modern .popupHeader,
body.modern .bp-modal-header,
body.modern .color-calc-modal-header {
    background: var(--color-surface-alt);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.modern .bp-modal-header .close,
body.modern .popupHeader .close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0 var(--space-2);
}

body.modern .bp-modal-header .close:hover { color: var(--color-text); }

body.modern .bp-modal-body,
body.modern .color-calc-modal-body {
    padding: var(--space-5);
    font-size: 14px;
}

body.modern .color-calc-modal-title {
    flex: 1;
}

body.modern .color-calc-modal-title span {
    font-size: 15px;
    font-weight: 600;
}

/* The bp-modal markup puts the × before the title; show it at the right edge like
   every other dialog instead of in front of the title */
body.modern .bp-modal-header .close {
    order: 2;
    margin-left: var(--space-3);
}

/* ---------- Projects popup (Default.aspx) ---------- */
body.modern #projectManagerConst {
    width: 760px;
    max-width: calc(100vw - 32px);
    margin-left: 0;
    transform: translateX(-50%);
}

body.modern #projectManagerConst.fade.in {
    top: 8vh;
}

body.modern #projectManagerConst .pm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) 0;
}

body.modern #projectManagerConst .pm-filter {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

body.modern #projectManagerConst .pm-filter select {
    width: auto;
    min-width: 140px;
}

body.modern #projectManagerConst .pm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* the DataTable scrolls itself (scrollY); a second scroll area here gave two scrollbars */
body.modern #projectManagerConst .pm-body {
    max-height: none;
    overflow: visible;
    padding-top: var(--space-3);
    padding-bottom: 0;
}

body.modern #projectManagerConst .pm-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* DataTables in scroll mode keeps a zero-height copy of the header inside the scrolling
   body to size the columns. The shared header styling below (padding / border with
   !important) gave that copy height, so a second, empty header row showed under the
   real one. Collapse it again. */
body.modern div.dt-scroll-body > table.dataTable > thead > tr > th,
body.modern div.dt-scroll-body > table#projectsTable > thead > tr > th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

body.modern div.dt-scroll-body > table.dataTable > thead .dt-column-order,
body.modern div.dt-scroll-body > table.dataTable > thead th::before,
body.modern div.dt-scroll-body > table.dataTable > thead th::after {
    display: none !important;
}

/* ---------- Spec sheet (details.aspx) ---------- */
body.modern .spec-table {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

body.modern .spec-header {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

body.modern .spec-header .spec-icon {
    width: 18px;
    height: 18px;
}

body.modern .spec-header .spec-icon img {
    width: 18px;
    height: 18px;
}

body.modern .spec-header .spec-text {
    font-family: var(--font-ui) !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

body.modern .spec-table > div:not(.spec-header) {
    padding: var(--space-4);
}

body.modern .spec-table .PrDetails {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.6;
    margin: var(--space-2) 0;
}

body.modern .configname,
body.modern .spec-table b {
    font-family: var(--font-ui);
    font-weight: 600;
}

/* ---------- Toolbar on details.aspx ---------- */
body.modern #toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

body.modern #toolbar a,
body.modern #toolbar .Print,
body.modern #toolbar .customize,
body.modern #toolbar .Pdf,
body.modern #toolbar .BIM,
body.modern #toolbar .word,
body.modern #toolbar .email,
body.modern #toolbar .fp {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition);
    background-image: none !important;
    padding-left: var(--space-3) !important;
}

body.modern #toolbar a:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

body.modern #toolbar .BIMhelp { font-size: 11px; color: var(--color-text-muted); }

body.modern .goTop {
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    font-size: 12px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

body.modern .goTop:hover { background: var(--color-primary-soft); }

/* ---------- Pills / badges ---------- */
body.modern .pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

body.modern .pill-primary { background: var(--color-primary-soft); color: var(--color-primary); }
body.modern .pill-success { background: var(--color-success-soft); color: var(--color-success); }
body.modern .pill-warning { background: var(--color-warning-soft); color: var(--color-warning); }
body.modern .pill-danger { background: var(--color-danger-soft); color: var(--color-danger); }

/* ---------- Alerts ---------- */
body.modern .alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-warning);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: 13px;
}

body.modern .alert.alert-error {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* ---------- Tooltip (override legacy jQuery tooltip) ---------- */
body.modern .tooltip {
    background-color: var(--color-text) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-2) var(--space-3) !important;
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    box-shadow: var(--shadow-md) !important;
    max-width: 320px !important;
}

/* ---------- Loading overlay ---------- */
body.modern .divWaiting {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-3);
    z-index: 9999;
    backdrop-filter: blur(2px);
}

body.modern .auto-saving-loading {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-md);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
}

/* ---------- DataTable polish (when used on results) ---------- */
body.modern table.dataTable {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

body.modern .dataTables_wrapper .dataTables_filter input,
body.modern .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 4px 8px;
    font-family: var(--font-ui);
    font-size: 13px;
}

body.modern .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-md) !important;
    border: 1px solid transparent !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
}

body.modern .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

/* ---------- Responsive shrink ---------- */
@media (max-width: 900px) {
    body.modern #header_container {
        flex-direction: column;
        height: auto;
        padding: var(--space-3);
        gap: var(--space-2);
    }
    body.modern #menu-nav { flex-wrap: wrap; justify-content: center; }
    body.modern .page-hero { flex-direction: column; align-items: stretch; text-align: left; }
    body.modern #helpSection { flex-direction: column; align-items: stretch; }
    body.modern #helpSection #headTitle { border-right: none !important; padding-right: 0; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: var(--space-3); }
    body.modern .ResultsList { font-size: 12px; }
    body.modern .ResultsList thead th { font-size: 10px; padding: var(--space-2); }
    body.modern .ResultsList tbody td { padding: var(--space-2); }
    /* Allow horizontal scroll on small screens rather than stack */
    body.modern #result-view { overflow-x: auto; }
    body.modern .workbench { gap: var(--space-3); }
    body.modern #ColRight { position: static; }
}

/* ============================================================
   Icon overhaul — replace legacy PNGs with inline SVG masks.
   mask-image keeps icons crisp and inheriting currentColor,
   so they tint correctly on hover and dark/light backgrounds.
   ============================================================ */

/* ---------- Brand logo / wordmark ---------- */
body.modern #header_container {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: 0 var(--space-5);
    height: 64px;
    max-width: var(--container-max);
    margin: 0 auto;
    justify-content: flex-start;
}

body.modern .brand-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

body.modern .brand-logo:hover {
    text-decoration: none;
    color: var(--color-primary);
    background: var(--color-surface-alt);
}

body.modern .brand-logo .brand-mark { flex-shrink: 0; }
body.modern .brand-logo .brand-text { font-weight: 400; color: var(--color-text-muted); }
body.modern .brand-logo .brand-text strong { font-weight: 700; color: var(--color-primary); }
body.modern .brand-logo:hover .brand-text { color: var(--color-text); }

/* Re-order header zones: logo | menu (center) | utility nav (right) */
body.modern #header_container .pull-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    width: auto;
}

body.modern #menu-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    justify-content: flex-start;
}

body.modern #header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--color-text-muted);
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------- Header menu: replace white-on-blue PNGs with SVG masks ---------- */
body.modern #menu-nav .mainbtn .menu-item img {
    display: none !important; /* hide the legacy PNG */
}

body.modern #menu-nav .mainbtn::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: var(--space-2);
    background-color: currentColor;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    flex-shrink: 0;
}

/* Glass eVIEW (MVC layout) → home icon */
body.modern #menu-nav #eview::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>');
}

/* View Products (MVC layout) → eye icon */
body.modern #menu-nav #viewproducts::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>');
}

/* Vitro Sphere → globe */
body.modern #menu-nav #vitrosphere::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 1 0 20 14.5 14.5 0 0 1 0-20"/><path d="M2 12h20"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 1 0 20 14.5 14.5 0 0 1 0-20"/><path d="M2 12h20"/></svg>');
}

/* Search Products → magnifying glass */
body.modern #menu-nav #searchproducts::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>');
}

/* Construct IGUs → stacked layers (current page indicator) */
body.modern #menu-nav #config::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 8 4-8 4-8-4 8-4z"/><path d="m4 10 8 4 8-4"/><path d="m4 14 8 4 8-4"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 8 4-8 4-8-4 8-4z"/><path d="m4 10 8 4 8-4"/><path d="m4 14 8 4 8-4"/></svg>');
}

/* Project Gallery → image */
body.modern #menu-nav #gallery::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');
}

/* Order Samples → package */
body.modern #menu-nav #sample::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.3 7 12 12l8.7-5"/><path d="M12 22V12"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.3 7 12 12l8.7-5"/><path d="M12 22V12"/></svg>');
}

/* Color Calculator → palette */
body.modern #menuColorCalc .mainbtn::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: var(--space-2);
    background-color: currentColor;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="black"/><circle cx="17.5" cy="10.5" r=".5" fill="black"/><circle cx="8.5" cy="7.5" r=".5" fill="black"/><circle cx="6.5" cy="12.5" r=".5" fill="black"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="black"/><circle cx="17.5" cy="10.5" r=".5" fill="black"/><circle cx="8.5" cy="7.5" r=".5" fill="black"/><circle cx="6.5" cy="12.5" r=".5" fill="black"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>');
}

body.modern #menuColorCalc .mainbtn .menu-item span { background: transparent; padding: 0; }
/* Strip the legacy 🌎 emoji prefix; the SVG ::before above is the new icon. */
body.modern #menuColorCalc .mainbtn .menu-item span {
    font-size: 0; /* hide the span text */
}
body.modern #menuColorCalc .mainbtn .menu-item span::after {
    content: "Color Calculator";
    font-size: 13px;
    font-weight: 500;
}

/* ---------- Toolbar buttons (details.aspx): replace background PNGs ---------- */
body.modern #toolbar a {
    background: var(--color-surface) !important; /* kill Glass.css background shorthand */
}

body.modern #toolbar a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    flex-shrink: 0;
}

body.modern #toolbar a.BIMhelp::before { display: none; } /* "(Help)" link stays text-only */

body.modern #toolbar a.Print::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>');
}

body.modern #toolbar a.Pdf::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><line x1="10" x2="8" y1="9" y2="9"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><line x1="10" x2="8" y1="9" y2="9"/></svg>');
}

body.modern #toolbar a.BIM::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>');
}

body.modern #toolbar a.customize::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="2" x2="6" y1="14" y2="14"/><line x1="10" x2="14" y1="8" y2="8"/><line x1="18" x2="22" y1="16" y2="16"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="2" x2="6" y1="14" y2="14"/><line x1="10" x2="14" y1="8" y2="8"/><line x1="18" x2="22" y1="16" y2="16"/></svg>');
}

body.modern #toolbar a.email::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>');
}

body.modern #toolbar a.word::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" x2="15" y1="13" y2="13"/><line x1="9" x2="15" y1="17" y2="17"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" x2="15" y1="13" y2="13"/><line x1="9" x2="15" y1="17" y2="17"/></svg>');
}

body.modern #toolbar a.fp::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/></svg>');
}

/* "Modify List" link is class=customize too; differentiate by href contains Default */
body.modern #toolbar a.customize[href*="Default"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>');
}

/* asp:LinkButton (Email PDF, 3 Part Spec) renders as <a> with same class — no extra wiring needed */

/* ---------- Results table & spec sheet small icons ---------- */
/* Hide the LabelIcon / Gallery / Word / Reviticon PNGs inside <a> tags and inject SVGs.
   The Add/Delete buttons are asp:ImageButton which renders <input type=image> — we
   restyle those via filter instead (no pseudo-element support on inputs). */

body.modern .ResultsList a img[src*="gallery.png" i],
body.modern .ResultsList a img[src*="LabelIcon.png" i],
body.modern .ResultsList a img[src*="word.png" i],
body.modern .ResultsList a img[src*="reviticon.png" i],
body.modern .ResultsList a img[src*="fplogo_s" i],
body.modern .spec-table a img[src*="gallery" i],
body.modern .spec-table a img[src*="LabelIcon.png" i],
body.modern .spec-table a img[src*="reviticon.png" i],
body.modern .spec-table a img[src*="word.png" i],
body.modern .spec-table a img[src*="fplogo_s" i] {
    display: none !important;
}

body.modern .ResultsList a.gallery,
body.modern .ResultsList a:has(img[src*="gallery" i]),
body.modern .spec-table a:has(img[src*="gallery" i]),
body.modern .spec-table a:has(img[src*="LabelIcon" i]),
body.modern .spec-table a:has(img[src*="reviticon" i]),
body.modern .spec-table a:has(img[src*="word" i]),
body.modern .spec-table a:has(img[src*="fplogo_s" i]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    transition: all var(--transition);
    text-decoration: none;
    margin-left: var(--space-1);
}

body.modern .spec-table a:has(img[src*="gallery" i]):hover,
body.modern .spec-table a:has(img[src*="LabelIcon" i]):hover,
body.modern .spec-table a:has(img[src*="reviticon" i]):hover,
body.modern .spec-table a:has(img[src*="word" i]):hover,
body.modern .spec-table a:has(img[src*="fplogo_s" i]):hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

body.modern .spec-table a:has(img[src*="gallery" i])::before,
body.modern .ResultsList a:has(img[src*="gallery" i])::before,
body.modern .spec-table a:has(img[src*="LabelIcon" i])::before,
body.modern .spec-table a:has(img[src*="reviticon" i])::before,
body.modern .spec-table a:has(img[src*="word" i])::before,
body.modern .spec-table a:has(img[src*="fplogo_s" i])::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

body.modern .spec-table a:has(img[src*="gallery" i])::before,
body.modern .ResultsList a:has(img[src*="gallery" i])::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');
}

body.modern .spec-table a:has(img[src*="LabelIcon" i])::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><circle cx="7" cy="7" r="1.5"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><circle cx="7" cy="7" r="1.5"/></svg>');
}

body.modern .spec-table a:has(img[src*="reviticon" i])::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>');
}

body.modern .spec-table a:has(img[src*="word" i])::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" x2="15" y1="13" y2="13"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" x2="15" y1="13" y2="13"/></svg>');
}

body.modern .spec-table a:has(img[src*="fplogo_s" i])::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/></svg>');
}

/* In-row asp:ImageButton (Add/Delete) — these render as <input type=image>, can't use pseudo.
   Subtle filter to recolor them into a muted tone that fits the new palette. */
body.modern input[type="image"][src*="add.png" i],
body.modern input[type="image"][src*="delete.png" i] {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.6;
    transition: opacity var(--transition), transform var(--transition);
}

body.modern input[type="image"][src*="add.png" i]:hover,
body.modern input[type="image"][src*="delete.png" i]:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Help icon / alert images — keep but soften */
body.modern img[src*="help-icon.png" i],
body.modern img[src*="alert.png" i],
body.modern img[src*="alert-blue.png" i] {
    opacity: 0.8;
}

/* ---------- Page-hero gradient deepening for the hero strip ---------- */
body.modern #helpSection.construct,
body.modern #helpSection.details {
    background: linear-gradient(135deg, var(--color-primary) 0%, #00859b 60%, #00c1d5 100%) !important;
}

/* ---------- Slight refinement of hero head title ---------- */
body.modern #helpSection #headTitle::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: var(--space-2);
    vertical-align: middle;
    background-color: white;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 8 4-8 4-8-4 8-4z"/><path d="m4 10 8 4 8-4"/><path d="m4 14 8 4 8-4"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 8 4-8 4-8-4 8-4z"/><path d="m4 10 8 4 8-4"/><path d="m4 14 8 4 8-4"/></svg>');
    opacity: 0.95;
}

body.modern #helpSection.details #headTitle::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/></svg>');
}

/* ---------- Spec-header icon: replace alert-blue.png ---------- */
body.modern .spec-header .spec-icon img { display: none !important; }
body.modern .spec-header .spec-icon::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--color-primary);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
}

/* ---------- Accordion header icons: replace glass-icon-grey.png / air-icon-grey.png ---------- */
body.modern .accordionHeader img[src*="glass-icon" i],
body.modern .accordionHeaderSelected img[src*="glass-icon" i],
body.modern .accordionHeader img[src*="air-icon" i],
body.modern .accordionHeaderSelected img[src*="air-icon" i] {
    display: none !important;
}

body.modern .accordionHeader::before,
body.modern .accordionHeaderSelected::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: var(--space-2);
    background-color: currentColor;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><line x1="4" y1="9" x2="20" y2="9"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><line x1="4" y1="9" x2="20" y2="9"/></svg>');
    opacity: 0.85;
}

/* Cavity panes show a different icon */
body.modern .accordionHeader:has(img[src*="air-icon" i])::before,
body.modern .accordionHeaderSelected:has(img[src*="air-icon" i])::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h6"/><path d="M22 12h-6"/><path d="M12 2v6"/><path d="M12 22v-6"/><circle cx="12" cy="12" r="3"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h6"/><path d="M22 12h-6"/><path d="M12 2v6"/><path d="M12 22v-6"/><circle cx="12" cy="12" r="3"/></svg>');
}

/* ---------- Modal close button (the legacy "X" LinkButton) ---------- */
body.modern .popupHeader .close,
body.modern .bp-modal-header .close,
body.modern .popupHeader a[onclientclick*="btnOkErr"] {
    background: transparent !important;
    border: none !important;
    font-size: 22px !important;
    color: var(--color-text-muted) !important;
    cursor: pointer;
    padding: 4px 8px !important;
    line-height: 1 !important;
    border-radius: var(--radius-sm);
}

/* Responsive: tighten header on small */
@media (max-width: 900px) {
    body.modern #header_container {
        flex-wrap: wrap;
        height: auto;
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
    }
    body.modern .brand-logo .brand-text { display: none; } /* keep just the mark */
    body.modern #header-nav { font-size: 12px; }
}

/* ---------- Print styles ---------- */
@media print {
    body.modern { background: white; }
    body.modern #page_header,
    body.modern footer,
    body.modern #toolbar,
    body.modern .stepper,
    body.modern #helpSection { display: none !important; }
    body.modern .card,
    body.modern .spec-table { box-shadow: none; break-inside: avoid; }
}

/* ============================================================
   Legacy-override layer.
   Main.css ships several hard-coded values with !important and
   fixed widths/heights from the 2012-era design. The rules below
   defeat those specifically.
   ============================================================ */

/* --- Header: kill the legacy logo background-image + forced 100px height --- */
body.modern #header_container {
    background-image: none !important;
    background: transparent !important;
    height: 64px !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 0 var(--space-5) !important;
    z-index: 100;
}

body.modern #page_header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
    background: var(--color-surface) !important;
}

/* Footer image background was a faded blue gif — drop it for a clean line */
body.modern footer {
    background-image: none !important;
}

/* --- PaneButtons: defeat width:90px / height:25px / float / inset shadow --- */
body.modern .PaneButtons {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

body.modern .PaneButtons a,
body.modern .PaneButtons a.First,
body.modern .PaneButtons a.Last,
body.modern .PaneButtons a.FirstOn,
body.modern .PaneButtons a.LastOn,
body.modern .PaneButtons a.On {
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 84px;
    line-height: normal !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background-image: none !important;
    text-transform: none !important;
    border-radius: 0 !important;
}

body.modern .PaneButtons a:not(.On) {
    background: var(--color-surface) !important;
    color: var(--color-text-muted) !important;
}

body.modern .PaneButtons a.On,
body.modern .PaneButtons a.FirstOn,
body.modern .PaneButtons a.LastOn {
    background: var(--color-primary) !important;
    color: white !important;
}

body.modern .PaneButtons a:hover:not(.On) {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
}

/* --- Recolor the orange "OUTDOOR LITE:" / "MIDDLE LITE:" labels --- */
body.modern .DescTitle {
    color: var(--color-primary) !important;
    font-family: var(--font-ui) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: var(--space-2) 0 var(--space-1) !important;
}

/* The text that follows DescTitle (the product name + manufacturer) */
body.modern .ResultsList td.FirstChild p,
body.modern .ResultsList .DescChild,
body.modern .ResultsList .DescChild a {
    font-family: var(--font-ui) !important;
    font-size: 13px;
    color: var(--color-text) !important;
    line-height: 1.5;
    margin: 0;
}

/* --- Configurations table headers: more contrast, less washed-out --- */
body.modern .ResultsList thead th,
body.modern .ResultsList thead th .qtip_content {
    color: var(--color-text) !important;
    font-weight: 700 !important;
    background: var(--color-surface-alt) !important;
}

/* The "measurement-title" small print under "WINTER U-VALUE" stays muted */
body.modern .ResultsList thead th .measurement-title {
    color: var(--color-text-muted) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    font-size: 10px;
    letter-spacing: normal;
}

/* Data cells: ensure full-contrast text */
body.modern .ResultsList tbody td {
    color: var(--color-text) !important;
    font-family: var(--font-ui) !important;
}

body.modern .ResultsList tbody td a.continue {
    color: var(--color-primary) !important;
    font-weight: 600;
}

/* --- Row action ImageButtons (Add / Delete): wrap them in proper button shells --- */
body.modern input[type="image"][src*="add.png" i],
body.modern input[type="image"][src*="delete.png" i] {
    width: 32px !important;
    height: 32px !important;
    padding: 7px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--color-surface) !important;
    box-sizing: border-box !important;
    object-fit: contain;
    transition: all var(--transition);
    opacity: 0.75;
    margin: 0 var(--space-1);
    vertical-align: middle;
}

body.modern input[type="image"][src*="add.png" i]:hover {
    opacity: 1;
    transform: none;
    border-color: var(--color-success) !important;
    background-color: var(--color-success-soft) !important;
}

body.modern input[type="image"][src*="delete.png" i]:hover {
    opacity: 1;
    transform: none;
    border-color: var(--color-danger) !important;
    background-color: var(--color-danger-soft) !important;
}

/* FenestraPro tiny logo in row also gets a button shell */
body.modern .ResultsList img[src*="fplogo_s" i] {
    width: 18px;
    height: 18px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-sizing: content-box;
    transition: all var(--transition);
    vertical-align: middle;
    opacity: 0.85;
}

body.modern .ResultsList img[src*="fplogo_s" i]:hover {
    opacity: 1;
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

/* Duplicate / + Color Calc buttons sit nicer side-by-side */
body.modern .ResultsList td .color-calc-btn-product {
    margin: 2px;
    min-height: 30px;
    font-size: 12px;
}

/* --- Color swatch in first column (the small 35x35 product color tile) --- */
body.modern .ResultsList .color-icon {
    border-radius: var(--radius-md);
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 0 1px var(--color-border);
    width: 44px !important;
    height: 44px !important;
    display: block;
    margin-bottom: var(--space-1);
}

/* The small gallery icon under the swatch */
body.modern .ResultsList .gallery {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.6;
    margin-top: 2px;
}

body.modern .ResultsList .gallery:hover { opacity: 1; }

/* --- "Configurations" section heading wants some breathing room --- */
body.modern #result-view {
    margin-top: var(--space-4);
}

/* --- Compare fieldset (Max N products / Compare button) cleanup --- */
body.modern #result-view + div fieldset,
body.modern .panel-data fieldset {
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

/* ============================================================
   Round-3 polish: row actions, color column, compare panel.
   ============================================================ */

/* --- COLOR column: tidy stack of swatch + Continue + 3 Part + gallery --- */
body.modern .ResultsList td.FirstChild {
    width: 88px;
    text-align: center;
    padding: var(--space-3) var(--space-2) !important;
}

body.modern .ResultsList td.FirstChild > a:first-child {
    display: inline-block;
    line-height: 0;
}

body.modern .ResultsList td.FirstChild .color-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    display: inline-block;
    margin: 0 auto var(--space-2);
}

body.modern .ResultsList td.FirstChild p {
    margin: var(--space-1) 0 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

body.modern .ResultsList td.FirstChild a.continue {
    display: inline-block;
    width: 100%;
    padding: 6px 10px;
    background: var(--color-primary);
    color: white !important;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background var(--transition);
}

body.modern .ResultsList td.FirstChild a.continue:hover {
    background: var(--color-primary-hover);
    color: white !important;
}

body.modern .ResultsList td.FirstChild a.tps {
    font-size: 10px;
    color: var(--color-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
}

body.modern .ResultsList td.FirstChild a.tps:hover {
    color: var(--color-primary) !important;
    background: var(--color-primary-soft);
}

/* --- Action column (last column with Duplicate / Color Calc / Compare / Delete / FP) --- */
body.modern .ResultsList tbody td:last-child {
    width: 130px;
    padding: var(--space-3) var(--space-2) !important;
    text-align: center;
}

body.modern .ResultsList tbody td:last-child .color-calc-btn-product {
    display: block !important;
    width: 100%;
    margin: 0 0 var(--space-1) 0 !important;
    min-height: 30px;
    font-size: 12px;
    text-align: center;
}

/* Wrap the small icon buttons (compare / delete / FP) in a horizontal row */
body.modern .ResultsList tbody td:last-child input[type="image"],
body.modern .ResultsList tbody td:last-child img[src*="fplogo_s" i] {
    display: inline-block;
    vertical-align: middle;
    margin: 4px 2px 0 !important;
}

/* --- Replace asp:ImageButton add.png and delete.png with inline SVG via CSS `content` --- */
/* `content` on <input type="image"> replaces the rendered image without touching codebehind. */

body.modern input[type="image"][src*="add.png" i] {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23475569" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') !important;
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--color-surface) !important;
    box-sizing: border-box !important;
    transition: all var(--transition);
    /* hide any leftover alt-text rendering when image fails */
    color: transparent !important;
    font-size: 0 !important;
}

body.modern input[type="image"][src*="add.png" i][alt="Remove" i] {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23dc2626" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>') !important;
    border-color: var(--color-danger) !important;
    background-color: var(--color-danger-soft) !important;
}

body.modern input[type="image"][src*="add.png" i]:hover {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary-soft) !important;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231A3B69" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') !important;
}

body.modern input[type="image"][src*="delete.png" i] {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23475569" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>') !important;
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--color-surface) !important;
    box-sizing: border-box !important;
    transition: all var(--transition);
    color: transparent !important;
    font-size: 0 !important;
}

body.modern input[type="image"][src*="delete.png" i]:hover {
    border-color: var(--color-danger) !important;
    background-color: var(--color-danger-soft) !important;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23dc2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>') !important;
}

/* --- FenestraPro mini-icon (uses <image> tag with fplogo_s.png) --- */
body.modern .ResultsList img[src*="fplogo_s" i],
body.modern .ResultsList image[src*="fplogo_s" i] {
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-surface) !important;
    box-sizing: border-box !important;
    transition: all var(--transition);
    opacity: 1;
    object-fit: contain;
}

body.modern .ResultsList img[src*="fplogo_s" i]:hover,
body.modern .ResultsList image[src*="fplogo_s" i]:hover {
    border-color: var(--color-primary) !important;
    background: var(--color-primary-soft) !important;
}

/* ============================================================
   Compare tray — the "select products to compare" panel that sits
   above the configuration cards (replaces the legacy "Max N products"
   floated fieldset).
   ============================================================ */
body.modern .compare-tray {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin: 0 0 var(--space-5);
}

body.modern .compare-tray-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-surface-alt) 100%);
    border-bottom: 1px solid var(--color-border);
}

body.modern .compare-tray-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

body.modern .compare-tray-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

body.modern .compare-tray-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

body.modern .compare-tray-sub {
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

body.modern .compare-tray-sub b { color: var(--color-primary); }

body.modern .compare-tray-head .buttonNext {
    flex: none;
    min-height: 40px;
    padding: var(--space-2) var(--space-5);
    font-size: 14px;
    font-weight: 600;
}

body.modern .compare-tray-body {
    padding: var(--space-4) var(--space-5);
}

body.modern .compare-tray-swatches {
    display: block;
    min-height: 44px;
}

/* Empty-state hint shown before any product is added */
body.modern .compare-tray-swatches:empty::before {
    content: attr(data-empty);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-3);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-text-soft);
    font-size: 13px;
    font-style: italic;
    text-align: center;
}

/* --- divCompare panel: the codebehind-generated selected-product swatch row --- */
body.modern #divCompare table {
    border-collapse: separate !important;
    border-spacing: 14px 8px !important;
    margin: 0 -14px;   /* offset the outer border-spacing so the row aligns flush */
}

body.modern #divCompare td {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    vertical-align: middle;
}

/* Each selected product = a self-contained chip: swatch + corner remove badge */
body.modern .compare-chip {
    position: relative;
    display: inline-block;
    line-height: 0;
}

body.modern .compare-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    display: block;
    transition: border-color var(--transition), box-shadow var(--transition);
}

body.modern .compare-chip:hover .compare-icon {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

body.modern .compare-remove {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    color: var(--color-danger);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    z-index: 2;
    transition: all var(--transition);
}

body.modern .compare-remove:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
    text-decoration: none;
}

/* --- The fieldset surrounding the compare panel ---  */
body.modern .panel-data fieldset,
body.modern fieldset legend[align="right"] + table,
body.modern fieldset:has(legend:contains("Max")) {
    /* Limited :contains() support – fallback styling lives on the legend itself below */
}

body.modern fieldset legend[align="right"] {
    text-align: right;
    color: var(--color-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* --- Compare-All checkbox column header alignment --- */
body.modern .ResultsList thead th:last-child {
    text-align: center;
    width: 120px;
}

body.modern .ResultsList thead th:last-child input[type="checkbox"] {
    display: inline-block;
    margin-right: var(--space-1);
    transform: scale(1.1);
    accent-color: var(--color-primary);
}

/* --- Hide stray empty <p> / dagger marks that float around --- */
body.modern .ResultsList tbody td p:empty { display: none; }

/* --- NFRC dagger annotation at bottom of table --- */
body.modern #ContentPlaceHolder1_lblNFRCApproval,
body.modern .ResultsList ~ * span:not([class]),
body.modern table.ResultsList + br + span {
    font-size: 11px;
    color: var(--color-text-muted);
    display: block;
    margin-top: var(--space-3);
}

/* ============================================================
   details.aspx — Performance Comparison table.
   Drop the legacy 45° skew AND the vertical writing-mode in favor
   of a flat, modern horizontal table inside a scrollable card.
   Larger fonts, generous row spacing, primary-blue header band.
   ============================================================ */

/* Wrap the comparison table in a styled card.
   The codebehind dumps lblData inside `<div style="margin:10px">`,
   so we style by table class directly. */
body.modern .table-header-rotated,
body.modern .TFtableCol {
    /* Fill the card and let the columns share the available width instead of
       growing to max-content (which forced horizontal scrolling / a cramped
       feel). The wrapper still allows overflow-x as a fallback for an
       unusually large number of selected metrics. */
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--color-surface);
    font-family: var(--font-ui) !important;
    font-size: 14px;
}

/* Scrollable card around the table — use the parent div as the rail */
body.modern #ContentPlaceHolder1_lblData,
body.modern span[id$="_lblData"] {
    display: block;
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin: var(--space-4) 0 !important;
}

/* Card-style header above the table */
body.modern #ContentPlaceHolder1_lblData::before,
body.modern span[id$="_lblData"]::before {
    content: "Performance Comparison";
    display: block;
    padding: var(--space-4) var(--space-5);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    letter-spacing: -0.01em;
}

/* Allow content-box inside the table so legacy widths stop misbehaving */
body.modern .table-header-rotated,
body.modern .table-header-rotated *,
body.modern .TFtableCol,
body.modern .TFtableCol * {
    box-sizing: content-box;
}

/* --- HEADER ROW: flat horizontal text, primary-blue band --- */
body.modern .table-header-rotated th.rotate-45 {
    height: auto !important;
    width: auto !important;
    min-width: 64px !important;
    max-width: none !important;
    padding: var(--space-3) var(--space-2) !important;
    vertical-align: middle !important;
    background: var(--color-primary) !important;
    color: white !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    position: static !important;
    text-align: center;
}

body.modern .table-header-rotated th.rotate-45:last-child {
    border-right: none !important;
}

/* The legacy nested <div> wrapping each header — kill all skew/positioning */
body.modern .table-header-rotated th.rotate-45 > div {
    transform: none !important;
    -webkit-transform: none !important;
    position: static !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
    width: auto !important;
    left: 0 !important;
    top: 0 !important;
    overflow: visible !important;
    display: block;
    padding: 0;
}

body.modern .table-header-rotated th.rotate-45 > div.odd,
body.modern .table-header-rotated th.rotate-45 > div.even {
    background: transparent !important;
}

/* Header label text — clean horizontal, two lines max */
body.modern .table-header-rotated th.rotate-45 span {
    transform: none !important;
    -webkit-transform: none !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed;
    position: static !important;
    left: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: 130px;
    white-space: normal !important;
    /* Wrap only at spaces - never split a word mid-way */
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: white !important;
    text-align: center !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    display: inline-block;
}

/* --- DATA CELLS: bigger font, generous padding, subtle alternation --- */
body.modern .TFtableCol td {
    padding: var(--space-4) var(--space-3) !important;
    font-family: var(--font-ui) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-right: 1px solid var(--color-border) !important;
    text-align: center !important;
    vertical-align: middle !important;
    min-width: 52px;
    white-space: nowrap;
}

body.modern .TFtableCol tr:nth-child(odd) td:first-child {
    /* First column (Thickness) — make it the row identifier */
    background: var(--color-surface-alt) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 var(--color-border);
}

body.modern .TFtableCol tr:nth-child(odd) td,
body.modern .TFtableCol td.odd {
    background: var(--color-surface) !important;
}

body.modern .TFtableCol tr:nth-child(even) td,
body.modern .TFtableCol td.even {
    background: var(--color-surface-alt) !important;
}

/* Keep first-column sticky background distinct on alternating rows */
body.modern .TFtableCol tr:nth-child(odd) td:first-child {
    background: var(--color-surface-alt) !important;
}
body.modern .TFtableCol tr:nth-child(even) td:first-child {
    background: var(--color-primary-soft) !important;
}

body.modern .TFtableCol tr:hover td {
    background: var(--color-primary-soft) !important;
}

body.modern .TFtableCol tr:hover td:first-child {
    background: var(--color-primary) !important;
    color: white !important;
}

body.modern .TFtableCol tr:last-child td { border-bottom: none !important; }
body.modern .TFtableCol td:last-child { border-right: none !important; }

/* Configuration thumbnail aligned to the last column or trailing cell.
   Larger size so the glass renderings are actually visible. */
body.modern .TFtableCol td img,
body.modern .table-header-rotated td img {
    max-width: 110px !important;
    max-height: 130px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: var(--radius-sm);
    vertical-align: middle;
    display: inline-block;
    padding: var(--space-1);
}

/* Make sure the thumbnail cell has enough room */
body.modern .TFtableCol td:has(img),
body.modern .table-header-rotated td:has(img) {
    min-width: 130px !important;
    padding: var(--space-2) !important;
}

/* --- The IGU description bar (gray strip above each data row) --- */
body.modern .TFtableCol td[colspan],
body.modern .table-header-rotated td[colspan] {
    background: var(--color-primary) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: var(--space-3) var(--space-4) !important;
    text-align: left !important;
    border: none !important;
    letter-spacing: 0.01em;
}

body.modern .TFtableCol td[colspan] b,
body.modern .TFtableCol td[colspan] strong {
    color: white !important;
    font-weight: 700 !important;
}

/* --- Configuration thumbnail images near data rows: constrain to readable size --- */
body.modern .TFtableCol img,
body.modern .table-header-rotated img,
body.modern #ContentPlaceHolder1_lblData img {
    max-width: 70px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

/* --- "OUTSIDE / INSIDE" labels next to glass renderings --- */
body.modern #ContentPlaceHolder1_lblData * {
    font-family: var(--font-ui);
}

/* --- Page nav menu (Go to Color Data / Specifications / Glossary jumplinks) --- */
body.modern #pageNavMenu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 !important;
    padding: var(--space-3) var(--space-4) !important;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    align-items: center;
}

body.modern #pageNavMenu::before {
    content: "Jump to:";
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-right: var(--space-2);
}

body.modern #pageNavMenu #NavOptions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

body.modern #pageNavMenu a,
body.modern #pageNavMenu input[type="button"],
body.modern #pageNavMenu button,
body.modern #pageNavMenu .buttonNext {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px !important;
    background: var(--color-surface-alt) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-pill) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer;
    min-height: 0 !important;
    transition: all var(--transition);
}

body.modern #pageNavMenu a:hover,
body.modern #pageNavMenu input[type="button"]:hover,
body.modern #pageNavMenu button:hover,
body.modern #pageNavMenu .buttonNext:hover {
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

/* ============================================================
   UNIFIED TABLE HEADER STYLING — wins over all earlier rules.
   Every <th> across the app reads identically: primary-blue band,
   white uppercase 12px Inter, generous padding, white sub-labels.
   ============================================================ */

body.modern .ResultsList thead th,
body.modern .ResultsList thead tr.table_head th,
body.modern .table-header-rotated th,
body.modern .table-header-rotated th.rotate-45,
body.modern .TFtableCol thead th,
body.modern table.dataTable thead th,
body.modern #projectsTable thead th,
body.modern .modern-table thead th {
    background: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    padding: 14px 12px !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 2px solid #004052 !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}

/* Last column header drops the right divider for clean edge */
body.modern .ResultsList thead th:last-child,
body.modern .table-header-rotated th:last-child,
body.modern .TFtableCol thead th:last-child,
body.modern table.dataTable thead th:last-child,
body.modern #projectsTable thead th:last-child {
    border-right: none !important;
}

/* Nested .qtip_content wrappers inside headers must inherit white text */
body.modern .ResultsList thead th .qtip_content,
body.modern .ResultsList thead th div,
body.modern .table-header-rotated th .qtip_content,
body.modern .TFtableCol thead th .qtip_content {
    color: #ffffff !important;
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
    display: inline-block;
}

/* Sub-label inside header ("Btu/(hr x sqft x °F)" under "WINTER U-VALUE")
   stays readable but de-emphasized */
body.modern .ResultsList thead th .measurement-title,
body.modern .ResultsList thead th sup {
    color: rgba(255, 255, 255, 0.78) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    font-size: 10px !important;
    letter-spacing: 0.01em !important;
    display: block;
    margin-top: 4px;
}

/* Rotated-comparison header spans were already styled white; ensure
   they don't get accidentally re-colored by inherited rules. */
body.modern .table-header-rotated th.rotate-45 span,
body.modern .table-header-rotated th.rotate-45 > div {
    color: #ffffff !important;
    background: transparent !important;
}

/* "Compare All" checkbox in header column — adjust contrast */
body.modern .ResultsList thead th input[type="checkbox"] {
    accent-color: #ffffff;
    transform: scale(1.15);
    margin: 0 6px;
}

/* DataTables sort arrows: switch to white so they're visible on blue */
body.modern table.dataTable thead th.sorting::after,
body.modern table.dataTable thead th.sorting_asc::after,
body.modern table.dataTable thead th.sorting_desc::after,
body.modern table.dataTable thead th.sorting::before,
body.modern table.dataTable thead th.sorting_asc::before,
body.modern table.dataTable thead th.sorting_desc::before {
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
}

/* ============================================================
   FINAL OVERRIDES — force single-row chrome, fix thumbnails,
   fix the asp:ImageButton row-action visuals.
   ============================================================ */

/* --- Force the header into a single flex row with proper ordering --- */
body.modern #page_header {
    z-index: 1000 !important;
}

body.modern #header_container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 20px !important;
    height: 64px !important;
    padding: 0 24px !important;
    max-width: var(--container-max);
    margin: 0 auto !important;
}

body.modern #header_container .pull-right {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 1 auto !important;
    float: none !important;
    width: auto !important;
    min-width: 0;
}

body.modern #menu-nav {
    order: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    gap: 4px !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    min-width: 0;
}

body.modern #header-nav {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* --- Glass thumbnail sizing: bigger so they read properly --- */
body.modern .TFtableCol td img,
body.modern .table-header-rotated td img,
body.modern #ContentPlaceHolder1_lblData img,
body.modern span[id$="_lblData"] img {
    max-width: 140px !important;
    max-height: 160px !important;
    min-width: 100px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 6px;
    vertical-align: middle;
    display: inline-block;
    padding: 4px;
    background: #ffffff;
}

body.modern .TFtableCol td:has(img),
body.modern .table-header-rotated td:has(img) {
    min-width: 160px !important;
    padding: 12px !important;
    text-align: center !important;
}

/* --- ImageButton row actions: use CSS filter to recolor legacy PNGs.
       The `content: url(...)` approach doesn't work reliably for
       <input type="image"> in Chromium; filter does. --- */
body.modern input[type="image"][src*="add.png" i],
body.modern input[type="image"][src*="delete.png" i] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 7px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    background-color: var(--color-surface) !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    transition: all 150ms ease-out;
    /* Hide any alt-text fallback inside the input's box */
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    line-height: 0 !important;
    vertical-align: middle;
    margin: 2px;
    /* Recolor the legacy black/dark PNG to neutral slate */
    filter: brightness(0) saturate(100%) invert(34%) sepia(7%) saturate(800%) hue-rotate(178deg) brightness(95%) contrast(88%);
    -webkit-filter: brightness(0) saturate(100%) invert(34%) sepia(7%) saturate(800%) hue-rotate(178deg) brightness(95%) contrast(88%);
}

/* "Add" state — neutral icon, primary-blue hover */
body.modern input[type="image"][src*="add.png" i]:hover {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary-soft) !important;
    filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(1500%) hue-rotate(195deg) brightness(80%);
    -webkit-filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(1500%) hue-rotate(195deg) brightness(80%);
}

/* "Remove" state — already in compare list — red tint */
body.modern input[type="image"][src*="add.png" i][alt="Remove" i],
body.modern input[type="image"][src*="add.png" i][alt="REMOVE" i] {
    border-color: var(--color-danger) !important;
    background-color: var(--color-danger-soft) !important;
    filter: brightness(0) saturate(100%) invert(20%) sepia(85%) saturate(3500%) hue-rotate(346deg) brightness(85%) contrast(95%);
    -webkit-filter: brightness(0) saturate(100%) invert(20%) sepia(85%) saturate(3500%) hue-rotate(346deg) brightness(85%) contrast(95%);
}

/* Delete: muted neutral default, red on hover */
body.modern input[type="image"][src*="delete.png" i]:hover {
    border-color: var(--color-danger) !important;
    background-color: var(--color-danger-soft) !important;
    filter: brightness(0) saturate(100%) invert(20%) sepia(85%) saturate(3500%) hue-rotate(346deg) brightness(85%) contrast(95%);
    -webkit-filter: brightness(0) saturate(100%) invert(20%) sepia(85%) saturate(3500%) hue-rotate(346deg) brightness(85%) contrast(95%);
}

/* Kill any leftover content: url override from earlier rules */
body.modern input[type="image"][src*="add.png" i],
body.modern input[type="image"][src*="delete.png" i] {
    content: normal !important;
}

/* --- Consistent fonts across all visible content --- */
body.modern,
body.modern p,
body.modern td,
body.modern th,
body.modern label,
body.modern span,
body.modern div,
body.modern input,
body.modern select,
body.modern textarea,
body.modern button,
body.modern a {
    font-family: var(--font-ui);
}

/* Override Verdana-locked elements from legacy CSS */
body.modern [style*="Verdana"],
body.modern [style*="verdana"] {
    font-family: var(--font-ui) !important;
}

/* Project Manager modal: extra polish */
body.modern #projectsTable {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    font-family: var(--font-ui);
    font-size: 13px;
}

body.modern #projectsTable tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

body.modern #projectsTable tbody tr:hover td {
    background: var(--color-primary-soft) !important;
}

body.modern #projectsTable tbody tr.selected td {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary);
    font-weight: 600;
}

/* --- Specifications cards icon row at top-right --- */
body.modern .spec-table .div-inline a {
    text-decoration: none;
}

body.modern .spec-table > div:not(.spec-header) {
    padding: var(--space-4) var(--space-5) !important;
}

body.modern .spec-table > div:not(.spec-header):not(:last-of-type) {
    border-bottom: 1px solid var(--color-border);
}

/* The "Insulating Unit Construction" title chip */
body.modern .spec-table b {
    color: var(--color-text);
    font-weight: 600;
}

/* "Outdoor Lite: Pacifica® 6mm" — color the label part */
body.modern .spec-table .PrDetails b,
body.modern .spec-table p b {
    color: var(--color-primary);
    font-weight: 600;
}

/* ============================================================
   v5 fixes: nav overflow, hero links, glass thumbnails
   ============================================================ */

/* --- Make nav buttons compact so they fit at narrower viewports --- */
body.modern #menu-nav .mainbtn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
}

body.modern #menu-nav .mainbtn .menu-item {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

body.modern #menu-nav .mainbtn::before {
    width: 14px !important;
    height: 14px !important;
    margin-right: 4px !important;
}

body.modern #header-nav,
body.modern #header-nav a {
    font-size: 12px !important;
}

body.modern #header-nav a {
    padding: 2px 0;
}

/* Tighter at ~1200px viewport */
@media (max-width: 1300px) {
    body.modern #header-nav {
        font-size: 11px !important;
        gap: 4px !important;
    }
    body.modern #menu-nav .mainbtn {
        padding: 5px 8px !important;
    }
    body.modern #menu-nav .mainbtn .menu-item {
        font-size: 11px !important;
    }
}

/* Below 1100px, hide the utility nav entirely so menu doesn't collide */
@media (max-width: 1100px) {
    body.modern #header-nav { display: none !important; }
}

/* --- Hero links: must be visible on the dark blue gradient --- */
body.modern #helpSection a,
body.modern #helpSection.construct a,
body.modern #helpSection.details a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

body.modern #helpSection a:hover,
body.modern #helpSection.construct a:hover,
body.modern #helpSection.details a:hover {
    color: var(--color-accent) !important;
    text-decoration: underline !important;
}

/* "Customize Print" / "Contact Us" / strong tags in hero stay white */
body.modern #helpSection strong,
body.modern #helpSection b {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* --- Glass thumbnail in the comparison table: keep it a compact swatch.
       A 180px column with 160px images was the single biggest reason the
       table ran too wide; a modest thumbnail keeps every metric column
       visible without horizontal scrolling. --- */
body.modern .TFtableCol td:last-child,
body.modern .table-header-rotated td:last-child {
    min-width: 84px !important;
    padding: 8px !important;
    overflow: visible !important;
    text-align: center !important;
    background: #ffffff !important;
}

body.modern .TFtableCol td:last-child img,
body.modern .table-header-rotated td:last-child img,
body.modern .TFtableCol td img,
body.modern .table-header-rotated td img {
    width: auto !important;
    height: auto !important;
    max-width: 64px !important;
    max-height: 88px !important;
    min-width: auto !important;
    min-height: auto !important;
    object-fit: contain !important;
    padding: 6px !important;
    background: #f8fafc !important;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    vertical-align: middle;
    display: inline-block;
}

/* ============================================================
   IGU cross-section diagram (top-right) — replaces the legacy
   stacked-GIF montage with a clean mockup-style cross-section.
   The raw montage is kept (hidden) as the data source for JS.
   ============================================================ */
body.modern .PaneImages .igu-source { display: none !important; }

body.modern .igu-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5) var(--space-4);
    background: linear-gradient(160deg, #fbfdfe 0%, #e8eef2 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
body.modern .igu-diagram:empty { display: none; }

/* rayed sun, drawn as an SVG so it matches the realistic reference */
body.modern .igu-sun {
    position: absolute;
    top: 10px;
    left: 12px;
    width: 46px;
    height: 46px;
    z-index: 2;
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%23f4a91f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M32 3v11M32 50v11M3 32h11M50 32h11M11 11l8 8M45 45l8 8M53 11l-8 8M19 45l-8 8'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='14' fill='%23fbc02d' stroke='%23f4a91f' stroke-width='2'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 6px rgba(246, 185, 0, 0.45));
}

body.modern .igu-frame {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    width: 100%;
    max-width: 340px;
}

body.modern .igu-edge {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    writing-mode: vertical-rl;
}

/* stage centers the unit and reserves room for the 3D top faces */
body.modern .igu-stage {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 282px;             /* 200px lites + headroom for the cavity labels above */
    padding: 16px 0 4px;
}
/* a triple stacks two cavity labels, so it needs more headroom than a double */
body.modern .igu-stage--tall { min-height: 336px; }

body.modern .igu-stack {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Rendered flat (no rotateY) so the panes, gap labels and surface
       numbers stay crisp/in focus. A 3D tilt rasterizes this layer at an
       angle, which blurs the text and edges. Depth comes from the drop
       shadow and the per-pane reflection/edge styling instead. */
    filter: drop-shadow(5px 7px 10px rgba(15, 23, 42, 0.18));
}

/* glass pane — crisp translucent glass with green edges + a glassy reflection */
body.modern .igu-pane {
    position: relative;
    width: 32px;
    height: 150px;
    border-left: 1px solid rgba(120, 170, 150, 0.7);
    border-right: 1px solid rgba(120, 170, 150, 0.7);
    border-top: 3px solid rgba(176, 214, 188, 0.92);     /* lit green top edge */
    border-bottom: 3px solid rgba(120, 162, 142, 0.85);  /* green bottom edge */
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.45);
}
/* crisp diagonal reflection streak across the glass */
body.modern .igu-pane::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(116deg,
        rgba(255, 255, 255, 0) 36%,
        rgba(255, 255, 255, 0.55) 46%,
        rgba(255, 255, 255, 0.10) 49%,
        rgba(255, 255, 255, 0) 64%);
}
/* ---- SVG glass panes (Left.svg) recoloured from the glass RGB ----
   The SVG is inlined per pane with its gradient stops rewritten to the picked
   glass colour (see vitroTintSvg). It fills the pane box. */
/* Sized to the artwork's own proportions (viewBox 64 x 439 = 1:6.86). The box used to
   be 40x150, which stretched the lite ~1.8x horizontally — that squashed the diagonal
   reflection sweep and made the glass read as a stubby slab. */
body.modern .igu-pane--svg {
    width: 42px;
    height: 200px;
    border: none;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}
body.modern .igu-pane--svg::after { content: none; }   /* drop the flat-rectangle reflection streak */
body.modern .igu-pane--svg .igu-pane-svg-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
body.modern .igu-pane--flip .igu-pane-svg-el { transform: scaleX(-1); }

/* laminate: wider pane with a thicker interlayer band down the middle
   (two glass plies bonded by an interlayer — matches the legacy 2-piece image) */
body.modern .igu-pane.is-lam { width: 48px; }
/* 42px * (64 + 21.7) / 64 — the laminate viewBox adds a second ply + interlayer
   (vitroLamViewBox in igu-diagram.js), so widen by the same ratio to keep proportions */
body.modern .igu-pane--svg.is-lam { width: 56px; }
body.modern .igu-interlayer {
    position: absolute;
    top: 10.2%;
    bottom: 0.3%;
    /* same 69.5% lane .igu-coat-out uses (the face/edge-band boundary), so the
       interlayer sits in the same place a coating line would, instead of further
       right at the pane's own outer edge. Thinner too (was 5px, read as a thick
       bar against the 42px-wide pane). */
    left: 69.5%;
    transform: translateX(-50%);
    width: 3px;
    z-index: 2;
    /* black interlayer line, instead of the near-invisible white-on-white band
       (was too light to read against a dark/grey glass tint) */
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.55),
        rgba(0, 0, 0, 0.95) 45%,
        rgba(0, 0, 0, 0.95) 55%,
        rgba(0, 0, 0, 0.55));
    border-left: 1px solid rgba(0, 0, 0, 0.9);
    border-right: 1px solid rgba(0, 0, 0, 0.9);
}

/* low-e / reflective coating film drawn on the coated surface of the pane.
   The film is drawn ON the glass face, never out on the edge strip: odd surfaces
   (1, 3, 5) sit on the LEFT edge of the face, even surfaces (2, 4, 6) on its RIGHT edge
   (69.5% across the box, where the face meets the thickness strip). The face is sheared,
   so each bar is offset vertically to stay flush with it: the left edge spans
   y 0.3%-89.8% of the box, the right edge y 10.2%-99.7%.
   Laminates get no film at all — the surface numbering of a bonded lite is ambiguous. */
body.modern .igu-coat {
    position: absolute;
    width: 4px;
    z-index: 3;
    background: linear-gradient(180deg, rgba(140,196,224,0.98), rgba(96,156,196,0.9));
    box-shadow: 0 0 4px rgba(80,150,200,0.45);
}
/* The lite is drawn extruded to the RIGHT, so both of its surfaces read on the right of
   the artwork at different depths — which is also what the legacy CoatingOutside.png /
   CoatingInside.png artwork does. The glass face spans 1.7%-69.5% of the box and the
   edge band 69.5%-98%:
     odd surfaces  (1, 3, 5) -> on the face, hard against its right edge
     even surfaces (2, 4, 6) -> at the far right, flush inside the lite's outer edge
   Both run the height of the face's right edge (y 53.9-446.5 of the artwork). */
body.modern .igu-coat-out { left: calc(69.5% - 6px); top: 10.2%; bottom: 0.3%; }
body.modern .igu-coat-in  { right: 2%;               top: 10.2%; bottom: 0.3%; }

/* parallelogram top face — gives each pane visible thickness/depth.
   Skewed to the upper-right so the whole unit reads as a 3D extruded
   block viewed slightly from above, while the front faces (and their
   labels/surface numbers) stay flat and crisp. */
body.modern .igu-pane-top {
    position: absolute;
    top: -11px;
    left: 0;
    width: 100%;
    height: 11px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(228, 244, 246, 0.85) 55%,
        rgba(196, 224, 228, 0.78) 100%);
    border: 1px solid rgba(70, 110, 125, 0.55);
    border-bottom: none;
    transform: skewX(-52deg);
    transform-origin: left bottom;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* laminate panes are wider, so soften the skew angle to keep the top
   face proportional to the extra width */
body.modern .igu-pane.is-lam .igu-pane-top { transform: skewX(-62deg); }

/* sealed air space between panes, with the metal spacer at the bottom */
body.modern .igu-gap {
    position: relative;            /* anchors the cavity label above this cavity */
    width: 44px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-top: 2px;
}
/* Cavity name. It is lifted out of the stack entirely into the clear space above the
   unit and tied back to its own cavity by a leader line, so the glass is never covered.
   Centred on its cavity, so a triple's two names land apart from each other. The fixed
   width wraps a long name ("VacuMax Vacuum Gap , 1/64" (0.3mm)") into a tidy block
   rather than one line running across the whole diagram.
   Regular gap: the box is 44px, but the next lite is pulled 27px back into it (see
   igu-diagram.js's "pullIn"), leaving only the near 17px as true open cavity — so the
   leader points at 19% (that 17px's centre), not 50% (which lands inside the lite). */
body.modern .igu-gap-lbl {
    --lead: 14px;                  /* leader length; set per cavity so chips stack */
    position: absolute;
    left: 19%;
    bottom: calc(100% + var(--lead));
    transform: translateX(-50%);
    width: 74px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: black;
    text-align: center;
    line-height: 1.2;
    z-index: 15;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 5px;
    padding: 3px 5px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10);
}
/* Vacuum gap: the box collapses to 0 width (.igu-gap--vac below), so a percentage
   can't offset it. The box starts at the outboard lite's right edge (the artwork's
   edge band ends at 98% of the 42px pane, ~1px short), so -1px lands the leader on
   the seam between the two lites rather than on the outboard lite's face. */
body.modern .igu-gap--vac .igu-gap-lbl { left: -1px; --drop: 40px; }
/* Dotted leader from the chip down INTO the cavity it names: --lead reaches the top
   of the unit, --drop carries it on down between the two lites so it clearly points
   at the gap, not at the top edge of the glass. A dot marks the end. */
body.modern .igu-gap-lbl::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: calc(var(--lead) + var(--drop, 56px));
    border-left: 1px dashed rgba(15, 23, 42, 0.6);
}
body.modern .igu-gap-lbl::before {
    content: "";
    position: absolute;
    top: calc(100% + var(--lead) + var(--drop, 56px) - 2px);
    left: calc(50% - 2px);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.7);
}
/* the IGU spacer bar — one per air gap (double = 1, triple = 2) */
body.modern .igu-spacer {
    position: relative;
    /* 2px past the 44px cavity box (and 1px right, since the gap centres it) so the
       bar runs right up to the inboard lite's face/edge corner, which the 27px
       pull-back puts at ~46px - no notch of background between bar and glass */
    left: 1px;
    width: calc(100% + 2px);
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, #d6dadd 0%, #aab1b6 45%, #8b9398 100%);
    border: 1px solid #7a8388;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* VacuMax VIG: the vacuum cavity is a fraction of a millimetre — an order of magnitude
   tighter than a gas-filled air space — and the two lites are held by a hermetic edge
   seal rather than a metal spacer bar. Draw the cavity tight and let a taller, solid
   seal fill it, so a VIG reads as clearly different from an IGU. */
/* VIG panes meet at the hermetic edge seal: a 0-width cavity with the inboard lite
   pulled 18px back (igu-diagram.js "pullIn"). */
body.modern .igu-gap--vac { width: 0; align-items: flex-start; }
body.modern .igu-spacer--vac {
    /* Span from the outboard lite's outer edge (1px back, so no hairline) to the
       inboard lite's face/edge corner - 18px pull-back puts that corner ~11px past
       the cavity - so the seal touches both lites, the same way the air-space
       spacer runs lite to lite. */
    position: relative;
    left: -1px;
    width: 12px;
    height: 18px;
    background: linear-gradient(180deg, #b7bec2 0%, #8d9598 45%, #6d7578 100%);
    border-color: #5d6467;
}
body.modern .igu-spacer--vac .igu-spacer-top {
    background: linear-gradient(180deg, #e2e6e8 0%, #aeb5b8 100%);
}


/* skewed top face on the spacer so it extrudes with the glass panes. It runs the full
   depth of the lites: Left.svg's bottom edge recedes 43.4 x 43.5 units, i.e. ~28.5px
   left and ~20px up in a 42x200 pane, hence 20px tall at skewX(55deg). (An 8px face
   only reached about halfway back along the glass.) Keep in step with printpage.aspx. */
body.modern .igu-spacer-top {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(180deg, #eef0f2 0%, #c4cacd 100%);
    border: 1px solid #7a8388;
    border-bottom: none;
    transform: skewX(55deg);
    transform-origin: left bottom;
    z-index: -1;
}

body.modern .igu-surfaces {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 11px;
    color: var(--color-text-muted);
}
body.modern .igu-surfaces-lbl {
    font-weight: 600;
    color: var(--color-text);
}
body.modern .igu-surf-grp {
    display: inline-flex;
    gap: 7px;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}
body.modern .igu-surf { display: inline-block; }
/* coated surface number highlighted to match the coating line */
body.modern .igu-surf.on {
    color: var(--color-primary);
    font-weight: 700;
    border-bottom: 2px solid var(--color-primary-hover);
}

body.modern .igu-legend {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}
/* .PaneImages sets text-align:center, which the legend inherits and which leaves the
   wrapped second line of a long product name floating centred under a left-aligned
   swatch. Pin the legend left. */
body.modern .igu-legend { text-align: left; }
body.modern .igu-leg {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 11px;
    color: var(--color-text);
    text-align: left;
}
body.modern .igu-leg-dot { margin-top: 1px; }
body.modern .igu-leg-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(15, 23, 42, 0.2);
    flex: none;
}
body.modern .igu-leg-txt { line-height: 1.3; }

/* ============================================================
   Configurations — card-per-configuration layout
   (replaces the legacy comparison table / .ResultsList)
   ============================================================ */
body.modern .config-cards-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: 0 0 var(--space-4);
}
body.modern .config-cards-hint {
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin-right: auto;
}
/* "Compare All" rendered as a selectable pill/toggle */
body.modern .config-compare-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
body.modern .config-compare-all:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
body.modern .config-compare-all label { cursor: pointer; }
body.modern .config-compare-all input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    vertical-align: middle;
    cursor: pointer;
}

body.modern .config-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

body.modern .config-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    transition: box-shadow var(--transition), border-color var(--transition);
}
body.modern .config-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

/* ---- header: "Product & IGU" + makeup spec + tools ---- */
body.modern .cc-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}
body.modern .cc-head-titles { flex: 1; min-width: 0; }
body.modern .cc-head-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}
body.modern .cc-head-spec {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text);
}
body.modern .cc-head-spec .DescTitle {
    display: inline;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-right: 4px;
}
body.modern .cc-head-spec .CompetitorProductName {
    display: inline;
    margin-right: var(--space-4);
}
body.modern .cc-head-spec br { display: none; }
body.modern .cc-dagger { color: var(--color-text-soft); margin-right: 2px; }

body.modern .cc-head-tools {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
body.modern .cc-iconbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), box-shadow var(--transition);
}
body.modern .cc-iconbtn:hover { box-shadow: var(--shadow-sm); }
body.modern .cc-iconbtn .cc-tx { white-space: nowrap; }

/* hide the legacy png image-button but keep it clickable through the label */
body.modern .cc-iconbtn .cc-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

/* crisp CSS icons (tinted with currentColor via mask) */
body.modern .cc-iconbtn .cc-ic {
    width: 15px;
    height: 15px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}
body.modern .cc-iconbtn-compare .cc-ic {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
body.modern .cc-iconbtn-del .cc-ic {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v5M14 11v5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v5M14 11v5'/%3E%3C/svg%3E");
}

/* compare: default = "add", hover hints the action */
body.modern .cc-iconbtn-compare .cc-tx-rem { display: none; }
body.modern .cc-iconbtn-compare:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}
/* compare: when already added (image-button alt="Remove") show filled "Added" state */
body.modern .cc-iconbtn-compare:has(input[alt="Remove"]) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
body.modern .cc-iconbtn-compare:has(input[alt="Remove"]) .cc-tx-add { display: none; }
body.modern .cc-iconbtn-compare:has(input[alt="Remove"]) .cc-tx-rem { display: inline; }
body.modern .cc-iconbtn-compare:has(input[alt="Remove"]) .cc-ic {
    /* swap plus -> check */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
}
body.modern .cc-iconbtn-compare:has(input[alt="Remove"]):hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}

/* delete */
body.modern .cc-iconbtn-del:hover {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* ---- body: 3 columns (visual | performance | actions) ---- */
body.modern .cc-body {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.4fr) auto;
    gap: var(--space-5);
    align-items: start;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

body.modern .cc-visual { min-width: 0; }

/* final color swatch beside the "Product & IGU" heading — a wide, crisp
   horizontal piece of glass showing the reflected configuration color */
body.modern .cc-finalcolor {
    position: relative;
    display: inline-block;
    line-height: 0;
    text-decoration: none;
    border-radius: 3px;
}
body.modern .cc-finalcolor .color-icon {
    width: 72px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid rgba(120, 170, 150, 0.75);   /* green glass edge */
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    object-fit: cover;
    display: block;
}
/* crisp glass reflection across the swatch */
body.modern .cc-finalcolor::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 3px;
    pointer-events: none;
    background: linear-gradient(116deg,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.5) 48%,
        rgba(255, 255, 255, 0.12) 51%,
        rgba(255, 255, 255, 0) 66%);
}
body.modern .cc-igu.igu-diagram {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--space-2) 0 0;
}
body.modern .cc-igu .igu-legend {
    border-top: none;
    padding-top: var(--space-2);
}

/* ---- performance data: 2x2 stat boxes ---- */
body.modern .cc-perf { min-width: 0; }
body.modern .cc-perf-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}
body.modern .cc-perf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
body.modern .cc-pf {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
body.modern .cc-pf-lbl {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-bottom: var(--space-1);
    min-height: 28px;
}
body.modern .cc-pf-val {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text);
    font-family: var(--font-num);
    line-height: 1;
}
body.modern .cc-perf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
    font-size: 11px;
    color: var(--color-text-muted);
}
body.modern .cc-perf-meta b { color: var(--color-text); font-weight: 600; }

/* ---- actions: vertical button column ---- */
body.modern .cc-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 132px;
}
body.modern .cc-buttons > span { display: flex; }
body.modern .cc-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition);
}
body.modern .cc-btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }
body.modern .cc-btn-primary { background: var(--color-accent); border-color: var(--color-accent); }
body.modern .cc-btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

@media (max-width: 980px) {
    body.modern .cc-body {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    body.modern .cc-buttons { min-width: 0; }
    body.modern .cc-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
    body.modern .cc-buttons .cc-btn { width: auto; }
}
@media (max-width: 560px) {
    body.modern .cc-perf-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Mobile / phone layout (Default.aspx + MasterPage header)
   ============================================================ */

/* Hamburger button — hidden on desktop */
body.modern .nav-toggle { display: none; }

@media (max-width: 900px) {
    /* Header: logo left, hamburger right, menu collapses below */
    body.modern #header_container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: auto !important;
        padding: var(--space-2) var(--space-3) !important;
        gap: 0 !important;
    }
    body.modern #page_header:has(#navToggle) .brand-logo .brand-text { display: inline !important; }

    body.modern .nav-toggle {
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        background: transparent !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-md) !important;
        cursor: pointer !important;
    }
    body.modern .nav-toggle span {
        display: block !important;
        height: 2px !important;
        width: 100% !important;
        background: var(--color-primary) !important;
        border-radius: 2px !important;
        transition: transform var(--transition), opacity var(--transition) !important;
    }
    body.modern #page_header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
    body.modern #page_header.nav-open .nav-toggle span:nth-child(2) { opacity: 0 !important; }
    body.modern #page_header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

    body.modern #header_container #navToggle ~ .pull-right {
        display: none !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-2) !important;
        padding: var(--space-2) 0 var(--space-3) !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
    }
    body.modern #page_header.nav-open #header_container #navToggle ~ .pull-right { display: flex !important; }

    body.modern #navToggle ~ .pull-right #menu-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }
    body.modern #navToggle ~ .pull-right #menu-nav a { display: block !important; }
    body.modern #navToggle ~ .pull-right #menu-nav .mainbtn {
        display: flex !important;
        width: 100% !important;
        padding: 12px var(--space-3) !important;
        font-size: 15px !important;
    }
    body.modern #navToggle ~ .pull-right #menu-nav .mainbtn .menu-item { font-size: 15px !important; }

    /* Utility links (Contact, Sign Out...) shown inside the open menu */
    body.modern #page_header.nav-open #header-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
        margin: 0 !important;
        padding-top: var(--space-2) !important;
        border-top: 1px solid var(--color-border) !important;
        font-size: 14px !important;
        gap: var(--space-2) !important;
    }
    body.modern #page_header.nav-open #header-nav a { padding: 6px 0 !important; }
}

@media (max-width: 640px) {
    body.modern #Enclose { padding: 0 12px; box-sizing: border-box; }
    body.modern #Enclose img { max-width: 100%; height: auto; }

    /* Hero */
    body.modern #helpSection { padding: var(--space-3) !important; gap: var(--space-2); margin-top: var(--space-3) !important; }
    body.modern #helpSection #headTitle label { font-size: 20px; }
    body.modern #helpSection #headInfo { font-size: 13px; line-height: 1.45; }

    /* Stepper */
    body.modern .stepper { gap: var(--space-2); padding: var(--space-2) var(--space-3); justify-content: space-between; }
    body.modern .stepper-item { font-size: 12px; gap: 4px; }
    body.modern .stepper-sep { max-width: 24px; }

    /* Project toolbar (Retrieve Data / Save Progress ...) */
    body.modern #sdtoolbar > div {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: var(--space-2);
    }
    body.modern #sdtoolbar .buttonNext {
        margin: 0 !important;
        flex: 1 1 auto;
        min-height: 40px;
    }
    body.modern #sdtoolbar p { width: 100%; text-align: center; margin: 0 !important; }

    /* Configuration card */
    body.modern .PaneNumber,
    body.modern article.PaneNumber { padding: var(--space-3) !important; }

    /* Single / Double / Triple / VIG / Hybrid-VIG */
    /* legacy h1 floats left at a fixed width and squeezes the buttons beside it */
    body.modern .PaneNumber h1 { float: none !important; width: auto !important; }
    body.modern .PaneButtons {
        display: flex !important;
        flex-wrap: wrap;
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }
    body.modern .PaneButtons a {
        flex: 1 1 30%;
        min-width: 0 !important;
        text-align: center;
        padding: 10px 6px;
        border-bottom: 1px solid var(--color-border);
    }

    /* Unit/Tilt and VIG option boxes: fixed 20px height + table cells -> stack */
    body.modern .PaneNumber > div[style*="height:20px"] { height: auto !important; margin-top: var(--space-2); }
    body.modern .PaneNumber > div > fieldset > table > tbody > tr > td {
        display: block;
        width: 100%;
        text-align: left !important;
        padding: 4px 0;
    }
    body.modern .PaneNumber fieldset { min-width: 0; margin: 0; }

    /* Accordion layer content: let selects/inputs fit the phone */
    body.modern .accordionContent { overflow-x: auto; }
    body.modern .accordionContent select,
    body.modern .styled-select,
    body.modern .styled-select-product { max-width: 100%; }
    body.modern .accordionContent table { max-width: 100%; }
    body.modern .accordionHeader,
    body.modern .accordionHeaderSelected { font-size: 13px; }

    /* Calculate / Reset and Next buttons: bigger tap targets */
    body.modern .buttonNext { min-height: 40px; font-size: 14px; }
    body.modern #btnCalculate,
    body.modern #btnReset { min-width: 120px; margin: 4px; }

    /* Diagram */
    body.modern .igu-diagram { padding: var(--space-4) var(--space-2) var(--space-3); }
    body.modern #ColRight { padding: var(--space-3) !important; }

    /* Compare tray + result cards */
    body.modern .compare-tray-head { padding: var(--space-3); }
    body.modern .compare-tray-head .buttonNext { width: 100%; }
    body.modern .config-cards-bar { flex-wrap: wrap; }
    body.modern .cc-head { flex-wrap: wrap; gap: var(--space-2); }
    body.modern .cc-buttons .cc-btn { flex: 1 1 45%; text-align: center; white-space: normal; }

    /* Modals / popups sized to the screen */
    body.modern .bp-modal {
        width: calc(100% - 24px) !important;
        left: 12px !important;
        margin-left: 0 !important;
        top: 5% !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    body.modern .popupHeader { width: auto !important; max-width: 100%; }
    body.modern #filter-error { width: auto !important; max-width: 90vw; }

    /* Footer */
    body.modern footer { padding: var(--space-3) 0; }
    body.modern .footer_text { font-size: 11px; line-height: 1.5; }
}

/* Legacy Main.css/Glass.css fixed widths (960px #PPGBody, 779px hero text,
   460px options, 290px pane buttons...) push the page wider than a phone */
@media (max-width: 1000px) {
    body.modern #PPGBody {
        width: auto !important;
        max-width: 100%;
        margin-left: 0 !important;
        border: none;
        box-sizing: border-box;
    }
    body.modern .page,
    body.modern #header_container,
    body.modern #options-new,
    body.modern #ColLeft_new,
    body.modern #ColRight,
    body.modern .PaneButtons,
    body.modern #helpSection div#headInfo,
    body.modern .span12 {
        width: auto !important;
        max-width: 100% !important;
    }
    body.modern .workbench > * { min-width: 0; }
    body.modern #result-view,
    body.modern .WideContent,
    body.modern .config-cards,
    body.modern .config-card { max-width: 100%; min-width: 0; box-sizing: border-box; }
    body.modern #ContentPlaceHolder1_lblNFRCApproval { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
    body.modern .styled-select,
    body.modern .styled-select select,
    body.modern .styled-select-product,
    body.modern .styled-select-product select {
        width: 100% !important;
        min-width: 0 !important;
    }
    body.modern .accordionContent input[type="text"] { max-width: 100%; }
    /* Glass.ascx option grid (Low-e / Frit / Reflective...): one column */
    /* labels (Manufacturer, Thickness...) keep whole words; give the label column room */
    body.modern .accordionContent table td { word-break: normal; overflow-wrap: normal; }
    body.modern .accordionContent table tr > td:first-child { min-width: 84px; }
    body.modern .accordionContent table[id$="tblCoating"] td,
    body.modern .accordionContent table[id$="L1Coating"] td { display: block; width: 100% !important; }

    /* Result card head: title / swatch / Compare+Delete on separate lines */
    body.modern .cc-head { flex-direction: column; align-items: stretch; }
    body.modern .cc-head-title { flex-wrap: wrap; }
    body.modern .cc-head-tools { display: flex; gap: var(--space-2); justify-content: flex-start; }
    body.modern .config-card { padding: var(--space-3); }
    body.modern .config-cards-bar { justify-content: space-between; gap: var(--space-2); }
}

/* ---------- details.aspx on phones ---------- */
@media (max-width: 640px) {
    /* Toolbar (Print, Customize, BIM, Email PDF...): two per row, tappable */
    body.modern #toolbar { padding: var(--space-2); gap: 6px; }
    body.modern #toolbar > a,
    body.modern #toolbar > span > a,
    body.modern #toolbar a.email {
        flex: 1 1 45%;
        justify-content: center;
        text-align: center;
        min-height: 40px;
        box-sizing: border-box;
    }
    body.modern #toolbar a.BIMhelp { flex: 0 0 auto; min-height: 0; }

    /* Performance comparison tables (built in details.aspx.vb): scroll sideways
       inside their card instead of widening the whole page */
    body.modern #Details .table-header-rotated,
    body.modern #Details table.TFtableCol {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.modern #Details > div[style*="margin:10px"],
    body.modern #divProjectDetails { margin: 8px 0 !important; overflow-x: auto; }
    body.modern #pageNavMenu { margin-left: 0 !important; padding: var(--space-2) 0 !important; }

    /* Color data charts (fixed 420px): one per row, scaled to fit */
    body.modern #color-grid #chartTable,
    body.modern #color-grid #chartTable tbody,
    body.modern #color-grid #chartTable tr,
    body.modern #color-grid #chartTable td { display: block; width: 100% !important; box-sizing: border-box; }
    body.modern #chartTable img { max-width: 100% !important; height: auto !important; }

    /* Spec card header icons (BIM, label, gallery, Word...) */
    body.modern .spec-table > div > div[style*="whitesmoke"] { overflow: hidden; padding: 4px; }
    body.modern .spec-table .spec-header { flex-wrap: wrap; }

    /* Email PDF popup (700px, 520px textboxes): fit the screen, stack labels */
    body.modern #ContentPlaceHolder1_pnlEmail,
    body.modern .modalPopup {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        left: 12px !important;
        box-sizing: border-box;
        padding: 12px !important;
        max-height: 90vh;
        overflow-y: auto !important;
    }
    body.modern #ContentPlaceHolder1_pnlEmail table,
    body.modern #ContentPlaceHolder1_pnlEmail tbody,
    body.modern #ContentPlaceHolder1_pnlEmail tr,
    body.modern #ContentPlaceHolder1_pnlEmail td { display: block; width: 100% !important; text-align: left; }
    body.modern .modalPopup input[type="text"],
    body.modern .modalPopup textarea,
    body.modern .modalPopup .emaitxt,
    body.modern .modalPopup .emailtxt { width: 100% !important; max-width: 100%; box-sizing: border-box; }
    body.modern #ContentPlaceHolder1_pnlEmail div[style*="float"] { float: none !important; }
    body.modern .modalPopup img { max-width: 100%; }
}

/* Error/info popup (pnlError, fixed 420px/380px): fit the phone, keep icon beside text */
@media (max-width: 640px) {
    body.modern #ContentPlaceHolder1_pnlError {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        left: 12px !important;
        box-sizing: border-box;
    }
    body.modern #ContentPlaceHolder1_pnlError > div { width: auto !important; max-width: 100%; }
    body.modern #ContentPlaceHolder1_pnlError > div > div[style*="380px"] {
        float: none !important;
        width: auto !important;
        margin: 12px !important;
    }
}