.login-logo { background: url('../../images/logo.png') no-repeat center; height: 70px;}
.header-top { background: #f8f8f8 url('../../images/logo.png') no-repeat 10px 0; padding-left: 230px;}
.header-top-menu { background-color: #239fd9;} /*header color*/

.navbar-default .navbar-nav > li > a {color: #f8f8f8;} /*tio menu item color*/

.nav>li{height: 70px; }
.navbar-nav > li > a {padding-top: 25px;}

.navbar-default .navbar-brand:focus {color: #777;} /*brand*/

.navbar-header.active,
.navbar-header.active:focus,
.navbar-header.active:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {color: #777; background-color:  #f8f8f8; height: 100%;} /*active-selected colors*/

ul.list-group > li.active > a,
.list-group-item.active { color: #f8f8f8; background-color: #239fd9; } /*sub menu items*/

/* ===== modern.css ===== */
/*! ShieldConex Modern UI: modern.css
 *  version 0.1.0+20261014T133132Z  built 2026-10-14T13:31:32.274Z
 *  parts: 00-tokens.css, 10-controls.css, 20-components.css, 30-pages.css, 35-template-pages.css, 36-code-editor.css, 37-dashboard.css, 41-sweep-manage.css, 42-sweep-logs.css, 43-sweep-reports.css, 44-sweep-settings.css, 45-sweep-manage2.css
 *  CSS-only reskin. Loads after all legacy CSS. */

/* ===== part: 00-tokens.css ===== */
/* =====================================================================
   ShieldConex Portal: Modern UI (modern.css)
   Bluefin Design System (MUI v5.4 kit) as applied in the New Design
   prototypes and the P2PE Manager screens.

   CSS-only reskin. Loaded AFTER all legacy CSS, including the branding
   theme. Never edit legacy stylesheets; override them from here.

   Conventions
   - Every selector starts with `html body` so it beats Bootstrap 3 and
     app.css without !important. Use !important only to beat an inline
     style or a legacy !important, and comment why.
   - Colors come only from the tokens below. Brand surfaces use
     --m-brand*; on partner-branded hosts those fall back to neutral so
     the partner theme keeps its colors (see BRAND GATE).
   - Each section names the markup/partial it targets.
   ===================================================================== */

/* ---------- 0.1 Web fonts --------------------------------------------
   Base64 subsets are injected here by build/embed-assets.mjs between
   the markers. Until then the stacks below fall back to system fonts.
   @@FONTS-BEGIN@@ */
/* @@FONTS-END@@ */

/* ---------- 0.2 Tokens -------------------------------------------- */
:root {
  /* Primary ("New Main") */
  --m-primary: #0061E0;
  --m-primary-dark: #0047BB;
  --m-primary-light: #E6F2FA;
  --m-primary-4: #F5F9FE;   /* hover fill */
  --m-primary-8: #EBF3FD;   /* selected fill */
  --m-primary-12: #E0ECFB;  /* focus fill */
  --m-primary-30: #B3D0F6;  /* focus ring */
  --m-primary-50: #7FAFEF;  /* outlined border */

  /* Secondary (navy) */
  --m-navy: #020F59;
  --m-navy-8: #EBECF2;
  --m-navy-12: #E0E2EB;

  /* Text */
  --m-text: #212121;
  --m-text-2: #666666;
  --m-text-disabled: #9E9E9E;

  /* Status: main / dark / 12p soft fill / 190p alert bg / 160p alert text */
  --m-error: #D32F2F;   --m-error-dark: #C62828;   --m-error-12: #F9E6E6;   --m-error-bg: #FBEAEA;   --m-error-text: #541313;
  --m-warning: #ED6C02; --m-warning-dark: #E65100; --m-warning-12: #FCEDE0; --m-warning-bg: #FDF0E5; --m-warning-text: #5F2B01;
  --m-info: #0288D1;    --m-info-dark: #01579B;    --m-info-12: #E0F0F9;    --m-info-bg: #E5F3FA;    --m-info-text: #013654;
  --m-success: #2E7D32; --m-success-dark: #1B5E20; --m-success-12: #E6EFE6; --m-success-bg: #EAF2EA; --m-success-text: #123214;

  /* Action / surfaces */
  --m-hover: #F5F5F5;
  --m-selected: #EBEBEB;
  --m-disabled: #BDBDBD;
  --m-disabled-bg: #E0E0E0;
  --m-divider: #E0E0E0;
  --m-outline: rgba(0, 0, 0, .23);      /* outlined input resting border */
  --m-outline-hover: rgba(0, 0, 0, .87);
  --m-chip: #EBEBEB;
  --m-surface: #FFFFFF;
  --m-surface-2: #F7F8FA;               /* page background behind cards */
  --m-toolbar: #ECEFF1;                 /* grid filter toolbar (prototype) */
  --m-backdrop: rgba(0, 0, 0, .5);
  --m-snackbar: #323232;

  /* Brand-gated (overridden to neutral on partner hosts, see 0.3) */
  --m-brand: var(--m-primary);
  --m-brand-dark: var(--m-primary-dark);
  --m-brand-8: var(--m-primary-8);
  --m-brand-12: var(--m-primary-12);
  --m-brand-30: var(--m-primary-30);
  --m-nav-active-bg: var(--m-primary-8);
  --m-nav-active-text: var(--m-primary);

  /* Type */
  --m-font: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --m-font-head: Poppins, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --m-icon-font: "Material Symbols Outlined";
  --m-fs-xs: 12px;   /* caption, input label, helper */
  --m-fs-sm: 13px;   /* button small, dense table header */
  --m-fs: 14px;      /* body2: base UI size */
  --m-fs-md: 16px;   /* body1, input text */
  --m-fs-h6: 20px;   /* page title */
  --m-fs-h5: 24px;
  --m-btn-transform: uppercase;          /* DS + P2PE. Set to none for Title Case */
  --m-btn-tracking: .4px;

  /* Shape and size */
  --m-radius: 4px;
  --m-radius-lg: 8px;
  --m-radius-pill: 16px;
  --m-space: 8px;
  --m-ctl-h: 40px;        /* outlined input, medium */
  --m-ctl-h-sm: 32px;
  --m-btn-h: 36px;
  --m-btn-h-sm: 30px;
  --m-btn-h-lg: 42px;
  --m-row-h: 48px;        /* data grid row */

  /* Elevation (MUI) */
  --m-shadow-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
  --m-shadow-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  --m-shadow-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
  --m-shadow-24: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
  --m-focus-ring: 0 0 0 3px var(--m-brand-30);

  /* Layout */
  --m-drawer-w: 248px;
  --m-topbar-h: 64px;
  --m-bp: 1024px;          /* layout gate (documented; media queries use the literal) */
}

/* ---------- 0.3 BRAND GATE ----------------------------------------
   Branding is matched by hostname and REPLACES theme.css. A partner
   theme sets only shell colors: the header/nav background and link
   colors, the active nav and .list-group-item.active colors, and the
   logo (background on .header-top / .login-logo).

   Rule: shell COLOR and LOGO rules live only under
     html:has(link[href*="app.theme.bluefin.css"]) ...
   so a partner host keeps its theme's colors and logo. Shell layout
   (position, size, spacing) applies everywhere. Components (buttons,
   inputs, grids...) use --m-primary on every host: partner themes
   don't style them. */

/* ===== part: 10-controls.css ===== */
/* =====================================================================
   10-controls.css: global controls (Bluefin DS / MUI v5.4 look)
   Depends on 00-tokens.css. Every selector is prefixed `html body`.
   Order matters inside each section: rest, hover, readonly/disabled,
   focus, validation. Several later sections (ui-select, datepicker,
   input-group adornments) intentionally out-specify section 3.
   ===================================================================== */

/* ---------- 10.0 Part tokens (new; listed in report) ---------------
   SVG icons live in custom properties so other parts can reuse them
   with mask-image + background-color: <token color>. data: URIs only. */
:root {
  --m-fs-h4: 34px;                      /* h1 inside the app */
  --m-fs-lg: 18px;                      /* h4 */
  --m-tooltip: rgba(97, 97, 97, .92);   /* MUI tooltip grey #616161 @ 92% */
  --m-icon-muted: #757575;              /* MUI action.active (select arrow) */
  --m-ico-arrow-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23757575' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  --m-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  --m-ico-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
  --m-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
  --m-ico-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
  --m-ico-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z'/%3E%3C/svg%3E");
  --m-ico-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
}

/* =====================================================================
   1. BASE TYPOGRAPHY
   Targets: index.ejs <body>; page titles are <fieldset><legend> at the
   top of nearly every view (partials/** /list.html, details.html);
   h3 (partials/dashboard/dashboard.html, gateway-transaction/details),
   h4 section headings (dashboard, documentation/documents,
   include/auth.form.html), h1 (partials/error.html).
   Labels: <label> / <label class="required"> (daasform adds .required,
   js/app.directive.js; app.css draws " *"), .control-label
   (form-horizontal views), .help-inline (daasHelpInline directive),
   .text-muted (auth.form, settings/tfa_app), <hr>, <pre>.
   ===================================================================== */
html body {
  font-family: var(--m-font);
  font-size: var(--m-fs);
  line-height: 1.43;
  color: var(--m-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 1.1 Headings: Poppins for h1-h4 and legends, Roboto Medium for h5/h6 */
/* plain lists (not :is) so h-elements keep element-level specificity and
   class rules such as .modal-title still win */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3, html body .h4, html body .h5, html body .h6 {
  font-family: var(--m-font-head);
  font-weight: 500;
  color: var(--m-text);
  letter-spacing: 0;
}
html body h1, html body .h1 { font-size: var(--m-fs-h4); line-height: 1.235; }
html body h2, html body .h2 { font-size: var(--m-fs-h5); line-height: 1.334; }
html body h3, html body .h3 { font-size: var(--m-fs-h6); line-height: 1.6; }
html body h4, html body .h4 { font-size: var(--m-fs-lg); line-height: 1.5; }
html body h5, html body .h5, html body h6, html body .h6 { font-family: var(--m-font); }
html body h5, html body .h5 { font-size: var(--m-fs-md); line-height: 1.5; }
html body h6, html body .h6 { font-size: var(--m-fs); line-height: 1.57; }

/* 1.2 Page / section title: <fieldset><legend> in partials */
html body legend {
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 500;
  line-height: 1.6;
  color: var(--m-text);
  border-bottom: 1px solid var(--m-divider);
  padding-bottom: 12px;
  margin-bottom: 24px;
}

/* 1.3 Links (class-less <a>; nav/menu links keep their own class rules) */
html body a { color: var(--m-primary); }
html body a:hover,
html body a:focus { color: var(--m-primary-dark); }
html body a:focus:not(:focus-visible) { outline: 0; }
html body a:focus-visible { outline: 2px solid var(--m-primary); outline-offset: 2px; border-radius: 2px; }

/* 1.4 Small / muted / text utilities */
html body small, html body .small { font-size: 85%; }
html body .text-muted { color: var(--m-text-2); }
html body .text-primary { color: var(--m-primary); }
html body .text-success { color: var(--m-success); }
html body .text-info { color: var(--m-info); }
html body .text-warning { color: var(--m-warning); }
html body .text-danger { color: var(--m-error); }

/* 1.5 hr, code, pre (dashboard.html, settings/tfa_configure.html,
       settings/eula.html, include/webhook-config.html) */
html body hr { border: 0; border-top: 1px solid var(--m-divider); margin: 16px 0; }
html body code {
  color: var(--m-text);
  background: var(--m-hover);
  border-radius: var(--m-radius);
  padding: 2px 4px;
  font-size: 90%;
}
html body pre {
  color: var(--m-text);
  background: var(--m-surface-2);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
  padding: 12px 16px;
  font-size: var(--m-fs-sm);
  line-height: 1.5;
}

/* 1.6 Field labels (MUI InputLabel, shrunk/outside: 12px secondary) */
html body label,
html body .control-label {
  font-size: var(--m-fs-xs);
  font-weight: 400;
  line-height: 16px;
  color: var(--m-text-2);
  margin-bottom: 4px;
}
/* Labels that wrap a checkbox/radio read as body text (.checkbox label,
   #partner-active in include/partner.select.tree.html, template views) */
html body :is(.checkbox, .radio) label,
html body label:has(> input[type="checkbox"], > input[type="radio"]) {
  font-size: var(--m-fs);
  line-height: 20px;
  color: var(--m-text);
  font-weight: 400;
}
/* Focused field tints its label primary (MUI) */
html body .form-group:has(> .form-control:focus, > .input-group:focus-within) > label { color: var(--m-primary); }
/* Required marker: app.css draws `label.required::after{content:" *"}` */
html body label.required::after { color: inherit; }

/* 1.7 Help text: .help-block (Bootstrap), .help-inline (daas-help-inline) */
html body :is(.help-block, .help-inline) {
  font-size: var(--m-fs-xs);
  line-height: 1.66;
  color: var(--m-text-2);
  margin: 4px 0 0;
}

/* 1.8 form-horizontal label alignment (include/auth.form.html,
       productCommunication/notice*.html, settings/forgot.html):
       re-centre .control-label on the 40px field */
@media (min-width: 768px) {
  html body .form-horizontal .control-label { padding-top: 12px; }
}

/* =====================================================================
   2. TEXT INPUTS: MUI outlined
   Targets: .form-control on input/select/textarea everywhere
   (partials/**), .input-sm on filter selects (audit, reports,
   transaction lists, include/encryptionkey.select.html), readonly
   inputs (gateway-transaction/details.html, branding/details.html).
   Validation: daasform (js/app.directive.js) toggles .has-error /
   .has-success on .form-group when the input is ng-invalid/ng-valid
   and not pristine, adds .has-feedback, and inserts
   <daasvalidationmessage>/<daasrequiredmessage>/<daascontrolfeedback>
   after the input (partials/include/validationmessage.html,
   requiredmessage.html, controlfeedback.html, phonemessage.html).
   ===================================================================== */
html body .form-control {
  height: var(--m-ctl-h);
  padding: 0 14px;
  font-family: var(--m-font);
  font-size: var(--m-fs);
  line-height: 1.4375;
  color: var(--m-text);
  background-color: var(--m-surface);
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius);
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
html body textarea.form-control { height: auto; padding: 8.5px 14px; }
html body input[type="file"].form-control { height: auto; padding: 8px 14px; }
html body select.form-control[multiple],
html body select.form-control[size] { height: auto; padding: 8px 14px; }

/* 2.1 Native select: MUI ArrowDropDown chevron (data: SVG token) */
html body select.form-control:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: var(--m-ico-arrow-drop);
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 24px 24px;
}
html body select.form-control::-ms-expand { display: none; }

/* 2.2 Placeholder */
html body .form-control::placeholder { color: var(--m-text-disabled); opacity: 1; }

/* 2.3 States (order: hover < readonly < disabled < focus < validation) */
html body .form-control:hover { border-color: var(--m-outline-hover); }
html body .form-control[readonly] {
  background-color: var(--m-surface-2);
  border-color: var(--m-outline);
}
html body .form-control[disabled],
html body fieldset[disabled] .form-control {
  color: var(--m-text-disabled);
  background-color: var(--m-surface);
  border-color: var(--m-disabled);
  -webkit-text-fill-color: var(--m-text-disabled);
}
html body .form-control:focus {
  outline: 0;
  border-color: var(--m-primary);
  box-shadow: inset 0 0 0 1px var(--m-primary);   /* 2px border look, no layout shift */
}

/* 2.4 Sizes: .input-sm (filter bars), .form-group-sm, .input-lg */
html body .input-sm,
html body .form-group-sm .form-control {
  height: var(--m-ctl-h-sm);
  padding: 0 10px;
  font-size: var(--m-fs-sm);
  border-radius: var(--m-radius);
}
html body select.input-sm:not([multiple]):not([size]),
html body .form-group-sm select.form-control:not([multiple]):not([size]) { padding-right: 32px; background-position: right 4px center; }
html body textarea.input-sm { height: auto; padding: 6px 10px; }
html body .input-lg,
html body .form-group-lg .form-control {
  height: calc(var(--m-ctl-h) + 8px);
  padding: 0 14px;
  font-size: var(--m-fs-md);
  border-radius: var(--m-radius);
}

/* 2.5 Validation: Bootstrap .has-* (set by daasform) + raw Angular state
       for forms without daasform (.ng-invalid.ng-dirty = same rule
       daasform uses, so no new error display timing is introduced) */
html body .has-error .form-control,
html body .form-control.ng-invalid.ng-dirty { border-color: var(--m-error); box-shadow: none; }
html body .has-error .form-control:hover,
html body .form-control.ng-invalid.ng-dirty:hover { border-color: var(--m-error-dark); }
html body .has-error .form-control:focus,
html body .form-control.ng-invalid.ng-dirty:focus { border-color: var(--m-error); box-shadow: inset 0 0 0 1px var(--m-error); }
html body .has-warning .form-control { border-color: var(--m-warning); box-shadow: none; }
html body .has-warning .form-control:focus { border-color: var(--m-warning); box-shadow: inset 0 0 0 1px var(--m-warning); }
/* MUI shows no green border for valid fields: neutralise Bootstrap's */
html body .has-success .form-control { border-color: var(--m-outline); box-shadow: none; }
html body .has-success .form-control:hover { border-color: var(--m-outline-hover); }
html body .has-success .form-control:focus { border-color: var(--m-primary); box-shadow: inset 0 0 0 1px var(--m-primary); }

/* Label / helper colours per state (Bootstrap uses (0,2,0) here) */
html body .has-error :is(label, .control-label, .help-block, .help-inline) { color: var(--m-error); }
html body .has-warning :is(label, .control-label, .help-block, .help-inline) { color: var(--m-warning); }
html body .has-success :is(label, .control-label, .help-block, .help-inline) { color: var(--m-text-2); }
html body :is(.has-error, .has-warning, .has-success) :is(.checkbox, .radio) label { color: var(--m-text); }

/* 2.6 Inline validation messages -> MUI helper text.
       <div class="alert alert-danger alert-invalid"> from
       include/validationmessage.html and include/phonemessage.html
       (ng-show toggled: display is NOT touched) */
html body .alert.alert-invalid,
html body .form-group .alert.alert-invalid {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 3px 14px 0;
  font-size: var(--m-fs-xs);
  line-height: 1.66;
  color: var(--m-error);
}
html body .alert.alert-invalid::before { content: none; }

/* 2.6b Required-empty fields after a submit (merged from sweep fixes
       manage 41.5, settings 44.5, manage2 45.9).
       Every daasform form (js/app.directive.js) and plain Angular form:
       a submit adds form.ng-submitted and daasform shows "The field is
       required" (include/validationmessage.html), but untouched inputs stay
       ng-pristine, so 2.5 (.has-error / .ng-invalid.ng-dirty) left the field
       grey under a red message. MUI: red outline + red label. Keyed on
       Angular's own state after submit (no new error timing):
       .ng-invalid on the control, or a visible helper message in the group
       (ui-select / intl-tel where the invalid element isn't .form-control).
       Seen on manage/{user,partner,client,email}.html, template/*,
       branding/details, gateway-template/details, saml/*, credentialVault/
       details, documentstore/details, manage/notificationDetails,
       include/auth.form.html, settings/{forgot,account,profile,expired,
       tfa_app}.html. Disabled controls are left alone. */
html body form.ng-submitted .form-control.ng-invalid:not([disabled]) { border-color: var(--m-error); box-shadow: none; }
html body form.ng-submitted .form-control.ng-invalid:not([disabled]):hover { border-color: var(--m-error-dark); }
html body form.ng-submitted .form-control.ng-invalid:not([disabled]):focus { border-color: var(--m-error); box-shadow: inset 0 0 0 1px var(--m-error); }
html body form.ng-submitted .form-group:has(.alert-invalid:not(.ng-hide)) > :is(input, select, textarea).form-control,
html body form.ng-submitted .form-group:has(.alert-invalid:not(.ng-hide)) > .intl-tel-input > input.form-control,
html body form.ng-submitted .form-group:has(.alert-invalid:not(.ng-hide)) .ui-select-bootstrap > .ui-select-match > .btn.ui-select-toggle { border-color: var(--m-error); }
/* adornment-mode input group (2.9.2): the group draws the outline */
html body form.ng-submitted .input-group:has(> .form-control.ng-invalid:not([disabled])):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) { border-color: var(--m-error); }
html body form.ng-submitted .input-group:has(> .form-control.ng-invalid:not([disabled])):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)):focus-within { box-shadow: inset 0 0 0 1px var(--m-error); }
html body form.ng-submitted .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .form-control.ng-invalid:is(*, :hover, :focus) {
  border-color: transparent;   /* the input inside stays borderless (no double outline) */
  box-shadow: none;
}
html body form.ng-submitted .form-group:has(> .form-control.ng-invalid:not([disabled]), > .input-group > .form-control.ng-invalid:not([disabled]), > .intl-tel-input > .form-control.ng-invalid, > ng-quill-editor.ng-invalid, .alert-invalid:not(.ng-hide)) > label:not(:has(> input)) { color: var(--m-error); }

/* 2.7 Feedback glyphs (include/controlfeedback.html: .glyphicon-ok /
       .glyphicon-remove .form-control-feedback, ng-show toggled).
       They sit in <daascontrolfeedback> after the input, so Bootstrap's
       `label ~ .form-control-feedback` never matches and app.css pins
       them at top:-5px. Centre them inside the 40px field instead when
       the form-group starts with its label (stacked layout only). */
html body .form-control-feedback {
  width: 40px;
  height: var(--m-ctl-h);
  line-height: var(--m-ctl-h);
  font-size: var(--m-fs);
}
html body .has-feedback:has(> label:first-child):not(.form-horizontal *) .form-control-feedback { top: 20px; }
html body .has-feedback select.form-control:not([multiple]):not([size]) { padding-right: 64px; }
html body .has-feedback select.form-control ~ :is(daascontrolfeedback, daasrequiredmessage) .form-control-feedback { right: 28px; }
html body .has-error .form-control-feedback { color: var(--m-error); }
html body .has-success .form-control-feedback { color: var(--m-success); }
html body .has-warning .form-control-feedback { color: var(--m-warning); }

/* 2.8 Partner tree search box (include/partner.select.tree.html:
       <input type="search" id="search-partner"> has no .form-control) */
html body .tree-dropdown input[type="search"] {
  width: 100%;
  height: var(--m-ctl-h);
  padding: 0 14px;
  font-size: var(--m-fs);
  color: var(--m-text);
  background: var(--m-surface);
  border: 1px solid var(--m-primary);
  border-radius: var(--m-radius);
  box-shadow: inset 0 0 0 1px var(--m-primary);
  outline: 0;
}

/* =====================================================================
   2.9 INPUT GROUPS -> MUI adornments
   Targets: .input-group in branding/details.html, credentialVault,
   documentstore, file-process, gateway-template, webhooks/details,
   template/details + style-editor, manage/partner + user,
   include/date.html (daasdate), include/user.select.html,
   include/webhook-config.html, manage/notificationDetails.html.

   Two modes:
   A) "Adornment" mode: the group holds only a .form-control plus
      addons/buttons. The OUTLINE moves to the .input-group, the input
      loses its own border and buttons render as icon/text adornments.
   B) "Joined" fallback: when daasform has inserted its message
      elements INSIDE the group (named inputs inside a .form-group, e.g.
      daasdate), moving the outline would wrap the error text. Those
      keep Bootstrap's joined segments, recoloured to the outline look.
   Selector for A (long but stable; elements are inserted once):
   .input-group:has(> .form-control):not(:has(> daasvalidationmessage,
     > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage,
     > daasphonemessage, > .alert))
   ===================================================================== */

/* 2.9.1 Joined fallback (B) and shared addon/btn sizing */
html body .input-group-addon {
  font-size: var(--m-fs);
  color: var(--m-text-2);
  background-color: var(--m-surface-2);
  border-color: var(--m-outline);
  padding: 0 12px;
}
html body .input-group-btn > .btn {
  min-height: var(--m-ctl-h);
  padding-top: 8px;
  padding-bottom: 8px;
}
html body .input-group-btn > .btn.btn-default {
  color: var(--m-text-2);
  background-color: var(--m-surface);
  border-color: var(--m-outline);
}
html body .input-group-btn > .btn.btn-default:is(:hover, :focus) {
  color: var(--m-text);
  background-color: var(--m-hover);
  border-color: var(--m-outline-hover);
}
html body .input-group .form-control:focus { z-index: 3; }
/* daasform injects its helper message INTO the .input-group (joined mode),
   so the group grows to ~60px and the table-cell button centred on the
   message instead of the field (credentialVault/details.html Value "Show",
   merged from manage2 45.9). Keep buttons/addons on the field line. */
html body .input-group:has(> daasrequiredmessage, > daasvalidationmessage, > daasemailmessage, > daasphonemessage) > :is(.input-group-btn, .input-group-addon) { vertical-align: top; }

/* 2.9.2 Adornment mode (A): the group is the outlined field */
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) {
  background-color: var(--m-surface);
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)):hover {
  border-color: var(--m-outline-hover);
}
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)):has(> .form-control[readonly]) {
  background-color: var(--m-surface-2);
}
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)):has(> .form-control[disabled]) {
  border-color: var(--m-disabled);
}
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)):focus-within {
  border-color: var(--m-primary);
  box-shadow: inset 0 0 0 1px var(--m-primary);
}
html body .has-error .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) {
  border-color: var(--m-error);
}
html body .has-error .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)):focus-within {
  box-shadow: inset 0 0 0 1px var(--m-error);
}
/* input inside: borderless, transparent; the group draws the outline */
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .form-control {
  height: calc(var(--m-ctl-h) - 2px);
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}
/* addons: plain adornment text (documentstore/details.html file link) */
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .input-group-addon {
  background-color: transparent;
  border-color: transparent;
  color: var(--m-text-2);
}
/* .btn.input-group-addon ("Browse"/"Download" labels and links,
   branding/details.html) and buttons in .input-group-btn: text buttons */
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .btn.input-group-addon,
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .input-group-btn > .btn {
  min-height: 32px;
  margin: 0 3px;
  padding: 5px 10px;
  line-height: 20px;
  color: var(--m-primary);
  background-color: transparent;
  border-color: transparent;
  border-radius: var(--m-radius);
  box-shadow: none;
}
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .btn.input-group-addon:hover,
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .input-group-btn > .btn:hover {
  background-color: var(--m-primary-4);
}
/* icon-only adornments: glyph child or the .btn.glyphicon copy span */
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .input-group-btn > .btn:is(:has(> .glyphicon), .glyphicon) {
  width: 34px;
  min-height: 34px;
  height: 34px;
  padding: 0;
  margin: 0 2px;
  border-radius: 50%;
  color: var(--m-icon-muted);
}
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .input-group-btn > .btn:is(:has(> .glyphicon), .glyphicon):hover:not([disabled]) {
  background-color: var(--m-hover);
  color: var(--m-text);
}
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .input-group-btn > .btn[disabled] {
  color: var(--m-disabled);
  background-color: transparent;
}
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .input-group-btn > .btn:focus-visible,
html body .input-group:has(> .form-control):not(:has(> daasvalidationmessage, > daasrequiredmessage, > daascontrolfeedback, > daasemailmessage, > daasphonemessage, > .alert)) > .btn.input-group-addon:focus-visible {
  box-shadow: var(--m-focus-ring);
}

/* =====================================================================
   3. BUTTONS
   Targets: .btn + variants across partials/** (btn-default x124,
   btn-primary x73, btn-danger, btn-warning, btn-info, btn-success,
   btn-link, btn-sm, btn-lg, btn-xs, btn-block); .btn-group split
   "Create" button built in js/app.directive.js (~line 270);
   BS4-only classes used in markup: .btn-secondary
   (credentialVault/details.html), .btn-outline-secondary +
   .selected-icon-button (manage/notificationDetails.html);
   <daasbutton> -> include/button.html
   (<button class="btn btn-primary"> + spinning .glyphicon-refresh);
   .close (include/modal.dialog.html, confirm/notification dialogs,
   user.list.info.html, growl, uib-alert).
   Specificity notes: Bootstrap ships (0,3,0) state rules
   (.btn-primary.active:hover, .btn-primary.disabled:focus) and
   (0,4,0) for .open>.dropdown-toggle.btn-x:hover; the :is() blocks
   below are shaped to beat those without !important.
   ===================================================================== */
html body .btn {
  font-family: var(--m-font);
  font-size: var(--m-fs);
  font-weight: 500;
  line-height: 22px;
  letter-spacing: var(--m-btn-tracking);
  text-transform: var(--m-btn-transform);
  min-height: var(--m-btn-h);
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: var(--m-radius);
  box-shadow: none;
  text-shadow: none;
  background-image: none;
  transition: background-color 250ms ease, box-shadow 250ms ease, border-color 250ms ease, color 250ms ease;
}
html body .btn:hover,
html body .btn:focus { text-decoration: none; }
html body .btn:is(:active, .active) { box-shadow: none; background-image: none; }
html body .btn:is(:focus, :active:focus, .active:focus, .focus) { outline: 0; }
/* the clipboard span is both .btn and .glyphicon (branding/details.html) */
html body .btn.glyphicon { font-family: "Glyphicons Halflings"; letter-spacing: 0; text-transform: none; font-weight: 400; }

/* 3.1 Sizes */
html body .btn-sm,
html body .btn-group-sm > .btn {
  min-height: var(--m-btn-h-sm);
  padding: 4px 10px;
  font-size: var(--m-fs-sm);
  line-height: 20px;
  border-radius: var(--m-radius);
}
html body .btn-lg,
html body .btn-group-lg > .btn {
  min-height: var(--m-btn-h-lg);
  padding: 8px 22px;
  font-size: var(--m-fs-md);
  line-height: 24px;
  border-radius: var(--m-radius);
}
html body .btn-xs,
html body .btn-group-xs > .btn {
  min-height: 24px;
  padding: 1px 8px;
  font-size: var(--m-fs-xs);
  line-height: 20px;
  border-radius: var(--m-radius);
}

/* 3.2 Contained: primary (+ status colours) */
html body .btn-primary { color: var(--m-surface); background-color: var(--m-primary); border-color: var(--m-primary); }
html body .btn-primary:is(:hover, :focus, .focus) { color: var(--m-surface); background-color: var(--m-primary-dark); border-color: var(--m-primary-dark); box-shadow: var(--m-shadow-2); }
html body .btn-primary:is(:active, .active):is(*, :hover, :focus, .focus),
html body .open > .dropdown-toggle.btn-primary:is(*, :hover, :focus, .focus) { color: var(--m-surface); background-color: var(--m-primary-dark); border-color: var(--m-primary-dark); }

html body .btn-success { color: var(--m-surface); background-color: var(--m-success); border-color: var(--m-success); }
html body .btn-success:is(:hover, :focus, .focus) { color: var(--m-surface); background-color: var(--m-success-dark); border-color: var(--m-success-dark); box-shadow: var(--m-shadow-2); }
html body .btn-success:is(:active, .active):is(*, :hover, :focus, .focus),
html body .open > .dropdown-toggle.btn-success:is(*, :hover, :focus, .focus) { color: var(--m-surface); background-color: var(--m-success-dark); border-color: var(--m-success-dark); }

html body .btn-info { color: var(--m-surface); background-color: var(--m-info); border-color: var(--m-info); }
html body .btn-info:is(:hover, :focus, .focus) { color: var(--m-surface); background-color: var(--m-info-dark); border-color: var(--m-info-dark); box-shadow: var(--m-shadow-2); }
html body .btn-info:is(:active, .active):is(*, :hover, :focus, .focus),
html body .open > .dropdown-toggle.btn-info:is(*, :hover, :focus, .focus) { color: var(--m-surface); background-color: var(--m-info-dark); border-color: var(--m-info-dark); }

html body .btn-warning { color: var(--m-surface); background-color: var(--m-warning); border-color: var(--m-warning); }
html body .btn-warning:is(:hover, :focus, .focus) { color: var(--m-surface); background-color: var(--m-warning-dark); border-color: var(--m-warning-dark); box-shadow: var(--m-shadow-2); }
html body .btn-warning:is(:active, .active):is(*, :hover, :focus, .focus),
html body .open > .dropdown-toggle.btn-warning:is(*, :hover, :focus, .focus) { color: var(--m-surface); background-color: var(--m-warning-dark); border-color: var(--m-warning-dark); }

html body .btn-danger { color: var(--m-surface); background-color: var(--m-error); border-color: var(--m-error); }
html body .btn-danger:is(:hover, :focus, .focus) { color: var(--m-surface); background-color: var(--m-error-dark); border-color: var(--m-error-dark); box-shadow: var(--m-shadow-2); }
html body .btn-danger:is(:active, .active):is(*, :hover, :focus, .focus),
html body .open > .dropdown-toggle.btn-danger:is(*, :hover, :focus, .focus) { color: var(--m-surface); background-color: var(--m-error-dark); border-color: var(--m-error-dark); }

/* 3.3 Outlined: .btn-default (+ BS4 .btn-secondary which BS3 leaves bare) */
html body :is(.btn-default, .btn-secondary) { color: var(--m-primary); background-color: var(--m-surface); border-color: var(--m-primary-50); }
html body :is(.btn-default, .btn-secondary):is(:hover, :focus, .focus) { color: var(--m-primary); background-color: var(--m-primary-4); border-color: var(--m-primary); }
html body :is(.btn-default, .btn-secondary):is(:active, .active):is(*, :hover, :focus, .focus),
html body .open > .dropdown-toggle:is(.btn-default, .btn-secondary):is(*, :hover, :focus, .focus) { color: var(--m-primary); background-color: var(--m-primary-8); border-color: var(--m-primary); }

/* Neutral outlined: .btn-outline-secondary icon pickers
   (manage/notificationDetails.html). Keep app.css .selected-icon-button
   (2px border) as the selected indicator, recoloured to primary. */
html body .btn-outline-secondary { color: var(--m-text); background-color: var(--m-surface); border-color: var(--m-outline); }
html body .btn-outline-secondary:is(:hover, :focus, .focus) { background-color: var(--m-hover); border-color: var(--m-outline-hover); }
html body .btn.selected-icon-button,
html body .btn.selected-icon-button:is(:hover, :focus) { border: 2px solid var(--m-primary); background-color: var(--m-primary-4); }

/* 3.4 Text: .btn-link (gateway-transaction/details.html refresh) */
html body .btn-link { color: var(--m-primary); background-color: transparent; border-color: transparent; padding-left: 8px; padding-right: 8px; }
html body .btn-link:is(:hover, :focus, .focus) { color: var(--m-primary); background-color: var(--m-primary-4); border-color: transparent; text-decoration: none; }
html body .btn-link:is(:active, .active):is(*, :hover, :focus) { background-color: var(--m-primary-8); }
/* btn-link holding only a glyph -> round IconButton */
html body .btn-link:has(> .glyphicon:only-child):not(:has(> :not(.glyphicon))) { border-radius: 50%; min-width: var(--m-btn-h); padding-left: 0; padding-right: 0; color: var(--m-icon-muted); }
html body .btn-link:has(> .glyphicon:only-child):is(:hover, :focus) { background-color: var(--m-hover); color: var(--m-text); }

