@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap");
/*
  SWIFTDOX client portal theme on Bootstrap 5.3 (loaded after bootstrap.min.css and legacy.css).
  Look matches secure.swiftdox.com: light slate canvas, white cards, SWIFTDOX blue, dark blue sidebar.
  No build step: plain CSS variables.
*/
:root {
  --sd-brand: #2d6cb5;
  --sd-brand-dark: #1f4f8a;
  --sd-brand-tint: #eaf1fa;
  --sd-brand-line: #c5d6ec;
  --sd-ink: #1d2733;
  --sd-muted: #5d6b7a;
  --sd-faint: #8a96a3;
  --sd-line: #e3e8ee;
  --sd-canvas: #f3f5f8;
  --sd-panel: #fafbfd;
  --sd-ok: #1f7a4d;
  --sd-ok-tint: #e7f5ee;
  --sd-ok-line: #cbe8d8;
  --sd-warn: #9a6700;
  --sd-warn-ink: #5c4a00;
  --sd-warn-tint: #fff6e0;
  --sd-warn-line: #f3e0b0;
  --sd-bad: #8d2b2e;
  --sd-bad-ink: #6b1f22;
  --sd-bad-tint: #fbeeee;
  --sd-bad-line: #f0d3d4;
  --sd-nav: #1d4a80;
  --sd-nav-deep: #133459;
  --sd-radius: 10px;
  --sd-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .04);
  --sd-shadow-pop: 0 4px 12px rgba(16, 24, 40, .08), 0 16px 40px rgba(16, 24, 40, .12);
  --sd-sidebar: 16rem;
  --sd-rail: 4.5rem;

  /* Bootstrap 5.3 variables */
  --bs-primary: var(--sd-brand);
  --bs-primary-rgb: 45, 108, 181;
  --bs-link-color: var(--sd-brand);
  --bs-link-color-rgb: 45, 108, 181;
  --bs-link-hover-color: var(--sd-brand-dark);
  --bs-link-hover-color-rgb: 31, 79, 138;
  --bs-body-color: var(--sd-ink);
  --bs-body-bg: #fff; /* components (cards, modals, dropdowns, tables) use it; the page grey is set on body */
  --bs-body-font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.55;
  --bs-border-color: var(--sd-line);
  --bs-secondary-color: var(--sd-muted);
  --bs-tertiary-bg: var(--sd-panel);
  --bs-border-radius: 7px;
  --bs-border-radius-lg: var(--sd-radius);
  --bs-success: var(--sd-ok);
  --bs-success-rgb: 31, 122, 77;
  --bs-danger: var(--sd-bad);
  --bs-danger-rgb: 141, 43, 46;
  --bs-focus-ring-color: rgba(45, 108, 181, .25);
}

