/* ==========================================================================
   Customer area design system
   --------------------------------------------------------------------------
   Deliberately unlike the admin panel: the admin is a dense control surface
   with a dark left rail; this is a light, roomy account area with a top bar.

   Everything is scoped under .cx so none of it can reach the admin screens,
   which share the same Bootstrap build.
   ========================================================================== */

.cx {
  --cx-bg:          #f6f7fb;
  --cx-surface:     #ffffff;
  --cx-line:        #e8eaf2;
  --cx-ink:         #171a2b;
  --cx-ink-soft:    #6b7089;
  --cx-ink-faint:   #9aa0b5;

  --cx-accent:      #5b5bd6;
  --cx-accent-dark: #4744b8;
  --cx-accent-wash: #eeeefc;

  --cx-ok:          #0f9d76;
  --cx-ok-wash:     #e6f7f1;
  --cx-warn:        #c2870b;
  --cx-warn-wash:   #fdf4e3;
  --cx-bad:         #d64545;
  --cx-bad-wash:    #fdecec;

  /* One width for the bar and the content, so they always line up. */
  --cx-shell:       1320px;

  --cx-radius:      14px;
  --cx-radius-sm:   9px;
  --cx-shadow:      0 1px 2px rgba(23,26,43,.05), 0 8px 24px -12px rgba(23,26,43,.14);
  --cx-shadow-lift: 0 2px 4px rgba(23,26,43,.06), 0 18px 38px -16px rgba(23,26,43,.22);

  background: var(--cx-bg);
  color: var(--cx-ink);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  margin: 0;
}

/* Every box in the console sizes by its border edge. Without this a rule like
   "width: 100%" plus padding renders WIDER than its container : the dropdown
   hover background bled past the panel edge, and text inputs overflowed their
   field by their own padding. Scoped to .cx so the legacy Bootstrap admin
   pages are untouched. */
.cx, .cx *, .cx *::before, .cx *::after { box-sizing: border-box; }

.cx a { color: var(--cx-accent); text-decoration: none; }
.cx a:hover { color: var(--cx-accent-dark); }

/* ---------- top bar : the clearest break from the admin left rail -------- */

.cx-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cx-line);
}
.cx-nav__inner {
  max-width: var(--cx-shell); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 28px; height: 62px;
}
.cx-brand {
  display: flex; align-items: center; gap: 9px; white-space: nowrap; flex: 0 0 auto;
  font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--cx-ink);
}
.cx-brand:hover { color: var(--cx-ink); }
.cx-brand__mark {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--cx-accent), #8b7bf0);
  color: #fff; font-size: 13px;
}
.cx-nav__links {
  display: flex; align-items: center; gap: 4px; margin-left: 6px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;   /* many modules scroll rather than overflow */
}
.cx-nav__links::-webkit-scrollbar { display: none; }
.cx-nav__link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 9px; font-weight: 500; font-size: 14px;
  color: var(--cx-ink-soft); white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.cx-nav__link:hover { background: #f1f2f8; color: var(--cx-ink); }
.cx-nav__link.is-active { background: var(--cx-accent-wash); color: var(--cx-accent-dark); font-weight: 600; }
.cx-nav__link i { font-size: 13px; opacity: .85; }

.cx-nav__user { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cx-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: var(--cx-accent-wash); color: var(--cx-accent-dark);
  display: grid; place-items: center; font-weight: 600; font-size: 13px;
  border: 1px solid var(--cx-line);
}
.cx-nav__toggle { display: none; background: none; border: 0; font-size: 19px; color: var(--cx-ink-soft); }

/* ---------- page shell -------------------------------------------------- */

.cx-shell { max-width: var(--cx-shell); margin: 0 auto; padding: 30px 20px 64px; }

.cx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.cx-head h1 { font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 3px; }
.cx-head p  { margin: 0; color: var(--cx-ink-soft); font-size: 14px; }

/* ---------- cards ------------------------------------------------------- */

.cx-card {
  background: var(--cx-surface); border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius); box-shadow: var(--cx-shadow);
}
.cx-card__body { padding: 22px; }
.cx-card__title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--cx-ink-faint); margin: 0 0 16px;
}
.cx-card--feature { position: relative; overflow: hidden; }
.cx-card--feature::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--cx-accent), #8b7bf0 60%, #58c9b9);
}

/* ---------- stats ------------------------------------------------------- */

