/*
 * MindLift — custom theme on top of Bootstrap 5
 *
 * Arabization follows the rtl-first methodology
 * (https://github.com/imohad/rtl-first):
 *   - IBM Plex Sans Arabic is the primary font for all languages — it renders
 *     Latin characters cleanly, so we ship one coherent typographic system
 *     instead of switching fonts by locale.
 *   - [dir="rtl"] scoping for RTL-specific layout tweaks, kept as a patch
 *     layer rather than mutating upstream templates.
 *   - Logical properties (margin-inline-start / -end, padding-inline-*)
 *     so layout mirrors correctly without per-direction overrides.
 *
 * Licensed under AGPL-3.0 (inherited from upstream wger).
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* IBM Plex Sans Arabic first — it ships high-quality Latin glyphs too,
       so one font stack covers both languages. Inter is a secondary fallback. */
    --mg-font-sans: 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mg-font-ar: var(--mg-font-sans);

    /* Palette — warm stone neutrals + activity-oriented orange.
       The cool blue used before read as "bank app", not "gym app".
       Orange-600 is the gym/energy register (think Strava) without
       being aggressive; paired with warm stone instead of pure black
       so the UI never feels clinical. */
    --mg-ink-900: #1c1917;         /* stone-950 — warm near-black */
    --mg-ink-800: #292524;         /* stone-900 */
    --mg-ink-700: #44403c;         /* stone-700 */
    --mg-ink-500: #78716c;         /* stone-500 */
    --mg-ink-300: #d6d3d1;         /* stone-300 */
    --mg-ink-100: #f5f5f4;         /* stone-100 */
    --mg-bg: #fafaf9;              /* stone-50 — warm off-white */
    --mg-surface: #ffffff;
    --mg-accent: #ea580c;          /* orange-600 — the energy register */
    --mg-accent-hover: #c2410c;    /* orange-700 */
    --mg-accent-soft: #fff7ed;     /* orange-50 — for tinted surfaces */
    --mg-success: #16a34a;
    --mg-danger: #dc2626;
    --mg-warning: #d97706;

    --mg-radius: 10px;
    --mg-radius-sm: 6px;
    --mg-radius-lg: 14px;
    --mg-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05), 0 1px 3px rgba(28, 25, 23, 0.04);
    --mg-shadow: 0 4px 10px -2px rgba(28, 25, 23, 0.06), 0 2px 5px -1px rgba(28, 25, 23, 0.04);
    --mg-shadow-lg: 0 12px 32px -8px rgba(28, 25, 23, 0.15), 0 4px 12px -2px rgba(28, 25, 23, 0.05);

    /* Bootstrap variable overrides */
    --bs-body-font-family: var(--mg-font-sans);
    --bs-body-color: var(--mg-ink-700);
    --bs-body-bg: var(--mg-bg);
    --bs-border-radius: var(--mg-radius);
    --bs-border-radius-sm: var(--mg-radius-sm);
    --bs-border-radius-lg: var(--mg-radius-lg);
    --bs-primary: var(--mg-accent);
    --bs-primary-rgb: 234, 88, 12;
    --bs-link-color: var(--mg-accent);
    --bs-link-hover-color: var(--mg-accent-hover);
}

/* ── Container width — give desktop screens more breathing room ───────── */
/* Upstream Bootstrap caps .container at 1320px even on ultra-wide displays,
   which made the Home dashboard feel cramped on desktop. Widen on large
   screens only — mobile and tablet stay at the default. */
@media (min-width: 1200px) {
    .container, .container-xl, .container-lg {
        max-width: 1480px;
    }
}

/* IBM Plex Sans Arabic is already primary; no override needed for [lang="ar"] */

/* Force IBM Plex Sans Arabic across the whole app, including React
   subtrees that ship their own inline font-family. Using * + !important
   is blunt, but without it the React bundle's MUI theme wins the cascade
   and the Arabic font only shows on Django-rendered pages. */
*,
*::before,
*::after,
body,
html,
button,
input,
select,
textarea,
[class*="react"],
#react-page-no-shadow-dom,
#react-page-no-shadow-dom * {
    font-family: var(--mg-font-sans) !important;
}

