/* =========================================
   WEFIT LMS V2 - Global Stylesheet
   ========================================= */

:root {
    --wefit-pink: #D9004C;
    --wefit-pink-light: #FFF0F5;
    --wefit-bg: #F3F5F9;
    --text-dark: #2C3E50;
    --text-gray: #8A94A6;
    --sidebar-width: 260px;
    --curve-size: 50px;
    --card-radius: 24px;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--wefit-bg);
    color: var(--text-dark);
    overflow-x: clip;  /* `hidden` here breaks position:sticky descendants; `clip` doesn't */
}

/* Helper Colors */
.text-pink { color: var(--wefit-pink) !important; }
.bg-pink { background-color: var(--wefit-pink) !important; color: white; }

/* Product-color tokens (mirror APPLICATION.PRODUCTS[*].color) */
:root {
    --product-visio:   #06B6D4;
    --product-vc:      #7C3AED;
    --product-advance: #10B981;
    --product-game:    #3B82F6;
    --product-exam:    #F59E0B;
    --product-group:   #F43F5E;   /* VISIO INTRA — coral/rose */
}

/* Soft (low-alpha) variants — for "not yet active / future" states. */
.bg-soft-visio   { background: rgba(  6, 182, 212, .18) !important; color: var(--product-visio)   !important; }
.bg-soft-vc      { background: rgba(124,  58, 237, .18) !important; color: var(--product-vc)      !important; }
.bg-soft-advance { background: rgba( 16, 185, 129, .18) !important; color: var(--product-advance) !important; }
.bg-soft-game    { background: rgba( 59, 130, 246, .18) !important; color: var(--product-game)    !important; }
.bg-soft-exam    { background: rgba(245, 158,  11, .18) !important; color: var(--product-exam)    !important; }
.bg-soft-group   { background: rgba(244,  63,  94, .18) !important; color: var(--product-group)   !important; }


/* =========================================
   CEFR LEVEL COLOURS (A1…C2) — ported into the globally-loaded stylesheet
   because lms2's incl_head does NOT load assets/css/custom.css (where the
   lms-era btn-<level> / btn-outline-<level> / border-<level> / text-<level> /
   bg-<level> classes live). Without this, every level-coloured element across
   lms2 pages AND wfModal content rendered unstyled. Keep these here so modals
   (which inherit the page's stylesheets) get level colours for free.
     A1 #80bb46  A2 #1c9f38  B1 #48bfe6  B2 #0087f5  C1 #f6b01f  C2 #e67e22
   ========================================= */