/* 3.5 Disabled (beats Bootstrap's (0,3,0) .btn-x.disabled:hover) */
html body .btn:is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):is([disabled], .disabled, fieldset[disabled] *):is(*, :hover, :focus, :active, .active, .focus) {
  color: var(--m-disabled);
  background-color: var(--m-disabled-bg);
  border-color: var(--m-disabled-bg);
  box-shadow: none;
  opacity: 1;
}
html body .btn:is(.btn-default, .btn-secondary, .btn-outline-secondary):is([disabled], .disabled, fieldset[disabled] *):is(*, :hover, :focus, :active, .active, .focus) {
  color: var(--m-disabled);
  background-color: transparent;
  border-color: var(--m-disabled-bg);
  box-shadow: none;
  opacity: 1;
}
html body .btn.btn-link:is([disabled], .disabled, fieldset[disabled] *):is(*, :hover, :focus, :active, .active, .focus) {
  color: var(--m-disabled);
  background-color: transparent;
  opacity: 1;
}

/* 3.6 Groups + split button (js/app.directive.js create button) */
html body .btn-group > .btn + .btn,
html body .btn-group > .btn + .dropdown-toggle { margin-left: -1px; }
html body .btn-group > .btn-primary + .dropdown-toggle.btn-primary { border-left-color: var(--m-primary-dark); padding-left: 8px; padding-right: 8px; }
html body .btn-group > .btn:is(:hover, :focus, :active, .active) { z-index: 2; }
html body .btn .caret { margin-left: 4px; }
html body .btn-group > .dropdown-toggle .caret { margin-left: 0; }

/* 3.7 Focus-visible ring (after all variant states so it wins ties) */
html body .btn:focus-visible { box-shadow: var(--m-focus-ring); }

/* 3.8 <daasbutton> (include/button.html): loading glyph spins */
@keyframes m-spin { to { transform: rotate(360deg); } }
html body daasbutton > .btn > .glyphicon-refresh { animation: m-spin 1s linear infinite; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) {
  html body daasbutton > .btn > .glyphicon-refresh { animation: none; }
}

/* 3.9 .close (x) -> round IconButton */
html body .close {
  width: 32px;
  height: 32px;
  padding: 0;
  font-family: var(--m-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  color: var(--m-icon-muted);
  text-shadow: none;
  opacity: 1;
  border-radius: 50%;
  transition: background-color 150ms ease;
}
html body .close:is(:hover, :focus) { color: var(--m-text); background-color: var(--m-hover); opacity: 1; }
html body .close:focus:not(:focus-visible) { outline: 0; }
html body .close:focus-visible { outline: 0; box-shadow: var(--m-focus-ring); }

/* =====================================================================
   4. CHECKBOXES AND RADIOS
   Targets: <div class="checkbox"><label><input type="checkbox">
   (manage/client.html, partner.html, user.details.html,
   webhook-config.html, gateway-template + file-process details),
   bare label>input (include/partner.select.tree.html #partner-active,
   template views), DataTables row/select-all checkboxes rendered by
   js/modules/authenticated/app.user.js, radios in
   manage/partner.html + manage/user.html (.radio > label > input).
   Technique: appearance:none on the real <input>. The element keeps
   its click target, ng-model binding, keyboard focus and :checked /
   :indeterminate / :disabled state, so no behaviour changes;
   accent-color cannot draw MUI's 2px/radius-2 box or focus halo.
   jsoneditor's own inputs are excluded.
   No switch/toggle controls exist in partials (grep: "switch",
   "toggle" only hit data-toggle attributes).
   ===================================================================== */
html body input[type="checkbox"]:not(.jsoneditor *),
html body input[type="radio"]:not(.jsoneditor *) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  background-color: var(--m-surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 2px solid var(--m-text-2);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
html body input[type="radio"]:not(.jsoneditor *) { width: 20px; height: 20px; border-radius: 50%; vertical-align: -5px; }

html body input[type="checkbox"]:not(.jsoneditor *):checked {
  background-color: var(--m-primary);
  border-color: var(--m-primary);
  background-image: var(--m-ico-check);
}
html body input[type="checkbox"]:not(.jsoneditor *):indeterminate {
  background-color: var(--m-primary);
  border-color: var(--m-primary);
  background-image: var(--m-ico-indeterminate);
}
html body input[type="radio"]:not(.jsoneditor *):checked {
  border-color: var(--m-primary);
  background-image: radial-gradient(circle, var(--m-primary) 0 4px, transparent 4.5px);
}
/* hover / focus halo (MUI ripple ring). 6px: 20px control + 2x6 = 32px, which
   fits inside a 32px stacked row (4.1) instead of bleeding into the next
   option (reported on cert: manage/user.html External API Security radios). */
html body input:is([type="checkbox"], [type="radio"]):not(.jsoneditor *):hover:not(:disabled) { box-shadow: 0 0 0 6px var(--m-hover); }
html body input:is([type="checkbox"], [type="radio"]):not(.jsoneditor *):checked:hover:not(:disabled) { box-shadow: 0 0 0 6px var(--m-primary-4); }
html body input:is([type="checkbox"], [type="radio"]):not(.jsoneditor *):focus { outline: 0; }
html body input:is([type="checkbox"], [type="radio"]):not(.jsoneditor *):focus-visible { box-shadow: 0 0 0 6px var(--m-primary-12); }
/* disabled */
html body input:is([type="checkbox"], [type="radio"]):not(.jsoneditor *):disabled,
html body fieldset[disabled] input:is([type="checkbox"], [type="radio"]):not(.jsoneditor *) { border-color: var(--m-disabled); cursor: not-allowed; }
html body input[type="checkbox"]:not(.jsoneditor *):is(:checked, :indeterminate):disabled { background-color: var(--m-disabled); }
html body input[type="radio"]:not(.jsoneditor *):checked:disabled { background-image: radial-gradient(circle, var(--m-disabled) 0 4px, transparent 4.5px); }
html body :is(.checkbox, .radio).disabled label,
html body fieldset[disabled] :is(.checkbox, .radio) label { color: var(--m-text-disabled); }
/* error state box colour (daasform .has-error) */
html body .has-error input:is([type="checkbox"], [type="radio"]):not(:checked):not(.jsoneditor *) { border-color: var(--m-error); }

/* 4.1 Wrappers: .checkbox / .radio / *-inline.
       The bare <label><input> Text</label> rule comes first; wrapper
       rules match its specificity (0,3,4) and win by order. */
html body label > input:is([type="checkbox"], [type="radio"]):not(.jsoneditor *):first-child { margin: 0 8px 0 0; }
html body :is(.checkbox, .radio) { margin-top: 8px; margin-bottom: 8px; }
html body :is(.checkbox, .radio) label { padding-left: 30px; min-height: 20px; }
/* Stacked options: each row 32px with the control centred, so the 32px halo
   stays inside its own row. Bootstrap's .radio+.radio / .checkbox+.checkbox
   {margin-top:-5px} (0,2,0) squeezed rows to ~23px; beaten here. */
html body :is(.checkbox, .radio) > label { display: inline-flex; align-items: center; min-height: 32px; }
html body :is(.checkbox, .radio) > label > input:is([type="checkbox"], [type="radio"]):first-child { margin-top: 0; margin-bottom: 0; }
/* Labels with inline phrasing markup in the text (systemConfig/
   systemConfig.html "Force <strong>System Admins</strong> to use..."):
   in a flex box every text run becomes its own item and the spaces around
   <strong> collapsed ("ForceSystem Adminsto"). Those labels stay in normal
   inline flow: 6px + 20px line + 6px = the same 32px row, and the control
   (already position:absolute from Bootstrap) is centred in the first line,
   so the 32px halo stays inside the row. Labels holding only the input,
   a text-wrapping <span> or daasform's injected elements keep the flex
   row above. (Replaces the manage2 45.3 page workaround.) */
html body :is(.checkbox, .radio) > label:has(> :not(input, span, br, daascontrolfeedback, daasvalidationmessage, daasrequiredmessage, daasemailmessage, daasphonemessage)) {
  display: inline-block;
  position: relative;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 20px;
}
html body :is(.checkbox, .radio) > label:has(> :not(input, span, br, daascontrolfeedback, daasvalidationmessage, daasrequiredmessage, daasemailmessage, daasphonemessage)) > input[type="checkbox"]:first-child { position: absolute; top: 7px; margin: 0 0 0 -30px; }
html body :is(.checkbox, .radio) > label:has(> :not(input, span, br, daascontrolfeedback, daasvalidationmessage, daasrequiredmessage, daasemailmessage, daasphonemessage)) > input[type="radio"]:first-child { position: absolute; top: 6px; margin: 0 0 0 -30px; }
html body .radio + .radio,
html body .checkbox + .checkbox { margin-top: 0; }
html body :is(.checkbox, .radio):has(+ :is(.checkbox, .radio)) { margin-bottom: 0; }
html body .checkbox label > input[type="checkbox"]:first-child,
html body label.checkbox-inline > input[type="checkbox"]:first-child { margin: 1px 0 0 -30px; }
html body .radio label > input[type="radio"]:first-child,
html body label.radio-inline > input[type="radio"]:first-child { margin: 0 0 0 -30px; }
html body :is(.checkbox-inline, .radio-inline) { padding-left: 30px; font-size: var(--m-fs); color: var(--m-text); }

/* =====================================================================
   5. UI-SELECT 0.19.7 (theme "bootstrap", built-in templates in
   js/vendors/select.min.js; css/select.min.css)
   Targets: include/filter.html (client select), include/user.select.html,
   reports/proxyRequestSummary.html.
   Markup: .ui-select-container.ui-select-bootstrap.dropdown
     > .ui-select-match[.btn-default-focus]
         > span.btn.btn-default.form-control.ui-select-toggle
             > .ui-select-placeholder.text-muted | .ui-select-match-text
             > i.caret.pull-right   > a.btn.btn-xs.btn-link (clear)
     > input.form-control.ui-select-search (when open)
     > ul.ui-select-choices.dropdown-menu > li > .ui-select-choices-row
         > .ui-select-choices-row-inner
   The toggle is a .btn, so it is pulled OUT of the button system here
   with higher specificity (field look, no caps). app.css keeps
   .client-select .form-control {height:32px} for filter bars.
   ===================================================================== */
html body .ui-select-bootstrap > .ui-select-match > .btn.ui-select-toggle {
  min-height: 0;
  height: var(--m-ctl-h);
  /* !important: app.css has `.form-control.ui-select-toggle{padding:6px 12px !important}` */
  padding: 0 36px 0 14px !important;
  font-size: var(--m-fs);
  font-weight: 400;
  line-height: calc(var(--m-ctl-h) - 2px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--m-text);
  background-color: var(--m-surface);
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius);
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* filter-bar client select keeps app.css's 32px intent (include/filter.html) */
html body .client-select .ui-select-bootstrap > .ui-select-match > .btn.ui-select-toggle {
  height: var(--m-ctl-h-sm);
  line-height: calc(var(--m-ctl-h-sm) - 2px);
  font-size: var(--m-fs-sm);
  padding: 0 32px 0 10px !important;   /* beats app.css !important (see above) */
}
html body .ui-select-bootstrap > .ui-select-match > .btn.ui-select-toggle:is(:hover, :active, .active) {
  color: var(--m-text);
  background-color: var(--m-surface);
  border-color: var(--m-outline-hover);
  box-shadow: none;
}
html body .ui-select-bootstrap > .ui-select-match.btn-default-focus { outline: 0; box-shadow: none; }
html body .ui-select-bootstrap > .ui-select-match.btn-default-focus > .btn.ui-select-toggle,
html body .ui-select-bootstrap > .ui-select-match > .btn.ui-select-toggle:focus {
  border-color: var(--m-primary);
  box-shadow: inset 0 0 0 1px var(--m-primary);
}
html body .ui-select-bootstrap > .ui-select-match > .btn.ui-select-toggle:is([disabled], .disabled) {
  color: var(--m-text-disabled);
  background-color: var(--m-surface);
  border-color: var(--m-disabled);
  cursor: not-allowed;
}
html body .has-error .ui-select-bootstrap > .ui-select-match > .btn.ui-select-toggle { border-color: var(--m-error); }
html body .ui-select-bootstrap .ui-select-placeholder { color: var(--m-text-disabled); font-size: var(--m-fs); }
html body .ui-select-bootstrap .ui-select-match-text { font-size: var(--m-fs); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* caret -> ArrowDropDown (keeps its ng-click; only paint changes) */
html body .ui-select-bootstrap .ui-select-toggle > .caret {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  right: 8px;
  border: 0;
  background: var(--m-ico-arrow-drop) center / 24px 24px no-repeat;
}
/* clear (x) inside the toggle */
html body .ui-select-bootstrap .ui-select-toggle > a.btn {
  min-height: 0;
  height: 24px;
  width: 24px;
  min-width: 0;
  padding: 0;
  margin-top: -12px;
  top: 50%;
  right: 30px;
  line-height: 24px;
  color: var(--m-icon-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
}
html body .ui-select-bootstrap .ui-select-toggle > a.btn:hover { color: var(--m-text); background: var(--m-hover); }
html body .ui-select-bootstrap .ui-select-toggle > a.btn .glyphicon { font-size: 12px; top: 0; }
/* custom-template clear button (js/vendors/bootstrap/match.tpl.html) */
html body .ui-select-bootstrap .ui-select-clear { color: var(--m-icon-muted); background: transparent; border: 0; }
/* search box when open: already a .form-control (section 2) */
html body .ui-select-bootstrap > input.ui-select-search.form-control { border-color: var(--m-primary); box-shadow: inset 0 0 0 1px var(--m-primary); }
/* options (menu look from section 8 applies to the .dropdown-menu) */
html body .ui-select-bootstrap .ui-select-choices-row > .ui-select-choices-row-inner {
  padding: 8px 16px;
  font-size: var(--m-fs);
  line-height: 20px;
  color: var(--m-text);
  white-space: normal;
}
html body .ui-select-bootstrap .ui-select-choices-row:hover > .ui-select-choices-row-inner { background-color: var(--m-hover); color: var(--m-text); }
html body .ui-select-bootstrap .ui-select-choices-row.active > .ui-select-choices-row-inner { background-color: var(--m-primary-8); color: var(--m-text); }
html body .ui-select-bootstrap .ui-select-choices-row.disabled > .ui-select-choices-row-inner { color: var(--m-text-disabled); background: transparent; }
html body .ui-select-bootstrap .ui-select-highlight { font-weight: 500; color: var(--m-primary); }
/* multiple: field + tags as chips (no current usage; kept for parity) */
html body .ui-select-multiple.ui-select-bootstrap {
  min-height: var(--m-ctl-h);
  padding: 4px 8px;
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius);
  background: var(--m-surface);
}
html body .ui-select-multiple.ui-select-bootstrap .ui-select-match-item.btn {
  min-height: 0;
  height: 24px;
  margin: 2px 4px 2px 0;
  padding: 0 4px 0 10px;
  font-size: var(--m-fs-sm);
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--m-text);
  background: var(--m-chip);
  border: 0;
  border-radius: var(--m-radius-pill);
}
html body .ui-select-multiple.ui-select-bootstrap .ui-select-match-close {
  width: 18px; height: 18px; margin-left: 4px; font-size: 16px; line-height: 18px; float: none;
}

/* 5.1 Partner tree dropdown toggle (include/partner.select.tree.html):
       .btn.btn-default.dropdown-toggle.btn-sm showing the partner name;
       field look like a select, no caps */
html body .tree-dropdown > .btn.btn-default.dropdown-toggle {
  width: 100%;
  min-height: 0;
  height: var(--m-ctl-h-sm);
  padding: 0 10px;
  font-size: var(--m-fs-sm);
  font-weight: 400;
  line-height: calc(var(--m-ctl-h-sm) - 2px);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--m-text);
  background-color: var(--m-surface);
  border-color: var(--m-outline);
  box-shadow: none;
}
/* In a stacked form (.form-group, e.g. manage/user.html Partner) match the
   40px field height. Filter bars (.well > form.form-inline, e.g. gateway-
   template/list.html) keep the 32px dense size of their sibling selects
   (reported on cert: Orchestrations partner picker taller than Client). */
html body form:not(.form-inline) .form-group .tree-dropdown > .btn.btn-default.dropdown-toggle {
  height: var(--m-ctl-h);
  padding: 0 14px;
  font-size: var(--m-fs);
  line-height: calc(var(--m-ctl-h) - 2px);
}
html body .tree-dropdown > .btn.btn-default.dropdown-toggle:is(:hover, :active, .active) { color: var(--m-text); background-color: var(--m-surface); border-color: var(--m-outline-hover); }
html body .tree-dropdown > .btn.btn-default.dropdown-toggle:focus-visible { border-color: var(--m-primary); box-shadow: inset 0 0 0 1px var(--m-primary); }
html body .tree-dropdown > .btn.btn-default.dropdown-toggle:is([disabled], .disabled) { color: var(--m-text-disabled); background-color: var(--m-surface); border-color: var(--m-disabled); }

/* =====================================================================
   6. INTL-TEL-INPUT (css/intlTelInput.css; js/app.config.js sets
   separateDialCode:true). Targets: manage/user.html,
   include/user.details.html, dashboard/contact.html
   (<input class="form-control" ng-intl-tel-input>).
   Only fits the outlined field: input padding-left is set inline by
   the plugin and is left alone.
   ===================================================================== */
html body .intl-tel-input .flag-container { padding: 1px; }
/* daasform puts its helper messages INSIDE div.intl-tel-input; the
   absolutely placed .flag-container (top:0; bottom:0) stretched over them
   and the flag / dial code dropped below the text in the error state.
   Pin it to the 40px field (merged from manage 41.5). */
html body .intl-tel-input > .flag-container { bottom: auto; height: var(--m-ctl-h); }
html body .intl-tel-input .selected-flag { height: 100%; }
html body .intl-tel-input.separate-dial-code .selected-flag,
html body .intl-tel-input.allow-dropdown .selected-flag {
  background-color: transparent;
  border-radius: var(--m-radius) 0 0 var(--m-radius);
}
html body .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag { background-color: var(--m-hover); }
html body .intl-tel-input.separate-dial-code .selected-dial-code { font-size: var(--m-fs); color: var(--m-text); }
html body .intl-tel-input .country-list {
  padding: 8px 0;
  margin-top: 2px;
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-8);
  background: var(--m-surface);
  font-size: var(--m-fs);
}
html body .intl-tel-input .country-list .country { padding: 6px 16px; color: var(--m-text); }
html body .intl-tel-input .country-list .country .dial-code { color: var(--m-text-2); }
html body .intl-tel-input .country-list .country.highlight { background-color: var(--m-hover); }
html body .intl-tel-input .country-list .divider { border-bottom-color: var(--m-divider); margin-bottom: 8px; padding-bottom: 8px; }

/* =====================================================================
   7. UIB-DATEPICKER POPUP (ui-bootstrap 2.5 templates in
   js/vendors/ui-bootstrap-tpls-2.5.0.min.js:
   uib/template/datepickerPopup/popup.html, datepicker/day|month|year)
   Used by include/date.html (<daasdate>) and
   manage/notificationDetails.html.
   Markup: ul.uib-datepicker-popup.dropdown-menu > li > .uib-datepicker
     thead: button.uib-left / .uib-title / .uib-right (.btn.btn-default.btn-sm)
            th > small (weekday)
     tbody: td.uib-day > button.btn.btn-default.btn-sm[.btn-info selected]
            [.active keyboard-active] > span[.text-muted other month]
            [.text-info today]
     li.uib-button-bar: .uib-datepicker-current (.btn-info), .uib-clear
            (.btn-danger), .uib-close (.btn-success)
   -> MUI DateCalendar: 36px circular days, primary selected, outlined
      today, text-button action bar. Selectors are deliberately more
      specific than section 3 so the .btn variants don't leak in.
   ===================================================================== */
html body .uib-datepicker-popup.dropdown-menu {
  padding: 12px 12px 8px;
  min-width: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-8);
}
html body .uib-datepicker table { border-collapse: separate; border-spacing: 0 2px; outline: 0; }
html body .uib-datepicker :is(th, td) { padding: 0 2px; text-align: center; }
/* weekday labels and week numbers */
html body .uib-datepicker thead th > small { display: inline-block; width: 36px; font-size: var(--m-fs-xs); font-weight: 400; line-height: 32px; color: var(--m-text-2); }
html body .uib-datepicker td.h6 em { font-size: var(--m-fs-xs); font-style: normal; color: var(--m-text-disabled); }

/* header: title + prev/next */
html body .uib-datepicker th > .btn.btn-sm {
  min-height: 0;
  height: 36px;
  padding: 0 8px;
  font-size: var(--m-fs);
  font-weight: 500;
  line-height: 36px;
  letter-spacing: var(--m-btn-tracking);
  color: var(--m-text);
  background: transparent;
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: none;
}
html body .uib-datepicker th > .btn.btn-sm:is(:hover, :focus) { background: var(--m-hover); }
html body .uib-datepicker th > .btn.btn-sm[disabled] { color: var(--m-text); background: transparent; opacity: 1; }
html body .uib-datepicker th > .btn.btn-sm strong { font-weight: 500; }
html body .uib-datepicker th > .btn.btn-sm:is(.uib-left, .uib-right) { width: 36px; padding: 0; border-radius: 50%; color: var(--m-icon-muted); }
html body .uib-datepicker th > .btn.btn-sm:is(.uib-left, .uib-right) .glyphicon { font-size: 12px; top: 1px; }

/* day cells */
html body .uib-datepicker td.uib-day > .btn.btn-sm {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  font-size: var(--m-fs-xs);
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--m-text);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  box-shadow: none;
}
html body .uib-datepicker td.uib-day > .btn.btn-sm:hover { background-color: var(--m-hover); }
html body .uib-datepicker td.uib-day > .btn.btn-sm.active { background-color: var(--m-primary-12); }
html body .uib-datepicker td.uib-day > .btn.btn-sm .text-muted { color: var(--m-text-disabled); }
html body .uib-datepicker td.uib-day > .btn.btn-sm .text-info { color: inherit; }
html body .uib-datepicker td.uib-day > .btn.btn-sm:has(> .text-info) { border-color: var(--m-text-2); }
html body .uib-datepicker td.uib-day > .btn.btn-sm.btn-info,
html body .uib-datepicker td.uib-day > .btn.btn-sm.btn-info:is(:hover, :focus, .active) {
  color: var(--m-surface);
  background-color: var(--m-primary);
  border-color: var(--m-primary);
  font-weight: 500;
}
html body .uib-datepicker td.uib-day > .btn.btn-sm.btn-info .text-muted { color: inherit; }
html body .uib-datepicker td.uib-day > .btn.btn-sm[disabled] { color: var(--m-text-disabled); background-color: transparent; border-color: transparent; opacity: 1; }
html body .uib-datepicker td.uib-day > .btn.btn-sm:focus-visible { box-shadow: var(--m-focus-ring); }

/* month / year views: pills */
html body .uib-datepicker :is(td.uib-month, td.uib-year) > .btn {
  min-height: 0;
  height: 36px;
  padding: 0 12px;
  margin: 4px 0;
  font-size: var(--m-fs);
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--m-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 18px;
  box-shadow: none;
}
html body .uib-datepicker :is(td.uib-month, td.uib-year) > .btn:hover { background: var(--m-hover); }
html body .uib-datepicker :is(td.uib-month, td.uib-year) > .btn.active { background: var(--m-primary-12); }
html body .uib-datepicker :is(td.uib-month, td.uib-year) > .btn .text-info { color: inherit; }
html body .uib-datepicker :is(td.uib-month, td.uib-year) > .btn:has(> .text-info) { border-color: var(--m-text-2); }
html body .uib-datepicker :is(td.uib-month, td.uib-year) > .btn.btn-info,
html body .uib-datepicker :is(td.uib-month, td.uib-year) > .btn.btn-info:is(:hover, :focus, .active) { color: var(--m-surface); background: var(--m-primary); border-color: var(--m-primary); }

/* action bar: Today / Clear / Close as text buttons */
html body ul.uib-datepicker-popup li.uib-button-bar {
  padding: 8px 0 0;
  margin-top: 4px;
  border-top: 1px solid var(--m-divider);
}
html body ul.uib-datepicker-popup li.uib-button-bar .btn:is(*, :hover, :focus, :active, .active) {
  min-height: 0;
  height: var(--m-btn-h-sm);
  padding: 0 8px;
  line-height: calc(var(--m-btn-h-sm) - 2px);
  color: var(--m-primary);
  background-color: transparent;
  border-color: transparent;
  border-radius: var(--m-radius);
  box-shadow: none;
}
html body ul.uib-datepicker-popup li.uib-button-bar .btn:hover:not([disabled]) { background-color: var(--m-primary-4); }
html body ul.uib-datepicker-popup li.uib-button-bar .btn.uib-clear:is(*, :hover, :focus) { color: var(--m-error); }
html body ul.uib-datepicker-popup li.uib-button-bar .btn.uib-clear:hover { background-color: var(--m-error-12); }
html body ul.uib-datepicker-popup li.uib-button-bar .btn[disabled] { color: var(--m-disabled); background-color: transparent; }
html body ul.uib-datepicker-popup li.uib-button-bar .btn:focus-visible { box-shadow: var(--m-focus-ring); }
html body ul.uib-datepicker-popup li.uib-button-bar .btn-group > .btn + .btn { margin-left: 4px; }

/* =====================================================================
   8. DROPDOWN MENUS -> MUI Menu
   Targets: index.ejs account menu (li.btn-group > ul.dropdown-menu,
   li.divider), split "Create" menu (js/app.directive.js),
   include/partner.select.tree.html (div.dropdown-menu with label +
   jqTree), ui-select choices, uib-datepicker popup (overridden in 7).
   Mobile navbar collapse rules (Bootstrap (0,3,0) under 767px) still win.
   ===================================================================== */
html body .dropdown-menu {
  padding: 8px 0;
  margin-top: 2px;
  min-width: 180px;
  font-size: var(--m-fs);
  color: var(--m-text);
  background-color: var(--m-surface);
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-8);
}
html body .dropdown-menu > li > a {
  padding: 8px 16px;
  min-height: 36px;
  line-height: 20px;
  font-weight: 400;
  color: var(--m-text);
}
html body .dropdown-menu > li > a:is(:hover, :focus) { color: var(--m-text); background-color: var(--m-hover); }
html body .dropdown-menu > li > a:focus-visible { outline: 0; background-color: var(--m-primary-12); }
html body .dropdown-menu > .active > a:is(*, :hover, :focus) { color: var(--m-text); background-color: var(--m-primary-8); }
html body .dropdown-menu > .disabled > a:is(*, :hover, :focus) { color: var(--m-text-disabled); background-color: transparent; }
html body .dropdown-menu > li > a > .glyphicon { width: 20px; margin-right: 12px; color: var(--m-icon-muted); top: 2px; }
html body .dropdown-menu .divider { height: 1px; margin: 8px 0; background-color: var(--m-divider); }
html body .dropdown-header {
  padding: 8px 16px 4px;
  font-size: var(--m-fs-xs);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .4px;
  color: var(--m-text-2);
}
html body .tree-dropdown .dropdown-menu { padding: 8px 12px; }

/* =====================================================================
   9. TOOLTIPS AND POPOVERS
   Targets: Bootstrap jQuery tooltips via the `tooltip` attribute
   directive (js/app.directive.js) on [data-toggle="tooltip"] / [title]
   (file-process/details.html, gateway-template/details.html, index.ejs
   menu glyphs), ui-bootstrap tooltip/popover templates.
   ===================================================================== */
html body .tooltip { font-family: var(--m-font); font-size: var(--m-fs-xs); font-weight: 500; }
html body .tooltip.in { opacity: 1; }
html body .tooltip-inner {
  padding: 4px 8px;
  max-width: 300px;
  line-height: 1.4;
  color: var(--m-surface);
  background-color: var(--m-tooltip);
  border-radius: var(--m-radius);
}
html body .tooltip.top .tooltip-arrow,
html body .tooltip.top-left .tooltip-arrow,
html body .tooltip.top-right .tooltip-arrow { border-top-color: var(--m-tooltip); }
html body .tooltip.bottom .tooltip-arrow,
html body .tooltip.bottom-left .tooltip-arrow,
html body .tooltip.bottom-right .tooltip-arrow { border-bottom-color: var(--m-tooltip); }
html body .tooltip.left .tooltip-arrow { border-left-color: var(--m-tooltip); }
html body .tooltip.right .tooltip-arrow { border-right-color: var(--m-tooltip); }

html body .popover {
  font-family: var(--m-font);
  font-size: var(--m-fs);
  color: var(--m-text);
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-8);
}
html body .popover-title {
  padding: 12px 16px 8px;
  font-size: var(--m-fs);
  font-weight: 500;
  background-color: var(--m-surface);
  border-bottom: 1px solid var(--m-divider);
  border-radius: var(--m-radius) var(--m-radius) 0 0;
}
html body .popover-content { padding: 8px 16px 12px; }
html body .popover.top > .arrow { border-top-color: var(--m-divider); }
html body .popover.bottom > .arrow { border-bottom-color: var(--m-divider); }
html body .popover.left > .arrow { border-left-color: var(--m-divider); }
html body .popover.right > .arrow { border-right-color: var(--m-divider); }

/* =====================================================================
   10. BADGES AND LABELS
   Targets: index.ejs notification count
   (<span class="badge badge-danger"><a>N</a></span>, positioned by
   app.css: position/margins are left untouched), .label-* (none in
   partials today; kept as chip styles for completeness).
   ===================================================================== */
html body .badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-family: var(--m-font);
  font-size: var(--m-fs-xs);
  font-weight: 500;
  line-height: 20px;
  color: var(--m-surface);
  background-color: var(--m-primary);
  border-radius: 10px;
}
html body .badge.badge-danger { background-color: var(--m-error); }
html body .badge a { color: var(--m-surface); text-decoration: none; }
html body .btn .badge { color: var(--m-primary); background-color: var(--m-surface); }

html body .label {
  display: inline-block;
  height: 24px;
  padding: 0 10px;
  font-family: var(--m-font);
  font-size: var(--m-fs-sm);
  font-weight: 400;
  line-height: 24px;
  vertical-align: middle;
  border-radius: var(--m-radius-pill);
}
html body .label:empty { display: none; }   /* Bootstrap parity */
html body .label-default { color: var(--m-text); background-color: var(--m-chip); }
html body .label-primary { color: var(--m-primary); background-color: var(--m-primary-12); }
html body .label-success { color: var(--m-success); background-color: var(--m-success-12); }
html body .label-info { color: var(--m-info); background-color: var(--m-info-12); }
html body .label-warning { color: var(--m-warning); background-color: var(--m-warning-12); }
html body .label-danger { color: var(--m-error); background-color: var(--m-error-12); }

/* =====================================================================
   11. ALERTS -> soft MUI Alert with outlined status icon
   Targets: .alert.alert-* in partials (branding/details.html legacy
   notice, client.contact.html, file-process + gateway-template clone
   dialogs, gateway-transaction/details.html, maintenance/client.import),
   index.ejs header banners:
     <div uib-alert class="alert alert-header-bar fade in"
          ng-class="'alert-'+type" ng-bind-html="alert.msg">
   and index.ejs server message (.alert.alert-danger).
   The icon is a ::before on the alert box itself (absolutely placed in
   the left padding), so ng-bind-html / transcluded content is never
   touched. .alert-invalid helper text is excluded (section 2.6).
   ===================================================================== */
html body .alert:not(.alert-invalid) {
  position: relative;
  padding: 14px 16px 14px 50px;
  margin-bottom: 16px;
  font-size: var(--m-fs);
  line-height: 20px;
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: none;
}
html body .alert:not(.alert-invalid)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 13px;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--m-ico-info) center / contain no-repeat;
  mask: var(--m-ico-info) center / contain no-repeat;
}
html body .alert-info { color: var(--m-info-text); background-color: var(--m-info-bg); border-color: var(--m-info-bg); }
html body .alert-success { color: var(--m-success-text); background-color: var(--m-success-bg); border-color: var(--m-success-bg); }
html body .alert-warning { color: var(--m-warning-text); background-color: var(--m-warning-bg); border-color: var(--m-warning-bg); }
html body :is(.alert-danger, .alert-error) { color: var(--m-error-text); background-color: var(--m-error-bg); border-color: var(--m-error-bg); }
html body .alert.alert-info:not(.alert-invalid)::before { background-color: var(--m-info); }
html body .alert.alert-success:not(.alert-invalid)::before { background-color: var(--m-success); -webkit-mask-image: var(--m-ico-success); mask-image: var(--m-ico-success); }
html body .alert.alert-warning:not(.alert-invalid)::before { background-color: var(--m-warning); -webkit-mask-image: var(--m-ico-warning); mask-image: var(--m-ico-warning); }
html body .alert:is(.alert-danger, .alert-error):not(.alert-invalid)::before { background-color: var(--m-error); -webkit-mask-image: var(--m-ico-error); mask-image: var(--m-ico-error); }
/* app.css zeroes padding for any .alert in a .form-group; keep ours */
html body .form-group .alert:not(.alert-invalid) { padding: 14px 16px 14px 50px; margin-bottom: 8px; }
html body .alert h4 { margin: 0 0 4px; font-family: var(--m-font); font-size: var(--m-fs-md); font-weight: 500; color: inherit; }
html body .alert .alert-link { font-weight: 500; color: inherit; text-decoration: underline; }
html body .alert > p + p { margin-top: 4px; }
/* dismissable: round close at the right */
html body .alert:is(.alert-dismissable, .alert-dismissible) { padding-right: 52px; }
html body .alert:is(.alert-dismissable, .alert-dismissible) .close {
  position: absolute;
  top: 8px;
  right: 8px;
  color: inherit;
}
html body .alert:is(.alert-dismissable, .alert-dismissible) .close:hover { background-color: rgba(0, 0, 0, .06); }
/* header banner under the app bar (index.ejs) */
html body .alert.alert-header-bar { margin-bottom: 8px; border-radius: 0; }
/* inline "alert-danger" text without .alert (gateway-transaction/list.html) */
html body :not(.alert).alert-danger { background-color: transparent; color: var(--m-error); }