/* Hide upstream wger's "Contribute / Submit exercise / Add translation" UI.
   The user maintains their own fork; submitting to the public wger.de catalog
   is out of scope. Targets the React components that render those buttons. */
button[aria-label*="ubmit" i],
button[aria-label*="ontribut" i],
a[href*="/exercise/submit"],
a[href*="/exercise/add"],
[data-testid*="submit-exercise"],
[data-testid*="contribute"] {
    display: none !important;
}

/* Keep icon fonts intact — they rely on their specific font-family */
.fa, .fas, .far, .fab, .fal, [class^="icon-"], [class*=" icon-"],
.material-icons, .material-symbols-outlined {
    font-family: revert !important;
}

body {
    color: var(--mg-ink-700);
    background: var(--mg-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--bs-body-font-family);
    font-weight: 600;
    color: var(--mg-ink-900);
    letter-spacing: -0.01em;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.25rem; }
.text-muted { color: var(--mg-ink-500) !important; }

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar.bg-primary {
    background: var(--mg-ink-900) !important;
    box-shadow: var(--mg-shadow-sm);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--mg-accent);
}
.navbar.bg-primary .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.navbar.bg-primary .navbar-brand .mg-logo {
    width: 26px;
    height: 26px;
    color: var(--mg-accent);
}
.navbar.bg-primary .navbar-brand .mg-wordmark {
    letter-spacing: -0.015em;
    font-size: 1.15rem;
}
.navbar .nav-link {
    font-weight: 500;
    transition: opacity 0.15s;
}
.navbar .nav-link:hover { opacity: 0.85; }

.dropdown-menu {
    border: 1px solid var(--mg-ink-100);
    border-radius: var(--mg-radius);
    box-shadow: var(--mg-shadow-lg);
    padding: 0.5rem;
}
.dropdown-item {
    border-radius: var(--mg-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--mg-ink-100); color: var(--mg-ink-900); }
.dropdown-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mg-ink-500);
    padding: 0.5rem 0.75rem 0.25rem;
}

/* ── Cards / panels ─────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--mg-ink-100);
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--mg-shadow-sm);
    background: var(--mg-surface);
    transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover { box-shadow: var(--mg-shadow); }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--mg-ink-100);
    font-weight: 600;
    padding: 1rem 1.25rem;
}
.card-body { padding: 1.25rem; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--mg-radius);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.15s;
}
.btn-primary {
    background: var(--mg-accent);
    border-color: var(--mg-accent);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--mg-accent-hover);
    border-color: var(--mg-accent-hover);
    box-shadow: 0 4px 10px -2px rgba(234, 88, 12, 0.35);
    color: #fff;
}
.btn-outline-primary {
    color: var(--mg-accent);
    border-color: var(--mg-accent);
}
.btn-outline-primary:hover {
    background: var(--mg-accent);
    border-color: var(--mg-accent);
    color: #fff;
}
.btn-light {
    background: var(--mg-surface);
    border: 1px solid var(--mg-ink-100);
    color: var(--mg-ink-700);
}
.btn-light:hover {
    background: var(--mg-ink-100);
    border-color: var(--mg-ink-300);
}
.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.8125rem; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    border: 1px solid var(--mg-ink-100);
    border-radius: var(--mg-radius);
    background: var(--mg-surface);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--mg-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}
.form-label {
    font-weight: 500;
    color: var(--mg-ink-700);
    margin-bottom: 0.35rem;
    font-size: 0.9375rem;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table {
    border-color: var(--mg-ink-100);
    color: var(--mg-ink-700);
}
.table > :not(caption) > * > * { padding: 0.75rem 1rem; }
.table thead {
    background: var(--mg-ink-100);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mg-ink-500);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
#main-footer {
    background: var(--mg-surface) !important;
    border-top: 1px solid var(--mg-ink-100);
    margin-top: 3rem;
    color: var(--mg-ink-500);
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
    border: 1px solid transparent;
    border-radius: var(--mg-radius);
    padding: 0.875rem 1rem;
}

/* ── Modals ─────────────────────────────────────────────────────────────── */
.modal-content {
    border: none;
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--mg-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--mg-ink-100);
    padding: 1.25rem;
}

