/* ═══════════════════════════════════════════════════════════════
   Femme Elegance — Global Brand Theme
   TO MAKE WOMEN FEEL SPECIAL
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Tajawal:wght@300;400;500;700;800&display=swap');

:root {
    /* ── Primary: Backgrounds ── */
    --fe-cream: #FDFBF7;
    --fe-cream-alt: #FFFDD0;
    --fe-cream-warm: #FAF7F2;
    --fe-white: #FFFFFF;

    /* ── Secondary: Brand & Typography ── */
    --fe-gold: #C5A059;
    --fe-gold-light: #D4AF37;
    --fe-gold-muted: rgba(197, 160, 89, 0.15);
    --fe-charcoal: #1A1A1A;
    --fe-charcoal-muted: #4A4A4A;

    /* ── Brand: Olive Green (identity) ── */
    --fe-olive: #4A5D23;
    --fe-olive-dark: #3A4A1B;
    --fe-olive-light: #5E7A2E;
    --fe-olive-muted: rgba(74, 93, 35, 0.08);

    /* ── Accent: Deep Tones (emerald names repointed to olive so all
          existing var(--fe-emerald*) usages adopt the new identity) ── */
    --fe-emerald: var(--fe-olive);
    --fe-emerald-alt: var(--fe-olive-dark);
    --fe-emerald-light: var(--fe-olive-light);
    --fe-emerald-muted: var(--fe-olive-muted);

    /* ── Functional ── */
    --fe-success: #2E7D32;   /* clear green, distinct from olive brand */
    --fe-warning: #F4B740;   /* real yellow/amber (caution) */
    --fe-danger: #DC3545;    /* conventional red (reject/close/delete) */
    --fe-info: #1B4965;

    /* ── Contrast helpers (enforce readable text) ── */
    --fe-on-primary: #FFFFFF;   /* white text on olive/green surfaces */
    --fe-on-warning: #1A1A1A;   /* dark text on yellow */
    --fe-on-surface: #1A1A1A;   /* dark text on white/cream */

    /* ── Surfaces & Borders ── */
    --fe-border: rgba(26, 26, 26, 0.08);
    --fe-border-gold: rgba(197, 160, 89, 0.35);
    --fe-shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.04);
    --fe-shadow: 0 4px 16px rgba(26, 26, 26, 0.06);
    --fe-shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.08);
    --fe-shadow-hover: 0 8px 24px rgba(26, 26, 26, 0.1);

    /* ── Gradients ── */
    --fe-gradient-gold: linear-gradient(135deg, var(--fe-gold) 0%, var(--fe-gold-light) 100%);
    --fe-gradient-emerald: linear-gradient(135deg, var(--fe-emerald) 0%, var(--fe-emerald-alt) 100%);
    --fe-gradient-cream: linear-gradient(180deg, var(--fe-cream) 0%, var(--fe-cream-warm) 100%);

    /* ── Typography ── */
    --fe-font-serif-en: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --fe-font-serif-ar: 'Cormorant Garamond', 'Amiri', serif;
    --fe-font-sans-en: 'Tajawal', system-ui, sans-serif;
    --fe-font-sans-ar: 'Cairo', 'Tajawal', sans-serif;

    /* ── Transitions ── */
    --fe-transition: all 0.3s ease-in-out;

    /* ── Dashboard aliases (backward compat) ──
          Primary = olive identity. Gold kept as a dedicated accent. ── */
    --primary-color: var(--fe-olive);
    --primary-dark: var(--fe-olive-dark);
    --accent-color: var(--fe-gold);
    --accent: var(--fe-gold);
    --on-primary: var(--fe-on-primary);
    --secondary-color: var(--fe-charcoal-muted);
    --success-color: var(--fe-success);
    --warning-color: var(--fe-warning);
    --danger-color: var(--fe-danger);
    --info-color: var(--fe-info);
    --sidebar-bg: var(--fe-olive);
    --sidebar-text: #FDFBF7;
    --sidebar-hover: var(--fe-olive-light);
    --sidebar-active: rgba(197, 160, 89, 0.18);
    --header-bg: var(--fe-white);
    --card-bg: var(--fe-white);
    --border-color: var(--fe-border);
    --primary: var(--fe-olive);
    --secondary: var(--fe-gold);
    --success: var(--fe-success);
    --warning: var(--fe-warning);
    --danger: var(--fe-danger);
    --info: var(--fe-info);
    --light: var(--fe-cream);
    --dark: var(--fe-charcoal);
    --darker: var(--fe-olive);
    --border: var(--fe-border);
    --sidebar: var(--fe-olive);
    --gradient: var(--fe-gradient-emerald);
    --gradient-primary: var(--fe-gradient-emerald);
    --shadow: var(--fe-shadow);
    --shadow-lg: var(--fe-shadow-lg);
    --shadow-xl: 0 20px 40px rgba(26, 26, 26, 0.1);

    /* ── Shop aliases ── */
    --stone-50: var(--fe-cream);
    --stone-100: var(--fe-cream-warm);
    --stone-200: #EDE8DF;
    --stone-300: #DDD5C8;
    --stone-400: #A89F8F;
    --stone-500: #78716C;
    --stone-600: var(--fe-charcoal-muted);
    --stone-700: var(--fe-charcoal);
    --zinc-900: var(--fe-charcoal);
    --cream: var(--fe-cream);
    --sage: var(--fe-emerald);
    --shop-radius: 4px;
    --shop-transition: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Base Typography ── */