/* =====================================================================
   12. ANGULAR-GROWL TOASTS (css/angular-growl.min.css; template in
   js/vendors/angular-growl.min.js; <div growl> in index.ejs, position
   top-right). Markup: .growl-container.growl-fixed.top-right >
   .growl-item.alert[.alert-success|.alert-error.alert-danger|
   .alert-info|.alert-warning][.icon][.alert-dismissable] > button.close
   + .growl-title + .growl-message (ng-bind-html).
   -> MUI Snackbar + soft Alert: elevation 8, our SVG icon instead of
      the PNG background, sane offset under the 64px top bar.
   ===================================================================== */
html body .growl-container > .growl-item.alert {
  min-height: 48px;
  margin-bottom: 8px;
  padding: 14px 52px 14px 50px;
  box-shadow: var(--m-shadow-8);
  border-radius: var(--m-radius);
}
html body .growl-container > .growl-item.icon { background-image: none; }
html body .growl-item.icon > :is(.growl-title, .growl-message) { margin: 0; }
html body .growl-item > .growl-title { margin: 0 0 2px; font-size: var(--m-fs); font-weight: 500; line-height: 20px; }
html body .growl-item > .growl-message { font-size: var(--m-fs); line-height: 20px; }
@media (min-width: 1024px) {
  html body:has(> .app-header) .growl-container.growl-fixed.top-right { top: calc(var(--m-topbar-h) + 8px); right: 16px; }
}

/* =====================================================================
   13. PROGRESS
   Targets: angular-loading-bar (css/loading-bar.min.css; #loading-bar
   .bar/.peg, #loading-bar-spinner injected into <body>), Bootstrap
   .progress/.progress-bar (no current partial usage). Spinners from
   angular-spinner / loadingoverlay are left functional and untouched.
   ===================================================================== */
html body #loading-bar .bar { height: 3px; background: var(--m-primary); border-radius: 0; }
html body #loading-bar .peg { height: 3px; box-shadow: var(--m-primary) 1px 0 6px 1px; }
html body #loading-bar-spinner .spinner-icon { border-top-color: var(--m-primary); border-left-color: var(--m-primary); }

html body .progress {
  height: 4px;
  margin-bottom: 16px;
  background-color: var(--m-primary-30);
  border-radius: 2px;
  box-shadow: none;
}
html body .progress-bar { background-color: var(--m-primary); box-shadow: none; font-size: 0; }
html body .progress-bar-success { background-color: var(--m-success); }
html body .progress-bar-info { background-color: var(--m-info); }
html body .progress-bar-warning { background-color: var(--m-warning); }
html body .progress-bar-danger { background-color: var(--m-error); }

/* =====================================================================
   14. GLYPHICONS: sizing/alignment only (no glyph remap here)
   Targets: .glyphicon inside .btn (tfa_recovery_codes.html print,
   gateway-transaction prev/next, include/date.html calendar,
   include/user.select.html trash, daasbutton refresh), input-group
   addons, .form-control-feedback (2.7), menu items (8).
   ===================================================================== */
html body .btn .glyphicon { top: 2px; font-size: 14px; line-height: 1; }
html body .btn-sm .glyphicon { font-size: 13px; }
html body .btn-lg .glyphicon { font-size: 16px; }
html body .input-group-btn > .btn .glyphicon { font-size: 16px; top: 3px; }
html body .input-group-btn > .btn.glyphicon { font-size: 16px; line-height: 1; }
html body .input-group-addon .glyphicon { color: var(--m-icon-muted); }

/* =====================================================================
   15. Fixed-width legacy widgets that must fit the narrower modern frame
   ===================================================================== */
/* 15.1 Years/Days duration (include/duration.html via <daasduration>,
        used in template/details.html). The wrapper div there has an inline
        style="width: 560px"; with the drawer + section sub-nav the main
        column at 1024px is narrower. max-width caps the inline width (no
        !important needed). The inline margin-left:16px stays. */
html body div:has(> daasduration) { max-width: 100%; }
html body .daas-yd-duration {
  max-width: 100%;
  display: flex;
  gap: 0;
}
html body .daas-yd-duration > [class*="col-"] {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
/* 15.2 <daasnumber> (include/number.html: input + "-" / "+" buttons in a
        bordered flex box, css/app.css 1484+; used by include/duration.html
        on template/details.html). Was a 30px box with 12px text; now a
        40px MUI outlined field: hover/focus outline, 14px value, round
        28px step buttons. Merged from manage 41.7.3. */
html body daasnumber {
  height: var(--m-ctl-h);
  align-items: center;
  padding: 0 6px 0 0;
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius);
  background: var(--m-surface);
  box-shadow: none;
}
html body daasnumber:hover { border-color: var(--m-outline-hover); }
html body daasnumber:has(input:focus) {
  border-color: var(--m-primary);
  box-shadow: inset 0 0 0 1px var(--m-primary);
}
html body daasnumber:has(input[disabled]) { background: var(--m-surface); border-color: var(--m-disabled-bg); }
html body daasnumber input {
  height: 100%;
  padding: 0 14px;
  font-family: var(--m-font);
  font-size: var(--m-fs);
  color: var(--m-text);
  background: transparent;
}
html body daasnumber input[disabled] { color: var(--m-text-disabled); }
html body daasnumber > button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--m-primary);
  font-size: 16px;
  line-height: 28px;
}
html body daasnumber > button:hover:not([disabled]) { background: var(--m-primary-8); }
html body daasnumber > button[disabled] { color: var(--m-text-disabled); }
html body daasnumber > .separator { height: 20px; margin: 0 2px; border-left: 1px solid var(--m-divider); }

/* 15.3 File input (documentstore/details.html input.form-control[type=file]
        inside an .input-group with the current-file link as addon;
        maintenance/client.import.html; documentation/upload.html bare
        input[type=file]). The native "Choose File" button showed inside the
        outlined field: restyle it as an outlined MUI button and centre the
        row; the addon becomes plain text. Merged from manage2 45.4. */
html body .input-group:has(> input[type="file"]) > .input-group-addon {
  background: var(--m-surface);
  border-color: var(--m-outline);
  color: var(--m-text-2);
  font-size: var(--m-fs);
}
html body input[type="file"].form-control {
  display: flex;
  align-items: center;
  padding: 0 14px 0 6px;
  line-height: normal;
  color: var(--m-text-2);
}
html body input[type="file"]::file-selector-button {
  height: 28px;
  margin: 0 12px 0 0;
  padding: 0 12px;
  font-family: var(--m-font);
  font-size: var(--m-fs-sm);
  font-weight: 500;
  letter-spacing: var(--m-btn-tracking);
  text-transform: var(--m-btn-transform);
  color: var(--m-primary);
  background: var(--m-surface);
  border: 1px solid var(--m-primary-50);
  border-radius: var(--m-radius);
  cursor: pointer;
}
html body input[type="file"]:hover::file-selector-button { background: var(--m-primary-4); border-color: var(--m-primary); }
html body input[type="file"]:focus-visible { outline: 0; }
html body input[type="file"]:focus-visible::file-selector-button { box-shadow: var(--m-focus-ring); }

/* 16. Stacked form field width (label above control)
       Reported on cert: partials/virtualTerminal/virtualTerminal.html,
       where the Partner/Client/Templates selects ran the full 1250px content
       width. Same pattern in manage/user.html, manage/client.html,
       settings/profile.html, etc. P2PE detail forms cap fields at ~680px.
       Only max-width: fields in narrower grid columns (.col-md-6) are
       unaffected. Plain textareas are capped too (reported: manage/partner.html
       Verification Phrase ran the full width). Excludes .form-horizontal /
       .form-inline layouts, filter bars, and code editors (jsoneditor, quill
       are not textarea.form-control). */
:root { --m-field-max: 680px; }
html body form:not(.form-inline, .form-horizontal) .form-group > :is(input.form-control, select.form-control, textarea.form-control, .input-group, .ui-select-container, .intl-tel-input, daasnumber),
html body form:not(.form-inline, .form-horizontal) .form-group > :is(daaspartnerselect, daasuserselect, daasencryptionkeyselect) :is(.tree-dropdown, .ui-select-container, select.form-control),
html body form:not(.form-inline, .form-horizontal) .form-group > daasdate .input-group {
  max-width: var(--m-field-max);
}
/* 16.2 Right-floated form actions line up with the field edge
        Reported on cert: manage/client.html "Update Contact Person" / "Delete"
        (form > div.pull-right, after div.pull-left Save/Cancel) sat at the far
        right of the 1440px content area while the fields stop at 680px. Same
        pattern in manage/partner.html, branding/details.html,
        saml/samlconfigurationDetails.html, credentialVault/details.html,
        gateway-template/details.html, webhooks/details.html, ...
        The FIRST .pull-right after the Save/Cancel block gets a right margin of
        (form width - field width), so its right edge lands at 680px; any later
        .pull-right floats in beside it as before (order unchanged). max() keeps
        it at 0 when the form is narrower than the fields. */
html body form:not(.form-inline, .form-horizontal) > :not(.pull-right) + .pull-right {
  margin-right: max(0px, calc(100% - var(--m-field-max)));
}
/* ...except forms with full-width content (ORCA JSON editor in
   gateway-template/details.html): there the actions belong at the editor's
   right edge, as before (reported on cert: Delete sat mid-page). */
html body form:not(.form-inline, .form-horizontal):has(.jsoneditor, .ql-container, textarea.code) > :not(.pull-right) + .pull-right {
  margin-right: 0;
}

/* 16.1 Paired fields (e.g. manage/user.html: .row > .col-md-6 > .form-group
        for Password Invalid Count / Lock Until) line up with the stacked
        fields: cap rows whose columns are ALL form groups at the same width
        (+30px for Bootstrap's -15px row gutters). Mixed rows (radios + key,
        tables, terminal grids) are not matched. */
html body form:not(.form-inline, .form-horizontal) fieldset > .row:has(> [class*="col-"] > .form-group:first-child):not(:has(> [class*="col-"] > :first-child:not(.form-group))) {
  max-width: calc(var(--m-field-max) + 30px);
}

/* ===== part: 20-components.css ===== */
/* =====================================================================
   20-components.css: tables / data grid, cards, dialogs, tabs, lists,
   stepper, third-party widget chrome, error pages.
   Uses only --m-* tokens (00-tokens.css). data: URIs cannot read custom
   properties, so their fill colors are literal copies of the tokens
   named next to them.
   ===================================================================== */

:root {
  --m-grid-head-h: 56px;   /* data grid header row (MUI DataGrid) */
  --m-row-h-dense: 36px;   /* .table-condensed rows */
}


/* =====================================================================
   1. TABLES AND DATA GRID
   ===================================================================== */

/* ---------- 1.1 Bootstrap .table -------------------------------------
   partials/maintenance/client.import.html (.table-batch > table.table),
   partials/templatesharing/list.html. Row backgrounds go on the <tr>,
   not on the <td>, so contextual rows such as
   tr.alert.alert-danger (client import validation) keep their color. */
html body .table {
  margin-bottom: 0;
  color: var(--m-text);
  font-size: var(--m-fs);
  background-color: var(--m-surface);
}
html body .table > thead > tr > th,
html body .table > tbody > tr > th,
html body .table > tr > th {
  height: var(--m-grid-head-h);
  padding: 8px 12px;
  vertical-align: middle;
  font-size: var(--m-fs-sm);
  font-weight: 500;
  color: var(--m-text);
  background: none;
  border-top: 0;
  border-bottom: 1px solid var(--m-divider);
}
html body .table > tbody > tr > td,
html body .table > tr > td,
html body .table > tfoot > tr > td {
  height: var(--m-row-h);
  padding: 6px 12px;
  vertical-align: middle;
  border-top: 0;
  border-bottom: 1px solid var(--m-divider);
}
html body .table > tbody > tr:last-child > td,
html body .table > tr:last-child > td { border-bottom: 0; }
html body .table > tbody > tr > :first-child,
html body .table > thead > tr > :first-child,
html body .table > tr > :first-child { padding-left: 16px; }
html body .table > tbody > tr > :last-child,
html body .table > thead > tr > :last-child,
html body .table > tr > :last-child { padding-right: 16px; }

/* Striped / hover / bordered / condensed variants */
html body .table-striped > tbody > tr:nth-of-type(odd):not([class*="alert"]) { background-color: var(--m-surface-2); }
html body .table-hover > tbody > tr:hover:not([class*="alert"]) { background-color: var(--m-hover); }
html body .table-bordered { border: 1px solid var(--m-divider); }
html body .table-bordered > thead > tr > th,
html body .table-bordered > tbody > tr > th,
html body .table-bordered > tbody > tr > td,
html body .table-bordered > tfoot > tr > td { border: 1px solid var(--m-divider); }
html body .table-condensed > thead > tr > th,
html body .table-condensed > tbody > tr > th,
html body .table-condensed > tbody > tr > td { height: var(--m-row-h-dense); padding-top: 4px; padding-bottom: 4px; }

/* Scroll box used around import tables (css/app.css .table-batch) */
html body .table-batch {
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
  background-color: var(--m-surface);
}


/* ---------- 1.2 DataTables wrapper = grid card -----------------------
   Every list page: partials/manage/*.html, partials/transaction/
   transactions.html, partials/template/list.html, partials/audit/list.html,
   partials/reports/*.html, partials/include/filter.search.html (modal).
   Markup (js/app.directive.js daastable, js/ext/jquery.dataTables.ext.js
   dom '<"pull-right"B><"clear">lfrtip', jQueryUI:true class set,
   js/vendors/jquery.dataTables.bootstrap.js page renderer):
     div.dataTables_wrapper.no-footer
       div.pull-right > div.dt-buttons > a.dt-button.buttons-csv.btn-sm
       div.clear
       div.dataTables_length > label > select + " entries on page"
       div.dataTables_filter > label > "Search:" + input[type=search]
       div.dataTables_processing (display toggled inline by DataTables)
       div.dataTables_scroll > .dataTables_scrollHead / .dataTables_scrollBody
       div.dataTables_info
       div.dataTables_paginate > ul.pagination > li.fg-button(.previous|.active|.next|.disabled) > a
   The wrapper becomes a white card with a 1px divider border (P2PE).
   No overflow:hidden on the card: the Create split-button dropdown that
   js/app.directive.js may append into .dataTables_length must escape it. */
html body .dataTables_wrapper {
  margin-top: 0;
  background-color: var(--m-surface);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
  color: var(--m-text);
  font-family: var(--m-font);
  font-size: var(--m-fs);
}
html body .dataTables_wrapper .dataTables_length,
html body .dataTables_wrapper .dataTables_filter,
html body .dataTables_wrapper .dataTables_info,
html body .dataTables_wrapper .dataTables_paginate,
html body .dataTables_wrapper .dataTables_processing {
  color: var(--m-text-2);
  font-size: var(--m-fs-sm);
}
/* Toolbar items (buttons, search) get card padding */
html body .dataTables_wrapper > .pull-right:has(.dt-button) { margin: 10px 8px 10px 0; }
html body .dataTables_wrapper .dataTables_filter { margin: 8px 16px; }
html body .dataTables_wrapper .dataTables_length { margin: 8px 16px; }
/* Footer items */
html body .dataTables_wrapper .dataTables_info {
  padding: 0;
  margin: 0 16px;
  min-height: 52px;
  line-height: 52px;
}
html body .dataTables_wrapper .dataTables_paginate {
  padding: 0;
  margin: 0 8px;
  min-height: 52px;
}

/* Grid-card layout (>=1024px, logged-in shell): one flex row for the
   toolbar (Create + CSV/PDF + search, right aligned like P2PE), the table
   full width, then a footer row: rows-per-page, range, pager. Only order
   and flex sizing change; DataTables' own inline display toggles (the
   processing box) and app.css display:none rules (.table-no-search
   .dataTables_filter, #dtNotifications_filter, #dtTransactions_wrapper
   page numbers) are untouched because no display is set on those items. */
@media (min-width: 1024px) {
  html body:has(> .app-header) .dataTables_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  html body:has(> .app-header) .dataTables_wrapper::after { content: none; }
  html body:has(> .app-header) .dataTables_wrapper > .clear { flex: 0 0 0; width: 0; height: 0; margin: 0; }
  /* toolbar row */
  html body:has(> .app-header) .dataTables_wrapper > .pull-right { order: 2; margin-left: auto; float: none; }
  html body:has(> .app-header) .dataTables_wrapper > .dataTables_filter { order: 3; float: none; }
  /* table */
  html body:has(> .app-header) .dataTables_wrapper > .dataTables_scroll,
  html body:has(> .app-header) .dataTables_wrapper > table.dataTable { order: 4; flex: 1 0 100%; min-width: 0; }
  /* footer row */
  html body:has(> .app-header) .dataTables_wrapper > .dataTables_length { order: 5; margin-left: auto; float: none; }
  html body:has(> .app-header) .dataTables_wrapper > .dataTables_info { order: 6; float: none; clear: none; }
  html body:has(> .app-header) .dataTables_wrapper > .dataTables_paginate { order: 7; float: none; display: flex; align-items: center; }
  /* daastable appends the Create button (a.btn, or a .btn-group split
     button) into .dataTables_length on pages without a .form-inline filter
     (notificationManagement, branding, documentstore, saml ...). Unwrap that
     block so the button sits top-left of the toolbar and the rows-per-page
     label goes to the footer like every other grid. font-size 0 collapses
     the &nbsp; text nodes daastable adds around the button. */
  html body:has(> .app-header) .dataTables_wrapper > .dataTables_length:has(> :is(a.btn, .btn-group)) { display: contents; font-size: 0; }
  html body:has(> .app-header) .dataTables_wrapper > .dataTables_length:has(> :is(a.btn, .btn-group)) > :is(a.btn, .btn-group) {
    order: 1;
    margin: 12px 16px;
    font-size: var(--m-fs-sm);
  }
  html body:has(> .app-header) .dataTables_wrapper > .dataTables_length:has(> :is(a.btn, .btn-group)) > a.btn,
  html body:has(> .app-header) .dataTables_wrapper > .dataTables_length:has(> .btn-group) > .btn-group > .btn {
    display: inline-flex;
    align-items: center;
    height: var(--m-ctl-h-sm);       /* 32px, same as the filter-bar Create buttons */
  }
  html body:has(> .app-header) .dataTables_wrapper > .dataTables_length:has(> :is(a.btn, .btn-group)) > label {
    order: 5;
    margin: 8px 16px 8px auto;
    font-size: var(--m-fs-sm);
  }
}
/* Below 1024px the grid is not a flex card: keep the block, but lay it out
   as one tidy row (rows-per-page left, Create right). */
@media (max-width: 1023.98px) {
  html body .dataTables_wrapper > .dataTables_length:has(> :is(a.btn, .btn-group)) {
    display: flex;
    align-items: center;
    float: none;
    font-size: 0;                    /* collapses daastable's &nbsp; text nodes */
  }
  html body .dataTables_wrapper > .dataTables_length:has(> :is(a.btn, .btn-group)) > :is(label, a.btn, .btn-group) { font-size: var(--m-fs-sm); }
  html body .dataTables_wrapper > .dataTables_length:has(> :is(a.btn, .btn-group)) > :is(a.btn, .btn-group) { margin-left: auto; }
  html body .dataTables_wrapper > .dataTables_length:has(> :is(a.btn, .btn-group)) > a.btn {
    display: inline-flex;
    align-items: center;
    height: var(--m-ctl-h-sm);
  }
}

/* ---------- 1.3 Search field (dataTables_filter) ---------------------
   Outlined field with a leading search icon. The "Search:" label text is
   set to font-size 0 so the icon replaces it visually; it stays in the
   DOM as the input's accessible label. Icon fill = --m-text-2. */
html body .dataTables_wrapper .dataTables_filter label {
  margin: 0;
  font-size: 0;
  font-weight: 400;
  color: var(--m-text-2);
}
html body .dataTables_wrapper .dataTables_filter input,
html body div.dataTables_filter input {
  box-sizing: border-box;
  width: 240px;
  max-width: 100%;
  height: var(--m-ctl-h);
  margin: 0;
  padding: 0 12px 0 40px;
  font-family: var(--m-font);
  font-size: var(--m-fs);
  color: var(--m-text);
  background-color: var(--m-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666666' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 20px 20px;
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
html body .dataTables_wrapper .dataTables_filter input::placeholder { color: var(--m-text-disabled); }
html body .dataTables_wrapper .dataTables_filter input:hover { border-color: var(--m-outline-hover); }
html body .dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--m-primary);
  box-shadow: inset 0 0 0 1px var(--m-primary);   /* 2px focus border without layout shift */
  outline: none;
}

/* ---------- 1.4 Rows per page (dataTables_length) --------------------
   "<select> entries on page": MUI TablePagination standard select,
   borderless with a drop-down arrow (fill rgba(0,0,0,.54)). */
html body .dataTables_wrapper .dataTables_length label {
  margin: 0;
  font-weight: 400;
  font-size: var(--m-fs-sm);
  color: var(--m-text-2);
}
html body .dataTables_wrapper .dataTables_length select,
html body div.dataTables_length select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: var(--m-ctl-h-sm);
  margin: 0 4px 0 0;
  padding: 0 24px 0 8px;
  font-family: var(--m-font);
  font-size: var(--m-fs-sm);
  color: var(--m-text);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,.54)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 20px 20px;
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: none;
  cursor: pointer;
}
html body .dataTables_wrapper .dataTables_length select:hover { background-color: var(--m-hover); }
html body .dataTables_wrapper .dataTables_length select:focus-visible { outline: none; box-shadow: var(--m-focus-ring); }

/* ---------- 1.5 Grid header and rows ---------------------------------
   table.dataTable (scrollHead copy + scrollBody table). The scrollBody
   copy of the header gets inline height:0 / padding-top|bottom:0 from
   DataTables; we only set horizontal padding there, identical to the
   visible header, so column alignment is preserved. */
html body table.dataTable {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--m-text);
  font-size: var(--m-fs-sm);
  background-color: var(--m-surface);
}
html body table.dataTable thead th,
html body table.dataTable thead td {
  height: var(--m-grid-head-h);
  padding: 6px 12px;
  vertical-align: middle;
  font-size: var(--m-fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--m-text);
  background-color: var(--m-surface);
  border-bottom: 1px solid var(--m-divider);
}
html body table.dataTable tbody th,
html body table.dataTable tbody td {
  height: var(--m-row-h);
  padding: 6px 12px;
  vertical-align: middle;
  line-height: 1.43;
  border-top: 0;
  border-bottom: 1px solid var(--m-divider);
}
html body table.dataTable tbody tr:last-child > td,
html body table.dataTable tbody tr:last-child > th { border-bottom: 0; }
html body table.dataTable thead tr > :first-child,
html body table.dataTable tbody tr > :first-child { padding-left: 16px; }
html body table.dataTable thead tr > :last-child,
html body table.dataTable tbody tr > :last-child { padding-right: 16px; }

/* Row fills: no zebra (css/app.css tr.odd #F9F9F9), hover, selected.
   Set on the <tr> so per-row classes (text-muted, alert-*) still work. */
html body table.dataTable tbody tr,
html body table.dataTable tbody tr.odd,
html body table.dataTable tbody tr.even { background-color: var(--m-surface); }
html body table.dataTable tbody tr:hover,
html body table.dataTable.selectable tbody tr:hover { background-color: var(--m-hover); }
html body table.dataTable tbody tr.selected,
html body table.dataTable tbody tr.selected:hover { background-color: var(--m-primary-8); }
html body table.dataTable tbody tr > .sorting_1,
html body table.dataTable tbody tr > .sorting_2,
html body table.dataTable tbody tr > .sorting_3 { background-color: transparent; }
/* Inactive rows (app.user.js fnRowCallback adds .text-muted): muted but readable */
html body table.dataTable tbody tr.text-muted { color: var(--m-text-2); }

/* Inline cell links/icons (edit pencil, "View") */
html body table.dataTable tbody td > a { color: var(--m-primary); }
html body table.dataTable tbody td > a.glyphicon { color: var(--m-text-2); text-decoration: none; }
html body table.dataTable tbody td > a.glyphicon:hover { color: var(--m-primary); }

/* Bottom divider of the grid body (legacy #111 / lightgrey lines) */
html body table.dataTable.no-footer { border-bottom: 0; }
html body .dataTables_wrapper.no-footer .dataTables_scrollBody,
html body .dataTables_wrapper .dataTables_scrollBody { border-bottom: 1px solid var(--m-divider); }
html body .dataTables_wrapper .dataTables_scrollHead { background-color: var(--m-surface); }
html body .dataTables_wrapper > table.dataTable { border-bottom: 1px solid var(--m-divider); }

/* ---------- 1.6 Sort indicators --------------------------------------
   th.sorting / .sorting_asc / .sorting_desc (+ _disabled) replace the
   sort_*.png backgrounds (datatables.min.css, css/app.css ~216) with
   MUI arrows on the right of the label. Headers stay clickable (they
   are the DataTables click targets). Fills: unsorted --m-text-disabled,
   sorted --m-text. */
html body table.dataTable thead .sorting,
html body table.dataTable thead .sorting_asc,
html body table.dataTable thead .sorting_desc,
html body table.dataTable thead .sorting_asc_disabled,
html body table.dataTable thead .sorting_desc_disabled {
  padding-right: 32px;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 18px 18px;
  cursor: pointer;
}
html body table.dataTable thead .sorting {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239E9E9E' d='M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E");
}
html body table.dataTable thead .sorting_asc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23212121' d='m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E");
}
html body table.dataTable thead .sorting_desc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23212121' d='m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E");
}
html body table.dataTable thead .sorting_asc_disabled {
  cursor: default;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23BDBDBD' d='m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E");
}
html body table.dataTable thead .sorting_desc_disabled {
  cursor: default;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23BDBDBD' d='m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E");
}
html body table.dataTable thead .sorting_disabled { background-image: none; cursor: default; }
html body table.dataTable thead .sorting:hover { background-color: var(--m-hover); }
html body table.dataTable thead th:focus-visible { outline: none; box-shadow: inset var(--m-focus-ring); }
/* hidden sizing header inside the scroll body: no icons */
html body .dataTables_scrollBody table.dataTable thead th { background-image: none; }

/* ---------- 1.7 Empty and processing states --------------------------
   td.dataTables_empty ("No data available in table" / zero records):
   P2PE "No data matching the filter", centered and muted.
   .dataTables_processing ("<i.icon-spin> Processing..."): small elevated
   pill over the grid (css/app.css ~203 gradient replaced). */
html body table.dataTable tbody td.dataTables_empty {
  height: var(--m-row-h);
  padding: 12px 16px;
  text-align: center;
  font-size: var(--m-fs);
  color: var(--m-text-2);
  background-color: var(--m-surface);
}
html body table.dataTable tbody tr:hover > td.dataTables_empty { background-color: var(--m-surface); }
html body .dataTables_wrapper .dataTables_processing {
  left: 50%;
  width: auto;
  min-width: 160px;
  height: auto;
  margin: 0;
  padding: 10px 20px;
  transform: translateX(-50%);
  font-size: var(--m-fs);
  font-weight: 500;
  color: var(--m-text);
  text-align: center;
  background: var(--m-surface);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-8);
}
html body .dataTables_wrapper .dataTables_processing .icon-spin-datatable {
  font-size: 20px;
  color: var(--m-primary);
  margin-right: 6px;
}

/* ---------- 1.8 Pagination (dataTables_paginate + Bootstrap) --------
   ul.pagination > li.fg-button.ui-button.ui-state-default(.previous|
   .next|.first|.last|.active|.disabled) > a. MUI Pagination: round
   buttons, current page on a primary-8 fill, Previous/Next as chevron
   icon buttons (their text is kept, at font-size 0, as the accessible
   name). The <li> display is never set: css/app.css hides page numbers
   on #dtTransactions_wrapper with li display rules (SCX-520). */
html body .pagination {
  margin: 0;
  border-radius: 0;
}
html body .dataTables_paginate .pagination {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 8px 0;
}
html body .pagination > li > a,
html body .pagination > li > span {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 32px;
  height: 32px;
  margin: 0;
  padding: 0 6px;
  font-family: var(--m-font);
  font-size: var(--m-fs);
  line-height: 1;
  color: var(--m-text);
  background-color: transparent;
  border: 0;
  border-radius: var(--m-radius-pill);
  text-decoration: none;
  transition: background-color .15s;
}
html body .pagination > li:first-child > a,
html body .pagination > li:last-child > a,
html body .pagination > li:first-child > span,
html body .pagination > li:last-child > span { border-radius: var(--m-radius-pill); }
html body .pagination > li > a:hover,
html body .pagination > li > a:focus,
html body .pagination > li > span:hover {
  color: var(--m-text);
  background-color: var(--m-hover);
  border-color: transparent;
}
html body .pagination > li > a:focus-visible,
html body .pagination > li:focus-visible > a { outline: none; box-shadow: var(--m-focus-ring); }
/* DataTables (jQueryUI pager) puts tabindex on the li itself, incl. disabled
   Previous/Next, so the ring goes on the focused li too (sweep finding). */
html body .dataTables_paginate .pagination > li:focus-visible { outline: none; border-radius: 50%; box-shadow: var(--m-focus-ring); }
html body .pagination > li:focus { outline: none; }
html body .pagination > .active > a,
html body .pagination > .active > a:hover,
html body .pagination > .active > a:focus,
html body .pagination > .active > span {
  z-index: auto;
  font-weight: 500;
  color: var(--m-primary);
  background-color: var(--m-primary-8);
  border-color: transparent;
}
html body .pagination > .disabled > a,
html body .pagination > .disabled > a:hover,
html body .pagination > .disabled > a:focus,
html body .pagination > .disabled > span {
  color: var(--m-text-disabled);
  background-color: transparent;
  cursor: default;
}
/* Prev / next / first / last as 40px icon buttons. Icons use a mask so
   they follow currentColor (disabled state included). */
html body .dataTables_paginate .pagination > li.previous > a,
html body .dataTables_paginate .pagination > li.next > a,
html body .dataTables_paginate .pagination > li.first > a,
html body .dataTables_paginate .pagination > li.last > a {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  font-size: 0;
  border-radius: 50%;
}
html body .dataTables_paginate .pagination > li.previous > a::before,
html body .dataTables_paginate .pagination > li.next > a::before,
html body .dataTables_paginate .pagination > li.first > a::before,
html body .dataTables_paginate .pagination > li.last > a::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--m-pg-icon) center / 24px 24px no-repeat;
  mask: var(--m-pg-icon) center / 24px 24px no-repeat;
}
html body .dataTables_paginate .pagination > li.previous > a {
  --m-pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}
html body .dataTables_paginate .pagination > li.next > a {
  --m-pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
}
html body .dataTables_paginate .pagination > li.first > a {
  --m-pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.41 16.59 13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z'/%3E%3C/svg%3E");
}
html body .dataTables_paginate .pagination > li.last > a {
  --m-pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.59 7.41 10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z'/%3E%3C/svg%3E");
}
/* app.css SCX-520 shows prev/next inline on the transactions grid: keep centered */
html body #dtTransactions_wrapper .pagination > li.fg-button.previous,
html body #dtTransactions_wrapper .pagination > li.fg-button.next { vertical-align: middle; }

/* ---------- 1.9 DataTables Buttons (CSV / PDF) -----------------------
   div.dt-buttons > a.dt-button.buttons-csv|buttons-pdf.buttons-html5.btn-sm
   (js/app.directive.js showTableTools). P2PE text buttons ("CSV"). */
html body .dt-buttons { padding-left: 0; display: flex; gap: 4px; }
html body .dt-buttons .dt-button,
html body a.dt-button,
html body button.dt-button {
  display: inline-flex;
  align-items: center;
  height: var(--m-btn-h-sm);
  margin: 0;
  padding: 0 8px;
  font-family: var(--m-font);
  font-size: var(--m-fs-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--m-btn-tracking);
  text-transform: var(--m-btn-transform);
  color: var(--m-primary);
  background: transparent;
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: none;
  text-shadow: none;
  filter: none;
  text-decoration: none;
}
html body .dt-buttons .dt-button:hover:not(.disabled),
html body .dt-buttons .dt-button:active:not(.disabled),
html body .dt-buttons .dt-button.active:not(.disabled) {
  color: var(--m-primary);
  background: var(--m-primary-4);
  border: 0;
  box-shadow: none;
}
html body .dt-buttons .dt-button:focus:not(.disabled) {
  color: var(--m-primary);
  background: var(--m-primary-12);
  border: 0;
  text-shadow: none;
  outline: none;
}
html body .dt-buttons .dt-button:focus-visible { box-shadow: var(--m-focus-ring); }
html body .dt-buttons .dt-button.disabled {
  color: var(--m-text-disabled);
  background: transparent;
  border: 0;
}
/* Buttons "info" toast (copy/print feedback) */
html body div.dt-button-info {
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-24);
  font-family: var(--m-font);
}
html body div.dt-button-info h2 {
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  background-color: var(--m-surface);
  border-bottom: 1px solid var(--m-divider);
}

/* ---------- 1.10 Filter bar above grids ------------------------------
   div.well.well-sm > form.form-inline (> daasfilter partner/client
   selects, selects, daasdate, Clear All / Apply, Create link appended by
   daastable) on every list page, and systemConfig.html
   div.well.well-sm.form-inline. P2PE: no box, just a row of controls
   above the grid card. The .well itself keeps its display (ng-show). */
html body .well:has(> form.form-inline),
html body .well.form-inline {
  margin: 0 0 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (min-width: 1024px) {
  html body:has(> .app-header) .well > form.form-inline,
  html body:has(> .app-header) .well.form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
  }
  html body:has(> .app-header) .well > form.form-inline > .form-group,
  html body:has(> .app-header) .well.form-inline > .form-group { margin: 0; }
}
html body .well > form.form-inline .control-label,
html body .well > form.form-inline > .form-group > label {
  font-weight: 400;
  color: var(--m-text);
}

/* ---------- 1.10b Filter bar controls: one 32px line ----------------
   Merged from the sweep fixes reports 43.1/43.1b, logs 42.1, manage2
   45.2, manage 41.2/41.3. Same markup on every bar:
   div.well > form.form-inline (audit/list, credentialVault/list,
   file-process/list, gateway-template/list, gateway-transaction/list,
   manage/{users,partners,clients,emails,injectKeys}, reports/*.html,
   template/list, templatesharing/list, transaction/transactions,
   transaction-network/list, transaction-virtual-terminal/list,
   webhooks/list) and systemConfig.html div.well.form-inline (Orchestration
   Extended Logging, form not .form-inline). Holds <daasfilter>
   (include/filter.html: partner tree + client ui-select + clear x),
   <daasdate class="input-sm"> (include/date.html), plain and .input-sm
   selects, ui-select (ORCA), btn-sm Clear All / Apply / Create (daastable).
   Before: 30 / 32 / 34 / 40px controls mixed in one row, a 10px pad on
   <daasdate> (Bootstrap .input-sm lands on the custom element), `&nbsp;`
   spacer groups and a stranded ":" between the dates. */