.cx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cx-line);
            border-radius: var(--cx-radius-sm); overflow: hidden; }
.cx-stats--4 { grid-template-columns: repeat(4, 1fr); }
.cx .cx-stat { background: var(--cx-surface); padding: 16px 18px; display: block; color: inherit; }
.cx-stat:hover { background: #fbfbfe; }
.cx-stat__value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--cx-ink); line-height: 1.15; }
.cx-stat__value small { font-size: 14px; font-weight: 500; color: var(--cx-ink-faint); }
.cx-stat__label { font-size: 12.5px; color: var(--cx-ink-soft); margin-top: 2px; }

/* ---------- pills ------------------------------------------------------- */

.cx-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #f0f1f6; color: var(--cx-ink-soft);
}
.cx-pill--ok   { background: var(--cx-ok-wash);   color: var(--cx-ok); }
.cx-pill--warn { background: var(--cx-warn-wash); color: var(--cx-warn); }
.cx-pill--bad  { background: var(--cx-bad-wash);  color: var(--cx-bad); }
.cx-pill--accent { background: var(--cx-accent-wash); color: var(--cx-accent-dark); }

/* ---------- usage meters ------------------------------------------------ */

.cx-usage { display: flex; flex-direction: column; gap: 3px; }
.cx-usage__row {
  display: grid; grid-template-columns: 1.4fr 2fr auto; align-items: center; gap: 16px;
  padding: 11px 4px; border-bottom: 1px solid #f2f3f8;
}
.cx-usage__row:last-child { border-bottom: 0; }
.cx-usage__name { font-weight: 500; font-size: 14px; }
.cx-usage__name span { display: block; font-size: 11.5px; color: var(--cx-ink-faint); font-weight: 400; }
.cx-meter { height: 7px; border-radius: 999px; background: #eef0f6; overflow: hidden; }
.cx-meter__fill { height: 100%; border-radius: 999px; background: var(--cx-ok); transition: width .5s ease; }
.cx-meter__fill--warn { background: var(--cx-warn); }
.cx-meter__fill--bad  { background: var(--cx-bad); }
.cx-usage__count { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--cx-ink-soft); white-space: nowrap; }
.cx-usage__count b { color: var(--cx-ink); font-weight: 600; }
.cx-usage__none { font-size: 12.5px; color: var(--cx-ink-faint); font-style: italic; }

/* ---------- plan cards -------------------------------------------------- */

