/* ════════════════════════════════════════════════════════════════════
   CEO HUB — Design system
   This CSS is loaded on every member-facing page and provides:
     - The full-bleed shell (sidebar + main + right rail)
     - All component styles (KPI cards, hub cards, panels, etc.)
     - Mobile responsive layout
     - The 12 hub card colour variants

   Color tokens are defined in style.css — do not redefine here.
   Class naming follows BEM: .block, .block__element, .block--modifier
   ════════════════════════════════════════════════════════════════════ */

/* ── Reset for the dashboard shell ────────────────────────────────────
   Aggressive reset to escape Alliance / WordPress wrapper interference.
   We force the shell to use position: fixed and overlay the entire
   viewport, regardless of what wrappers WP or the parent theme injects.
   ──────────────────────────────────────────────────────────────────── */
html.ceohub-html-shell,
body.ceohub-shell {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;        /* prevent body scroll — shell scrolls */
    width: 100% !important;
    height: 100% !important;
    background: var(--ceohub-bg) !important;
}

body.ceohub-shell {
    color: var(--ceohub-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.ceohub-shell *,
body.ceohub-shell *::before,
body.ceohub-shell *::after {
    box-sizing: border-box;
}

body.ceohub-shell a { text-decoration: none; color: inherit; }
body.ceohub-shell button { font-family: inherit; cursor: pointer; }
body.ceohub-shell h1, body.ceohub-shell h2,
body.ceohub-shell h3, body.ceohub-shell h4 { margin: 0; }
body.ceohub-shell ul, body.ceohub-shell ol { list-style: none; padding: 0; margin: 0; }

/* Hide WP admin bar on the dashboard */
body.ceohub-shell #wpadminbar { display: none !important; }
body.ceohub-shell.admin-bar { margin-top: 0 !important; }
html[lang] { margin-top: 0 !important; }

/* Hide any Alliance / WP wrapper elements that may be leaking through.
   Our app shell is position: fixed, so these are technically irrelevant,
   but hiding them prevents accessibility/screen-reader confusion. */
body.ceohub-shell > *:not(.ceohub-app-shell):not(script):not(style):not(link):not(noscript) {
    display: none !important;
}

/* ── Layout shell — fixed positioning to escape any wrapper ────────── */
.ceohub-app-shell {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 240px 1fr;
    overflow: hidden;
    background: var(--ceohub-bg);
}

.ceohub-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--ceohub-bg);
    overflow-y: auto;       /* main content scrolls independently */
    overflow-x: hidden;
}

.ceohub-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    padding: 24px 28px;
    flex: 1;
    align-items: start;
}

.ceohub-content__main { min-width: 0; }

@media (max-width: 1280px) {
    .ceohub-content { grid-template-columns: 1fr; }
    .ceohub-content__rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.ceohub-sidebar {
    background: var(--ceohub-sidebar-bg);
    color: var(--ceohub-sidebar-text);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    overflow-y: auto;       /* sidebar content scrolls independently */
    z-index: 10;
}

.ceohub-sidebar__logo {
    text-align: center;
    padding: 8px 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ceohub-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ceohub-accent);
}

.ceohub-logo__crown { font-size: 18px; }

.ceohub-logo__name {
    font-weight: 800;
    font-size: 28px;
    letter-spacing: 0.04em;
    line-height: 0.95;
    color: var(--ceohub-accent);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ceohub-logo__sub { font-size: 18px; }

/* When admin uploads a logo via Customizer, this rule sizes it nicely */
.ceohub-logo__img {
    display: block;
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ceohub-logo__tagline {
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--ceohub-sidebar-text-soft);
    margin-top: 8px;
    text-transform: uppercase;
}

.ceohub-sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; }

.ceohub-sidebar__nav ul { display: flex; flex-direction: column; gap: 2px; }

.ceohub-navlink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ceohub-sidebar-text);
    font-size: 14px;
    font-weight: 500;
    transition: background var(--ceohub-trans), color var(--ceohub-trans);
}

.ceohub-navlink:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--ceohub-text-on-dark);
}

.ceohub-navlink.is-active {
    background: var(--ceohub-sidebar-active-bg);
    color: var(--ceohub-text-on-dark);
    box-shadow: 0 4px 12px rgba(59, 48, 230, 0.3);
}

