/* ============================================================
   AbsWizard — reusable multi-step wizard frame
   (stepper + content slot + footer with counter and nav buttons).
   Extracted from the progression-plan creation wizard. Design tokens
   are scoped to the frame so it is self-contained for any consumer;
   step content rendered inside the frame inherits them.
   ============================================================ */

.abs-wizard {
    /* colors */
    --color-dark: #0D1740; --color-navy: #252E53;
    --color-primary-900: #002C75; --color-primary-800: #003892; --color-primary-700: #003D7D;
    --color-primary-600: #0044C2; --color-primary-500: #0535CE; --color-primary-400: #3a6fd8;
    --color-gray-50: #F8F9FB; --color-gray-100: #F2F4F6; --color-gray-200: #EFF1F4;
    --color-gray-300: #DFE3E8; --color-gray-350: #C9CCD1; --color-gray-400: #E0E0E0;
    --color-gray-500: #565D79; --color-gray-600: #4F4F4F; --color-gray-700: #3D3D3D; --color-gray-800: #525252;
    --color-white: #FFFFFF; --color-success: #37B400; --color-warning: #D49F00; --color-error: #BB4841;
    --fg-primary: var(--color-dark); --fg-secondary: var(--color-gray-500); --fg-tertiary: var(--color-gray-700);
    --fg-action: var(--color-primary-600);
    --bg-page: var(--color-gray-50); --bg-topbar: var(--color-white);
    --border-default: rgba(0, 61, 125, 0.173); --border-divider: var(--color-gray-300); --border-topbar: #F5F5F5;
    --shadow-card: 0px 2px 10px 0px #EDF1FB;
    --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;
    /* The prototype's --font-display token resolves to 'M PLUS Rounded 1c' (a Google Font loaded
       by the prototype). The app bundles the same typeface as 'Rounded Mplus 1c Bold' (woff2,
       self-hosted). Body text stays Gilroy. */
    --font-display: 'Rounded Mplus 1c Bold', sans-serif;
    --font-body: 'Gilroy', sans-serif;
    --font-size-xs: 12px; --font-size-sm: 13px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 21px;
    --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
    --line-height-tight: 1.0; --line-height-normal: 1.42; --line-height-relaxed: 1.5;

    /* card — capped to the available height so the footer stays visible; flex column lets the
       content area scroll inside in locked mode. Shorter than the cap when content is short. */
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 26px 30px 22px;
    max-height: 100%;
    display: flex;
    flex-direction: column;

    /* The body text is weight 500 (medium); without it text defaults to 400 and reads lighter.
       Antialiasing matches the prototype's `body` smoothing. */
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-md);
    color: var(--fg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Box-sizing reset scoped to the frame so widths/paddings size like the prototype — e.g.
   max-width:900px is the full card width, not the content box (padding would make it ~962px). */
.abs-wizard,
.abs-wizard *,
.abs-wizard *::before,
.abs-wizard *::after {
    box-sizing: border-box;
}

/* Neutralize the app's global `i { line-height: 1.5rem }` (Abena-main.css), which inflates icon
   line-boxes inside the frame. The prototype leaves icons at normal line-height. */
.abs-wizard i {
    line-height: normal;
}

/* Form steps grow the frame to their content (the container scrolls) instead of scrolling inside
   a fixed-height frame. Same specificity as the base rule, declared after it so it wins. */
.abs-wizard--grow {
    max-height: none;
}

/* stepper — circles with labels BELOW, fixed-width steps, connectors between */
.aw-stepper { display: flex; align-items: flex-start; margin: 2px 0 26px; }
.aw-step { flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: default; }
.aw-step-circle {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-md);
    background: #fff; border: 2px solid var(--color-gray-300); color: var(--color-gray-500);
    transition: background .2s, border-color .2s, color .2s;
}
.aw-step-circle i { font-size: 18px; }
.aw-step-label {
    font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
    color: var(--color-gray-500); text-align: center; line-height: 1.25; transition: color .2s;
}
.aw-step.is-active .aw-step-circle { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }
.aw-step.is-active .aw-step-label { color: var(--color-primary-600); font-weight: var(--font-weight-bold); }
.aw-step.is-done .aw-step-circle { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.aw-step.is-done .aw-step-label { color: rgb(46, 139, 0); }
.aw-conn { flex: 1 1 auto; height: 3px; border-radius: 2px; background: var(--color-gray-300); margin-top: 17px; transition: background .2s; }
.aw-conn.is-done { background: var(--color-success); }

/* footer nav */
.aw-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-divider); }
.aw-count { font-family: var(--font-body); font-size: var(--font-size-md); color: var(--color-gray-500); }
.aw-actions { display: flex; gap: 10px; }
.aw-btn {
    height: 42px;
    /* the global `button { max-height: 3rem }` (Abena-main.css) scales with the app's responsive
       root font-size and would cap this fixed-px button below 42px — lift it. */
    max-height: none;
    padding: 0 20px; border-radius: var(--radius-lg);
    font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-md);
    cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    transition: background .14s, border-color .14s, opacity .14s;
}
.aw-btn i { font-size: 16px; }
.aw-btn-primary { background: var(--color-primary-600); color: #fff; border: 1px solid var(--color-primary-600); }
.aw-btn-primary:hover { background: var(--color-primary-500); border-color: var(--color-primary-500); }
.aw-btn-ghost { background: #fff; color: var(--color-dark); border: 1px solid var(--color-gray-300); }
.aw-btn-ghost:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); }
/* Finish button (last-step confirm action): green to distinguish it from the blue "Suivant". */
/* --color-success is #37B400 (from the prototype's token set). */
.aw-btn-finish { background: var(--color-success); color: #fff; border: 1px solid var(--color-success); }
.aw-btn-finish:hover { background: #2ea300; border-color: #2ea300; }
.aw-btn:disabled { opacity: 0.45; cursor: not-allowed; }