/**
 * HQ Unified Dashboard — design system (LIGHT / clean-white theme).
 * Neat white surfaces, subtle borders (flat — NO shadows), dark slate text, blue/green accents.
 * All layout is scoped under `.hqud-shell` so nothing leaks into the rest of the site.
 * No web fonts loaded here; the shell explicitly adopts the theme's typography via
 * Woodmart's CSS vars (--wd-text-font / --wd-text-font-size / --wd-title-font) so the
 * dashboard matches site-wide fonts exactly. The only non-inherited font is the mobile
 * hamburger glyph (Arial, to avoid ☰ tofu in Woodmart's icon font).
 */

/* ── TOKENS ── */
:root{
  --bg:#f4f6f9;         /* app / content background */
  --surface:#ffffff;    /* sidebar, topbar, cards */
  --surface2:#f1f5f9;   /* subtle fills, hover, pills */
  --surface3:#e9eef4;
  --blue:#2563eb;
  --blue-soft:#eff4ff;
  --blue2:#1d4ed8;
  --green:#16a34a;
  --green2:#15803d;
  --teal:#0d9488;
  --border:#e5e7eb;
  --border2:#e2e8f0;
  --head:#0f172a;       /* headings / strong text */
  --text:#1f2937;       /* primary body text */
  --text2:#4b5563;      /* secondary */
  --text3:#94a3b8;      /* muted */
  --card:#ffffff;
  --navy:#ffffff;       /* legacy alias → white surface (inputs/cards) */
  --navy2:#f1f5f9;
  --navy3:#e2e8f0;
  --shadow:none; /* Flat design — NO shadows. Keep this none; do not reintroduce box-shadow. */
  --sidebar-w:240px;
  --topbar-h:56px;
}

/* ── LAYOUT ── */
.hqud-shell { display:flex; gap:0; background:var(--bg); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:24px 0; min-height:640px; color:var(--text); }
/* Adopt the theme's configured body font + base size so the dashboard reads as
   one system with the rest of the site (Woodmart exposes these globally as vars).
   Component-level px sizes below still win for the compact UI; this only sets the
   inherited family + base. Headings/titles use the theme title font. */
/* Base ≥14px: never let the dashboard render below 14px (desktop or mobile), even
   if the theme's configured body size is smaller. Component sizes below are all 14px+. */
.hqud-shell { font-family:var(--wd-text-font, inherit); font-size:max(14px, var(--wd-text-font-size, 14px)); }
.hqud-shell h1, .hqud-shell h2, .hqud-shell h3, .hqud-shell h4, .hqud-shell h5, .hqud-shell h6 { font-family:var(--wd-title-font, var(--wd-text-font, inherit)); }
.hqud-shell .sidebar { position:static; height:auto; }
.hqud-shell .main    { min-height:640px; }
.hqud-shell .content { max-height:none; }
/* Scoped box-sizing reset — ported components assume border-box. */
.hqud-shell, .hqud-shell *, .hqud-shell *::before, .hqud-shell *::after { box-sizing: border-box; }

/* ── FULL-PAGE MEMBER LAYOUT ──
   On member pages the shell IS the page layout (below the global site header),
   not a card. Full-bleed: no outer margin/border/radius. Neutralize the theme's
   content container so the shell spans the full content width. */
.hqud-member .hqud-shell { margin:0; border:0; border-radius:0; min-height:calc(100vh - 120px); }
.hqud-member .wd-content-area,
.hqud-member .content-area,
.hqud-member .main-page-wrapper > .container,
.hqud-member .row.content-page-wrapper { max-width:100%; width:100%; margin:0; padding:0; }
.hqud-member .hqud-shell .sidebar { align-self:stretch; }

/* Sticky sidebar (desktop only). The shell is a normal in-flow block that scrolls
   with the page, so pin the sidebar to the viewport top: it stays visible while the
   main column scrolls. overflow:visible on the shell is required for sticky to take
   effect (member shell has no border-radius, so nothing is clipped). Its inner
   .sb-scroll (flex:1; overflow-y:auto) scrolls the nav if it exceeds the viewport.
   Wrapped in min-width so the <900px off-canvas (position:fixed) rule still wins. */
@media (min-width:901px){
  .hqud-member .hqud-shell { overflow:visible; }
  .hqud-member .hqud-shell .sidebar { position:sticky; top:0; align-self:flex-start; height:100vh; }
}

/* ── Global site header on member/guest pages ──
   Same Woodmart header as the rest of the site (overcontent + native sticky).
   Do NOT force position:relative / flex repairs — that stacked desktop+mobile
   columns to ~700px.

   1) Reserve space under the absolute overlay. Use the general header row height
      only (--wd-header-general-h / -sm-h): member pages render that row, but the
      builder's bottom row is hidden, so --wd-header-h still includes ~52px of
      dead space above the shell topbar.
   2) Opaque navy on the general row: site header is built transparent for dark
      heroes (About/Home). Member shell is white, so light menu text would vanish
      without this. Color matches sticky-scrolled header (#03112c). Layout untouched. */