.ceohub-navlink__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Inline SVG masks for the nav icons — no extra HTTP requests */
.ceohub-navlink__icon[data-icon="home"]     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"); }
.ceohub-navlink__icon[data-icon="book"]     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>"); }
.ceohub-navlink__icon[data-icon="users"]    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.ceohub-navlink__icon[data-icon="message"]  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>"); }
.ceohub-navlink__icon[data-icon="calendar"] { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M16 2v4'/><path d='M8 2v4'/><path d='M3 10h18'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M16 2v4'/><path d='M8 2v4'/><path d='M3 10h18'/></svg>"); }
.ceohub-navlink__icon[data-icon="shop"]     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>"); }
.ceohub-navlink__icon[data-icon="people"]   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.ceohub-navlink__icon[data-icon="trophy"]   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/><path d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/><path d='M4 22h16'/><path d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/><path d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/><path d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/><path d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/><path d='M4 22h16'/><path d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/><path d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/><path d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/></svg>"); }
.ceohub-navlink__icon[data-icon="folder"]   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/></svg>"); }
.ceohub-navlink__icon[data-icon="wrench"]   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>"); }
.ceohub-navlink__icon[data-icon="help"]     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><path d='M12 17h.01'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><path d='M12 17h.01'/></svg>"); }

/* Subscription card */
.ceohub-sub {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--ceohub-radius);
    padding: 12px 14px;
    text-align: left;
}
.ceohub-sub__crown { font-size: 14px; }
.ceohub-sub__title {
    color: var(--ceohub-text-on-dark);
    font-weight: 600;
    font-size: 13px;
    margin-top: 4px;
}
.ceohub-sub__tier {
    color: var(--ceohub-accent);
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}
.ceohub-sub__renews {
    color: var(--ceohub-sidebar-text-soft);
    font-size: 11px;
    margin-top: 6px;
}

/* User well */
.ceohub-userwell {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.ceohub-userwell__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.ceohub-userwell__welcome {
    color: var(--ceohub-sidebar-text-soft);
    font-size: 11px;
    line-height: 1.2;
}
.ceohub-userwell__name {
    color: var(--ceohub-text-on-dark);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
}
.ceohub-userwell__profile {
    width: 100%;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* User menu dropdown — opens above the toggle button */
.ceohub-userwell__menu {
    position: relative;
}
.ceohub-userwell__dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--ceohub-surface);
    color: var(--ceohub-text);
    border-radius: var(--ceohub-radius);
    box-shadow: var(--ceohub-shadow-lg);
    border: 1px solid var(--ceohub-border);
    padding: 6px;
    display: none;
    z-index: 100;
}
.ceohub-userwell__menu.is-open .ceohub-userwell__dropdown {
    display: block;
    animation: ceohub-menu-pop 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ceohub-menu-pop {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.ceohub-userwell__dropdown-item {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ceohub-text);
    transition: background var(--ceohub-trans);
}
.ceohub-userwell__dropdown-item:hover {
    background: var(--ceohub-surface-soft);
}
.ceohub-userwell__dropdown-item--danger {
    color: var(--ceohub-danger);
}
.ceohub-userwell__dropdown-item--danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* Avatar link in topbar — wraps the avatar image */
.ceohub-topbar__avatar-link {
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    transition: opacity var(--ceohub-trans);
}
.ceohub-topbar__avatar-link:hover { opacity: 0.85; }

/* ── Topbar ───────────────────────────────────────────────────────── */
.ceohub-topbar {
    background: var(--ceohub-surface);
    border-bottom: 1px solid var(--ceohub-border);
    padding: 12px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 9;
    flex-shrink: 0;
}

.ceohub-topbar__menu {
    display: none;
    background: transparent;
    border: 0;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: var(--ceohub-radius-sm);
}
.ceohub-topbar__menu span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ceohub-text);
    border-radius: 2px;
}

.ceohub-topbar__search {
    flex: 1;
    position: relative;
    max-width: 600px;
}
.ceohub-topbar__search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ceohub-text-muted);
    font-size: 14px;
}
.ceohub-topbar__search input {
    width: 100%;
    height: 40px;
    padding: 0 16px 0 40px;
    border: 1px solid var(--ceohub-border);
    background: var(--ceohub-surface-soft);
    border-radius: var(--ceohub-radius);
    font-size: 14px;
    transition: border-color var(--ceohub-trans), background var(--ceohub-trans);
}
.ceohub-topbar__search input:focus {
    outline: none;
    border-color: var(--ceohub-primary);
    background: var(--ceohub-surface);
}

.ceohub-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ceohub-iconbtn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    border-radius: var(--ceohub-radius-sm);
    font-size: 18px;
    position: relative;
    transition: background var(--ceohub-trans);
}
.ceohub-iconbtn:hover { background: var(--ceohub-surface-soft); }

.ceohub-iconbtn__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--ceohub-danger);
    color: white;
    font-size: 10px;
    font-weight: 600;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ceohub-topbar__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

/* ── Page head ────────────────────────────────────────────────────── */
.ceohub-page-head { margin-bottom: 24px; }
.ceohub-page-title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ceohub-text);
    line-height: 1.1;
}
.ceohub-page-subtitle {
    color: var(--ceohub-text-soft);
    font-size: 16px;
    margin: 6px 0 0;
}