/* daasfilter's two groups join the bar's flex row and gap (ng-show/ng-if
   on its children still apply; .ng-hide keeps its !important) */
html body :is(.well > form.form-inline, .well.form-inline) > daasfilter { display: contents; }
html body :is(.well > form.form-inline, .well.form-inline) > daasfilter > .form-group { margin: 0; }
/* text-only groups are the `&nbsp;` spacers and the ":" between the dates
   (GAP: remove them in markup); the date range gets an en dash instead */
html body :is(.well > form.form-inline, .well.form-inline) > .form-group:not(:has(*)),
html body :is(.well > form.form-inline, .well.form-inline) > p:empty { display: none; }   /* empty <p> (reports/tokenizationMetric.html) added a gap */
html body :is(.well > form.form-inline, .well.form-inline) > .form-group:has(> daasdate[key="dateFrom"]) ~ .form-group:has(> daasdate[key="dateTo"]) {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
html body :is(.well > form.form-inline, .well.form-inline) > .form-group:has(> daasdate[key="dateFrom"]) ~ .form-group:has(> daasdate[key="dateTo"])::before {
  content: "\2013";
  color: var(--m-text-2);
}
/* <daasdate class="input-sm">: the element is a wrapper, not the field */
html body :is(.well > form.form-inline, .well.form-inline) daasdate.input-sm {
  display: inline-block;
  height: auto;
  padding: 0;
  border: 0;
}
html body :is(.well > form.form-inline, .well.form-inline) daasdate .input-group { height: var(--m-ctl-h-sm); }
html body :is(.well > form.form-inline, .well.form-inline) daasdate .input-group > .form-control {
  height: calc(var(--m-ctl-h-sm) - 2px);   /* inside the 1px adornment outline (10-controls 2.9.2) */
  font-size: var(--m-fs-sm);
}
/* calendar icon button: 28px round adornment inside the 30px field
   (10-controls 2.9.2 draws 34px icon buttons for the 40px field) */
html body :is(.well > form.form-inline, .well.form-inline) daasdate .input-group > .input-group-btn > .btn:is(:has(> .glyphicon), .glyphicon) {
  width: 28px;
  min-height: 0;
  height: 28px;
  margin: 0 1px;
  padding: 0;
}
/* selects (plain and .input-sm) */
html body :is(.well > form.form-inline, .well.form-inline) select.form-control:not([multiple]):not([size]) {
  height: var(--m-ctl-h-sm);
  padding: 0 32px 0 10px;
  font-size: var(--m-fs-sm);
  background-position: right 4px center;
}
/* partner tree toggle: 32px also where the form is not .form-inline
   (systemConfig Orchestration bar; 10-controls 5.1 sizes stacked ones 40px) */
html body :is(.well > form.form-inline, .well.form-inline) .tree-dropdown { height: var(--m-ctl-h-sm); }
html body :is(.well > form.form-inline, .well.form-inline) .tree-dropdown > .btn.btn-default.dropdown-toggle {
  height: var(--m-ctl-h-sm);
  min-height: 0;
  padding: 0 10px;
  font-size: var(--m-fs-sm);
  line-height: calc(var(--m-ctl-h-sm) - 2px);
}
/* ui-select (client select and ORCA select) + its search box when open */
html body :is(.well > form.form-inline, .well.form-inline) .ui-select-bootstrap > .ui-select-match > .btn.ui-select-toggle {
  width: 100%;   /* .form-inline .form-control is width:auto; fill the 200px select */
  height: var(--m-ctl-h-sm);
  line-height: calc(var(--m-ctl-h-sm) - 2px);
  font-size: var(--m-fs-sm);
  padding: 0 32px 0 10px !important;   /* beats app.css `.form-control.ui-select-toggle` !important padding */
}
html body :is(.well > form.form-inline, .well.form-inline) .ui-select-bootstrap > input.ui-select-search {
  height: var(--m-ctl-h-sm);
  padding: 0 10px;
  font-size: var(--m-fs-sm);
}
html body :is(.well > form.form-inline, .well.form-inline) > .form-group > .ui-select-bootstrap { min-width: 200px; }
html body :is(.well > form.form-inline, .well.form-inline) .client-select { height: var(--m-ctl-h-sm); }
/* buttons share the 32px line (Clear All / Apply / CSV / Create link) */
html body :is(.well > form.form-inline, .well.form-inline) > .btn,
html body :is(.well > form.form-inline, .well.form-inline) > :is(.form-group, .btn-group, .form-group > .btn-group) > .btn {
  display: inline-flex;   /* centres the label in the fixed height (the appended a.btn Create link has no line-height match); .ng-hide still wins (!important) */
  align-items: center;
  justify-content: center;
  min-height: var(--m-ctl-h-sm);
  height: var(--m-ctl-h-sm);
  padding-top: 0;
  padding-bottom: 0;
}
/* clear partner / client x (include/filter.html i.clear-partner /
   i.clear-client): muted 12px icon instead of a bright blue glyph */
html body :is(.well > form.form-inline, .well.form-inline) :is(.clear-partner, .clear-client) {
  font-size: 12px;
  color: var(--m-text-2);
  cursor: pointer;
}
html body :is(.well > form.form-inline, .well.form-inline) :is(.clear-partner, .clear-client):hover { color: var(--m-text); }
/* "Search based on UTC" checkbox: room between box and text */
html body :is(.well > form.form-inline, .well.form-inline) label > input[type="checkbox"] { margin-right: 8px; }
/* "Click Apply ..." is a hint, not an error: muted helper text instead of a
   red alert span (transaction/transactions, gateway-transaction/list,
   transaction-network/list, transaction-virtual-terminal/list) */
html body :is(.well > form.form-inline, .well.form-inline) span.alert-danger {
  color: var(--m-text-2);
  background: transparent;
  font-size: var(--m-fs-sm);
}


/* =====================================================================
   2. PANELS, WELLS, CARDS
   ===================================================================== */

/* ---------- 2.1 Panels -----------------------------------------------
   partials/settings/security.html, tfa_app.html, tfa_recovery_codes.html,
   tfa_verify.html (.panel.panel-default > .panel-body), and any other
   .panel. P2PE section cards: white, radius 4, elevation 1. */
html body .panel {
  margin-bottom: 24px;
  background-color: var(--m-surface);
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-1);
}
html body .panel > .panel-heading {
  padding: 20px 24px 0;
  color: var(--m-text);
  background: transparent;
  border: 0;
  border-radius: var(--m-radius) var(--m-radius) 0 0;
}
html body .panel > .panel-heading,
html body .panel > .panel-heading > .panel-title,
html body .panel .panel-title {
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 400;
  line-height: 1.4;
}
html body .panel .panel-title > a { color: inherit; }
html body .panel > .panel-body { padding: 24px; }
html body .panel > .panel-heading + .panel-body,
html body .panel > .panel-heading + .panel-collapse > .panel-body { padding-top: 16px; border-top: 0; }
html body .panel > .panel-footer {
  padding: 8px 16px 16px;
  text-align: right;
  background: transparent;
  border-top: 1px solid var(--m-divider);
  border-radius: 0 0 var(--m-radius) var(--m-radius);
}
html body .panel > .list-group .list-group-item,
html body .panel > .table { border-left: 0; border-right: 0; }
/* Status variants: soft heading tint + 4px status edge */
html body .panel-primary { box-shadow: var(--m-shadow-1), inset 0 3px 0 var(--m-primary); }
html body .panel-success { box-shadow: var(--m-shadow-1), inset 0 3px 0 var(--m-success); }
html body .panel-info    { box-shadow: var(--m-shadow-1), inset 0 3px 0 var(--m-info); }
html body .panel-warning { box-shadow: var(--m-shadow-1), inset 0 3px 0 var(--m-warning); }
html body .panel-danger  { box-shadow: var(--m-shadow-1), inset 0 3px 0 var(--m-error); }
html body .panel-primary > .panel-heading { color: var(--m-primary); }
html body .panel-success > .panel-heading { color: var(--m-success-text); }
html body .panel-info    > .panel-heading { color: var(--m-info-text); }
html body .panel-warning > .panel-heading { color: var(--m-warning-text); }
html body .panel-danger  > .panel-heading { color: var(--m-error-text); }
html body .panel-group .panel + .panel { margin-top: 8px; }

/* ---------- 2.2 Wells ------------------------------------------------
   Non-filter wells: settings/tfa_app.html (.well), documentation/
   documents.html ("no documents available" / "loading..." .well-sm).
   Flat tinted box. Filter-bar wells are handled in 1.10. */
html body .well {
  padding: 16px;
  margin-bottom: 16px;
  color: var(--m-text);
  background-color: var(--m-surface-2);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
  box-shadow: none;
}
html body .well-sm { padding: 8px 12px; border-radius: var(--m-radius); }
html body .well-lg { padding: 24px; border-radius: var(--m-radius); }

/* ---------- 2.3 Dashboard summary tiles ------------------------------
   partials/dashboard/dashboard.html: .wrapper > div > .container-fluid >
   .col-sm-3.border (Transactions / Counts / User Count) holding
   <daasdashboarditem> rows (partials/include/dashboard.item.html), a
   Chart.js canvas.chart-bar and the user-count lists. Styled as the
   prototype KPI cards: 1px divider border, radius 4, flat. The legacy
   fixed height (css/app.css .border 340px) is kept so the floated row
   stays even. */
html body .container-fluid > .col-sm-3.border {
  margin: 0 16px 16px 0;
  padding: 16px 20px;
  background-color: var(--m-surface);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
}
html body .container-fluid > .col-sm-3.border > h4 {
  margin: 0 0 12px;
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 400;
  color: var(--m-text);
}
html body .container-fluid > .col-sm-3.border hr { margin: 8px 0; border-top-color: var(--m-divider); }
html body daasdashboarditem > div {
  padding: 6px 0;
  border-bottom: 1px solid var(--m-divider);
  font-size: var(--m-fs);
}
html body daasdashboarditem div span.wide { color: var(--m-text-2); }
html body daasdashboarditem div span.summary-item {
  font-size: var(--m-fs-md);
  font-weight: 500;
  color: var(--m-text);
}
html body .total-count { font-size: var(--m-fs); font-weight: 500; color: var(--m-text); }
html body ul.month-count li { font-size: var(--m-fs-xs); color: var(--m-text-2); padding: 2px 0; }
html body ul.year-count li a { color: var(--m-primary); cursor: pointer; }
/* "Summary Information" heading + refresh icon link */
html body .wrapper > [ng-show="showSummary"] > h3 {
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h5);
  font-weight: 400;
  color: var(--m-text);
  margin: 16px 0;
}
html body .wrapper > [ng-show="showSummary"] > h3 small a { color: var(--m-text-2); font-size: var(--m-fs-md); }
html body .wrapper > [ng-show="showSummary"] > h3 small a:hover { color: var(--m-primary); }

/* ---------- 2.4 Thumbnail / jumbotron --------------------------------
   Not used in partials today; mapped to the card look for safety. */
html body .thumbnail {
  padding: 8px;
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
  box-shadow: none;
}
html body a.thumbnail:hover,
html body a.thumbnail:focus,
html body a.thumbnail.active { border-color: var(--m-primary); }
html body .jumbotron {
  padding: 32px;
  background-color: var(--m-surface-2);
  border-radius: var(--m-radius);
}
html body .jumbotron h1 { font-family: var(--m-font-head); font-weight: 400; }


/* =====================================================================
   3. MODALS (ui-bootstrap $uibModal)
   ===================================================================== */

/* ---------- 3.1 Backdrop, dialog, paper ------------------------------
   div.modal-backdrop.fade(.in); div.modal.fade(.in)[uib-modal-window] >
   .modal-dialog(.modal-sm|.modal-md|.modal-lg|.modal-product-communication)
   > .modal-content[uib-modal-transclude] > template. Templates:
   include/confirm.dialog.html, modal.dialog.html, auth.dialogue.html,
   filter.search.html, dashboard/notification.details.html,
   productCommunication/notice*.html, transaction/transaction.html and the
   other detail modals. Fade/in classes and inline display are untouched. */
html body .modal-backdrop { background-color: var(--m-backdrop); }
html body .modal-backdrop.in { opacity: 1; }   /* the token already carries the .5 alpha */
html body .modal-backdrop.fade:not(.in) { opacity: 0; }

@media (min-width: 768px) {
  html body .modal-dialog { margin: 48px auto; }
}
html body .modal-content {
  position: relative;
  padding: 0;                       /* css/app.css .modal-content padding:15px */
  color: var(--m-text);
  font-family: var(--m-font);
  font-size: var(--m-fs);
  background-color: var(--m-surface);
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-24);
  outline: 0;
}
@media (min-width: 768px) {
  html body .modal-content { box-shadow: var(--m-shadow-24); }
}
/* Custom size from js/modules/authenticated/app.dashboard.js
   (size:'product-communication'), css/app.css ~799 */
html body .modal-product-communication { width: 450px; max-width: calc(100% - 32px); }
html body .modal-product-communication .modal-content { padding: 8px 24px 0; }

/* ---------- 3.2 Header, title, close ---------------------------------
   P2PE 141819: centered Poppins 20px title, inset divider below, close
   as a round icon button at the top right. */
html body .modal-header {
  position: relative;
  margin: 0 24px;
  padding: 20px 40px 12px;
  text-align: center;
  border-bottom: 1px solid var(--m-divider);
}
html body .modal-title,
html body .modal-content h3.modal-title,
html body .modal-content h4.modal-title {
  margin: 0;
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 400;
  line-height: 1.6;
  color: var(--m-text);
}
/* Close (×): .modal-header > button.close (modal.dialog.html), or loose
   in the content (notification.details.html, noticeAccept/Decline.html
   .product-communication-modal-close). Positioned, never hidden. */
html body .modal-header > .close,
html body .modal-content > .close,
html body .modal-content > div > .close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0 !important;            /* beats css/app.css .product-communication-modal-close padding:10px !important */
  font-family: var(--m-font);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: var(--m-text-2);
  text-shadow: none;
  background: transparent;
  border: 0;
  border-radius: 50%;
  opacity: 1;
  cursor: pointer;
  transition: background-color .15s;
}
html body .modal-content div.modal-header > .close { top: 10px; right: -16px; margin: 0; }   /* outranks ".modal-content > div > .close" */
html body .modal-header > .close:hover,
html body .modal-content > .close:hover,
html body .modal-content > div > .close:hover,
html body .modal-header > .close:focus,
html body .modal-content > .close:focus,
html body .modal-content > div > .close:focus {
  color: var(--m-text);
  background-color: var(--m-hover);
  opacity: 1;
}
html body .modal-header > .close:focus-visible,
html body .modal-content > .close:focus-visible,
html body .modal-content > div > .close:focus-visible { outline: none; box-shadow: var(--m-focus-ring); }

/* ---------- 3.3 Body, footer -----------------------------------------
   .modal-footer: css/app.css sets padding:10px; border-top:none. */
html body .modal-body {
  padding: 16px 24px;
  color: var(--m-text);
  font-size: var(--m-fs);
  line-height: 1.5;
}
html body .modal-header + .modal-body { padding-top: 20px; }
html body .modal-footer {
  padding: 8px 24px 20px;
  text-align: right;
  border-top: 0;
}
html body .modal-footer .btn + .btn { margin-left: 8px; }
html body .modal-footer .btn-group .btn + .btn { margin-left: -1px; }

/* Label / value rows: detail modals render readonly form controls
   (transaction/transaction.html etc.). Labels are captions; readonly
   values read as text on a quiet outlined field. */
html body .modal-body label,
html body .modal-body .control-label {
  margin-bottom: 4px;
  font-size: var(--m-fs-xs);
  font-weight: 400;
  color: var(--m-text-2);
}
html body .modal-body .form-group { margin-bottom: 12px; }
html body .modal-body .form-control[readonly],
html body .modal-body .form-control[readonly]:hover {
  color: var(--m-text);
  background-color: var(--m-surface-2);
  border-color: var(--m-divider);
  box-shadow: none;
  cursor: default;
}
html body .modal-body dl.dl-horizontal,
html body .modal-body dl { margin: 0; }
html body .modal-body dl > dt {
  padding: 8px 0;
  font-weight: 400;
  color: var(--m-text-2);
  text-align: left;
}
html body .modal-body dl > dd {
  padding: 8px 0;
  color: var(--m-text);
  text-align: right;
  border-bottom: 1px solid var(--m-divider);
}
html body .modal-body dl.dl-horizontal > dt { border-bottom: 1px solid var(--m-divider); margin: 0; }
html body .modal-body .table-batch,
html body .modal-body .dataTables_wrapper { margin-top: 4px; }

/* Notification popup (dashboard/notification.details.html): centered
   icon, title, body and the full-width "Got it" button */
html body .modal-content > div > .text-center > .modal-title { padding: 0 48px; }
html body .modal-content > div > .text-center:last-child { padding: 0 24px 24px; }
html body .modal-content .notifications-body-display { color: var(--m-text-2); }
html body .modal-content .btn-block { border-radius: var(--m-radius); }


/* =====================================================================
   4. TABS AND PILLS
   ===================================================================== */

/* ---------- 4.1 Tabs -------------------------------------------------
   .nav.nav-tabs > li(.active|.disabled) > a: partials/include/
   contentviewer.html and uib-tabset (ul.nav.nav-tabs > li.uib-tab >
   a.nav-link). MUI tabs: no boxes, 14px medium sentence case, muted
   until active, active = primary text + 2px primary indicator. */
html body .nav-tabs {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--m-divider);
}
html body .nav-tabs > li { margin-bottom: -1px; }
html body .nav-tabs > li > a,
html body .nav-tabs > li > a:hover,
html body .nav-tabs > li > a:focus {
  min-height: 48px;
  margin: 0;
  padding: 13px 16px 11px;
  font-family: var(--m-font);
  font-size: var(--m-fs);
  font-weight: 500;
  line-height: 24px;
  color: var(--m-text-2);
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
html body .nav-tabs > li > a:hover { color: var(--m-text); background-color: var(--m-primary-4); }
html body .nav-tabs > li.active > a,
html body .nav-tabs > li.active > a:hover,
html body .nav-tabs > li.active > a:focus {
  color: var(--m-primary);
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--m-primary);
}
html body .nav-tabs > li.disabled > a,
html body .nav-tabs > li.disabled > a:hover { color: var(--m-text-disabled); background-color: transparent; }
html body .nav-tabs > li > a:focus-visible { outline: none; box-shadow: inset var(--m-focus-ring); }
html body .nav-tabs.nav-justified > li > a { border-bottom: 2px solid transparent; }
html body .nav-tabs.nav-justified > .active > a { border-bottom-color: var(--m-primary); }
html body .tab-content > .tab-pane { padding-top: 0; }

/* ---------- 4.2 Pills ------------------------------------------------
   .nav-pills generic. Excludes the dark content-viewer toolbar
   (daascontentviewer .scx-cv-toolbar .nav-pills), which keeps its own
   app.css look on a black surface. */
html body .nav-pills:not(.scx-cv-toolbar .nav-pills) > li > a {
  padding: 6px 16px;
  font-size: var(--m-fs);
  font-weight: 500;
  color: var(--m-text-2);
  border-radius: var(--m-radius-pill);
}
html body .nav-pills:not(.scx-cv-toolbar .nav-pills) > li > a:hover { color: var(--m-text); background-color: var(--m-hover); }
html body .nav-pills:not(.scx-cv-toolbar .nav-pills) > li.active > a,
html body .nav-pills:not(.scx-cv-toolbar .nav-pills) > li.active > a:hover,
html body .nav-pills:not(.scx-cv-toolbar .nav-pills) > li.active > a:focus {
  color: var(--m-primary);
  background-color: var(--m-primary-8);
}
html body .nav-pills > li > a:focus-visible { outline: none; box-shadow: var(--m-focus-ring); }


/* =====================================================================
   5. LIST GROUPS (outside the sidebar), BREADCRUMB, PAGER
   ===================================================================== */

/* ---------- 5.1 List group -------------------------------------------
   Any .list-group EXCEPT the left menu (.sidebar .list-group,
   partials/include/leftmenu.html), which the shell part owns. MUI List. */
html body .list-group:not(.sidebar .list-group) {
  margin-bottom: 16px;
  background-color: var(--m-surface);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
  box-shadow: none;
}
html body .list-group:not(.sidebar .list-group) > .list-group-item {
  margin-bottom: 0;
  padding: 12px 16px;
  font-size: var(--m-fs);
  color: var(--m-text);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--m-divider);
  border-radius: 0;
}
html body .list-group:not(.sidebar .list-group) > .list-group-item:last-child { border-bottom: 0; }
html body .list-group:not(.sidebar .list-group) > a.list-group-item:hover,
html body .list-group:not(.sidebar .list-group) > button.list-group-item:hover { background-color: var(--m-hover); }
html body .list-group:not(.sidebar .list-group) > .list-group-item.active,
html body .list-group:not(.sidebar .list-group) > .list-group-item.active:hover,
html body .list-group:not(.sidebar .list-group) > .list-group-item.active:focus {
  color: var(--m-primary);
  background-color: var(--m-primary-8);
  border-color: var(--m-divider);
}
html body .list-group:not(.sidebar .list-group) > .list-group-item.disabled { color: var(--m-text-disabled); background-color: transparent; }
html body .list-group:not(.sidebar .list-group) .list-group-item-heading { font-weight: 500; font-size: var(--m-fs-md); }
html body .list-group:not(.sidebar .list-group) .list-group-item-text { color: var(--m-text-2); }

/* ---------- 5.2 Breadcrumb (MUI Breadcrumbs) ------------------------- */
html body .breadcrumb {
  padding: 0;
  margin-bottom: 16px;
  font-size: var(--m-fs);
  background: transparent;
  border-radius: 0;
}
html body .breadcrumb > li { color: var(--m-text-2); }
html body .breadcrumb > li > a { color: var(--m-text-2); }
html body .breadcrumb > li > a:hover { color: var(--m-text); text-decoration: underline; }
html body .breadcrumb > li + li::before { padding: 0 8px; color: var(--m-text-disabled); }
html body .breadcrumb > .active { color: var(--m-text); }

/* ---------- 5.3 Pager (.pager) ---------------------------------------- */
html body .pager li > a,
html body .pager li > span {
  padding: 6px 16px;
  font-size: var(--m-fs-sm);
  font-weight: 500;
  color: var(--m-primary);
  background-color: transparent;
  border: 1px solid var(--m-primary-50);
  border-radius: var(--m-radius);
}
html body .pager li > a:hover,
html body .pager li > a:focus { background-color: var(--m-primary-4); border-color: var(--m-primary); }
html body .pager .disabled > a,
html body .pager .disabled > a:hover,
html body .pager .disabled > span {
  color: var(--m-text-disabled);
  background-color: transparent;
  border-color: var(--m-disabled-bg);
}


/* =====================================================================
   6. WIZARD (mgo-angular-wizard) -> MUI STEPPER
   ===================================================================== */

/* partials/maintenance/client.import.html <wizard> / <wz-step>; template
   from js/vendors/angular-wizard.min.js: ul.steps-indicator.steps-N >
   li(.default|.current|.done|.editing) > a. css/angular-wizard.min.css
   draws a 14px dot (a::before) and a 1px line (ul::before). We draw a
   24px numbered circle (CSS counter), a check when done, and a label
   under it. pointer-events rules of the vendor CSS are untouched. */
html body .steps-indicator {
  position: relative;
  height: auto;
  margin: 24px 0 8px;
  padding: 0;
  counter-reset: m-step;
}
html body .steps-indicator::after { content: ""; display: table; clear: both; }
html body .steps-indicator::before {
  top: 12px;
  height: 1px;
  background-color: var(--m-disabled);
}
html body .steps-indicator li {
  padding-top: 32px;
  line-height: 20px;
  counter-increment: m-step;
}
html body .steps-indicator li a {
  font-family: var(--m-font);
  font-size: var(--m-fs);
  font-weight: 400;
  text-transform: none;
  color: var(--m-text-2);
}
html body .steps-indicator li a:hover,
html body .steps-indicator li.default a:hover { color: var(--m-text); }
html body .steps-indicator li a::before,
html body .device-csv-import .steps-indicator li a::before {
  content: counter(m-step);
  top: 0;
  left: calc(50% - 12px);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--m-fs-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--m-surface);
  background-color: var(--m-text-disabled);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--m-surface);   /* gap between circle and connector */
}
html body .steps-indicator li.current a,
html body .steps-indicator li.editing a { color: var(--m-text); font-weight: 500; }
html body .steps-indicator li.done a { color: var(--m-text); }
/* active step (css/app.css .device-csv-import green override beaten) */
html body .steps-indicator li.current a::before,
html body .steps-indicator li.editing a::before,
html body .device-csv-import .steps-indicator li.current a::before,
html body .device-csv-import .steps-indicator li.editing a::before {
  background-color: var(--m-primary);
  box-shadow: 0 0 0 4px var(--m-surface);
}
html body .steps-indicator li.done a::before,
html body .device-csv-import .steps-indicator li.done a::before {
  content: "\2713";
  font-size: var(--m-fs);
  background-color: var(--m-primary);
}
html body wizard .steps { padding-top: 8px; }


/* =====================================================================
   7. THIRD-PARTY WIDGET CHROME (light touch)
   ===================================================================== */

/* ---------- 7.1 jqTree -----------------------------------------------
   Partner tree dropdown: partials/include/partner.select.tree.html
   (.tree-dropdown .dropdown-menu > .tree-root > ul.jqtree-tree),
   css/jqtree.css + css/app.css ~262. */
html body ul.jqtree-tree { font-size: var(--m-fs); color: var(--m-text); }
html body ul.jqtree-tree .jqtree-element {
  padding: 4px 8px;
  border-radius: var(--m-radius);
}
html body ul.jqtree-tree .jqtree-element:hover { background-color: var(--m-hover); }
html body ul.jqtree-tree .jqtree-title { color: var(--m-text); }
html body ul.jqtree-tree .jqtree-toggler { color: var(--m-text-2); }
html body ul.jqtree-tree .jqtree-toggler:hover { color: var(--m-text); }
html body ul.jqtree-tree li.jqtree-selected > .jqtree-element,
html body ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {
  background: var(--m-primary-8);
  text-shadow: none;
}
html body ul.jqtree-tree li.jqtree-selected > .jqtree-element .jqtree-title { color: var(--m-primary); font-weight: 500; }
html body .highlight-node > .jqtree-element > .jqtree-title { font-weight: 500; color: var(--m-primary); }
html body .tree-dropdown .tree-root { padding: 8px; }
html body .tree-dropdown #partner-active { padding: 8px 8px 4px; font-weight: 400; color: var(--m-text-2); }

/* ---------- 7.2 Quill (snow) -----------------------------------------
   partials/manage/notificationDetails.html <ng-quill-editor>:
   .ql-toolbar.ql-snow + .ql-container.ql-snow (height kept, css/app.css). */
html body .ql-toolbar.ql-snow {
  font-family: var(--m-font);
  background-color: var(--m-surface-2);
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius) var(--m-radius) 0 0;
}
html body .ql-toolbar.ql-snow + .ql-container.ql-snow,
html body .ql-container.ql-snow {
  font-family: var(--m-font);
  font-size: var(--m-fs);
  border: 1px solid var(--m-outline);
  border-top: 0;
  border-radius: 0 0 var(--m-radius) var(--m-radius);
}
html body .ql-container.ql-snow:focus-within { border-color: var(--m-primary); box-shadow: 0 0 0 1px var(--m-primary); }
html body .ql-snow.ql-toolbar button:hover,
html body .ql-snow.ql-toolbar button:focus,
html body .ql-snow.ql-toolbar button.ql-active,
html body .ql-snow.ql-toolbar .ql-picker-label:hover,
html body .ql-snow.ql-toolbar .ql-picker-label.ql-active,
html body .ql-snow.ql-toolbar .ql-picker-item:hover,
html body .ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: var(--m-primary); }
html body .ql-snow.ql-toolbar button:hover .ql-stroke,
html body .ql-snow.ql-toolbar button:focus .ql-stroke,
html body .ql-snow.ql-toolbar button.ql-active .ql-stroke,
html body .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
html body .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke { stroke: var(--m-primary); }
html body .ql-snow.ql-toolbar button:hover .ql-fill,
html body .ql-snow.ql-toolbar button:focus .ql-fill,
html body .ql-snow.ql-toolbar button.ql-active .ql-fill,
html body .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
html body .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill { fill: var(--m-primary); }
html body .ql-snow .ql-picker-options { border-radius: var(--m-radius); box-shadow: var(--m-shadow-8); }
html body .ql-snow .ql-tooltip { border-radius: var(--m-radius); box-shadow: var(--m-shadow-8); border-color: var(--m-divider); color: var(--m-text); }
html body .ql-snow a { color: var(--m-primary); }

/* ---------- 7.3 jsoneditor -------------------------------------------
   partials/file-process/details.html, gateway-template/details.html:
   .jsoneditor (border #3883fa) > .jsoneditor-menu (bg #3883fa, white
   sprite icons, so the bar stays dark: recolored to primary). */
/* Frame, toolbar, code area and status bar: see 3.10 (36-code-editor.css). */
html body .jsoneditor-modal .pico-modal-header { background: var(--m-primary); font-family: var(--m-font); }
html body .jsoneditor-modal a { color: var(--m-primary); }
html body .jsoneditor-modal .selectr-selected .selectr-tag,
html body .jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
html body .jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
  background-color: var(--m-primary);
  border-color: var(--m-primary);
}

/* ---------- 7.4 Charts (nvd3 / angular-chart) ------------------------
   partials/reports/proxyTotals.html, tokenizationMetric.html (nvd3
   multiBarChart), dashboard canvas.chart (Chart.js draws on canvas:
   untouched). Merged from reports 43.4 / 43.8 (generic nvd3 parts). */
html body .nvd3 text { font-family: var(--m-font); fill: var(--m-text-2); }
html body .nvd3 .nv-axis line,
html body .nvd3 .nv-axis path { stroke: var(--m-divider); }
html body .nvd3 .nv-axis .tick line { stroke: var(--m-divider); stroke-opacity: .7; }
html body .nvd3 .nv-axis .nv-axislabel { font-size: var(--m-fs-xs); fill: var(--m-text-2); }
html body .nvd3 .nv-axis .tick text { font-size: 11px; }
/* y-axis max label (nv-axisMaxMin) collides with the top tick in both looks;
   nvd3 draws it, so it is only de-emphasised (GAP: showMaxMin:false) */
html body .nvd3 .nv-y .nv-axisMaxMin text { font-weight: 400; fill: var(--m-text-disabled); }
html body .nvd3 .nv-legend-text { fill: var(--m-text); }
/* bars: the controllers set color '#1f77b4', which nvd3 writes as an INLINE
   style fill/stroke on each rect.nv-bar, so !important is needed */
html body .nvd3 .nv-multibar .nv-groups rect.nv-bar {
  fill: var(--m-primary) !important;      /* beats nvd3 inline style fill */
  stroke: var(--m-primary) !important;    /* beats nvd3 inline style stroke */
  fill-opacity: .85;
  stroke-opacity: 0;
}
html body .nvd3 .nv-multibar .nv-groups rect.nv-bar:hover { fill: var(--m-primary-dark) !important; fill-opacity: 1; } /* !important: inline style */
/* last x-axis tick label (e.g. 09/30/2026) was clipped by the svg box */
html body nvd3 > svg.nvd3-svg { overflow: visible; }
/* empty state: nvd3 draws text.nv-noData "No Data Available." bold 18px
   black; match the grid empty row (muted 14px regular) */
html body nvd3 text.nvd3.nv-noData { font-family: var(--m-font); font-size: var(--m-fs); font-weight: 400; fill: var(--m-text-2); }
/* tooltip: nvd3 appends div.nvtooltip to <html>, NOT <body>, so an
   "html body .nvtooltip" selector never matches (found by reports sweep).
   Report contentGenerator markup: center > h4 + ul (inline padding:1rem). */
html > .nvtooltip {
  padding: 8px 12px;
  font-family: var(--m-font);
  font-size: var(--m-fs-xs);
  color: var(--m-surface);
  background: var(--m-snackbar);
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-8);
}
html > .nvtooltip table td,
html > .nvtooltip h3 { color: var(--m-surface); background: transparent; border: 0; }
html > .nvtooltip > center > h4 { margin: 0 0 4px; font-family: var(--m-font); font-size: var(--m-fs-sm); font-weight: 500; color: inherit; }
html > .nvtooltip > ul { margin: 0; padding: 0 !important; } /* !important: inline style padding: 1rem (proxyTotals) */
html body .chart-legend,
html body .bar-legend,
html body .line-legend,
html body .pie-legend { font-family: var(--m-font); font-size: var(--m-fs-xs); color: var(--m-text-2); }


/* =====================================================================
   8. ERROR PAGES
   ===================================================================== */

/* ---------- 8.1 401/403/404 (<daaserrorpage>) ------------------------
   partials/401.html, 403.html, 404.html -> partials/error.html:
   .page-error-links-wrapper > (logo link, .page-error-links > h1 caption,
   p description, ul > li > a links) + .page-error-decor (Bluefin gradient
   art, kept). Body gets .error-page on these routes. MUI empty/error
   state: Poppins heading, muted description, first link as a contained
   primary button and the others as text buttons. */
html body.error-page daaserrorpage {
  min-height: 100vh;
  font-family: var(--m-font);
  background-color: var(--m-surface);
}
html body.error-page daaserrorpage .page-error-links-wrapper { padding: 32px 48px; }
html body.error-page daaserrorpage .page-error-links { max-width: 640px; }
html body.error-page daaserrorpage .page-error-links h1 {
  margin: 0 0 12px;
  font-family: var(--m-font-head);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--m-text);
}
html body.error-page daaserrorpage .page-error-links p {
  margin: 0;
  font-size: var(--m-fs-md);
  line-height: 1.5;
  color: var(--m-text-2);
}
html body.error-page daaserrorpage .page-error-links ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}
html body.error-page daaserrorpage .page-error-links ul li { margin: 0; }
html body.error-page daaserrorpage .page-error-links ul li a {
  display: inline-flex;
  align-items: center;
  height: var(--m-btn-h);
  padding: 0 12px;
  font-size: var(--m-fs);
  font-weight: 500;
  letter-spacing: var(--m-btn-tracking);
  text-transform: var(--m-btn-transform);
  color: var(--m-primary);
  border-radius: var(--m-radius);
  text-decoration: none;
}
html body.error-page daaserrorpage .page-error-links ul li a:hover { background-color: var(--m-primary-4); }
html body.error-page daaserrorpage .page-error-links ul li:first-child a {
  padding: 0 16px;
  color: var(--m-surface);
  background-color: var(--m-primary);
  box-shadow: var(--m-shadow-2);
}
html body.error-page daaserrorpage .page-error-links ul li:first-child a:hover { background-color: var(--m-primary-dark); }
html body.error-page daaserrorpage .page-error-links ul li a:focus-visible { outline: none; box-shadow: var(--m-focus-ring); }

