/* ==========================================================================
   Accredify Create Product — Main Stylesheet
   ========================================================================== */

/* Google Fonts: DM Serif Display (heading) + Lato (body text) — used on the
   Transaction History page. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Lato:wght@400;700&display=swap');

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --acp-navy:       #143c64;
  --acp-gold:       #b4913c;
  --acp-gold-light: #f5e9c8;
  --acp-green:      #2e7d32;
  --acp-orange:     #e65100;
  --acp-grey:       #f4f6f8;
  --acp-text:       #333;
  --acp-radius:     6px;
  --acp-shadow:     0 2px 12px rgba(0,0,0,.10);
}

/* ── Shared badges ─────────────────────────────────────────────────────── */
.acp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}
.acp-badge--completed    { background: #a9f9af; color: var(--acp-green); }
.acp-badge--in-progress  { background: #fff3e0; color: var(--acp-orange); }
.acp-badge--not-started  { background: #eceff1; color: #546e7a; }

/* ── Admin tables ──────────────────────────────────────────────────────── */
.acp-admin-table { width: 100%; border-collapse: collapse; }
.acp-admin-table th,
.acp-admin-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #dde1e4;
  text-align: left;
  vertical-align: middle;
}
.acp-admin-table th { background: var(--acp-navy); color: #fff; font-size: 13px; }
.acp-admin-table tr:hover td { background: var(--acp-grey); }

/* ── Top action bar ────────────────────────────────────────────────────── */
.acp-top-action { margin-bottom: 16px; }

/* ── Type chooser (create product page) ───────────────────────────────── */
.acp-type-chooser { padding: 24px 0; }
.acp-type-chooser h2 { color: var(--acp-navy); margin-bottom: 20px; }
.acp-type-cards { display: flex; gap: 24px; flex-wrap: wrap; }
.acp-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 40px;
  background: #fff;
  border: 2px solid #dde1e4;
  border-radius: var(--acp-radius);
  box-shadow: var(--acp-shadow);
  text-decoration: none;
  color: var(--acp-text);
  transition: border-color .2s, transform .15s;
  min-width: 220px;
  text-align: center;
}
.acp-type-card:hover { border-color: var(--acp-gold); transform: translateY(-3px); }
.acp-type-card__icon { font-size: 48px; }
.acp-type-card__title { font-size: 20px; font-weight: bold; color: var(--acp-navy); }
.acp-type-card__desc { font-size: 13px; color: #666; max-width: 180px; }

/* ── My Products dashboard ─────────────────────────────────────────────── */
.acp-dashboard { width: 100%; padding: 24px 32px; }
.acp-dashboard__header { margin-bottom: 20px; }
.acp-dashboard__title  { font-size: 28px; color: var(--acp-navy); margin: 0 0 6px; }
.acp-dashboard__subtitle { color: #666; margin: 0; }
.acp-dashboard__empty  { padding: 40px; text-align: center; background: var(--acp-grey); border-radius: var(--acp-radius); }
.acp-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* Product card */
.acp-product-card {
  background: #fff;
  border: 1px solid #dde1e4;
  border-radius: var(--acp-radius);
  box-shadow: var(--acp-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.acp-product-card--completed   { border-top: 4px solid var(--acp-green); }
.acp-product-card--in-progress { border-top: 4px solid var(--acp-orange); }
.acp-product-card--not-started { border-top: 4px solid #b0bec5; }
.acp-product-card__body    { padding: 20px; flex: 1; }
.acp-product-card__type    { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 4px; }
.acp-product-card__title   { font-size: 18px; color: var(--acp-navy); margin: 0 0 8px; }
.acp-product-card__actions { padding: 12px 20px; border-top: 1px solid #eee; background: var(--acp-grey); }

/* Progress bar */
.acp-progress-bar { background: #e8f5e9; border-radius: 0 20px 20px 0; height: 8px; margin: 8px 0 4px; overflow: hidden; }
.acp-progress-bar__fill { height: 100%; background: #92e9a9; border-radius: 0 20px 20px 0; transition: width .4s ease; }
/* Green when 100% complete — set via JS after animation */
.acp-progress-bar__fill--complete { background: #92e9a9 !important; }

/* ── Product Index page (table of contents) ────────────────────────────── */
.acp-product-index { width: 100%; padding: 24px 32px; }
.acp-product-index__header {
  padding: 16px 24px;   /* reduced from 28px to cut vertical whitespace */
  background: var(--acp-navy);
  color: #fff;
  border-radius: var(--acp-radius);
  margin-bottom: 16px;
}
.acp-product-index__header h1 { margin: 0 0 12px; font-size: 26px; }
.acp-index-table { width: 100%; border-collapse: collapse; }
.acp-index-table th,
.acp-index-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #dde1e4;
  text-align: left;
  vertical-align: middle;
}
.acp-index-table th { background: #f4f6f8; font-size: 12px; text-transform: uppercase; color: #555; }
.acp-index-table .acp-topic-title { font-weight: 600; }
.acp-index-table tr.acp-row--completed td { background: #f1f8f2; }
.acp-course-complete-section { margin-top: 28px; padding: 20px 24px; border-radius: var(--acp-radius); }
.acp-course-complete-section--ready {
  background: var(--acp-gold-light);
  border: 2px solid var(--acp-gold);
  text-align: center;
}
.acp-course-complete-section--done {
  background: #a9f9af;
  border: 2px solid var(--acp-green);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px;
}
.acp-course-complete-section--pending {
  background: var(--acp-grey);
  border: 1px solid #dde1e4;
  text-align: center;
}

/* ── Component / Topic view ────────────────────────────────────────────── */
.acp-component-view { width: 100%; padding: 24px 32px; }
.acp-component-view__header {
  padding: 20px 28px 18px;
  background: linear-gradient(135deg, #0d3c6e 0%, #1565c0 100%);
  color: #fff;
  border-radius: var(--acp-radius);
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.acp-header-info { width: 100%; }
.acp-component-view__title { margin: 0 0 10px; font-size: 24px; }

/* Item 4: action buttons sit below the title/progress info, left-aligned —
   not top-right — matching the rest of the header's content alignment. */
.acp-header-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.acp-header-actions .acp-nav-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* All action buttons that now live in the blue header — right-aligned,
   white border/text so they read clearly against the blue gradient instead
   of the default outline-blue/primary-blue button colours (which would be
   nearly invisible here).

   IMPORTANT — specificity: .acp-btn--outline (defined later in this file)
   sets color/border with !important at the SAME specificity as a plain
   .acp-btn--on-header (one class each). At equal specificity + importance,
   CSS falls back to source order — and since .acp-btn--outline comes later
   in the file, it was silently winning, leaving these buttons blue instead
   of white. Using the compound selector .acp-btn--outline.acp-btn--on-header
   (two classes) gives this rule higher specificity so it reliably wins
   regardless of source order. */
.acp-btn--outline.acp-btn--on-header {
  background: transparent !important;
  border: 1.5px solid #fff !important;
  color: #fff !important;
}
.acp-btn--outline.acp-btn--on-header:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: #fff !important;
  color: #fff !important;
}
/* Mark Complete / Reset Completion keeps its own green-filled "done" state
   even in the header (item 3) — #a9f9af fill, dark green text/border,
   matching the badge/sidebar "completed" colour used everywhere else.
   Same specificity reasoning as above: needs to beat both
   .acp-btn--outline AND the base .acp-complete-toggle-btn[data-is-complete]
   rule further down this file. */
.acp-btn--outline.acp-btn--on-header.acp-complete-toggle-btn[data-is-complete="1"] {
  background: #a9f9af !important;
  border-color: var(--acp-green) !important;
  color: var(--acp-green) !important;
}
.acp-btn--outline.acp-btn--on-header.acp-complete-toggle-btn[data-is-complete="1"]:hover {
  background: #8ff397 !important;
  border-color: var(--acp-green) !important;
  color: var(--acp-green) !important;
}

.acp-component-body {
  line-height: 1.75;
  font-size: 15px;
  color: #333;
  margin-bottom: 24px;
}
.acp-component-body img { max-width: 100%; height: auto; border-radius: 4px; }
.acp-component-body table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
.acp-component-body table td, .acp-component-body table th { border: 1px solid #dde1e4; padding: 8px 12px; }
.acp-component-body table th { background: var(--acp-navy); color: #fff; }
.acp-component-body p  { margin-bottom: 12px; }
.acp-component-body ul, .acp-component-body ol { padding-left: 24px; margin-bottom: 12px; }

/* Item 3: all visible buttons moved to the header — this now only wraps
   the hidden dialog overlays (Mark Complete confirmation, pending-sections
   warning, module-complete celebration). Those overlays are all
   position:fixed (see .acp-dialog-overlay), so they render relative to the
   viewport, not this wrapper — it's safe to give the wrapper zero visual
   footprint entirely rather than leaving an empty gold-bordered box where
   the buttons used to be. Kept in the DOM (not removed) since
   accredify_create_product.js still references #acp-content-footer by ID
   as a binding-scope fallback. */
.acp-component-footer {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  height: 0;
  overflow: visible; /* let position:fixed dialog children render normally */
}
.acp-nav-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.acp-complete-btn { font-size: 15px; padding: 10px 24px !important; }

/* Component placeholder (for custom tags pending full renderer) */
.acp-component-placeholder {
  background: #fffde7;
  border: 1px dashed #f9a825;
  border-radius: var(--acp-radius);
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 13px;
  color: #5d4037;
}
.acp-component-placeholder__label { font-style: italic; }

/* Note toggle button */
.acp-note-btn { font-size: 13px; }
.acp-note-btn--active { background: var(--acp-gold) !important; color: #fff !important; }

/* ── Notes page ────────────────────────────────────────────────────────── */
.acp-notes-page { padding: 24px 32px; }
.acp-note-entry { margin-bottom: 16px; border: 1px solid #dde1e4; border-radius: var(--acp-radius); padding: 12px 16px; background: #fff; }
.acp-note-entry__topic { font-size: 13px; font-weight: 600; color: var(--acp-navy); margin-bottom: 8px; }
.acp-note-entry__text { width: 100%; border: 1px solid #dde1e4; border-radius: 4px; padding: 8px 10px; font-size: 14px; }
.acp-notes-actions { margin-top: 16px; }

/* ── Public catalog ────────────────────────────────────────────────────── */
.acp-catalog { padding: 24px 0; }
.acp-catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
.acp-catalog-card {
  background: #fff;
  border: 1px solid #dde1e4;
  border-radius: var(--acp-radius);
  box-shadow: var(--acp-shadow);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.acp-catalog-card__type { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #888; }
.acp-catalog-card__title { font-size: 20px; color: var(--acp-navy); font-weight: bold; }
.acp-catalog-card__snippet { font-size: 13px; color: #555; line-height: 1.6; }

/* ── Product detail page ───────────────────────────────────────────────── */
.acp-product-detail { padding: 24px 0; }
.acp-product-detail__title { font-size: 32px; color: var(--acp-navy); margin-bottom: 8px; }
.acp-product-detail__meta { font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.acp-product-detail__cta { margin-bottom: 24px; }
.acp-cta-btn { font-size: 16px !important; padding: 12px 32px !important; }

/* ── Form helpers ──────────────────────────────────────────────────────── */
.acp-manifest-row { margin-bottom: 8px; }
.acp-add-btn { font-size: 13px !important; margin-top: 8px !important; }
.acp-form-heading { color: var(--acp-navy); margin-bottom: 16px; }
.acp-section-heading { color: var(--acp-navy); font-size: 18px; margin: 24px 0 12px; }
.acp-back-link { display: inline-block; margin: 12px 0 20px; font-size: 13px; color: var(--acp-navy); }

/* ── Full-width learner pages ──────────────────────────────────────────── */
.path-my-products main,
.path-my-products .block-system-main-block,
.path-my-products .block-system-main-block > .content {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.acp-component-body { max-width: none; width: 100%; }

/* ── Public catalog table ───────────────────────────────────────────────── */
.acp-catalog__heading { color: var(--acp-navy); margin-bottom: 8px; }
.acp-catalog-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.acp-catalog-table th {
  background: var(--acp-navy);
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}
.acp-catalog-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f2;
  vertical-align: middle;
  font-size: 14px;
}
.acp-catalog-table tr:last-child td { border-bottom: none; }
.acp-catalog-table tr:hover td { background: #f8fafc; }
.acp-catalog-title-link { font-weight: 600; color: var(--acp-navy); text-decoration: none; }
.acp-catalog-title-link:hover { text-decoration: underline; }

/* ── Modules browse table (public catalog listing) ────────────────────────
   Dedicated class, deliberately NOT sharing .acp-modern-table: that class's
   mobile card layout hides its first column (a throwaway row-number on the
   unit/section table it was built for) — reusing it here hid the Module
   Name column instead, since it's this table's first column. */
.acp-catalog-modern-table { width: 100%; border-collapse: collapse; margin-top: 16px; background: #fff; }
.acp-catalog-modern-table th {
  background: linear-gradient(135deg, #0d3c6e 0%, #1565c0 100%);
  color: #fff;
  padding: 13px 18px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  border: none;
}
.acp-catalog-modern-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f2;
  vertical-align: middle;
  font-size: 14px;
}
.acp-catalog-modern-table tr:last-child td { border-bottom: none; }
.acp-catalog-modern-table tr:hover td { background: #f8fafc; }

/* ── Admin preview banner ───────────────────────────────────────────────── */
.acp-preview-banner {
  background: #fff8e1;
  border: 2px solid #f9a825;
  border-radius: var(--acp-radius);
  padding: 10px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #5d4037;
}
.acp-preview-banner strong { color: #e65100; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ── Canvas / panel ──────────────────────────────────────────────────── */
  /* Go truly edge-to-edge: no border-radius, no side margins, no shadow.  */
  .acp-page-canvas,
  .acp-page-panel {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* .acp-page-canvas has overflow:hidden unconditionally (see the base
       rule below) — its only job was clipping child content to the rounded
       corners we just zeroed above, so on mobile it now does nothing
       visually useful. Left in place, overflow:hidden this deep inside a
       nested flex-column layout (html/body -> .dialog-off-canvas-main-canvas
       -> .layout-container -> ... -> .acp-page-canvas) is a known trigger
       for real mobile Safari to miscalculate the page's total scrollable
       height — genuinely truncating it, not just visually clipping — which
       cuts the footer off and makes the page rubber-band short of it. */
    overflow: visible !important;
  }
  .acp-page-panel { padding: 16px 12px !important; }

  /* Hero header bars have their OWN independent border-radius (top corners
     bleeding to the panel/canvas edge) that isn't covered by the rule
     above — left rounded on mobile, it shows as a mismatched curve with
     visible background-colour artifact at the corner against the now-square
     canvas/panel beneath it. Button corner rounding is untouched. */
  .acp-hero-header,
  .acp-hero-header--panel,
  .acp-component-view__header,
  .acp-product-index__header {
    border-radius: 0 !important;
  }
  .acp-page-panel .acp-hero-header--panel {
    margin: 0 0 24px !important; /* no longer bleeding past a rounded panel edge */
  }

  /* ── Inner page regions ────────────────────────────────────────────────── */
  .acp-dashboard,
  .acp-product-index,
  .acp-component-view,
  .acp-notes-page { padding: 12px 8px; }
  .acp-index-table th, .acp-index-table td { font-size: 12px; padding: 7px 8px; }
  .acp-type-cards { flex-direction: column; }

  /* ── Tables: horizontal scroll wrapper ────────────────────────────────── */
  /* Wrap each table in a scroll container so columns stay their natural    */
  /* width and the user can swipe to see all columns.                        */
  .acp-index-table,
  .acp-dashboard-table,
  .acp-admin-table,
  .acp-catalog-table,
  .acp-notes-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Keep cell content from collapsing too narrow */
  .acp-index-table th, .acp-index-table td,
  .acp-notes-table  th, .acp-notes-table  td { white-space: nowrap; }
  /* Allow notes text columns to wrap since they contain prose */
  .acp-nt-personal,
  .acp-nt-topic { white-space: normal; min-width: 150px; max-width: 220px; }

  /* ── Product index header: hide the progress bar carousel arrows ────── */
  .acp-product-index__header > span:first-of-type,
  .acp-product-index__header > span:last-of-type { display: none; }

  /* ── Hamburger / nav icon: prevent stretching ─────────────────────────── */
  /* The three-bar icon should never stretch to fill the row.               */
  .acp-page-canvas ~ *,
  .acp-page-panel  ~ * { flex: 0 0 auto; }
}

/* ── Sticky footer fix ───────────────────────────────────────────────────── */
/* Ensure the footer background colour fills the bottom of every page,       */
/* even when content is short. The html/body flex-column with min-height:100vh */
/* pushes the footer down, but the theme footer itself must fill its background. */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport height: accounts for mobile browser
    chrome (address bar, WebView toolbars) that 100vh doesn't — real devices/
    in-app browsers can compute 100vh taller than what's actually visible,
    pushing the footer out of view. Ignored by browsers that don't support
    dvh, which simply keep using the 100vh value above. */
}
.dialog-off-canvas-main-canvas {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.layout-container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
main, [role="main"] { flex: 1 0 auto; }
footer, .site-footer, [role="contentinfo"] {
  flex-shrink: 0;
  /* Ensure the footer background always fills its own height. */
  width: 100%;
}

/* ── Item 3: reclaim screen real estate ──────────────────────────────────
   The theme renders a tall hero/parallax banner section above the main
   content on every page (#main-banner-page) — on our module's routes it's
   always empty (no page title set), so it's pure wasted vertical space.
   Hiding it, and tightening the section padding that follows, gets us much
   closer to the reference layout: content starts right under the top nav
   instead of scrolling past a blank banner first. */
body.path-my-products #main-banner-page {
  display: none !important;
}
body.path-my-products .vivek-shift-footer-to-bottom {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
/* With the banner gone, the sidebar's sticky offset (previously tuned to
   clear a much taller page) can sit much closer to the top too. */
body.path-my-products .acp-sidebar {
  top: 20px;
  max-height: calc(100vh - 40px);
}

/*
 * 20260724 - Fix abrupt content jump on scroll (/my-products/* pages only).
 *
 * functions.js compensates for the header going position:fixed (via its
 * "fixedmenu" class) by adding margin-top to #main-banner-page, equal to
 * the header's own height, so content below doesn't snap up when the
 * header leaves the document flow. That compensation target is exactly
 * the element the "Item 3" rule above hides with `display: none` on these
 * pages — so here, the header's height loss is never made up anywhere,
 * and the content directly below jumps up by ~152px the instant the
 * header goes fixed.
 *
 * Fix: give <header> itself a min-height matching its natural rendered
 * height (confirmed via DevTools: 151.76px), so it holds its own space in
 * the flow regardless of whether its child nav is fixed or static. This
 * needs no JS compensation and nothing here ever toggles, so there's
 * nothing to desync or jump in the first place.
 */
body.path-my-products header.site-header {
  min-height: 152px;
}

/* Wraps all learner-facing content in a solid white card so text and icons  */
/* are always legible regardless of the site's background image or colour.   */
.acp-page-canvas {
  background: #ffffff;
  border-radius: var(--acp-radius);
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  width: calc(100% - 16px);
  max-width: 1600px;
  margin: 16px 8px 16px 8px;
  padding: 0;
  overflow: hidden;
}

/* Remove the full-width override when inside the canvas — the canvas itself
   sets the max-width so the layout stays controlled. */
.acp-page-canvas .acp-dashboard,
.acp-page-canvas .acp-product-index,
.acp-page-canvas .acp-component-view {
  max-width: none !important;
  width: 100% !important;
}

/* Heading colours inside the white canvas.
   The product index and component view header bands are navy so their headings stay white.
   The dashboard title is on the white canvas itself so it uses navy. */
.acp-page-canvas .acp-product-index__header h1,
.acp-page-canvas .acp-component-view__title { color: #ffffff; }
.acp-page-canvas .acp-dashboard__title     { color: var(--acp-navy); }
.acp-page-canvas .acp-section-heading      { color: var(--acp-navy); }

/* Text outside the coloured header bands is dark. */
.acp-page-canvas .acp-back-link,
.acp-page-canvas .acp-topic-title a,
.acp-page-canvas .acp-component-body { color: var(--acp-text); }

/* ── Table readability (Fix 3) ──────────────────────────────────────────── */
/* All admin and public tables get a solid white background with a subtle     */
/* striped row treatment so they never bleed into the site background image.  */
.acp-admin-table,
.acp-catalog-table,
.acp-index-table {
  background: #ffffff;
  border-radius: var(--acp-radius);
  box-shadow: var(--acp-shadow);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
.acp-admin-table th,
.acp-catalog-table th,
.acp-index-table th {
  background: var(--acp-navy);
  color: #ffffff;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  text-align: left;
  border-bottom: none;
}
.acp-admin-table td,
.acp-catalog-table td,
.acp-index-table td {
  background: #ffffff;
  padding: 13px 16px;
  border-bottom: 1px solid #eef0f2;
  vertical-align: middle;
  font-size: 14px;
  color: var(--acp-text);
}
/* Subtle alternating stripe */
.acp-admin-table tbody tr:nth-child(even) td,
.acp-catalog-table tbody tr:nth-child(even) td,
.acp-index-table tbody tr:nth-child(even) td { background: #f8fafc; }

.acp-admin-table tr:hover td,
.acp-catalog-table tr:hover td,
.acp-index-table tr:hover td { background: #eef3f9 !important; }

.acp-admin-table tr:last-child td,
.acp-catalog-table tr:last-child td,
.acp-index-table tr:last-child td { border-bottom: none; }

/* Wrapper for all public/admin tables so they never sit naked on a bg image */
.acp-table-wrap {
  background: #ffffff;
  border-radius: var(--acp-radius);
  box-shadow: var(--acp-shadow);
  padding: 20px 24px;
  margin: 16px 0;
}

/* ── White page panel (Issue 1) ─────────────────────────────────────────── */
/* Used on public-facing pages (/products, /products/{id}) where a Drupal    */
/* theme with a full-page background image is active. The panel ensures all  */
/* text and tables sit on a solid white surface.                              */
.acp-page-panel {
  background: #ffffff;
  border-radius: var(--acp-radius);
  box-shadow: 0 4px 32px rgba(0, 0, 0, .22);
  width: calc(100% - 16px);
  max-width: 1600px;
  margin: 16px 8px 16px 8px;
  padding: 32px 40px;
}

.acp-page-panel .acp-catalog__heading {
  color: var(--acp-navy);
  font-size: 32px;
  margin-bottom: 6px;
}

.acp-page-panel .acp-catalog__intro {
  color: #444;
  margin-bottom: 20px;
  font-size: 15px;
}

/* Access-denied message panel */
.acp-access-denied {
  text-align: center;
  padding: 48px 40px;
}
.acp-access-denied p {
  font-size: 16px;
  color: #333;
}

/* Product detail page inside the panel */
.acp-page-panel .acp-product-detail__title { color: var(--acp-navy); }
.acp-page-panel .acp-product-detail__meta  { color: #666; }

/* ── Sticky footer (Issue 2) ────────────────────────────────────────────── */
/* Makes the <body> a flex column so the footer is always pushed to the      */
/* bottom of the viewport, even when page content is short.                  */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
/* The main content region grows to fill available space, pushing the footer
   down. Targets the Drupal main content block and page layout wrapper.
   These selectors cover most Drupal 10 themes; add your theme's wrapper
   selector here if needed.                                                   */
.layout-container,
.dialog-off-canvas-main-canvas {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

main,
.block-system-main-block {
  flex: 1 0 auto;
}

footer,
.site-footer,
[role="contentinfo"] {
  flex-shrink: 0;
  margin-top: auto;
}

/* ── Dashboard table (Issue 6) ──────────────────────────────────────────── */
.acp-dashboard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  margin-top: 8px;
}
.acp-dashboard-table th {
  background: var(--acp-navy);
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  border-bottom: none;
}
.acp-dashboard-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f2;
  vertical-align: middle;
  font-size: 14px;
  color: var(--acp-text);
  background: #ffffff;
}
.acp-dashboard-table tbody tr:nth-child(even) td { background: #f8fafc; }
.acp-dashboard-table tbody tr:hover td { background: #eef3f9 !important; }
.acp-dashboard-table tbody tr:last-child td { border-bottom: none; }
.acp-dashboard-table__row--completed td { background: #f1f8f2 !important; }
.acp-dt-title { font-weight: 600; color: var(--acp-navy); }
.acp-dt-progress { min-width: 160px; }
.acp-dt-progress .acp-progress-bar { margin: 4px 0 3px; }
.acp-dt-progress small { font-size: 11px; color: #777; }
.acp-dt-status { white-space: nowrap; }
.acp-dt-date { white-space: nowrap; color: #777; font-size: 13px; }
.acp-dt-actions { white-space: nowrap; }

/* ── Notes page improvements ─────────────────────────────────────────────── */
.acp-notes-page { padding: 28px 32px; }
.acp-notes-empty { color: #666; font-style: italic; margin: 20px 0; }
.acp-note-entry { margin-bottom: 16px; border: 1px solid var(--acp-border); border-radius: var(--acp-radius); padding: 14px 16px; background: #fff; }
.acp-note-entry__topic { font-size: 13px; font-weight: 600; color: var(--acp-navy); margin-bottom: 8px; }
.acp-note-entry__text { width: 100%; border: 1px solid var(--acp-border); border-radius: 4px; padding: 8px 10px; font-size: 14px; resize: vertical; box-sizing: border-box; }
.acp-notes-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--acp-border); }

/* ── No marketing page hint ─────────────────────────────────────────────── */
.acp-no-marketing { padding: 20px; background: var(--acp-grey); border-radius: var(--acp-radius); }
.acp-no-marketing__hint { font-size: 12px; color: #888; margin-top: 8px; }
.acp-no-marketing__hint code { background: #e8eef5; padding: 1px 5px; border-radius: 3px; }

/* ── Notes table (issues 3–6 redesign) ─────────────────────────────────── */
.acp-notes-header { margin-bottom: 20px; }
.acp-notes-header h1 { color: var(--acp-navy); margin-bottom: 6px; }

.acp-notes-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--acp-radius);
  box-shadow: var(--acp-shadow);
  overflow: hidden;
}
.acp-notes-table th {
  background: linear-gradient(135deg, #0d3c6e 0%, #1565c0 100%);
  color: #fff;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  text-align: left;
  border: none;
}
.acp-notes-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #eef0f2;
  vertical-align: top;
  background: #fff;
  font-size: 14px;
  color: var(--acp-text);
}
.acp-notes-table tbody tr:last-child td { border-bottom: none; }
.acp-notes-table tbody tr:nth-child(even) td { background: #f8fafc; }
.acp-notes-table tbody tr:hover td { background: #eef3f9 !important; }
/* New unsaved rows get a warm tint */
.acp-notes-new-row td { background: #fffbf0 !important; }

/* Column widths */
.acp-nt-serial  { width: 44px; text-align: center; font-weight: 600; color: #999; }
.acp-nt-topic   { width: 30%; }
.acp-nt-personal{ /* flex fill */ }
.acp-nt-actions { width: 90px; text-align: center; white-space: nowrap; }

/* Links in the topic column */
.acp-note-link { color: var(--acp-navy); font-weight: 500; text-decoration: none; }
.acp-note-link:hover { text-decoration: underline; }
.acp-note-link-inline { color: #1565c0; text-decoration: underline; word-break: break-all; }
.acp-note-link-inline:hover { color: #0d3c6e; }
.acp-note-manual-label { color: #888; font-style: italic; }

/* Textareas inside the notes table */
.acp-note-personal,
.acp-note-topic-input {
  width: 100%;
  border: 1px solid #dde1e4;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  background: #fff;
  transition: border-color .2s;
}
.acp-note-personal:focus,
.acp-note-topic-input:focus {
  border-color: var(--acp-navy);
  outline: none;
  box-shadow: 0 0 0 2px rgba(20,60,100,.12);
}

/* Empty state */
.acp-notes-empty {
  text-align: center;
  color: #888;
  font-style: italic;
  padding: 24px !important;
}

/* Footer toolbar */
.acp-notes-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eef0f2;
  flex-wrap: wrap;
}

/* Save button disabled state */
#acp-save-notes-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Certificate navy header bar (cert issues 1 & 2) */
.cert-header-bar {
  background: #143c64;
  margin: -60px -80px 32px -80px;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-logo {
  display: block;
  max-height: 64px;
  max-width: 320px;
}

/* ── Full-width marketing page wrapper ──────────────────────────────────── */
.acp-marketing-full {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ── Marketing page component styles (acp-mp-*) ─────────────────────────── */
/* All classes are prefixed acp-mp- to avoid collision with the Drupal theme. */

.acp-mp-body {
  font-family: Arial, Helvetica, sans-serif;
  color: #243447;
  margin: 0;
  line-height: 1.6;
}

/* ── Shared container ───────────────────────────────────────────────────── */
.acp-mp-container {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
/* Left-to-right gradient matching the screenshot */
.acp-mp-hero {
  background: linear-gradient(to right, #0d5cbf, #1a90d9);
  color: #ffffff;
  padding: 64px 0 72px;
}

.acp-mp-h1 {
  font-size: 38px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 16px;
  line-height: 1.2;
  letter-spacing: -.3px;
}

.acp-mp-h2 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 18px;
  line-height: 1.4;
}

.acp-mp-lead {
  font-size: 15px;
  color: rgba(255,255,255,.92);
  max-width: 520px;
  margin: 0 0 28px;
  line-height: 1.7;
}

/* Ghost / outline button — white border, white text, no fill */
.acp-mp-btn-ghost {
  display: inline-block;
  border: 2px solid #ffffff;
  color: #ffffff !important;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: background .2s, color .2s;
  background: transparent;
}
.acp-mp-btn-ghost:hover {
  background: rgba(255,255,255,.15);
  color: #ffffff !important;
  text-decoration: none;
}

/* Filled blue button — used in pricing and body CTAs */
.acp-mp-btn-primary {
  display: inline-block;
  background: #1976d2;
  color: #ffffff !important;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  transition: background .2s;
  margin-top: 16px;
}
.acp-mp-btn-primary:hover { background: #0b4f8a; text-decoration: none; }

/* Outline blue button */
.acp-mp-btn-outline {
  display: inline-block;
  border: 2px solid #1976d2;
  color: #1976d2 !important;
  text-decoration: none;
  padding: 9px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 16px;
  transition: background .2s, color .2s;
  background: transparent;
}
.acp-mp-btn-outline:hover {
  background: #1976d2;
  color: #ffffff !important;
  text-decoration: none;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.acp-mp-section       { padding: 52px 0; background: #ffffff; }
.acp-mp-section--alt  { background: #f5f7fb; }

.acp-mp-section-h2 {
  font-size: 26px;
  font-weight: 700;
  color: #0b4f8a;
  margin: 0 0 20px;
}

/* ── Callout ─────────────────────────────────────────────────────────────── */
.acp-mp-callout {
  background: #eaf4ff;
  border-left: 5px solid #1976d2;
  padding: 18px 20px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 36px;
}
.acp-mp-callout b  { display: block; color: #0b4f8a; margin-bottom: 6px; font-size: 15px; }
.acp-mp-callout p  { margin: 0; font-size: 14px; color: #3a4f66; }

/* ── Feature cards ───────────────────────────────────────────────────────── */
.acp-mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.acp-mp-card {
  background: #f5f7fb;
  padding: 24px 20px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  transition: box-shadow .2s, transform .15s;
}
.acp-mp-card:hover {
  box-shadow: 0 4px 16px rgba(13,92,191,.12);
  transform: translateY(-2px);
}
.acp-mp-card-icon { font-size: 28px; margin-bottom: 10px; }
.acp-mp-card h3   { margin: 0 0 8px; font-size: 16px; color: #0b4f8a; font-weight: 700; }
.acp-mp-card p    { margin: 0; font-size: 13px; color: #4a5568; line-height: 1.6; }

/* ── What's included grid ────────────────────────────────────────────────── */
.acp-mp-includes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.acp-mp-include-item {
  background: #f0f7ff;
  border: 1px solid #bee3f8;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #0b4f8a;
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.acp-mp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 8px;
}
.acp-mp-pricing-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 28px 24px;
  position: relative;
  transition: box-shadow .2s;
}
.acp-mp-pricing-card:hover { box-shadow: 0 4px 20px rgba(13,92,191,.12); }
.acp-mp-pricing-card--featured { border-color: #1976d2; }
.acp-mp-pricing-badge {
  position: absolute;
  top: -13px; left: 24px;
  background: #1976d2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 20px;
}
.acp-mp-pricing-label  { font-size: 13px; color: #718096; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.acp-mp-pricing-price  { font-size: 36px; font-weight: 800; color: #0b4f8a; margin-bottom: 8px; }
.acp-mp-pricing-period { font-size: 18px; font-weight: 400; color: #718096; }
.acp-mp-pricing-note   { font-size: 13px; color: #718096; margin-bottom: 4px; }
.acp-mp-pricing-features { padding-left: 18px; margin: 10px 0 0; }
.acp-mp-pricing-features li { font-size: 13px; color: #4a5568; margin-bottom: 6px; line-height: 1.5; }

/* ── Bottom CTA band ─────────────────────────────────────────────────────── */
.acp-mp-cta-band {
  background: linear-gradient(to right, #0d5cbf, #1a90d9);
  color: #ffffff;
  padding: 56px 0;
  text-align: center;
}
.acp-mp-cta-h2 {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 14px;
}
.acp-mp-cta-p {
  font-size: 15px;
  color: rgba(255,255,255,.9);
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: 1.7;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .acp-mp-h1       { font-size: 28px; }
  .acp-mp-h2       { font-size: 17px; }
  .acp-mp-hero     { padding: 44px 0 52px; }
  .acp-mp-section  { padding: 36px 0; }
  .acp-mp-pricing-price { font-size: 28px; }
}

/* ── Notes page: read-only display / edit mode ──────────────────────────── */
.acp-note-display {
  font-size: 14px;
  color: var(--acp-text);
  line-height: 1.6;
  padding: 4px 2px;
  min-height: 28px;
}
.acp-note-empty-hint { color: #aaa; font-style: italic; font-size: 13px; }
.acp-note-personal--editing { border-color: var(--acp-navy) !important; }

/* ── Bundle detail auto-generated page ──────────────────────────────────── */
.acp-bundle-detail { padding: 8px 0; }
.acp-bundle-detail h2 { color: var(--acp-navy); margin-bottom: 10px; }
.acp-bundle-note { font-size: 12px; color: #999; margin-top: 16px; }
.acp-bundle-note code { background: #f0f0f0; padding: 1px 4px; border-radius: 3px; }

/* ── Bundle N/A action label ─────────────────────────────────────────────── */
.acp-bundle-na-label {
  display: inline-block;
  font-size: 12px;
  color: #999;
  font-style: italic;
  vertical-align: middle;
  padding: 4px 8px;
}

/* ── Layout expansion for learner pages ─────────────────────────────────── */
/* Drupal themes often constrain .layout-container or .block-system-main-block */
/* to ~1100px. On pages with our white canvas, we override that so the canvas  */
/* can fill the available viewport width up to 1400px.                         */
.path-my-products .layout-container,
.path-my-products .layout-container > .layout-content,
.path-my-products .block-system-main-block,
.path-my-products main.role-main,
.path-my-products [role="main"] {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Also expand for product detail and catalog pages */
.path-products .layout-container,
.path-products .layout-container > .layout-content,
.path-products .block-system-main-block,
.path-products main.role-main,
.path-products [role="main"] {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Mobile-specific layout fixes ───────────────────────────────────────── */
@media (max-width: 768px) {

  /* Prevent the canvas width expansion from bleeding into the theme header.
     The layout container expansion should start below the admin/site header. */
  .path-my-products .layout-container,
  .path-products    .layout-container {
    overflow-x: hidden; /* prevent horizontal scroll on the outer container */
  }

  /* Site header: ensure it sits above the canvas and doesn't get clipped. */
  header, .site-header, [role="banner"] {
    position: relative;
    z-index: 100;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Notes table: ensure the table wrapper scrolls, not the whole page */
  .acp-notes-page {
    overflow: hidden; /* contain overflow within the notes page div */
  }
  .acp-notes-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Make the Actions column min-width so Edit/Save/Remove buttons are reachable */
  .acp-nt-actions { min-width: 130px; }
  .acp-nt-serial  { min-width: 32px; }

  /* Certificate page on mobile */
  .cert-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .cert-action-bar a, .cert-action-bar button {
    width: 100%;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL TABLE SCROLL WRAPPER
   All accredify admin and learner tables get a scroll wrapper on ALL screen
   sizes, not just mobile, so long content never wraps in narrow viewports.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrap every acp table in an overflow scroll container */
.acp-admin-table,
.acp-dashboard-table,
.acp-catalog-table,
.acp-index-table,
.acp-notes-table {
  display: table !important;
  /* min-width removed: was causing 458px overflow on mobile */
}

/* The Drupal render '#type'=>'table' wraps in a div with class 'tableresponsive-enabled'
   on some themes — ensure that also scrolls */
.tableresponsive-enabled,
.responsive-enabled,
.views-table {
  overflow-x: auto;
}

/* Our own table wrappers — applied via a surrounding div */
.acp-table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}

/* ── Mobile override: tables scroll horizontally, not wrap ─────────────── */
@media (max-width: 900px) {
  /* Force Drupal's own table to scroll rather than wrap */
  .acp-admin-table,
  .acp-catalog-table,
  .acp-index-table,
  .acp-dashboard-table,
  .acp-notes-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  /* Allow wrappable cell types to still wrap */
  .acp-nt-personal,
  .acp-nt-topic,
  .acp-topic-title,
  .acp-dt-title { white-space: normal !important; min-width: 140px; }

  /* Page canvas: true full bleed */
  .acp-page-canvas,
  .acp-page-panel {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .acp-page-panel { padding: 12px 8px !important; }
}

/* ── Footer full background fix ────────────────────────────────────────── */
/* Some themes set the footer as an inline element; force it block + 100% */
footer.site-footer,
.site-footer,
footer[role="contentinfo"],
[role="contentinfo"] {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Ensure body grows to push footer down */
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.dialog-off-canvas-main-canvas {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.layout-container {
  flex: 1 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   THREE-COLUMN SIDEBAR LAYOUT (left sidebar only — right sidebar removed)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ──────────────────────────────────────────────────────── */
/* ── Layout wrapper: flex container for sidebar + content ────────────────── */
.acp-layout-with-sidebars {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

.acp-layout-with-sidebars .acp-page-canvas,
.acp-layout-with-sidebars .acp-page-panel {
  margin-top: 0 !important;
}

/* ── Centre column — fills all remaining space ───────────────────────────── */
.acp-layout-centre {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Left sidebar — sticky, in-flow ──────────────────────────────────────── */
.acp-sidebar {
  flex: 0 0 260px;
  width: 260px;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: #ffffff;
  border-radius: var(--acp-radius);
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
  scrollbar-width: thin;
  scrollbar-color: #dde1e4 transparent;
  z-index: 50;
  opacity: 1;
  align-self: flex-start;
}

.acp-sidebar--ready { opacity: 1; }

/* ── On my-products AND products pages: full-width container with padding   */
.path-my-products .vivek-shift-footer-to-bottom > .container,
#our-shop > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* On very wide screens add more breathing room */
@media (min-width: 1600px) {
  .path-my-products .vivek-shift-footer-to-bottom > .container,
  #our-shop > .container {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* On mobile, the 40px side padding above left a big visible gap between
   the dashboard/catalog cards and the screen edges — inconsistent with the
   footer immediately below, which is styled full-bleed edge-to-edge (see
   "Footer full background fix" further down this file) and made the page
   look like the content column was misaligned rather than deliberately
   framed. .acp-dashboard/.acp-page-panel already add their own smaller
   padding at this breakpoint (8-12px, see the 768px block above), so
   zeroing this outer container's padding still leaves the cards with
   reasonable breathing room without the extra 40px on top of it. */
@media (max-width: 768px) {
  .path-my-products .vivek-shift-footer-to-bottom > .container,
  #our-shop > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.acp-sb-header {
  background: #0d3c6e;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 10px 14px;
}

.acp-sb-back {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
}
.acp-sb-back:hover { color: #fff; text-decoration: underline; }

.acp-sb-nav {
  display: flex;
  flex-direction: column;
}

/* ── Module-level item ───────────────────────────────────────────────────── */
.acp-sb-item--module {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  text-decoration: none;
  color: #1a1a2e;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #f0f2f5;
  transition: background .13s;
  cursor: pointer;
}
.acp-sb-item--module:hover { background: #f0f4f8; color: #0d3c6e; text-decoration: none; }
.acp-sb-item--module.acp-sb-item--active {
  background: #1565c0;
  color: #ffffff;
  border-left: none;
  padding-left: 12px;
}
.acp-sb-item--module.acp-sb-item--active .acp-sb-item__name { color: #ffffff; }
.acp-sb-item--module.acp-sb-item--active .acp-sb-item__type { color: rgba(255,255,255,.7); }
.acp-sb-item--module.acp-sb-item--active:hover { background: #0d4ea6; }
.acp-sb-item__type {
  display: block;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  margin-bottom: 1px;
}
.acp-sb-item__name { color: #1a1a2e; }
.acp-sb-item--active .acp-sb-item__name { color: #0d3c6e; }
/* Remove old dot — no longer needed */
.acp-sb-item__dot { display: none; }

/* Module link fills remaining space */
.acp-sb-module-link {
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Spacer when no toggle (non-active modules) */
.acp-sb-module-toggle-spacer {
  flex: 0 0 20px;
}

/* ── Square toggle button — used at BOTH module and unit level ───────────── */
/* Issue 2,3,6: +/− in rounded square, thick minus, left-aligned             */
/* Scoped + !important: defends against a global `button { border:none }`   */
/* style reset elsewhere in the theme silently stripping these.             */
.acp-sidebar .acp-sb-toggle,
.acp-sidebar .acp-sb-module-toggle,
.acp-sidebar .acp-sb-unit-toggle {
  all: unset;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid currentColor !important;
  border-radius: 4px !important;
  background: transparent !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  transition: background .13s, color .13s;
  user-select: none;
  color: #0d3c6e;
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}
.acp-sb-item--active .acp-sb-toggle,
.acp-sb-item--active .acp-sb-module-toggle {
  color: #fff !important;
  border-color: rgba(255,255,255,0.7) !important;
}
.acp-sb-item--active .acp-sb-toggle:hover,
.acp-sb-item--active .acp-sb-module-toggle:hover {
  background: rgba(255,255,255,0.2) !important;
}
.acp-sb-toggle-icon {
  display: block !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  letter-spacing: 0;
  pointer-events: none; /* clicks pass through to the button, never blocked by the glyph */
}

/* ── Unit/section tree ─────────────────────────────────────────────────── */
.acp-sb-tree {
  display: none;
  background: #f8fafc;
  position: relative;
  /* 36px matches .acp-sb-unit__sections so the connector recipe below lines up */
  padding-left: 36px;
  padding-bottom: 4px;
}
.acp-sb-tree--open { display: block; }

/* Vertical tree line — module toggle square down to the last unit row. */
.acp-sb-tree.acp-sb-tree--open::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 12px;
  width: 1px;
  background: #90a4ae;
  border-radius: 1px;
}

.acp-sb-unit {
  padding: 0;
  margin: 0;
}
.acp-sb-unit__title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #555;
  padding: 7px 10px 3px;
}

.acp-sb-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  color: #1a1a2e !important;
  font-size: 12px;
  line-height: 1.4;
  transition: background .12s;
  white-space: normal;       /* allow text to wrap, never clip */
  overflow: visible;
  min-width: 0;
}
.acp-sb-section__name {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  color: inherit;            /* inherits from parent link colour */
}
.acp-sb-section:hover {
  background: #e8f0fc;
  color: #0d4ea6 !important;         /* Issue 8: link blue on hover */
  text-decoration: underline;
}
.acp-sb-section--active {
  background: #a9f9af !important;   /* darker soft green */
  color: var(--acp-green) !important;
  font-weight: 600;
}
.acp-sb-section--active .acp-sb-item__tick { color: var(--acp-green); }
.acp-sb-section--done { color: #ffffff !important; }  /* white text on completed sections */
/* .acp-sb-section__name defined above with flex:1 and colour:inherit */

.acp-sb-item__tick {
  flex-shrink: 0;
  font-size: 11px;
  color: #2e7d32;
  width: 16px; text-align: center;
}
.acp-sb-item__num {
  flex-shrink: 0;
  width: 16px; text-align: center;
  font-size: 10px; color: #aaa;
}

/* ── Tablet/mobile: hide sidebar, stack layout vertically ───────────────── */
@media (max-width: 900px) {
  .acp-layout-with-sidebars {
    flex-direction: column;
  }
  .acp-sidebar {
    display: none;
  }
}

/* ── On wide screens: give sidebar a bit more room ───────────────────────── */
@media (min-width: 1400px) {
  .acp-sidebar {
    flex: 0 0 280px;
    width: 280px;
  }
}


/* ── Page panel heading reduction ────────────────────────────────────────── */
.acp-catalog__heading {
  font-size: 28px;
  color: var(--acp-navy);
  margin: 0 0 6px;
  font-weight: 800;
}
.acp-catalog__intro {
  color: #555;
  margin: 0 0 8px;
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════════════
   UNIFIED MODERN TABLE — used on /products, /my-products, /my-products/1/start
   Header matches the screenshot: deep navy gradient, white bold text.
   Buttons: filled navy pills (matching the Enroll Now button style).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero section header (gradient matching screenshot) ─────────────────── */
.acp-hero-header {
  background: linear-gradient(135deg, #0d3c6e 0%, #1565c0 100%);
  color: #fff;
  padding: 20px 28px 18px;
  border-radius: var(--acp-radius) var(--acp-radius) 0 0;
}
/* Only the product-index page's hero uses the info/actions split layout —
   other pages (dashboard, public catalog) still use plain <h1>/<p> children
   and must keep stacking vertically, not flex side-by-side. */
.acp-hero-header:has(.acp-header-info) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.acp-hero-header .acp-header-info { width: 100%; }

/* Item 5: "Completed!" pill, shown above the course title in the header
   when a certificate is available — same green fill/border convention as
   the Reset Completion button and the completed badge elsewhere. */
.acp-completed-pill {
  display: inline-block;
  background: #a9f9af;
  color: var(--acp-green);
  border: 2px solid var(--acp-green);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Items 3 & 4: per-section Completed / In Progress status pill on component
   pages — toggled live by JS when Reset Completion / Mark Complete is
   clicked (see _bindActionButtons in accredify_create_product.js). */
.acp-status-pill {
  display: inline-block;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}
.acp-status-pill--complete {
  background: #a9f9af;
  color: var(--acp-green);
  border: 2px solid var(--acp-green);
}
.acp-status-pill--in-progress {
  background: #fff3e0;
  color: var(--acp-orange);
  border: 2px solid var(--acp-orange);
}

.acp-hero-header__title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
}
/* Site-wide learner/customer-facing font pairing — DM Serif Display for
   page headings, Lato for everything else. Applies to every page wrapped
   in .acp-page-panel or .acp-page-canvas: /products, /products/{id},
   /my-products, /my-products/{id}/start, /my-products/{id}/learn/...,
   /my-products/{id}/notes, and /user/{uid}/my-transactions. Admin pages
   (/admin/accredify/...) never use these wrapper classes, so they're
   untouched. !important is needed since the theme sets its own font on
   these same elements and would otherwise win regardless of our selector
   specificity. */
.acp-page-panel,
.acp-page-panel *,
.acp-page-canvas,
.acp-page-canvas * {
  font-family: 'Lato', sans-serif !important;
}
.acp-page-panel h1,
.acp-page-canvas h1,
.acp-hero-header__title,
.acp-component-view__title,
.acp-catalog__heading,
.acp-product-detail__title,
.acp-dashboard__title {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  letter-spacing: .5px;
}
/* Status column on this page: drop the coloured pill background, keep the
   icon + label as plain text (only .acp-modern-table + .acp-badge appear
   together on this page, so this is safely scoped here). */
.acp-modern-table .acp-badge {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.acp-modern-table .acp-badge--completed   { color: var(--acp-green); }
.acp-modern-table .acp-badge--in-progress { color: var(--acp-orange); }
.acp-modern-table .acp-badge--not-started { color: #546e7a; }
.acp-hero-header__sub {
  font-size: 14px;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.acp-hero-header__progress {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* Issue 1: badge inside the gradient hero header = plain white text, no chip */
.acp-hero-header .acp-status-badge {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,.9) !important;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.acp-progress-bar--hero {
  flex: 1;
  max-width: 300px;
}

/* ── Shared modern table ────────────────────────────────────────────────── */
.acp-modern-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  /* No min-width — tables scroll horizontally on mobile via wrapper */
}

/* Column widths for the collapsible unit/section table — narrower Unit
   and Duration/Status columns, wider Section column, since Section names
   tend to run longer than the other fields. table-layout:fixed makes the
   browser respect these widths precisely instead of sizing columns by
   content. Scoped to this table variant only, not the base
   .acp-modern-table class used elsewhere. */
.acp-modern-table--grouped {
  table-layout: fixed;
}
.acp-modern-table--grouped th:nth-child(1),
.acp-modern-table--grouped td:nth-child(1) { width: 4%; }
.acp-modern-table--grouped th:nth-child(2),
.acp-modern-table--grouped td:nth-child(2) { width: 16%; }  /* Unit — reduced */
.acp-modern-table--grouped th:nth-child(3),
.acp-modern-table--grouped td:nth-child(3) { width: 30%; }  /* Section — increased */
.acp-modern-table--grouped th:nth-child(4),
.acp-modern-table--grouped td:nth-child(4) { width: 10%; }  /* Duration — reduced */
.acp-modern-table--grouped th:nth-child(5),
.acp-modern-table--grouped td:nth-child(5) { width: 12%; }  /* Status — reduced */
.acp-modern-table--grouped th:nth-child(6),
.acp-modern-table--grouped td:nth-child(6) { width: 28%; }  /* Details | Actions — remainder */

.acp-modern-table th {
  background: linear-gradient(135deg, #0d3c6e 0%, #1565c0 100%);
  color: #ffffff;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  text-align: left;
  border: none;
  white-space: nowrap;
}
.acp-modern-table th:first-child { border-radius: 0; }
.acp-modern-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: middle;
  font-size: 14px;
  color: #2d3748;
  background: #fff;
}
.acp-modern-table tbody tr:last-child td { border-bottom: none; }
.acp-modern-table tbody tr:nth-child(even) td { background: #fafbfc; }
.acp-modern-table tbody tr:hover td { background: #f0f6ff !important; }
.acp-modern-table .acp-row--completed td { background: #c8f5c8 !important; }

/* ── Navigation row below the hero header ────────────────────────────────── */
.acp-index-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f2f5;
  flex-wrap: wrap;
}
.acp-empty-msg { padding: 20px 24px; color: #777; }

/* ── Override old badge classes to use new status badge ────────────────── */
.acp-status-badge--in-progress { background: #fff3e0; color: #e65100; }
.acp-status-badge--partial     { background: #fff3e0; color: #e65100; }

/* ── Collapsible unit rows in the product index table ─────────────────────
   A unit with more than one section renders as one summary row with a
   +/- toggle before the unit name, plus hidden child rows for each
   section — same tree-connector visual language as the sidebar, applied
   to the main content table. */
.acp-unit-row { cursor: pointer; }
.acp-unit-row .acp-actions-cell,
.acp-unit-row .acp-topic-title a { cursor: pointer; } /* these still navigate normally on click */

/* Fixed icon slot + fixed text start position — applied to every
   .acp-topic-title cell (not just collapsible ones), so a unit with only
   one section (and therefore no toggle button at all) still lines up its
   name with every other unit's name instead of sitting further left. */
.acp-topic-title {
  position: relative;
  padding-left: 48px !important; /* 18 (icon left) + 22 (icon width) + 8 (gap) */
}
.acp-unit-toggle-btn {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  border: 1px solid #c7d2e0;
  border-radius: 4px;
  background: #f4f7fb;
  color: #0d3c6e;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.acp-unit-toggle-btn:hover { background: #e3edfa; }
.acp-unit-toggle-icon { pointer-events: none; }

.acp-section-row td {
  background: #f9fbfd;
}
.acp-section-row[hidden] { display: none; }

/* Tree connector — an inline SVG per section row draws the vertical
   trunk, the curved elbow into the horizontal branch, and the arrowhead,
   all with the same stroke-width. This replaced an earlier CSS-only
   version (border-left/border-bottom for the curve, a background box for
   the straight continuation below it) — those two techniques rounded the
   same declared pixel width slightly differently, so the two segments of
   the line visibly didn't match even though the CSS values were
   identical. SVG's vector-effect="non-scaling-stroke" guarantees a
   constant, identical stroke width for every segment regardless of how
   the SVG itself is stretched to fit the cell's actual dimensions, which
   a CSS border/background mix can't reliably guarantee.
   The viewBox is 0–100 vertically and represents the full row height, so
   the curve always sits at the row's vertical centre no matter how tall
   the row actually renders; horizontally it stretches to the cell's
   width via preserveAspectRatio="none". Section rows past the last one
   in a group omit the continuation segment (M90,50 L90,100) entirely, in
   the template, rather than hiding it here, since Twig already knows
   which row is last. */
.acp-topic-title--nested {
  position: relative;
  padding-left: 0 !important; /* no icon/text here — only the connector graphic */
}
.acp-tree-svg {
  position: absolute;
  inset: -1px 6px -1px 0; /* -1px top/bottom seamlessly joins adjoining rows; 6px held back on the right for breathing room before the section name */
  width: calc(100% - 6px);
  height: calc(100% + 2px);
  overflow: visible;
}

/* ── Hero header inside a panel (no border-radius on top needed) ─────────── */
.acp-hero-header--panel {
  border-radius: var(--acp-radius) var(--acp-radius) 0 0;
  margin-bottom: 0;
}
.acp-page-panel .acp-hero-header--panel {
  margin: -32px -40px 24px;   /* bleed to panel edges */
  border-radius: var(--acp-radius) var(--acp-radius) 0 0;
}

/* ── Bundle N/A label in dashboard ────────────────────────────────────────── */
.acp-bundle-na-label {
  display: inline-block;
  font-size: 12px;
  color: #999;
  font-style: italic;
  vertical-align: middle;
  padding: 4px 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTON OVERRIDES — Issue 6: match "Enroll Now" style
   Rectangular with rounded corners, blue fill, white text.
   ═══════════════════════════════════════════════════════════════════════════ */
.acp-btn {
  display: inline-block !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;    /* rectangular rounded — matches Enroll Now */
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .18s, border-color .18s !important;
  white-space: nowrap;
}
.acp-btn--primary {
  background: #1976d2 !important;
  color: #ffffff !important;
  border: 2px solid #1976d2 !important;
  box-shadow: none !important;
}
.acp-btn--primary:hover {
  background: #1256a0 !important;
  border-color: #1256a0 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Mark Complete / Reset Completion button — once a section is marked
   complete, switch from the standard primary blue to the same soft-green
   pairing already used for "completed" badges elsewhere on the site
   (.acp-badge--completed: #a9f9af background, --acp-green text), so the
   "this is done" state reads consistently across the whole module.
   NOTE: in the header (the only place this button currently renders),
   .acp-btn--on-header overrides this to plain white instead — see that
   rule for why. This base rule is kept for any future non-header usage. */
.acp-complete-toggle-btn[data-is-complete="1"] {
  background: #a9f9af !important;
  color: var(--acp-green) !important;
  border: 2px solid var(--acp-green) !important;
}
.acp-complete-toggle-btn[data-is-complete="1"]:hover {
  background: #8ff397 !important;
  border-color: var(--acp-green) !important;
  color: var(--acp-green) !important;
}
.acp-btn--outline {
  background: transparent !important;
  color: #1976d2 !important;
  border: 2px solid #1976d2 !important;
}
.acp-btn--outline:hover {
  background: #1976d2 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Issue 3: progress bar — light green #92e9a9 when complete */
.acp-progress-bar__fill--complete {
  background: #92e9a9 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ISSUES 1, 2, 3 — Component footer green bg; product index green bg;
   sidebar section text: blue link colour except active (white).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Issue 1: component footer green background */
.acp-component-footer--green {
  background: #f0fff4 !important;
  border: 1px solid #c6f6d5;
  border-radius: 0 0 var(--acp-radius) var(--acp-radius);
  padding: 14px 24px !important;
}

/* Issue 2: product index (#/my-products/1/start) green section background */
.acp-product-index {
  background: #ffffff !important;
}
.acp-product-index .acp-hero-header {
  /* hero header keeps its blue gradient — only the body below is green */
  background: linear-gradient(135deg, #0d3c6e 0%, #1565c0 100%) !important;
}

/* Issue 3: sidebar section text — blue link colour by default,
   white ONLY when section has blue active background */
.acp-sb-section {
  color: #1565c0 !important;        /* link blue by default */
}
.acp-sb-section:hover {
  color: #0d3c6e !important;
  text-decoration: underline;
}
.acp-sb-section--done {
  color: #1565c0 !important;        /* keep blue for completed non-active */
}
.acp-sb-section--active {
  color: var(--acp-green) !important;   /* dark green text on the new soft-green active background */
}
.acp-sb-section--active:hover {
  color: var(--acp-green) !important;
}

/* Ensure section name inherits the parent anchor's colour */
.acp-sb-section .acp-sb-section__name {
  color: inherit !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FLUSH HERO HEADER — Issues 2, 3, 4
   Makes the blue gradient header sit flush against the top of its white
   canvas/panel with no white gap, on all three learner pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dashboard (/my-products) */
.acp-dashboard {
  padding: 0 !important;    /* remove padding that was pushing header down */
}
.acp-dashboard .acp-hero-header {
  border-radius: var(--acp-radius) var(--acp-radius) 0 0;
  margin: 0;
}
.acp-dashboard .acp-table-scroll-wrap,
.acp-dashboard .acp-dashboard__empty {
  padding: 0 24px 24px;
}

/* Product index (/my-products/N/start) */
.acp-product-index {
  padding: 0 !important;
}
.acp-product-index .acp-hero-header {
  border-radius: var(--acp-radius) var(--acp-radius) 0 0;
  margin: 0;
}
.acp-product-index .acp-index-nav-row,
.acp-product-index .acp-table-scroll-wrap,
.acp-product-index .acp-course-complete-section,
.acp-product-index .acp-empty-msg {
  padding-left: 24px;
  padding-right: 24px;
}
.acp-product-index .acp-index-nav-row { padding-top: 12px; }

/* Component view (/my-products/N/component/N) */
.acp-component-view {
  padding: 0 !important;
}
.acp-component-view__header {
  border-radius: var(--acp-radius) var(--acp-radius) 0 0 !important;
  margin: 0 !important;
}
/* On mobile the whole canvas goes edge-to-edge with no rounding anywhere
   (see the max-width:768px block near the top of this file) — this rule
   has equal specificity + !important and comes later in the cascade, so
   without this override it would win and put the curve back on mobile. */
@media (max-width: 768px) {
  .acp-component-view__header {
    border-radius: 0 !important;
  }
}
.acp-component-view .acp-back-link-band,
.acp-component-view .acp-component-body {
  padding-left: 32px;
  padding-right: 32px;
}
/* The band (not the <a> itself) carries the full-width background/padding —
   this keeps the visual white gap between the navy header and the body
   content spanning the whole row, while the <a> stays inline-block sized to
   its own text, so clicking beside the link text no longer triggers
   navigation (previously `display: block` was on the anchor itself, making
   the entire row's width — 600px+ on wide viewports — a click target). */
.acp-component-view .acp-back-link-band { display: block; padding-top: 16px; padding-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   WHITE GAP between hero header and table header (Issue 1)
   Matches the /products page look: hero header → white space → navy table header.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Gap on /my-products dashboard */
.acp-dashboard .acp-table-scroll-wrap {
  padding-top: 16px !important;
}

/* Gap on /my-products/N/start */
.acp-product-index .acp-table-scroll-wrap {
  padding-top: 0 !important;   /* nav row already provides the gap */
}
.acp-product-index .acp-index-nav-row {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  background: #fff;             /* white band between hero and table */
}

/* Gap on /my-products/N/component/N */
.acp-component-view .acp-back-link-band {
  background: #fff;
  display: block;
  padding: 14px 32px 10px !important;
}
/* The band already supplies spacing via its own padding; without zeroing
   the anchor's base margin (12px 0 20px, meant for un-banded contexts)
   it would just add extra blank space above/below the link inside the band. */
.acp-component-view .acp-back-link-band .acp-back-link {
  display: inline-block;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Issue 1: Action buttons on mobile — stack vertically, equal width ───── */
@media (max-width: 768px) {

  /* Make the actions cell a vertical flex column */
  .acp-dt-actions,
  td .acp-btn + .acp-btn,
  .acp-modern-table td:last-child {
    white-space: normal !important;
  }

  /* Stack buttons and make them equal full width */
  .acp-modern-table td .acp-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin-bottom: 6px !important;
  }
  .acp-modern-table td .acp-btn:last-child {
    margin-bottom: 0 !important;
  }

  /* Also apply to catalog table action cells */
  .acp-catalog-table td .acp-btn,
  td > .acp-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin-bottom: 6px !important;
  }
  td > .acp-btn:last-child { margin-bottom: 0 !important; }

  /* Give action cells a min-width so buttons don't squish */
  .acp-modern-table td:last-child { min-width: 120px !important; }

  /* ── Issue 2: Footer — only fix button-related layout, not footer itself ── */
}

/* ── iOS Safari viewport fix ─────────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  body { min-height: -webkit-fill-available; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER BACKGROUND FIX — minimal, theme-safe
   The footer disappearing was caused by overflow:hidden clipping it.
   This approach only ensures the footer's own background extends to fill
   its natural height, without fighting the theme's layout model.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure footer always has min-height and its background shows */
footer,
.site-footer,
[role="contentinfo"] {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* Never clip the footer's own content */
  overflow: visible !important;
}

/* On mobile, ensure the footer background fills its full block height */
@media (max-width: 768px) {
  footer,
  .site-footer,
  [role="contentinfo"] {
    position: relative !important;
    z-index: 1 !important;
    /* Extend background to cover any sub-pixel gaps at viewport bottom */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ALIGNMENT FIXES — hero header and table width consistency
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Desktop: hero header bleeds to panel edges using CSS custom properties  */
/* so the bleed always matches the actual padding, avoiding the width mismatch */
.acp-page-panel {
  --panel-pad-x: 40px;
  --panel-pad-y: 32px;
  padding: var(--panel-pad-y) var(--panel-pad-x);
}
.acp-page-panel .acp-hero-header--panel {
  margin: calc(var(--panel-pad-y) * -1) calc(var(--panel-pad-x) * -1) 24px;
  border-radius: var(--acp-radius) var(--acp-radius) 0 0;
}

/* ── Mobile: reduce panel padding and match hero bleed ─────────────────── */
@media (max-width: 768px) {
  .acp-page-panel {
    --panel-pad-x: 0px;
    --panel-pad-y: 0px;
    padding: 0 !important;
  }
  .acp-page-panel .acp-hero-header--panel {
    /* With zero padding, no bleed needed — hero fills full width naturally */
    margin: 0 0 0 0 !important;
    border-radius: 0 !important;
  }
  /* Table and content inside panel gets own padding */
  .acp-page-panel .acp-table-scroll-wrap,
  .acp-page-panel .acp-modern-table,
  .acp-page-panel .acp-dashboard__empty {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Drupal's tableresponsive wrapper must also be full width */
  .acp-page-panel .tableresponsive-toggle-columns,
  .acp-page-panel .tableresponsive-enabled,
  .acp-page-panel .responsive-enabled {
    width: 100% !important;
    overflow-x: auto !important;
  }
  /* Ensure the table itself fills its container */
  .acp-modern-table {
    width: 100% !important;
    min-width: unset !important;
  }
}

/* ── Global: Drupal's tableresponsive wrapper must never constrain width ─── */
.tableresponsive-toggle-columns,
.tableresponsive-enabled,
.responsive-enabled {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── section#our-shop (theme wrapper seen in DevTools) must not add padding */
section#our-shop,
section.padding,
.section.padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER HEIGHT FIX
   Inspect showed that increasing #site-footer height fixes the background.
   The element collapses because its children (likely floated or absolutely
   positioned) don't contribute to its height. Fix with overflow:hidden or
   a clearfix to make the element contain its children's full height.
   ═══════════════════════════════════════════════════════════════════════════ */
#site-footer {
  overflow: hidden !important;   /* clearfix: contains floated children       */
  height: auto !important;       /* never allow a fixed/zero height            */
  min-height: fit-content !important;  /* grow to at least fit all content    */
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important; /* establish a block formatting context      */
}

/* Also fix any direct wrapper inside the footer that may be collapsing */
#site-footer > *,
#site-footer .footer-inner,
#site-footer .footer-wrapper,
#site-footer .container,
#site-footer .footer-container {
  overflow: hidden !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* On mobile, the footer's 4 columns stack vertically into a much taller
   block. overflow:hidden here (written originally for an older float-based
   grid) is a known trigger for real iOS Safari specifically to miscalculate
   this container's height on a tall stacked flex/grid structure — clipping
   the footer's own content and truncating the page's total scrollable
   height, which is what caused the iPhone-only cutoff (Android/Chrome
   don't share this quirk, which is why it looked fine there). */
@media (max-width: 768px) {
  #site-footer,
  #site-footer > *,
  #site-footer .footer-inner,
  #site-footer .footer-wrapper,
  #site-footer .container,
  #site-footer .footer-container {
    overflow: visible !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER FULL-WIDTH BACKGROUND FIX
   On /products page, section#our-shop adds a right padding/margin that
   creates a gap in the footer background. The footer itself is slightly
   wider than viewport (375.2px) due to fractional pixel overflow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Force the footer to never exceed viewport width */
#site-footer {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  /* Extend background to cover any sub-pixel rendering gaps */
  background-attachment: local !important;
}

/* The vivek_footer_attributes class and bgdark class carry the background */
/* Make sure they also fill full width */
#site-footer.bgdark,
#site-footer .vivek_footer_attributes,
.vivek_footer_attributes {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* section#our-shop: only constrain width, never clip height or overflow-y */
section#our-shop {
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* Do NOT set overflow-x:hidden here — it creates a new stacking context
     that clips the section height and causes the footer to appear mid-page */
}

/* Ensure html and body never create horizontal overflow that shifts footer */
html, body {
  max-width: 100% !important;
  /* overflow-x:hidden omitted — it resets position:sticky and can clip sections */
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCTS PAGE WIDTH FIX — no overflow-x:hidden (which clips section height)
   Instead zero out the padding that causes section#our-shop to overflow.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Remove the theme's .padding class side padding on our-shop section
     so it never exceeds 100vw, keeping the footer flush to the right edge */
  section#our-shop.padding,
  section#our-shop {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Footer width: use 100vw reference to guarantee it spans the full screen */
  #site-footer {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 0 !important;
    box-sizing: border-box !important;
  }

  /* Re-assert overflow:visible here explicitly on both axes. The "FOOTER
     FULL-WIDTH BACKGROUND FIX" section above sets overflow-x:hidden
     unconditionally (all viewports) for an unrelated reason (fractional
     pixel width overflow) — since it comes later than our earlier mobile
     overflow:visible fix in file order, it would otherwise win the cascade
     and partially reintroduce the Safari height-miscalculation issue (per
     spec, overflow-x and overflow-y aren't fully independent: setting one
     to hidden while the other is visible still causes the visible one to
     compute as auto, which can trigger the same clipping behavior). This
     rule is later still, so it wins. */
  #site-footer {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PANEL FULL WIDTH FIX
   On mobile the white panel must fill the full viewport width with no
   side margins, so there is no dark gap visible on either side.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .acp-page-panel,
  .acp-page-canvas {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Layout container that holds the panel must also fill full width */
  .acp-layout-with-sidebars,
  .acp-layout-centre {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* The section#our-shop wrapper on /products page */
  section#our-shop,
  section#our-shop.padding {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Drupal's layout container should also be full width */
  .path-products .layout-container,
  .path-my-products .layout-container,
  .path-products [role="main"],
  .path-my-products [role="main"],
  .path-products main,
  .path-my-products main {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FIX: div.container inside section#our-shop constrains width on mobile
   The DOM is: section#our-shop > div.container > div.acp-layout-with-sidebars
   The .container div is a Bootstrap-style element with max-width and auto
   margins that makes it narrower than the viewport, causing the dark gap.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Target .container only when it's inside our accredify shop section */
  section#our-shop > .container,
  section#our-shop > div.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DEFINITIVE MOBILE WIDTH FIX
   DevTools box model: selected element 319.2px + 28px left + 28px right = 375.2
   The div.container is applying 28px auto margins. Target it via its child
   .acp-layout-with-sidebars which we control, using :has() or ancestor fix.
   Since :has() isn't universally supported, use a negative margin escape hatch.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* .acp-layout-with-sidebars: just be full width of its parent */
  .acp-layout-with-sidebars {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .acp-layout-with-sidebars .acp-page-panel,
  .acp-layout-with-sidebars .acp-page-canvas {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DEFINITIVE MOBILE FIX v2
   Root causes identified from DevTools:
   1. table.acp-modern-table is 458.66px — from min-width:600px overflowing
      its scroll wrapper (now removed above)
   2. div.container inside section#our-shop has 28px auto margins making
      it 319px wide — the table then scrolls within this narrow container
   3. The scroll container must be full-width so horizontal scroll works
   Solution: make the scroll wrapper full-width using negative margins to
   escape the container, and let the table scroll within that wrapper.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Force the container inside our-shop to full width */
  body.path-products section#our-shop .container,
  body.path-products section#our-shop > .container,
  section#our-shop .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Table scroll wrapper must be full width */
  .acp-table-scroll-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Table itself: let it be as wide as content needs, capped at viewport */
  .acp-modern-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  /* th and td: allow wrapping so table doesn't force wide layout */
  .acp-modern-table th,
  .acp-modern-table td {
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* But keep action buttons column from wrapping awkwardly */
  .acp-modern-table td:last-child {
    white-space: nowrap !important;
    min-width: 110px !important;
  }
}

/* ── Progress bar: always light green, no left curve ─────────────────────── */
/* Override any earlier rules that set navy or border-radius on both ends    */
.acp-progress-bar__fill,
.acp-progress-bar__fill--complete {
  background: #92e9a9 !important;
  border-radius: 0 20px 20px 0 !important;  /* flat left, rounded right */
}
.acp-progress-bar {
  border-radius: 0 20px 20px 0 !important;  /* track matches fill shape */
  background: #e8f5e9 !important;           /* very light green track   */
}

/* ── Progress bar: light green, FULL pill shape (both ends curved) ─────────
   Reverting the flat-left edge — keep the pill shape, just change colour.
   The "white boundary" was actually the rounded track showing through because
   the fill hadn't animated to width yet. Fixed by matching track and fill colour. */
.acp-progress-bar {
  background: #d4f5d4 !important;   /* very light green track — not white    */
  border-radius: 20px !important;   /* full pill on both ends                */
}
.acp-progress-bar__fill,
.acp-progress-bar__fill--complete {
  background: #92e9a9 !important;   /* light green fill always               */
  border-radius: 20px !important;   /* full pill — matches track shape       */
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR: My Notes footer link + per-section note indicators
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sidebar section row: section link + note icon as flex siblings */
.acp-sb-footer {
  border-top: 1px solid #e8ecf0;
  padding: 10px 12px;
  background: #f8fafc;
}
.acp-sb-notes-link {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1565c0 !important;
  text-decoration: none;
  padding: 4px 0;
}
.acp-sb-notes-link:hover {
  text-decoration: underline;
  color: #0d3c6e !important;
}

/* Per-section note indicator icon */
.acp-sb-note-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 11px;
  text-decoration: none !important;
  margin-left: 2px;
  opacity: 0.85;
  line-height: 1;
}
.acp-sb-note-icon:hover { opacity: 1; }
.acp-sb-note-icon--empty {
  display: inline-block;
  width: 18px;   /* keeps alignment even when no note */
}
/* On the active (blue) section, note icon should be white */
.acp-sb-section--active .acp-sb-note-icon { color: #fff !important; }

/* "My Notes" callout icon — replaces the old 📓 emoji everywhere (sidebar
   footer link, per-section bookmark icon, note-toggle button). Renders
   identically across platforms since it's an inline SVG, not a font emoji. */
.acp-icon-note {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  flex-shrink: 0;
  fill: #fdf3c4;          /* light yellow, sticky-note colour */
  stroke: #4a4a4a;        /* thin dark boundary line */
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Slightly smaller inside the compact sidebar bookmark icon slot */
.acp-sb-note-icon .acp-icon-note {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}
/* On the active (blue) sidebar row, keep the icon's own colours — don't
   let the row's white-text rule turn the yellow fill white too. */
.acp-sb-section--active .acp-icon-note {
  fill: #fdf3c4 !important;
  stroke: #4a4a4a !important;
}

/* ── Consistent green: progress bar matches completed row ─────────────────── */
.acp-progress-bar__fill,
.acp-progress-bar__fill--complete {
  background: #4caf50 !important;   /* medium green — matches completed rows */
  border-radius: 20px !important;
}
.acp-progress-bar {
  background: #c8f5c8 !important;   /* same pale as completed row bg */
  border-radius: 20px !important;
}
/* Table body background: white, not green — green only on completed rows */
.acp-modern-table tbody { background: #fff; }
.acp-modern-table td   { background: #fff; }
.acp-modern-table tbody tr:nth-child(even) td { background: #fafbfc; }
.acp-modern-table tbody tr:hover td           { background: #f0f6ff !important; }
.acp-modern-table .acp-row--completed td      { background: #c8f5c8 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   NEXT BUTTON COMPLETION DIALOGS
   ═══════════════════════════════════════════════════════════════════════════ */
.acp-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.acp-dialog-overlay[hidden] { display: none !important; }

.acp-dialog-box {
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: acp-dialog-in .18s ease;
}
@keyframes acp-dialog-in {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.acp-dialog-title {
  font-size: 20px;
  font-weight: 700;
  color: #0d3c6e;
  margin: 0 0 12px;
}
.acp-dialog-body {
  font-size: 15px;
  color: #444;
  margin: 0 0 20px;
  line-height: 1.5;
}
.acp-dialog-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Item 3: Add/Update My Notes form — wider than the standard confirm-style
   dialogs since it holds a read-only topic field and a multi-line textarea. */
#acp-dialog-note-form .acp-dialog-box {
  max-width: 560px;
}
.acp-form-field {
  margin-bottom: 16px;
}
.acp-form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--acp-navy);
  margin-bottom: 6px;
}
.acp-form-field input[type="text"],
.acp-form-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--acp-border, #dde1e4);
  border-radius: var(--acp-radius);
  font-size: 14px;
  font-family: inherit;
}
.acp-form-field input[type="text"][readonly] {
  background: #f4f6f8;
  color: #666;
}
.acp-form-field textarea {
  resize: vertical;
  line-height: 1.5;
}
.acp-btn--ghost {
  background: transparent;
  border: 1px solid #ccc;
  color: #666;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.acp-btn--ghost:hover { background: #f5f5f5; color: #333; }

/* Pending sections list */
.acp-pending-list {
  margin: 0 0 20px 0;
  padding: 0 0 0 18px;
  color: #444;
  font-size: 14px;
  line-height: 1.8;
}

/* ── My Notes row highlight on scroll-to ─────────────────────────────────── */
.acp-notes-row--highlight td {
  background: #fff9c4 !important;
  transition: background 0.4s ease;
}

/* ── Sidebar section row: section link + note icon as flex siblings ─────── */
.acp-sb-section-row {
  display: flex;
  align-items: center;
  width: 100%;
}
/* The section <a> grows to fill available space */
.acp-sb-section-row .acp-sb-section {
  flex: 1 1 auto;
  min-width: 0;   /* allow text truncation */
}
/* Note icon sits to the right, shrinks to its natural size */
.acp-sb-section-row .acp-sb-note-icon {
  flex: 0 0 auto;
  margin-left: 2px;
  text-decoration: none !important;
  color: inherit;
}
/* Active section: note icon inherits white text */
.acp-sb-section--active ~ .acp-sb-note-icon,
.acp-sb-section-row:has(.acp-sb-section--active) .acp-sb-note-icon {
  color: #fff;
}

/* ── AJAX navigation loading state ──────────────────────────────────────────
   While a section is being fetched, dim the content body so the user
   knows something is happening. */
.acp-content-loading {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.15s ease;
  position: relative;
}
.acp-content-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%231565c0' stroke-width='3' stroke-dasharray='80' stroke-dashoffset='60'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center center no-repeat;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR TREE STRUCTURE — unit collapsible with tree connector lines
   ═══════════════════════════════════════════════════════════════════════════ */

/* Unit header: [±] Unit Title */
.acp-sb-unit__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 5px 0;
  position: relative;
}

/* Unit toggle is the same square style — inherits .acp-sidebar .acp-sb-unit-toggle rules above */
.acp-sidebar .acp-sb-unit-toggle {
  color: #0d3c6e !important;
  border-color: #0d3c6e !important;
}
.acp-sidebar .acp-sb-unit-toggle:hover {
  background: #0d3c6e !important;
  color: #fff !important;
}

/* Unit title */
.acp-sb-unit__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0d3c6e;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer; /* clicking the title toggles the unit, same as the +/- button */
}

/* ── Sections container with vertical tree line ──────────────────────────── */
.acp-sb-unit__sections {
  position: relative;
  padding-left: 36px;
  padding-bottom: 4px;
}

/* Vertical tree line — originates from bottom-centre of the [−] square,
   runs down to the last section horizontal connector.
   The unit toggle is 20px wide at position left:0 in the header.
   Its centre = 10px. We position relative to .acp-sb-unit__sections whose
   own left padding is 36px, so absolute left:9px aligns to toggle centre. */
.acp-sb-unit--open .acp-sb-unit__sections::before {
  content: '';
  position: absolute;
  left: 9px;          /* centre of the 20px unit toggle */
  top: 0;
  bottom: 12px;       /* stop at centre of last section row */
  width: 1px;
  background: #90a4ae;
  border-radius: 1px;
}

/* Each section row — flex row: [connector-space] [toggle] [link] [note] */
.acp-sb-section-row {
  display: flex;
  align-items: center;
  position: relative;
  padding: 3px 4px 3px 0;
  gap: 5px;
}

/* Horizontal connector — bridges from vertical line to the toggle square.
   We use the acp-sb-tree-connector span for this.
   It sits at the start of the row flex, before the toggle button.
   Container padding-left is 36px; vertical line sits at 9px (line centre).
   Connector spans the full 27px gap (36 - 9) so its left edge meets the
   vertical line's centre and its right edge meets the square's left edge —
   no visual gap on either end. Reused identically at module→unit and
   unit→section levels since both containers share the same 36px/9px recipe. */
.acp-sb-tree-connector {
  flex: 0 0 auto;
  display: block;
  width: 27px;
  height: 1px;
  background: #90a4ae;
  border-radius: 1px;
  margin-left: -27px; /* pull left to meet the vertical line exactly */
  position: relative;
}

/* Section link fills remaining space */
.acp-sb-section-row .acp-sb-section {
  flex: 1 1 auto;
  min-width: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TABLE → CARD LAYOUT
   On small screens the acp-modern-table switches from a traditional table
   to a stacked card layout. Each row becomes a card with labelled fields.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* Hide the desktop table header row */
  .acp-modern-table thead {
    display: none !important;
  }

  /* Make tbody, tr, td all block so they stack */
  .acp-modern-table,
  .acp-modern-table tbody,
  .acp-modern-table tr,
  .acp-modern-table td {
    display: block !important;
    width: 100% !important;
  }

  /* The rule above's !important on tr would otherwise override [hidden]'s
     default display:none, making collapsed section rows show up on mobile
     even while their unit is collapsed — this rule must win instead. */
  .acp-modern-table tr[hidden] {
    display: none !important;
  }

  /* Each row becomes a card */
  .acp-modern-table tbody tr {
    background: #fff !important;
    border: 1px solid #e0e6ed !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  }
  .acp-modern-table tbody tr.acp-row--completed {
    background: #f0faf0 !important;
    border-color: #b8e6b8 !important;
  }

  /* Each td gets a label from data-label attribute */
  .acp-modern-table td {
    padding: 4px 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Label shown before each cell value */
  .acp-modern-table td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 70px;
    padding-top: 2px;
  }

  /* Hide cells that aren't useful on mobile (row number, duration) */
  .acp-modern-table td:first-child { display: none !important; }

  /* Buttons in card layout — item 7: this used to conflict with the
     max-width:768px rule above it (that one sets display:block/width:100%,
     this one was overriding to inline-block/width:auto at equal !important
     specificity, and being later in the file, was winning) — the buttons
     were trying to sit side-by-side in too little space, so their own text
     wrapped mid-button instead of the buttons themselves stacking cleanly.
     Made consistent with the 768px rule: always stack full-width. */
  .acp-modern-table td .acp-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 0 6px !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
  }
  .acp-modern-table td .acp-btn:last-child { margin-bottom: 0 !important; }

  /* Item 7: the actions cell has no data-label (removed server-side) so
     there's no "ACTIONS" text to show — but the cell is still flex with a
     reserved 70px label column and gap, wasting horizontal space the
     buttons need. Collapse that reserved space specifically here. */
  .acp-actions-cell::before { content: none !important; }
  .acp-actions-cell {
    padding-left: 0 !important;
    gap: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Remove scroll wrap overflow on mobile — not needed with cards */
  .acp-table-scroll-wrap {
    overflow-x: visible !important;
  }

  /* Hero header adjustments */
  .acp-hero-header__title {
    font-size: 22px !important;
  }

  /* Nav row stack on mobile */
  .acp-index-nav-row {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Course complete section */
  .acp-course-complete-section {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }
}

/* ── Modules browse table (public catalog) → mobile cards ─────────────────
   Same card-per-row treatment as .acp-modern-table above, but deliberately
   keeps every column (no td:first-child hiding) since the first column
   here is the Module Name, not a throwaway row number. */
@media (max-width: 700px) {
  .acp-catalog-modern-table thead { display: none !important; }
  .acp-catalog-modern-table,
  .acp-catalog-modern-table tbody,
  .acp-catalog-modern-table tr,
  .acp-catalog-modern-table td {
    display: block !important;
    width: 100% !important;
  }
  .acp-catalog-modern-table tbody tr {
    background: #fff !important;
    border: 1px solid #e0e6ed !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  }
  .acp-catalog-modern-table td {
    padding: 4px 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .acp-catalog-modern-table td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 70px;
    padding-top: 2px;
  }
  .acp-catalog-modern-table td .acp-btn {
    display: inline-block !important;
    width: auto !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
  }
}

/* ── Mobile: footer fix and card improvements ────────────────────────────── */
@media (max-width: 700px) {
  /* Ensure footer is not clipped */
  .path-my-products .vivek-shift-footer-to-bottom,
  .path-my-products .vivek-shift-footer-to-bottom > .container {
    overflow: visible !important;
  }

  /* Hide row-number column only */
  .acp-modern-table td:first-child {
    display: none !important;
  }

  /* Unit name cell (2nd td) — show with label, make it the card title */
  .acp-modern-table td:nth-child(2) {
    display: flex !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding-top: 0 !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #e8ecf0 !important;
    margin-bottom: 4px !important;
  }
  /* Keep the "UNIT" label but style it as a subtitle */
  .acp-modern-table td:nth-child(2)::before {
    display: block !important;
    content: attr(data-label) !important;
    font-size: 10px !important;
    color: #888 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    flex: 0 0 50px !important;
  }

  /* Hero header stays centered — it already shows the course name */
  .acp-hero-header {
    text-align: center !important;
  }
  .acp-hero-header__title {
    font-size: 22px !important;
  }
  .acp-hero-header__progress {
    justify-content: center !important;
  }
}

/* Item 7: quiz "Submit" button, styled from our own stylesheet since the
   quiz markup (accredify_component_library) doesn't style it itself and
   falls back to generic theme button styles otherwise. */
.acl-quiz__actions .button--primary,
.acl-quiz__actions button.button {
  background: #143c64 !important;
  color: #ffffff !important;
  border-color: #143c64 !important;
}
.acl-quiz__actions .button--primary:hover,
.acl-quiz__actions button.button:hover {
  background: #0d2c4c !important;
  color: #ffffff !important;
}

/* Item 3: JS-controlled toast for AJAX note/complete actions. Fixed
   position, fades in/out, fully replaced (not stacked) on every call —
   see _showToast() in accredify_create_product.js. */
.acp-ajax-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #1b1f24;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  z-index: 9500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.acp-ajax-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Item 3: quiz explanation text cut off on mobile. .acl-quiz__option is a
   flex row containing the radio, option text, and explanation as direct
   siblings — on narrow screens they were all competing for horizontal
   space with no wrap, cutting the explanation off instead of letting it
   wrap onto its own line. flex-basis:100% on just the explanation forces
   it onto a new line (radio + text stay together on the first line) once
   flex-wrap is allowed, without needing a full flex-direction:column
   (which would also push the radio above the text unnecessarily). */
@media (max-width: 768px) {
  .acl-quiz__option {
    flex-wrap: wrap !important;
  }
  .acl-quiz__explanation {
    flex-basis: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
  }
}

/* Professional Certification filter dropdown on the /products catalog page */
.acp-cert-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid #eef0f2;
  flex-wrap: wrap;
}
.acp-cert-filter label {
  font-size: 13px;
  font-weight: 600;
  color: var(--acp-navy);
  white-space: nowrap;
}
.acp-cert-filter select {
  padding: 8px 12px;
  border: 1px solid var(--acp-border, #dde1e4);
  border-radius: var(--acp-radius);
  font-size: 14px;
  min-width: 220px;
  background: #fff;
}
.acp-cert-filter-clear {
  font-size: 13px;
  color: #1976d2;
  text-decoration: none;
}
.acp-cert-filter-clear:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE UNIT TABLE — TREE LINES FIX
   Deliberately placed at the very end of the file (rather than inline with
   the other mobile card-layout rules earlier on) so there is no question
   of it losing a same-specificity source-order tie-break against any other
   rule targeting these same selectors — this table has multiple
   overlapping 700px/768px breakpoints elsewhere in this file, and a fix
   placed among them was still being overridden. Specificity is also
   boosted by repeating the class, which is valid CSS and raises
   specificity without needing yet another !important stack.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* The nested section rows' Unit cell only holds the desktop tree-line
     connector (no text) — as an empty "UNIT:" card field it adds nothing
     on mobile, where the card stacking itself already groups a unit's
     sections together visually. */
  .acp-modern-table td.acp-topic-title--nested.acp-topic-title--nested {
    display: none !important;
  }

  /* No tree lines on mobile, just a plain +/- toggle next to the unit
     name — the desktop layout reserves fixed space and absolutely
     positions the icon so unit names line up across rows regardless of
     whether a toggle exists; none of that applies to the stacked card
     layout, so reset it back to a simple inline icon. */
  .acp-modern-table td.acp-topic-title.acp-topic-title {
    padding-left: 0 !important;
  }
  .acp-unit-toggle-btn.acp-unit-toggle-btn {
    position: static !important;
    transform: none !important;
    margin-right: 8px !important;
  }
}

/* ── Sidebar: My Notes pinned at bottom, tree scrolls above ─────────────── */
.acp-sidebar--left {
  display: flex !important;
  flex-direction: column !important;
}
.acp-sb-nav {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.acp-sb-footer {
  flex: 0 0 auto !important;
  border-top: 1px solid #e8ecf0;
  background: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR → TWO-BUTTON TOOLBAR
   The full module tree (course list + unit/section tree, sticky, up to
   100vh tall) works fine on desktop but eats a huge share of a phone
   screen. Below 900px it collapses to a compact "My Modules" / "My Notes"
   button row instead — the tree markup itself is still rendered (wrapped
   in .acp-sb-desktop-inner) but hidden, and .acp-sb-mobile-toolbar takes
   its place.

   Placed at the very end of the file, after .acp-sidebar--left's
   unconditional `display: flex !important` above (added for the desktop
   "notes pinned at bottom" layout) — without coming later in the cascade,
   that earlier !important rule would keep forcing the sidebar visible
   here regardless of viewport width.
   ═══════════════════════════════════════════════════════════════════════════ */
.acp-sb-mobile-toolbar { display: none; }

@media (max-width: 900px) {
  .acp-sidebar,
  .acp-sidebar--left {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 0 14px !important;
  }
  .acp-sb-desktop-inner { display: none !important; }
  .acp-sb-mobile-toolbar {
    display: flex !important;
    gap: 10px;
  }
  .acp-sb-mobile-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 10px;
    border-radius: var(--acp-radius);
    background: #ffffff;
    border: 1px solid var(--acp-border, #dde1e4);
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    color: var(--acp-navy);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
  }
  .acp-sb-mobile-btn:hover,
  .acp-sb-mobile-btn:active { background: #f0f6ff; text-decoration: none; }
  .acp-sb-mobile-btn .acp-icon-note { fill: currentColor; vertical-align: -2px; }
}