html[dir="ltr"] body {
    font-family: var(--fe-font-sans-en);
}
html[dir="rtl"] body {
    font-family: var(--fe-font-sans-ar);
}

html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3,
html[dir="ltr"] h4, html[dir="ltr"] h5, html[dir="ltr"] h6,
html[dir="ltr"] .fe-serif, html[dir="ltr"] .shop-serif,
html[dir="ltr"] .serif, html[dir="ltr"] .dashboard-header h1,
html[dir="ltr"] .dashboard-header h2 {
    font-family: var(--fe-font-serif-en);
    color: var(--fe-charcoal);
    letter-spacing: 0.02em;
}

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .fe-serif, html[dir="rtl"] .shop-serif,
html[dir="rtl"] .serif, html[dir="rtl"] .dashboard-header h1,
html[dir="rtl"] .dashboard-header h2 {
    font-family: var(--fe-font-serif-ar);
    color: var(--fe-charcoal);
    letter-spacing: 0.01em;
}

body {
    background-color: var(--fe-cream);
    color: var(--fe-charcoal);
    -webkit-font-smoothing: antialiased;
}

/* ── RTL guard: Arabic is a connected/cursive script, so letter-spacing
      pulls joined glyphs apart and makes buttons/nav look broken. Force it
      off for interactive text in RTL. Also neutralize uppercase (a no-op on
      Arabic that only inflates Latin width in mixed labels). ── */
html[dir="rtl"] .btn,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .hero-cta,
html[dir="rtl"] .hero-secondary,
html[dir="rtl"] .band-cta,
html[dir="rtl"] .section-link,
html[dir="rtl"] .lang-btn,
html[dir="rtl"] .shop-btn,
html[dir="rtl"] .shop-btn-outline {
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--fe-cream-warm); }
::-webkit-scrollbar-thumb { background: var(--fe-gold-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--fe-gold); }

/* ── Bootstrap Overrides ── */
/* Primary = olive brand, white text. */
.btn-primary {
    background: var(--fe-olive) !important;
    border-color: var(--fe-olive) !important;
    color: var(--fe-on-primary) !important;
    transition: var(--fe-transition);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--fe-olive-dark) !important;
    border-color: var(--fe-olive-dark) !important;
    color: var(--fe-on-primary) !important;
    box-shadow: 0 4px 12px rgba(74, 93, 35, 0.25);
}

.btn-outline-primary {
    color: var(--fe-olive) !important;
    border-color: var(--fe-olive) !important;
    transition: var(--fe-transition);
}
.btn-outline-primary:hover {
    background: var(--fe-olive) !important;
    border-color: var(--fe-olive) !important;
    color: var(--fe-on-primary) !important;
}