.hqud-member.wd-header-overlap .main-page-wrapper,
.hqud-guest.wd-header-overlap .main-page-wrapper{
  padding-top: var(--wd-header-general-h);
}
@media (max-width:1024px){
  .hqud-member.wd-header-overlap .main-page-wrapper,
  .hqud-guest.wd-header-overlap .main-page-wrapper{
    padding-top: var(--wd-header-general-sm-h);
  }
}
.hqud-member .whb-overcontent .whb-general-header.whb-with-bg,
.hqud-guest .whb-overcontent .whb-general-header.whb-with-bg{
  background-color: #03112c;
}

/* Phone/tablet: Autoptimize nests most Woodmart header CSS under
   `screen and (min-width:46.8em)`, so below ~749px non-Elementor pages lose
   position:absolute, column hide/show, and dropdown absolute/hidden — desktop
   + mobile columns + open account menu stack to ~700px. Elementor pages
   (About/Home) load style-elementor which still applies. Mirror those theme
   rules here. Never force position:relative (broke sticky). */
@media (max-width:1024px){
  .hqud-member .whb-overcontent .whb-main-header,
  .hqud-guest .whb-overcontent .whb-main-header{
    position:absolute;
    top:0; right:0; left:0;
    z-index:390;
  }
  .hqud-member .whb-main-header .whb-visible-lg,
  .hqud-member .whb-main-header .whb-hidden-mobile,
  .hqud-guest .whb-main-header .whb-visible-lg,
  .hqud-guest .whb-main-header .whb-hidden-mobile{
    display:none !important;
  }
  .hqud-member .whb-main-header .whb-hidden-desktop,
  .hqud-guest .whb-main-header .whb-hidden-desktop{
    display:none !important;
  }
  .hqud-member .whb-main-header .whb-hidden-lg,
  .hqud-guest .whb-main-header .whb-hidden-lg{
    display:flex !important;
  }
  .hqud-member .whb-general-header .whb-flex-row,
  .hqud-guest .whb-general-header .whb-flex-row{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
  }
  .hqud-member .whb-general-header-inner,
  .hqud-guest .whb-general-header-inner{
    height:var(--wd-header-general-sm-h);
    max-height:var(--wd-header-general-sm-h);
  }
  .hqud-member .whb-main-header .wd-dropdown,
  .hqud-guest .whb-main-header .wd-dropdown{
    display:none !important;
    position:absolute !important;
  }
}

/* Kill the theme page-title block on member pages (belt for the remove_action). */
.hqud-member .wd-page-title,
.hqud-member .page-title-default,
.hqud-member .title-size-default.page-title { display:none !important; }

/* ── GUEST VIEW ──
   Logged out on a member URL (e.g. /my-account/ login form): no shell/hero, just
   this slim breadcrumb in place of the theme's big page-title block. Header is
   left to Woodmart (same as the rest of the site); padding-top above clears it. */
.hqud-guest-crumb{ background:var(--surface); border-bottom:1px solid var(--border); }
.hqud-guest-crumb-inner{ max-width:1222px; margin:0 auto; padding:14px 30px; display:flex; align-items:center; gap:6px;
  font-size:14px; color:var(--text3); }
.hqud-guest-crumb-inner a{ color:var(--text3); text-decoration:none; }
.hqud-guest-crumb-inner a:hover{ color:var(--blue); }
.hqud-guest-crumb-inner [aria-current="page"]{ color:var(--text2); }
@media (max-width:576px){ .hqud-guest-crumb-inner{ padding:12px 16px; } }

/* Guest login form: keep the username/password fields and the Log in button
   full-width within their column (Woo's native controls otherwise render
   narrow). Scoped to the guest view only. */
.hqud-guest .woocommerce form.login .woocommerce-form-row,
.hqud-guest .woocommerce form.login .form-row,
.hqud-guest .woocommerce form.register .woocommerce-form-row,
.hqud-guest .woocommerce form.register .form-row { width:100%; }
.hqud-guest .woocommerce form.login input.input-text,
.hqud-guest .woocommerce form.login .woocommerce-Input,
.hqud-guest .woocommerce form.login button.button,
.hqud-guest .woocommerce form.login .woocommerce-form-login__submit,
.hqud-guest .woocommerce form.register input.input-text,
.hqud-guest .woocommerce form.register .woocommerce-Input,
.hqud-guest .woocommerce form.register button.button { width:100%; box-sizing:border-box; }

/* Mobile off-canvas sidebar toggle — lives in the topbar (not a fixed overlay).
   Hidden on desktop; shown under 900px as the first topbar control. */
.hqud-shell .hqud-sb-toggle{
  display:none !important;
  position:static;
  flex-shrink:0;
  width:36px; height:36px;
  align-items:center; justify-content:center;
  border:none; border-radius:8px;
  background:var(--blue) !important; color:#fff !important;
  font-family:Arial, Helvetica, sans-serif; font-size:20px; line-height:1;
  cursor:pointer; padding:0; margin:0; transition:background .15s;
  box-shadow:none; appearance:none; -webkit-appearance:none;
}
.hqud-shell .hqud-sb-toggle:hover{ background:var(--blue2) !important; }
.hqud-shell .topbar .tb-crumb-wrap{ min-width:0; flex:1; }