/* ---------- 8.2 Server error page (public/error.ejs) -----------------
   body > h4.text-center + .clearfix + .footer. NOTE: error.ejs only links
   bootstrap.min.css and app.css, so these rules apply only once the
   modern stylesheet is linked there (see report GAP). */
html body:has(> h4.text-center + .clearfix + .footer) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--m-font);
  background-color: var(--m-surface-2);
}
html body:has(> h4.text-center + .clearfix + .footer) > h4.text-center {
  margin: 0 16px 24px;
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h5);
  font-weight: 400;
  color: var(--m-text);
}
html body:has(> h4.text-center + .clearfix + .footer) > .footer {
  font-size: var(--m-fs-xs);
  color: var(--m-text-2);
  background: transparent;
  border-top: 0;
  text-align: center;
}

/* 1.9 Grid cell wrapping (all <daastable> grids: daastable forces scrollX,
   js/ext/jquery.dataTables.ext.js).
   Cells wrap at spaces (no ellipsis: an admin grid must not hide values such
   as Role "System Admin"). break-word (not anywhere) keeps each column at
   least as wide as its longest word when DataTables measures, so words are
   never split; a value longer than the whole column still wraps instead of
   spilling into the next fixed-width column.
   Wide grids still scroll horizontally via the column-count min-width (1.10).
   Header/body alignment comes from table-layout:fixed, not from nowrap. */
html body .dataTables_scrollBody > table.dataTable > tbody > tr > td { white-space: normal; overflow-wrap: break-word; }

/* 1.10 Keep the split header aligned with the body (reported on cert:
   manage/proxy-configurations, "Client" header ~85px right of its data).
   daastable forces scrollX, so DataTables renders the header as a separate
   table (.dataTables_scrollHead) with px widths frozen at init, while the
   body table is width:100%. When the content area changes width after init
   (the modern drawer appears once the authenticated modules lazy-load, or
   any resize), the two drift apart.
   Fix: both tables use table-layout:fixed at 100% of the same container.
   Fixed layout takes column widths from the first row, which DataTables
   writes identically into both (visible header + the .dataTables_sizing
   header copy in the body), so both distribute width the same way at any
   container width. A column-count-based min-width keeps wide grids
   scrolling horizontally (DataTables syncs scrollLeft) instead of
   squeezing.
   !important: DataTables sets these widths as inline styles. */
html body .dataTables_scroll .dataTables_scrollHeadInner { width: 100% !important; }
/* Only the two real tables (direct children). DataTables measures columns
   on a hidden clone inside a holder div in .dataTables_scrollBody
   (_fnCalculateColumnWidths); that clone must keep auto layout, or the
   measured widths come out equal-ish and overflow the card. */
html body .dataTables_scroll :is(.dataTables_scrollHeadInner, .dataTables_scrollBody) > table.dataTable {
  --m-grid-cols: 5;
  table-layout: fixed;
  width: 100% !important;
  min-width: calc(var(--m-grid-cols) * 112px);
}
/* DataTables rounds each measured column width up (<1px each), so the sum
   can land a few px over the card and show a pointless horizontal scrollbar.
   The measuring clone uses the uniform 32px header padding (below); the two
   real tables use 31px on every header cell, so the total drops by one px
   per column. (Trimming one column instead starves its cells: Role
   "System Admin" broke mid-word.) Both real tables get the same value, so
   they stay aligned. !important: must beat the uniform 32px rule below. */
html body .dataTables_scroll :is(.dataTables_scrollHeadInner, .dataTables_scrollBody) > table.dataTable > thead > tr > th { padding-right: 31px !important; }
html body .dataTables_scroll :is(.dataTables_scrollHeadInner, .dataTables_scrollBody) > table.dataTable:has(> thead > tr > :nth-child(6))  { --m-grid-cols: 6; }
html body .dataTables_scroll :is(.dataTables_scrollHeadInner, .dataTables_scrollBody) > table.dataTable:has(> thead > tr > :nth-child(8))  { --m-grid-cols: 8; }
html body .dataTables_scroll :is(.dataTables_scrollHeadInner, .dataTables_scrollBody) > table.dataTable:has(> thead > tr > :nth-child(10)) { --m-grid-cols: 10; }
html body .dataTables_scroll :is(.dataTables_scrollHeadInner, .dataTables_scrollBody) > table.dataTable:has(> thead > tr > :nth-child(12)) { --m-grid-cols: 12; }
html body .dataTables_scroll :is(.dataTables_scrollHeadInner, .dataTables_scrollBody) > table.dataTable:has(> thead > tr > :nth-child(14)) { --m-grid-cols: 14; }
html body .dataTables_scroll :is(.dataTables_scrollHeadInner, .dataTables_scrollBody) > table.dataTable:has(> thead > tr > :nth-child(16)) { --m-grid-cols: 16; }
html body .dataTables_scroll :is(.dataTables_scrollHeadInner, .dataTables_scrollBody) > table.dataTable:has(> thead > tr > :nth-child(18)) { --m-grid-cols: 18; }
/* Headers wrap only at spaces. (overflow-wrap:anywhere here also reached
   DataTables' measuring clone and let it squeeze columns below the longest
   header word: "Published" stacked one letter per line.) */
/* Same right padding on every header cell, sortable or not: the body's
   .dataTables_sizing copy can carry a different sort class than the visible
   header cell (seen on logs/transactions col 0: sorting vs sorting_disabled),
   and fixed layout sizes columns from that row's width + padding. */
/* Any depth (incl. DataTables' measuring clone) so the measured widths include it. */
html body .dataTables_scroll table.dataTable > thead > tr > th:is(.sorting, .sorting_asc, .sorting_desc, .sorting_disabled, .sorting_asc_disabled, .sorting_desc_disabled, :not([class*="sorting"])) { padding-right: 32px; }

/* Empty-state row spans all columns; let its message wrap and center */
html body .dataTables_scrollBody > table.dataTable > tbody > tr > td.dataTables_empty { white-space: normal; }

/* 2.3b Dashboard tiles wrap instead of shrinking (partials/dashboard/
   dashboard.html .container-fluid > .col-sm-3.border floats). In the
   modern frame (drawer) four 25% tiles are ~180px at 1024px and clip the
   "Templates count :" labels (span.wide, width:74% in app.css). Flex-wrap
   with a 260px minimum; the tile itself is unchanged and Angular's
   ng-if/ng-hide on tiles keeps working (no display set on the tiles). */
html body .container-fluid:has(> .col-sm-3.border) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
html body .container-fluid:has(> .col-sm-3.border)::before,
html body .container-fluid:has(> .col-sm-3.border)::after { display: none; } /* Bootstrap clearfix pseudo-elements would become flex items */
html body .container-fluid > .col-sm-3.border {
  float: none;
  flex: 0 1 25%;
  min-width: 260px;
}

/* ===== part: 30-pages.css ===== */
/* =====================================================================
   3. Pages: auth / logged-out pages and page-frame bits (modern.css)
   Applies at all widths. These pages have no .app-header, so nothing here
   depends on body classes or on the shell. Logo stays the theme's
   .login-logo background (Bluefin or partner); only its box is placed.
   Reference: New Design/Screenshot 2026-10-01 141756.png (login).
   ===================================================================== */

:root {
  --m-auth-card-w: 360px;   /* login card width (P2PE ~360) */
  --m-auth-field-h: 51px;   /* login fields: measured from the P2PE Manager login (51px outlined field) */
}

/* ---------- 3.1 Page title ---------------------------------------------
   Every content page renders its title as the first <legend> of the
   page's outer <fieldset> (partials/manage/*.html, reports/*.html,
   settings/*.html, dashboard/contact.html, documentation/documents.html,
   virtualTerminal/virtualTerminal.html ...), inside
   .main (section wrappers) or div.wrapper.col-md-12 (no sub-nav).
   Matched up to three levels deep and never inside another fieldset, so
   nested section legends keep the component styling.
   P2PE title block: Poppins 20px regular + divider. */
html body .app-content :is(.main, .wrapper.col-md-12) > fieldset > legend,
html body .app-content :is(.main, .wrapper.col-md-12) > :not(fieldset) > fieldset > legend,
html body .app-content :is(.main, .wrapper.col-md-12) > :not(fieldset) > :not(fieldset) > fieldset > legend {
  margin: 0 0 24px 0;
  padding: 0 0 12px 0;
  border: 0;
  border-bottom: 1px solid var(--m-divider);
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 400;
  line-height: 1.4;
  color: var(--m-text);
}

/* ---------- 3.2 Login card ---------------------------------------------
   partials/login.html > <daasauth> > partials/include/auth.form.html:
     form.login-form.form-horizontal.form-authentication-basic
     form.form-horizontal.form-authentication-tfa
     form.form-horizontal.form-authentication-tfa-recovery
   each: .login-logo, .form-group(.col-sm-4.control-label + .col-sm-4 > h4),
   .form-group(label.col-sm-4 + .col-sm-4 > input), .form-group(buttons).
   Also partials/settings/forgot.html form[name=forgotPasswordForm]
   (.container > .col-md-8.col-md-offset-2 > form, col-sm-3/9 grid).
   The form is the card; the logo sits above it (absolute). */
html body .app-content daasauth > form:is(.form-authentication-basic, .form-authentication-tfa, .form-authentication-tfa-recovery),
html body .app-content form[name="forgotPasswordForm"] {
  position: relative;
  width: calc(100% - 32px);
  max-width: var(--m-auth-card-w);
  margin: 201px auto 48px auto;   /* card top as on the P2PE Manager login */
  padding: 24px;
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
  background: var(--m-surface);
  box-shadow: var(--m-shadow-8);
  font-family: var(--m-font);
}

/* forgot.html column wrappers: let the card center itself */
html body .app-content > .container:has(> div > form[name="forgotPasswordForm"]) {
  width: auto;
  max-width: none;
}
html body .app-content > .container:has(> div > form[name="forgotPasswordForm"]) > div {
  float: none;
  width: auto;
  margin-left: 0;
  padding: 0;
}

/* Logo above the card: theme sets .login-logo{background:url(logo) center; height:70px} */
html body .app-content daasauth > form > .login-logo,
html body .app-content form[name="forgotPasswordForm"] > .login-logo {
  position: absolute;
  top: -101px;                     /* logo glyph 45px above the card, as P2PE */
  left: 0;
  right: 0;
  height: 70px;
}
/* Bluefin logo at the P2PE Manager login size (glyph 219x40; logo.png is
   223x61 with padding, drawn 1.11x). Bluefin hosts only: partner logos keep
   their natural size. */
html:has(link[href*="app.theme.bluefin.css"]) body .app-content :is(daasauth > form, form[name="forgotPasswordForm"]) > .login-logo {
  background-size: 248px auto;
}

/* Flatten the horizontal grid inside the card (all widths) */
html body :is(.app-content, .modal-body) daasauth > form .form-group,
html body .app-content form[name="forgotPasswordForm"] .form-group {
  margin: 0 0 16px 0;
}
html body :is(.app-content, .modal-body) daasauth > form .form-group > [class*="col-"],
html body .app-content form[name="forgotPasswordForm"] .form-group > [class*="col-"] {
  float: none;
  width: auto;
  margin-left: 0;
  padding: 0;
}
/* Empty spacer cells (div.col-sm-N.control-label with no content) */
html body :is(.app-content, .modal-body) daasauth > form .form-group > div.control-label:empty,
html body .app-content form[name="forgotPasswordForm"] .form-group > div.control-label:empty {
  display: none;
}
/* Field labels: left aligned, small, above the field */
html body :is(.app-content, .modal-body) daasauth > form .form-group > label.control-label,
html body .app-content form[name="forgotPasswordForm"] .form-group > label.control-label {
  display: block;
  margin: 0 0 4px 0;
  padding: 0;
  text-align: left;
  font-size: var(--m-fs-xs);
  font-weight: 400;
  color: var(--m-text-2);
}

/* Heading h4 ("Portal Login", "Two-factor authentication", "Forgot password") */
html body :is(.app-content, .modal-body) daasauth > form .form-group h4,
html body .app-content form[name="forgotPasswordForm"] .form-group h4 {
  margin: 0 0 8px 0;
  font-family: var(--m-font-head);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--m-text);
}

/* Fields: full width, 48px */
html body .app-content daasauth > form .form-control,
html body .app-content form[name="forgotPasswordForm"] .form-control {
  width: 100%;
  height: var(--m-auth-field-h);
  font-size: var(--m-fs-md);
}

/* Helper text under TFA fields: <sub class="text-muted"> */
html body :is(.app-content, .modal-body) daasauth > form sub.text-muted {
  display: block;
  margin-top: 6px;
  font-size: var(--m-fs-xs);
  line-height: 1.5;
  vertical-align: baseline;
  color: var(--m-text-2);
}

/* Buttons: daasbutton > button.btn.btn-primary (partials/include/button.html)
   full width; secondary buttons (Cancel / Close) full width below */
html body :is(.app-content, .modal-body) daasauth > form daasbutton,
html body .app-content form[name="forgotPasswordForm"] daasbutton {
  display: block;
}
html body :is(.app-content, .modal-body) daasauth > form daasbutton > .btn,
html body .app-content form[name="forgotPasswordForm"] daasbutton > .btn {
  width: 100%;
  height: var(--m-btn-h-lg);
}
html body :is(.app-content, .modal-body) daasauth > form .form-group :is(input, button).btn-default,
html body .app-content form[name="forgotPasswordForm"] .form-group button.btn-default {
  display: block;
  width: 100%;
  margin-top: 8px;
}
/* "Forgot password" a.btn.btn-default[href="/forgot"]: shown as a link below */
html body .app-content daasauth > form a.btn[href="/forgot"] {
  display: inline-block;
  height: auto;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--m-primary);
  font-size: var(--m-fs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
}
html body .app-content daasauth > form a.btn[href="/forgot"]:hover {
  color: var(--m-primary-dark);
  background: transparent;
}
/* TFA "Enter a two-factor recovery code" (a.pull-right) */
html body :is(.app-content, .modal-body) daasauth > form.form-authentication-tfa a.pull-right {
  float: none !important;          /* beats Bootstrap .pull-right{float:right!important} */
  display: inline-block;
  margin-top: 16px;
  color: var(--m-primary);
  text-decoration: underline;
}

/* daasform appends "* indicates required entry" to every form. On the sign-in
   cards (login, TFA, recovery, forgot password, re-login modal) every field is
   required, so the note is noise: hidden (user request). The asterisks stay. */
html body :is(.app-content, .modal-body) daasauth > form .required-info,
html body .app-content form[name="forgotPasswordForm"] .required-info {
  display: none;
}

/* <daasvalidsummary> after the forms: same width as the card */
html body .app-content daasauth > daasvalidsummary > .validation-summary {
  width: calc(100% - 32px);
  max-width: var(--m-auth-card-w);
  margin: -32px auto 48px auto;
}

/* ---------- 3.3 Session re-login modal ---------------------------------
   partials/include/auth.dialogue.html: .modal-body > daasauth(allowcancel)
   Same stacked form, no card chrome; logo static and centered. */
html body .modal-body daasauth > form {
  padding: 8px 8px 0 8px;
}
html body .modal-body daasauth > form > .login-logo {
  height: 56px;
  margin-bottom: 16px;
  background-size: contain;
}
html body .modal-body daasauth > form .form-control {
  width: 100%;
  height: var(--m-ctl-h);
}

/* ---------- 3.4 Password expired ----------------------------------------
   partials/settings/expired.html: div.wrapper.col-md-12 > fieldset >
   legend "Password has expired" + form[name=changePasswordForm] (stacked).
   (account.html reuses the form name inside <daassettings>; the
   fieldset-parent match keeps it out.) */
html body .app-content > .wrapper.col-md-12 > fieldset:has(> form[name="changePasswordForm"]) {
  width: calc(100% - 32px);
  max-width: 400px;
  margin: 48px auto;
  padding: 24px;
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
  background: var(--m-surface);
  box-shadow: var(--m-shadow-2);
}
html body .app-content > .wrapper.col-md-12 > fieldset:has(> form[name="changePasswordForm"]) > legend {
  float: left;                     /* keeps the legend inside the card border */
  width: 100%;
  margin: 0 0 24px 0;
  padding: 0;
  border: 0;
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 400;
  color: var(--m-text);
}
html body .app-content > .wrapper.col-md-12 > fieldset:has(> form[name="changePasswordForm"]) > form {
  clear: both;
}
html body .app-content > .wrapper.col-md-12 > fieldset > form[name="changePasswordForm"] .form-control {
  height: var(--m-auth-field-h);
}
html body .app-content > .wrapper.col-md-12 > fieldset > form[name="changePasswordForm"] daasbutton {
  display: block;
  margin-top: 8px;
}
html body .app-content > .wrapper.col-md-12 > fieldset > form[name="changePasswordForm"] daasbutton > .btn {
  width: 100%;
  height: var(--m-btn-h-lg);
}

/* ---------- 3.5 EULA accept ----------------------------------------------
   partials/settings/eula.html: form.app-user-eula > daassettings > pre >
   div[ng-bind-html] + div[ng-show] > button.app-eula-action x2 (Accept,
   Reject; both carry .app-eula-accept). app.css: pre{max-height:400px;
   padding:30px; Verdana} .app-eula-action{width:49%}. */
html body form.app-user-eula pre {
  max-height: 60vh;
  padding: 24px;
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
  background: var(--m-surface);
  color: var(--m-text);
  font-family: var(--m-font);
  font-size: var(--m-fs);
  line-height: 1.6;
}
html body form.app-user-eula .app-eula-action {
  width: calc(50% - 6px);
  height: var(--m-btn-h);
  margin-top: 16px;
  padding: 0 16px;
  border: 1px solid var(--m-primary-50);
  border-radius: var(--m-radius);
  background: var(--m-surface);
  color: var(--m-primary);
  font-family: var(--m-font);
  font-size: var(--m-fs);
  font-weight: 500;
  letter-spacing: var(--m-btn-tracking);
  text-transform: var(--m-btn-transform);
  cursor: pointer;
}
html body form.app-user-eula .app-eula-action:hover {
  background: var(--m-primary-4);
}
html body form.app-user-eula .app-eula-action:first-child {
  border-color: var(--m-primary);
  background: var(--m-primary);
  color: var(--m-surface);
}
html body form.app-user-eula .app-eula-action:first-child:hover {
  border-color: var(--m-primary-dark);
  background: var(--m-primary-dark);
}
html body form.app-user-eula .app-eula-action:focus-visible {
  outline: 0;
  box-shadow: var(--m-focus-ring);
}

/* 3.6 (removed): narrow-screen shell colors moved to modern-layout.css L11. */

/* =====================================================================
   3.7 Virtual Terminal template grid
   partials/virtualTerminal/virtualTerminal.html, fieldset.terminal-container
   (shown once a template is picked). Reported on cert: field names sat at
   the top of each row in caption size, BFID input (col-md-9) didn't line
   up with the Tokenize/Detokenize columns (col-md-4 each), Read button in
   a col-md-1, italic column headers, 4px row gaps, and the Omit/Store
   checkboxes overlapped the Tokenize button (col-md-1).
   Layout parts only at >=992px (where Bootstrap's col-md-* sit side by
   side); below that the columns stack as before. Legacy: css/app.css
   "virtual terminal" block.
   ===================================================================== */
html body fieldset.terminal-container {
  margin-top: 8px;
  padding: 24px;
  background: var(--m-surface);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
}
/* Field names: body text, not 12px caption */
html body .terminal-container .terminal-fields-value label,
html body .terminal-container :is(.terminal-bfid, .terminal-response) label {
  margin: 0;
  font-size: var(--m-fs);
  font-weight: 400;
  color: var(--m-text);
}
html body .terminal-container :is(.terminal-bfid, .terminal-response) label { font-weight: 500; }
/* Column headers: grid-header style (app.css sets italic) */
html body .terminal-container .terminal-fields-header label {
  margin: 0;
  font-size: var(--m-fs-sm);
  font-style: normal;
  font-weight: 500;
  color: var(--m-text-2);
}
/* Omit / Store checkboxes */
html body .terminal-container .terminal-actions label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--m-fs);
  color: var(--m-text);
  line-height: 28px;
}
html body .terminal-container .terminal-response span { color: var(--m-text-2); }

@media (min-width: 992px) {
  html body .terminal-container > .row {
    display: flex;
    align-items: center;
    padding-top: 0;
  }
  html body .terminal-container > .row::before,
  html body .terminal-container > .row::after { content: none; } /* Bootstrap clearfix would become flex items */
  html body .terminal-container > .row > [class*="col-"] { float: none; }

  html body .terminal-container > .terminal-bfid { margin-bottom: 24px; }
  html body .terminal-container > .terminal-fields-header { margin-bottom: 8px; }
  html body .terminal-container > .terminal-fields-value { margin-top: 8px; }
  html body .terminal-container > .terminal-actions { margin-top: 16px; }
  html body .terminal-container > .terminal-response { margin-top: 24px; align-items: flex-start; }

  /* BFID input spans both value columns (2 x col-md-4); Read sits beside it */
  html body .terminal-container > .terminal-bfid > .col-md-9 { width: 66.66667%; }
  html body .terminal-container > .terminal-bfid > .col-md-1 { width: auto; }

  /* Actions: [spacer col-md-2][Tokenize][checkboxes fill the rest of the
     Tokenize column][Detokenize starts at 50%, under its column] */
  html body .terminal-container > .terminal-actions > .col-md-1 { flex: 0 0 auto; width: auto; }
  html body .terminal-container > .terminal-actions > .col-md-3 { flex: 1 1 0; width: auto; min-width: 0; }
  html body .terminal-container > .terminal-actions > .col-md-4 { flex: 0 0 50%; width: 50%; }
}

/* ===== part: 35-template-pages.css ===== */
/* =====================================================================
   3.8 Template details (partials/template/details.html, .template-details)
   Reported on cert: one long run of fieldsets; helper text under radios
   started at the radio's edge instead of under the label; field-template
   rows were separate 2px-bordered strips (app.css .template-fields-row);
   thin add bar.
   ===================================================================== */
/* Section cards on every long detail page (P2PE system-config cards).
   Pattern in the partials: form > fieldset (page title + main fields), then
   one sibling fieldset per section, e.g.
     template/details.html  3D Secure, Detokenization, Network Token, Field
                            Templates, Idempotency, iFrame, Publishing
     manage/partner.html    API Security, <daasuser> Contact Person
                            (include/user.details.html fieldset), Network
                            Token Settings, HSM Key Management Settings
     manage/client.html     <daasuser> Contact Person, Network Token Settings
     manage/user.html       External API Security
     gateway-template/details.html, audit/details.html, systemConfig, ...
   Also: <daasuser> renders its section one level down (form > daasuser >
   fieldset), and systemConfig/systemConfig.html puts each section in its
   own sibling <form> (form ~ form > fieldset).
   Sections after the first become cards; the first keeps the page title.
   Scoped to .app-content (not modals); a section that holds a data grid is
   skipped (the grid is already a card). The legend is floated so it renders
   inside the card padding (a legend otherwise sits on the top border). */
html body .app-content :is(form:not(.form-inline, .form-horizontal) > fieldset ~ fieldset, form:not(.form-inline, .form-horizontal) > fieldset ~ daasuser > fieldset, form:not(.form-inline, .form-horizontal) ~ form:not(.form-inline, .form-horizontal) > fieldset):not(:has(.dataTables_wrapper)) {
  margin: 0 0 24px 0;
  padding: 24px;
  background: var(--m-surface);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
}
html body .app-content form:not(.form-inline, .form-horizontal) > fieldset:first-of-type { margin-bottom: 24px; }
/* The first section (page title + main fields) is a card too when the page
   has card sections after it. The title legend must stay ABOVE the card, so
   the card is painted by ::before starting below the title block
   (the legend is floated so it is a normal box; title = 28px line + 12px padding + 1px divider = 41px, then a 24px gap);
   the title is kept to one line so that offset holds. */
html body .app-content :is(form:not(.form-inline, .form-horizontal) > fieldset:first-of-type:is(:has(~ fieldset), :has(~ daasuser > fieldset)), form:not(.form-inline, .form-horizontal):not(form ~ form):has(~ form:not(.form-inline, .form-horizontal) > fieldset) > fieldset:first-of-type):not(:has(.dataTables_wrapper)):has(> legend:first-child) {
  --m-title-block: 41px;
  position: relative;
  isolation: isolate;
  padding: 0 24px 24px 24px;
}
html body .app-content :is(form:not(.form-inline, .form-horizontal) > fieldset:first-of-type:is(:has(~ fieldset), :has(~ daasuser > fieldset)), form:not(.form-inline, .form-horizontal):not(form ~ form):has(~ form:not(.form-inline, .form-horizontal) > fieldset) > fieldset:first-of-type):not(:has(.dataTables_wrapper)):has(> legend:first-child)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--m-title-block) + 24px) 0 0 0;
  background: var(--m-surface);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
}
html body .app-content :is(form:not(.form-inline, .form-horizontal) > fieldset:first-of-type:is(:has(~ fieldset), :has(~ daasuser > fieldset)), form:not(.form-inline, .form-horizontal):not(form ~ form):has(~ form:not(.form-inline, .form-horizontal) > fieldset) > fieldset:first-of-type):not(:has(.dataTables_wrapper)) > legend:first-child {
  box-sizing: border-box;
  width: calc(100% + 48px);
  height: var(--m-title-block);
  float: left;                     /* a floated legend is laid out as a normal box */
  margin: 0 -24px 48px -24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html body .app-content :is(form:not(.form-inline, .form-horizontal) > fieldset:first-of-type:is(:has(~ fieldset), :has(~ daasuser > fieldset)), form:not(.form-inline, .form-horizontal):not(form ~ form):has(~ form:not(.form-inline, .form-horizontal) > fieldset) > fieldset:first-of-type):not(:has(.dataTables_wrapper)) > legend:first-child + * { clear: both; }
html body .app-content :is(form:not(.form-inline, .form-horizontal) > fieldset ~ fieldset, form:not(.form-inline, .form-horizontal) > fieldset ~ daasuser > fieldset, form:not(.form-inline, .form-horizontal) ~ form:not(.form-inline, .form-horizontal) > fieldset):not(:has(.dataTables_wrapper)) > legend {
  float: left;
  width: 100%;
  margin: 0 0 16px 0;
  padding: 0 0 12px 0;
  border: 0;
  border-bottom: 1px solid var(--m-divider);
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 400;
  color: var(--m-text);
}
html body .app-content :is(form:not(.form-inline, .form-horizontal) > fieldset ~ fieldset, form:not(.form-inline, .form-horizontal) > fieldset ~ daasuser > fieldset, form:not(.form-inline, .form-horizontal) ~ form:not(.form-inline, .form-horizontal) > fieldset):not(:has(.dataTables_wrapper)) > legend + * { clear: both; }
/* systemConfig/systemConfig.html ends each section form with an <hr>; when the
   next sibling form is a card, its border replaces that divider. */
html body .app-content form:not(.form-inline, .form-horizontal):has(~ form:not(.form-inline, .form-horizontal) > fieldset) > hr:last-child { display: none; }
/* Loose fields after a card (e.g. partner.html Remember Devices / 2FA policy
   after the Contact Person card) get breathing room */
html body .app-content :is(form:not(.form-inline, .form-horizontal) > fieldset ~ fieldset, form:not(.form-inline, .form-horizontal) > fieldset ~ daasuser > fieldset, form:not(.form-inline, .form-horizontal) ~ form:not(.form-inline, .form-horizontal) > fieldset):not(:has(.dataTables_wrapper)) + :is(.form-group, .checkbox, .radio) { margin-top: 0; }

/* Radio/checkbox helper text: under the label text, not under the control.
   Markup: label>input + <br> + <small>, inside .radio or .form-group. */
html body .template-details :is(.radio, .checkbox, .form-group) > br { display: none; }
html body .template-details :is(.radio, .checkbox, .form-group) > label:has(> input:is([type="radio"], [type="checkbox"])) ~ small {
  display: block;
  margin: 0 0 12px 30px;
  font-size: var(--m-fs-xs);
  line-height: 1.5;
  color: var(--m-text-2);
}
html body .template-details :is(.radio, .checkbox) { margin: 0 0 4px 0; }
html body .template-details .form-group > label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--m-fs);
  font-weight: 400;
  color: var(--m-text);
}
/* "or" divider between detokenization options (inline width:50%) */
html body .template-details .or-separator { margin: 4px 0 12px 30px; font-size: var(--m-fs-xs); color: var(--m-text-2); }
html body .template-details .or-separator::before,
html body .template-details .or-separator::after { background-color: var(--m-divider); }

/* Field templates: one grid (head + rows), not boxed strips */
html body .template-details .template-fields { font-size: var(--m-fs); }
html body .template-details .template-fields .row { margin: 0; }
html body .template-details .template-fields-head {
  display: flex;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid var(--m-divider);
}
html body .template-details .template-fields-head::before,
html body .template-details .template-fields-head::after { content: none; } /* Bootstrap clearfix would become flex items */
html body .template-details .template-fields-head label {
  margin: 0;
  font-size: var(--m-fs-sm);
  font-weight: 500;
  color: var(--m-text-2);
}
html body .template-details .template-fields-row {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--m-divider);
  border-radius: 0;
  background: var(--m-surface);
}
html body .template-details .template-fields-row:hover { background: var(--m-hover); }
html body .template-details .template-fields-row > [data-as-sortable-item-handle] {
  display: flex;
  align-items: center;
  min-height: 48px;
}
html body .template-details .template-fields :is(.template-fields-head, .template-fields-row > [data-as-sortable-item-handle]) > [class*="col-"] { float: none; }
html body .template-details .template-fields-row .drag-icon { min-height: 24px; opacity: .55; cursor: grab; }
/* Edit / remove / view: round icon buttons */
html body .template-details .template-fields-row i.glyphicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 2px 0 0;
  border-radius: 50%;
  font-size: 14px;
  color: var(--m-text-2);
  cursor: pointer;
}
html body .template-details .template-fields-row i.glyphicon:hover { background: var(--m-selected); color: var(--m-primary); }
html body .template-details .template-fields-row i.glyphicon-minus:hover { color: var(--m-error); }
/* Actions column (col-md-1): edit + remove side by side, not stacked */
html body .template-details .template-fields-row > [data-as-sortable-item-handle] > [class*="col-"]:last-child,
html body .template-details .template-fields-head > [class*="col-"]:last-child {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  min-width: 88px;
}
/* Detokenization radios (.form-group > label > input): label text lines up
   with its helper text (30px), like the Access Mode .radio group */
html body .template-details .form-group > label:has(> input[type="radio"]) { gap: 0; }
html body .template-details .form-group > label:has(> input[type="radio"]) > input[type="radio"] { margin: 0 10px 0 0; }
/* Card Brand Tokenization: label.inline-checkbox per brand, originally split
   by <br> (hidden above); shown as one spaced row */
html body .template-details label.inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0;   /* see daasform note in 3.8b: spacing via margins instead */
  margin: 0 24px 8px 0;
  font-size: var(--m-fs);
  font-weight: 400;
  color: var(--m-text);
}
html body .template-details label.inline-checkbox > input { margin: 0 8px 0 0; }
html body .template-details label.inline-checkbox > .brand-icon { margin-right: 8px; }
/* Brand logos (app.css .brand-icon 32x32, SVG at "bottom center"): center
   them on the label's line instead of sitting below it */
html body .template-details label.inline-checkbox > .brand-icon {
  width: 32px;
  height: 24px;
  background-position: center;
  background-size: contain;
}

/* Add field template: dashed full-width add button */
html body .template-details .template-fields-add { margin: 12px 0 0 0; padding: 0; }
html body .template-details .template-fields-add > .btn {
  width: 100%;
  height: var(--m-btn-h);
  border: 1px dashed var(--m-primary-50);
  border-radius: var(--m-radius);
  background: var(--m-surface);
  color: var(--m-primary);
  font-size: var(--m-fs-sm);
  font-weight: 500;
}
html body .template-details .template-fields-add > .btn:hover { background: var(--m-primary-4); border-style: solid; }
html body .template-details .template-fields-add > .btn .glyphicon { color: inherit; margin-right: 6px; }

/* Action bar: form > div.pull-left (Clone Preview Sample, 50px spacer,
   Cancel Apply Save) + div.pull-right (Delete). As two floats, Delete
   dropped onto its own line, or under the row at the far right, whenever
   the row didn't fit (reported on cert at mid widths). Both blocks become
   inline, so every button flows in one line box and wraps button by
   button, with Delete always right after Save. */
html body .template-details > form > div.pull-left:has(+ div.pull-right),
html body .template-details > form > div.pull-left + div.pull-right {
  display: inline;
  float: none !important;          /* beats Bootstrap .pull-left/.pull-right{float:...!important} */
  margin: 0;                       /* also drops the 16.2 field-cap margin on .pull-right */
}
html body .template-details > form > :is(div.pull-left:has(+ div.pull-right), div.pull-left + div.pull-right) :is(.btn, daasbutton) { margin-bottom: 8px; }

/* =====================================================================
   3.8b Field / field-template dialog
   partials/template/field-template-details.html (Custom Field, Card
   Information, ...) and field-details.html (v1.0), form.template-field-
   details inside a modal. Reported on cert: <daas-help-inline> help text
   (js/app.directive.js, div.help-inline) sat between each label and its
   control, so labels/inputs in the two col-md-6 columns landed at
   different heights, and floated columns left gaps ("Allowed Characters").
   Visual order only (flex order): DOM, tab and screen-reader order stay.
   ===================================================================== */
/* Rows: flex-wrap so the floated columns top-align and don't leave holes */
html body .template-field-details .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
html body .template-field-details .row::before,
html body .template-field-details .row::after { content: none; } /* Bootstrap clearfix would become flex items */
html body .template-field-details .row > [class*="col-"] { float: none; }
/* Each field: label, control, (validation), then help text (MUI helperText) */
html body .template-field-details .form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
html body .template-field-details .form-group > label { align-self: flex-start; }
html body .template-field-details .form-group > daas-help-inline { order: 1; }
html body .template-field-details .form-group > daas-help-inline > .help-inline {
  margin: 4px 0 0 0;
  font-size: var(--m-fs-xs);
  line-height: 1.5;
  color: var(--m-text-2);
}
html body .template-field-details .form-group > daas-help-inline > .help-inline a { color: var(--m-primary); }
/* Bare label>checkbox rows in a group (Card Information: Card Holder Name /
   Expiration Date / Security Code) get the same 32px row as .checkbox (4.1)
   so the 32px hover halo can't bleed into the next option */