/* Gold accent button — for hero/highlight CTAs that keep the gold accent. */
.btn-accent, .btn-gold {
    background: var(--fe-gold) !important;
    border-color: var(--fe-gold) !important;
    color: var(--fe-on-primary) !important;
    transition: var(--fe-transition);
}
.btn-accent:hover, .btn-gold:hover {
    background: var(--fe-gold-light) !important;
    border-color: var(--fe-gold-light) !important;
    color: var(--fe-on-primary) !important;
}
.btn-outline-accent {
    color: var(--fe-gold) !important;
    border-color: var(--fe-gold) !important;
    transition: var(--fe-transition);
}
.btn-outline-accent:hover {
    background: var(--fe-gold) !important;
    border-color: var(--fe-gold) !important;
    color: var(--fe-on-primary) !important;
}

/* Success = distinct green (not the olive brand). */
.btn-success {
    background: var(--fe-success) !important;
    border-color: var(--fe-success) !important;
    color: var(--fe-on-primary) !important;
}
.btn-success:hover, .btn-success:focus {
    background: #256628 !important;
    border-color: #256628 !important;
    color: var(--fe-on-primary) !important;
}

/* Danger = conventional red (reject / close / delete). */
.btn-danger {
    background: var(--fe-danger) !important;
    border-color: var(--fe-danger) !important;
    color: var(--fe-on-primary) !important;
    transition: var(--fe-transition);
}
.btn-danger:hover, .btn-danger:focus {
    background: #BB2D3B !important;
    border-color: #BB2D3B !important;
    color: var(--fe-on-primary) !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
}
.btn-outline-danger {
    color: var(--fe-danger) !important;
    border-color: var(--fe-danger) !important;
    transition: var(--fe-transition);
}
.btn-outline-danger:hover {
    background: var(--fe-danger) !important;
    border-color: var(--fe-danger) !important;
    color: var(--fe-on-primary) !important;
}

/* Warning = real yellow with DARK text for contrast (caution). */
.btn-warning {
    background: var(--fe-warning) !important;
    border-color: var(--fe-warning) !important;
    color: var(--fe-on-warning) !important;
    transition: var(--fe-transition);
}
.btn-warning:hover, .btn-warning:focus {
    background: #E0A72E !important;
    border-color: #E0A72E !important;
    color: var(--fe-on-warning) !important;
}
.btn-outline-warning {
    color: #9A7B14 !important;
    border-color: var(--fe-warning) !important;
    transition: var(--fe-transition);
}
.btn-outline-warning:hover {
    background: var(--fe-warning) !important;
    border-color: var(--fe-warning) !important;
    color: var(--fe-on-warning) !important;
}

.bg-primary { background-color: var(--fe-olive) !important; color: var(--fe-on-primary) !important; }

/* Olive background: force white on headings and icons so our h1-h6 charcoal rule
   cannot bleed through when headings sit inside a coloured container. */
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary p, .bg-primary small,
.bg-primary i, .bg-primary .fas, .bg-primary .far, .bg-primary .fab, .bg-primary .fal {
    color: var(--fe-on-primary) !important;
}

/* Buttons: icons inside coloured buttons inherit the button's own white text. */
.btn-primary i, .btn-primary .fas, .btn-primary .far, .btn-primary .fab,
.btn-success i, .btn-success .fas, .btn-success .far, .btn-success .fab,
.btn-danger i, .btn-danger .fas, .btn-danger .far, .btn-danger .fab {
    color: inherit !important;
}
.text-primary { color: var(--fe-olive) !important; }
.border-primary { border-color: var(--fe-olive) !important; }

.form-control:focus, .form-select:focus {
    border-color: var(--fe-olive);
    box-shadow: 0 0 0 0.2rem var(--fe-olive-muted);
}