@media (max-width:900px){
  .hqud-shell{ flex-direction:column; }
  .hqud-member .hqud-shell{ margin-top:0; }
  .hqud-shell .hqud-sb-toggle{ display:inline-flex !important; }
  .hqud-shell .topbar{ padding:0 12px; gap:10px; }
  .hqud-shell .sidebar{ position:fixed; top:0; left:0; bottom:0; width:260px; max-width:85vw;
    z-index:9999; transform:translateX(-100%); transition:transform .22s ease;
    overflow-y:auto; }
  .hqud-shell.hqud-sb-open .sidebar{ transform:translateX(0); }
  .hqud-shell.hqud-sb-open::before{ content:""; position:fixed; inset:0;
    background:rgba(15,23,42,.35); z-index:9998; }
  .hqud-member .hqud-shell .main{ width:100%; }
  .hqud-shell .content{ padding:16px; }
}

.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;transition:width .2s}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0}
.content{flex:1;overflow-y:auto;padding:20px}

/* ── SIDEBAR ── */
.sb-logo{padding:0 16px;height:56px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);flex-shrink:0}
.sb-logo-mark{width:32px;height:32px;background:var(--green);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:16px;font-style:italic;flex-shrink:0}
.sb-logo-text{display:flex;flex-direction:column;line-height:1}
.sb-logo-hq{font-weight:900;font-size:16px;color:var(--head);letter-spacing:-.5px}
.sb-logo-digital{font-size:14px;font-weight:600;color:var(--green);letter-spacing:.1em;text-transform:uppercase}