.text-A1{color:#80bb46!important} .text-A2{color:#1c9f38!important} .text-B1{color:#48bfe6!important}
.text-B2{color:#0087f5!important} .text-C1{color:#f6b01f!important} .text-C2{color:#e67e22!important}

.border-A1{border-color:#80bb46!important} .border-A2{border-color:#1c9f38!important} .border-B1{border-color:#48bfe6!important}
.border-B2{border-color:#0087f5!important} .border-C1{border-color:#f6b01f!important} .border-C2{border-color:#e67e22!important}

.bg-A1{background-color:#80bb46!important;color:#fff!important} .bg-A2{background-color:#1c9f38!important;color:#fff!important}
.bg-B1{background-color:#48bfe6!important;color:#fff!important} .bg-B2{background-color:#0087f5!important;color:#fff!important}
.bg-C1{background-color:#f6b01f!important;color:#fff!important} .bg-C2{background-color:#e67e22!important;color:#fff!important}

.btn-A1{background-color:#80bb46;border-color:#80bb46;color:#fff} .btn-A2{background-color:#1c9f38;border-color:#1c9f38;color:#fff}
.btn-B1{background-color:#48bfe6;border-color:#48bfe6;color:#fff} .btn-B2{background-color:#0087f5;border-color:#0087f5;color:#fff}
.btn-C1{background-color:#f6b01f;border-color:#f6b01f;color:#fff} .btn-C2{background-color:#e67e22;border-color:#e67e22;color:#fff}
.btn-A1:hover,.btn-A2:hover,.btn-B1:hover,.btn-B2:hover,.btn-C1:hover,.btn-C2:hover{color:#fff;filter:brightness(.93)}

.btn-outline-A1{color:#80bb46;border:1px solid #80bb46;background:transparent} .btn-outline-A1:hover{background:#80bb46;color:#fff}
.btn-outline-A2{color:#1c9f38;border:1px solid #1c9f38;background:transparent} .btn-outline-A2:hover{background:#1c9f38;color:#fff}
.btn-outline-B1{color:#48bfe6;border:1px solid #48bfe6;background:transparent} .btn-outline-B1:hover{background:#48bfe6;color:#fff}
.btn-outline-B2{color:#0087f5;border:1px solid #0087f5;background:transparent} .btn-outline-B2:hover{background:#0087f5;color:#fff}
.btn-outline-C1{color:#f6b01f;border:1px solid #f6b01f;background:transparent} .btn-outline-C1:hover{background:#f6b01f;color:#fff}
.btn-outline-C2{color:#e67e22;border:1px solid #e67e22;background:transparent} .btn-outline-C2:hover{background:#e67e22;color:#fff}


/* =========================================
   WF-SCROLL — reusable thin, soft scrollbar. Add `.wf-scroll` to ANY
   element with overflow:auto/scroll to replace the chunky native bar
   with a slim rounded thumb that fades into the panel. Track is
   transparent; thumb darkens on hover.
   ========================================= */
.wf-scroll               { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
.wf-scroll::-webkit-scrollbar        { width: 8px; height: 8px; }
.wf-scroll::-webkit-scrollbar-track  { background: transparent; }
.wf-scroll::-webkit-scrollbar-thumb  {
    background: #CBD5E1;
    border-radius: 9999px;
    border: 2px solid transparent;   /* inset the thumb so it reads slimmer */
    background-clip: padding-box;
}
.wf-scroll::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
    background-clip: padding-box;
}


/* =========================================
   CARD_TP PROGRESS BAR — built vs booked nested fills.
   Color is passed per-card via the --cardtp-color custom property on the
   .cardtp-progress-wrap element (set to var(--product-<section>)); the two
   fills + legend dots inherit it. Widths come from --cardtp-built /
   --cardtp-booked (percentages) on the same wrapper.
   ========================================= */
.cardtp-progress {
    position: relative;
    height: 8px;
    border-radius: 50px;
    background: #eef0f2;
    overflow: hidden;
}
.cardtp-progress-built,
.cardtp-progress-booked {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    border-radius: 50px;
    background: var(--cardtp-color, var(--product-visio));
}
.cardtp-progress-built  { width: var(--cardtp-built, 0%);  opacity: .22; }
.cardtp-progress-booked { width: var(--cardtp-booked, 0%); }

.cardtp-progress-legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    color: var(--text-muted, #6c757d);
}
.cardtp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: var(--cardtp-color, var(--product-visio));
}
.cardtp-dot--built  { opacity: .22; }
.cardtp-dot--booked { opacity: 1; }


/* =========================================
   WF BUTTONS — centralized CTA. ALWAYS use these classes; do NOT add
   inline button styling (`style="background:var(--product-X)"`) or
   per-page button rules in CFM <style> blocks. Visual contract:
     - rounded pill, thin font, uppercase, mild letter-spacing
     - filled variant by default; outline via .wf-btn--outline
     - color via product modifier (.wf-btn--visio / vc / advance / game /
       exam) or .wf-btn--danger for paid-pack / destructive CTAs.

   Usage examples:
     <button class="wf-btn wf-btn--visio">Lancer</button>             solid cyan
     <button class="wf-btn wf-btn--visio wf-btn--outline">…</button>  outline
     <a class="wf-btn wf-btn--advance">Activer ESSENTIAL</a>          solid green
     <a class="wf-btn wf-btn--danger">Acheter BOOST</a>               solid red

   `--wf-btn-bg` is the per-instance color — modifiers set this; base
   rules consume it. A page that REALLY needs a one-off color can pass
   `style="--wf-btn-bg:#xyz"` and still inherit all behavior.
   ========================================= */
/* Base — applies to .wf-btn AND legacy .wf-btn-primary (the onboarding
   wizard's first CTA class). Both share the same visual contract; the
   only difference is where the color comes from (modifier class vs the
   wizard's --wf-product-color root variable). */
.wf-btn,
.wf-btn-primary {
    --wf-btn-bg: var(--product-visio);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;

    padding: .45rem 1rem;
    border: 2px solid transparent;
    border-radius: 9999px;

    font-size: .78rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
    white-space: nowrap;

    background: var(--wf-btn-bg);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s, background .15s, color .15s;
}
.wf-btn:hover,
.wf-btn-primary:hover         { filter: brightness(1.08); color: #fff; }
.wf-btn:disabled,
.wf-btn.is-disabled,
.wf-btn-primary:disabled      { opacity: .55; cursor: not-allowed; filter: none; }

/* Outline variant — transparent fill + tinted border + tinted text;
   swaps to filled on hover so the affordance survives the change. */
.wf-btn.wf-btn--outline {
    background: transparent;
    color: var(--wf-btn-bg);
    border-color: var(--wf-btn-bg);
}
.wf-btn.wf-btn--outline:hover {
    background: var(--wf-btn-bg);
    color: #fff;
    filter: none;
}

/* Size modifier — for tight grids (card meta rows, table actions). */
.wf-btn.wf-btn--sm {
    padding: .3rem .75rem;
    font-size: .7rem;
}

/* Size modifier — for hero CTAs that sit alongside 42px circle buttons
   (.action-btn in topnav, .wf-btn--icon in contextual nav). Matches that height. */
.wf-btn.wf-btn--lg {
    min-height: 42px;
    padding: .5rem 1.25rem;
    font-size: .8rem;
}

/* Icon-only square button — used by contextual-nav home buttons (visio /
   wa / prep) and any "icon glyph in a circle" CTA. Forces a fixed width
   so the .rounded-pill geometry renders as a true circle, and drops the
   horizontal padding so the glyph centers cleanly. */
.wf-btn.wf-btn--icon {
    width: 42px;
    height: 42px;
    padding: 0;
}

/* Color modifiers — set --wf-btn-bg only; the base rules paint it. */
.wf-btn--visio   { --wf-btn-bg: var(--product-visio); }
.wf-btn--vc      { --wf-btn-bg: var(--product-vc); }
.wf-btn--advance { --wf-btn-bg: var(--product-advance); }
.wf-btn--game    { --wf-btn-bg: var(--product-game); }
.wf-btn--exam    { --wf-btn-bg: var(--product-exam); }
.wf-btn--group   { --wf-btn-bg: var(--product-group); }
.wf-btn--danger  { --wf-btn-bg: #DC2626; }
.wf-btn--muted   { --wf-btn-bg: #6B7280; }
.wf-btn--pink    { --wf-btn-bg: var(--wefit-pink); }

/* Legacy: .wf-btn-primary reads the wizard's --wf-product-color so the
   onboarding modals don't need HTML edits. New code should prefer
   `class="wf-btn wf-btn--<section>"` for explicit color binding. */
.wf-btn-primary { --wf-btn-bg: var(--wf-product-color, var(--product-visio)); }


/* =========================================
   EL MODULE CARDS — for card/card_el_module.cfm. Compact tile showing
   a sessionmaster the learner has on their We Advance roadmap:
   cover image + level badge → module folder bar → title + progress + CTA.
   ========================================= */
.card-el-module {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.card-el-module:hover {
    border-color: var(--product-advance);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.card-el-module-cover {
    position: relative;
    height: 110px;
    background: rgba(16,185,129,.08);
    overflow: hidden;
}
.card-el-module-cover.is-empty {
    background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.04));
}
.card-el-module-cover img {
    width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
}
.card-el-module-cover-overlay {
    position: absolute; top: 6px; left: 6px; right: 6px;
    display: flex; justify-content: space-between; align-items: flex-start;
    pointer-events: none;
}
.card-el-module-id {
    background: rgba(0,0,0,.55); color: #fff;
    border-radius: 50px; padding: 2px 8px; font-size: 10px; font-weight: 600;
}
.card-el-module-level {
    color: #fff; border-radius: 50px; padding: 2px 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
}

.card-el-module-folder {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    background: #f1f3f5; border-bottom: 1px solid #e9ecef;
    font-size: 11px; font-weight: 600; color: #495057;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.card-el-module-folder i { color: #868e96; font-size: 10px; }
.card-el-module-folder.is-empty {
    background: #fafbfc; color: #adb5bd; font-style: italic; font-weight: 400;
}

.card-el-module-body {
    flex: 1 1 auto; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.card-el-module-title {
    font-size: 13px; font-weight: 600; color: #2c2c2c; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.card-el-module-progress {
    height: 6px; background: #eef0f3; border-radius: 50px; overflow: hidden;
}
.card-el-module-progress-bar {
    height: 100%; background: var(--product-advance); transition: width .25s;
}
.card-el-module-progress-label {
    display: flex; gap: .35rem; align-items: center;
    font-size: 11px; font-weight: 600; color: #6c757d;
}

.card-el-module-footer {
    margin-top: auto; display: flex; justify-content: flex-end;
}

/* Action row — 2 small icons + 1 big "master play" icon.
   Each .card-el-module-act is a circular button styled in the WE ADVANCE
   palette (outline at rest, fills on hover). The large variant is the
   call-to-action affordance for the master module. */
.card-el-module-actions {
    margin-top: auto;
    padding-top: .6rem;
    display: flex; align-items: center; gap: .4rem;
}
.card-el-module-act {
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--product-advance);
    color: var(--product-advance);
    background: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.card-el-module-act:hover {
    background: var(--product-advance);
    color: #fff;
    text-decoration: none;
}
.card-el-module-act--sm {
    width: 32px; height: 32px;
    font-size: .8rem;
}
.card-el-module-act--lg {
    width: 48px; height: 48px;
    font-size: 1.1rem;
    background: var(--product-advance);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16,185,129,.25);
}
.card-el-module-act--lg:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(16,185,129,.4);
}


/* =========================================
   WF PREBUILT TP CARDS — accordion list for module/module_prebuilt_tps.cfm.
   Card layout = a single row (thumb · body · actions · chevron) plus a
   detail drawer revealed by .is-open. Click anywhere on the row toggles
   the drawer; in select mode the click also flips the radio.
   ========================================= */
.wf-prebuilt-list { display: flex; flex-direction: column; gap: .5rem; }

.wf-prebuilt-card {
    display: block;
    padding: .75rem;
    border: 1px solid #f1f3f6;
    border-radius: .75rem;
    background: #fff;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s, background .15s;
    margin: 0;          /* labels default to inline display + margin */
    position: relative;
}
.wf-prebuilt-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border-color: var(--product-visio);
}

.wf-prebuilt-row   { display: flex; align-items: center; gap: .75rem; }
.wf-prebuilt-thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.wf-prebuilt-body  { flex: 1 1 auto; min-width: 0; }
.wf-prebuilt-name  { display: block; font-size: 13px; line-height: 1.2; color: #111; }
.wf-prebuilt-meta  { font-size: 11px; color: #999; margin-top: .15rem; }
.wf-prebuilt-actions { display: flex; gap: .35rem; flex-shrink: 0; }

.wf-prebuilt-chevron {
    color: #B0B0B0;
    font-size: 12px;
    flex-shrink: 0;
    transition: transform .2s;
}
.wf-prebuilt-card.is-open .wf-prebuilt-chevron { transform: rotate(180deg); color: var(--product-visio); }

/* Detail drawer — hidden until .is-open. The session table inside is
   built by the module's accordion JS off oget_prebuilt_sessions. */
.wf-prebuilt-detail {
    display: none;
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px dashed #e6e8ec;
    font-size: 12px;
}
.wf-prebuilt-card.is-open .wf-prebuilt-detail { display: block; }

.wf-prebuilt-sessions { width: 100%; border-collapse: collapse; }
.wf-prebuilt-sessions tr  { border-bottom: 1px solid #f4f5f7; }
.wf-prebuilt-sessions tr:last-child { border-bottom: 0; }
.wf-prebuilt-sessions td  { padding: .35rem .25rem; vertical-align: middle; }
.wf-prebuilt-sessions td.rk { width: 22px; color: #999; text-align: center; }
.wf-prebuilt-sessions td.th { width: 128px; }
.wf-prebuilt-sessions td.du { width: 50px; color: #999; text-align: right; white-space: nowrap; }
.wf-prebuilt-sthumb {
    max-width: 120px;
    height: auto;
    border-radius: 6px;
    display: block;
    background: #eef0f2;
}

/* Apply button (shown when the module is given a target TP) + applied state. */
.wf-prebuilt-apply {
    border: none;
    border-radius: 50%;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--product-visio); color: #fff;
    cursor: pointer; flex-shrink: 0;
    transition: filter .15s;
}
.wf-prebuilt-apply:hover    { filter: brightness(.92); }
.wf-prebuilt-apply:disabled { opacity: .65; cursor: default; }
.wf-prebuilt-card.wf-prebuilt-applied {
    border-color: var(--product-visio);
    background: rgba(6,182,212,.06);
}

/* =========================================
   CARD CORNER — reusable colored top-right tab with centered icon.
   Parent must be position:relative + overflow:hidden (e.g. .rounded-4 shadow card).
   Color via modifier class OR inline `style="--corner-bg:<color>"`.
   Default (no modifier) = muted grey "disabled" look.
   ========================================= */
.card-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    border-bottom-left-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--corner-bg, #E5E7EB);
    color:      var(--corner-fg, #B0B0B0);
    z-index: 1;
}
.card-corner i { font-size: 1rem; line-height: 1; }

/* Product palette (mirrors --product-* tokens) */
.card-corner--visio   { --corner-bg: var(--product-visio);   --corner-fg: #fff; }
.card-corner--vc      { --corner-bg: var(--product-vc);      --corner-fg: #fff; }
.card-corner--advance { --corner-bg: var(--product-advance); --corner-fg: #fff; }
.card-corner--game    { --corner-bg: var(--product-game);    --corner-fg: #fff; }
.card-corner--exam    { --corner-bg: var(--product-exam);    --corner-fg: #fff; }
.card-corner--group   { --corner-bg: var(--product-group);   --corner-fg: #fff; }

/* TP-orientation palette (mirrors .badge-orientation-* in custom_vc.css).
   DB ground truth (lms_tporientation): 1=Général 2=Business 3=Grammaire
   4=Certification 5=Coffee & Chat 6=Vidéo. 4 and 6 are palette TBD. */
.card-corner--orientation-1 { --corner-bg: #10b981; --corner-fg: #fff; } /* Général       */
.card-corner--orientation-2 { --corner-bg: #3b82f6; --corner-fg: #fff; } /* Business      */
.card-corner--orientation-3 { --corner-bg: #8b5cf6; --corner-fg: #fff; } /* Grammaire     */
.card-corner--orientation-4 { --corner-bg: var(--product-exam); --corner-fg: #fff; } /* Certification (Exam Prep yellow) */
.card-corner--orientation-5 { --corner-bg: #FB7185; --corner-fg: #fff; } /* Coffee & Chat (coral) */

/* =========================================
   SIDEBAR & LAYOUT
   ========================================= */

@media (min-width: 992px) {
    .sidebar-wrapper {
        width: var(--sidebar-width);
        height: 100vh;
        background: #fff;
        position: fixed;
        top: 0; left: 0;
        display: flex; flex-direction: column;
        box-shadow: 5px 0 20px rgba(0,0,0,0.02);
        z-index: 1000;
    }
    .main-content {
        margin-left: var(--sidebar-width);
        padding: 40px;
    }
    .mobile-nav { display: none; }
}

@media (max-width: 991px) {
    .mobile-nav { display: flex; }
    .main-content { padding: 20px; padding-top: 90px; }
    .sidebar-wrapper {
        background: #fff;
    }
}

/* Sidebar Visuals */
.sidebar-header {
    background-color: var(--wefit-pink);
    height: 140px;
}
.sidebar-footer {
    background-color: var(--wefit-pink);
    height: 90px;
    display: flex; align-items: center; justify-content: center;
    margin-top: auto;
}

/* Sidebar Links */
.sidebar-nav .nav-link {
    color: var(--text-gray);
    font-weight: 500;
    padding: 12px 30px;
    display: flex; align-items: center;
    transition: 0.2s;
}
.sidebar-nav .nav-link i { width: 30px; font-size: 1.2rem; margin-right: 10px; text-align: center; }
.sidebar-nav .nav-link:hover { color: var(--nav-color, var(--wefit-pink)); background: var(--nav-color-light, var(--wefit-pink-light)); }

/* Active State - uses --nav-color per nav-item for section-specific colors */
.sidebar-nav .nav-item.active .nav-link { color: var(--text-dark); font-weight: 700; }
.sidebar-nav .nav-item.active .nav-link > i:first-child { color: var(--nav-color, var(--wefit-pink)); }
.sidebar-nav .nav-item.active .nav-link .nav-keyword { color: var(--nav-color, var(--wefit-pink)); }
.sidebar-nav .nav-item.active { position: relative; }
.sidebar-nav .nav-item.active::after {
    content: ""; position: absolute; right: 0; top: 14px;
    height: 25px; width: 5px; background: var(--nav-color, var(--wefit-pink));
    border-radius: 5px 0 0 5px;
}
.nav-separator { width: 20px; height: 2px; background: #eee; margin: 8px auto; }

/* Sidebar Dropdown */
.sidebar-nav .nav-link .chevron {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}
.sidebar-nav .nav-item.open .chevron {
    transform: rotate(90deg);
}
.sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.sidebar-nav .nav-item.open .sidebar-submenu {
    max-height: 500px;
}
.sidebar-submenu li a {
    display: block;
    padding: 8px 30px 8px 70px;
    color: var(--text-gray);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: 0.2s;
}
.sidebar-submenu li a:hover {
    color: var(--nav-color, var(--wefit-pink));
    background: var(--nav-color-light, var(--wefit-pink-light));
}
.sidebar-submenu li a.active {
    color: var(--nav-color, var(--wefit-pink));
    font-weight: 600;
}

/* =========================================
   COMMON COMPONENTS
   ========================================= */

/* Cards */
.card-wefit {
    background: #fff;
    border: none;
    border-radius: var(--card-radius);
    box-shadow: 0 8px 24px rgba(149, 157, 165, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease;
}
.card-wefit:hover { transform: translateY(-3px); }

/* Buttons */
.btn-pink {
    background-color: var(--wefit-pink); color: white; border: none;
    border-radius: 50px; padding: 10px 25px; font-weight: 600; font-size: 0.9rem;
}
.btn-pink:hover { background-color: #b0003e; color: white; }

.btn-outline-gray {
    border: 2px solid #E0E0E0; color: var(--text-gray); background: transparent;
    border-radius: 50px; padding: 8px 20px; font-weight: 600; font-size: 0.85rem;
}
.btn-outline-gray:hover { border-color: var(--text-dark); color: var(--text-dark); }

.btn-outline-pink {
    border: 2px solid var(--wefit-pink); color: var(--wefit-pink); background: transparent;
    border-radius: 50px; padding: 8px 20px; font-weight: 600;
}
.btn-outline-pink:hover { background: var(--wefit-pink); color: white; }

/* Search Bar */
.search-bar-container { position: relative; max-width: 700px; width: 100%; }
.search-bar-input {
    width: 100%; border: none; border-radius: 50px; padding: 15px 20px 15px 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); font-size: 0.95rem;
}
.search-bar-icon {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    color: var(--wefit-pink); font-size: 1.1rem;
}

/* Top Actions */
.action-btn {
    width: 42px; height: 42px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dark); border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: 0.2s; padding: 0;
}
.action-btn:hover { color: var(--wefit-pink); transform: translateY(-2px); }
.action-btn img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; }

/* Flag buttons group */
.flag-group {
    display: flex;
    gap: 8px;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    padding: 6px 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.flag-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid transparent; background: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s; padding: 0;
}
.flag-btn img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.flag-btn:hover { border-color: var(--wefit-pink); transform: scale(1.1); }
.flag-btn.active { border-color: var(--wefit-pink); box-shadow: 0 0 0 2px var(--wefit-pink-light); }
.flag-btn { text-decoration: none; }

/* Sidebar language picker — reuses .wf-btn--icon as the shape system, but
   with "ghost" behavior: no fill, no border by default. Pink ring appears
   on hover and stays when the language is active. Color is the WEFIT brand
   pink (via the .wf-btn--pink modifier → --wefit-pink). */
#sidebarFlags .wf-btn        { background:transparent; border-color:transparent; }
#sidebarFlags .wf-btn:hover  { background:transparent; border-color:var(--wf-btn-bg); filter:none; }
#sidebarFlags .wf-btn.active { background:transparent; border-color:var(--wf-btn-bg); }

/* Disabled states for formation access */
.nav-disabled { opacity: 0.35; pointer-events: none; }
.card-disabled { opacity: 0.35; pointer-events: none; }

/* Card flag indicators */
.card-flags { display: flex; gap: 5px; }
.card-flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; opacity: 0.4; transition: 0.2s; }
.card-flag.active { opacity: 1; box-shadow: 0 0 0 2px var(--wefit-pink); }

/* KPI Donuts */
.kpi-donut {
    width: 60px; height: 60px; border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p)*1%), #f0f0f0 0);
    display: flex; align-items: center; justify-content: center;
    position: relative; margin: 0 auto 10px auto;
}
.kpi-donut::after {
    content: attr(data-val);
    position: absolute; width: 85%; height: 85%;
    background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; color: #333;
}
.kpi-label { font-size: 0.75rem; color: var(--text-gray); font-weight: 600; line-height: 1.2; }

/* Hover Lift Effect */
.hover-lift { transition: transform 0.2s; }
.hover-lift:hover { transform: translateY(-5px); }

/* Rounded 4 (Bootstrap 5 doesn't have this by default) */
.rounded-4 { border-radius: 24px !important; }

/* Button Icon */
.btn-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }

/* DONUT CHART (Pure CSS) */
.donut-chart {
    width: 60px; height: 60px; border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p)*1%), #f0f0f0 0);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.donut-chart::after {
    content: ""; position: absolute; width: 80%; height: 80%;
    background: #fff; border-radius: 50%;
}
.donut-chart span {
    position: relative; z-index: 2;
    font-weight: 700; font-size: 0.9rem; color: #333;
}
.donut-chart.small span { font-size: 0.7rem; }

/* Library/Module Row */
.module-row {
    background: #fff; border-radius: 40px; padding: 10px;
    display: flex; align-items: center; margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.module-thumb {
    width: 100px; height: 60px; border-radius: 30px; object-fit: cover;
    position: relative; margin-right: 15px;
}
.level-badge {
    width: 35px; height: 35px; border-radius: 50%; color: white;
    display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem;
    margin-right: 15px;
}
.bg-level-a1 { background-color: #8BC34A; }
.bg-level-a2 { background-color: #4CAF50; }
.bg-level-b1 { background-color: #03A9F4; }
.bg-level-b2 { background-color: #00BCD4; }
.bg-level-c1 { background-color: #FFC107; }

/* Packages */
.package-header img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 4px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.check-icon { color: #009688; background: #E0F2F1; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.cross-icon { color: #9E9E9E; background: #F5F5F5; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; }

/* Table */
.custom-table thead th {
    background: #E9ECEF; color: var(--text-gray); font-size: 0.75rem; text-transform: uppercase; padding: 15px; border: none;
}
.custom-table thead th:first-child { border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
.custom-table thead th:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }
.custom-table tbody td {
    padding: 15px; border-bottom: 1px solid #f5f5f5; vertical-align: middle; color: var(--text-dark); font-size: 0.9rem;
}