/* ── Misc polish ────────────────────────────────────────────────────────── */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border-color: var(--mg-ink-100); opacity: 1; }

/* ── RTL layer (rtl-first methodology) ─────────────────────────────────── */
/* Kept as an override layer — never mutates upstream selectors, scoped to
   [dir="rtl"] so LTR rendering is untouched. Prefer logical properties in
   new rules; these selectors only exist to mirror Bootstrap's direction-aware
   utilities that still use physical properties in v5. */

html[lang="ar"], html[dir="rtl"] {
    text-align: right;
}

html[dir="rtl"] .dropdown-menu { text-align: right; }

/* In RTL, the user dropdown sits in the LEFT corner of the header.
   Bootstrap's .dropdown-menu-end puts the menu at the toggle's end
   edge (= left in RTL), which pushes its content off-screen. Flip it:
   anchor the menu at the toggle's LEFT edge and let it extend right
   toward the center of the viewport. */
html[dir="rtl"] .dropdown-menu-end,
html[dir="rtl"] .dropdown-menu-lg-end {
    --bs-position: start;
    right: auto !important;
    left: 0 !important;
}
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .text-md-end { text-align: left !important; }

/* Numerals stay LTR inside Arabic text so times/weights/reps read naturally */
html[dir="rtl"] .num, html[dir="rtl"] input[type="number"] {
    direction: ltr;
    unicode-bidi: embed;
}

/* Login + auth pages — simpler, centered card */
body.login-page {
    background: linear-gradient(180deg, var(--mg-bg) 0%, var(--mg-ink-100) 100%);
    min-height: 100vh;
}

/* Force the login/registration/password-reset pages into a narrow centered
   card. Upstream base.html puts them in an 8/4 split with a noisy sidebar;
   we want a single focused form. Scoped to pages whose body opens with
   <h1/h2>"Login|Register|Reset password" in Arabic or English. */
body[class*="login"] #main .row,
body[class*="registration"] #main .row,
#content form[action*="/login"],
#content form[action*="/registration"],
#content form[action*="/password_reset"] {
    max-width: 420px;
    margin-inline: auto;
}
/* Make auth forms look like a card */
#content form[action*="/login"],
#content form[action*="/registration"],
#content form[action*="/password_reset"] {
    background: var(--mg-surface);
    border: 1px solid var(--mg-ink-100);
    border-radius: var(--mg-radius-lg);
    padding: 1.75rem;
    box-shadow: var(--mg-shadow-sm);
}
/* Hide the noisy "Don't have an account? / Forgot password?" sidebar on
   login — those links already live below the submit button in upstream's
   sidebar HTML. We turn them into compact links under the form. */
#main-sidebar {
    font-size: 0.875rem;
}
#main-sidebar h4,
#main-sidebar p { margin-bottom: 0.35rem; }
#main-sidebar a { color: var(--mg-accent); }

/* ============================================================
 * React / Material-UI overrides — the programs, routines, and
 * exercises pages render through a prebuilt bundle we can't
 * patch, so we normalize typography + surfaces from the outside.
 * ============================================================ */

/* Kill the hard black + flash-of-serif that Material's defaults ship with:
   inherit MindLift's font, colors, and leading everywhere inside the
   React mount points. */
#exercises, #routine, #routine-detail, #routine-edit, #weight-overview,
#measurements, [id^="react-"], .MuiBox-root, .MuiPaper-root,
.MuiTypography-root, .MuiButtonBase-root, .MuiInputBase-root {
    font-family: var(--mg-font-sans) !important;
    color: var(--mg-ink-800);
}

/* Normalize Material headings to the Bootstrap/Landing scale so the
   React pages stop shouting with 32 px everywhere. */