.sb-user{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sb-avatar{width:36px;height:36px;border-radius:50%;background:var(--blue);border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.sb-uname{font-size:14px;font-weight:600;color:var(--head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.sb-uemail{font-size:14px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.sb-sync-mini{margin-left:auto;background:var(--green);border:none;border-radius:5px;padding:4px 8px;font-size:14px;font-weight:700;color:#fff;cursor:pointer;white-space:nowrap}

.sb-scroll{flex:1;overflow-y:auto;padding:8px 0}
.sb-scroll::-webkit-scrollbar{width:3px}
.sb-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.sb-section{padding:14px 16px 4px;font-size:14px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:14px;color:var(--text2);cursor:pointer;border-left:3px solid transparent;transition:all .12s;position:relative;text-decoration:none}
.sb-item:hover{background:var(--surface2);color:var(--head)}
.sb-item.active{background:var(--blue-soft);color:var(--blue2);border-left-color:var(--blue);font-weight:600}
.sb-item .ico{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.sb-item .lbl{flex:1}
.sb-badge{background:var(--blue);color:#fff;font-size:14px;font-weight:700;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center}
.sb-badge.green{background:var(--green)}
.sb-badge.red{background:#ef4444}
/* Logout rendered as a danger action. */
.sb-item.sb-item-danger{color:#dc2626;font-weight:600}
.sb-item.sb-item-danger .ico{color:#dc2626}
.sb-item.sb-item-danger:hover{background:#fef2f2;color:#b91c1c;border-left-color:#dc2626}

/* Course Management nested group (LD instructor tabs; left LD panel is hidden in shell). */
.sb-group{margin:2px 0}
.sb-item.sb-item-parent{
	width:100%;display:flex;align-items:center;gap:10px;padding:9px 16px;
	font:inherit;font-size:14px;font-weight:400;font-style:normal;
	color:var(--text2);letter-spacing:normal;text-transform:none;
	background:transparent;border:0;border-left:3px solid transparent;
	border-radius:0;box-shadow:none;text-align:left;cursor:pointer;line-height:inherit;
}
.sb-item.sb-item-parent:hover{background:var(--surface2);color:var(--head)}
.sb-item.sb-item-parent.active{background:var(--blue-soft);color:var(--blue2);border-left-color:var(--blue);font-weight:600}
.sb-item.sb-item-parent .sb-caret{width:0;height:0;margin-left:auto;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;transition:transform .15s;flex-shrink:0}
.sb-group.is-open > .sb-item-parent .sb-caret{transform:rotate(180deg)}
.sb-sub{padding:2px 0 6px}
.sb-group:not(.is-open) > .sb-sub{display:none}
.sb-item.sb-item-child{padding:7px 16px 7px 42px;font-size:13px}
.sb-item.sb-item-child .ico{width:16px}

/* ── Inline SVG icons (HQUD_Icons) ──
   Solid monochrome; each inherits currentColor from its context. Sidebar/tab
   icons follow the link color (slate → blue when active, red for logout);
   card + widget-title icons get a blue accent; sync bulb is amber. */
.hqud-shell .hqud-ico{display:block;flex-shrink:0}
.sb-item .ico .hqud-ico{margin:0 auto}
.quick-card .ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;line-height:0}
.widget-title .wt-ico{display:inline-flex;align-items:center;margin-right:7px;color:var(--blue)}
.sync-panel-ico{display:inline-flex;align-items:center;color:#d97706;flex-shrink:0}
.hqud-access-ico{display:inline-flex;align-items:center;margin-right:8px;color:var(--blue)}
.tab-ico{display:inline-flex;align-items:center;color:currentColor}
.hqud-empty-ico .hqud-ico{color:var(--text3);margin:0 auto}

/* ── Friendly empty states (shared base — reskin-woo.css adds account-page tweaks) ── */
.hqud-shell .hqud-empty{text-align:center;padding:32px 16px;color:var(--text2)}
.hqud-shell .hqud-empty p{margin:0;font-size:14px}
.hqud-shell .hqud-empty-sub{color:var(--text3);font-size:14px;margin-top:4px !important}
.hqud-shell .hqud-empty-cta{margin-top:14px}
/* Span the full row when the empty state is the sole child of a CSS grid
   (course-grid) — without this it's constrained to a single grid track. */
.hqud-shell .course-grid .hqud-empty{grid-column:1/-1}

.sb-bottom{padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0}
.sb-bottom-item{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:var(--text2);cursor:pointer;text-decoration:none}
.sb-bottom-item:hover{color:var(--head)}

/* ── TOPBAR ── */
.tb-title{font-size:15px;font-weight:700;color:var(--head);flex:1}
.tb-breadcrumb{font-size:14px;color:var(--text3);display:flex;align-items:center;gap:6px}
.tb-breadcrumb a{color:var(--text3);text-decoration:none}
.tb-breadcrumb a:hover{color:var(--blue)}
.tb-breadcrumb span{color:var(--text2)}
.tb-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.tb-icon-btn{width:34px;height:34px;border-radius:8px;background:var(--surface2);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.tb-icon-btn:hover{background:var(--surface3);border-color:var(--border)}
.tb-notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;background:#ef4444;border-radius:50%;border:2px solid var(--surface)}
.tb-sync-btn{background:var(--green);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s}
.tb-sync-btn:hover{background:var(--green2)}

/* ── CARDS / WIDGETS ── */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
/* Horizontal KPI tile: number + label on the left, a soft accent-tinted icon
   badge on the right. Accent is per-card (.stat-card--blue/amber/… below). */
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
a.stat-card{text-decoration:none;color:inherit;cursor:pointer}
a.stat-card:hover{border-color:var(--border2);box-shadow:0 2px 8px rgba(15,23,42,.06)}
.stat-card:hover{border-color:var(--border2)}
.stat-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.stat-card .val{font-size:24px;font-weight:800;color:var(--head);line-height:1.1}
.stat-card .lbl{font-size:14px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.stat-card .sub{font-size:14px;font-weight:600;color:var(--green);margin-top:2px}
.stat-card .ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
/* Accent tints — soft background + solid icon color. */
.stat-card--blue   .ico{background:#eef4ff;color:#2563eb}
.stat-card--amber  .ico{background:#fef4e6;color:#d97706}
.stat-card--violet .ico{background:#f3effd;color:#7c3aed}
.stat-card--teal   .ico{background:#e6f6f3;color:#0d9488}
.stat-card--indigo .ico{background:#eef0fe;color:#4f46e5}
.stat-card--green  .ico{background:#e9f7ef;color:#16a34a}
@media (max-width:1200px){ .stat-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1024px){ .stat-card{padding:12px 14px} .stat-card .ico{width:42px;height:42px} }
@media (max-width:640px){ .stat-grid{grid-template-columns:repeat(2,1fr)} .quick-grid{grid-template-columns:repeat(2,1fr)} }

/* Scoped under .hqud-shell to beat Woodmart's own `.widget` / `.widget-title`
   (theme loads after us at equal specificity and otherwise leaks in uppercase,
   a bigger font, and a 20px title margin-bottom — the "too much space" + top-
   heavy heading). We reset those explicitly and vertically center the title. */
.hqud-shell .widget{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow)}
.hqud-shell .widget-head{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;min-height:0}
.hqud-shell .widget-title{font-size:14px;font-weight:700;color:var(--head);display:flex;align-items:center;gap:0;line-height:1.2;margin:0;padding:0;text-transform:none;letter-spacing:normal;font-style:normal}
.hqud-shell .widget-action{font-size:14px;color:var(--blue);cursor:pointer;font-weight:600;transition:color .15s}
.hqud-shell .widget-action:hover{color:var(--blue2)}
.hqud-shell .widget-body{padding:14px 16px}

/* ── TABLES ── */
.hq-table{width:100%;border-collapse:collapse;font-size:14px}
.hq-table th{padding:10px 12px;text-align:left;font-size:14px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border)}
.hq-table td{padding:11px 12px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle}
.hq-table tr:last-child td{border:none}
.hq-table tr:hover td{background:var(--surface2)}

/* ── CHIPS ── */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;padding:3px 8px;border-radius:20px;white-space:nowrap}
.chip.g{background:rgba(22,163,74,.12);color:var(--green2)}
.chip.b{background:rgba(37,99,235,.1);color:var(--blue2)}
.chip.y{background:rgba(245,158,11,.14);color:#b45309}
.chip.r{background:rgba(239,68,68,.12);color:#b91c1c}
.chip.gray{background:var(--surface2);color:var(--text2)}
.chip.teal{background:rgba(13,148,136,.12);color:var(--teal)}

/* ── PROGRESS BAR ── */
.prog-bar{background:var(--surface3);border-radius:20px;height:5px;overflow:hidden}
.prog-fill{height:100%;border-radius:20px;background:var(--blue)}
.prog-fill.green{background:var(--green)}

/* ── COURSE CARDS ── */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
/* Flex column + equal-height grid cells (grid stretches rows) so the action row
   pins to the bottom of every card and buttons line up across the row. */
.course-card{background:var(--card);border:1px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .15s;display:flex;flex-direction:column}
.course-card:hover{border-color:var(--blue)}
.course-thumb{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--surface2);flex-shrink:0}
.course-thumb img{width:100%;height:100%;object-fit:cover}
.course-thumb-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:rgba(255,255,255,.9);text-align:center;padding:10px}
.course-badge{position:absolute;top:8px;left:8px;background:var(--blue);color:#fff;font-size:14px;font-weight:700;padding:2px 8px;border-radius:20px}
.course-info{padding:12px;flex:1;display:flex;flex-direction:column}
/* Push the progress block (course cards) to the bottom → aligned Start/Continue. */
.course-info .course-prog-label{margin-top:auto}
.course-name{font-size:14px;font-weight:700;color:var(--head);margin-bottom:6px;line-height:1.4}
.course-meta{font-size:14px;color:var(--text3);display:flex;gap:10px;margin-bottom:8px}
.course-prog-label{display:flex;justify-content:space-between;font-size:14px;color:var(--text3);margin-bottom:4px}
.start-btn{display:block;width:100%;background:var(--blue);color:#fff;border:none;border-radius:6px;padding:7px;font-size:14px;font-weight:700;cursor:pointer;text-align:center;margin-top:8px;text-decoration:none;transition:background .15s}
.start-btn:hover{background:var(--blue2)}

/* ── ACTIVITY LOG ── */
.al-item{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border)}
.al-item:last-child{border:none}
.al-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-top:1px}
.al-dot.green{background:rgba(22,163,74,.14)}
.al-dot.blue{background:rgba(37,99,235,.12)}
.al-dot.yellow{background:rgba(245,158,11,.16)}
.al-dot.red{background:rgba(239,68,68,.12)}
.al-text{flex:1}
.al-title{font-size:14px;font-weight:600;color:var(--head);margin-bottom:2px}
.al-sub{font-size:14px;color:var(--text3)}
.al-time{font-size:14px;color:var(--text3);white-space:nowrap;padding-top:2px}

/* ── COMMUNITY ── */
.comm-layout{display:grid;grid-template-columns:220px 1fr 260px;gap:0;height:100%;overflow:hidden}
.comm-left{border-right:1px solid var(--border);padding:16px 0;overflow-y:auto}
.comm-center{overflow-y:auto;padding:20px}
.comm-right{border-left:1px solid var(--border);padding:16px;overflow-y:auto}
.comm-section{padding:8px 14px 4px;font-size:14px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.comm-item{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:14px;color:var(--text2);cursor:pointer;border-left:3px solid transparent}
.comm-item:hover{background:var(--surface2);color:var(--head)}
.comm-item.active{background:var(--blue-soft);color:var(--blue2);border-left-color:var(--blue)}
.comm-item .comm-ico{font-size:14px;width:18px;text-align:center}
.comm-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;text-transform:uppercase}
.comm-card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s;box-shadow:var(--shadow)}
.comm-card:hover{border-color:var(--blue)}
.comm-card-banner{height:80px;position:relative;display:flex;align-items:flex-end;padding:8px 12px}
.comm-card-title{font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.comm-card-body{padding:12px}
.comm-card-meta{font-size:14px;color:var(--text3);display:flex;gap:12px;margin-bottom:10px}
.comm-member-btn{background:rgba(22,163,74,.12);color:var(--green2);border:1px solid rgba(22,163,74,.3);border-radius:6px;padding:5px 12px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.comm-member-btn:hover{background:rgba(22,163,74,.2);border-color:var(--green)}

/* ── MESSAGES ── */
.msg-list{display:flex;flex-direction:column;gap:2px}
.msg-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;border-radius:0;transition:background .1s;position:relative}
.msg-item:hover{background:var(--surface2)}
.msg-item.active{background:var(--blue-soft)}
.msg-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.msg-name{font-size:14px;font-weight:600;color:var(--head)}
.msg-preview{font-size:14px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.msg-time{font-size:14px;color:var(--text3);position:absolute;right:24px;top:10px}

/* ── MY ACCOUNT ── */
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.profile-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;box-shadow:var(--shadow)}
.form-group{margin-bottom:14px}
.form-label{font-size:14px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;display:block}
.form-input{width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:7px;padding:9px 12px;font-size:14px;color:var(--head);font-family:inherit;outline:none}
.form-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.form-row{grid-template-columns:1fr 1fr;gap:10px}
.save-btn{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:10px 24px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}
.save-btn:hover{background:var(--blue2)}

/* ── ORDER CARD ── */
.order-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.order-row:last-child{border:none}
.order-num{font-size:14px;font-weight:700;color:var(--blue)}
.order-product{font-size:14px;color:var(--head)}
.order-meta{font-size:14px;color:var(--text3)}
.order-amount{font-size:14px;font-weight:700;color:var(--head)}

/* ── UPCOMING SESSIONS ── */
.session-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s,transform .15s}
.session-card:last-child{margin-bottom:0}
.session-card:hover{border-color:var(--border2)}
.session-date-box{background:linear-gradient(160deg,#3b82f6,var(--blue2));border-radius:12px;padding:9px 8px;text-align:center;flex-shrink:0;width:54px}
.session-date-day{font-size:20px;font-weight:800;color:#fff;line-height:1}
.session-date-mon{font-size:14px;font-weight:700;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.session-title{font-size:14px;font-weight:700;color:var(--head);margin-bottom:5px;line-height:1.35}
.session-meta{font-size:14px;color:var(--text3);margin-bottom:10px}
.join-btn{display:inline-flex;align-items:center;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:7px 16px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:background .15s}
.join-btn:hover{background:var(--blue2)}
/* Keep the label WHITE on hover/focus for our filled buttons. Woodmart's
   `a:hover{color:var(--wd-link-color-hover)}` (specificity 0,1,1) otherwise beats
   the unscoped `.btn{color:#fff}` (0,1,0) and turns the text dark. Scoping under
   .hqud-shell (0,2,0) out-specifies it without needing !important. */
.hqud-shell .join-btn:hover,   .hqud-shell .join-btn:focus,
.hqud-shell .start-btn:hover,  .hqud-shell .start-btn:focus,
.hqud-shell .save-btn:hover,   .hqud-shell .save-btn:focus,
.hqud-shell .tb-sync-btn:hover,.hqud-shell .tb-sync-btn:focus,
.hqud-shell .hq-sync-btn:hover,.hqud-shell .hq-sync-btn:focus{ color:#fff; }
/* Enroll Now — outline variant so an un-purchased session reads as an upsell,
   not "you're in" like the solid Join Zoom / Start buttons. */
.join-btn.enroll-btn,.start-btn.thq-enroll-btn{background:transparent;color:#4f46e5;border:1.5px solid #4f46e5}
.join-btn.enroll-btn:hover,.start-btn.thq-enroll-btn:hover{background:#4f46e5;color:#fff}
.hqud-shell .join-btn.enroll-btn:hover,.hqud-shell .join-btn.enroll-btn:focus,
.hqud-shell .start-btn.thq-enroll-btn:hover,.hqud-shell .start-btn.thq-enroll-btn:focus{color:#fff}
.session-card--locked{opacity:.92}
/* Session card on narrow screens: keep the date chip left, let content flow. */
@media (max-width:480px){
  .session-card{padding:12px;gap:12px}
  .session-date-box{width:48px;padding:8px 6px}
  .session-title{font-size:14px}
}
/* Overview variant: date chip | title+meta | Join button, all on one row. */
.session-card--inline{align-items:center}
.session-card--inline .session-body{flex:1;min-width:0}
.session-card--inline .session-meta{margin-bottom:0}
.session-card--inline .join-btn{margin-left:auto;flex-shrink:0}
/* Narrow: button drops to its own line, indented under the text. */
@media (max-width:560px){
  .session-card--inline{flex-wrap:wrap}
  .session-card--inline .join-btn{order:3;flex:1 1 100%;margin:10px 0 0 66px;max-width:220px;justify-content:center}
}

/* ── ACCESS & ACTIVITY LOG ──
   Reskin of the shared [hq_my_access_log] shortcode (hq-enrollment-engine) when it
   renders inside the shell. The shortcode ships its own inline <style> (white box +
   dark-navy header); we scope-override it under `.hqud-shell` so it drops the box-in-
   box chrome and the duplicate navy title (the widget header already says it), then
   restyle the rows + status pills to match the dashboard. */
.hqud-shell .hq-activity-log{background:transparent;border:0;border-radius:0;margin:0;overflow:visible}
.hqud-shell .hq-al-header{display:none}
/* 2-row layout at ALL widths (desktop + mobile): message owns row 1 full-width; the
   timestamp (left) + status badge (right) share row 2; icon spans both rows on the left. */
.hqud-shell .hq-al-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icon text text" "icon time badge";align-items:center;column-gap:12px;row-gap:5px;padding:11px 2px;border-bottom:1px solid var(--border);font-size:14px}
.hqud-shell .hq-al-row:first-child{padding-top:2px}
.hqud-shell .hq-al-row:last-child{border-bottom:0;padding-bottom:2px}
.hqud-shell .hq-al-icon{grid-area:icon;align-self:start;width:30px;height:30px;border-radius:8px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;flex-shrink:0}
.hqud-shell .hq-al-text{grid-area:text;min-width:0;color:var(--text2);line-height:1.4}
.hqud-shell .hq-al-time{grid-area:time;justify-self:start;color:var(--text3);font-size:14px;flex-shrink:0;white-space:nowrap}
.hqud-shell .hq-ty-item-badge{grid-area:badge;justify-self:end;font-size:14px;font-weight:700;padding:3px 9px;border-radius:20px;flex-shrink:0;text-transform:uppercase;letter-spacing:.03em;line-height:1.4}
.hqud-shell .hq-badge-granted{background:#e9f7ef;color:#15803d}
.hqud-shell .hq-badge-skipped{background:var(--surface2);color:var(--text2)}
.hqud-shell .hq-badge-retry{background:#fff7ed;color:#c2410c}
.hqud-shell .hq-badge-failed{background:#fee2e2;color:#b91c1c}
.hqud-shell .hq-log-empty{color:var(--text3);font-size:14px;margin:0}

/* ── NOTIFICATION ── */
.notif-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
.notif-item:last-child{border:none}
.notif-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.notif-text{font-size:14px;color:var(--text2);flex:1;line-height:1.5}
.notif-text strong{color:var(--head)}
.notif-time{font-size:14px;color:var(--text3);margin-top:2px}
.notif-unread{background:var(--blue-soft);border-left:3px solid var(--blue);padding-left:9px;margin-left:-12px}

/* ── SCROLLBAR (scoped to shell) ── */
.hqud-shell ::-webkit-scrollbar{width:8px;height:8px}
.hqud-shell ::-webkit-scrollbar-track{background:transparent}
.hqud-shell ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
.hqud-shell ::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ── OVERVIEW TWO-COLUMN (sessions + activity) ── */
.hqud-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:1024px){ .hqud-two-col{grid-template-columns:1fr} }

/* ── PAGE LABEL ── */
.page-label{font-size:14px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.page-title{font-size:20px;font-weight:800;color:var(--head);margin-bottom:3px}
.page-sub{font-size:14px;color:var(--text3);margin-bottom:16px}

/* ── TABS ── */
.tab-row{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px}
.tab-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;font-size:14px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all .12s}
.hqud-shell .tab-btn:hover{color:var(--head)}
.tab-btn.active{color:var(--blue2);border-bottom-color:var(--blue)}

/* ── SYNC PANEL ── */
.sync-panel{
	background:linear-gradient(180deg,rgba(239,246,255,.92) 0%,rgba(248,250,252,.96) 100%);
	border:1px solid rgba(59,130,246,.16);
	border-radius:14px;
	padding:16px 18px;
	margin-bottom:14px;
	display:flex;
	align-items:center;
	gap:14px;
	box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.sync-panel.help{
	border-left:4px solid #3b82f6;
}
.sync-panel-ico{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:999px;
	background:rgba(59,130,246,.1);
	color:#2563eb;
	flex-shrink:0;
}
.sync-panel-copy strong{
	display:block;
	margin-bottom:4px;
	font-size:14px;
	line-height:1.35;
	color:var(--head);
}
.sync-panel-copy span{
	display:block;
	font-size:13px;
	line-height:1.55;
	color:var(--text2);
}

/* ── QUICK LINKS ── */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.quick-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:13px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;transition:border-color .15s,box-shadow .15s;box-shadow:var(--shadow)}
.quick-card:hover{border-color:var(--border2)}
.quick-card .lbl{font-size:14px;font-weight:600;color:var(--head);text-align:center}
/* Accent-tinted icon badges (shared palette with the stat cards). */
.quick-card--blue   .ico{background:#eef4ff;color:#2563eb}
.quick-card--teal   .ico{background:#e6f6f3;color:#0d9488}
.quick-card--indigo .ico{background:#eef0fe;color:#4f46e5}
.quick-card--amber  .ico{background:#fef4e6;color:#d97706}

/* ── GamiPress points chip (sidebar user block) ── */
.hqud-shell .sb-user-meta{ min-width:0; }
.hqud-shell .hqud-pts-chip{
  display:inline-flex; align-items:center; gap:5px; margin-top:6px;
  padding:3px 9px; border-radius:999px; line-height:1;
  background:linear-gradient(135deg,#fef3c7,#fde68a); border:1px solid #f59e0b;
  color:#92400e; font-size:14px; font-weight:700; max-width:100%;
}
.hqud-shell .hqud-pts-chip .hqud-pts-coin{ font-size:14px; }
.hqud-shell .hqud-pts-chip .hqud-pts-val{ font-variant-numeric:tabular-nums; }
.hqud-shell .hqud-pts-chip .hqud-pts-lbl{
  color:#a16207; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Anchor targets on the dashboard overview (quick-link scroll). */
.hqud-shell #access-log,
.hqud-shell #continue-learning,
.hqud-shell #upcoming-sessions{ scroll-margin-top:24px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Dashboard grids on mobile — corrective block  (2026-07-21)
 *
 * Reported: /my-dashboard/ is not mobile responsive. At a true 390px viewport the stat cards
 * ("In Progress", "Communities", "Access Verified") and the last quick link ("Access Log") are
 * clipped by the right edge of the screen.
 *
 * TWO CAUSES, both in this file.
 *
 * 1. SOURCE ORDER. The responsive override sits at ~line 243:
 *        @media (max-width:640px){ .stat-grid{...2 cols} .quick-grid{...2 cols} }
 *    but `.quick-grid`'s BASE rule is declared later, at ~line 459:
 *        .quick-grid{grid-template-columns:repeat(4,1fr)}
 *    Same specificity, later wins — so the mobile rule for .quick-grid has never applied and the
 *    quick links stayed four-across on every screen. (`.stat-grid` is declared BEFORE the query,
 *    so its override does work; that is why only the quick links are four-up in the report.)
 *    Fixing it by re-ordering the file would be fragile, so the corrective rules live here, at
 *    the very end, where source order is on our side.
 *
 * 2. `1fr` DOES NOT MEAN "shrink to fit". `1fr` is `minmax(auto,1fr)`, and that `auto` minimum is
 *    the track's min-content width — so a long label like "Upcoming Sessions" or "Access Verified"
 *    can force its column wider than the share it was given, pushing the grid past the viewport.
 *    That is the actual clipping, and it would still happen at two columns. `minmax(0,1fr)` lets
 *    the tracks shrink and the text wrap instead.
 *
 * Verified by screenshot at a true 390px viewport. NOTE for future work: headless Chrome's
 * `--dump-dom` clamps the window to ~485px, so element-measuring probes cannot see this — only
 * `--screenshot` honours 390. Measure this layout from screenshots, not probes.
 * ═══════════════════════════════════════════════════════════════════════════ */
.stat-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.quick-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width:1200px){ .stat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* 900px, not 640px. At 640 the quick links were still four-across on a phone held in landscape
   and on small tablets — 172px per card, which is what the "4 columns, last one clipped" report
   was actually showing. Two columns is the mobile shape all the way up to the tablet/desktop
   hinge. */
@media (max-width:900px){
	.stat-grid,
	.quick-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Below ~420px two columns still crowd the stat cards: the number, the label and the round icon
   share one row, and the icon leaves too little for a two-word label. One card per row reads
   better than four clipped ones. Quick links keep two columns — their labels are short and they
   are already centred, so they survive the narrower track. */
@media (max-width:420px){
	.stat-grid{ grid-template-columns:minmax(0,1fr); }
	.stat-card .lbl{ white-space:normal; }
}

/* ── Sync banner on mobile: button full-width, below the text  (2026-07-21) ──
 * Markup (verified):
 *   .sync-panel.help            display:flex; align-items:center       ← no wrap
 *     ├ span.sync-panel-ico
 *     ├ div                     strong + copy
 *     └ div  style="margin-left:auto"      ← INLINE attribute
 *          └ .hq-sync-wrap > button.hq-sync-btn
 *
 * On a phone the row refuses to break, so the copy squeezes to three lines and the green button
 * squeezes with it — "SYNC / MY / ACCESS" stacked inside a narrow pill.
 *
 * `!important` on `margin-left` is unavoidable and is the ONLY one here: that value is an inline
 * `style` attribute on the element, and an inline style outranks any selector we can write. Every
 * other declaration below is a plain rule.
 *
 * The button's own wrapper is an unclassed <div>, so it is matched via `:has(> .hq-sync-wrap)`
 * rather than a positional `:last-child` — the panel also contains a <style> element, and
 * position-based matching would be one markup tweak away from breaking. */
@media (max-width:900px){
	.hqud-shell .sync-panel{
		flex-wrap:wrap;
		align-items:flex-start;
	}
	/* Copy takes the remaining width on the first row, beside the icon. */
	.hqud-shell .sync-panel > div:not(:has(.hq-sync-wrap)){
		flex:1 1 0; min-width:0;
	}
	/* Button wrapper drops to its own full-width row. */
	.hqud-shell .sync-panel > div:has(> .hq-sync-wrap){
		flex:1 0 100%;
		margin-left:0 !important;
	}
	/* The page prints `.hq-sync-wrap{margin:12px 0}` in an inline <style>; this out-specifies it
	   (0,3,0 vs 0,1,0) without needing !important. */
	.hqud-shell .sync-panel .hq-sync-wrap{ margin:10px 0 0; }
	.hqud-shell .sync-panel .hq-sync-btn{
		display:block; width:100%; padding:12px 16px; white-space:nowrap;
	}
}