html body .template-field-details .form-group > label:has(> input:is([type="checkbox"], [type="radio"])) {
  display: inline-flex;
  align-items: center;
  gap: 0;   /* daasform inserts empty <daascontrolfeedback>/<daasvalidationmessage>
               between input and text; a gap would apply to each of them */
  min-height: 32px;
  margin: 0;
  padding: 0;
  font-size: var(--m-fs);
  font-weight: 400;
  color: var(--m-text);
}
html body .template-field-details .form-group > label:has(> input:is([type="checkbox"], [type="radio"])) > input { margin: 0 10px 0 0; }
html body .template-field-details .form-group > br { display: none; }
/* A group whose control the app removed for this field type (e.g. Expiration
   Mode's ng-if select on Email Address) showed only its label and an empty
   "Learn more". Hidden while it holds no control at all; :has() re-shows it
   the moment Angular renders one. Nothing interactive is hidden. */
html body .template-field-details .form-group:not(:has(input, select, textarea, button, .ui-select-container, .dropdown)) { display: none; }
/* Dialog fields use the dialog grid width, not the 680px page-form cap */
html body .modal form .form-group > :is(input.form-control, select.form-control, textarea.form-control, .input-group, .ui-select-container, .intl-tel-input, daasnumber) {
  max-width: none;
}

/* =====================================================================
   3.9 Checklist tables (labels inside table cells)
   partials/templatesharing/list.html (Share Templates With), and any
   table.table whose cells hold <label> text. The form-label rule (12px
   caption) made these partner names tiny and grey; in a table they are
   content: 14px body text, whole cell clickable via the label's for=.
   ===================================================================== */
html body .table td > label {
  display: block;
  margin: 0;
  font-size: var(--m-fs);
  font-weight: 400;
  color: var(--m-text);
  cursor: pointer;
}

/* Template Sharing: the checklist as a card at form width, grid-style rows.
   Scoped with :has() to the table holding the d.Selected checkboxes. */
html body daasmanage fieldset > table.table:has(input[id^="dt-selected-"]) {
  max-width: var(--m-field-max, 680px);
  margin: 0 0 24px 0;
  background: var(--m-surface);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
html body daasmanage fieldset > table.table:has(input[id^="dt-selected-"]) th {
  height: 48px;
  padding: 0 16px;
  vertical-align: middle;
  font-size: var(--m-fs-sm);
  font-weight: 500;
  color: var(--m-text-2);
  border-top: 0;
  border-bottom: 1px solid var(--m-divider);
}
html body daasmanage fieldset > table.table:has(input[id^="dt-selected-"]) td {
  height: 44px;
  padding: 0 16px;
  vertical-align: middle;
  border-top: 0;
  border-bottom: 1px solid var(--m-divider);
}
html body daasmanage fieldset > table.table:has(input[id^="dt-selected-"]) tr:last-child > td { border-bottom: 0; }
html body daasmanage fieldset > table.table:has(input[id^="dt-selected-"]) tr:has(td):hover { background: var(--m-hover); }
html body daasmanage fieldset > table.table:has(input[id^="dt-selected-"]) tr:has(input:checked) { background: var(--m-primary-4); }
html body daasmanage fieldset > table.table:has(input[id^="dt-selected-"]) :is(th, td):first-child { width: 56px; padding-right: 0; }

/* ===== part: 36-code-editor.css ===== */
/* =====================================================================
   3.10 JSON code editor (jsoneditor + Ace, "code" mode)
   gateway-template/details.html (ORCA configuration) and
   file-process/details.html: div[ng-jsoneditor] > div.jsoneditor >
   .jsoneditor-menu (toolbar) + .jsoneditor-outer > .ace-jsoneditor (Ace)
   + .jsoneditor-statusbar. Legacy looks: css/jsoneditor/jsoneditor.min.css
   (solid #3883fa bar, white sprite icons) and the Ace theme that
   jsoneditor.min.js injects at runtime (.ace-jsoneditor ...: yellow active
   line, grey gutter, green/red/orange tokens). CSS only; editor behaviour,
   modes, undo/redo, schema hints and validation are untouched.
   ===================================================================== */

/* --- Frame: reads like the other fields; primary ring while editing --- */
html body div.jsoneditor {
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius);
  overflow: hidden;
  background: var(--m-surface);
}
html body div.jsoneditor:hover { border-color: var(--m-outline-hover); }
html body div.jsoneditor:focus-within {
  border-color: var(--m-primary);
  box-shadow: inset 0 0 0 1px var(--m-primary);
}

/* Taller default (ORCA configs are long). The page sets an inline
   style="height: 400px" on div[ng-jsoneditor]; !important is needed to beat
   it. Ace measures its box when it initialises, after this CSS is applied,
   so a fixed taller height is safe (dragging to resize is not: this Ace
   build doesn't re-measure on element resize). */
html body div[ng-jsoneditor][style*="height"] { height: 480px !important; }

/* --- Toolbar: light bar (grid filter-bar colour) instead of solid blue --- */
html body div.jsoneditor-menu {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 8px;
  color: var(--m-text);
  background-color: var(--m-toolbar);
  border-bottom: 1px solid var(--m-divider);
}
/* Icon buttons: round, 32px. The sprite (jsoneditor-icons.svg) only has
   WHITE toolbar icons, so the icon is drawn on a ::before layer (same file,
   already loaded, same background-position via inherit) and darkened with a
   filter; the button's own background stays free for the hover circle. */
html body div.jsoneditor-menu > button,
html body div.jsoneditor-menu > .jsoneditor-modes > button {
  position: relative;
  float: none;
  width: 32px;
  height: 32px;
  margin: 0 2px;
  border: 0;
  border-radius: 50%;
  background-image: none;
  background-color: transparent;
  color: var(--m-text);
  opacity: 1;
}
html body div.jsoneditor-menu > button::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background-image: url("/css/jsoneditor/img/jsoneditor-icons.svg");
  background-repeat: no-repeat;
  background-position: inherit;
  filter: brightness(0);
  opacity: .62;
}
html body div.jsoneditor-menu > button:hover:not(:disabled),
html body div.jsoneditor-menu > .jsoneditor-modes > button:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, .06);
  border: 0;
}
html body div.jsoneditor-menu > button:focus-visible,
html body div.jsoneditor-menu > .jsoneditor-modes > button:focus-visible {
  outline: 0;
  box-shadow: var(--m-focus-ring);
}
html body div.jsoneditor-menu > button:disabled { background-color: transparent; }
html body div.jsoneditor-menu > button:disabled::before { opacity: .26; }
html body div.jsoneditor-menu > button.jsoneditor-separator { margin-left: 12px; }
/* Mode switch ("Code ▾"): text button, not an icon */
html body div.jsoneditor-menu > .jsoneditor-modes { display: flex; align-items: center; float: none; }
html body div.jsoneditor-menu > .jsoneditor-modes > button {
  width: auto;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--m-radius);
  font-family: var(--m-font);
  font-size: var(--m-fs-sm);
  font-weight: 500;
}
html body div.jsoneditor-menu > .jsoneditor-modes > button.jsoneditor-separator { margin-left: 12px; }
/* "ORCA" tag (app.css .jsoneditor-orca, absolutely positioned top-right) */
html body div.jsoneditor-menu .jsoneditor-orca,
html body div.jsoneditor-menu a {
  top: 0;
  padding: 0 14px;
  line-height: 44px;
  font-family: var(--m-font);
  font-size: var(--m-fs-xs);
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--m-text-2);
  opacity: 1;
}

/* Mode menu dropdown (Code / Tree / View): MUI menu */
html body .jsoneditor-contextmenu .jsoneditor-menu {
  width: 160px;
  padding: 8px 0;
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-8);
}
html body .jsoneditor-contextmenu .jsoneditor-menu button {
  width: 160px;
  height: 36px;
  font-family: var(--m-font);
  font-size: var(--m-fs);
  color: var(--m-text);
}
html body .jsoneditor-contextmenu .jsoneditor-menu button:is(:hover, :focus) { background-color: var(--m-hover); }
html body .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
html body .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:is(:hover, :focus) {
  color: var(--m-primary);
  background-color: var(--m-primary-8);   /* legacy: white on #ee422e red */
}

/* --- Code area (Ace) --- */
html body .ace-jsoneditor.ace_editor {
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 13px;
  line-height: 20px;
  color: var(--m-text);
}
html body .ace-jsoneditor .ace_text-layer { color: var(--m-text-2); }   /* punctuation, brackets */
html body .ace-jsoneditor .ace_gutter {
  background: var(--m-surface-2);
  color: var(--m-text-disabled);
  border-right: 1px solid var(--m-divider);
}
html body .ace-jsoneditor .ace_gutter-active-line { background-color: var(--m-primary-8); }
html body .ace-jsoneditor .ace_gutter-cell.ace_gutter-active-line,
html body .ace-jsoneditor .ace_gutter-active-line { color: var(--m-text-2); }
html body .ace-jsoneditor .ace_marker-layer .ace_active-line { background: var(--m-primary-4); }   /* legacy #FFFBD1 yellow */
html body .ace-jsoneditor .ace_marker-layer .ace_selection { background: var(--m-primary-12); }
html body .ace-jsoneditor .ace_marker-layer .ace_selected-word { border-color: var(--m-primary-30); }
html body .ace-jsoneditor .ace_marker-layer .ace_bracket { border-color: var(--m-primary-50); }
html body .ace-jsoneditor .ace_cursor { border-left: 2px solid var(--m-primary); }
/* Syntax colours from the palette (darkest stops for contrast on white) */
html body .ace-jsoneditor .ace_variable { color: var(--m-navy); }                     /* keys */
html body .ace-jsoneditor .ace_string { color: var(--m-success-dark); }               /* strings */
html body .ace-jsoneditor .ace_constant.ace_numeric { color: var(--m-info-dark); }    /* numbers */
html body .ace-jsoneditor .ace_constant.ace_language { color: var(--m-warning-dark); }/* true/false/null */
html body .ace-jsoneditor :is(.ace_paren, .ace_punctuation) { color: var(--m-text-2); }   /* { } [ ] , : (theme: brown) */
html body .ace-jsoneditor .ace_invalid { color: #FFFFFF; background-color: var(--m-error); }
html body .ace-jsoneditor .ace_fold { background-color: var(--m-primary-50); border-color: var(--m-primary); }

/* --- Status bar (Ln / Col) --- */
html body div.jsoneditor-statusbar {
  height: 32px;
  padding: 0 12px;
  line-height: 32px;
  font-family: var(--m-font);
  font-size: var(--m-fs-xs);
  color: var(--m-text-2);
  background-color: var(--m-surface-2);
  border-top: 1px solid var(--m-divider);
}

/* --- Search box (tree / view modes) ---------------------------------------
   jsoneditor .jsoneditor-menu > .jsoneditor-search (legacy: top:4px, 26px,
   borderless) sat at the top of the taller 44px bar above and was barely
   visible. Centred in the bar as an outlined 32px field.
   gateway-template/details.html, file-process/details.html (any
   div[ng-jsoneditor] in tree/view mode). Merged from manage 41.10. */
html body .jsoneditor-menu > .jsoneditor-search {
  top: 6px;
  right: 8px;
}
html body .jsoneditor-menu > .jsoneditor-search > .jsoneditor-frame {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 4px 0 6px;
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius);
  background: var(--m-surface);
}
html body .jsoneditor-menu > .jsoneditor-search > .jsoneditor-frame:hover { border-color: var(--m-outline-hover); }
html body .jsoneditor-menu > .jsoneditor-search > .jsoneditor-frame:focus-within { border-color: var(--m-primary); box-shadow: inset 0 0 0 1px var(--m-primary); }
html body .jsoneditor-menu > .jsoneditor-search input {
  height: 24px;
  border: 0;
  background: transparent;
  font-family: var(--m-font);
  font-size: var(--m-fs-sm);
  color: var(--m-text);
}
html body .jsoneditor-menu > .jsoneditor-search .jsoneditor-results { color: var(--m-text-2); line-height: 32px; }

/* ===== part: 37-dashboard.css ===== */
/* =====================================================================
   3.11 Dashboard (partials/dashboard/dashboard.html, route "/")
   .wrapper.col-md-12 > div[ng-show=showSummary] >
     h3 "Summary Information" + small > a.glyphicon-refresh (refreshSummary())
     .container-fluid > .col-sm-3.border x3 (Transactions, Counts,
       User Count), each: h4, <daasdashboarditem> rows
       (include/dashboard.item.html: span.wide label + b > span.summary-item),
       canvas.chart-bar (Chart.js), and for User Count: span.total-count x2,
       ul.month-count, ul.year-count > li > a (changeYear()).
   Legacy: css/app.css "dashboard" blocks (.border{height:340px},
   daasdashboarditem spans, ul.month-count / ul.year-count).
   Chart.js bar colours are set in JS (angular-chart defaults) and drawn on
   a canvas, so CSS can't recolour them (gap: chart-colors option).
   ===================================================================== */

/* Title: same treatment as the other page titles (Poppins + divider) */
html body .app-content h3:has(+ .container-fluid > .col-sm-3.border) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px 0;
  padding: 0 0 12px 0;
  border-bottom: 1px solid var(--m-divider);
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 400;
  color: var(--m-text);
}
/* Refresh (small > a.glyphicon-refresh): round icon button */
html body .app-content h3:has(+ .container-fluid > .col-sm-3.border) > small > a.glyphicon-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  top: 0;
  border-radius: 50%;
  font-size: 15px;
  color: var(--m-text-2);
  text-decoration: none;
}
html body .app-content h3:has(+ .container-fluid > .col-sm-3.border) > small > a.glyphicon-refresh:hover { background: var(--m-selected); color: var(--m-primary); }
html body .app-content h3:has(+ .container-fluid > .col-sm-3.border) > small > a.glyphicon-refresh:focus-visible { outline: 0; box-shadow: var(--m-focus-ring); }

/* Tiles: equal-width auto-fill grid (replaces the 25% floats; 2.3b's
   flex-wrap is superseded). auto-fill keeps the column width stable when
   a role hides a tile (ng-if), instead of stretching the rest. */
html body .app-content .container-fluid:has(> .col-sm-3.border) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
  margin: 0;
  padding: 0;
}
html body .app-content .container-fluid > .col-sm-3.border {
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  height: auto;              /* legacy .border{height:340px} */
  min-height: 340px;
  margin: 0;
  padding: 20px 24px;
}
html body .app-content .container-fluid > .col-sm-3.border > h4 {
  margin: 0 0 8px 0;
  font-family: var(--m-font-head);
  font-size: 18px;
  font-weight: 400;
  color: var(--m-text);
}

/* KPI rows: label left (muted), value right (large) */
html body .app-content .col-sm-3.border daasdashboarditem > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--m-divider);
}
html body .app-content .col-sm-3.border daasdashboarditem div span.wide {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  font-size: var(--m-fs);
  color: var(--m-text-2);
}
html body .app-content .col-sm-3.border daasdashboarditem div span.summary-item {
  width: auto;
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 500;
  color: var(--m-text);
  overflow: visible;
}
html body .app-content .col-sm-3.border > canvas.chart { margin-top: 16px; }

/* User Count: totals, month grid, year pills */
html body .app-content .col-sm-3.border > .total-count {
  font-size: var(--m-fs);
  font-weight: 500;
  color: var(--m-text);
}
html body .app-content .col-sm-3.border > hr { width: 100%; margin: 12px 0; border-top-color: var(--m-divider); }
html body .app-content .col-sm-3.border ul.month-count {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body .app-content .col-sm-3.border ul.month-count > li {
  width: auto;
  margin: 0;
  text-align: left;
  font-size: var(--m-fs-sm);
  color: var(--m-text-2);
}
html body .app-content .col-sm-3.border ul.year-count {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: static;          /* app.css: position:absolute; bottom:0 (ignored the padding) */
  margin: auto 0 0 0;        /* pinned to the bottom of the tile, inside its padding */
  padding: 12px 0 0 0;
  list-style: none;
}
html body .app-content .col-sm-3.border ul.year-count > li { display: block; margin: 0; padding: 0; }
html body .app-content .col-sm-3.border ul.year-count > li::after { content: none; }   /* legacy "|" separators */
html body .app-content .col-sm-3.border ul.year-count > li > a {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--m-radius-pill);
  background: var(--m-primary-8);
  color: var(--m-primary);
  font-size: var(--m-fs-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
html body .app-content .col-sm-3.border ul.year-count > li > a:hover { background: var(--m-primary-12); }
/* The hr just above the year pills is redundant once they sit at the bottom */
html body .app-content .col-sm-3.border > hr:has(+ ul.year-count) { display: none; }

/* ===== part: 41-sweep-manage.css ===== */
/* =====================================================================
   41-sweep-manage.css: sweep fixes for the "manage" pages
   /manage/users(/:id), /manage/partners(/:id), /manage/clients(/:id),
   /manage/templates(/:id), /manage/template-sharing, /manage/emails(/:id),
   /manage/proxy-configurations(/:id), /manage/branding(/:id).
   Every rule is scoped to those pages (grid table ids, form names, or
   page-unique markup via :has()). Rules marked CANDIDATE-SHARED fix a
   shared component and could move to the shared parts later.
   ===================================================================== */

/* ---------- 41.1 Grid column widths: manage/users.html (#dtUsers),
   manage/partners.html (#dtPartners); js/modules/authenticated/app.user.js,
   app.partner.js columnDefs.
   The declared widths add up to 115% / 125%, so DataTables starved the last
   columns (Role "Partner Supervisor" broke as "Superviso/r", Status
   "Suspende/d", Billing ID "BILL-/70100"). Re-balance to 100% on both the
   visible header table and the body's sizing row (table-layout:fixed takes
   widths from them, so header and body stay aligned).
   !important: DataTables writes these widths as inline styles. */
/* th are content-box: the 31px+12px paddings would come on top of the
   percentages, so size them border-box (same in both tables). */
html body :is(#dtUsers_wrapper, #dtPartners_wrapper) .dataTables_scroll table.dataTable > thead > tr > th { box-sizing: border-box; }
/* Narrow content (1024px): scroll horizontally instead of starving columns */
html body :is(#dtUsers_wrapper, #dtPartners_wrapper) .dataTables_scroll :is(.dataTables_scrollHeadInner, .dataTables_scrollBody) > table.dataTable { min-width: 900px; }
html body #dtUsers_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(1),
html body #dtPartners_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(1) { width: 56px !important; }
html body #dtUsers_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(2) { width: 14% !important; }
html body #dtUsers_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(3) { width: 14% !important; }
html body #dtUsers_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(4) { width: 22% !important; }
html body #dtUsers_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(5) { width: 17% !important; }
html body #dtUsers_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(6) { width: 13% !important; }
html body #dtUsers_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(7) { width: auto !important; }
html body #dtPartners_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(2) { width: 19% !important; }
html body #dtPartners_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(3) { width: 17% !important; }
html body #dtPartners_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(4) { width: 15% !important; }
html body #dtPartners_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(5) { width: 19% !important; }
html body #dtPartners_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(6) { width: 12% !important; }
html body #dtPartners_wrapper .dataTables_scroll table.dataTable > thead > tr > th:nth-child(7) { width: auto !important; }

/* ---------- 41.2 Email templates list: manage/emails.html, app.email.js r3
   - The per-row "Remove" button (button.btn.btn-default > i.glyphicon-remove)
     was a 36px outlined box in a 5% column and was clipped at the card edge.
     Now a 32px round icon button (MUI IconButton) that fits the column.
   (The "Any Type" 32px select moved to 20-components 1.10b.) */
html body daasmanage:has(#dtEmailTemplates) table.dataTable td > button.btn:has(> .glyphicon-remove) {
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--m-text-2);
  font-size: 13px;
  line-height: 32px;
  box-shadow: none;
}
html body daasmanage:has(#dtEmailTemplates) table.dataTable td > button.btn:has(> .glyphicon-remove):hover { background: var(--m-hover); color: var(--m-error); }
html body daasmanage:has(#dtEmailTemplates) table.dataTable td > button.btn:has(> .glyphicon-remove):focus-visible { outline: 2px solid var(--m-primary); outline-offset: 1px; }
/* 41.3 Filter-bar clear partner/client x: merged into 20-components 1.10b. */

/* ---------- 41.4 API Security key field: manage/user.html ("External API
   Security"), manage/partner.html ("API Security").
   .row > .col-sm-3 (radios) + .col-sm-9 (Hmac input-group / Rsa textarea):
   the key field ran 802px wide, past the 680px field cap. Radios get a
   fixed 200px column and the key column is capped at the field width
   (+30px for the two 15px column paddings). Below 768px the Bootstrap
   stacking is untouched. */
@media (min-width: 768px) {
  html body form:is([name="userDetailsForm"], [name="partnerDetailsForm"]) fieldset > .row:has(> .col-sm-3 input[name="authorizationType"]) {
    display: flex;
    align-items: flex-start;
  }
  html body form:is([name="userDetailsForm"], [name="partnerDetailsForm"]) fieldset > .row:has(> .col-sm-3 input[name="authorizationType"])::before,
  html body form:is([name="userDetailsForm"], [name="partnerDetailsForm"]) fieldset > .row:has(> .col-sm-3 input[name="authorizationType"])::after { content: none; }
  html body form:is([name="userDetailsForm"], [name="partnerDetailsForm"]) fieldset > .row:has(> .col-sm-3 input[name="authorizationType"]) > .col-sm-3 {
    float: none;
    flex: 0 0 200px;
    width: auto;
  }
  html body form:is([name="userDetailsForm"], [name="partnerDetailsForm"]) fieldset > .row:has(> .col-sm-3 input[name="authorizationType"]) > .col-sm-9 {
    float: none;
    flex: 1 1 auto;
    width: auto;
    max-width: calc(var(--m-field-max, 680px) + 30px);
  }
}

/* 41.5 Validation on submit + intl-tel flag pinned: merged into 10-controls
   2.6b and 6 (shared). */

/* ---------- 41.6 Email template details: manage/email.html.
   Here the page-title <legend> is a direct child of the form (outside the
   fieldset), and picked up a 500 weight / 32px line from a generic rule;
   match the other detail pages (Poppins 20px regular). */
html body form[name="emailTemplateDetailsForm"] > legend {
  font-weight: 400;
  line-height: 28px;
}
html body form[name="emailTemplateDetailsForm"] textarea#Body + daasrequiredmessage,
html body form[name="emailTemplateDetailsForm"] .form-group:has(> textarea#Body) { margin-bottom: 24px; }

/* ---------- 41.7 Template details: partials/template/details.html */
/* 41.7.1 Whitelist Domains (ul.template-domains > li.template-domains-item,
   css/app.css: 1px #ccc boxes with a heavy glyph). MUI chips: 32px pill,
   --m-chip fill, 13px text, small round delete icon. */
html body form[name="templateDetailsForm"] ul.template-domains {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}
html body form[name="templateDetailsForm"] li.template-domains-item {
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin: 0;
  padding: 0 4px 0 12px;
  border: 0;
  border-radius: var(--m-radius-pill);
  background: var(--m-chip);
  font-size: var(--m-fs-sm);
  color: var(--m-text);
}
html body form[name="templateDetailsForm"] li.template-domains-item > i.glyphicon-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .26);
  color: var(--m-surface);
  font-size: 9px;
  top: 0;
}
html body form[name="templateDetailsForm"] li.template-domains-item > i.glyphicon-remove:hover { background: rgba(0, 0, 0, .4); }

/* 41.7.2 Template sharing ACL rows (.template-sharing-row, css/app.css:
   2px #ccc boxed rows). One outlined card with divider rows, centred
   name/checkbox line, like the grid. */
html body form[name="templateDetailsForm"] .template-sharing {
  max-width: var(--m-field-max, 680px);
}
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-header {
  margin: 0;
  padding: 0 0 6px;
  font-size: var(--m-fs-sm);
  font-weight: 500;
  color: var(--m-text);
}
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-row {
  display: flex;
  align-items: center;
  min-height: var(--m-row-h);
  margin: 0;
  padding: 0;
  border: 1px solid var(--m-divider);
  border-radius: 0;
}
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-row + .template-sharing-row { border-top: 0; }
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-header + .template-sharing-row { border-radius: var(--m-radius) var(--m-radius) 0 0; }
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-row:last-child { border-radius: 0 0 var(--m-radius) var(--m-radius); }
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-header + .template-sharing-row:last-child { border-radius: var(--m-radius); }
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-row:hover { background: var(--m-hover); }
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-row::before,
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-row::after { content: none; }
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-row > [class*="col-"] { float: none; font-size: var(--m-fs); }
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-row > [class*="col-"] > input { margin: 0; vertical-align: middle; }

/* 41.7.3 <daasnumber> Years/Days: merged into 10-controls 15.2. */

/* ---------- 41.8 Field template / field dialogs:
   partials/template/field-template-details.html, field-details.html
   (form.template-field-details inside .modal-body).
   41.8.1 The step footers (div.modal-footer) sit INSIDE .modal-body, so
   they got the dialog padding twice: Back/Cancel/Save landed 24px inside
   the field edges. */
html body .modal-body form.template-field-details .modal-footer {
  padding-left: 0;
  padding-right: 0;
}
/* 41.8.2 Sections after the first ("IFrame options", "Card Number", ...)
   started right under the previous row of checkboxes. */
html body .modal-body form.template-field-details > fieldset + fieldset > legend,
html body .modal-body form.template-field-details > fieldset ~ fieldset > legend { margin-top: 16px; }
/* 41.8.3 Extended step (Card / Address sub-fields): the col-md-6 groups are
   direct children of each <fieldset> (no .row), so they kept the 15px
   Bootstrap gutter and sat 15px inside the section heading, unlike the
   details step. Two-column flex grid with the same 30px gap as .row. */
html body .modal-body form.template-field-details[name="fieldExtendedForm"] > fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 30px;
}
html body .modal-body form.template-field-details[name="fieldExtendedForm"] > fieldset > legend { flex: 0 0 100%; }
html body .modal-body form.template-field-details[name="fieldExtendedForm"] > fieldset > [class*="col-"] {
  float: none;
  flex: 0 0 calc(50% - 15px);
  width: auto;
  max-width: calc(50% - 15px);
  padding-left: 0;
  padding-right: 0;
}
/* "Required" checkbox groups line up with the field next to them */
html body .modal-body form.template-field-details[name="fieldExtendedForm"] > fieldset > .form-group:has(> label > input[type="checkbox"]):not(:has(.form-control)) {
  align-self: flex-end;
  justify-content: center;
  min-height: var(--m-ctl-h);
}

/* ---------- 41.9 Style editor: partials/template/style-editor.html.
   Background / Font Color: text input + <input type=color> with inline
   widths 70/30% and 65/35%; in the 108px Font Color column the value showed
   as "#0000". The swatch becomes a fixed 34px box and the text takes the
   rest. !important: beats the inline style="width: ..%". */
html body .modal .input-group:has(> input[type="color"]) { display: flex; }
html body .modal .input-group:has(> input[type="color"]) > input.form-control:not([type="color"]) {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  padding: 0 4px 0 8px;
}
html body .modal .input-group:has(> input[type="color"]) > input[type="color"] {
  flex: 0 0 34px;
  width: 34px !important;
  height: var(--m-ctl-h);
  padding: 6px 4px;
  background: var(--m-surface);
  cursor: pointer;
}

/* 41.10 jsoneditor search box: merged into 36-code-editor (Search box). */

/* ---------- 41.11 Branding details: partials/branding/details.html.
   - Images header row uses col-md-4/5/3 but the data rows use col-md-2/6/4,
     so "Url" and "Preview" captions sat over the wrong columns. Both rows
     now use 25/50/25% (file names got room to breathe in the 680px block).
   - Images block capped like the other fields; previews kept to a 40px
     thumbnail (a full-size logo pushed the rows apart); name link and Url
     field centred on one line.
   - The "+" add-image button (button.glyphicon.glyphicon-plus, an unstyled
     native button) becomes a 32px icon button. */
html body form#branding-details .form-group > div > .row:has(> .col-md-4 > label.small) > .col-md-4:first-child { width: 25%; }
html body form#branding-details .form-group > div > .row:has(> .col-md-4 > label.small) > .col-md-5 { width: 50%; }
html body form#branding-details .form-group > div > .row:has(> .col-md-4 > label.small) > .col-md-3 { width: 25%; }
html body form#branding-details .row.well-sm[ng-repeat] > .col-md-2 { width: 25%; }
html body form#branding-details .row.well-sm[ng-repeat] > .col-md-6 { width: 50%; }
html body form#branding-details .row.well-sm[ng-repeat] > .col-md-4 { width: 25%; }
html body form#branding-details .form-group:has(> label > button.glyphicon-plus) > div { max-width: var(--m-field-max, 680px); }
html body form#branding-details .row.well-sm[ng-repeat] {
  display: flex;
  align-items: center;
  min-height: var(--m-row-h);
  padding: 4px 0;
  border-bottom: 1px solid var(--m-divider);
}
html body form#branding-details .row.well-sm[ng-repeat]::before,
html body form#branding-details .row.well-sm[ng-repeat]::after { content: none; }
html body form#branding-details .row.well-sm[ng-repeat] > [class*="col-"] { float: none; min-width: 0; overflow-wrap: anywhere; }
html body form#branding-details .row.well-sm[ng-repeat] img { display: block; max-width: 100%; max-height: 40px; }
html body form#branding-details label > button.glyphicon-plus {
  width: 32px;
  height: 32px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--m-primary);
  font-size: 13px;
  line-height: 32px;
  vertical-align: middle;
  cursor: pointer;
}
html body form#branding-details label > button.glyphicon-plus:hover { background: var(--m-primary-8); }
html body form#branding-details label > button.glyphicon-plus:focus-visible { outline: 2px solid var(--m-primary); outline-offset: 1px; }

/* ---------- 41.12 Template details below 992px (compact shell, 768px):
   partials/template/details.html. The Field Templates / Fields v1.0 grid
   (.template-fields-head + .template-fields-row, flex rows from
   35-template-pages.css) and the Template sharing ACL rows use col-md-*
   columns, which lose their widths below 992px; the flex items then sized
   to content and the header no longer lined up with the values. Keep
   proportional widths (fixed drag / Required / actions columns) at every width. */
@media (max-width: 991px) {
  html body form[name="templateDetailsForm"] .template-fields :is(.template-fields-head, .template-fields-row > [data-as-sortable-item-handle]) > .col-md-1.drag-icon { flex: 0 0 40px; width: 40px; min-width: 0; }
  html body form[name="templateDetailsForm"] .template-fields :is(.template-fields-head, .template-fields-row > [data-as-sortable-item-handle]) > .col-md-1:not(:last-child, .drag-icon) { flex: 0 0 76px; width: 76px; min-width: 0; }
  html body form[name="templateDetailsForm"] .template-fields :is(.template-fields-head, .template-fields-row > [data-as-sortable-item-handle]) > .col-md-2 { flex: 1 1 15%; width: 15%; min-width: 0; }
  html body form[name="templateDetailsForm"] .template-fields :is(.template-fields-head, .template-fields-row > [data-as-sortable-item-handle]) > .col-md-3 { flex: 1 1 22%; width: 22%; min-width: 0; }
  html body form[name="templateDetailsForm"] .template-fields :is(.template-fields-head, .template-fields-row > [data-as-sortable-item-handle]) > [class*="col-"] { padding-left: 8px; padding-right: 8px; overflow-wrap: anywhere; }
}
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-header { display: flex; }
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-header::before,
html body form[name="templateDetailsForm"] .template-sharing .template-sharing-header::after { content: none; }
html body form[name="templateDetailsForm"] .template-sharing :is(.template-sharing-header, .template-sharing-row) > .col-md-6 { float: none; flex: 0 0 50%; width: 50%; }
html body form[name="templateDetailsForm"] .template-sharing :is(.template-sharing-header, .template-sharing-row) > .col-md-3 { float: none; flex: 0 0 25%; width: 25%; text-align: center; }

/* ===== part: 42-sweep-logs.css ===== */
/* ===== 42 Sweep fixes: API Logs, Virtual Terminal, Dashboard, Contact, Documentation =====
   Pages: /logs/transactions, /logs/proxy, /logs/networkToken (all wrapped in
   <daasapilogs>, partials/include/apilogs.html), /logs/proxy/:id
   (partials/gateway-transaction/details.html: .scx-gtd-*, daascontentviewer),
   /documentation (partials/documentation/documents.html: .document-categories).
   Every selector is scoped to daasapilogs / .scx-gtd-* / daascontentviewer /
   .document-categories so nothing leaks to other sections.
   ======================================================================================= */

/* 42.1 API Logs filter bar: merged into 20-components 1.10b (shared filter bar). */

/* ---------- 42.2 Orchestration log details: header + properties ----------
   partials/gateway-transaction/details.html: .scx-gtd-header (h3 + .scx-gtd-paging
   Previous / Next / Close), form.scx-gtd-properties (label + read-only input rows).
   Before: Previous/Next were filled primary (app.css #337AB7 rule, recoloured) and
   CLOSE wrapped under them at 1440; values were right-aligned in a 250px box far
   from their 16px bold labels. */
