/*
 * 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;
}

/* 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;
}