.cx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }
.cx-plan {
  background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: var(--cx-radius);
  padding: 24px; display: flex; flex-direction: column; box-shadow: var(--cx-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cx-plan:hover { transform: translateY(-3px); box-shadow: var(--cx-shadow-lift); }
.cx-plan--current { border-color: var(--cx-accent); box-shadow: 0 0 0 3px var(--cx-accent-wash), var(--cx-shadow); }
.cx-plan__name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.cx-plan__desc { color: var(--cx-ink-soft); font-size: 13px; margin: 5px 0 16px; min-height: 36px; }
.cx-plan__price { font-size: 33px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.cx-plan__price span { font-size: 14px; font-weight: 500; color: var(--cx-ink-faint); letter-spacing: 0; }
.cx-plan__cycle { font-size: 12.5px; color: var(--cx-ink-faint); margin-top: 5px; }
.cx-plan__list { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-direction: column; gap: 9px; }
.cx-plan__list li { font-size: 13.5px; color: var(--cx-ink-soft); display: flex; gap: 9px; align-items: flex-start; }
.cx-plan__list i { color: var(--cx-ok); font-size: 11px; margin-top: 4px; }
.cx-plan__foot { margin-top: auto; }

/* ---------- data tables ------------------------------------------------- */

.cx-table { width: 100%; border-collapse: collapse; }
.cx-table th {
  text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cx-ink-faint); padding: 0 14px 11px; border-bottom: 1px solid var(--cx-line);
}
.cx-table td { padding: 14px; border-bottom: 1px solid #f2f3f8; font-size: 14px; vertical-align: middle; }
.cx-table tr:last-child td { border-bottom: 0; }
.cx-table tbody tr:hover { background: #fafbff; }
.cx-table__primary { font-weight: 600; color: var(--cx-ink); }
.cx-table__muted { color: var(--cx-ink-faint); }
.cx-table__actions { text-align: right; white-space: nowrap; }

/* ---------- buttons ----------------------------------------------------- */

.cx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: 9px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; cursor: pointer; line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.cx-btn:active { transform: translateY(1px); }
.cx .cx-btn--primary { background: var(--cx-accent); color: #fff; }
.cx .cx-btn--primary:hover { background: var(--cx-accent-dark); color: #fff; }
.cx .cx-btn--ghost { background: var(--cx-surface); border-color: var(--cx-line); color: var(--cx-ink); }
.cx .cx-btn--ghost:hover { background: #f7f8fc; color: var(--cx-ink); }
.cx .cx-btn--danger { background: var(--cx-surface); border-color: #f2d5d5; color: var(--cx-bad); }
.cx .cx-btn--danger:hover { background: var(--cx-bad-wash); color: var(--cx-bad); }
.cx-btn--sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.cx-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- forms ------------------------------------------------------- */

.cx-field { margin-bottom: 17px; }
.cx-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--cx-ink); }
.cx-input, .cx-select, .cx-textarea {
  width: 100%; padding: 10px 13px; font-size: 14px; font-family: inherit; color: var(--cx-ink);
  background: var(--cx-surface); border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-sm); transition: border-color .15s ease, box-shadow .15s ease;
}
.cx-input:focus, .cx-select:focus, .cx-textarea:focus {
  outline: 0; border-color: var(--cx-accent); box-shadow: 0 0 0 3px var(--cx-accent-wash);
}
.cx-input.is-bad, .cx-select.is-bad, .cx-textarea.is-bad { border-color: var(--cx-bad); }
/* the size for controls packed into a table cell */
.cx-input--sm, .cx-select.cx-input--sm { padding: 6px 9px; font-size: 13px; border-radius: 7px; }

/* The native dropdown arrow ignores padding-right and sits hard against the
   border, which reads as detached on a wide select. Draw our own so every
   select in the console keeps the same gutter as its text at any width.

   This covers the generated screens too, where the selects are Bootstrap
   .form-control rather than .cx-select -- hence the repeated .form-control
   selector, which has to outrank the padding shorthand in console-module.css. */
.cx select,
.cx select.form-control,
.cx select.cx-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239aa0b5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 7px;
}
.cx select.form-control-sm,
.cx select.input-sm,
.cx select.cx-input--sm {
  padding-right: 26px; background-position: right 8px center; background-size: 9px 6px;
}
/* a list box has no arrow to draw, and select2 paints its own */
.cx select[multiple],
.cx select[size]:not([size="1"]),
.cx select.select2-hidden-accessible {
  background-image: none; padding-right: 13px;
}
.cx-hint { font-size: 12.5px; color: var(--cx-ink-faint); margin-top: 5px; }

/* ---------- checkboxes and radios --------------------------------------- */

/* style.css moves every [type=checkbox] and [type=radio] off-screen
   ( position:absolute; left:-9999px; opacity:0 ) and paints a Material control
   on the ADJACENT label instead. Any control without an adjacent label -- one
   nested inside its label, or one with no label at all -- is therefore simply
   invisible. That is how the RAC "Parent Filter" box, the .minimal-green boxes
   on bitbuilder/config and the menu manager's role boxes all ended up
   unclickable, each found separately.

   So the console shows the real control everywhere and turns the Material
   paint off, instead of patching each screen. The paint runs through selectors
   up to (0,5,2) across its checked / disabled / indeterminate / tabbed states,
   which is why disabling its two pseudo-elements is the one place here that
   earns !important. Everything else wins on specificity alone. */

.cx [type=checkbox]:checked,
.cx [type=checkbox]:not(:checked),
.cx [type=radio]:checked,
.cx [type=radio]:not(:checked) {
  position: static; left: auto; opacity: 1; pointer-events: auto;
  width: 16px; height: 16px; margin: 0 3px 0 0;
  vertical-align: -2px;
  accent-color: var(--cx-accent); cursor: pointer;
}
.cx [type=checkbox]:checked + label::before,
.cx [type=checkbox]:checked + label::after,
.cx [type=checkbox]:not(:checked) + label::before,
.cx [type=checkbox]:not(:checked) + label::after,
.cx [type=radio]:checked + label::before,
.cx [type=radio]:checked + label::after,
.cx [type=radio]:not(:checked) + label::before,
.cx [type=radio]:not(:checked) + label::after {
  content: none !important; display: none !important;
}
/* the label kept 35px of padding reserved for the box that no longer exists */
.cx [type=checkbox]:checked + label,
.cx [type=checkbox]:not(:checked) + label,
.cx [type=radio]:checked + label,
.cx [type=radio]:not(:checked) + label {
  position: static; display: inline-block;
  height: auto; line-height: inherit; padding-left: 0;
  font-size: inherit; font-weight: inherit;
  vertical-align: middle; cursor: pointer;
}

.cx-error { font-size: 12.5px; color: var(--cx-bad); margin-top: 5px; }

/* ---------- notices ----------------------------------------------------- */

.cx-notice {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px; border-radius: var(--cx-radius-sm); font-size: 14px; margin-bottom: 20px;
  border: 1px solid transparent;
}
.cx-notice i { margin-top: 2px; }
.cx-notice--ok  { background: var(--cx-ok-wash);  border-color: #c6ebdd; color: #0b6b52; }
.cx-notice--bad { background: var(--cx-bad-wash); border-color: #f4cfcf; color: #962929; }
.cx-notice ul { margin: 0; padding-left: 17px; }

/* ---------- empty state ------------------------------------------------- */

.cx-empty { text-align: center; padding: 44px 20px; }
.cx-empty__icon {
  width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 15px; display: grid; place-items: center;
  background: var(--cx-accent-wash); color: var(--cx-accent); font-size: 21px;
}
.cx-empty h3 { font-size: 16px; font-weight: 650; margin: 0 0 5px; }
.cx-empty p { color: var(--cx-ink-soft); font-size: 14px; margin: 0 0 18px; }

/* ---------- layout helpers --------------------------------------------- */

.cx-grid    { display: grid; gap: 20px; }
.cx-grid--2 { grid-template-columns: 1fr 1fr; }
.cx-mb      { margin-bottom: 20px; }
.cx-rowline { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #f2f3f8; font-size: 14px; }
.cx-rowline:last-child { border-bottom: 0; }
.cx-rowline dt { color: var(--cx-ink-soft); font-weight: 400; margin: 0; }
.cx-rowline dd { margin: 0; font-weight: 500; text-align: right; }

@media (max-width: 860px) {
  .cx-grid--2 { grid-template-columns: 1fr; }
  .cx-nav__links { display: none; }
  .cx-nav__links.is-open {
    display: flex; flex-direction: column; align-items: stretch; position: absolute;
    top: 62px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--cx-line);
    padding: 10px 16px 14px; gap: 2px;
  }
  .cx-nav__toggle { display: block; margin-left: auto; }
  .cx-stats, .cx-stats--4 { grid-template-columns: 1fr; }
  .cx-nav__inner { gap: 12px; padding: 0 14px; }
  .cx-brand { font-size: 15px; }
  .cx-usage__row { grid-template-columns: 1fr auto; }
  .cx-usage__row .cx-meter { grid-column: 1 / -1; }
  .cx-head { flex-direction: column; }
}

/* ==========================================================================
   Admin theme
   --------------------------------------------------------------------------
   Same components as the customer console, re-tokenised: dark command bar,
   Ranksuites blue accent, explicit ADMIN marking. Only variables and chrome
   change -- every .cx-* component is shared, so the two themes cannot drift
   apart.

   The accent was amber, chosen to mark elevated privilege. It now carries the
   brand instead, sampled from the logo, so the panel matches the sign-in
   screen a user arrives from. What separates admin from the customer console
   is the dark command bar and the ADMIN scope marking, not the hue.
   ========================================================================== */

.cx--admin {
  --cx-bg:          #eef0f4;
  --cx-surface:     #ffffff;
  --cx-line:        #dfe3ea;
  --cx-ink:         #10151f;
  --cx-ink-soft:    #5d6677;
  --cx-ink-faint:   #8b93a3;

  --cx-accent:      #0a72fb;   /* the "Suites" blue in the logo */
  --cx-accent-dark: #0757c4;
  --cx-accent-wash: #e7f1ff;

  --cx-bar:         #0a1b2e;   /* the command bar : the "Rank" navy */
  --cx-bar-ink:     #c6d2e4;
  --cx-bar-line:    #1b3049;
}

/* dark command bar, against the customer's light translucent one */
.cx--admin .cx-nav {
  background: var(--cx-bar);
  border-bottom: 1px solid var(--cx-bar-line);
  backdrop-filter: none;
}
.cx--admin .cx-brand { color: #fff; }
.cx--admin .cx-brand:hover { color: #fff; }
.cx--admin .cx-brand__mark { background: linear-gradient(140deg, #1d4ed8, #00a6ff); }
.cx--admin .cx-nav__link { color: var(--cx-bar-ink); }
.cx--admin .cx-nav__link:hover { background: #17304c; color: #fff; }
.cx--admin .cx-nav__link.is-active { background: rgba(10,114,251,.22); color: #7cc0ff; }
.cx--admin .cx-nav__toggle { color: var(--cx-bar-ink); }
.cx--admin .cx-avatar { background: #17304c; color: #7cc0ff; border-color: var(--cx-bar-line); }
.cx--admin .cx-nav__user .cx-btn--ghost {
  background: transparent; border-color: var(--cx-bar-line); color: var(--cx-bar-ink);
}
.cx--admin .cx-nav__user .cx-btn--ghost:hover { background: #17304c; color: #fff; }

/* the marking itself */
/* The admin bar boxes to the same width as the content. It spanned the window
   back when every module sat on it as its own item ; the separator grouping
   folded those into dropdowns, so the room is no longer needed. */
.cx--admin .cx-nav__inner { gap: 20px; }
.cx--admin .cx-nav__link { padding: 8px 11px; }


/* a standing reminder that actions here are global */
.cx--admin .cx-scope {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 15px; margin-bottom: 22px; font-size: 13px;
  background: var(--cx-warn-wash); border: 1px solid #f3dcc0;
  border-left: 3px solid var(--cx-warn); border-radius: var(--cx-radius-sm);
  color: #7c4408;
}

/* feature rail runs the logo's own gradient : blue into the icon's mint */
.cx--admin .cx-card--feature::before {
  background: linear-gradient(90deg, #1d4ed8, #0a72fb 55%, #2dc99a);
}

@media (max-width: 860px) {
  .cx--admin .cx-nav__links.is-open { background: var(--cx-bar); border-bottom-color: var(--cx-bar-line); }
}

/* ==========================================================================
   Highcharts 13 styling
   --------------------------------------------------------------------------
   HC13 paints via CSS custom properties. With none defined, every fill
   resolves to an undefined variable and the chart renders on solid black.
   Bind them to the console palette so charts sit inside a card.
   ========================================================================== */

.cx {
  --highcharts-background-color: transparent;
  --highcharts-neutral-color-100: var(--cx-ink);
  --highcharts-neutral-color-80:  #333b4d;
  --highcharts-neutral-color-60:  var(--cx-ink-soft);
  --highcharts-neutral-color-40:  #aeb5c4;
  --highcharts-neutral-color-20:  #e2e5ee;
  --highcharts-neutral-color-10:  #eef0f6;
  --highcharts-neutral-color-5:   #f5f6fa;
  --highcharts-neutral-color-3:   #fafbfd;

  --highcharts-color-0: var(--cx-accent);
  --highcharts-color-1: #0f9d76;
  --highcharts-color-2: #d97706;
  --highcharts-color-3: #00b8c4;
  --highcharts-color-4: #9b51e0;
  --highcharts-color-5: #d64545;
}

.cx .highcharts-container { font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif !important; }
.cx .highcharts-title,
.cx .highcharts-axis-labels text,
.cx .highcharts-legend-item text { fill: var(--cx-ink-soft) !important; font-weight: 500; }
.cx .highcharts-grid-line { stroke: #eef0f6; }
.cx .highcharts-axis-line, .cx .highcharts-tick { stroke: #e2e5ee; }
.cx .highcharts-contextbutton { opacity: .45; }
.cx .highcharts-contextbutton:hover { opacity: 1; }

/* ==========================================================================
   Top bar dropdowns + priority-plus overflow
   --------------------------------------------------------------------------
   Child menu rows open in a dropdown under their parent. Anything that will
   not fit on the bar is moved into a "More" dropdown by nav.js, so no item is
   ever silently clipped.
   ========================================================================== */

.cx-nav__item { position: relative; flex: 0 0 auto; }

.cx-nav__link--drop { background: none; border: 0; cursor: pointer; font: inherit; }
.cx-nav__link--drop .cx-caret { font-size: 10px; opacity: .7; transition: transform .15s ease; }
.cx-nav__item.is-open > .cx-nav__link--drop .cx-caret { transform: rotate(180deg); }
.cx-nav__item.is-open > .cx-nav__link--drop { background: #f1f2f8; color: var(--cx-ink); }
.cx--admin .cx-nav__item.is-open > .cx-nav__link--drop { background: #1e2735; color: #fff; }

.cx-nav__drop {
  display: none; position: absolute; top: calc(100% + 7px); left: 0; z-index: 60;
  min-width: 232px; padding: 7px;
  background: var(--cx-surface); border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-sm); box-shadow: var(--cx-shadow-lift);
}
.cx-nav__item.is-open > .cx-nav__drop { display: block; }

.cx-nav__drop a,
.cx-nav__drop .cx-nav__link {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 11px; border-radius: 7px; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; color: var(--cx-ink-soft);
}
.cx-nav__drop a:hover,
.cx-nav__drop .cx-nav__link:hover { background: #f4f5fa; color: var(--cx-ink); }
.cx-nav__drop a.is-active { background: var(--cx-accent-wash); color: var(--cx-accent-dark); font-weight: 600; }

.cx-nav__group {
  padding: 9px 11px 5px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cx-ink-faint);
}

/* a dropdown nested inside the More panel becomes a plain labelled list */
.cx-nav__drop .cx-nav__item { position: static; }
.cx-nav__drop .cx-nav__item > .cx-nav__drop {
  display: block; position: static; min-width: 0; padding: 0 0 0 12px;
  border: 0; box-shadow: none; background: none;
}
.cx-nav__drop .cx-nav__item > .cx-nav__link--drop { pointer-events: none; color: var(--cx-ink-faint); font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.cx-nav__drop .cx-nav__item > .cx-nav__link--drop .cx-caret { display: none; }

/* the bar no longer scrolls : overflow goes into "More" instead */
.cx-nav__links { overflow: visible; }

@media (max-width: 860px) {
  /* stacked menu : dropdowns become inline sections */
  .cx-nav__links.is-open .cx-nav__item { width: 100%; }
  .cx-nav__links.is-open .cx-nav__drop {
    display: block; position: static; min-width: 0; box-shadow: none;
    border: 0; padding: 0 0 0 14px; background: none;
  }
  .cx-nav__links.is-open .cx-nav__link--drop { width: 100%; justify-content: flex-start; }
}

/* Stacked mobile menu on the dark admin bar: dropdown panels inherit the
   light-surface link colour, which is unreadable there. */
@media (max-width: 860px) {
  .cx--admin .cx-nav__links.is-open .cx-nav__drop a { color: var(--cx-bar-ink); }
  .cx--admin .cx-nav__links.is-open .cx-nav__drop a:hover { background: #17304c; color: #fff; }
  .cx--admin .cx-nav__links.is-open .cx-nav__drop a.is-active { background: rgba(10,114,251,.22); color: #7cc0ff; }
  .cx--admin .cx-nav__links.is-open .cx-nav__group { color: #7d879a; }
  .cx--admin .cx-nav__links.is-open .cx-nav__item > .cx-nav__link--drop { color: #8b95a8; }
}

/* ---------- pagination --------------------------------------------------- */

/* The markup is Bootstrap's, so the public site is styled with no extra CSS.
   These rules re-skin it in the console's tokens. */

.cx-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 15px 0 2px;
}
.cx-foot__count { font-size: 13.5px; color: var(--cx-ink-soft); }
.cx-foot__count b { color: var(--cx-ink); font-weight: 600; }
.cx-foot__pager { margin-left: auto; }

.cx .cx-pager .pagination {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  margin: 0; padding: 0; list-style: none;
}
.cx .cx-pager .page-item { margin: 0; }
.cx .cx-pager .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  background: var(--cx-surface); border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-sm);
  font-size: 13px; font-weight: 600; color: var(--cx-ink-soft);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cx .cx-pager .page-link:hover { background: #f1f2f8; color: var(--cx-ink); border-color: var(--cx-line); }
.cx .cx-pager .page-item.active .page-link {
  background: var(--cx-accent); border-color: var(--cx-accent); color: #fff;
}
.cx .cx-pager .page-item.disabled .page-link {
  color: var(--cx-ink-faint); background: var(--cx-surface); cursor: default; opacity: .65;
}
.cx .cx-pager .page-link:focus { outline: 0; box-shadow: 0 0 0 3px var(--cx-accent-wash); }