html body .scx-gtd-paging button:is(.scx-gtd-paging-prev, .scx-gtd-paging-next):not([disabled]) {
  background-color: var(--m-surface);
  color: var(--m-primary);
  border-color: var(--m-primary-50);
}
html body .scx-gtd-paging button:is(.scx-gtd-paging-prev, .scx-gtd-paging-next):not([disabled]):hover {
  background-color: var(--m-primary-4);
  border-color: var(--m-primary);
}
html body .scx-gtd-properties .form-group { margin: 0; padding: 6px 0; display: flex; align-items: baseline; }
html body .scx-gtd-properties .form-group.ng-hide { display: none !important; }   /* keep ng-hide winning over the flex row */
html body .scx-gtd-properties label {
  flex: 0 0 200px;
  font-size: var(--m-fs);
  font-weight: 500;
  color: var(--m-text-2);
}
html body .scx-gtd-properties input.form-control[readonly],
html body .scx-gtd-properties .scx-gtd-result-details {
  flex: 1 1 auto;
  max-width: 480px;
  height: auto;
  text-align: left;
  font-size: var(--m-fs);
  color: var(--m-text);
}
html body .scx-gtd-properties input.form-control[readonly].success { color: var(--m-success-text); font-weight: 500; }
html body .scx-gtd-properties input.form-control[readonly].failure { color: var(--m-error); font-weight: 500; }
/* keyboard focus: app.css strips the border/background of these read-only fields, so the shared focus border never shows */
html body .scx-gtd-properties input.form-control[readonly]:focus-visible,
html body .scx-gtd-properties .scx-gtd-result-details:focus-visible {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (min-width: 1024px) {
  html body:has(> .app-header) .scx-gtd-header { display: flex; align-items: center; gap: 16px; }
  html body:has(> .app-header) .scx-gtd-header::before,
  html body:has(> .app-header) .scx-gtd-header::after { content: none; }
  html body:has(> .app-header) .scx-gtd-header > .col-md-8 { flex: 1 1 auto; width: auto; float: none; }
  html body:has(> .app-header) .scx-gtd-header > .scx-gtd-paging { flex: 0 0 auto; width: auto; float: none; white-space: nowrap; }
}

/* ---------- 42.3 Content viewer (request/response panes) ----------
   partials/include/contentviewer.html inside .scx-gtd-request / .scx-gtd-response:
   ol.scx-cv-code (scrollable, so keyboard-focusable in Chromium), Pretty/Raw pills.
   Before: 11px code and no visible focus when tabbing into the scroll panes. */
html body daascontentviewer .scx-cv-code { font-size: 12px; line-height: 1.5; }
html body daascontentviewer .scx-cv-code:focus-visible {
  outline: 2px solid var(--m-primary-light);
  outline-offset: -2px;
}
html body daascontentviewer .scx-cv-toolbar .nav-pills > li > a:focus-visible,
html body .scx-gtd-call h5:focus-visible {
  outline: 2px solid var(--m-primary-light);
  outline-offset: 2px;
}

/* ---------- 42.4 Documentation: category cards in an even grid ----------
   partials/documentation/documents.html: .document-categories > .row >
   .col-md-3.well (ng-repeat per category) > .document-item rows with download
   link, name, date and a delete (glyphicon-remove) link for system users.
   Before: four 25% floats plus card margins wrapped the 4th card under the 3rd
   at 1440; items were split by dashed lines; the delete × was primary blue like
   the download link. */
html body .document-categories > .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0 0 24px; }
html body .document-categories > .row::before,
html body .document-categories > .row::after { content: none; }
html body .document-categories > .row > .col-md-3.well { width: auto; float: none; margin: 0; }
html body .document-categories .document-item { border-bottom: 1px solid var(--m-divider); border-top: 0; padding: 8px 0; }
html body .document-categories .document-item:last-child { border-bottom: 0; }
html body .document-categories .document-item small { color: var(--m-text-2); }
html body .document-categories .document-item a[ng-click^="confirmDelete"] { color: var(--m-text-2); }
html body .document-categories .document-item a[ng-click^="confirmDelete"]:hover { color: var(--m-error); }
/* endpoint URL fields in each log record (.scx-gtd-url.input-group > input[readonly]):
   app.css keeps their 1px border on focus, so tabbing in showed nothing */
html body .scx-gtd-url > input.form-control[readonly]:focus-visible {
  border-color: var(--m-primary);
  box-shadow: inset 0 0 0 1px var(--m-primary);
}

/* ===== part: 43-sweep-reports.css ===== */
/* ===== 43 Sweep fixes: Reports =====================================
   Pages: every /reports/* route (partials/reports/*.html), all wrapped in
   <daasreports> (partials/include/reports.html). Every selector is scoped
   to `daasreports` so nothing leaks to other sections.
   ===================================================================== */

/* 43.1 Filter bar: merged into 20-components 1.10b (shared filter bar). */

/* ---------- 43.2 Export buttons in the chart filter bars --------------
   partials/reports/tokenizationMetric.html, proxyTotals.html:
   button.btn.btn-primary.btn-sm[ng-click="downloadCSV()"|"downloadPDF()"].
   They are contained primary in markup, so the bar showed three filled
   buttons next to APPLY. P2PE / grid toolbars use TEXT buttons for
   CSV/PDF (20-components 1.9), so match that. Disabled state kept. */
html body daasreports .well > form.form-inline .btn.btn-primary:is([ng-click="downloadCSV()"], [ng-click="downloadPDF()"]) {
  padding: 0 8px;
  color: var(--m-primary);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
html body daasreports .well > form.form-inline .btn.btn-primary:is([ng-click="downloadCSV()"], [ng-click="downloadPDF()"]):is(:hover, :focus, :active) {
  color: var(--m-primary);
  background: var(--m-primary-4);
  border-color: transparent;
  box-shadow: none;
}
html body daasreports .well > form.form-inline .btn.btn-primary:is([ng-click="downloadCSV()"], [ng-click="downloadPDF()"]):focus-visible { box-shadow: var(--m-focus-ring); }
html body daasreports .well > form.form-inline .btn.btn-primary:is([ng-click="downloadCSV()"], [ng-click="downloadPDF()"])[disabled] {
  color: var(--m-text-disabled);
  background: transparent;
}

/* ---------- 43.3 Result selector above the chart ---------------------
   tokenizationMetric.html / proxyTotals.html: form.form-inline (no well)
   > .form-group > label[for=result] + select#result. Same 32px field,
   label as a quiet caption. */
html body daasreports fieldset > form.form-inline:has(> .form-group > select#result) { margin: 0 0 8px; }
html body daasreports fieldset > form.form-inline > .form-group > label[for="result"] {
  margin-right: 8px;
  font-size: var(--m-fs-xs);
  font-weight: 400;
  color: var(--m-text-2);
}
html body daasreports fieldset > form.form-inline > .form-group > select#result {
  height: var(--m-ctl-h-sm);
  min-width: 120px;
  padding: 0 32px 0 10px;
  font-size: var(--m-fs-sm);
  background-position: right 4px center;
}

/* ---------- 43.4 nvd3 bar charts ------------------------------------
   Generic nvd3 rules (bar colour, axes, tooltip, empty state, svg clip)
   merged into 20-components 7.4. Kept here: the report chart card.
   tokenizationMetric.html (.decryptionMetricChart > nvd3), proxyTotals.html
   (div > nvd3). */
/* chart sits in a card like the grids (P2PE) */
html body daasreports :is(.decryptionMetricChart, .proxyTotals fieldset > div:has(> nvd3)) {
  padding: 16px 32px 8px 8px;   /* right room for the last x tick label */
  background: var(--m-surface);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
}
html body daasreports :is(.decryptionMetricChart, .proxyTotals fieldset > div:has(> nvd3)):not(:has(.nv-bar, .nv-noData)) { padding: 0; border: 0; }

/* ---------- 43.5 EULA summary block -----------------------------------
   partials/reports/eula.html: fieldset > legend "Summary" + four
   .row > .col-sm-2 label / .col-sm-1 value. Labels muted, values medium,
   so it reads as a label/value list (P2PE detail rows). */
html body daasreports fieldset > fieldset > .row > .col-sm-2 { color: var(--m-text-2); }
html body daasreports fieldset > fieldset > .row > .col-sm-1 { font-weight: 500; }
html body daasreports fieldset > fieldset > .row { padding: 4px 0; }

/* ---------- 43.6 Partner path columns in the summary grids ------------
   transactionSummary.{Partner,Client,Network}.html, 3ds.{partner,client}-summary.html:
   columns 1-2 render "Name<br/><small>Path</small>" (core.dt.renderPartnerPath)
   at width 8% while 10 numeric columns take the rest, so names wrapped
   to 5-9 lines (rows ~160px). A min-width on the same columns of BOTH the
   split header table and the body table keeps them aligned (checked with
   live-grid3 / sweep-reports-shoot drift = 0); the grid already scrolls
   horizontally (12-13 columns) by design. */
html body daasreports :is(#dtPartnerTransactionSummary_wrapper, #dtClientTransactionSummary_wrapper, #dtNetworkTransactionSummary_wrapper, #dt3dsPartnerSummary_wrapper, #dt3dsClientSummary_wrapper) .dataTables_scroll table.dataTable > :is(thead, tbody) > tr > :is(th, td):nth-child(-n+2) {
  min-width: 180px;
}
/* the <small> path line under the name reads as secondary text */
html body daasreports table.dataTable > tbody > tr > td > br + small { color: var(--m-text-2); }

/* 43.7 Reports drawer sub-menu height: generalised in modern-layout.css L10
   (per-link two-line counters --m-sub-w1..4). */

/* 43.8 Chart empty state: merged into 20-components 7.4. */

/* ===== part: 44-sweep-settings.css ===== */
/* =====================================================================
   44. Sweep fixes: Personal settings, TFA setup, EULA, auth pages
   (settings sweep agent). Loaded after every other part (modern.css).
   Scope: partials/settings/*.html, partials/login.html +
   partials/include/auth.form.html, partials/settings/forgot.html.
   Shell gate G (same as modern-layout.css):
     html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"])
   ===================================================================== */

/* ---------- 44.1 TFA pages: drop the Bootstrap offset column (>=1024) -----
   partials/settings/tfa_app.html, tfa_verify.html, tfa_recovery_codes.html
   (div.wrapper.col-md-4.col-md-offset-4) and tfa_configure.html
   (div.wrapper.col-md-6.col-md-offset-3); the only offset wrappers in the
   portal. modern-layout L13 gives every .app-content child width:100%
   (max 1440px) but Bootstrap's margin-left:33%/25% stayed, so the page ran
   ~350px past the viewport (docW 1797 at 1440, 1243 at 1024; baseline
   report). Left-aligned like every other modern page, sized to the 680px
   field cap plus the 24px card padding; configure keeps a wider row for its
   label | select | button line. */
@media screen and (min-width: 1024px) {
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-content > .wrapper[class*="col-md-offset-"] {
    float: none;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: calc(var(--m-field-max) + 48px);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-content > .wrapper.col-md-6.col-md-offset-3 {
    max-width: 960px;
  }
}

/* ---------- 44.2 TFA page titles ------------------------------------------
   tfa_app.html (wrapper > form > fieldset > legend "Enable two-factor
   authentication") and tfa_recovery_codes.html (wrapper > fieldset >
   legend.hidden-print). Not matched by 3.1 (that needs .main or
   .wrapper.col-md-12), so they rendered as 500-weight section legends.
   Same P2PE title block as every other page. */
html body .app-content > .wrapper[class*="col-md-offset-"] > fieldset > legend,
html body .app-content > .wrapper[class*="col-md-offset-"] > form > fieldset > legend {
  margin: 0 0 24px 0;
  padding: 0 0 12px 0;
  border: 0;
  border-bottom: 1px solid var(--m-divider);
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 400;
  line-height: 1.4;
  color: var(--m-text);
}

/* ---------- 44.3 Recovery-code action buttons -----------------------------
   tfa_verify.html, tfa_recovery_codes.html: .row.hidden-print > .col-md-4 >
   button.btn.btn-default[style="width: 110px"] (Download / Print / Copy).
   With caps + 0.4px tracking + icon, "DOWNLOAD" ran out of the 110px box. */
html body .app-content > .wrapper[class*="col-md-offset-"] .row.hidden-print .btn[style*="width"] {
  width: auto !important;          /* beats inline style="width: 110px" */
  min-width: 110px;
}

/* ---------- 44.4 Security: TFA status as a status chip --------------------
   partials/settings/security.html: daassettings > fieldset >
   .panel.spinner-container > .panel-body > div > div[style] > span[style=
   "color: #cb2431"] (Off) / span[style="color: #28a745"] (On) and the
   "Remember Devices" value span[style="color: #28a745; font-weight: bold"].
   Inline legacy hex colors -> soft status chips (BRIEF: status chips use
   soft fills with main-color text). Card capped at the field width. */
html body daassettings fieldset > .panel.spinner-container {
  max-width: var(--m-field-max);
}
html body daassettings fieldset > .panel.spinner-container .panel-body div[style*="padding"] > span[style*="color"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin-left: 4px;
  padding: 0 10px;
  border-radius: var(--m-radius-pill);
  font-size: var(--m-fs-sm);
  line-height: 24px;
  vertical-align: middle;
}
html body daassettings fieldset > .panel.spinner-container .panel-body div[style*="padding"] > span[style*="#cb2431"] {
  color: var(--m-error-dark) !important;   /* beats inline color: #cb2431 */
  background: var(--m-error-12);
}
html body daassettings fieldset > .panel.spinner-container .panel-body div[style*="padding"] > span[style*="#28a745"] {
  color: var(--m-success-dark) !important; /* beats inline color: #28a745 */
  background: var(--m-success-12);
}
html body daassettings fieldset > .panel.spinner-container .panel-body div[style*="padding"] > span[style*="color"] > strong { font-weight: 500; }
html body daassettings fieldset > .panel.spinner-container .panel-body div[style*="padding"] > span[style*="color"] > .glyphicon { top: 0; font-size: 11px; }
/* "Remember Devices: 5 days" value: plain emphasised text, not green */
html body daassettings fieldset > .panel.spinner-container .panel-body div:not([style]) > span[style*="font-weight"] {
  color: var(--m-text) !important;         /* beats inline color: #28a745 */
  font-weight: 500 !important;             /* beats inline font-weight: bold */
}

/* 44.5 Required fields after an empty submit: merged into 10-controls 2.6b. */

/* ---------- 44.6 Login links: visible keyboard focus ----------------------
   auth.form.html: a.btn.btn-default[href="/forgot"] (restyled as a text link
   in 3.2, which also removed the button focus ring; baseline report) and the
   TFA "Enter a two-factor recovery code" a.pull-right. The .btn min-height
   (36px) kept the link box 36px tall, so the ring drew a box below the text. */
html body .app-content daasauth > form a.btn[href="/forgot"] {
  min-height: 0;
}
html body :is(.app-content, .modal-body) daasauth > form :is(a.btn[href="/forgot"], a.pull-right):focus-visible {
  outline: 0;
  border-radius: 2px;
  box-shadow: var(--m-focus-ring);
}

/* ---------- 44.7 Compact shell: "* indicates required entry" --------------
   Personal settings pages (profile.html, account.html, eula.html): daasform
   appends div.small.required-info to the <form>, outside daassettings'
   .main column, so below 1024px it sat flush at x=0 while the content has
   the 15px column gutter. (>=1024 it already lines up with the content.) */
@media screen and (max-width: 1023.98px) {
  html body .app-content > form > daassettings ~ .required-info {
    padding-left: 15px;
  }
}

/* ===== part: 45-sweep-manage2.css ===== */
/* =====================================================================
   45 SWEEP FIXES: manage2 pages
   documentstore/{list,details}.html, credentialVault/*, systemConfig/
   systemConfig.html, saml/*, manage/notification{List,Details}.html,
   manage/systemnotifications*.html, transaction-virtual-terminal/*,
   audit/{list,details}.html, dashboard/notification.details.html,
   productCommunication/*.html.
   Every selector is scoped to page-unique markup (form names, table ids,
   ng-controller, modal content) so nothing leaks to other pages.
   ===================================================================== */

/* 45.1 SAML drawer position: duplicate of modern-layout.css L14 (verified
   L14 alone pins the Manage sub-menu on /saml/samlconfiguration[/1201]). */

/* 45.2 Filter bars (audit, VT, systemConfig Orchestration): merged into
   20-components 1.10b (shared filter bar). */

/* ---------- 45.3 systemConfig/systemConfig.html -------------------------------
   - "Force <strong>System Admins</strong>" label spacing: fixed at the source
     in 10-controls 4.1 (no inline-flex on labels with inline markup).
   - The first form's Save/Cancel touched the Debug Mode card (its <hr> is
     hidden by 35-template-pages): give it the card gap.
   - Debug-mode partner checklist: 32px rows, MUI list box. */
html body form[name="systemConfig"] { margin-bottom: 24px; }
html body :is(form[name="debugModeConfig"] ul.debug-mode-config, form[name="notificationForm"] ul.partners-list) {
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius);
  background: var(--m-surface);
}
html body :is(form[name="debugModeConfig"] ul.debug-mode-config, form[name="notificationForm"] ul.partners-list) > li {
  display: flex;
  align-items: center;
  min-height: 32px;
}
html body :is(form[name="debugModeConfig"] ul.debug-mode-config, form[name="notificationForm"] ul.partners-list) > li > label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-weight: 400;
  font-size: var(--m-fs);
  color: var(--m-text);
}
html body :is(form[name="debugModeConfig"] ul.debug-mode-config, form[name="notificationForm"] ul.partners-list) > li > label > input[type="checkbox"] { margin: 0 10px 0 0; }
html body form[name="debugModeConfig"] ul.debug-mode-config > li > small { margin-left: 4px; color: var(--m-text-2); font-size: var(--m-fs-xs); }
html body form[name="notificationForm"] ul.partners-list > li > label > .glyphicon { margin-right: 10px; }
/* ---------- 45.4 documentstore/details.html -------------------------------------
   - Activation Date: daasdate's inline width:190px clipped the value
     ("09/14/2026 12"); widened to 240px so the full date-time fits.
   - Document file input: merged into 10-controls 15.3. */
html body form#document-store-details daasdate .input-group { width: 240px !important; }   /* !important: inline style="width:190px" */

/* ---------- 45.5 manage/notificationDetails.html: Quill (ng-quill-editor) --------
   Quill snow theme drew a grey #ccc box with a grey toolbar. MUI outlined
   field: 1px outline, radius 4, toolbar on the surface with a divider,
   hover/focus outline like .form-control, error outline on .ng-invalid
   after a submit (daasform adds .ng-submitted). Capped at the 680px field
   width like Title. */
html body form[name="notificationForm"] ng-quill-editor { display: block; max-width: 680px; }
html body form[name="notificationForm"] ng-quill-editor .ql-toolbar.ql-snow {
  padding: 6px 8px;
  background: var(--m-surface);
  border: 1px solid var(--m-outline);
  border-bottom-color: var(--m-divider);
  border-radius: var(--m-radius) var(--m-radius) 0 0;
  font-family: var(--m-font);
}
html body form[name="notificationForm"] ng-quill-editor .ql-container.ql-snow {
  border: 1px solid var(--m-outline);
  border-top: 0;
  border-radius: 0 0 var(--m-radius) var(--m-radius);
  font-family: var(--m-font);
  font-size: var(--m-fs);
  color: var(--m-text);
}
html body form[name="notificationForm"] ng-quill-editor:hover :is(.ql-toolbar.ql-snow, .ql-container.ql-snow) { border-color: var(--m-outline-hover); border-bottom-color: var(--m-divider); }
html body form[name="notificationForm"] ng-quill-editor:hover .ql-container.ql-snow { border-bottom-color: var(--m-outline-hover); }
html body form[name="notificationForm"] ng-quill-editor:focus-within :is(.ql-toolbar.ql-snow, .ql-container.ql-snow) { border-color: var(--m-primary); }
html body form[name="notificationForm"] ng-quill-editor:focus-within .ql-toolbar.ql-snow { border-bottom-color: var(--m-divider); }
html body form[name="notificationForm"] ng-quill-editor:focus-within .ql-container.ql-snow { box-shadow: inset 0 0 0 1px var(--m-primary); }
html body form[name="notificationForm"].ng-submitted ng-quill-editor.ng-invalid :is(.ql-toolbar.ql-snow, .ql-container.ql-snow) { border-color: var(--m-error); }
html body form[name="notificationForm"] ng-quill-editor .ql-editor { padding: 12px 14px; line-height: 1.5; }
html body form[name="notificationForm"] ng-quill-editor .ql-editor.ql-blank::before { left: 14px; font-style: normal; color: var(--m-text-2); }
/* toolbar buttons: 28px icon buttons with hover tint, primary when active */
html body form[name="notificationForm"] ng-quill-editor .ql-snow.ql-toolbar button {
  width: 30px;
  height: 30px;
  padding: 5px 6px;
  border-radius: var(--m-radius);
}
html body form[name="notificationForm"] ng-quill-editor .ql-snow.ql-toolbar button:hover { background: var(--m-hover); }
html body form[name="notificationForm"] ng-quill-editor .ql-snow.ql-toolbar button:focus-visible { outline: 0; box-shadow: var(--m-focus-ring); }
html body form[name="notificationForm"] ng-quill-editor .ql-snow .ql-stroke { stroke: var(--m-text-2); }
html body form[name="notificationForm"] ng-quill-editor .ql-snow .ql-fill { fill: var(--m-text-2); }
html body form[name="notificationForm"] ng-quill-editor .ql-snow.ql-toolbar :is(button:hover, button.ql-active) .ql-stroke { stroke: var(--m-primary); }
html body form[name="notificationForm"] ng-quill-editor .ql-snow.ql-toolbar :is(button:hover, button.ql-active) .ql-fill { fill: var(--m-primary); }
html body form[name="notificationForm"] ng-quill-editor .ql-snow.ql-toolbar button.ql-active { background: var(--m-primary-8); }
html body form[name="notificationForm"] ng-quill-editor .ql-snow a { color: var(--m-primary); }
/* Quill link tooltip */
html body form[name="notificationForm"] ng-quill-editor .ql-snow .ql-tooltip {
  padding: 8px 12px;
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-8);
  color: var(--m-text);
  font-family: var(--m-font);
}
html body form[name="notificationForm"] ng-quill-editor .ql-snow .ql-tooltip input[type="text"] {
  height: var(--m-ctl-h-sm);
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius);
}
html body form[name="notificationForm"] ng-quill-editor .ql-snow .ql-tooltip a.ql-action::after,
html body form[name="notificationForm"] ng-quill-editor .ql-snow .ql-tooltip a.ql-remove::before { color: var(--m-primary); font-weight: 500; }
/* Partners: same 680px block as the other fields; the two lists sit side
   by side inside it. "Selected Partners" label lines up with "Partners". */
html body form[name="notificationForm"] .row:has(> .col-sm-6 > ul.partners-list) { max-width: calc(680px + 30px); margin-bottom: 16px; }
html body form[name="notificationForm"] .col-sm-6 > label[style] {
  display: flex;
  align-items: flex-end;
  height: var(--m-ctl-h);   /* same block as the Search Partners field opposite */
  padding: 0 0 4px !important;   /* !important: inline style="padding:5px" */
  margin: 0;
  font-size: var(--m-fs-xs);
  font-weight: 400;
  line-height: 16px;
  color: var(--m-text-2);
}
html body form[name="notificationForm"] .col-sm-6 > input.form-control + ul.partners-list { margin-top: 8px; }
html body form[name="notificationForm"] .col-sm-6 > label + ul.partners-list { margin-top: 8px; }
/* Icon picker: 4 outlined 48px tiles */
html body form[name="notificationForm"] .input-group-prepend { display: flex; gap: 8px; }
html body form[name="notificationForm"] .input-group-prepend > .btn.btn-lg {
  width: 56px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--m-outline);
  border-radius: var(--m-radius);
  background: var(--m-surface);
}
html body form[name="notificationForm"] .input-group-prepend > .btn.btn-lg:hover { border-color: var(--m-outline-hover); background: var(--m-hover); }
html body form[name="notificationForm"] .input-group-prepend > .btn.btn-lg.selected-icon-button { border: 2px solid var(--m-primary); background: var(--m-primary-4); }

/* ---------- 45.6 audit/details.html: section cards + read-only data ----------
   The page nests its sections (User Details, Extended Data, Annotated Diff)
   INSIDE the first fieldset (form > fieldset > fieldset), so the 35-template
   section-card rule (form > fieldset ~ fieldset) never matched. Same card
   look here. Full Name is a span.form-control holding a link: centre it.
   Extended data reads as code; the jsondiffpatch box (app.css #eee + grey
   border) becomes a surface-2 code panel. */
html body form[name="auditDetailsForm"] > fieldset > fieldset {
  clear: both;
  margin: 24px 0 0;
  padding: 24px;
  background: var(--m-surface);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
}
html body form[name="auditDetailsForm"] > fieldset > fieldset > legend {
  float: left;
  width: 100%;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--m-divider);
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 400;
  color: var(--m-text);
}
html body form[name="auditDetailsForm"] > fieldset > fieldset > legend + * { clear: both; }
html body form[name="auditDetailsForm"] > fieldset > fieldset > :last-child { margin-bottom: 0; }
html body form[name="auditDetailsForm"] > fieldset { margin-bottom: 24px; }
html body form[name="auditDetailsForm"] span.form-control:has(> a) {
  display: flex;
  align-items: center;
  background-color: var(--m-surface-2);   /* reads as the read-only fields around it */
}
html body form[name="auditDetailsForm"] textarea#extendedData {
  font-family: Consolas, "Roboto Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  tab-size: 2;
}
html body form[name="auditDetailsForm"] .audit-diff > div {
  max-height: 300px;
  padding: 12px 14px;
  background: var(--m-surface-2);
  border: 1px solid var(--m-divider);
  border-radius: var(--m-radius);
  font-size: 13px;
}

/* ---------- 45.7 Notification dialogs ----------------------------------------
   dashboard/notification.details.html, manage/systemnotifications.
   modalpreview.html (NotificationDetailCtrl), productCommunication/*.html.
   They have no .modal-header: a bare .close, a centred 60px icon, an h3
   title, a .modal-body and a .btn-block "Got it" (app.css: margin 0 20%,
   width 60%, radius 2px). Here: Poppins 20px title, close × in the corner,
   divider under the title, a full-width-ish 36px contained button. Scoped
   to modal content that holds .notifications-body-display or a
   product-communication form. */
html body .modal-content:has(.notifications-body-display) { position: relative; padding: 24px 24px 20px; }
html body .modal-content:has(.notifications-body-display) > div > .close,
html body .modal-content:has(form[name^="notice"]) > .close.product-communication-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  float: none;
  margin: 0;
  z-index: 1;
}
html body .modal-content:has(.notifications-body-display) > div > .modal-icon { display: none; }
html body .modal-content:has(.notifications-body-display) :is(.bell-icon, .alert-icon, .warning-icon, .check-icon) {
  height: 56px;
  padding: 0;
  background-size: 48px;
}
html body .modal-content:has(.notifications-body-display) h3.modal-title {
  margin: 12px 0 0;
  padding: 0 24px 16px;
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h6);
  font-weight: 400;
  line-height: 1.4;
  color: var(--m-text);
  border-bottom: 1px solid var(--m-divider);
}
html body .modal-content:has(.notifications-body-display) .modal-body.notifications-body-display {
  padding: 16px 0 8px;
  font-size: var(--m-fs);
  line-height: 1.5;
  color: var(--m-text);
}
html body .modal-content:has(.notifications-body-display) .modal-body.notifications-body-display p { margin: 0; }
/* the "Got it" row picked up a 24px side/bottom footer padding: span the
   button across the divider width instead */
html body .modal-content:has(.notifications-body-display) > div > .text-center:last-child { padding: 0 0 4px; }
html body .modal-content:has(.notifications-body-display) .notifications-body-display a { color: var(--m-primary); }
html body .modal-content:has(.notifications-body-display) .btn-block,
html body .modal-content:has(form[name="noticeForm"]) .btn-block {
  width: 100%;
  margin: 8px 0 0;
  border-radius: var(--m-radius) !important;   /* !important: inline style="border-radius:2px" on the Subscribe link */
}
/* Product communication notice / accept / decline */
html body .modal-content:has(form[name^="notice"]) { position: relative; padding: 24px; }
html body .modal-content:has(form[name^="notice"]) form { margin: 0; }
html body .modal-content:has(form[name^="notice"]) .form-group { margin: 0; }
html body .modal-content:has(form[name^="notice"]) .product-communication-logo { height: 48px; margin: 8px 0 8px; background-size: auto 40px; }
html body .modal-content:has(form[name^="notice"]) h3 {
  margin: 8px 0 0;
  font-family: var(--m-font-head);
  font-size: var(--m-fs-h5);
  font-weight: 400;
  line-height: 1.35;
  color: var(--m-text);
}
html body .modal-content:has(form[name="noticeForm"]) .product-communication-list { margin: 8px 0 0; padding-left: 28px; }
html body .modal-content:has(form[name="noticeForm"]) .product-communication-list li {
  position: relative;
  padding-top: 10px;
  font-size: var(--m-fs);
  line-height: 20px;
  color: var(--m-text);
}
/* the emoji bullet (U+1F535) renders as a big blue OS emoji: a primary dot */
html body .modal-content:has(form[name="noticeForm"]) .product-communication-list li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 16px;
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background: var(--m-primary);
}
html body .modal-content:has(form[name="noticeForm"]) hr.product-communication-notice-hr { margin: 20px 0 0; border-color: var(--m-divider); }
html body .modal-content:has(form[name="noticeForm"]) h6.product-communication-notice-spacing { padding: 12px 0 8px; margin: 0; font-size: var(--m-fs-xs); font-weight: 400; color: var(--m-text-2); }
html body .modal-content:has(form[name="noticeForm"]) .product-communication-notice-button { padding: 12px 0 0; margin: 0; }
html body .modal-content:has(form[name="noticeForm"]) .product-communication-notice-button > a { font-weight: 500; text-transform: var(--m-btn-transform); letter-spacing: var(--m-btn-tracking); font-size: var(--m-fs-sm); }
html body .modal-content:has(form[name="noticeDeclineForm"]) .product-communication-decline-header,
html body .modal-content:has(form[name="noticeAcceptForm"]) .product-communication-accept-header { padding: 16px 0 0; }
html body .modal-content:has(form[name="noticeDeclineForm"]) .product-communication-decline-text {
  padding: 16px 0 0;
  margin-bottom: 48px;
  font-size: var(--m-fs-md);
  color: var(--m-text-2);
}
html body .modal-content:has(form[name="noticeAcceptForm"]) .product-communication-accept-text { padding: 8px 0 0; font-size: var(--m-fs-md); color: var(--m-text-2); }
html body .modal-content:has(form[name="noticeAcceptForm"]) .product-communication-accept-thumbs-up { margin: 24px 0 40px; background-size: 112px; height: 88px; }

/* ---------- 45.8 manage/systemnotifications.html ------------------------------
   Delete (removes the checked rows) stays btn-primary as marked up. The
   <br> before it doubled the gap under the grid card. The "Read" column's
   eye link becomes a 32px round icon button with hover. */
