/* Slate surfaces and indigo accents, shared by both portals and the shop. */
:root {
    --border: var(--line);
    --accent: var(--green);
    --accent-soft: var(--green-soft);
    color-scheme: light;
    --green: #4f46e5;
    --green-dark: #4338ca;
    --green-pressed: #3730a3;
    --green-soft: #eef2ff;
    --green-line: #c7d2fe;
    --green-hover: #f5f6ff;
    --focus-ring: rgb(99 102 241 / 24%);
    --ink: #172033;
    --muted: #59677c;
    --surface: #ffffff;
    --surface-subtle: #f8fafc;
    --surface-hover: #edf1f7;
    --canvas: #f3f5fa;
    --line: #e0e6ef;
    --line-strong: #a2aec1;
    --header: #111b31;
    --sidebar: #111b31;
    --sidebar-muted: #b4bfd4;
    --amber: #855a15;
    --amber-soft: #fff3d9;
    --amber-line: #ecd6a7;
    --red: #b23346;
    --red-soft: #fceef0;
    --red-line: #ecc4cb;
    --blue: #2563eb;
    --blue-soft: #eef4fb;
    --success: #087f5b;
    --success-soft: #e5f6ef;
    --shadow: 0 4px 20px rgb(23 32 51 / 5%);
    font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --green: #818cf8;
    --green-dark: #a5b4fc;
    --green-pressed: #c7d2fe;
    --green-soft: #242b4a;
    --green-line: #48538b;
    --green-hover: #20283d;
    --ink: #e7edf7;
    --muted: #acb8cd;
    --surface: #172033;
    --surface-subtle: #1c273b;
    --surface-hover: #27344b;
    --canvas: #0e1525;
    --line: #303c53;
    --line-strong: #61708b;
    --header: #101829;
    --amber: #f3ca7b;
    --amber-soft: #392e1d;
    --amber-line: #665334;
    --red: #fda4af;
    --red-soft: #3d2331;
    --red-line: #753d4b;
    --blue: #93c5fd;
    --blue-soft: #21334c;
    --success: #6ee7b7;
    --success-soft: #173b33;
    --shadow: 0 4px 24px rgb(0 0 0 / 15%);
}
.offer-price-preview { display:flex; flex-wrap:wrap; gap:24px; padding:18px 0; border-block:1px solid var(--line); }
.offer-price-preview > span { display:grid; gap:6px; color:var(--muted); font-size:12px; }.offer-price-preview strong { color:var(--ink); font-size:18px; }.offer-price-preview > span:last-child strong { color:var(--green-dark); }
.offer-gross { display:flex; align-items:baseline; gap:8px; }.offer-gross strong { font-size:24px; line-height:1.3; font-weight:650; overflow-wrap:anywhere; }.offer-gross > span,.offer-net { font-size:12px; color:var(--muted); }.offer-net { margin-top:6px; }
.price-breakdown { margin:22px 0 0; padding:16px 0 0; border-top:1px solid var(--line); font-size:13px; }.price-breakdown > div { display:flex; justify-content:space-between; gap:16px; margin-bottom:10px; }.price-breakdown dt { font-weight:400; color:var(--muted); }.price-breakdown dd { margin:0; text-align:right; }
.checkout-tax-note { font-size:13px; padding:12px 0; color:var(--green-dark, #256545); }.order-package { padding:16px; border-top:1px solid var(--line); }
html, body { font-family:"Segoe UI Variable","Segoe UI",sans-serif; }
h1:focus { outline:none; }
button:disabled { cursor:default; }
.app-shell { height:100dvh; min-height:0; display:grid; grid-template-columns:240px minmax(0,1fr); grid-template-rows:56px minmax(0,1fr); overflow:hidden; }
.app-header { grid-column:1/-1; display:flex; gap:24px; align-items:center; padding:0 20px; background:var(--header); color:white; min-width:0; border-bottom:2px solid var(--green); }
.header-brand { display:flex; gap:10px; align-items:center; color:white; text-decoration:none; font-size:19px; font-weight:700; white-space:nowrap; }
.ait-logo { display:block; object-fit:contain; aspect-ratio:5/1; height:auto; flex:0 0 auto; }
.header-brand { flex-shrink:0; }
.header-brand .ait-logo { width:100px; }
.login-brand .ait-logo { width:130px; }
.app-header .account-block { margin-left:auto; min-width:0; }
.app-header .account-name { overflow:hidden; text-overflow:ellipsis; max-width:220px; white-space:nowrap; }
.app-header .icon-command { background:transparent; color:white; border-color:transparent; }
.app-header .icon-command:hover { background:#ffffff24; }
.app-sidebar { grid-column:1; grid-row:2; height:auto; min-height:0; position:static; overflow:auto; background:var(--surface); color:var(--ink); border-right:1px solid var(--line); padding:20px 12px; }
.sidebar-caption { padding:0 10px; font-size:11px; font-weight:650; color:var(--muted); }
.primary-nav { margin:15px 0; gap:3px; }
.primary-nav a { height:38px; border-radius:4px; color:var(--ink); font-size:13px; font-weight:400; gap:11px; }
.primary-nav a:hover { color:var(--ink); background:var(--surface-hover); }
.primary-nav a.active { color:var(--green-dark); background:var(--green-soft); box-shadow:inset 3px 0 var(--green); font-weight:600; }
.primary-nav .app-icon { color:var(--muted); }
.primary-nav a.active .app-icon { color:var(--green); }
.sidebar-foot { border-color:var(--line); color:var(--muted); font-size:11px; }
.app-main { grid-column:2; grid-row:2; min-height:0; min-width:0; overflow:auto; }
.app-shell.test-environment { grid-template-rows:56px 22px minmax(0,1fr); }
.environment-bar { grid-column:1/-1; grid-row:2; height:22px; line-height:22px; background:var(--amber-soft); color:var(--amber); border-bottom:1px solid var(--amber-line); font-size:12px; font-weight:600; text-align:center; }
.test-environment .app-sidebar,.test-environment .app-main { grid-row:3; }
.nav-group summary { display:flex; gap:11px; align-items:center; min-height:38px; padding:0 10px; font-size:13px; cursor:pointer; list-style:none; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group summary > .app-icon:last-child { margin-left:auto; transition:transform .15s; }
.nav-group:not([open]) summary > .app-icon:last-child { transform:rotate(-90deg); }
.nav-group-links { margin-left:19px; border-left:1px solid var(--line); padding-left:10px; display:grid; gap:3px; }
.nav-group-links a { padding-left:15px; }
.app-content { width:100%; max-width:none; padding:20px 24px 36px; }
.page-heading { min-height:48px; margin-bottom:18px; align-items:center; }
.page-heading h1 { font-size:23px; font-weight:600; }
.page-heading p { font-size:12px; }
.page-heading .eyebrow { display:none; }
.workspace-panel { border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; background:white; margin-bottom:22px; }
.workspace-panel.compact { padding:0; }
.panel-heading { min-height:54px; padding:10px 16px; }
.panel-heading h2 { font-size:15px; font-weight:600; }
.panel-heading .section-label { display:none; }
.data-table th { background:var(--surface-subtle); color:var(--muted); font-size:12px; font-weight:600; padding:10px 14px; }
.data-table td { padding:10px 14px; font-size:13px; }
.data-table td strong { font-weight:600; }
.data-table tbody tr:hover { background:var(--green-hover); }
.data-table-wrap { max-width:100%; }
.cell-sub { font-size:11px; }
.command { font-size:13px; min-height:32px; font-weight:500; gap:7px; }
.icon-command { width:32px; height:32px; min-width:32px; flex:0 0 32px; }
.app-icon { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:0 0 20px; color:inherit; }
.app-icon svg { width:20px; height:20px; fill:currentColor; }
.app-icon fluent-icon { color:inherit; }
.portal-switch { display:inline-flex; align-items:center; padding:3px; gap:3px; background:#ffffff18; border:1px solid #ffffff40; border-radius:4px; }
.portal-switch a,.portal-switch span { display:block; padding:5px 12px; font-size:12px; text-decoration:none; white-space:nowrap; border-radius:2px; }
.portal-switch a:hover { background:#ffffff20; }
.app-header .portal-switch a { color:white; }
.portal-switch [aria-current] { background:white; color:var(--green-dark); font-weight:600; }
.login-panel .portal-switch { display:flex; margin-bottom:24px; background:var(--surface-hover); border-color:var(--line); color:var(--ink); }
.login-panel .portal-switch > * { flex:1; text-align:center; }
.login-panel .portal-switch [aria-current] { box-shadow:0 1px 3px #0002; }
.login-brand { margin-bottom:24px; }
.login-shell { background:var(--canvas); }
.login-panel { border-color:var(--line); border-top-color:var(--green); box-shadow:0 12px 32px rgb(36 41 47 / 7%); }
.login-panel > h1 { font-size:28px; margin-bottom:24px; }
.grid-toolbar { padding:12px 14px; display:flex; flex-wrap:wrap; gap:12px; align-items:end; border-bottom:1px solid var(--line); background:white; }
.grid-toolbar label { display:grid; gap:5px; font-size:11px; font-weight:600; color:var(--muted); flex:1 1 130px; min-width:0; max-width:220px; }
.grid-toolbar .search-field { flex:2 1 210px; max-width:360px; }
.grid-toolbar input,.grid-toolbar select { width:100%; min-width:0; min-height:32px; padding:5px 8px; font-size:13px; }
.grid-toolbar .toolbar-actions { display:flex; gap:6px; }
.grid-pager { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; gap:16px; border-top:1px solid var(--line); font-size:12px; flex-wrap:wrap; background:var(--surface-subtle); }
.grid-pager label { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.grid-pager select { width:72px; min-height:30px; padding:4px 6px; }
.grid-pager input { width:60px; min-height:30px; padding:4px; text-align:center; }
.pager-controls { display:flex; align-items:center; gap:7px; }
.pager-count { color:var(--muted); font-variant-numeric:tabular-nums; }
.app-pager { display:grid; grid-template-columns:minmax(260px,1fr) auto minmax(100px,1fr); align-items:center; gap:12px; padding:10px 12px; margin-top:8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:12px; }
.app-pager__page-size,.app-pager__nav,.app-pager__page-edit { display:flex; align-items:center; gap:8px; min-width:0; }
.app-pager__page-size { flex-wrap:wrap; }
.app-pager__label,.app-pager__page-total { color:var(--muted); font-weight:600; white-space:nowrap; }
.app-pager__nav { justify-content:center; gap:6px; }
.app-pager__nav .icon-command { width:34px; height:34px; min-width:34px; border-color:var(--line); font-weight:400; }
.app-pager__page-edit { padding:3px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface-subtle); gap:7px; }
.app-pager__counts { display:grid; gap:5px; justify-items:end; font-variant-numeric:tabular-nums; }
.app-pager__counts strong { font-size:13px; font-weight:600; }
.app-pager__counts span { color:var(--muted); }
@media (max-width:1150px) {
    .app-pager { grid-template-columns:1fr auto; }
    .app-pager__nav { grid-column:1/-1; grid-row:2; }
    .app-pager__counts { grid-column:2; grid-row:1; }
}
.status-pill { border-radius:4px; font-size:11px; padding:3px 7px; }
.billing-editor { padding:18px; display:grid; gap:22px; }
.billing-editor fieldset { border:0; padding:0; min-width:0; margin:0; }
.billing-editor legend { font-size:14px; font-weight:600; padding:0 0 12px; margin-bottom:12px; border-bottom:1px solid var(--line); width:100%; }
.billing-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 20px; }
.billing-fields label { min-width:0; }
.billing-fields input,.billing-fields select { min-height:34px; }
.billing-identity { padding:14px 18px; background:var(--surface-subtle); display:flex; gap:24px; flex-wrap:wrap; }
.billing-identity span { color:var(--muted); }
.billing-layout { max-width:1100px; }
.table-actions { display:table-cell; white-space:nowrap; }
.table-actions > * + * { margin-left:6px; }
.entitlement-layout { gap:22px; }
.table-empty { padding:32px!important; text-align:center; color:var(--muted); }
.menu-toggle { display:none; }
.commerce-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:0; padding:18px; }
.commerce-facts dt { font-size:12px; color:var(--muted); font-weight:400; margin-bottom:5px; }
.commerce-facts dd { margin:0; font-size:14px; overflow-wrap:anywhere; }
.nowrap { white-space:nowrap; }
.wrap-value { white-space:normal; overflow-wrap:anywhere; }
.commerce-checkout { padding:18px; display:grid; gap:18px; max-width:720px; }
.commerce-checkout select { width:100%; min-width:0; min-height:36px; padding:7px 10px; border:1px solid var(--line); border-radius:4px; background:white; color:var(--ink); font:inherit; }
.commerce-checkout select:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.commerce-checkout .form-actions { align-items:center; flex-wrap:wrap; }
.commerce-checkout .form-actions > span { font-size:12px; color:var(--muted); }
.data-table.package-terms { min-width:0; table-layout:fixed; }
.package-terms td { overflow-wrap:anywhere; }
.commerce-price { font-size:24px; font-weight:600; }
.commerce-description { white-space:pre-wrap; overflow-wrap:anywhere; padding:0 18px 18px; margin:0; }
.company-tabs { display:flex; gap:0; border-bottom:1px solid var(--line); }
.company-tabs a { padding:12px 18px; text-decoration:none; font-weight:500; }
.company-tabs a.active { border-bottom:2px solid var(--green); color:var(--green); }
.account-menu { position:relative; min-width:0; max-width:100%; }
.account-trigger { display:flex; gap:10px; align-items:center; background:transparent; border:1px solid transparent; border-radius:4px; color:white; padding:3px 6px; cursor:pointer; min-height:42px; width:100%; max-width:320px; }
.account-trigger > :last-child { flex-shrink:0; }
.account-trigger:hover,.account-trigger:focus-visible { background:#ffffff20; border-color:#ffffff60; }
.account-greeting { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.account-menu-dismiss { position:fixed; inset:56px 0 0; border:0; background:transparent; z-index:80; cursor:default; }
.account-popover { position:absolute; right:0; top:calc(100% + 8px); width:300px; max-width:calc(100vw - 24px); background:white; color:var(--ink); border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 24px #0002; padding:20px; z-index:81; display:grid; gap:8px; }
.account-popover h2 { font-size:18px; margin:0 0 8px; }
.account-popover strong,.account-email { overflow-wrap:anywhere; }
.account-email { font-size:12px; color:var(--muted); }
.account-popover nav { display:grid; margin:10px -8px -8px; gap:4px; }
.account-popover nav a,.account-popover nav button { display:flex; gap:10px; align-items:center; padding:10px 8px; text-decoration:none; border:0; border-radius:4px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.account-popover nav a:hover,.account-popover nav button:hover { background:var(--green-soft); }
.account-tabs { flex-wrap:wrap; margin-bottom:20px; }
.account-settings { padding:22px; max-width:780px; }
.account-settings h2 { margin:0 0 20px; font-size:20px; font-weight:600; }
.account-settings form { display:grid; gap:18px; max-width:440px; }
.account-settings label { min-width:0; }
.account-settings .check-label { display:flex; align-items:center; gap:8px; }
.account-settings .form-actions { justify-content:flex-start; flex-wrap:wrap; }
.account-security-status { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:440px; margin:0 0 24px; }
.account-security-status dd { margin:0; }
.account-session-actions { border-top:1px solid var(--line); margin-top:26px; padding-top:18px; }
.authenticator-qr { width:220px; height:220px; max-width:100%; object-fit:contain; background:white; }
.authenticator-key { display:block; padding:12px; background:var(--canvas); overflow-wrap:anywhere; user-select:all; }
.recovery-codes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; list-style:none; padding:0; user-select:all; }
.recovery-codes code { overflow-wrap:anywhere; }
.password-reset-link { display:block; margin-top:18px; color:var(--green-dark); }
.password-field { min-width:0; display:grid; gap:8px; align-content:start; }
.password-controls { display:grid; grid-template-columns:minmax(60px,1fr) repeat(3,36px); gap:4px; }
.password-controls input { min-width:0; width:100%; }
.password-controls .command { width:36px; height:36px; padding:0; }
.password-field small { font-size:12px; line-height:1.5; }
.password-requirements { font-size:12px; color:var(--muted); line-height:1.5; margin:0; }
.login-panel .check-line { display:flex; align-items:center; gap:8px; }
@media (max-width:1100px) {
    .feature-edit-row { grid-template-columns:minmax(120px,1fr) 110px minmax(100px,1fr) 100px 32px; }
    .meter-edit-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
    .app-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:56px minmax(0,1fr); }
    .app-header { padding:0 12px; gap:10px; }
    .app-header .header-brand { font-size:15px; gap:6px; }
    .header-brand .ait-logo { width:80px; }
    .header-brand .brand-house { display:none; }
    .app-header .account-name { display:none; }
    .app-header .portal-switch { margin-left:auto; }
    .portal-switch a,.portal-switch span { padding:4px 8px; font-size:11px; }
    .app-header .account-block { margin-left:0; }
    .app-header .account-block:last-child { margin-left:auto; }
    .account-trigger { max-width:170px; }
    .app-sidebar { display:none; }
    .app-shell.nav-open .app-sidebar { display:flex; position:fixed; top:56px; left:0; bottom:0; width:216px; z-index:50; box-shadow:4px 0 12px #0002; }
    .app-shell.test-environment.nav-open .app-sidebar { top:78px; }
    .primary-nav { display:grid; grid-template-columns:1fr; }
    .primary-nav a { justify-content:start; }
    .primary-nav a span:last-child { display:inline; }
    .sidebar-foot { display:flex; }
    .app-main { grid-column:1; }
    .menu-toggle { display:inline-grid; }
    .app-content { padding:18px 12px 32px; }
    .page-heading { gap:12px; }
    .grid-toolbar label { max-width:none; }
    .grid-pager { justify-content:center; gap:10px; }
    .billing-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .commerce-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .feature-edit-row,.meter-edit-row { grid-template-columns:minmax(0,1fr) 32px; }
    .pager-count { width:100%; text-align:center; }
}
@media (max-width:430px) {
    .app-header { gap:5px; padding:0 6px; }
    .app-header .header-brand { font-size:14px; }
    .billing-fields { grid-template-columns:minmax(0,1fr); }
    .commerce-facts { grid-template-columns:minmax(0,1fr); }
    .pager-controls { gap:4px; }
    .grid-toolbar { gap:8px; }
    .page-heading h1 { font-size:22px; }
    .account-trigger { max-width:145px; gap:5px; padding:3px; }
    .account-greeting { font-size:12px; }
    .account-settings { padding:18px; }
}
.email-recipient-input, .tax-lookup-input { display: flex; align-items: end; gap: 8px; min-width: 0; }
.email-recipient-input > :first-child, .tax-lookup-input > :first-child { flex: 1; min-width: 0; }
.email-recipients { min-width: 0; margin-top: 12px; }
.email-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; }
.email-tags li { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 8px; border: 1px solid var(--green-line); border-radius: 4px; background: var(--green-soft); color: var(--green-dark); }
.email-tags li span { overflow-wrap: anywhere; min-width: 0; }
.email-tags button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.license-code-control { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.license-code-control > :first-child { flex: 1; min-width: 0; font-family: monospace; }
.language-selector { display: grid; gap: 6px; min-width: 100px; }
.address-switch { display: block; margin-top: 12px; }
.login-language { position: absolute; top: 20px; right: 24px; width: 160px; }
body:has(.login-shell) { height:auto; overflow:auto; }
.registration-form fluent-field { margin:0; }
.registration-form fluent-field > label { display:inline-block; }
.registration-form p { margin:0; }
.registration-field { display:grid; gap:6px; min-width:0; }
.field-feedback { color:var(--red); font-size:12px; line-height:1.5; padding-left:10px; border-left:2px solid var(--red); }
.field-hint { color:var(--muted); font-size:12px; line-height:1.5; }
.validation-notice { padding:12px 14px; border-left:3px solid var(--red); background:var(--red-soft); color:var(--red); font-size:13px; line-height:1.5; }
.customer-editor { gap: 0 !important; }
.customer-section { border: 0; border-bottom: 1px solid var(--line); padding: 20px 0; min-width: 0; }
.customer-section:first-child { padding-top: 0; }
.customer-section h3, .customer-section summary { margin: 0 0 16px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.customer-section h3 svg, .customer-section summary svg { color: var(--green); }
.customer-identity-fields { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 16px; }
.customer-legal-name { grid-column: 1 / -1; display: grid; }
.customer-section .billing-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.customer-section .billing-fields + fluent-switch { display: block; margin-top: 16px; }
.optional-contact summary { cursor: pointer; margin: 0; min-height: 28px; }
.optional-contact summary::after { content: '+'; margin-left: auto; font-size: 20px; color: var(--green); }
.optional-contact[open] summary::after { content: '-'; }
.optional-contact summary span { color: var(--muted); font-weight: 400; font-size: 12px; }
.optional-contact[open] summary { margin-bottom: 16px; }
.correspondence-fields { padding-top: 16px; }
.workspace-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.workspace-tab { border: 0; border-bottom: 3px solid transparent; background: transparent; padding: 12px 16px; font: inherit; color: var(--muted); cursor: pointer; }
.workspace-tab[aria-current="page"] { color: var(--green-dark); border-bottom-color: var(--green); font-weight: 600; }
.portal-dialog { max-height: calc(100dvh - 32px); padding: 0; }
.portal-dialog .catalog-dialog-heading { display: flex; gap: 12px; align-items: center; padding: 20px 24px; }
.portal-dialog .catalog-dialog-heading > .app-icon { color: var(--green); }
.portal-dialog .catalog-dialog-heading h2 { font-size: 20px; font-weight: 500; margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.portal-dialog .catalog-dialog-heading button { margin-left: auto; border: 0; }
.portal-dialog .catalog-editor { padding: 4px 24px 20px; max-height: calc(100dvh - 140px); overflow: auto; }
.portal-dialog h3 { font-size: 16px; margin: 22px 0 12px; }
.portal-dialog .stack-form { padding: 0; border: 0; gap: 24px; }
.portal-dialog fluent-field { margin: 0; }
.portal-dialog .form-actions { position: sticky; bottom: -20px; background: white; padding: 16px 0 4px; border-top: 1px solid var(--line); z-index: 2; }
.portal-dialog .icon-command { align-self: center; }
@media(max-width:600px) { .portal-dialog .catalog-dialog-heading { padding: 16px; } .portal-dialog .catalog-editor { padding: 0 16px 16px; } }
/* Keep the fixed brand stable when the v5 web-component initializer applies its default theme. */
html:root {
    --colorBrandBackground: var(--green);
    --colorBrandBackgroundHover: var(--green-dark);
    --colorBrandBackgroundPressed: var(--green-pressed);
    --colorBrandBackgroundSelected: var(--green-dark);
    --colorBrandBackground2: var(--green-soft);
    --colorBrandForeground2: var(--green-dark);
    --colorCompoundBrandBackground: var(--green);
    --colorCompoundBrandBackgroundHover: var(--green-dark);
    --colorCompoundBrandBackgroundPressed: var(--green-pressed);
    --colorCompoundBrandForeground1: var(--green);
    --colorCompoundBrandForeground1Hover: var(--green-dark);
    --colorCompoundBrandForeground1Pressed: var(--green-pressed);
    --colorCompoundBrandStroke: var(--green);
    --colorCompoundBrandStrokeHover: var(--green-dark);
    --colorCompoundBrandStrokePressed: var(--green-pressed);
    --colorBrandForeground1: var(--green);
    --colorBrandForegroundLink: var(--green-dark);
    --colorBrandForegroundLinkHover: var(--green-pressed);
    --colorBrandStroke1: var(--green);
    --colorBrandStroke2: var(--green-line);
    --colorNeutralForeground1: var(--ink);
    --colorNeutralForeground2: var(--muted);
    --colorNeutralBackground1: var(--surface);
    --colorNeutralBackground2: var(--surface-subtle);
    --colorNeutralStroke2: var(--line);
    --bs-primary: var(--green);
    --bs-primary-rgb: 11, 122, 104;
    --bs-primary-text-emphasis: var(--green-dark);
    --bs-primary-bg-subtle: var(--green-soft);
    --bs-primary-border-subtle: var(--green-line);
    --bs-link-color: var(--green-dark);
    --bs-link-color-rgb: 9, 102, 85;
    --bs-link-hover-color: var(--green-pressed);
    --bs-link-hover-color-rgb: 7, 83, 67;
    --bs-focus-ring-color: var(--focus-ring);
}
.dxbl-grid {
    --dxbl-grid-bg: var(--surface);
    --dxbl-grid-color: var(--ink);
    --dxbl-grid-border-color: var(--line);
    --dxbl-grid-header-bg: var(--surface-subtle);
    --dxbl-grid-header-color: var(--ink);
    --dxbl-grid-hover-bg: var(--green-hover);
    --dxbl-grid-selection-bg: var(--green-soft);
    --dxbl-grid-selection-color: var(--green-dark);
    --dxbl-grid-selection-focus-bg: var(--green-soft);
    --dxbl-grid-selection-focus-color: var(--green-dark);
    --dxbl-grid-focus-frame-color: var(--green);
    --dxbl-grid-column-chooser-focus-frame-color: var(--green);
    --dxbl-grid-drop-indicator-color: var(--green);
}
@media (forced-colors: active) {
    .command:focus-visible, .icon-command:focus-visible { outline:2px solid Highlight; }
    .primary-nav a.active { border-left:3px solid Highlight; }
}
.partner-section-title { margin-top: 28px; font-size: 18px; }
.partner-editor { border-top: 1px solid #d9dde1; margin-top: 28px; padding-top: 24px; min-width: 0; }
.partner-editor h2 { font-size: 20px; }
.partner-editor h3 { font-size: 17px; }
.cart-checkout fluent-text-input { width: 100%; }
.correspondence-fields h4 { margin: 0 0 12px; font-size: 14px; }
.customer-save { position: sticky; bottom: -24px; background: white; z-index: 2; margin-top: 0 !important; padding: 16px 0 !important; border-top: 0 !important; }
.customer-save .command { display: inline-flex; align-items: center; gap: 8px; }
@media(max-width:600px) {
    .customer-identity-fields, .customer-section .billing-fields { grid-template-columns: minmax(0,1fr); }
    .customer-save { bottom: -16px; }
    .login-language { position: relative; top: auto; right: auto; justify-self: end; margin-bottom: 12px; }
}

/* Shared surfaces also cover native inputs and third-party grid editors. */
.workspace-panel, .grid-toolbar, .login-panel, .account-popover,
.portal-dialog .form-actions, .customer-save, .catalog-tools fluent-accordion,
.empty-mode-marker, .commerce-checkout select, .command, .icon-command,
input, select, textarea { background-color:var(--surface); color:var(--ink); }
.workspace-panel { border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.login-panel { border-radius:16px; }
.command,.icon-command { border-radius:8px; }
.command.primary { background: #4f46e5; border-color:#4f46e5; color:#fff; }
.command.primary:hover { background:#4338ca; border-color:#4338ca; }
.data-table td { border-color:var(--line); }
.status-pill { background:var(--surface-hover); color:var(--muted); border-radius:6px; }
.status-pill.active,.alert-strip.success { background:var(--success-soft); color:var(--success); }
.account-popover { border-radius:14px; box-shadow:var(--shadow); }
.account-popover nav a,.account-popover nav button { min-height:44px; }
.partner-editor { border-color:var(--line); }
.app-header { border-bottom:1px solid #334066; }
.app-content { padding:28px 28px 40px; }
.primary-nav a,.nav-group summary { min-height:42px; height:auto; padding-block:9px; border-radius:8px; }
.nav-group-links a { line-height:1.45; }
.nav-backdrop { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.language-selector { display:flex; align-items:center; min-width:0; position:relative; }
.language-selector > .form-error { position:absolute; right:0; top:100%; width:220px; padding:10px; background:var(--surface); border:1px solid var(--red-line); border-radius:8px; z-index:90; }
.compact-selector { display:inline-flex; align-items:center; gap:5px; margin:0; padding:0 9px; min-height:40px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); cursor:pointer; white-space:nowrap; }
.compact-selector svg { flex:0 0 18px; }
.compact-selector select { width:auto; min-width:48px; min-height:38px; padding:5px 2px; border:0; border-radius:6px; background:transparent; color:var(--ink); font:inherit; font-size:12px; cursor:pointer; box-shadow:none; }
.compact-selector:focus-within { outline:2px solid var(--green); outline-offset:2px; }
.compact-selector select:focus { box-shadow:none; }
.compact-selector select option { color:var(--ink); background:var(--surface); }
.app-header .compact-selector { border-color:#44516b; background:transparent; color:#c7d2fe; }
.app-header .compact-selector select { color:#eef2ff; }
.login-language { width:auto; display:flex; align-items:center; gap:8px; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.data-table-wrap,.catalog-grid { overscroll-behavior-inline:contain; }
:root[data-theme="dark"] .ait-logo:not(.ait-logo-light) { filter:brightness(0) invert(1); }
:root[data-theme="dark"] .product-artwork { background:#fff; border-radius:10px; padding:8px; }
html:root {
    --bs-body-bg:var(--surface);
    --bs-body-color:var(--ink);
    --bs-border-color:var(--line);
    --bs-secondary-color:var(--muted);
    --bs-tertiary-bg:var(--surface-subtle);
    --bs-secondary-bg:var(--surface-hover);
    --bs-emphasis-color:var(--ink);
    --bs-primary-rgb:79,70,229;
    --bs-link-color-rgb:79,70,229;
    --bs-link-hover-color-rgb:67,56,202;
    --colorBrandForegroundOnLight:#4338ca;
    --colorNeutralBackground3:var(--surface-hover);
    --colorNeutralBackground4:var(--canvas);
    --colorNeutralStroke1:var(--line-strong);
    --colorNeutralForeground3:var(--muted);
    --colorBrandBackground:#4f46e5;
    --colorBrandBackgroundHover:#4338ca;
    --colorBrandBackgroundPressed:#3730a3;
}
:root[data-theme="dark"] {
    --bs-body-bg-rgb:23,32,51;
    --bs-body-color-rgb:231,237,247;
    --bs-link-color-rgb:165,180,252;
    --bs-link-hover-color-rgb:199,210,254;
}
.dxbl-grid,.dxbl-popup,.dxbl-dropdown-dialog,.dxbl-modal {
    --dxbl-listbox-bg:var(--surface);
    --dxbl-listbox-color:var(--ink);
    --dxbl-listbox-border-color:var(--line);
    --dxbl-menu-bg:var(--surface);
    --dxbl-menu-color:var(--ink);
    --dxbl-pager-bg:var(--surface);
    --dxbl-pager-color:var(--ink);
    --dxbl-pager-active-page-btn-bg:#4f46e5;
    --dxbl-pager-active-page-btn-color:#fff;
    --dxbl-grid-footer-bg:var(--surface-subtle);
    --dxbl-grid-footer-color:var(--muted);
}
/* DevExpress defines these tokens on each editor, so override the component
   itself rather than relying on inheritance from the containing grid. */
.dxbl-text-edit {
    --dxbl-text-edit-bg:var(--surface);
    --dxbl-text-edit-color:var(--ink);
    --dxbl-text-edit-border-color:var(--line-strong);
    --dxbl-text-edit-readonly-bg:var(--surface-subtle);
    --dxbl-text-edit-readonly-color:var(--muted);
    --dxbl-text-edit-disabled-bg:var(--surface-subtle);
    --dxbl-text-edit-disabled-color:var(--muted);
    --dxbl-text-edit-focus-border-color:var(--green);
    --dxbl-text-edit-focus-shadow-color:var(--focus-ring);
}
.dxbl-listbox,.dxbl-list-box {
    --dxbl-listbox-bg:var(--surface);
    --dxbl-listbox-color:var(--ink);
    --dxbl-listbox-border-color:var(--line);
    --dxbl-listbox-item-hover-bg:var(--surface-hover);
    --dxbl-listbox-item-hover-color:var(--ink);
    --dxbl-list-box-bg:var(--surface);
    --dxbl-list-box-color:var(--ink);
    --dxbl-list-box-border-color:var(--line);
    --dxbl-list-box-item-hover-bg:var(--surface-hover);
    --dxbl-list-box-item-hover-color:var(--ink);
}
.dxbl-pager {
    --dxbl-pager-color:var(--ink);
    --dxbl-pager-page-edit-bg:var(--surface);
    --dxbl-pager-page-edit-color:var(--ink);
    --dxbl-pager-page-edit-border-color:var(--line);
    --dxbl-pager-active-page-btn-bg:#4f46e5;
    --dxbl-pager-active-page-btn-color:#fff;
}
@media(max-width:1000px) {
    .app-content { padding:22px 18px 36px; }
    .catalog-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
    .app-shell { display:grid; min-height:0; }
    .app-content { padding:20px 12px 32px; }
    .nav-open .nav-backdrop { display:block; position:fixed; inset:56px 0 0; background:rgb(8 15 30 / 55%); border:0; border-radius:0; z-index:49; }
    .test-environment.nav-open .nav-backdrop { top:78px; }
    .app-shell.nav-open .app-sidebar { width:min(300px,86vw); padding:16px; }
    .primary-nav a,.nav-group summary { min-height:44px; }
    .app-header .theme-selector { padding-inline:6px; }
    .app-header .theme-selector select { max-width:76px; }
    .page-heading { flex-wrap:wrap; align-items:flex-start; gap:16px; }
    .page-heading p { font-size:13px; line-height:1.6; }
    .page-heading .button-row,.form-actions { flex-wrap:wrap; }
    .panel-heading,.detail-section-heading { flex-wrap:wrap; }
    .app-pager { display:flex; flex-wrap:wrap; justify-content:center; }
    .app-pager__nav { flex-wrap:wrap; }
    .app-pager__counts { justify-items:center; }
    .catalog-filters { grid-template-columns:minmax(0,1fr); }
    .catalog-field-filter.range { grid-column:auto; }
    .icon-command,.command { min-height:40px; }
    .icon-command { width:40px; min-width:40px; flex-basis:40px; }
    .compact-selector { min-height:44px; }
    .compact-selector select { min-height:42px; }
    .company-tabs { overflow-x:auto; }
    .company-tabs a { white-space:nowrap; }
    .login-shell { padding-top:20px; }
    .login-language { position:static; justify-self:end; margin-bottom:16px; }
    .license-code-control { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}