/* ═══════════════════════════════════════════════════════════════════════════
   Rufoof user guide — Evergreen brand skin for Material for MkDocs
   Palette: Mint Teal #2A9D8F · Deep Slate #1B263B · Ghost White #F8F9FA · Soft Gold #E9C46A
   RTL-first: logical properties throughout (works for both /ar/ and /en/).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scheme: light ───────────────────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #2A9D8F;
  --md-primary-fg-color--light: #3AB5A6;
  --md-primary-fg-color--dark:  #1f7a70;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-accent-fg-color:         #1f7a70;
  --md-accent-fg-color--transparent: rgba(42, 157, 143, 0.12);

  --md-default-bg-color:        #ECF0F4;
  --md-default-fg-color:        #1B263B;
  --md-default-fg-color--light: #3d4c63;
  --md-default-fg-color--lighter: #5B6B7F;
  --md-default-fg-color--lightest: rgba(27, 38, 59, 0.07);

  --md-typeset-a-color:         #1f7a70;
  --md-code-bg-color:           #eef1f4;
  --md-code-fg-color:           #1B263B;
  --md-footer-bg-color:         #1B263B;
  --md-footer-bg-color--dark:   #141d2e;

  --rf-surface:  #ffffff;
  --rf-surface2: #F1F3F5;
  --rf-border:   #E2E6EA;
  --rf-mint:     #2A9D8F;
  --rf-mint-dark:#1f7a70;
  --rf-mint-tint:rgba(42, 157, 143, 0.10);
  --rf-gold:     #E9C46A;
  --rf-gold-tint:rgba(233, 196, 106, 0.16);
  --rf-danger:   #DC2626;
  --rf-shadow:   0 2px 10px rgba(27, 38, 59, 0.07);
}

/* ── Scheme: dark ────────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-hue: 218; /* slate family hue for Material's derived tones */

  --md-primary-fg-color:        #2A9D8F;
  --md-primary-fg-color--light: #3AB5A6;
  --md-primary-fg-color--dark:  #1f7a70;
  --md-primary-bg-color:        #ffffff;
  --md-accent-fg-color:         #3AB5A6;
  --md-accent-fg-color--transparent: rgba(58, 181, 166, 0.14);

  --md-default-bg-color:        #0B111E;
  --md-default-fg-color:        #F8F9FA;
  --md-default-fg-color--light: #c7d1de;
  --md-default-fg-color--lighter: #93A3B8;
  --md-default-fg-color--lightest: rgba(248, 249, 250, 0.08);

  --md-typeset-a-color:         #4cc2b2;
  --md-code-bg-color:           #1B263B;
  --md-code-fg-color:           #e7ecf3;
  --md-footer-bg-color:         #0b111e;
  --md-footer-bg-color--dark:   #070c16;

  --rf-surface:  #1B263B;
  --rf-surface2: #22304A;
  --rf-border:   #2C3A52;
  --rf-mint:     #3AB5A6;
  --rf-mint-dark:#2A9D8F;
  --rf-mint-tint:rgba(58, 181, 166, 0.13);
  --rf-gold:     #E9C46A;
  --rf-gold-tint:rgba(233, 196, 106, 0.12);
  --rf-danger:   #F87171;
  --rf-shadow:   0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.md-header {
  background: linear-gradient(135deg, #2A9D8F 0%, #1f7a70 100%);
  box-shadow: 0 2px 12px rgba(27, 38, 59, 0.18);
}
.md-header__title { font-weight: 700; letter-spacing: 0.2px; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 1.6rem; width: 1.6rem; }
.md-tabs { background: #1f7a70; }

/* ── Contained "sheet" layout: content + sidebars as cards on a tinted desk ── */
.md-grid { max-width: 70rem; }
.md-main__inner { margin-top: 1.1rem; margin-bottom: 2.5rem; }
.md-content {
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: 18px;
  box-shadow: var(--rf-shadow);
  margin-bottom: 1.6rem;
}
.md-content__inner { padding: 0.5rem 1.5rem 1.4rem; margin: 0 0 0.5rem; }
.md-content__inner::before { height: 0; }
.md-sidebar__inner {
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: 14px;
  padding: 0.7rem 0.7rem 0.9rem !important;
  box-shadow: var(--rf-shadow);
  max-height: calc(100vh - 6.5rem);
  overflow-y: auto;
}
.md-sidebar {

  align-self: flex-start;

  max-height: calc(100vh - 5.5rem);

  z-index: 1;

}
.md-sidebar--secondary .md-sidebar__inner { padding: 0.6rem 0.7rem 0.8rem !important; }

/* Search field: soft pill */
.md-search__form {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
}
.md-search__form:hover { background: rgba(255, 255, 255, 0.24); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: 10px 10px 0 0;
}
.md-search__output { border-radius: 0 0 10px 10px; }
.md-search__input::placeholder { color: rgba(255, 255, 255, 0.75); }

/* ── Sidebar navigation ──────────────────────────────────────────────────── */
.md-nav { font-size: 0.72rem; }
.md-nav__title { font-weight: 800; color: var(--md-default-fg-color); }

/* Section labels: quiet small caps-style */
.md-nav__item--section > .md-nav__link {
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.4px;
  color: var(--md-default-fg-color--lighter) !important;
  text-transform: none;
  margin-top: 0.6em;
}

/* Every nav link: rounded hover pill */
.md-nav__link {
  border-radius: 8px;
  padding: 0.18rem 0.5rem;
  margin-inline-start: -0.5rem;
  transition: background 0.12s, color 0.12s;
}
.md-nav__link:hover {
  background: var(--rf-mint-tint);
  color: var(--rf-mint-dark);
}
/* Active page: filled mint pill */
.md-nav__link--active,
.md-nav__link--active:hover {
  background: var(--rf-mint);
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(42, 157, 143, 0.35);
}

/* TOC (in-page contents): mint marker on the reading edge */
.md-nav--secondary .md-nav__link { border-radius: 6px; }
.md-nav--secondary .md-nav__link--active,
.md-nav--secondary .md-nav__link--active:hover {
  background: var(--rf-mint-tint);
  color: var(--rf-mint-dark) !important;
  box-shadow: none;
  font-weight: 700;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
.md-typeset { font-size: 0.82rem; line-height: 1.85; }
.md-typeset h1 {
  color: var(--md-default-fg-color);
  font-weight: 800;
  letter-spacing: 0;
}
.md-typeset h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 0.35em;
  border-radius: 2px;
  background: linear-gradient(90deg, #2A9D8F, #E9C46A);
}
.md-typeset h2 {
  font-weight: 800;
  color: var(--md-default-fg-color);
  padding-inline-start: 0.55rem;
  border-inline-start: 4px solid var(--rf-mint);
  border-radius: 2px;
}
.md-typeset h3 { font-weight: 700; }
.md-typeset a { font-weight: 600; text-underline-offset: 3px; }
.md-typeset a:hover { color: var(--rf-mint); }
.md-typeset strong { color: var(--md-default-fg-color); }
.md-typeset hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rf-border) 20%, var(--rf-border) 80%, transparent);
}
.md-typeset blockquote {
  border-inline-start: 4px solid var(--rf-gold);
  background: var(--rf-gold-tint);
  border-radius: 0 10px 10px 0;
  padding: 0.6em 1em;
  color: var(--md-default-fg-color--light);
}
[dir="rtl"] .md-typeset blockquote { border-radius: 10px 0 0 10px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.md-typeset .md-button {
  border-radius: 10px;
  border: 1.5px solid var(--rf-mint);
  color: var(--rf-mint-dark);
  font-weight: 700;
  padding: 0.5em 1.4em;
  transition: all 0.15s;
}
.md-typeset .md-button:hover {
  background: var(--rf-mint-tint);
  border-color: var(--rf-mint-dark);
  color: var(--rf-mint-dark);
}
.md-typeset .md-button--primary {
  background: linear-gradient(135deg, #2A9D8F, #1f7a70);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(42, 157, 143, 0.35);
}
.md-typeset .md-button--primary:hover {
  background: linear-gradient(135deg, #2fae9f, #23887d);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(42, 157, 143, 0.42);
}

/* ── Admonitions ─────────────────────────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--rf-border);
  border-inline-start: 4px solid var(--rf-mint);
  border-radius: 12px;
  background: var(--rf-surface);
  box-shadow: var(--rf-shadow);
  font-size: 0.76rem;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background: var(--rf-mint-tint) !important;
  font-weight: 800;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before { background-color: var(--rf-mint) !important; }

/* warning / caution → gold */
.md-typeset .admonition.warning, .md-typeset details.warning,
.md-typeset .admonition.caution, .md-typeset details.caution {
  border-inline-start-color: var(--rf-gold);
}
.md-typeset .warning > .admonition-title, .md-typeset .warning > summary,
.md-typeset .caution > .admonition-title, .md-typeset .caution > summary {
  background: var(--rf-gold-tint) !important;
}
.md-typeset .warning > .admonition-title::before, .md-typeset .warning > summary::before,
.md-typeset .caution > .admonition-title::before, .md-typeset .caution > summary::before {
  background-color: #c99a2e !important;
}

/* danger / failure → red */
.md-typeset .admonition.danger, .md-typeset details.danger,
.md-typeset .admonition.failure, .md-typeset details.failure {
  border-inline-start-color: var(--rf-danger);
}
.md-typeset .danger > .admonition-title, .md-typeset .danger > summary,
.md-typeset .failure > .admonition-title, .md-typeset .failure > summary {
  background: rgba(220, 38, 38, 0.08) !important;
}
.md-typeset .danger > .admonition-title::before, .md-typeset .danger > summary::before,
.md-typeset .failure > .admonition-title::before, .md-typeset .failure > summary::before {
  background-color: var(--rf-danger) !important;
}

/* todo (screenshot placeholders) → dashed gold, clearly "work in progress" */
.md-typeset .admonition.todo, .md-typeset details.todo {
  border: 1.5px dashed var(--rf-gold);
  border-inline-start: 4px solid var(--rf-gold);
  background: var(--rf-gold-tint);
}
.md-typeset .todo > .admonition-title { background: transparent !important; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  border: 1px solid var(--rf-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--rf-shadow);
  font-size: 0.74rem;
}
.md-typeset table:not([class]) th {
  background: var(--rf-surface2);
  color: var(--md-default-fg-color);
  font-weight: 800;
}
.md-typeset table:not([class]) tr:hover { background: var(--rf-mint-tint); }

/* ── Inline code & code blocks ───────────────────────────────────────────── */
.md-typeset code {
  border-radius: 6px;
  padding: 0.1em 0.45em;
}
.md-typeset pre > code { border-radius: 10px; }

/* ── Content screenshots: centered, framed (CONTENT ONLY — never header/footer) ── */
.md-content .md-typeset img:not(.twemoji):not(.emojione):not(.gemoji):not(.emojione-v2) {
  display: block;
  margin: 1.6em auto;
  max-width: 100%;
  height: auto;
  padding: 8px;
  border: 1px solid var(--rf-border);
  border-radius: 14px;
  background: var(--rf-surface);
  box-shadow: 0 4px 20px rgba(27, 38, 59, 0.12);
  transition: box-shadow 0.2s;
}
.md-content .md-typeset img:not(.twemoji):not(.emojione):not(.gemoji):not(.emojione-v2):hover {
  box-shadow: 0 6px 26px rgba(27, 38, 59, 0.18);
}
[data-md-color-scheme="slate"] .md-content .md-typeset img:not(.twemoji):not(.emojione):not(.gemoji):not(.emojione-v2) {
  border-color: var(--rf-border);
  background: var(--rf-surface2);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.4);
}

/* Header / footer images are never "screenshots" — no frame, ever */
.md-header img, .md-footer img, .md-copyright img {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-block !important;
  margin: 0 !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.md-footer {
  background: var(--md-footer-bg-color);
  position: relative;
  z-index: 10;
  clear: both;
}
.md-footer__link { border-radius: 10px; }
.md-footer__link:hover .md-footer__title { color: #7bd8ca; }
.md-copyright { color: rgba(248, 249, 250, 0.75); }
.md-copyright a { color: #7bd8ca; font-weight: 700; }
.md-copyright a:hover { color: #a5e8de; }

/* ── Search results ──────────────────────────────────────────────────────── */
.md-search-result mark { color: var(--rf-mint-dark); font-weight: 800; }
.md-search-result__meta { background: var(--rf-surface2); }

/* ── Back-to-top pill ────────────────────────────────────────────────────── */
.md-top {
  background: var(--rf-mint);
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(42, 157, 143, 0.4);
}
.md-top:hover { background: var(--rf-mint-dark); color: #fff; }

/* ── Homepage hero ───────────────────────────────────────────────────────── */
.rf-hero {
  text-align: center;
  padding: 2.2rem 1.4rem 2rem;
  margin: 0.4rem 0 1.8rem;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 62% 90% at 50% -12%, rgba(42, 157, 143, 0.16), transparent),
    var(--rf-surface);
  border: 1px solid var(--rf-border);
  box-shadow: var(--rf-shadow);
}
.rf-hero .rf-hero-mark {
  /* undo the screenshot framing for the brand logo (its corners are baked in) */
  display: inline-block !important;
  width: 88px; height: 88px;
  margin: 0 auto 0.4rem !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: 0 12px 30px rgba(42, 157, 143, 0.38) !important;
  border-radius: 22% !important;
}
.rf-hero h1 {
  margin: 0.2em 0 0.1em;
  font-size: 2.1em;
  font-weight: 800;
}
.rf-hero h1::after { margin-inline: auto; }
.rf-hero .rf-hero-sub {
  color: var(--md-default-fg-color--lighter);
  font-size: 0.86em;
  max-width: 34em;
  margin: 0.55em auto 1.25em;
}
.rf-hero .md-button { margin: 0.2em 0.3em; }

/* ── Slim scrollbars (WebKit) ────────────────────────────────────────────── */
.md-sidebar__scrollwrap::-webkit-scrollbar { width: 5px; }
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background: var(--rf-border);
  border-radius: 3px;
}
.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb { background: var(--rf-mint); }