._notification_bbb61_1{width:20%;position:fixed;top:5%;right:5%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:Open Sans Light,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}

/* ============================================================
 * MindLift — Material-UI / RTL overrides for the wger React
 * bundle. Gets appended into the bundle's index.css at image-
 * build time so the rules reach the shadow DOM that wraps every
 * React mount point (bootstrap-custom.css from the host page
 * does not penetrate the shadow root).
 *
 * CSS custom properties defined on :root in the host page ARE
 * inherited through the shadow boundary, so --mg-accent etc.
 * work here just fine.
 * ============================================================ */

/* ---- Typography ----------------------------------------------- */
* {
    font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, sans-serif !important;
}
.MuiTypography-root { color: var(--mg-ink-800, #292524); }
.MuiTypography-h1 { font-size: 1.75rem !important; font-weight: 700 !important; line-height: 1.25 !important; }
.MuiTypography-h2 { font-size: 1.4rem  !important; font-weight: 700 !important; line-height: 1.3 !important; }
.MuiTypography-h3 { font-size: 1.2rem  !important; font-weight: 700 !important; line-height: 1.35 !important; }
.MuiTypography-h4 { font-size: 1.1rem  !important; font-weight: 600 !important; }
.MuiTypography-h5 { font-size: 1rem    !important; font-weight: 600 !important; }
.MuiTypography-h6 { font-size: 0.95rem !important; font-weight: 600 !important; }
.MuiTypography-body1 { font-size: 0.95rem !important; line-height: 1.6 !important; }
.MuiTypography-body2 { font-size: 0.88rem !important; line-height: 1.55 !important; color: var(--mg-ink-700, #44403c) !important; }
.MuiTypography-caption { font-size: 0.8rem !important; color: var(--mg-ink-500, #78716c) !important; }
.MuiTypography-subtitle1 { font-size: 0.95rem !important; font-weight: 600 !important; }
.MuiTypography-subtitle2 { font-size: 0.85rem !important; font-weight: 500 !important; color: var(--mg-ink-500, #78716c) !important; }

/* ---- Paper / Card surfaces ----------------------------------- */
.MuiPaper-root {
    background-color: #ffffff !important;
    border: 1px solid var(--mg-ink-100, #f5f5f4) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 1px 3px rgba(28, 25, 23, 0.04) !important;
}
.MuiPaper-root.MuiAppBar-root,
.MuiPaper-root.MuiDialog-paper { border: none !important; }
.MuiCard-root { border-radius: 10px !important; }
.MuiCardHeader-root   { padding: 1rem 1.25rem !important; }
.MuiCardContent-root  { padding: 1rem 1.25rem !important; }
.MuiCardContent-root:last-child { padding-bottom: 1rem !important; }

/* ---- Buttons ------------------------------------------------- */
.MuiButton-root {
    text-transform: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
}
.MuiButton-containedPrimary,
.MuiButton-containedSecondary {
    background-color: var(--mg-accent, #ea580c) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.MuiButton-containedPrimary:hover,
.MuiButton-containedSecondary:hover {
    background-color: var(--mg-accent-hover, #c2410c) !important;
}
.MuiButton-outlinedPrimary,
.MuiButton-outlinedSecondary {
    border-color: var(--mg-accent, #ea580c) !important;
    color: var(--mg-accent, #ea580c) !important;
}
.MuiButton-textPrimary { color: var(--mg-accent, #ea580c) !important; }

/* ---- RTL: flip button icons & table cells -------------------- */
[dir="rtl"] .MuiButton-startIcon { margin-left: 8px !important; margin-right: -4px !important; }
[dir="rtl"] .MuiButton-endIcon   { margin-right: 8px !important; margin-left: -4px !important; }
[dir="rtl"] .MuiIconButton-edgeStart { margin-left: -12px !important; margin-right: 0 !important; }
[dir="rtl"] .MuiIconButton-edgeEnd   { margin-right: -12px !important; margin-left: 0 !important; }
[dir="rtl"] .MuiTableCell-root  { text-align: right !important; }
[dir="rtl"] .MuiTableCell-alignRight { text-align: left !important; }
[dir="rtl"] .MuiListItemIcon-root { margin-right: 0 !important; margin-left: 16px !important; min-width: 40px !important; }
[dir="rtl"] .MuiListItemSecondaryAction-root { left: 16px !important; right: auto !important; }

/* ---- Chips --------------------------------------------------- */
.MuiChip-root {
    background-color: var(--mg-ink-100, #f5f5f4) !important;
    color: var(--mg-ink-800, #292524) !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
}
.MuiChip-colorPrimary {
    background-color: var(--mg-accent-soft, #fff7ed) !important;
    color: var(--mg-accent-hover, #c2410c) !important;
}
[dir="rtl"] .MuiChip-deleteIcon { margin-left: 5px !important; margin-right: -6px !important; }
[dir="rtl"] .MuiChip-icon       { margin-right: 5px !important; margin-left: -6px !important; }

/* ---- Form inputs -------------------------------------------- */
.MuiOutlinedInput-root { border-radius: 6px !important; background: #fff !important; }
.MuiOutlinedInput-notchedOutline { border-color: var(--mg-ink-300, #d6d3d1) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: var(--mg-accent, #ea580c) !important;
    border-width: 1.5px !important;
}

/* Label / adornment overlap fix: force the label to stay shrunk at
   the top when a start adornment is present, so the calendar / clock
   icon doesn't cover 'التاريخ' etc. Works in both LTR and RTL. */
.MuiFormControl-root:has(.MuiInputAdornment-positionStart) .MuiInputLabel-root {
    transform: translate(14px, -9px) scale(0.75) !important;
    background: #fff !important;
    padding: 0 4px !important;
}
[dir="rtl"] .MuiFormControl-root:has(.MuiInputAdornment-positionStart) .MuiInputLabel-root {
    transform: translate(-14px, -9px) scale(0.75) !important;
    transform-origin: top right !important;
}

/* Standard-variant (underlined) TextField: same — labels at the
   top edge, not on the baseline. */
.MuiFormControl-root:has(.MuiInput-underline .MuiInputAdornment-positionStart)
    .MuiInputLabel-root.MuiInputLabel-standard {
    transform: translate(0, -1.5px) scale(0.75) !important;
    transform-origin: top left !important;
}
[dir="rtl"] .MuiFormControl-root:has(.MuiInput-underline .MuiInputAdornment-positionStart)
    .MuiInputLabel-root.MuiInputLabel-standard {
    transform-origin: top right !important;
}

/* RTL: labels inside the outlined field need their origin flipped
   to the right edge so "shrink" animates towards the right corner. */
[dir="rtl"] .MuiInputLabel-outlined {
    transform-origin: top right !important;
    right: 14px !important;
    left: auto !important;
}
[dir="rtl"] .MuiOutlinedInput-notchedOutline legend {
    text-align: right !important;
}

/* End / start adornment position in RTL: the calendar icon should
   sit on the right (at the start of the input) when the page is
   RTL. MUI positions it using padding-left/right and flex order —
   force the adornment containers to swap sides. */
[dir="rtl"] .MuiInputAdornment-positionStart { margin-right: 0 !important; margin-left: 8px !important; }
[dir="rtl"] .MuiInputAdornment-positionEnd   { margin-left: 0 !important; margin-right: 8px !important; }

/* ---- Tables -------------------------------------------------- */
.MuiTable-root { font-size: 0.92rem !important; }
.MuiTableCell-head {
    font-weight: 600 !important;
    color: var(--mg-ink-700, #44403c) !important;
    background: var(--mg-bg, #fafaf9) !important;
}

/* ---- Dialogs ------------------------------------------------- */
.MuiDialog-paper { border-radius: 14px !important; }
.MuiDialogTitle-root { font-weight: 700 !important; font-size: 1.15rem !important; }

/* ---- Avatars (exercise thumbnails) -------------------------- */
.MuiAvatar-root {
    background-color: var(--mg-ink-100, #f5f5f4) !important;
    color: var(--mg-ink-500, #78716c) !important;
    font-weight: 600 !important;
}

/* ---- RTL: drawers / menus / selects ------------------------- */
[dir="rtl"] .MuiDrawer-paperAnchorLeft  { right: auto !important; left: 0 !important; }
[dir="rtl"] .MuiDrawer-paperAnchorRight { left: auto !important; right: 0 !important; }
[dir="rtl"] .MuiSelect-icon { left: 7px !important; right: auto !important; }
[dir="rtl"] .MuiAutocomplete-endAdornment { left: 9px !important; right: auto !important; }
[dir="rtl"] .MuiAutocomplete-popupIndicator,
[dir="rtl"] .MuiAutocomplete-clearIndicator { transform: none !important; }

/* ---- Tabs + Tab indicators ---------------------------------- */
[dir="rtl"] .MuiTabs-flexContainer { direction: rtl; }
.MuiTab-root {
    text-transform: none !important;
    font-weight: 600 !important;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
}

/* ---- Stacks + exercise-row layout --------------------------- */
/* The setConfigData.textRepr line should feel secondary to the
   exercise name above it, and stay bidi-plain so numbers and
   Arabic labels keep their reading order. */
.MuiStack-root > div { unicode-bidi: plaintext; }
.MuiStack-root > .MuiTypography-h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--mg-ink-900, #1c1917) !important;
    margin-bottom: 0.2rem !important;
}

/* Grid container for exercise rows: keep the content column from
   stretching edge-to-edge and leaving the stats text stranded. */
.MuiCardContent-root .MuiGrid-container { align-items: center !important; }

/* ---- FAB ----------------------------------------------------- */
[dir="rtl"] .MuiFab-root { left: 24px !important; right: auto !important; }

/* ---- Alert / info boxes ------------------------------------- */
.MuiAlert-root {
    border-radius: 10px !important;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
}
[dir="rtl"] .MuiAlert-icon { margin-left: 12px !important; margin-right: 0 !important; padding: 7px 0 !important; }
[dir="rtl"] .MuiAlert-message { padding: 8px 0 !important; }
[dir="rtl"] .MuiAlert-action  { margin-right: auto !important; margin-left: -8px !important; padding-right: 16px !important; padding-left: 0 !important; }