.MuiTypography-h1 { font-size: 1.75rem !important; font-weight: 700 !important; line-height: 1.25; letter-spacing: 0; }
.MuiTypography-h2 { font-size: 1.4rem !important;  font-weight: 700 !important; line-height: 1.3; }
.MuiTypography-h3 { font-size: 1.2rem !important;  font-weight: 700 !important; line-height: 1.35; }
.MuiTypography-h4 { font-size: 1.1rem !important;  font-weight: 600 !important; line-height: 1.4; }
.MuiTypography-h5 { font-size: 1rem !important;    font-weight: 600 !important; line-height: 1.45; }
.MuiTypography-h6 { font-size: 0.95rem !important; font-weight: 600 !important; line-height: 1.5; }
.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); }
.MuiTypography-body1 { font-size: 0.95rem !important; line-height: 1.6; }
.MuiTypography-body2 { font-size: 0.88rem !important; line-height: 1.55; color: var(--mg-ink-700); }
.MuiTypography-caption { font-size: 0.8rem !important; color: var(--mg-ink-500); }

/* Card/Paper surfaces — match the warm stone palette instead of the
   bluish Material defaults, so the React pages sit in the same world
   as the Django pages. */
.MuiPaper-root {
    background-color: var(--mg-surface) !important;
    border: 1px solid var(--mg-ink-100);
    border-radius: var(--mg-radius) !important;
    box-shadow: var(--mg-shadow-sm) !important;
}
.MuiPaper-root.MuiAppBar-root,
.MuiPaper-root.MuiDialog-paper { border: none; }

.MuiCard-root {
    border-radius: var(--mg-radius) !important;
    border: 1px solid var(--mg-ink-100) !important;
    box-shadow: var(--mg-shadow-sm) !important;
}

.MuiCardHeader-root { padding: 1rem 1.25rem !important; }
.MuiCardContent-root { padding: 1rem 1.25rem !important; }
.MuiCardContent-root:last-child { padding-bottom: 1rem !important; }

/* Buttons — align the React primary button with our accent so users
   don't see two different "primary" colors across the app. */
.MuiButton-root {
    text-transform: none !important;
    border-radius: var(--mg-radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
.MuiButton-containedPrimary,
.MuiButton-containedSecondary {
    background-color: var(--mg-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.MuiButton-containedPrimary:hover,
.MuiButton-containedSecondary:hover {
    background-color: var(--mg-accent-hover) !important;
    box-shadow: var(--mg-shadow-sm) !important;
}
.MuiButton-outlined {
    border-color: var(--mg-ink-300) !important;
    color: var(--mg-ink-800) !important;
}
.MuiButton-text { color: var(--mg-accent) !important; }

/* Inputs — consistent height + radius, no Material underline. */
.MuiOutlinedInput-root {
    border-radius: var(--mg-radius-sm) !important;
    background: var(--mg-surface) !important;
}
.MuiOutlinedInput-notchedOutline { border-color: var(--mg-ink-300) !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--mg-ink-500) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: var(--mg-accent) !important;
    border-width: 1.5px !important;
}

/* Chips (used for muscles, categories) — softer surface. */
.MuiChip-root {
    background-color: var(--mg-ink-100) !important;
    color: var(--mg-ink-800) !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
}
.MuiChip-colorPrimary { background-color: var(--mg-accent-soft) !important; color: var(--mg-accent-hover) !important; }

/* Tables — align zebra and spacing with our density. */
.MuiTable-root { font-size: 0.92rem !important; }
.MuiTableCell-head { font-weight: 600 !important; color: var(--mg-ink-700) !important; background: var(--mg-bg) !important; }
.MuiTableCell-body { color: var(--mg-ink-800) !important; }

/* Dialogs/modals — warmer surface, rounded corners. */
.MuiDialog-paper { border-radius: var(--mg-radius-lg) !important; }
.MuiDialogTitle-root { font-weight: 700 !important; font-size: 1.15rem !important; }

/* Images inside exercise cards: don't let missing thumbnails collapse
   the layout; reserve aspect ratio so the grid stays stable. */
.MuiCard-root img,
.MuiCardMedia-root {
    background-color: var(--mg-ink-100);
    object-fit: cover;
}

/* RTL: flip the start/end margins Material picks via MUI's flexbox, and
   keep icon buttons (gear, edit) aligned with their labels. */
[dir="rtl"] .MuiButton-startIcon { margin-inline: -4px 8px !important; }
[dir="rtl"] .MuiButton-endIcon { margin-inline: 8px -4px !important; }