/* custom.design.css — quick design overrides for demo
   - Add high-level layout and visual changes that approximate the look/feel
   - Safe: only overrides existing selectors and creates new ones; non-destructive
   - Remove this file or rename to revert demo changes
*/

:root { --app-font: 'El Messiri', 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
/* Use the same font-family (Outfit) and make headings larger for a landing look */
html, body {
  /* Use El Messiri for Arabic UI, keep Outfit available as fallback for latin strings */
  font-family: var(--app-font);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  color: #0b2a24; /* darker text for contrast */
}

/* Make top navigation / header feel taller and more prominent */
nav, .navbar, header {
  background: linear-gradient(90deg, #075e54 0%, #18b979 100%);
  color: #fff !important;
  padding: 18px 24px !important;
  box-shadow: 0 6px 18px rgba(3,27,24,0.18);
}

/* Brand / logo area spacing */
nav .brand, .navbar .brand, header .brand {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Make the main content area feel more centered and narrow like a landing page */
.app-root, .app, #root, .main, .content, .container {
  max-width: 1200px;
  margin: 30px auto !important;
  width: calc(100% - 40px);
}

/* Hero area — if the app has a hero container this will make it prominent */
.hero, .landing-hero, .home-hero {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 60px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f7fff9 0%, #effff6 100%);
  box-shadow: 0 8px 30px rgba(2, 50, 40, 0.06);
}

.hero h1, .landing-hero h1 { font-size: 40px; line-height: 1.08; margin-bottom: 12px; color: #052b24; }
.hero p, .landing-hero p { font-size: 18px; color: #25483f; max-width: 800px; margin: 0 auto; }

/* Cards & panels — increase spacing and visual depth */
.card, .panel, .container-card {
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  background: #ffffff;
}

/* Sidebar: more compact and modern */
.sidebar { width: 280px; background: #ffffff; border-radius: 10px; padding: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }

/* Navbar links */
nav a, .navbar a { color: rgba(255,255,255,0.95) !important; text-decoration:none; padding: 6px 10px; border-radius:6px; }
nav a:hover, .navbar a:hover { background: rgba(255,255,255,0.06); }

/* Make primary buttons match the new look */
.btn-primary, .button-primary, button.primary {
  background: linear-gradient(90deg,#0d8b6a, #24c78a) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
}

/* Small adjustments for RTL layout */
[dir="rtl"] .app-root, [dir="rtl"] .main, [dir="rtl"] .content { text-align:right; }

/* Lightweight responsive tweaks */
@media (max-width: 900px) {
  .sidebar { display:none; }
  .app-root, .container { margin:12px auto; width:calc(100% - 28px); }
  .hero { padding: 36px 16px; }
  .hero h1 { font-size: 28px; }
}

/* Use custom variables for easy adjustments later */
:root { --primary: #075e54; --accent: #24c78a; }

/* Strong RTL-specific layout overrides: ensure all containers, navs and grids follow RTL layout */
html[dir="rtl"] body, html[dir="rtl"] #root, html[dir="rtl"] .app-root, [dir="rtl"] .container {
  direction: rtl !important;
  text-align: right !important;
}

[dir="rtl"] .navbar, [dir="rtl"] nav, [dir="rtl"] header { text-align: right !important; }
[dir="rtl"] .sidebar { right: 0 !important; left: auto !important; }

/* Flip flex direction and justify content where needed */
[dir="rtl"] .flex-row, [dir="rtl"] .flex-container, [dir="rtl"] .d-flex, [dir="rtl"] .layout-row {
  flex-direction: row-reverse !important;
}

/* Ensure breadcrumbs / helper navigation align to the right */
[dir="rtl"] .breadcrumbs, [dir="rtl"] .breadcrumb { justify-content: flex-end !important; }

/* Ensure major layout columns appear in correct order */
[dir="rtl"] .layout-main { margin-right: 300px; margin-left: 0; }

/* Buttons and small UI tweaks in RTL */
[dir="rtl"] .btn, [dir="rtl"] button { text-align: center; }

/* Force El Messiri on most elements. We avoid forcing on code/pre/kbd/samp to preserve monospace formatting. */
*:not(code):not(pre):not(kbd):not(samp), *::before, *::after {
  font-family: var(--app-font) !important;
}

/* ===== Additional design refinements to better match the reference look ===== */
/* Global base sizing and typography */
html, body { font-size: 16px; }
h1 { font-size: 38px; font-weight: 700; }
h2 { font-size: 26px; font-weight: 700; }
h3 { font-size: 20px; font-weight: 700; }
p, li, span, a { font-size: 15px; }

/* Header / navbar refinements (logo, spacing, link look) */
nav, .navbar, header { padding: 18px 28px !important; }
.navbar .brand img, header .brand img { height: 56px; width: auto; object-fit: contain; border-radius: 6px; }
.navbar .nav-list, header .nav-list { gap: 18px !important; }
.navbar .nav-list a, header .nav-list a, .header-links a { padding: 8px 10px; border-radius: 8px; font-weight: 600; color: rgba(255,255,255,0.95) !important; }
.navbar .nav-list a:hover, header .nav-list a:hover { background: rgba(255,255,255,0.06); color: #fff !important; }

/* Primary button visual style (rounded, shadowed) */
.MuiButton-root.btn-primary, .btn-primary, button.primary, .button-primary {
  background: linear-gradient(90deg, #0d8b6a 0%, #24c78a 100%) !important;
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(17, 139, 106, 0.12) !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* Secondary buttons and links should be subtle */
.MuiButton-root.btn-secondary, .btn-secondary, button.secondary {
  background: transparent !important;
  color: #052b24 !important;
  border: 1px solid rgba(5,43,36,0.06) !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
}

/* Card title / small card header style (consistent elevation + padding) */
.card .card-title, .panel .panel-title { font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.card { padding: 22px !important; }

/* Footer / link cluster spacing — friendly for RTL */
.footer a, .useful-links a { color: rgba(0,0,0,0.72); margin-inline-end: 10px; display: inline-block; }

/* Small global accessibility fixes */
a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid rgba(7,94,84,0.12); outline-offset: 2px; }

/* End tweaks */

/* Ensure SVG and chart text use the app font too */
svg, svg text, svg tspan, .apexcharts-text, .apexcharts-tooltip, .apexcharts-tooltip * {
  font-family: var(--app-font) !important;
}

/* Buttons/inputs - force font there as well */
input, textarea, select, button, a, label, option {
  font-family: var(--app-font) !important;
}

/* End of custom.design.css */