html, body { height: auto !important; }
body { background: var(--sd-canvas); color: var(--sd-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; color: inherit; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.text-muted { color: var(--sd-muted) !important; }
.text-brand { color: var(--sd-brand) !important; }
.bg-panel { background: var(--sd-panel) !important; }
.eyebrow { color: var(--sd-faint); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------------- layout: sidebar + top bar ---------------- */
.sd-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1040; width: var(--sd-sidebar);
  display: flex; flex-direction: column; color: #fff;
  background: linear-gradient(180deg, var(--sd-nav), var(--sd-nav-deep));
  transition: width .2s, transform .2s;
}
.sd-sidebar a { color: inherit; text-decoration: none; }
.sd-brand { height: 4rem; flex: none; display: flex; align-items: center; padding: 0 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sd-brand img { height: 1.75rem; width: auto; }
.sd-brand .sd-brand-icon { display: none; height: 2rem; }
/* top bar company switcher */
.sd-switcher-btn { display: inline-flex; align-items: center; gap: .75rem; max-width: 100%; padding: .3rem .6rem; margin-left: -.6rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; text-align: left; }
.sd-switcher-btn:hover, .sd-switcher-btn[aria-expanded="true"] { background: var(--sd-canvas); border-color: var(--sd-line); }
.sd-switcher-pill { display: inline-flex; align-items: center; gap: .3rem; height: 20px; padding: 0 10px; border: 1px solid var(--sd-brand-line); border-radius: 999px; background: var(--sd-brand-tint); color: var(--sd-brand-dark); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.sd-switcher-pill .mdi { line-height: 1; }
.sd-switcher-btn:hover .sd-switcher-pill, .sd-switcher-btn[aria-expanded="true"] .sd-switcher-pill { background: var(--sd-brand); border-color: var(--sd-brand); color: #fff; }
.sd-switcher-menu { width: 20rem; max-width: calc(100vw - 2rem); max-height: 70vh; overflow-y: auto; }
.sd-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .75rem; }
.sd-nav ul { list-style: none; margin: 0 0 .75rem; padding: 0 0 .75rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sd-nav ul:last-child { border-bottom: 0; }
.sd-nav-link {
  position: relative; display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; margin-bottom: 2px;
  border-radius: 6px; font-size: .875rem; font-weight: 500; color: rgba(255, 255, 255, .75) !important;
}
.sd-nav-link i { width: 1.25em; text-align: center; color: rgba(255, 255, 255, .6); }
.sd-nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff !important; text-decoration: none !important; }
.sd-nav-link.active { background: rgba(255, 255, 255, .15); color: #fff !important; }
.sd-nav-link.active i { color: #fff; }
.sd-nav-link.active::before { content: ""; position: absolute; left: 0; top: .375rem; bottom: .375rem; width: 4px; border-radius: 0 4px 4px 0; background: #fff; }
.sd-nav-link .sd-ext { margin-left: auto; font-size: 10px; opacity: .6; }

.sd-main { min-height: 100vh; display: flex; flex-direction: column; min-width: 0; transition: padding .2s; }
.sd-topbar { position: sticky; top: 0; z-index: 1020; height: 4rem; display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem; background: rgba(255, 255, 255, .95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--sd-line); }
.sd-topbar .sd-company-title { font-weight: 600; }
.sd-avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sd-brand-tint); color: var(--sd-brand-dark); font-size: .75rem; font-weight: 700; }
.sd-user-btn { gap: .5rem; margin-left: 0; padding: .25rem .5rem; }
.sd-content { width: 100%; max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 2rem; flex: 1; }
.sd-footer { padding: 1.5rem; font-size: 12.5px; color: var(--sd-faint); }
.sd-footer a { color: var(--sd-muted); }
.sd-backdrop { position: fixed; inset: 0; z-index: 1035; background: rgba(29, 39, 51, .5); display: none; }

@media (min-width: 576px) { .sd-content { padding: 2rem 1.5rem; } }
@media (min-width: 992px) {
  .sd-main { padding-left: var(--sd-sidebar); }
  /* collapsed icon rail: <html class="nav-collapsed"> (js/layout.js, remembered per browser) */
  .nav-collapsed .sd-sidebar { width: var(--sd-rail); }
  .nav-collapsed .sd-main { padding-left: var(--sd-rail); }
  .nav-collapsed .sd-brand { justify-content: center; padding: 0; }
  .nav-collapsed .sd-brand .sd-brand-logo, .nav-collapsed .sd-hide-collapsed { display: none !important; }
  .nav-collapsed .sd-brand .sd-brand-icon { display: block; }
  .nav-collapsed .sd-nav { padding: .75rem .5rem; }
  .nav-collapsed .sd-nav-link { justify-content: center; padding: .55rem 0; }
  .nav-collapsed .sd-nav-link.active::before { display: none; }
}
@media (max-width: 991.98px) {
  .sd-sidebar { transform: translateX(-100%); box-shadow: var(--sd-shadow-pop); }
  .sd-drawer-open .sd-sidebar { transform: none; }
  .sd-drawer-open .sd-backdrop { display: block; }
}

/* page blocker (pages toggle d-none / d-flex) */
#pageBlocker { position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; background: rgba(29, 39, 51, .7); color: #fff; }

/* ---------------- components ---------------- */
.card { border-color: var(--sd-line); border-radius: var(--sd-radius); box-shadow: var(--sd-shadow); --bs-card-cap-bg: var(--sd-panel); }
.card > .card-header { border-bottom-color: var(--sd-line); }
.card-foot, .card > .card-footer { background: var(--sd-panel); border-top-color: var(--sd-line); color: var(--sd-muted); }

.btn { --bs-btn-font-weight: 600; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .875rem; --bs-btn-border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; box-shadow: none; }
.btn-sm { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8125rem; }
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: .9375rem; }
.btn-primary { --bs-btn-bg: var(--sd-brand); --bs-btn-border-color: var(--sd-brand); --bs-btn-hover-bg: var(--sd-brand-dark); --bs-btn-hover-border-color: var(--sd-brand-dark); --bs-btn-active-bg: var(--sd-brand-dark); --bs-btn-active-border-color: var(--sd-brand-dark); --bs-btn-disabled-bg: var(--sd-brand); --bs-btn-disabled-border-color: var(--sd-brand); }
.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary {
  --bs-btn-color: var(--sd-brand); --bs-btn-bg: #fff; --bs-btn-border-color: var(--sd-brand-line);
  --bs-btn-hover-color: var(--sd-brand); --bs-btn-hover-bg: var(--sd-brand-tint); --bs-btn-hover-border-color: var(--sd-brand-line);
  --bs-btn-active-color: var(--sd-brand-dark); --bs-btn-active-bg: var(--sd-brand-tint); --bs-btn-active-border-color: var(--sd-brand);
  --bs-btn-disabled-color: var(--sd-faint); --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--sd-line);
}
.btn-success, .btn-green { --bs-btn-color: #fff; --bs-btn-bg: var(--sd-ok); --bs-btn-border-color: var(--sd-ok); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #186040; --bs-btn-hover-border-color: #186040; --bs-btn-active-bg: #186040; }
.btn-danger { --bs-btn-bg: var(--sd-bad); --bs-btn-border-color: var(--sd-bad); --bs-btn-hover-bg: var(--sd-bad-ink); --bs-btn-hover-border-color: var(--sd-bad-ink); --bs-btn-active-bg: var(--sd-bad-ink); }
.btn-quiet { --bs-btn-color: var(--sd-muted); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--sd-ink); --bs-btn-hover-bg: var(--sd-canvas); --bs-btn-active-bg: var(--sd-line); }
.btn-guide { --bs-btn-color: var(--sd-muted); --bs-btn-bg: #fff; --bs-btn-border-color: var(--sd-line); --bs-btn-hover-bg: var(--sd-canvas); }
.btn:hover { text-decoration: none; }

.form-control, .form-select { border-color: var(--sd-line); border-radius: 7px; }
.form-control:focus, .form-select:focus { border-color: var(--sd-brand); box-shadow: 0 0 0 .2rem rgba(45, 108, 181, .2); }
.form-label, label { font-weight: 500; }
.form-check-input:checked { background-color: var(--sd-brand); border-color: var(--sd-brand); }
.valid .form-control { border-color: var(--sd-ok); }
.invalid .form-control, .invalid .form-select { border-color: var(--sd-bad); background-color: rgba(251, 238, 238, .4); }
.form-error { margin-top: .25rem; color: var(--sd-bad); font-size: .8125rem; } /* JustValidate messages (assets/js/form-validation.js, style "group") */
.form-group:has(.form-error) > .form-text { display: none; } /* the message takes the place of the hint */

.dropdown-menu { --bs-dropdown-border-color: var(--sd-line); --bs-dropdown-border-radius: 8px; --bs-dropdown-link-active-bg: var(--sd-brand); box-shadow: var(--sd-shadow-pop); padding: .375rem 0; }
.dropdown-item { display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; font-size: .875rem; }
.dropdown-item:hover { text-decoration: none; }
.modal { --bs-modal-border-radius: var(--sd-radius); --bs-modal-border-color: var(--sd-line); --bs-modal-header-border-color: var(--sd-line); --bs-modal-footer-border-color: var(--sd-line); }
.modal-content { box-shadow: var(--sd-shadow-pop); }
.modal-footer { background: var(--sd-panel); border-bottom-left-radius: var(--sd-radius); border-bottom-right-radius: var(--sd-radius); }
.modal-title { font-size: 1.125rem; }
.popover { --bs-popover-border-color: var(--sd-line); --bs-popover-header-bg: var(--sd-panel); box-shadow: var(--sd-shadow-pop); }
.list-group { --bs-list-group-border-color: var(--sd-line); }
.table { --bs-table-border-color: var(--sd-line); }
.nav-tabs { --bs-nav-tabs-border-color: var(--sd-line); --bs-nav-tabs-link-active-border-color: var(--sd-line) var(--sd-line) #fff; }
.nav-link { color: var(--sd-muted); }
.nav-tabs .nav-link.active { color: var(--sd-brand); font-weight: 600; }

/* notices (secure.swiftdox.com style); Bootstrap .alert-* colours are mapped to the same tints */
.notice { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border: 1px solid; border-radius: 8px; font-size: .875rem; line-height: 1.55; }
.notice > i:first-child { margin-top: .2rem; }
.notice p { margin: 0; }
.notice-amber, .alert-warning { background: var(--sd-warn-tint); color: var(--sd-warn-ink); border-color: var(--sd-warn-line); }
.notice-red, .alert-danger { background: var(--sd-bad-tint); color: var(--sd-bad-ink); border-color: var(--sd-bad-line); }
.notice-green, .alert-success { background: var(--sd-ok-tint); color: var(--sd-ok); border-color: var(--sd-ok-line); }
.notice-blue, .alert-info, .alert-primary { background: var(--sd-brand-tint); color: var(--sd-brand-dark); border-color: var(--sd-brand-line); }
.alert { border-radius: 8px; }

/* tags / chips / status */
.tag { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.6; }
.tag-draft { background: var(--sd-canvas); color: var(--sd-muted); }
.tag-pending { background: var(--sd-warn-tint); color: var(--sd-warn); }
.tag-approved { background: var(--sd-ok-tint); color: var(--sd-ok); }
.tag-declined, .tag-cancelled { background: var(--sd-bad-tint); color: var(--sd-bad); }
.tag-signed { background: var(--sd-brand-tint); color: var(--sd-brand-dark); }
.chip { display: inline-flex; align-items: center; gap: .25rem; padding: 2px 10px; border-radius: 999px; background: var(--sd-brand-tint); color: var(--sd-brand-dark); font-size: 12.5px; font-weight: 600; }
.badge { font-weight: 600; letter-spacing: .02em; }
.cert-co, .coo-bg { background: #5eb1cc !important; color: #fff !important; }
.cert-cfs, .cfs-bg { background: #ff2b84 !important; color: #fff !important; }
.cert-gmp, .gmp-bg { background: #f29e00 !important; color: #fff !important; }
.cert-cgs, .cgs-bg { background: #92b926 !important; color: #fff !important; }

/* ================= page anatomy (every client page template) =================
   .card                          = the page card: title header, body, Back/Next footer
   .card .card                    = a section inside it; header border-start border-4 border-danger required / -warning optional / -primary info
   #co-tabs (CO + CG forms)       = numbered step bar; other .nav-tabs = underline tabs */

.card-footer::after { content: ""; display: block; clear: both; }

/* sections inside a card */
.card .card { border-color: var(--sd-line); border-radius: 8px; box-shadow: none; margin: .5rem !important; }
.card .card > .card-header { background: var(--sd-panel); padding: .75rem 1rem; }
.card .card > .card-header h5, .card .card > .card-header .h5 { font-size: .9375rem; font-weight: 600; margin-bottom: .25rem; }
.card .card > .card-header h5:last-child { margin-bottom: 0; }
.card .card > .card-header small { color: var(--sd-muted); font-weight: 500; }
.card-header .form-group:last-child, .card-header .input-group:last-child { margin-bottom: 0; }



/* site radios / checkboxes (label.ft + Material Design Icons via css/mdi.css font, styles in legacy.css) */
label.ft input[type="radio"] ~ span::before, label.ft input[type="checkbox"] ~ span::before { font-size: 1.25em; top: 3px; text-shadow: none; color: var(--sd-faint); }
label.ft input[type="radio"]:checked ~ span, label.ft input[type="checkbox"]:checked ~ span { color: var(--sd-ink); }
label.ft input[type="radio"]:checked ~ span::before, label.ft input[type="checkbox"]:checked ~ span::before { color: var(--sd-brand); }
label.ft input:disabled ~ span, label.ft input:disabled ~ span::before { color: var(--sd-faint) !important; cursor: not-allowed; }
#tr-cg-certtype label.ft input:disabled:checked ~ span { color: var(--sd-ink) !important; }
#tr-cg-certtype label.ft input:disabled:checked ~ span::before { color: var(--sd-brand) !important; }

/* CO / CG step bar */
#co-tabs { counter-reset: step; display: flex; flex-wrap: nowrap; gap: .25rem; overflow-x: auto; margin: 0 0 1rem; padding: .375rem; background: #fff; border: 1px solid var(--sd-line); border-radius: var(--sd-radius); box-shadow: var(--sd-shadow); }
#co-tabs .nav-item { counter-increment: step; flex: 1 0 auto; }
#co-tabs .nav-link { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .5rem .75rem; border: 0; border-radius: 7px; color: var(--sd-muted); font-size: .875rem; font-weight: 600; white-space: nowrap; }
#co-tabs .nav-link::before { content: counter(step); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; background: var(--sd-canvas); color: var(--sd-muted); font-size: .75rem; font-weight: 700; }
#co-tabs .nav-link .d-md-none { display: none !important; }
#co-tabs .nav-link:hover { background: var(--sd-canvas); color: var(--sd-ink); }
#co-tabs .nav-link.active { background: var(--sd-brand-tint); color: var(--sd-brand-dark); }
#co-tabs .nav-link.active::before { background: var(--sd-brand); color: #fff; }
#co-tabs ~ .tab-content > .tab-pane > div > .card { margin-top: 0; }

/* other tabs (account, billing): underline */
.nav-tabs:not(#co-tabs) { gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--sd-line); }
.nav-tabs:not(#co-tabs) .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--sd-muted); font-weight: 600; padding: .6rem .9rem; }
.nav-tabs:not(#co-tabs) .nav-link:hover { color: var(--sd-ink); border-bottom-color: var(--sd-line); }
.nav-tabs:not(#co-tabs) .nav-link.active { color: var(--sd-brand); background: transparent; border-bottom-color: var(--sd-brand); }

/* badges: soft tags instead of solid colours */
.badge { font-size: 11.5px; padding: .3em .6em; border-radius: 4px; }
.badge.text-bg-info, .badge.text-bg-primary { background: var(--sd-brand-tint) !important; color: var(--sd-brand-dark) !important; }
.badge.text-bg-success { background: var(--sd-ok-tint) !important; color: var(--sd-ok) !important; }
.badge.text-bg-danger { background: var(--sd-bad-tint) !important; color: var(--sd-bad) !important; }
.badge.text-bg-warning { background: var(--sd-warn-tint) !important; color: var(--sd-warn) !important; }
.badge.text-bg-secondary, .badge.text-bg-light { background: var(--sd-canvas) !important; color: var(--sd-muted) !important; }

/* tables, lists, popovers */
.table { --bs-table-hover-bg: var(--sd-panel); --bs-table-striped-bg: var(--sd-panel); font-size: .875rem; }
.table > thead th, table.dataTable > thead th { background: var(--sd-panel); color: var(--sd-faint); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom-width: 1px; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.list-group-item { border-color: var(--sd-line); }
.list-group-item.active { background: var(--sd-brand); border-color: var(--sd-brand); }
.list-group-item-action:hover { background: var(--sd-panel); }
.popover-header { background: var(--sd-panel) !important; color: var(--sd-ink) !important; border-bottom-color: var(--sd-line); font-size: .875rem; }
.alert-heading { font-size: 1rem; font-weight: 700; }
hr { border-color: var(--sd-line); opacity: 1; }
.feature { background: var(--sd-warn-tint); }

/* Select2 (no Bootstrap theme loaded) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { min-height: calc(1.55em + 1rem + 2px); border-color: var(--sd-line); border-radius: 7px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.55em + 1rem); padding-left: .75rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--sd-brand); }
.select2-dropdown { border-color: var(--sd-line); border-radius: 8px; box-shadow: var(--sd-shadow-pop); }

/* ---------------- Bootstrap 4 pieces with no mechanical Bootstrap 5 rename ---------------- */
.input-group-prepend, .input-group-append { display: contents; }
.form-inline { display: flex; flex-flow: row wrap; align-items: center; gap: .5rem; }
.form-inline .form-control { width: auto; }
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; min-width: 0; }
.jumbotron { padding: 2rem; margin-bottom: 1.5rem; background: #fff; border: 1px solid var(--sd-line); border-radius: var(--sd-radius); box-shadow: var(--sd-shadow); }
.card-deck { display: flex; flex-wrap: wrap; gap: 1rem; }
.card-deck > .card { flex: 1 1 0; min-width: 15rem; }
.embed-responsive { position: relative; width: 100%; overflow: hidden; }
.embed-responsive-16by9 { aspect-ratio: 16 / 9; }
.embed-responsive .embed-responsive-item, .embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.text-xs { font-size: .75rem; }
.text-break { word-break: break-word !important; }

/* small utilities Bootstrap 5 doesn't ship */
.min-w-0 { min-width: 0 !important; }
.ms-n2 { margin-left: -.5rem !important; }

/* list rows + file icon (applications list, secure.swiftdox.com style) */
.sd-row { transition: background-color .15s; }
.sd-row:hover { background: var(--sd-panel); }
.sd-row:last-child { border-bottom: 0 !important; }
.sd-highlight { background: var(--sd-brand-tint) !important; box-shadow: inset 3px 0 0 var(--sd-brand); }
.doc-icon { display: grid; place-items: end center; flex: none; width: 2rem; height: 2.5rem; padding-bottom: 4px; border-radius: 4px; border: 1px solid var(--sd-bad-line); background: var(--sd-bad-tint); color: var(--sd-bad); font-size: 9px; font-weight: 800; letter-spacing: .04em; }

/* Bootstrap 4 form spacing that Bootstrap 5 dropped (the site's templates and js/app.js fv() rely on .form-group) */
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > .col, .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }
label:not(.form-check-label):not(.btn) { margin-bottom: .375rem; }
/* <select class="form-control"> (27 in templates; scripts select them via .form-control): same arrow as .form-select */
select.form-control:not([multiple]):not([size]) {
  appearance: none; padding-right: 2.25rem;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235d6b7a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center / 16px 12px;
}

/* legacy.css generic colours that fight the new look */
.form-control, .form-select, input.form-control { background-color: #fff; }
.form-control:disabled { background-color: var(--sd-canvas); }
.form-control.flatpickr-input[readonly], .flatpickr-input.form-control { background-color: #fff; cursor: pointer; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--sd-canvas) !important; color: var(--sd-ink) !important; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--sd-brand-tint) !important; color: var(--sd-brand-dark) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--sd-brand-tint) !important; color: var(--sd-brand-dark) !important; }
tr.active, table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected { background-color: var(--sd-brand-tint) !important; color: var(--sd-ink) !important; box-shadow: inset 3px 0 0 var(--sd-brand); }
.address.card.default { background: var(--sd-warn-tint); }
.address.card.default .card-header { background: rgba(255, 215, 13, .18); }
@media (min-width: 768px) { .border-md-end { border-right: 1px solid var(--sd-line) !important; } }

/* Yes/No questions (label.ft radios) and partner association options */
.sd-choices { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; min-height: calc(1.55em + 1.25rem + 2px); }
.sd-choices label.ft { margin: 0; }
.sd-partner { display: inline-flex; align-items: center; gap: .65rem; margin: 0; padding: .5rem .875rem .5rem .5rem; background: #fff; border: 1px solid var(--sd-line); border-radius: 8px; cursor: pointer; }
.sd-partner:hover { border-color: var(--sd-brand-line); }
.sd-partner:has(input:checked) { border-color: var(--sd-brand); background: var(--sd-brand-tint); }
.sd-partner-logo { height: 2.25rem; width: auto; max-width: 6rem; object-fit: contain; border-radius: 4px; }
.sd-partner span { font-weight: 500; }
/* flatpickr shows a readonly copy of date fields: don't make it look disabled */
.flatpickr-input + .form-control[readonly], .form-control.flatpickr-input[readonly] { background-color: #fff; cursor: pointer; }
/* question headings inside sections (CO/CG options, legalization...) at label size, not page-heading size */
.card .card .card-body h5, .card .card .card-body .h5 { font-size: 1rem; font-weight: 600; }
.card .card .card-body h5 + p small, .card .card .card-body h5 + p { color: var(--sd-muted); }

/* ---------- Tabulator lists (applications, products, CG product picker) ---------- */
.tabulator { border: 0; background: transparent; font-size: inherit; }
.tabulator .tabulator-header { background: var(--sd-panel); border-bottom: 1px solid var(--sd-line); }
.tabulator .tabulator-header .tabulator-col { background: transparent; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: .6rem .75rem; }
.tabulator .tabulator-tableholder .tabulator-table { background: transparent; }
.tabulator-row { border-bottom: 1px solid var(--sd-line); background: #fff; transition: background-color .15s; }
.tabulator-row.tabulator-row-even { background: #fff; }
.tabulator-row.tabulator-selectable:hover, .tabulator-row:hover { background: var(--sd-panel); }
.tabulator-row .tabulator-cell { padding: .6rem .75rem; border-right: 0; }
.tabulator-row.tabulator-selected, .tabulator-row.tabulator-selected:hover { background: var(--sd-brand-tint); }
.tabulator .tabulator-footer { background: var(--sd-panel); border-top: 1px solid var(--sd-line); padding: .5rem .75rem; }
.tabulator .tabulator-placeholder .tabulator-placeholder-contents { color: var(--sd-muted); font-weight: 400; font-size: 1rem; padding: 2rem; }
/* applications list: each row is a full-width card (tpl/application.row.tpl) */
#ft-applications .tabulator-row .tabulator-cell { padding: 0; white-space: normal; overflow: visible; }
/* icon-only row actions (e.g. products list): never clip/ellipsis the buttons */
.tabulator-row .tabulator-cell.cell-actions { padding: .35rem .5rem; overflow: visible; text-overflow: clip; }
.tabulator-row .tabulator-cell.cell-actions .btn { padding: .25rem .45rem; }

/* CO line items (applications/co/tpl/co.products.tpl): one compact grid row per item, labels in a single header.
   Below 992px each row wraps to two lines with per-cell labels; below 576px cells stack. */
.ci-head, .ci-row { display: grid; grid-template-columns: 2.25rem minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) 4.25rem; gap: .35rem; align-items: start; }
.ci-head { position: sticky; top: 4rem; z-index: 2; padding: .35rem .25rem; background: var(--sd-panel); border-bottom: 1px solid var(--sd-line); font-size: .75rem; font-weight: 600; color: var(--sd-muted); }
.ci-head small { font-weight: 400; color: var(--sd-faint); }
.ci-row { padding: .2rem .25rem; border-bottom: 1px solid var(--sd-line); }
.ci-row:hover { background: var(--sd-brand-tint); }
.ci-row.ci-blank { opacity: .75; }
.ci-row.ci-blank:focus-within { opacity: 1; }
.ci-row.ci-blank .ci-actions { visibility: hidden; }
.ci-row.highlightProductRow { background: var(--sd-bad-tint); }
.ci-num { padding-top: .3rem; text-align: right; font-size: .8rem; color: var(--sd-faint); font-variant-numeric: tabular-nums; }
.ci-row .td { line-height: 1.35; overflow-wrap: anywhere; }
.ci-label { display: none; font-size: .7rem; color: var(--sd-muted); }
.ci-actions { display: flex; justify-content: flex-end; }
.ci-actions .btn { padding: .2rem .35rem; }
@media (max-width: 991.98px) {
  .ci-head { display: none; }
  .ci-row { grid-template-columns: 2rem repeat(3, minmax(0, 1fr)) auto; padding: .4rem .25rem; }
  .ci-label { display: block; }
  .ci-num { grid-row: span 2; }
  .ci-actions { grid-column: 5; grid-row: 1; }
  .ci-desc { grid-column: 2; } .ci-origin { grid-column: 3; } .ci-gross { grid-column: 4; }
  .ci-hs { grid-column: 2; grid-row: 2; } .ci-marks { grid-column: 3; grid-row: 2; } .ci-net { grid-column: 4; grid-row: 2; }
}
@media (max-width: 575.98px) {
  .ci-row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
  .ci-row .ci-cell { grid-column: 2 !important; grid-row: auto !important; }
  .ci-num { grid-row: span 6; }
  .ci-actions { grid-column: 3; grid-row: 1; }
}
/* line item clear (x) buttons and the description textarea */
.ci-cell { position: relative; }
.ci-row .ci-cell .td { padding-right: 1.6rem; }
.ci-clear { position: absolute; right: .2rem; bottom: .3rem; width: 1.3rem; height: 1.3rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sd-faint); font-size: 1.05rem; line-height: 1; display: none; cursor: pointer; }
.ci-clear:hover { background: var(--sd-bad-tint); color: var(--sd-bad); }
.ci-cell.ci-filled:hover .ci-clear, .ci-cell.ci-filled:focus-within .ci-clear { display: block; }
@media (hover: none) { .ci-cell.ci-filled .ci-clear { display: block; } }
.ci-row textarea.ci-text { display: block; width: 100%; resize: vertical; field-sizing: content; min-height: 1.9rem; max-height: 20rem; overflow-y: auto; }
.ci-row textarea.ci-text:focus { outline: 2px solid var(--sd-brand-line); border-color: var(--sd-brand); }

/* CO line item Country(ies) of Origin: cell + dropdown (applications/co/co.js _co.originPicker) */
.ci-row .ci-origin-field { cursor: pointer; }
.ci-row .ci-origin-field:focus { outline: 2px solid var(--sd-brand-line); border-color: var(--sd-brand); }
.ci-row .ci-origin-field::after { content: "\F0140"; font-family: "Material Design Icons"; position: absolute; right: .4rem; top: .3rem; color: var(--sd-faint); pointer-events: none; }
.ci-cell.ci-filled:hover .ci-origin-field::after, .ci-cell.ci-filled:focus-within .ci-origin-field::after { display: none; }
.ci-row .ci-origin-field:empty:focus::before { content: "Select countries"; color: var(--sd-faint); }
.ci-origin-panel { position: fixed; z-index: 1060; display: none; padding: .5rem; background: #fff; border: 1px solid var(--sd-line); border-radius: 8px; box-shadow: var(--sd-shadow-pop); }
.ci-origin-panel.show { display: block; }
.ci-origin-list { max-height: 260px; margin: .4rem -.25rem 0; overflow-y: auto; }
.ci-origin-list label { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .3rem .5rem; border-radius: 6px; font-size: .875rem; cursor: pointer; }
.ci-origin-list label .form-check-input { flex: none; margin: 0; }
.ci-origin-list label.active { background: var(--sd-canvas); }
.ci-origin-list label.checked { font-weight: 600; }
.ci-origin-foot { display: flex; align-items: center; gap: .25rem; margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--sd-line); }
.ci-origin-foot .ci-origin-count { margin-right: auto; }
/* same origin dropdown as a form field (products/productForm.tpl): panel drops under the field inside the modal */
.origin-select { position: relative; }
.origin-select .ci-origin-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; }
.origin-select-field { height: auto; min-height: calc(1.5em + .75rem + 2px); padding-right: 2rem; cursor: pointer; position: relative; }
.origin-select-field::after { content: "\F0140"; font-family: "Material Design Icons"; position: absolute; right: .6rem; top: .4rem; color: var(--sd-faint); pointer-events: none; }
.origin-select-field:empty::before { content: "Select countries"; color: var(--sd-faint); }

/* applications list: multi-select filter dropdowns (application.js filterLabel) - clearable × left of the caret.
   Fixed width + room for the × always reserved: ticking / clearing doesn't move the layout (long labels get an ellipsis) */
.list-filter { position: relative; }
.list-filter > [data-bs-toggle] { width: 14rem; max-width: 100%; padding-right: 3.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-filter.is-filtered > [data-bs-toggle] { border-color: var(--sd-brand); }
.list-filter .filter-x { position: absolute; right: 2.1rem; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 0 .15rem; line-height: 1; color: var(--sd-faint); }
.list-filter .filter-x:hover, .list-filter .filter-x:focus-visible { color: var(--sd-brand); }

/* applications list status tabs (applications/tpl/application.list.tpl #status-tabs) */
.list-tabs { scrollbar-width: none; }
.list-tabs .nav-link { display: inline-flex; align-items: center; gap: .4rem; }
.list-tabs .tab-count { min-width: 1.5rem; padding: .05rem .45rem; border-radius: 999px; background: var(--sd-line); color: var(--sd-muted); font-size: .75rem; font-weight: 600; text-align: center; }
#status-tabs.list-tabs .nav-link { border-top-left-radius: 8px; border-top-right-radius: 8px; }
#status-tabs.list-tabs .nav-link.active { background: var(--sd-brand-tint); color: var(--sd-brand-dark); border-bottom: 3px solid var(--sd-brand); font-weight: 700; }
.list-tabs .nav-link.active .tab-count { background: var(--sd-brand); color: #fff; }

/* CFS / GMP step 1: numbered questions (applications/cg/tpl/cg.main.tpl, cg.cfs.tpl, cg.gmp.tpl) */
.cg-questions { display: flex; flex-direction: column; gap: 0; padding: .5rem 1.5rem; }
.cg-q { display: flex; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--sd-line); }
.cg-questions > .cg-q:first-of-type, .cg-questions > .alert + .cg-q { border-top: 0; }
.cg-q-num { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sd-brand); color: #fff; font-weight: 700; font-size: .9rem; }
.cg-q-body { flex: 1 1 auto; min-width: 0; }
.cg-q-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .2rem 0 .25rem; font-size: 1.1rem; font-weight: 600; color: var(--sd-ink); }
.cg-q-req, .cg-q-opt { padding: .1rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.cg-q-req { background: var(--sd-bad-tint); color: var(--sd-bad); }
.cg-q-opt { background: var(--sd-canvas); color: var(--sd-muted); }
.cg-q-hint { margin: 0 0 1rem; color: var(--sd-muted); font-size: .9rem; }
.cg-field + .cg-field { margin-top: 1.25rem; }
.cg-field .form-label { font-weight: 600; font-size: .9rem; color: var(--sd-ink); }
.cg-narrow { max-width: 8rem; }
#tr-cg-dest .form-select { max-width: 28rem; }
.cg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; }
.cg-tile { display: flex; gap: .75rem; align-items: flex-start; margin: 0; padding: 1rem; border: 1px solid var(--sd-line); border-radius: var(--sd-radius); background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.cg-tile:hover { border-color: var(--sd-brand-line); }
.cg-tile:has(input:checked) { border-color: var(--sd-brand); background: var(--sd-brand-tint); box-shadow: 0 0 0 1px var(--sd-brand); }
.cg-tile:has(input:disabled) { cursor: not-allowed; }
.cg-tile:has(input:disabled:not(:checked)) { opacity: .55; }
.cg-tile .form-check-input { flex: none; margin-top: .2rem; }
.cg-tile-title { display: block; font-weight: 600; color: var(--sd-ink); }
.cg-tile-code { margin-left: .25rem; padding: 0 .4rem; border-radius: 4px; background: var(--sd-canvas); color: var(--sd-muted); font-size: .75rem; font-weight: 700; }
.cg-tile-text { display: block; margin-top: .2rem; color: var(--sd-muted); font-size: .85rem; }
.cg-switch { display: flex; align-items: center; gap: .6rem; padding-left: 0; }
.cg-switch .form-check-input { width: 2.5rem; height: 1.3rem; margin: 0; float: none; }
.cg-switch .form-check-label { font-weight: 600; }
.cg-note { margin: .75rem 0 0; color: var(--sd-muted); font-size: .85rem; }
@media (max-width: 575.98px) {
  .cg-questions { padding: .25rem 1rem; }
  .cg-q { gap: .75rem; }
  .cg-q-num { width: 1.75rem; height: 1.75rem; }
}

/* CO step 1: required / optional cards (applications/co/tpl/co.main.tpl) */
.co-section { border: 1px solid var(--sd-line); border-radius: var(--sd-radius); box-shadow: var(--sd-shadow); overflow: hidden; }
.co-section-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1.25rem; background: var(--sd-panel); border-bottom: 1px solid var(--sd-line); }
.co-section-head h5 { font-size: 1.05rem; font-weight: 600; color: var(--sd-ink); }
.co-section-req { border-top: 3px solid var(--sd-brand); }
.co-section-opt { border-top: 3px solid var(--sd-faint); }
.co-section-req .co-section-head .mdi { color: var(--sd-bad); }
.co-section-opt .co-section-head .mdi { color: var(--sd-muted); }
.co-badge { padding: .1rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.co-badge-req { background: var(--sd-bad-tint); color: var(--sd-bad); }
.co-badge-opt { background: var(--sd-canvas); color: var(--sd-muted); }
.co-section .card-body { padding: 1.25rem; }
.co-block + .co-block { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--sd-line); }
.co-block-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .15rem; font-weight: 600; color: var(--sd-ink); }
.co-block-title .mdi { color: var(--sd-brand); font-size: 1.15rem; }
.co-block-hint { margin: 0 0 .75rem; color: var(--sd-muted); font-size: .85rem; }
.co-section .form-label { margin-bottom: .3rem; font-weight: 600; font-size: .85rem; color: var(--sd-ink); }
.co-address { margin-top: .75rem; }
.co-address:has(address:not(:empty)) { padding: .85rem 3rem .85rem 1rem; border: 1px solid var(--sd-line); border-radius: var(--sd-radius); background: var(--sd-panel); }
.co-address .edit-button { top: .6rem; right: .6rem; }
@media (max-width: 575.98px) {
  .co-section .card-body { padding: 1rem; }
}
/* CO destination country select2: red border like other fields when fv flags it */
.invalid .select2-container--bootstrap-5 .select2-selection { border-color: var(--sd-bad); background-color: rgba(251, 238, 238, .4); }
.valid .select2-container--bootstrap-5 .select2-selection { border-color: var(--sd-ok); }

/* clearable fields (js/app.js _clearable): × inside the field, space always reserved so nothing shifts */
.clearable { position: relative; display: block; }
.input-group > .clearable { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .clearable:not(:last-child) > .form-control,
.input-group > .clearable:not(:last-child) > .form-select { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .clearable + * { margin-left: -1px; }
.clearable-input > .form-control { padding-right: 2.25rem; }
.clearable-textarea > .form-control { padding-right: 2.25rem; }
.clearable-select > .form-select, .clearable-select > .form-control { padding-right: 4rem; }
.clearable-x { position: absolute; top: 50%; right: .5rem; z-index: 5; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sd-faint); font-size: 1rem; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.clearable-x:hover { background: var(--sd-canvas); color: var(--sd-ink); }
.clearable-select > .clearable-x { right: 2.25rem; }
.clearable-textarea > .clearable-x { top: .5rem; transform: none; }
.clearable:has(> :placeholder-shown) > .clearable-x,
.clearable:has(> select option[value=""]:checked) > .clearable-x,
.clearable:has(> :disabled) > .clearable-x { visibility: hidden; }
/* select2 single: reserve room for its own × (allowClear) next to the arrow */
.select2-container--bootstrap-5 .select2-selection--single { padding-right: 4rem; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear { right: 2.25rem; }

/* application form step headers: "Editing Draft #" badge beside the title (co/tpl + cg/tpl headers) */
.app-title { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
.app-title .app-draft { font-size: .8125rem; font-weight: 600; letter-spacing: 0; }
.app-title .app-draft.d-none { display: none !important; }
/* step header buttons: compact, right-aligned (legacy.css .app-topnav grid was sized around the draft badge, now beside the title) */
.app-topnav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
@media (max-width: 575.98px) { .app-topnav { justify-content: flex-start; } }
/* "Editing Draft #" pill right after the title, same line; title column takes the room the buttons leave */
@media (min-width: 576px) {
  .app-title { flex-wrap: nowrap; white-space: nowrap; }
  .card-header .row:has(> div > .app-title) { flex-wrap: nowrap; align-items: center; }
  .card-header .row:has(> div > .app-title) > div:has(> .app-title) { flex: 1 1 auto; width: auto; min-width: 0; }
  .card-header .row:has(> div > .app-title) > div:not(:has(> .app-title)) { flex: 0 0 auto; width: auto; }
}
/* CO + CFS/GMP: steps flagged red when a later step is opened while they are incomplete (_co.steps, _cg.steps) */
#co-tabs .nav-link.tab-invalid { color: var(--sd-bad); }
#co-tabs .nav-link { position: relative; }
#co-tabs .nav-link.tab-invalid::before, #co-tabs .nav-link.tab-invalid.active::before { background: var(--sd-bad); color: #fff; }
/* missing uploads (Documents invoice, prepaid mailing label) and delivery address once a step is flagged */
#co-form .form-group.invalid label.btn, #cg-form .form-group.invalid label.btn { background: var(--sd-bad); border-color: var(--sd-bad); color: #fff; }
/* CFS / GMP (_cg.steps): certificate tiles, products card, scanned-copy recipients */
.cg-tiles.cg-invalid .cg-tile { border-color: var(--sd-bad); background: var(--sd-bad-tint); }
#tr-cg-products.cg-invalid .coProductsTable { outline: 2px solid var(--sd-bad); outline-offset: 2px; border-radius: 6px; }
#tr-cg-products.cg-invalid .cg-q-num { background: var(--sd-bad); }
#scanRecipients.invalid .select2-selection { border-color: var(--sd-bad); background-color: rgba(251, 238, 238, .4); }
/* switching CO / CG steps must not move anything: steps share the bar equally (width doesn't depend on label, active state or the red dot),
   and the page scrollbar keeps its gutter when a short step has no scrollbar */
html { scrollbar-gutter: stable; }
#co-tabs .nav-item { flex: 1 1 0; min-width: max-content; }
#co-tabs .nav-item:has(> .nav-link.d-none) { display: none; }
/* CO line item delete confirmation popover (_co.product.confirmRemove); undoes legacy.css blue .popover + overflow (scrollbar, clipped arrow) */
.popover.ci-confirm { --bs-popover-bg: #fff; --bs-popover-border-color: var(--sd-line); --bs-popover-arrow-border: var(--sd-line); max-width: none; max-height: none !important; overflow: visible; background-color: #fff; color: var(--sd-ink) !important; border-radius: 8px; box-shadow: var(--sd-shadow-pop); }
.ci-confirm .popover-header { display: none; }
.ci-confirm .popover-body { display: flex; align-items: center; gap: .375rem; padding: .375rem .375rem .375rem .75rem; white-space: nowrap; color: var(--sd-ink); }
.ci-confirm .popover-body > span { margin-right: .375rem; font-size: .8125rem; font-weight: 600; }
.ci-confirm .btn { padding: .2rem .6rem; font-size: .8125rem; line-height: 1.4; border-radius: 6px; }
.ci-confirm .btn .mdi { margin-right: .15rem; }
.ci-confirm .ci-confirm-no { border-color: var(--sd-line); background: #fff; color: var(--sd-muted); }
.ci-confirm .ci-confirm-no:hover { background: var(--sd-canvas); color: var(--sd-ink); }
.ci-confirm .ci-confirm-yes:focus, .ci-confirm .ci-confirm-yes:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sd-bad); }

/* CFS / GMP steps share one layout: numbered/icon sections (.cg-q, step 1 block above), same header buttons, same footer */
.cg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.cg-foot-right { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.cg-q-num .mdi { font-size: 1.05rem; line-height: 1; }
.cg-q-count { margin-left: auto; color: var(--sd-muted); font-size: .85rem; font-weight: 500; }
.cg-q-count b { color: var(--sd-ink); }
.cg-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.cg-search { max-width: 18rem; }
/* CFS / GMP products ribbon (cg.products.tpl): search first, then collections, selection and actions in one bar */
.cg-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .375rem; margin-bottom: .75rem; background: var(--sd-panel); border: 1px solid var(--sd-line); border-radius: 8px; }
.cg-ribbon .btn { white-space: nowrap; }
.cg-ribbon-search { position: relative; flex: 1 1 18rem; min-width: 12rem; }
.cg-ribbon-search .mdi { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--sd-faint); pointer-events: none; }
.cg-ribbon-search .form-control { padding-left: 2.25rem; background: #fff; }
.cg-ribbon-group { display: flex; align-items: center; gap: .25rem; }
.cg-ribbon-group[hidden] { display: none; }
.cg-ribbon-sep { align-self: stretch; width: 1px; margin: .25rem .25rem; background: var(--sd-line); }
.cg-ribbon .btn-icon { min-width: 2.375rem; padding-left: .55rem; padding-right: .55rem; }
.cg-ribbon .btn-icon .mdi, .cg-collection-filter .mdi-folder-multiple { font-size: 1.15rem; line-height: 1; }
.cg-collection-filter.is-filtered > .btn { color: var(--sd-brand); background: var(--sd-brand-tint); }
.cg-collection-menu { width: 22rem; max-width: calc(100vw - 32px); }
.cg-collection-list { max-height: 16rem; overflow-y: auto; }
.cg-collection-list .dropdown-item { border-radius: 4px; white-space: normal; }
@media (max-width: 767.98px) {
  .cg-ribbon-search { flex-basis: 100%; }
  .cg-ribbon-sep { display: none; }
}
.cg-wide { max-width: 28rem; }
.cg-address { max-width: 28rem; margin-top: .75rem; padding: .75rem 2.75rem .75rem 1rem; border: 1px solid var(--sd-line); border-radius: 8px; background: var(--sd-panel); }
.cg-address .edit-button { position: absolute; top: .5rem; right: .5rem; }
/* CFS / GMP documents step (cg.documents.tpl): one card per document, what it must show next to its upload box; Needed -> Uploaded badge */
.cg-docs { display: grid; gap: .75rem; }
.cg-doc { border: 1px solid var(--sd-line); border-radius: var(--sd-radius); background: #fff; transition: border-color .15s; }
.cg-doc-head { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--sd-line); }
.cg-doc-icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: var(--sd-brand-tint); color: var(--sd-brand); font-size: 1.2rem; }
.cg-doc-name { flex: 1 1 auto; min-width: 0; }
.cg-doc-name h4 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--sd-ink); }
.cg-doc-for { color: var(--sd-muted); font-size: .8rem; }
.cg-doc-state > span { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.cg-doc-state .is-needed { background: var(--sd-warn-tint); color: var(--sd-warn-ink); }
.cg-doc-state .is-done { display: none; background: var(--sd-ok-tint); color: var(--sd-ok); }
.cg-doc:has(.file .deleteButton:not(.d-none)) { border-color: var(--sd-ok-line); }
.cg-doc:has(.file .deleteButton:not(.d-none)) .is-needed { display: none; }
.cg-doc:has(.file .deleteButton:not(.d-none)) .is-done { display: inline-flex; }
.cg-doc:has(.form-group.invalid) { border-color: var(--sd-bad); }
.cg-doc:has(.form-group.invalid) .is-needed { background: var(--sd-bad-tint); color: var(--sd-bad); }
.cg-doc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 1rem 1.5rem; padding: 1rem; }
.cg-doc-label { margin: 0 0 .4rem; color: var(--sd-muted); font-size: .85rem; font-weight: 600; }
.cg-doc-checks { margin: 0; padding: 0; list-style: none; }
.cg-doc-checks li { display: flex; gap: .4rem; margin-bottom: .3rem; color: var(--sd-ink); font-size: .9rem; }
.cg-doc-checks .mdi { flex: none; color: var(--sd-brand); }
.cg-doc-tip { display: flex; gap: .4rem; margin: .6rem 0 0; padding: .5rem .75rem; border-radius: 8px; background: var(--sd-warn-tint); color: var(--sd-warn-ink); font-size: .85rem; }
.cg-doc-samples { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.cg-doc-upload { margin: 0; }
.cg-drop { display: flex; align-items: center; gap: .75rem; width: 100%; margin: 0; padding: 1rem; border: 2px dashed var(--sd-brand-line); border-radius: var(--sd-radius); background: var(--sd-panel); color: var(--sd-brand); cursor: pointer; transition: border-color .15s, background .15s; }
.cg-drop:hover, .cg-drop:focus-visible, .cg-drop.is-over { border-color: var(--sd-brand); background: var(--sd-brand-tint); outline: 0; }
.cg-drop > .mdi { font-size: 1.75rem; line-height: 1; }
.cg-drop b { display: block; color: var(--sd-ink); }
.cg-drop small { display: block; color: var(--sd-muted); }
#cg-form .cg-doc-upload.invalid .cg-drop { border-color: var(--sd-bad); background: var(--sd-bad-tint); color: var(--sd-bad); }
/* uploaded files (js/upload.js .file rows) */
.cg-doc-upload .file { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0 !important; padding: .5rem .75rem; border: 1px solid var(--sd-line); border-radius: 8px; background: #fff; color: var(--sd-ink); font-size: .875rem; }
.cg-doc-upload .file .info { flex: 1 1 auto; min-width: 0; float: none !important; overflow-wrap: anywhere; }
.cg-doc-upload .file .deleteButton { float: none !important; margin: 0 !important; color: var(--sd-bad); white-space: nowrap; }
.cg-doc-upload .file progress { flex: 0 1 6rem; margin: 0 !important; }
@media (max-width: 767.98px) {
  .cg-doc-body { grid-template-columns: 1fr; }
}
.cg-summary .card { border: 1px solid var(--sd-line); border-radius: var(--sd-radius); box-shadow: none; margin-bottom: .75rem !important; }
.cg-summary .card-header { background: #fff; border-bottom: 1px solid var(--sd-line); }
.cg-summary .card-header h5 { font-size: 1rem; font-weight: 600; }
.cg-missing { margin: .35rem 0 0; padding-left: 1.1rem; }
.cg-missing a { font-weight: 600; }
@media (max-width: 575.98px) {
  .cg-foot > div, .cg-foot-right { width: 100%; }
  .cg-foot .btn { flex: 1 1 auto; }
  .cg-search { max-width: none; width: 100%; }
}

/* CFS / GMP compact summary (cg.summary.tpl): one row per section, same icons as the steps; rows with something missing are red */
.cg-summary { padding: 1rem 1.5rem; }
.cg-sum { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sd-line); border-radius: var(--sd-radius); }
.cg-sum-row { display: flex; align-items: flex-start; gap: .85rem; padding: .7rem 1rem; border-top: 1px solid var(--sd-line); }
.cg-sum-row:first-child { border-top: 0; }
.cg-sum-row .cg-q-num { width: 1.75rem; height: 1.75rem; margin-top: .1rem; }
.cg-sum-row .cg-q-num .mdi { font-size: .9rem; }
.cg-sum-body { flex: 1 1 auto; min-width: 0; }
.cg-sum-label { color: var(--sd-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.cg-sum-value { color: var(--sd-ink); font-size: .9rem; overflow-wrap: anywhere; }
.cg-sum-actions { display: flex; flex: none; gap: .35rem; }
.cg-sum-chips { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 5.5rem; overflow-y: auto; margin-top: .3rem; }
.cg-sum-chips > * { padding: .1rem .5rem; border: 1px solid var(--sd-line); border-radius: 999px; background: var(--sd-panel); font-size: .8rem; text-decoration: none; }
.cg-sum-miss { margin-top: .2rem; color: var(--sd-bad); font-size: .85rem; font-weight: 600; }
.cg-sum-row.is-missing { background: var(--sd-bad-tint); }
.cg-sum-row.is-missing .cg-q-num { background: var(--sd-bad); }
.cg-sum-row.is-missing .cg-sum-actions .btn { border-color: var(--sd-bad); background: var(--sd-bad); color: #fff; }
.cg-sum-total { background: var(--sd-panel); align-items: center; }
.cg-sum-fees { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--sd-muted); font-size: .8rem; }
.cg-sum-amount { flex: none; font-size: 1.25rem; font-weight: 700; color: var(--sd-ink); }
.cg-sum-row:first-child { border-top-left-radius: var(--sd-radius); border-top-right-radius: var(--sd-radius); }
.cg-sum-row:last-child { border-bottom-left-radius: var(--sd-radius); border-bottom-right-radius: var(--sd-radius); }
@media (max-width: 575.98px) {
  .cg-summary { padding: .75rem 1rem; }
  .cg-sum-row { flex-wrap: wrap; }
  .cg-sum-actions { width: 100%; padding-left: 2.6rem; }
}

/* CO steps on the CFS/GMP layout (.cg-q sections, .cg-foot, .cg-doc cards, compact .cg-sum summary) + CO-only pieces */
.co-grid { max-width: 48rem; }
.cg-doc-body-upload { grid-template-columns: minmax(0, 28rem); }
.cg-doc-state .is-needed.is-opt { background: var(--sd-canvas); color: var(--sd-muted); }
#co-form .cg-doc-upload.invalid .cg-drop { border-color: var(--sd-bad); background: var(--sd-bad-tint); color: var(--sd-bad); }
.co-legal-docs { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; padding: .85rem 1rem; border: 1px solid var(--sd-line); border-radius: var(--sd-radius); background: var(--sd-panel); }
.co-legal-docs label.ft { margin: 0; }
.co-sum-items { margin: .35rem 0 0; padding-left: 1.5rem; max-height: 12rem; overflow-y: auto; font-size: .85rem; }
.co-sum-items li { padding: .1rem 0; }
.co-sum-items li > span { display: block; }
.co-sum-desc { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; font-weight: 500; }
.co-sum-items li.is-missing, .co-sum-items li.is-missing .text-muted { color: var(--sd-bad) !important; }
.co-sum-pairs { display: flex; flex-wrap: wrap; gap: .15rem 1rem; }
.co-sum-remarks { margin-top: .2rem; white-space: pre-wrap; }
.co-declare { display: block; margin: 1rem 0 0; padding: .85rem 1rem; border: 1px solid var(--sd-line); border-radius: var(--sd-radius); background: var(--sd-panel); font-size: .875rem; cursor: pointer; }
.co-declare.is-unchecked { border-color: var(--sd-warn-line); background: var(--sd-warn-tint); }
/* CO summary: certificate preview beside the review list when the application is complete (co.js inlinePreview) */
.co-sum-layout.has-preview { display: grid; gap: 1rem; }
@media (min-width: 1200px) {
  .co-sum-layout.has-preview { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); align-items: start; }
  .co-preview { position: sticky; top: 5rem; }
}
.co-preview { border: 1px solid var(--sd-line); border-radius: var(--sd-radius); background: var(--sd-panel); overflow: hidden; }
.co-preview-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--sd-line); background: #fff; }
.co-preview-body { display: grid; place-items: center; aspect-ratio: 8.5 / 11; max-height: 75vh; width: 100%; }
.co-preview-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.co-preview-wait { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2rem 1rem; text-align: center; color: var(--sd-muted); }
.co-preview-wait b { color: var(--sd-ink); font-size: .95rem; }
.co-preview-wait small { font-size: .8rem; }
.co-preview-wait .spinner-border { width: 2.25rem; height: 2.25rem; margin-bottom: .5rem; color: var(--sd-brand); }
.co-preview-wait > .mdi { font-size: 2rem; line-height: 1; }

/* CFS/GMP form, compact (every step: cg.*.tpl). Scoped to #cg-form so the CO form keeps its spacing */
#cg-form .card-header { padding: .6rem 1.25rem; }
#cg-form .card-footer { padding: .6rem 1.25rem; }
#cg-form .card-footer .notice { margin-bottom: .6rem !important; padding: .5rem .75rem; font-size: .85rem; }
#cg-form .cg-foot .btn-lg { padding: .4rem .9rem; font-size: .95rem; }
#cg-form .cg-questions { padding: .25rem 1.25rem; }
#cg-form .cg-q { padding: 1rem 0; gap: .85rem; }
#cg-form .cg-q-num { width: 1.75rem; height: 1.75rem; }
#cg-form .cg-q-num .mdi { font-size: .95rem; }
#cg-form .cg-q-title { margin: .15rem 0 .1rem; font-size: 1rem; }
#cg-form .cg-q-hint { margin-bottom: .6rem; font-size: .85rem; }
#cg-form .cg-field + .cg-field { margin-top: .75rem; }
#cg-form .cg-field .form-text { font-size: .8rem; margin-top: .2rem; }
#cg-form .sd-choices { gap: .35rem 1.25rem; min-height: 0; padding-top: .3rem; }
#cg-form .cg-note { margin-top: .4rem; font-size: .8rem; }

/* step 1: certificate tiles, destination, the certificate options side by side (cg.main.tpl, cg.cfs.tpl, cg.gmp.tpl) */
#cg-form .cg-tiles { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
#cg-form .cg-tile { padding: .6rem .8rem; }
#cg-form .cg-tile-text { font-size: .8rem; margin-top: 0; }
#cg-form :is(#certificateOneNote, #certificateLocked) { margin-top: .35rem; font-size: .8rem; }
#cg-form #tr-cg-dest { margin-top: .75rem !important; max-width: 26rem; }
#cg-form :is(#tr-cg-cfsoptions, #tr-cg-gmpoptions) .cg-q-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem 1.5rem; align-items: start; }
#cg-form :is(#tr-cg-cfsoptions, #tr-cg-gmpoptions) .cg-q-body > :is(.cg-q-title, .cg-q-hint) { grid-column: 1 / -1; margin-bottom: 0; }
#cg-form :is(#tr-cg-cfsoptions, #tr-cg-gmpoptions) .cg-field + .cg-field { margin-top: 0; }

/* documents (cg.documents.tpl) */
#cg-form .cg-docs { gap: .5rem; }
#cg-form .cg-doc-head { padding: .5rem .85rem; gap: .6rem; }
#cg-form .cg-doc-icon { width: 1.85rem; height: 1.85rem; font-size: 1rem; }
#cg-form .cg-doc-name h4 { font-size: .95rem; }
#cg-form .cg-doc-body { padding: .65rem .85rem; gap: .65rem 1.25rem; }
#cg-form .cg-doc-checks li { margin-bottom: .15rem; font-size: .85rem; }
#cg-form .cg-doc-samples { margin-top: .5rem; }
#cg-form .cg-drop { padding: .6rem .8rem; gap: .6rem; }
#cg-form .cg-drop > .mdi { font-size: 1.4rem; }
#cg-form .cg-doc-upload .file { padding: .35rem .6rem; margin-top: .35rem !important; }

/* delivery (cg.mail.tpl) */
#cg-form .cg-address { margin-top: .5rem; padding: .5rem 2.5rem .5rem .8rem; font-size: .9rem; }

/* summary (cg.summary.tpl) */
#cg-form .cg-summary { padding: .75rem 1.25rem; }
#cg-form .cg-sum-row { padding: .45rem .85rem; gap: .7rem; }
#cg-form .cg-sum-row .cg-q-num { width: 1.5rem; height: 1.5rem; }
#cg-form .cg-sum-row .cg-q-num .mdi { font-size: .8rem; }
#cg-form .cg-sum-value { font-size: .875rem; }

/* CFS/GMP form, compact controls: inputs, selects (and select2), input-group buttons a size down */
#cg-form :is(.form-control, .form-select) { padding-top: .35rem; padding-bottom: .35rem; font-size: .9rem; }
#cg-form .form-label { margin-bottom: .3rem; }
#cg-form .input-group > .btn, #cg-form .cg-field > .btn { padding: .35rem .75rem; font-size: .9rem; }
#cg-form .select2-container--default .select2-selection--single { min-height: calc(1.5em + .7rem + 2px); font-size: .9rem; }
#cg-form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + .7rem); }
#cg-form .cg-wide { max-width: 26rem; }
#cg-form .sd-choices label.ft { font-size: .9rem; }
#cg-form .cg-address .edit-button { top: .35rem; right: .35rem; }
#cg-form .cg-address .edit-button.btn, #cg-form .cg-address .btn { padding: .2rem .45rem; font-size: .85rem; }
/* delivery: method | mailing address (or prepaid label) side by side on wide screens, the address card under the address */
@media (min-width: 992px) {
  #cg-form #tr-cg-delivery .cg-q-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 1.5rem; align-items: start; max-width: 54rem; }
  /* every row placed explicitly: auto-placed items would otherwise go around the method's rows */
  #cg-form #tr-cg-delivery .cg-q-body > .cg-q-title { grid-column: 1 / -1; grid-row: 1; }
  #cg-form #tr-cg-delivery .cg-q-body > .cg-q-hint { grid-column: 1 / -1; grid-row: 2; margin-bottom: .25rem; }
  #cg-form #tr-cg-delivery .cg-q-body > .cg-field:first-of-type { grid-column: 1; grid-row: 3 / span 2; }
  #cg-form #tr-cg-delivery .cg-q-body > .cg-field:not(:first-of-type) { grid-column: 2; grid-row: 3; }
  #cg-form #tr-cg-delivery .cg-field + .cg-field { margin-top: 0; }
  #cg-form #tr-cg-delivery #fullAddress { grid-column: 2; grid-row: 4; margin-top: .5rem; }
}
/* CFS/GMP form, compact: searchable selects (select2 bootstrap-5 theme, destination country) */
#cg-form .select2-container--bootstrap-5 .select2-selection { min-height: calc(1.5em + .7rem + 2px); padding-top: .35rem; padding-bottom: .35rem; font-size: .9rem; }

/* country flags before names (js/countries.js flag(): searchable selects, origin pickers) */
.sd-flag { display: inline-block; flex: none; width: 1.333em; height: 1em; margin-right: .5em; border-radius: 2px; vertical-align: -.1em; box-shadow: 0 0 0 1px rgba(16, 24, 40, .12); background-size: cover; }
.sd-flag-none { box-shadow: none; background: var(--sd-canvas); }
.sd-flag-text { display: inline-flex; align-items: center; }
.ci-origin-list .sd-flag { margin-right: 0; }

/* ---- layout review 2026-10-03: one page header, empty state, reading width ---- */
/* page header on the canvas above the cards: .eyebrow (sidebar group) + h1 + optional subtitle, one primary action on the right */
.sd-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.sd-page-head > :first-child { flex: 1 1 18rem; min-width: 0; }
.sd-page-head h1 { font-size: 1.75rem; font-weight: 500; line-height: 1.2; margin: 0; }
.sd-page-head p { color: var(--sd-muted); margin: .15rem 0 0; }
.sd-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.sd-page-actions .sd-page-links { flex-basis: 100%; text-align: right; font-size: .8125rem; }
@media (max-width: 575.98px) { .sd-page-actions { justify-content: flex-start; } .sd-page-actions .sd-page-links { text-align: left; } }
/* CO / CFS / GMP wizard step titles at the page-header size */
.app-title { font-size: 1.75rem; font-weight: 500; }
/* reading pages (Security, Contact Chamber, Contact Support): one max width */
.sd-narrow { max-width: 60rem; }
/* empty state: icon, one line, optional button */
.sd-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 3rem 1.5rem; text-align: center; color: var(--sd-muted); }
.sd-empty > i { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--sd-brand-tint); color: var(--sd-brand); font-size: 1.75rem; }
.sd-empty h2 { font-size: 1.125rem; font-weight: 600; color: var(--sd-ink); margin: .5rem 0 0; }
.sd-empty p { margin: 0; max-width: 32rem; }
.sd-empty .btn { margin-top: .75rem; }
/* row actions: icon links, no separators (Applications list style) */
.sd-row-actions { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; font-size: .875rem; }
.sd-row-actions a { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; }
/* phones: give the active company name the room (Switch pill shrinks to its icon, no user chevron) */
@media (max-width: 575.98px) {
  .sd-topbar { padding: 0 .75rem; gap: .5rem; }
  .sd-switcher-btn { gap: .4rem; }
  .sd-switcher-pill { padding: 0 6px; }
  .sd-user-btn { padding: .25rem; }
  .sd-user-btn .mdi-chevron-down { display: none; }
}
/* section card header (Company Profile): icon + title + Required/Optional pill, same parts as the CO/CFS/GMP .cg-q sections */
.card > .card-header.sd-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: 1rem 1.25rem; background: #fff; }
.sd-section-head h2 { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--sd-ink); }
.sd-security > .card { max-width: none !important; }