/* ── KPI cards ────────────────────────────────────────────────────── */
.ceohub-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.ceohub-kpi {
    background: var(--ceohub-surface);
    border: 1px solid var(--ceohub-border);
    border-radius: var(--ceohub-radius);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform var(--ceohub-trans), box-shadow var(--ceohub-trans);
}
.ceohub-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--ceohub-shadow);
}

.ceohub-kpi__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.ceohub-kpi--indigo .ceohub-kpi__icon { background: linear-gradient(135deg, #6366F1, #4F46E5); color: white; }
.ceohub-kpi--green  .ceohub-kpi__icon { background: linear-gradient(135deg, #10B981, #059669); color: white; }
.ceohub-kpi--orange .ceohub-kpi__icon { background: linear-gradient(135deg, #F59E0B, #D97706); color: white; }
.ceohub-kpi--blue   .ceohub-kpi__icon { background: linear-gradient(135deg, #3B82F6, #2563EB); color: white; }

.ceohub-kpi__body { flex: 1; min-width: 0; }
.ceohub-kpi__value {
    font-size: 24px;
    font-weight: 800;
    color: var(--ceohub-text);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.ceohub-kpi__label {
    color: var(--ceohub-text-soft);
    font-size: 12px;
    margin-top: 2px;
}
.ceohub-kpi__cta {
    display: inline-block;
    color: var(--ceohub-primary);
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
}
.ceohub-kpi__cta--orange { color: #D97706; }
.ceohub-kpi__cta--blue   { color: #2563EB; }
.ceohub-kpi__cta:hover { text-decoration: underline; }

.ceohub-kpi__progress {
    height: 4px;
    background: var(--ceohub-border-soft);
    border-radius: 99px;
    margin-top: 8px;
    overflow: hidden;
}
.ceohub-kpi__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #34D399);
    border-radius: 99px;
}

/* ── Hub cards ────────────────────────────────────────────────────── */
.ceohub-hubs {
    display: grid;
    /* auto-fill with minmax means cards stay at least 220px wide, no
       matter the screen size. They reflow to fewer columns gracefully
       instead of crushing into unreadable narrow columns. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.ceohub-empty {
    grid-column: 1 / -1;
    background: var(--ceohub-surface);
    border: 1px dashed var(--ceohub-border);
    border-radius: var(--ceohub-radius);
    padding: 32px;
    text-align: center;
    color: var(--ceohub-text-soft);
}

.ceohub-hub-card {
    background: var(--ceohub-surface);
    border: 1px solid var(--ceohub-border);
    border-radius: var(--ceohub-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform var(--ceohub-trans), box-shadow var(--ceohub-trans), border-color var(--ceohub-trans);
}
.ceohub-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ceohub-shadow);
    border-color: transparent;
}

.ceohub-hub-card__head {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 10px;
}

.ceohub-hub-card__num {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ceohub-hub-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--ceohub-surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.ceohub-hub-card__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ceohub-text);
    min-width: 0;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}
.ceohub-hub-card__title a:hover { color: var(--ceohub-primary); }

.ceohub-hub-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--ceohub-text-soft);
    font-size: 12px;
}
.ceohub-hub-card__sep { opacity: 0.5; }
.ceohub-hub-card__duration { display: inline-flex; align-items: center; gap: 4px; }

/* Hub-card colour variants — accent on number badge + button */
.ceohub-hub-card[data-color="1"]  .ceohub-hub-card__num { background: var(--ceohub-hub-1); }
.ceohub-hub-card[data-color="2"]  .ceohub-hub-card__num { background: var(--ceohub-hub-2); }
.ceohub-hub-card[data-color="3"]  .ceohub-hub-card__num { background: var(--ceohub-hub-3); }
.ceohub-hub-card[data-color="4"]  .ceohub-hub-card__num { background: var(--ceohub-hub-4); }
.ceohub-hub-card[data-color="5"]  .ceohub-hub-card__num { background: var(--ceohub-hub-5); }
.ceohub-hub-card[data-color="6"]  .ceohub-hub-card__num { background: var(--ceohub-hub-6); }
.ceohub-hub-card[data-color="7"]  .ceohub-hub-card__num { background: var(--ceohub-hub-7); }
.ceohub-hub-card[data-color="8"]  .ceohub-hub-card__num { background: var(--ceohub-hub-8); }
.ceohub-hub-card[data-color="9"]  .ceohub-hub-card__num { background: var(--ceohub-hub-9); }
.ceohub-hub-card[data-color="10"] .ceohub-hub-card__num { background: var(--ceohub-hub-10); }
.ceohub-hub-card[data-color="11"] .ceohub-hub-card__num { background: var(--ceohub-hub-11); }
.ceohub-hub-card[data-color="12"] .ceohub-hub-card__num { background: var(--ceohub-hub-12); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.ceohub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: filter var(--ceohub-trans), background var(--ceohub-trans), color var(--ceohub-trans);
    text-decoration: none;
}
.ceohub-btn:hover { filter: brightness(1.05); }

.ceohub-btn--full { width: 100%; }

.ceohub-btn--ghost-light {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ceohub-text-on-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ceohub-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.1); }

.ceohub-btn--outline-purple {
    background: transparent;
    color: var(--ceohub-primary);
    border: 1px solid var(--ceohub-primary);
}
.ceohub-btn--outline-purple:hover {
    background: var(--ceohub-primary);
    color: white;
}

.ceohub-btn--hub {
    width: 100%;
    color: #ffffff !important;
    margin-top: auto;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.ceohub-btn--hub[data-color="1"]  { background: var(--ceohub-hub-1); }
.ceohub-btn--hub[data-color="2"]  { background: var(--ceohub-hub-2); }
.ceohub-btn--hub[data-color="3"]  { background: var(--ceohub-hub-3); }
.ceohub-btn--hub[data-color="4"]  { background: var(--ceohub-hub-4); }
.ceohub-btn--hub[data-color="5"]  { background: var(--ceohub-hub-5); }
.ceohub-btn--hub[data-color="6"]  { background: var(--ceohub-hub-6); }
.ceohub-btn--hub[data-color="7"]  { background: var(--ceohub-hub-7); }
.ceohub-btn--hub[data-color="8"]  { background: var(--ceohub-hub-8); }
.ceohub-btn--hub[data-color="9"]  { background: var(--ceohub-hub-9); }
.ceohub-btn--hub[data-color="10"] { background: var(--ceohub-hub-10); }
.ceohub-btn--hub[data-color="11"] { background: var(--ceohub-hub-11); }
.ceohub-btn--hub[data-color="12"] { background: var(--ceohub-hub-12); }

/* ── Find My Path CTA ─────────────────────────────────────────────── */
.ceohub-cta-strip {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    border-radius: var(--ceohub-radius);
    padding: 16px 20px;
    color: white;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.ceohub-cta-strip__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.ceohub-cta-strip__body { flex: 1; min-width: 0; }
.ceohub-cta-strip__title { font-size: 16px; font-weight: 700; }
.ceohub-cta-strip__sub { font-size: 13px; opacity: 0.9; margin-top: 2px; }

@media (max-width: 600px) {
    .ceohub-cta-strip { flex-direction: column; align-items: flex-start; }
}

/* ── Bottom panels ────────────────────────────────────────────────── */
.ceohub-bottom-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.ceohub-panel {
    background: var(--ceohub-surface);
    border: 1px solid var(--ceohub-border);
    border-radius: var(--ceohub-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ceohub-panel__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ceohub-text);
}
.ceohub-panel__sub {
    font-size: 12px;
    color: var(--ceohub-text-soft);
    margin-top: 2px;
}

.ceohub-panel__link {
    color: var(--ceohub-primary);
    font-size: 12px;
    font-weight: 600;
    margin-top: auto;
}
.ceohub-panel__link:hover { text-decoration: underline; }

/* Continue Learning panel */
.ceohub-continue { display: flex; gap: 12px; align-items: flex-start; }
.ceohub-continue__thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--ceohub-surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.ceohub-continue__title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.ceohub-continue__sub   { font-size: 11px; color: var(--ceohub-text-soft); }
.ceohub-continue__pct   { font-size: 11px; color: var(--ceohub-success); font-weight: 600; }
.ceohub-continue__bar {
    height: 4px;
    background: var(--ceohub-border-soft);
    border-radius: 99px;
    margin-top: 4px;
    overflow: hidden;
}
.ceohub-continue__bar span { display: block; height: 100%; background: var(--ceohub-success); border-radius: 99px; }

/* Event panel */
.ceohub-event { display: flex; gap: 12px; align-items: flex-start; }
.ceohub-event__thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: linear-gradient(135deg, #818CF8, #6366F1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.ceohub-event__title { font-size: 13px; font-weight: 700; }
.ceohub-event__sub   { font-size: 11px; color: var(--ceohub-text-soft); }
.ceohub-event__when  { font-size: 11px; color: var(--ceohub-text); margin-top: 4px; }

/* Leaderboard panel */
.ceohub-leaderboard { display: flex; flex-direction: column; gap: 8px; }
.ceohub-leaderboard li {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.ceohub-leaderboard__rank   { font-weight: 700; color: var(--ceohub-text-muted); }
.ceohub-leaderboard__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F472B6, #EC4899);
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ceohub-leaderboard__name   { color: var(--ceohub-text); font-weight: 600; }
.ceohub-leaderboard__amount { color: var(--ceohub-text); font-weight: 700; }

/* Activity panel */
.ceohub-activity { display: flex; flex-direction: column; gap: 10px; }
.ceohub-activity li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; }
.ceohub-activity__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34D399, #10B981);
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ceohub-activity__title { font-weight: 600; line-height: 1.3; }
.ceohub-activity__meta  { color: var(--ceohub-text-soft); font-size: 11px; margin-top: 2px; }

/* ── Right rail cards ─────────────────────────────────────────────── */
.ceohub-content__rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ceohub-rail-card {
    background: var(--ceohub-surface);
    border: 1px solid var(--ceohub-border);
    border-radius: var(--ceohub-radius);
    overflow: hidden;
}

.ceohub-rail-card__head {
    padding: 12px 16px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ceohub-rail-card__head--purple { background: linear-gradient(135deg, #6366F1, #4F46E5); }
.ceohub-rail-card__head--green  { background: linear-gradient(135deg, #10B981, #059669); }
.ceohub-rail-card__head--ghost {
    background: var(--ceohub-surface);
    color: var(--ceohub-text);
    justify-content: space-between;
    border-bottom: 1px solid var(--ceohub-border);
}

.ceohub-rail-card__action {
    color: var(--ceohub-primary);
    font-size: 11px;
    font-weight: 600;
}
.ceohub-rail-card__action:hover { text-decoration: underline; }

.ceohub-rail-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ceohub-level { padding: 8px 0; }
.ceohub-level__title {
    font-size: 14px;
    font-weight: 700;
}
.ceohub-level__title--purple { color: #6366F1; }
.ceohub-level__title--blue   { color: #2563EB; }
.ceohub-level__title--green  { color: #10B981; }

.ceohub-level__sub {
    font-size: 12px;
    color: var(--ceohub-text-soft);
    margin-top: 2px;
}
.ceohub-level__arrow {
    text-align: center;
    color: var(--ceohub-text-muted);
    font-size: 14px;
    margin: -4px 0;
}

.ceohub-example-tier {
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}
.ceohub-example-tier--blue       { border: 1px solid #BFDBFE; color: #1D4ED8; }
.ceohub-example-tier--blue-soft  { border: 1px solid #DBEAFE; background: #EFF6FF; color: #1E40AF; }
.ceohub-example-tier--green-soft { border: 1px solid #BBF7D0; background: #F0FDF4; color: #166534; text-align: left; }

.ceohub-example-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: #15803D;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ceohub-progress-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--ceohub-border-soft);
}
.ceohub-progress-row:last-of-type { border-bottom: 0; padding-bottom: 16px; }

.ceohub-progress-row__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ceohub-progress-row__icon--blue  { background: #DBEAFE; color: #1D4ED8; }
.ceohub-progress-row__icon--green { background: #D1FAE5; color: #047857; }

.ceohub-progress-row__title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.ceohub-progress-row__sub   { font-size: 11px; color: var(--ceohub-text-soft); margin-top: 2px; }
.ceohub-progress-row__bar {
    height: 4px;
    background: var(--ceohub-border-soft);
    border-radius: 99px;
    margin-top: 6px;
    overflow: hidden;
}
.ceohub-progress-row__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #10B981, #34D399);
    border-radius: 99px;
}

/* ── Mobile responsive layout ─────────────────────────────────────── */

/* Below 1280px: drop the right rail down below the main content,
   give it a wider grid so widgets don't look lonely */
@media (max-width: 1280px) {
    .ceohub-content {
        grid-template-columns: 1fr;
    }
    .ceohub-content__rail {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }
}

/* Below 900px: sidebar becomes a sliding overlay */
@media (max-width: 900px) {
    .ceohub-app-shell {
        grid-template-columns: 1fr;
    }
    .ceohub-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 240px;
        transform: translateX(-100%);
        transition: transform 240ms ease;
        z-index: 50;
    }
    .ceohub-sidebar.is-open { transform: translateX(0); }

    .ceohub-topbar__menu { display: flex; }
    .ceohub-content { padding: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 2B — Real data wiring additions
   ════════════════════════════════════════════════════════════════════ */

/* ── Empty states (when no real data exists yet) ──────────────────── */
.ceohub-empty-state {
    text-align: center;
    padding: 16px 8px;
    color: var(--ceohub-text-soft);
    font-size: 13px;
}
.ceohub-empty-state p {
    margin: 0 0 4px;
}
.ceohub-empty-state__hint {
    font-size: 12px;
    color: var(--ceohub-text-muted);
}
.ceohub-empty-state--rail {
    padding: 12px 8px;
}

/* ── Continue Learning panel with image thumbnail ─────────────────── */
.ceohub-continue {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: inherit;
    transition: opacity var(--ceohub-trans);
}
.ceohub-continue:hover { opacity: 0.85; }

.ceohub-continue__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* ── Upcoming Events panel with image thumbnail ───────────────────── */
.ceohub-event {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: inherit;
    transition: opacity var(--ceohub-trans);
}
.ceohub-event:hover { opacity: 0.85; }

.ceohub-event__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* ── Leaderboard with real avatar images ──────────────────────────── */
.ceohub-leaderboard__avatar-link {
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    transition: opacity var(--ceohub-trans);
}
.ceohub-leaderboard__avatar-link:hover { opacity: 0.8; }

.ceohub-leaderboard__avatar-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ── Activity panel with link wrapper ─────────────────────────────── */
.ceohub-activity__link {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: inherit;
    transition: opacity var(--ceohub-trans);
}
.ceohub-activity__link:hover { opacity: 0.85; }

/* Override for img variant (was originally a span with letter glyph) */
img.ceohub-activity__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

/* ── Right-rail progress rows with hub colours ────────────────────── */
.ceohub-progress-row {
    color: inherit;
    transition: opacity var(--ceohub-trans);
}
a.ceohub-progress-row:hover { opacity: 0.85; }

.ceohub-progress-row__icon[data-color="1"]  { background: rgba(99, 102, 241, 0.12); color: var(--ceohub-hub-1); }
.ceohub-progress-row__icon[data-color="2"]  { background: rgba(236, 72, 153, 0.12); color: var(--ceohub-hub-2); }
.ceohub-progress-row__icon[data-color="3"]  { background: rgba(245, 158, 11, 0.12); color: var(--ceohub-hub-3); }
.ceohub-progress-row__icon[data-color="4"]  { background: rgba(139, 92, 246, 0.12); color: var(--ceohub-hub-4); }
.ceohub-progress-row__icon[data-color="5"]  { background: rgba(16, 185, 129, 0.12); color: var(--ceohub-hub-5); }
.ceohub-progress-row__icon[data-color="6"]  { background: rgba(59, 130, 246, 0.12); color: var(--ceohub-hub-6); }
.ceohub-progress-row__icon[data-color="7"]  { background: rgba(244, 63, 94, 0.12);  color: var(--ceohub-hub-7); }
.ceohub-progress-row__icon[data-color="8"]  { background: rgba(20, 184, 166, 0.12); color: var(--ceohub-hub-8); }
.ceohub-progress-row__icon[data-color="9"]  { background: rgba(168, 85, 247, 0.12); color: var(--ceohub-hub-9); }
.ceohub-progress-row__icon[data-color="10"] { background: rgba(34, 197, 94, 0.12);  color: var(--ceohub-hub-10); }
.ceohub-progress-row__icon[data-color="11"] { background: rgba(217, 70, 239, 0.12); color: var(--ceohub-hub-11); }
.ceohub-progress-row__icon[data-color="12"] { background: rgba(249, 115, 22, 0.12); color: var(--ceohub-hub-12); }

/* ── Inactive subscription card (for free members) ────────────────── */
.ceohub-sub--inactive {
    background: rgba(255, 255, 255, 0.03);
    border-style: dashed;
}
.ceohub-sub__cta {
    display: inline-block;
    color: var(--ceohub-accent);
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
    transition: opacity var(--ceohub-trans);
}
.ceohub-sub__cta:hover { opacity: 0.85; }


/* ── Print: hide app chrome ───────────────────────────────────────── */
@media print {
    .ceohub-sidebar,
    .ceohub-topbar,
    .ceohub-content__rail { display: none; }
    .ceohub-app-shell { grid-template-columns: 1fr; position: static; }
    body.ceohub-shell { overflow: auto !important; }
}


/* ═════════════════════════════════════════════════════════════════════
   Phase 2D-i-A — Courses listing page
   Scoped under .ceohub-courses-archive body class so styles don't leak
   to other pages. Reuses dashboard tokens (--ceohub-*) throughout.
   ═════════════════════════════════════════════════════════════════════ */

/* Content area runs full-width on the courses page (no right rail) */
.ceohub-content--full {
    grid-template-columns: 1fr;
}

/* ── Filter bar ───────────────────────────────────────────────────── */
.ceohub-coursefilters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 20px 0 18px;
    padding: 16px 18px;
    background: var(--ceohub-surface);
    border: 1px solid var(--ceohub-border);
    border-radius: var(--ceohub-radius);
    box-shadow: var(--ceohub-shadow-sm);
}

.ceohub-coursefilters__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
    flex: 1 1 200px;
}

.ceohub-coursefilters__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ceohub-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ceohub-coursefilters__select {
    width: 100%;
    padding: 9px 32px 9px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ceohub-text);
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%2364748b'><path d='M6 8L0 2l1.5-1.5L6 5l4.5-4.5L12 2z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    border: 1px solid var(--ceohub-border);
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--ceohub-trans), box-shadow var(--ceohub-trans);
}
.ceohub-coursefilters__select:hover {
    border-color: var(--ceohub-text-muted);
}
.ceohub-coursefilters__select:focus {
    outline: none;
    border-color: var(--ceohub-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.ceohub-coursefilters__clear {
    align-self: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ceohub-text-muted);
    text-decoration: underline;
    padding: 9px 6px;
    transition: color var(--ceohub-trans);
}
.ceohub-coursefilters__clear:hover {
    color: var(--ceohub-accent);
}

.ceohub-coursefilters__submit {
    /* shown only in <noscript> when JS is off — visible by default in that case */
}

.ceohub-coursefilters__count {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--ceohub-text-muted);
}

/* ── Course card grid ─────────────────────────────────────────────── */
.ceohub-coursegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 6px;
}

.ceohub-coursegrid__empty {
    padding: 48px 24px;
    text-align: center;
    background: var(--ceohub-surface);
    border: 1px dashed var(--ceohub-border);
    border-radius: var(--ceohub-radius);
    color: var(--ceohub-text-muted);
}
.ceohub-coursegrid__empty p { margin: 0 0 12px; }
.ceohub-coursegrid__empty p:last-child { margin-bottom: 0; }

/* ── Course card ──────────────────────────────────────────────────── */
.ceohub-coursecard {
    position: relative;
    background: var(--ceohub-surface);
    border: 1px solid var(--ceohub-border);
    border-radius: var(--ceohub-radius);
    overflow: hidden;
    transition: transform var(--ceohub-trans), box-shadow var(--ceohub-trans), border-color var(--ceohub-trans);
}
.ceohub-coursecard:hover {
    transform: translateY(-2px);
    box-shadow: var(--ceohub-shadow);
    border-color: rgba(99, 102, 241, 0.35);
}

/* Enrolled cards get a colored left accent matching their hub */
.ceohub-coursecard.is-enrolled {
    border-left-width: 4px;
}
.ceohub-coursecard.is-enrolled[data-color="1"]  { border-left-color: var(--ceohub-hub-1); }
.ceohub-coursecard.is-enrolled[data-color="2"]  { border-left-color: var(--ceohub-hub-2); }
.ceohub-coursecard.is-enrolled[data-color="3"]  { border-left-color: var(--ceohub-hub-3); }
.ceohub-coursecard.is-enrolled[data-color="4"]  { border-left-color: var(--ceohub-hub-4); }
.ceohub-coursecard.is-enrolled[data-color="5"]  { border-left-color: var(--ceohub-hub-5); }
.ceohub-coursecard.is-enrolled[data-color="6"]  { border-left-color: var(--ceohub-hub-6); }
.ceohub-coursecard.is-enrolled[data-color="7"]  { border-left-color: var(--ceohub-hub-7); }
.ceohub-coursecard.is-enrolled[data-color="8"]  { border-left-color: var(--ceohub-hub-8); }
.ceohub-coursecard.is-enrolled[data-color="9"]  { border-left-color: var(--ceohub-hub-9); }
.ceohub-coursecard.is-enrolled[data-color="10"] { border-left-color: var(--ceohub-hub-10); }
.ceohub-coursecard.is-enrolled[data-color="11"] { border-left-color: var(--ceohub-hub-11); }
.ceohub-coursecard.is-enrolled[data-color="12"] { border-left-color: var(--ceohub-hub-12); }

.ceohub-coursecard__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 16px;
    color: inherit;
    text-decoration: none;
    height: 100%;
}
.ceohub-coursecard__inner:hover,
.ceohub-coursecard__inner:focus { color: inherit; text-decoration: none; }

.ceohub-coursecard__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ceohub-accent);
    border-radius: 999px;
    z-index: 2;
}
.ceohub-coursecard.is-complete .ceohub-coursecard__badge {
    background: #16a34a;
}

.ceohub-coursecard__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.ceohub-coursecard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--ceohub-accent);
    font-size: 20px;
    flex-shrink: 0;
}
/* Map the hub color to the icon background based on the parent card's data-color */
.ceohub-coursecard[data-color="1"]  .ceohub-coursecard__icon { background: rgba(99, 102, 241, 0.10);  color: var(--ceohub-hub-1); }
.ceohub-coursecard[data-color="2"]  .ceohub-coursecard__icon { background: rgba(59, 130, 246, 0.10);  color: var(--ceohub-hub-2); }
.ceohub-coursecard[data-color="3"]  .ceohub-coursecard__icon { background: rgba(16, 185, 129, 0.10);  color: var(--ceohub-hub-3); }
.ceohub-coursecard[data-color="4"]  .ceohub-coursecard__icon { background: rgba(245, 158, 11, 0.10);  color: var(--ceohub-hub-4); }
.ceohub-coursecard[data-color="5"]  .ceohub-coursecard__icon { background: rgba(239, 68, 68, 0.10);   color: var(--ceohub-hub-5); }
.ceohub-coursecard[data-color="6"]  .ceohub-coursecard__icon { background: rgba(236, 72, 153, 0.10);  color: var(--ceohub-hub-6); }
.ceohub-coursecard[data-color="7"]  .ceohub-coursecard__icon { background: rgba(6, 182, 212, 0.10);   color: var(--ceohub-hub-7); }
.ceohub-coursecard[data-color="8"]  .ceohub-coursecard__icon { background: rgba(20, 184, 166, 0.10);  color: var(--ceohub-hub-8); }
.ceohub-coursecard[data-color="9"]  .ceohub-coursecard__icon { background: rgba(168, 85, 247, 0.10);  color: var(--ceohub-hub-9); }
.ceohub-coursecard[data-color="10"] .ceohub-coursecard__icon { background: rgba(34, 197, 94, 0.10);   color: var(--ceohub-hub-10); }
.ceohub-coursecard[data-color="11"] .ceohub-coursecard__icon { background: rgba(217, 70, 239, 0.10);  color: var(--ceohub-hub-11); }
.ceohub-coursecard[data-color="12"] .ceohub-coursecard__icon { background: rgba(249, 115, 22, 0.10);  color: var(--ceohub-hub-12); }

/* Render glyphs via data-icon attribute (reuses dashboard nav icon mapping) */
.ceohub-coursecard__icon::before { content: "📚"; }
.ceohub-coursecard__icon[data-icon="cart"]::before        { content: "🛒"; }
.ceohub-coursecard__icon[data-icon="robot"]::before       { content: "🤖"; }
.ceohub-coursecard__icon[data-icon="chart"]::before       { content: "📊"; }
.ceohub-coursecard__icon[data-icon="link"]::before        { content: "🔗"; }
.ceohub-coursecard__icon[data-icon="pen"]::before         { content: "✏️"; }
.ceohub-coursecard__icon[data-icon="building"]::before    { content: "🏢"; }
.ceohub-coursecard__icon[data-icon="bank"]::before        { content: "🏦"; }
.ceohub-coursecard__icon[data-icon="download"]::before    { content: "⬇️"; }
.ceohub-coursecard__icon[data-icon="rocket"]::before      { content: "🚀"; }
.ceohub-coursecard__icon[data-icon="diamond"]::before     { content: "💎"; }
.ceohub-coursecard__icon[data-icon="graduation"]::before  { content: "🎓"; }
.ceohub-coursecard__icon[data-icon="home"]::before        { content: "🏠"; }
.ceohub-coursecard__icon[data-icon="book"]::before        { content: "📚"; }

.ceohub-coursecard__hub {
    font-size: 11px;
    font-weight: 600;
    color: var(--ceohub-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.ceohub-coursecard__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ceohub-text);
    /* Cap at 2 lines for consistent card heights */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ceohub-coursecard__excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ceohub-text-muted);
    /* Cap at 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ceohub-coursecard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.ceohub-coursecard__meta-item {
    font-size: 12px;
    font-weight: 500;
    color: var(--ceohub-text-muted);
    padding: 4px 9px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
}
.ceohub-coursecard__meta-item--difficulty {
    background: rgba(99, 102, 241, 0.08);
    color: var(--ceohub-accent);
    font-weight: 600;
}

/* Progress bar (enrolled cards only) */
.ceohub-coursecard__progress {
    position: relative;
    height: 6px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
}
.ceohub-coursecard__progress-bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--ceohub-accent);
    border-radius: 999px;
    transition: width 360ms ease;
}
.ceohub-coursecard.is-complete .ceohub-coursecard__progress-bar {
    background: #16a34a;
}
.ceohub-coursecard__progress-text {
    position: absolute;
    right: 0;
    top: -22px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ceohub-text-muted);
}

/* CTA "Continue → / Start → / View course →" */
.ceohub-coursecard__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ceohub-accent);
    transition: gap var(--ceohub-trans);
}
.ceohub-coursecard:hover .ceohub-coursecard__cta {
    gap: 10px;
}

/* ── Responsive tweaks ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ceohub-coursefilters {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .ceohub-coursefilters__group {
        min-width: 0;
    }
    .ceohub-coursegrid {
        grid-template-columns: 1fr;
    }
}