html body daasmanage:has(#dtSystemNotifications) [ng-controller="SystemNotificationsCtrl"] > br { display: none; }
html body daasmanage:has(#dtSystemNotifications) #dtSystemNotifications a.glyphicon-eye-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--m-icon-muted, var(--m-text-2));
  cursor: pointer;
  text-decoration: none;
}
html body daasmanage:has(#dtSystemNotifications) #dtSystemNotifications a.glyphicon-eye-open:hover { background: var(--m-hover); color: var(--m-primary); }

/* 45.9 Empty required submit + input-group-btn alignment: merged into
   10-controls 2.6b and 2.9.1. */

/* ===== modern-layout.css ===== */
/*! ShieldConex Modern UI: modern-layout.css
 *  version 0.1.0+20261014T133132Z  built 2026-10-14T13:31:32.274Z
 *  parts: modern-layout.css
 *  CSS-only reskin. Loads after all legacy CSS. */

/* ===== part: modern-layout.css ===== */
/* =====================================================================
   ShieldConex Portal: Modern UI, logged-in shell (modern-layout.css)
   Loaded right AFTER modern.css. Layout only applies at >= 1024px on
   screen and only while the logged-in header is visible:

     G = html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"])
     B = html:has(link[href*="app.theme.bluefin.css"]) + G   (colors/logo)

   - .app-header is rendered by index.ejs with ng-if + ng-show, so it is
     absent on /login, /forgot and while logged out, and carries .ng-hide
     until shown. Error routes set body.error-page (app.css hides the
     header there) so they are excluded too.
   - Geometry (position, size, spacing) applies on every host and
     neutralizes the legacy theme geometry (.header-top padding-left:230px,
     .nav>li height:70px, .navbar-nav>li>a padding-top:25px).
   - Shell COLORS and LOGO only under B. Partner hosts keep their theme
     colors (header bg, link colors, active colors, logo image).
   - Below 1024px nothing in this file applies.
   ===================================================================== */

:root {
  --m-subnav-w: 224px;      /* section sub-nav column (leftmenu.html) */
  --m-nav-item-h: 44px;     /* drawer nav item */
  --m-subnav-item-h: 40px;  /* section sub-nav item */
  --m-avatar-size: 36px;    /* top bar avatar circle */
}

@media screen and (min-width: 1024px) {

  /* ---------- Shell gate ------------------------------------------------
   Every shell rule is gated on: not an error route, AND either the header is
   visible (.app-header, ng-if/ng-show in index.ejs) OR the page was
   server-rendered for a signed-in user (index.ejs body ng-init="init('{user json}'...",
   vs init(undefined,...) when signed out). The second arm reserves the
   drawer/top-bar space from first paint, before the authenticated modules
   lazy-load and the header appears; otherwise DataTables (scrollX) measures
   its columns against the full-width page and they no longer fit once the
   drawer appears (reported on cert, Orchestrations grid). :is() keeps the
   original specificity. */
/* ---------- L1 Page frame: body, content offset ---------------------
     index.ejs body + css/app.css (body{display:flex;flex-direction:column;
     min-height:calc(100vh - 52px);margin-bottom:52px} .app-content{flex-grow:1})
     Body padding offsets everything in flow (header alerts, ng-view,
     footer) by the fixed drawer and top bar. */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) {
    padding-left: var(--m-drawer-w);
    padding-top: var(--m-topbar-h);
    margin-bottom: 0;              /* app.css reserved 52px for the fixed footer */
    min-height: 100vh;
    background-color: var(--m-surface);   /* P2PE content area is white */
  }

  /* index.ejs: div[ng-view].app-content */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-content {
    padding: 24px;
    min-width: 0;
  }

  /* Pages without a section sub-nav: div.wrapper.col-md-12 (dashboard,
     contact, documentation, virtualTerminal, expired). Drop the Bootstrap
     gutter so content aligns with the 24px content padding. */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-content > .wrapper.col-md-12 {
    padding-left: 0;
    padding-right: 0;
  }

  /* ---------- L2 Drawer: #header becomes a fixed left drawer -----------
     index.ejs: .app-header > #header.navbar.navbar-default.navbar-static-top
       > .header-top > .header-top-menu > (.navbar-header, nav.navbar-collapse)
     Geometry on every host. */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--m-drawer-w);
    min-height: 0;
    margin: 0;
    border-width: 0 1px 0 0;
    border-style: solid;
    border-radius: 0;
    z-index: 1030;                 /* same layer as Bootstrap fixed navbars, below modals (1040+) */
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* theme: .header-top{padding-left:230px; background:... 10px 0}
     Logo stays the theme's background image. Partner logos are not
     resized: reserve the legacy 70px logo strip above the nav. */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header > .header-top {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 72px 0 0 0;
  }

  /* theme: .header-top-menu{background-color:<brand>} fills the drawer
     below the logo (partner hosts keep their color). */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header .header-top-menu {
    flex: 1 1 auto;
  }

  /* .navbar-header only holds the mobile toggle; theme gives
     .navbar-header.active height:100%. Bootstrap already hides
     .navbar-toggle and forces .navbar-collapse.collapse{display:block
     !important} at >= 768px; restated here for >= 1024. */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header .navbar-header {
    float: none;
    height: auto;
    margin: 0;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header .navbar-toggle {
    display: none;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header .navbar-collapse {
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  /* ---------- L3 Drawer nav items ---------------------------------------
     partials/include/topmenu.html (<daastopmenu>): ul.nav.navbar-nav >
     li[.active] > a[href]. Leaves from js/app.js MENU (hideInTopMenu
     "Personal settings" is never rendered here). */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu {
    display: block;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav {
    float: none;
    margin: 0;
    padding: 8px 12px;
  }
  /* theme: .nav>li{height:70px}; Bootstrap >=768: .navbar-nav>li{float:left} */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li {
    float: none;
    height: auto;
    margin: 0 0 4px 0;
  }
  /* theme: .navbar-nav>li>a{padding-top:25px}; active a gets height:100% */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--m-nav-item-h);
    padding: 0 12px;
    border-radius: var(--m-radius);
    font-family: var(--m-font);
    font-size: var(--m-fs);
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Icons. Glyphicons Halflings is already loaded by bootstrap.min.css.
     ---------------------------------------------------------------
     MAPPING TABLE  (swap content + font-family to Material Symbols later)
     href match                 MENU item          Glyphicon (code)          Material Symbol
     a[href="/"]                Dashboard          dashboard     \e141       dashboard
     a[href^="/manage"]         Manage             cog           \e019       manage_accounts
     a[href^="/saml"]           Manage (SAML only) cog           \e019       manage_accounts
     a[href^="/logs"]           API Logs           list-alt      \e032       receipt_long
     a[href="/virtualTerminal"] Virtual Terminal   credit-card   \e177       point_of_sale
     a[href^="/reports"]        Reports            stats         \e185       bar_chart
     a[href="/documentation"]   Documentation      book          \e043       menu_book
     a[href="/contact"]         Contact Support    earphone      \e182       support_agent
     a[href^="/settings"]       Personal settings  user          \e008       person
     (any other)                fallback           th-list       \e012       list
     Notes: Manage/API Logs/Reports have no url in MENU; the directive
     copies the first accessible leaf url, hence the prefix matches.
     --------------------------------------------------------------- */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a::before {
    content: "\e012";
    flex: 0 0 20px;
    width: 20px;
    font-family: "Glyphicons Halflings";
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    -webkit-font-smoothing: antialiased;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href="/"]::before { content: "\e141"; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a:is([href^="/manage"], [href^="/saml"])::before { content: "\e019"; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/logs"]::before { content: "\e032"; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/virtualTerminal"]::before { content: "\e177"; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/reports"]::before { content: "\e185"; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/documentation"]::before { content: "\e043"; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/contact"]::before { content: "\e182"; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/settings"]::before { content: "\e008"; }

  /* ---------- L4 Top bar ------------------------------------------------
     Strip: .app-header::before (decorative, fixed). Contents:
     index.ejs ul.nav.navbar-nav.navbar-right > span.badge (ng-if count>0)
     + li.btn-group > a.dropdown-toggle > span.account-link, ul.dropdown-menu.
     The strip is a new neutral surface on every host, so its contents get
     neutral, legible colors everywhere (partner link colors were designed
     for the old colored header bar). */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header::before {
    content: "";
    position: fixed;
    top: 0;
    left: var(--m-drawer-w);
    right: 0;
    height: var(--m-topbar-h);
    background: var(--m-surface);
    border-bottom: 1px solid var(--m-divider);
    z-index: 1029;                 /* under the drawer layer that holds .navbar-right */
    pointer-events: none;          /* decorative only */
  }

  /* .navbar-right is fixed (escapes the drawer's overflow) at the top right */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.nav.navbar-nav.navbar-right {
    position: fixed;
    top: 0;
    right: 24px;
    height: var(--m-topbar-h);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    z-index: 2;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > li.btn-group {
    float: none;
    height: var(--m-topbar-h);     /* theme .nav>li{height:70px} */
    display: flex;
    align-items: center;
  }

  /* Avatar: a.dropdown-toggle > span.account-link (empty; title = principal.title).
     app.css draws a kebab via .account-link:after{content:'\2807'}; replaced
     with a person glyph inside a circle. No initials in markup (GAP). */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > li.btn-group > a.dropdown-toggle {
    display: flex;
    align-items: center;
    height: auto;
    padding: 0;
    border-radius: 50%;
    background: transparent;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--m-avatar-size);
    height: var(--m-avatar-size);
    border-radius: 50%;
    background: var(--m-text-2);   /* neutral on partner hosts; navy under B */
    color: var(--m-surface);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .account-link::after {
    content: "\e008";              /* glyphicon-user */
    font-family: "Glyphicons Halflings";
    font-size: 16px;
    line-height: 1;
    font-style: normal;
    font-weight: normal;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > li.btn-group > a.dropdown-toggle:hover .account-link {
    box-shadow: 0 0 0 4px var(--m-hover);
  }

  /* User dropdown (Bootstrap .navbar-right .dropdown-menu is right-aligned at >=768) */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .dropdown-menu {
    top: calc(100% - 8px);
    right: 0;
    left: auto;
    min-width: 200px;
    padding: 8px 0;
    border: 0;
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-8);
    background: var(--m-surface);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 16px;
    font-size: var(--m-fs);
    color: var(--m-text);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .dropdown-menu > li > a:is(:hover, :focus) {
    background: var(--m-hover);
    color: var(--m-text);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .dropdown-menu > li > a > .glyphicon {
    color: var(--m-text-2);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .dropdown-menu > .divider {
    margin: 8px 0;
    background: var(--m-divider);
  }

  /* Bell: span.badge.badge-danger > a[href="/manage/systemnotifications"]{{count}}.
     Only rendered when count > 0 (ng-if); ng-cloak keeps its !important hide.
     app.css: .badge{position:relative;margin:15px 25px 15px -25px;background:#ff0000}
     The span becomes a 40px bell; the link becomes the count pill, with
     its hit area enlarged to the whole 40px box via a::after. */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > span.badge {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--m-text-2);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > span.badge::before {
    content: "\e123";              /* glyphicon-bell */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Glyphicons Halflings";
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
    pointer-events: none;          /* decorative pseudo; the link stays clickable */
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > span.badge > a {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--m-error);
    color: var(--m-surface);
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > span.badge > a::after {
    content: "";
    position: absolute;
    inset: -3px -1px -19px -21px;  /* covers the whole 40px bell box */
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > span.badge:hover {
    background: var(--m-hover);
  }

  /* ---------- L5 Header alert banners and growl -------------------------
     index.ejs: .app-header > div[uib-alert].alert.alert-header-bar (after
     #header, in flow; body padding places them under the top bar).
     angular-growl.min.css: .growl-container.growl-fixed.top-*{top:10px}
     (z-index 9999): pushed below the top bar so it doesn't cover the avatar. */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > .alert-header-bar {
    margin: 16px 24px 0 24px;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .growl-container.growl-fixed:is(.top-right, .top-left, .top-center) {
    top: calc(var(--m-topbar-h) + 8px);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .growl-container.growl-fixed.top-left {
    left: calc(var(--m-drawer-w) + 16px);
  }

  /* ---------- L6 Section sub-nav ----------------------------------------
     partials/include/{manage,apilogs,reports,settings}.html:
       div.wrapper > .sidebar-wrapper.col-md-2 > .sidebar > daasleftmenu
         > .list-group > a.list-group-item.disabled (caption) + a.list-group-item[.active] > i.icon-home
       div.wrapper > .main-wrapper.col-md-10 > .main[ng-transclude]
     Fixed-width sticky column + fluid main. */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .wrapper:has(> .sidebar-wrapper + .main-wrapper) {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .wrapper > .sidebar-wrapper {
    position: sticky;
    top: calc(var(--m-topbar-h) + 24px);
    flex: 0 0 var(--m-subnav-w);
    width: var(--m-subnav-w);
    max-height: calc(100vh - var(--m-topbar-h) - 48px);
    overflow-y: auto;
    float: none;
    padding: 0;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .wrapper > .main-wrapper {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    float: none;
    padding: 0;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group {
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > .list-group-item {
    display: flex;
    align-items: center;
    min-height: var(--m-subnav-item-h);
    margin: 0 0 2px 0;
    padding: 0 16px;
    border: 0;
    border-radius: var(--m-radius);
    font-size: var(--m-fs);
    line-height: 20px;
  }
  /* leftmenu.html wraps the label in <i class="icon-home icon-1x">: no italics */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > .list-group-item > i {
    font-style: normal;
  }
  /* Caption (a.list-group-item.disabled, e.g. "Manage"): overline heading */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > .list-group-item.disabled {
    min-height: 0;
    margin-bottom: 4px;
    padding: 4px 16px 8px 16px;
    background: transparent;
    color: var(--m-text-2);
    font-size: var(--m-fs-xs);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* ---------- L7 Footer --------------------------------------------------
     index.ejs: div.navbar-fixed-bottom.footer.app-footer
     app.css: div.footer{padding;font-size:x-small;border-top;z-index:10}
     .app-footer{height:52px}. Becomes an in-flow, centered, muted line
     at the bottom of the content area (body is a flex column). */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-footer {
    position: static;
    height: auto;
    margin: 0;
    padding: 16px 24px;
    border-width: 0;
    border-top: 1px solid var(--m-divider);
    background: transparent;
    color: var(--m-text-2);
    font-size: var(--m-fs-xs);
    text-align: center;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-footer small {
    font-size: 10px;
    color: var(--m-text-disabled);
  }

  /* ---------- L8 Bluefin shell colors and logo (B gate) ------------------
     css/theme/app.theme.bluefin.css: .header-top background #f8f8f8 + logo,
     .header-top-menu #239fd9, nav link #f8f8f8, active #777/#f8f8f8,
     .list-group-item.active #239fd9. */
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header {
    background: var(--m-surface);
    border-color: var(--m-divider);
  }
  /* Logo: same /images/logo.png background (223x61), sized into a 64px row */
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header > .header-top {
    /* 1px less than the bar: the top bar's divider is drawn INSIDE its 64px
       (row 63); the drawer's is the menu's border-top below this padding.
       Without the -1px it sat one row lower (reported on cert). */
    padding-top: calc(var(--m-topbar-h) - 1px);
    background-color: var(--m-surface);
    background-position: 20px 18px;
    background-size: auto 28px;
  }
  /* No app-name label next to the logo (removed on request, matches P2PE). */
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header .header-top-menu {
    background-color: var(--m-surface);
    border-top: 1px solid var(--m-divider);
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header .navbar-header.active {
    background: transparent;
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a {
    color: var(--m-text);
    background: transparent;
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a::before {
    color: var(--m-text-2);
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a:is(:hover, :focus) {
    color: var(--m-text);
    background: var(--m-hover);
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li.active > a,
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li.active > a:is(:hover, :focus) {
    color: var(--m-nav-active-text);
    background: var(--m-nav-active-bg);
    font-weight: 500;
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li.active > a::before {
    color: var(--m-nav-active-text);
  }
  /* Avatar: navy circle */
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .account-link {
    background: var(--m-navy);
  }

  /* Sub-nav colors (theme: .list-group-item.active{#f8f8f8 on #239fd9}) */
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > a.list-group-item:not(.disabled) {
    color: var(--m-text);
    background: transparent;
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > a.list-group-item:not(.disabled):is(:hover, :focus) {
    background: var(--m-hover);
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > a.list-group-item.active,
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > a.list-group-item.active:is(:hover, :focus) {
    color: var(--m-nav-active-text);
    background: var(--m-nav-active-bg);
    font-weight: 500;
  }

  /* Keyboard focus stays visible on drawer, sub-nav and top bar links */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header :is(daastopmenu, .navbar-right) a:focus-visible,
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group-item:focus-visible {
    outline: 0;
    box-shadow: var(--m-focus-ring);
  }
}

/* ---------- L9 Short section sub-nav as a tab row ------------------------
   partials/include/settings.html, i.e. <daassettings> (Personal settings:
   Profile / Account / Security). It has no drawer item of its own, so it
   keeps a tab row; Manage, API Logs and Reports go into the drawer (L10). Chosen by section element, NOT by link
   count: leftmenu.html fills its ng-repeat a frame after the wrapper
   renders, so a count-based :has() flipped Manage to tabs for that frame
   and DataTables measured the grid at the wider tab-layout width.
   Wide log/report grids need the width more than a 3-item column does;
   P2PE uses tabs for small sibling sets. Long menus (Manage, 17 items)
   keep the sticky column from L6. Pure layout; colors stay brand-gated.
   Same gate prefix as L6/L8; the extra section element out-ranks them. */
@media screen and (min-width: 1024px) {
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content daassettings > .wrapper:has(> .sidebar-wrapper + .main-wrapper) {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content daassettings > .wrapper > .sidebar-wrapper {
    position: static;
    flex: 0 0 auto;
    width: auto;
    max-height: none;
    overflow: visible;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content daassettings > .wrapper > .sidebar-wrapper .list-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0 8px;
    border-bottom: 1px solid var(--m-divider);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content daassettings > .wrapper > .sidebar-wrapper .list-group > .list-group-item {
    min-height: 48px;
    margin: 0 0 -1px 0;          /* indicator sits on the divider */
    padding: 0 16px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
  }
  /* Column direction: the L6 flex:1 1 0 basis would collapse the main area
     to Bootstrap's .col-md-* min-height:1px, so size it to its content. */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content daassettings > .wrapper > .main-wrapper {
    flex: 0 0 auto;
  }
  /* Caption ("API Logs") becomes a quiet overline at the start of the row */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content daassettings > .wrapper > .sidebar-wrapper .list-group > .list-group-item.disabled {
    min-height: 48px;
    margin: 0 8px -1px 0;
    padding: 0 16px 0 0;
  }
  /* Bluefin colors for the tab variant: no fill, primary text + 2px indicator */
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content daassettings > .wrapper > .sidebar-wrapper .list-group > a.list-group-item:not(.disabled) {
    color: var(--m-text-2);
    font-weight: 500;
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content daassettings > .wrapper > .sidebar-wrapper .list-group > a.list-group-item.active,
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content daassettings > .wrapper > .sidebar-wrapper .list-group > a.list-group-item.active:is(:hover, :focus) {
    color: var(--m-primary);
    background: transparent;
    border-bottom-color: var(--m-primary);
  }
}


/* ---------- L10 Section sub-menu inside the drawer (P2PE style) ------------
   partials/include/{manage,apilogs,reports}.html: the section menu
   (.sidebar-wrapper > .sidebar > <daasleftmenu> > .list-group, from
   include/leftmenu.html) is page content, not part of the drawer. It is
   pinned (position:fixed) into the drawer directly under the ACTIVE drawer
   item, and the drawer items below are pushed down by its height. The
   content area loses the side column (~250px wider).
   How (CSS only, no markup):
   - --m-nav-n / --m-nav-act: how many drawer items exist and which one is
     active (role-dependent, so counted with :has(:nth-child()) ladders).
   - --m-sub-all / --m-sub-cap: section link count, minus the caption link
     (a.list-group-item.disabled, hidden here since the drawer item already
     names the section).
   - Height = min(links x item height, room left above the remaining drawer
     items); longer lists scroll inside the sub-menu, the drawer never
     scrolls (so the pinned list can't drift from its parent item).
   Geometry: first drawer item top = --m-nav-first-top, pitch = item height +
   4px gap (L3). Items are single-line (ellipsis) so the pitch is exact.
   Limits (GAPS, need topmenu.html to nest leaves from MENU in js/app.js):
   only the current section can show (other sections' links aren't in the
   DOM), no expand/collapse carets, and keyboard/screen-reader order is
   still DOM order (sub-links come after the page title).
   Personal settings (<daassettings>) keeps its tab row (L9). */
@media screen and (min-width: 1024px) {
  :root {
    --m-nav-first-top: 72px;  /* drawer logo block (63px, see L7) + ul padding (measured) */
    --m-nav-pitch: 48px;      /* --m-nav-item-h 44px + 4px gap */
    --m-sub-item-h: 36px;
  }
  /* Counters (later rules win: highest matching k) */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li:nth-child(1)) { --m-nav-n: 1; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li:nth-child(2)) { --m-nav-n: 2; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li:nth-child(3)) { --m-nav-n: 3; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li:nth-child(4)) { --m-nav-n: 4; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li:nth-child(5)) { --m-nav-n: 5; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li:nth-child(6)) { --m-nav-n: 6; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li:nth-child(7)) { --m-nav-n: 7; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li:nth-child(8)) { --m-nav-n: 8; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li:nth-child(9)) { --m-nav-n: 9; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li:nth-child(10)) { --m-nav-n: 10; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li.active:nth-child(1)) { --m-nav-act: 1; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li.active:nth-child(2)) { --m-nav-act: 2; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li.active:nth-child(3)) { --m-nav-act: 3; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li.active:nth-child(4)) { --m-nav-act: 4; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li.active:nth-child(5)) { --m-nav-act: 5; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li.active:nth-child(6)) { --m-nav-act: 6; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li.active:nth-child(7)) { --m-nav-act: 7; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li.active:nth-child(8)) { --m-nav-act: 8; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li.active:nth-child(9)) { --m-nav-act: 9; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(daastopmenu > ul > li.active:nth-child(10)) { --m-nav-act: 10; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(1)) { --m-sub-all: 1; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(2)) { --m-sub-all: 2; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(3)) { --m-sub-all: 3; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(4)) { --m-sub-all: 4; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(5)) { --m-sub-all: 5; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(6)) { --m-sub-all: 6; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(7)) { --m-sub-all: 7; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(8)) { --m-sub-all: 8; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(9)) { --m-sub-all: 9; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(10)) { --m-sub-all: 10; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(11)) { --m-sub-all: 11; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(12)) { --m-sub-all: 12; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(13)) { --m-sub-all: 13; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(14)) { --m-sub-all: 14; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(15)) { --m-sub-all: 15; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(16)) { --m-sub-all: 16; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(17)) { --m-sub-all: 17; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(18)) { --m-sub-all: 18; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(19)) { --m-sub-all: 19; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(20)) { --m-sub-all: 20; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(21)) { --m-sub-all: 21; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(22)) { --m-sub-all: 22; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(23)) { --m-sub-all: 23; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(24)) { --m-sub-all: 24; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(25)) { --m-sub-all: 25; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(26)) { --m-sub-all: 26; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(27)) { --m-sub-all: 27; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(28)) { --m-sub-all: 28; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(29)) { --m-sub-all: 29; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > :nth-child(30)) { --m-sub-all: 30; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > .list-group-item.disabled) { --m-sub-cap: 1; }
  /* Two-line sub-menu items: labels that wrap at the drawer width (fixed at
     >=1024, so the wrap is deterministic): each adds one 18px text line to
     the list height. Generalised from the reports sweep (43.7): counted per
     link, so roles that do not get a link do not get its extra line.
     Measured at 1440 and 1024 (Roboto 14px, 48px indent). Add a link here
     if a new long label wraps (sub-menu would scroll by one line). */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > a.list-group-item[href="/reports/transaction-summary-partner"]) { --m-sub-w1: 1; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > a.list-group-item[href="/reports/transaction-summary-client"]) { --m-sub-w2: 1; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > a.list-group-item[href="/reports/transaction-summary-network"]) { --m-sub-w3: 1; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper .list-group > a.list-group-item[href="/reports/proxyRequestSummary"]) { --m-sub-w4: 1; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper) {
    --m-sub-n: calc(var(--m-sub-all, 0) - var(--m-sub-cap, 0));
    --m-sub-top: calc(var(--m-nav-first-top) + var(--m-nav-act, 1) * var(--m-nav-pitch));
    --m-sub-room: calc(100vh - var(--m-sub-top) - (var(--m-nav-n, 1) - var(--m-nav-act, 1)) * var(--m-nav-pitch) - 16px);
    --m-sub-wrap: calc(var(--m-sub-w1, 0) + var(--m-sub-w2, 0) + var(--m-sub-w3, 0) + var(--m-sub-w4, 0));
    --m-sub-h: min(calc(var(--m-sub-n) * var(--m-sub-item-h) + 8px + var(--m-sub-wrap) * 18px), max(var(--m-sub-room), 3 * var(--m-sub-item-h)));
  }

  /* Push the drawer items after the active one down by the sub-menu height */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content :is(daasmanage, daasapilogs, daasreports) .sidebar-wrapper) > .app-header daastopmenu > ul.nav.navbar-nav > li.active {
    margin-bottom: calc(var(--m-sub-h) + 4px);
  }
  /* Single-line drawer items keep the pitch exact */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The section menu, pinned into the drawer under its parent item */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content :is(daasmanage, daasapilogs, daasreports) > .wrapper > .sidebar-wrapper {
    position: fixed;
    z-index: 1031;            /* above the drawer (#header), below modals (1040+) */
    top: var(--m-sub-top);
    left: 12px;
    width: calc(var(--m-drawer-w) - 25px);
    height: var(--m-sub-h);
    max-height: none;
    margin: 0;
    padding: 0 0 8px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Scroll shadows: a soft edge shadow shows only while more links are
       hidden above/below (covers are background-attachment:local and move
       with the content; the shadows stay put). */
    background:
      linear-gradient(var(--m-surface) 30%, rgba(255,255,255,0)) top / 100% 24px no-repeat local,
      linear-gradient(rgba(255,255,255,0), var(--m-surface) 70%) bottom / 100% 24px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.14), rgba(0,0,0,0)) top / 100% 10px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.14), rgba(0,0,0,0)) bottom / 100% 10px no-repeat scroll;
    background-color: var(--m-surface);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content :is(daasmanage, daasapilogs, daasreports) > .wrapper > .sidebar-wrapper .list-group > .list-group-item {
    display: block;
    min-height: var(--m-sub-item-h);
    height: auto;
    margin: 0;
    padding: 9px 12px 9px 48px;   /* indented under the parent's label */
    line-height: 18px;
    font-size: var(--m-fs);
    border-radius: var(--m-radius);
    /* Long names (Reports: "Network Token Request Summary") wrap to two
       lines instead of an ellipsis. Safe: only the TOP-level drawer items
       need an exact pitch; extra sub-menu height just scrolls inside it. */
    white-space: normal;
  }
  /* Caption ("Manage") is redundant next to its drawer item; it is not a link */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content :is(daasmanage, daasapilogs, daasreports) > .wrapper > .sidebar-wrapper .list-group > .list-group-item.disabled {
    display: none;
  }
  /* Content takes the full width (the side column is out of flow now) */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content :is(daasmanage, daasapilogs, daasreports) > .wrapper > .main-wrapper {
    flex: 1 1 auto;
    width: 100%;
  }
}


/* ---------- L11 Compact shell below 1024px ------------------------------
   index.ejs header + include/topmenu.html + include/leftmenu.html.
   Reported on cert (window resized): blue band with a white logo box,
   70px blue menu items, and the 17-row italic section list stacked above
   the page. Bootstrap's own behaviour is kept (hamburger collapse below
   768px, columns stacking); this restyles it as an MUI mobile app bar.
   Layout on every host; colors only under the Bluefin brand gate.
   Legacy rules beaten: theme .header-top{padding-left:230px; logo bg},
   .header-top-menu{#239fd9}, .nav>li{height:70px}, .navbar-nav>li>a
   {padding-top:25px; color:#f8f8f8}. */
@media screen and (max-width: 1023.98px) {
  /* App bar row */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header { min-height: 0; margin: 0; border-width: 0 0 1px 0; border-radius: 0; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header .navbar-header { min-height: 56px; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header .navbar-toggle {
    margin: 8px 8px 8px 0;
    padding: 10px;
    border: 0;
    border-radius: 50%;
    background: transparent;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header .navbar-toggle .icon-bar { width: 20px; height: 2px; border-radius: 1px; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li { height: auto; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a {
    padding: 0 16px;
    height: 48px;
    line-height: 48px;
    font-size: var(--m-fs);
    font-weight: 500;
    white-space: nowrap;
  }
  /* Section menu: one tab row that scrolls sideways (caption hidden) */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .wrapper > .sidebar-wrapper { float: none; width: auto; padding: 0; margin-bottom: 16px; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .wrapper > .main-wrapper { float: none; width: auto; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--m-divider);
    box-shadow: none;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > .list-group-item {
    flex: 0 0 auto;
    margin: 0 0 -1px 0;
    padding: 0 14px;
    height: 44px;
    line-height: 44px;
    white-space: nowrap;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    /* no background here: on partner hosts the theme's .list-group-item.active
       (white text on the partner colour) must keep its fill (sweep: white on
       white at 768). Bluefin colours are set in the brand-gated block. */
    font-size: var(--m-fs);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > .list-group-item > i { font-style: normal; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > .list-group-item.disabled { display: none; } /* caption, not a link */
}

/* 768-1023px: Bootstrap shows the menu inline. Logo on the left, items on
   one line in the bar (scrolls sideways if they don't fit), avatar right. */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header > .header-top { padding-left: 128px; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header .navbar-collapse { padding: 0 8px 0 0; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav {
    display: flex;
    max-width: calc(100% - 64px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a { height: 56px; line-height: 56px; border-bottom: 2px solid transparent; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right { margin: 10px 0 0 0; }
}

/* Below 768px: hamburger. The open menu is a full-width white list. */
@media screen and (max-width: 767.98px) {
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header > .header-top { padding-left: 0; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header .navbar-collapse { margin: 0; padding: 8px 8px 12px; border-top: 1px solid var(--m-divider); box-shadow: none; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav { margin: 0; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a { display: flex; align-items: center; gap: 16px; border-radius: var(--m-radius); }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a::before {
    content: "\e012";
    font-family: "Glyphicons Halflings";
    font-size: 16px;
    width: 20px;
    text-align: center;
    line-height: 1;
  }
    html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href="/"]::before { content: "\e141"; }
    html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a:is([href^="/manage"], [href^="/saml"])::before { content: "\e019"; }
    html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/logs"]::before { content: "\e032"; }
    html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/virtualTerminal"]::before { content: "\e177"; }
    html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/reports"]::before { content: "\e185"; }
    html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/documentation"]::before { content: "\e043"; }
    html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/contact"]::before { content: "\e182"; }
    html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/settings"]::before { content: "\e008"; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right { margin: 8px 0 0 0; padding: 0 8px; }
}

/* Bluefin colors (partner hosts keep their theme colors) */
@media screen and (max-width: 1023.98px) {
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header > .header-top {
    background-color: var(--m-surface);
    background-position: 16px 16px;
    background-size: auto 24px;
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header .header-top-menu { background-color: transparent; }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header { background: var(--m-surface); border-color: var(--m-divider); }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header .navbar-toggle:is(:hover, :focus) { background: var(--m-hover); }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header .navbar-toggle .icon-bar { background-color: var(--m-text-2); }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header .navbar-collapse { background: var(--m-surface); }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a,
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a:is(:hover, :focus) { color: var(--m-text); background: transparent; }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a::before { color: var(--m-text-2); }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li > a:hover { background: var(--m-hover); }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li.active > a,
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li.active > a:is(:hover, :focus) { color: var(--m-nav-active-text); background: var(--m-nav-active-bg); height: 48px; }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li.active > a::before { color: var(--m-nav-active-text); }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .account-link { color: var(--m-text-2); }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > a.list-group-item:not(.disabled),
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > a.list-group-item:not(.disabled):is(:hover, :focus) { color: var(--m-text-2); background: transparent; font-weight: 500; }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > a.list-group-item.active,
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) .app-content .sidebar-wrapper .list-group > a.list-group-item.active:is(:hover, :focus) { color: var(--m-primary); background: transparent; border-bottom-color: var(--m-primary); }
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  /* Inline bar: active item is an underline, not a fill */
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li.active > a,
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav > li.active > a:is(:hover, :focus) { height: 56px; background: transparent; border-bottom-color: var(--m-primary); }
}

/* L11b Compact shell: avatar + inline-bar fit (below 1024px)
   index.ejs ul.navbar-right > li.btn-group > a.dropdown-toggle > span.account-link
   (app.css draws a kebab via .account-link:after{content:'\2807'}). Same
   avatar as the desktop top bar (L4); at 768-1023px the items + avatar fit
   on one 56px row (the item row scrolls sideways if needed). */
@media screen and (max-width: 1023.98px) {
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--m-text-2);
    color: var(--m-surface);
    vertical-align: middle;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .account-link::after {
    content: "\e008";
    font-family: "Glyphicons Halflings";
    font-size: 14px;
    line-height: 1;
    font-style: normal;
    font-weight: normal;
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right .account-link { background: var(--m-navy); color: var(--m-surface); }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > li.btn-group > a.dropdown-toggle { padding: 8px; height: auto; line-height: 1; }
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header daastopmenu > ul.nav.navbar-nav { max-width: calc(100% - 112px); }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right {
    display: flex;
    align-items: center;
    height: 56px;
    margin: 0;
  }
}

/* ---------- L12 Brand lockup: Bluefin square mark + "ShieldConex(R)" -------
   index.ejs #header > .header-top (theme draws /images/logo.png, the full
   "Bluefin" wordmark, as its background). Requested: the Bluefin square
   mark with the product name, like P2PE's "mark + P2PE Manager".
   The mark is cut from the SAME /images/logo.png (already loaded by the
   theme, so no new request): logo.png is 223x61 and the square occupies
   x16-52 / y13-47; scaled to 24px tall (x0.6857) that is a 26x24 window at
   background-position -11px -9px on a 153px-wide image.
   Bluefin hosts only (partner hosts keep their own logo). */
html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header > .header-top {
  position: relative;
  background-image: none;
}
html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header > .header-top::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 26px;
  height: 24px;
  background: url("/images/logo.png") no-repeat -11px -9px / 153px auto;
  pointer-events: none;
}
html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header > .header-top::after {
  content: "ShieldConex\00AE";
  position: absolute;
  top: 0;
  left: 56px;
  height: var(--m-topbar-h);
  line-height: var(--m-topbar-h);
  font-family: var(--m-font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--m-navy);
  white-space: nowrap;
  pointer-events: none;
}
/* Compact bar (<1024px): 56px row */
@media screen and (max-width: 1023.98px) {
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header > .header-top::before { top: 16px; left: 16px; }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header > .header-top::after { left: 50px; height: 56px; line-height: 56px; }
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > #header > .header-top { padding-left: 180px; }
}

/* L11c Compact shell: bell badge + avatar as one centered row (<1024px)
   index.ejs ul.navbar-right > span.badge (ng-if count>0) + li.btn-group.
   app.css positions the badge absolutely for the old bar; below 768px it
   was clipped at the panel's left edge and the avatar sat loose below it. */
@media screen and (max-width: 1023.98px) {
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    float: none;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > * { float: none; position: static; margin: 0; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > span.badge {
    order: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    line-height: 22px;
    border-radius: 11px;
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > span.badge > a { color: #FFFFFF; text-decoration: none; }
  /* theme .nav>li{height:70px} also hits this li and pinned the avatar to the top */
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right > li.btn-group { order: 1; height: auto; }
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right { float: right; height: 56px; margin: 0; }
}
@media screen and (max-width: 767.98px) {
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header ul.navbar-right {
    justify-content: flex-end;
    margin: 8px 0 0 0;
    padding: 8px 8px 0;
    border-top: 1px solid var(--m-divider);
  }
}

/* ---------- L13 Content width cap (PayConex pattern) ----------------------
   index.ejs div[ng-view].app-content > (daasmanage | daasapilogs | daasreports
   | daassettings | div.wrapper.col-md-12) and the header banners
   (.alert-header-bar). On wide screens the page used to stretch edge to edge;
   PayConex caps the main content and keeps it left-aligned next to the
   drawer, with the top bar still full width. 1440px fits the widest grids
   (12 columns x 112px min = 1344px) without sideways scrolling; forms keep
   their own 680px field cap. Set by CSS from first paint, so DataTables
   measures against the capped width. */
@media screen and (min-width: 1024px) {
  :root { --m-content-max: 1440px; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-content > * {
    width: 100%;
    max-width: var(--m-content-max);
  }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]) > .app-header > .alert-header-bar {
    max-width: var(--m-content-max);
  }
}


/* ---------- L14 Sweep fixes: drawer edge cases -----------------------------
   Found by the all-routes sweep (sweep/runs/baseline-20261002).
   1. Partner-branded hosts: the drawer's logo row is taller when the Bluefin
      lockup (L12) isn't used, so drawer items start at 80px, not 73px; the
      pinned section menu (L10) started 7px too high and overlapped the
      active item.
   2. SAML pages (/saml/samlconfiguration[/:id], partials/saml/*.html) use the
      Manage section wrapper (<daasmanage>, Manage sub-menu with "SAML
      Configuration") but their URL isn't under /manage, so no drawer item is
      .active and the section menu was pinned at a default slot. Treat the
      Manage item (a[href^="/manage"]) as the parent: pin under it and show it
      as active, exactly like any other Manage page. */
@media screen and (min-width: 1024px) {
  html:not(:has(link[href*="app.theme.bluefin.css"])) { --m-nav-first-top: 80px; }

  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)):has(daastopmenu > ul > li:nth-child(1) > a[href^="/manage"]) { --m-nav-act: 1; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)):has(daastopmenu > ul > li:nth-child(2) > a[href^="/manage"]) { --m-nav-act: 2; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)):has(daastopmenu > ul > li:nth-child(3) > a[href^="/manage"]) { --m-nav-act: 3; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)):has(daastopmenu > ul > li:nth-child(4) > a[href^="/manage"]) { --m-nav-act: 4; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)):has(daastopmenu > ul > li:nth-child(5) > a[href^="/manage"]) { --m-nav-act: 5; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)):has(daastopmenu > ul > li:nth-child(6) > a[href^="/manage"]) { --m-nav-act: 6; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)):has(daastopmenu > ul > li:nth-child(7) > a[href^="/manage"]) { --m-nav-act: 7; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)):has(daastopmenu > ul > li:nth-child(8) > a[href^="/manage"]) { --m-nav-act: 8; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)):has(daastopmenu > ul > li:nth-child(9) > a[href^="/manage"]) { --m-nav-act: 9; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)):has(daastopmenu > ul > li:nth-child(10) > a[href^="/manage"]) { --m-nav-act: 10; }
  html body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)) > .app-header daastopmenu > ul.nav.navbar-nav > li:has(> a[href^="/manage"]) {
    margin-bottom: calc(var(--m-sub-h) + 4px);
  }
  html:has(link[href*="app.theme.bluefin.css"]) body:not(.error-page):is(:has(> .app-header:not(.ng-hide)), [ng-init^="init('{"]):has(.app-content daasmanage .sidebar-wrapper):not(:has(daastopmenu > ul > li.active)) > .app-header daastopmenu > ul.nav.navbar-nav > li > a[href^="/manage"] {
    color: var(--m-nav-active-text);
    background: var(--m-nav-active-bg);
    font-weight: 500;
  }
}