.card {
    background: var(--fe-white);
    border: 1px solid var(--fe-border);
    border-radius: 8px;
    box-shadow: var(--fe-shadow-sm);
    transition: var(--fe-transition);
}
.card:hover {
    box-shadow: var(--fe-shadow);
}

.table {
    --bs-table-bg: var(--fe-white);
    --bs-table-striped-bg: var(--fe-cream);
    --bs-table-hover-bg: var(--fe-gold-muted);
}
.table thead th {
    background: var(--fe-cream);
    color: var(--fe-charcoal);
    border-bottom: 2px solid var(--fe-border-gold);
    font-weight: 600;
}

.badge.bg-primary { background: var(--fe-olive) !important; color: var(--fe-on-primary) !important; }
.badge.bg-success { background: var(--fe-success) !important; color: var(--fe-on-primary) !important; }
.badge.bg-danger { background: var(--fe-danger) !important; color: var(--fe-on-primary) !important; }
.badge.bg-warning { background: var(--fe-warning) !important; color: var(--fe-on-warning) !important; }
.badge.bg-secondary { background: var(--fe-charcoal-muted) !important; }

.alert-success { background: rgba(46, 125, 50, 0.1); border-color: var(--fe-success); color: #1E5D22; }
.alert-danger { background: rgba(220, 53, 69, 0.1); border-color: var(--fe-danger); color: #A31B27; }
.alert-warning { background: rgba(244, 183, 64, 0.18); border-color: var(--fe-warning); color: #8A6D12; }
.alert-info { background: var(--fe-olive-muted); border-color: var(--fe-olive); color: var(--fe-olive-dark); }

/* ── Auth Pages (login, client, supplier) ── */
.fe-auth-body {
    font-family: var(--fe-font-sans-ar);
    background: var(--fe-gradient-cream);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.fe-auth-container, .login-container, .card-box {
    background: var(--fe-white);
    border-radius: 16px;
    box-shadow: var(--fe-shadow-lg);
    overflow: hidden;
    max-width: 420px;
    width: 100%;
    border: 1px solid var(--fe-border-gold);
}

.fe-auth-header, .login-header, .card-header-custom {
    background: var(--fe-gradient-emerald);
    color: var(--fe-white);
    padding: 1.5rem;
    text-align: center;
}

.fe-auth-header h1, .login-header h1, .card-header-custom h1 {
    font-family: var(--fe-font-serif-en);
    font-size: 1.35rem;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.fe-auth-body-inner, .login-body {
    padding: 1.5rem;
}

.fe-btn-login, .btn-login {
    background: var(--fe-gradient-gold);
    border: none;
    color: var(--fe-white);
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--fe-transition);
}
.fe-btn-login:hover, .btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.35);
    color: var(--fe-white);
}

.fe-auth-footer, .login-footer {
    text-align: center;
    padding: 0.75rem;
    background: var(--fe-cream);
    border-top: 1px solid var(--fe-border);
}

.brand-text {
    font-weight: 700;
    color: var(--fe-gold);
}

/* ── Portal Pages ── */
.fe-portal-body {
    font-family: var(--fe-font-sans-ar);
    background: var(--fe-gradient-cream);
    color: var(--fe-charcoal);
    min-height: 100vh;
}

.fe-portal-header, .header {
    background: var(--fe-gradient-emerald);
    color: var(--fe-white);
    padding: 1.5rem 0;
    box-shadow: var(--fe-shadow-lg);
}

.fe-portal-card, .stat-card-portal {
    background: var(--fe-white);
    border: 1px solid var(--fe-border);
    border-radius: 12px;
    box-shadow: var(--fe-shadow-sm);
    transition: var(--fe-transition);
}
.fe-portal-card:hover {
    box-shadow: var(--fe-shadow-hover);
    border-color: var(--fe-border-gold);
}

/* ── Print Styles ── */
.print-header {
    border-bottom: 2px solid var(--fe-emerald);
}
.print-table th {
    background-color: var(--fe-cream) !important;
    border-color: var(--fe-border) !important;
}
.summary-section {
    background-color: var(--fe-cream) !important;
    border: 2px solid var(--fe-gold) !important;
}