/*
 * ألوان وخطوط أرشيف — متوافقة مع صفحة الهبوط العامة
 * (نفس ألواح الـ hero: #070f1a → #0f2744 → #1a5082، واللمسة الذهبية #d4a93a)
 * تُحمَّل بعد base.css و dark_mode.css فتتجاوز —theme.js يضبط data-theme قبل extrastyle.
 */

/* ——— رموز مشتركة (خط الهبوط) ——— */
:root {
  --archive-hero-deep: #070f1a;
  --archive-hero-mid: #0f2744;
  --archive-hero-lit: #1a5082;
  --archive-accent: #d4a93a;
  --archive-accent-hover: #e0bc55;
  --archive-ink: #0b1220;
  --archive-surface: #f8fafc;
  --archive-line: #e2e8f0;
  --archive-muted: #64748b;

  --font-family-primary:
    "IBM Plex Sans Arabic",
    "Segoe UI",
    system-ui,
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
}

/* ——— وضع فاتح (افتراضي + auto عند نظام فاتح) ——— */
:root,
html[data-theme="light"] {
  --primary: var(--archive-hero-lit);
  --secondary: var(--archive-hero-mid);
  --accent: var(--archive-accent);
  --primary-fg: #f8fafc;

  --body-fg: var(--archive-ink);
  --body-bg: var(--archive-surface);
  --body-quiet-color: var(--archive-muted);
  --body-medium-color: #1e293b;
  --body-loud-color: var(--archive-hero-deep);

  --header-color: rgba(248, 250, 252, 0.94);
  --header-branding-color: var(--archive-accent-hover);
  --header-bg: var(--archive-hero-mid);
  --header-link-color: #f8fafc;

  --breadcrumbs-fg: rgba(203, 213, 225, 0.95);
  --breadcrumbs-link-fg: #f8fafc;
  --breadcrumbs-bg: var(--archive-hero-deep);

  --link-fg: var(--archive-hero-lit);
  --link-hover-color: var(--archive-hero-mid);
  --link-selected-fg: var(--archive-hero-mid);

  --hairline-color: var(--archive-line);
  --border-color: #cbd5e1;

  --darkened-bg: #f1f5f9;
  --selected-bg: #e2e8f0;
  --selected-row: rgba(212, 169, 58, 0.32);

  --button-bg: var(--archive-hero-mid);
  --button-hover-bg: var(--archive-hero-deep);
  --button-fg: #f8fafc;

  --default-button-bg: var(--archive-accent);
  --default-button-hover-bg: var(--archive-accent-hover);

  --close-button-bg: #64748b;
  --close-button-hover-bg: #475569;

  --object-tools-fg: #f8fafc;
  --object-tools-bg: #475569;
  --object-tools-hover-bg: #334155;
}

/* أزرار الحفظ الذهبية — نص داكن للتباين */
.button.default,
input[type="submit"].default,
input[type="button"].default,
.submit-row input.default {
  color: var(--archive-hero-deep);
}

.button.default:focus,
input[type="submit"].default:focus,
.submit-row input.default:focus {
  color: var(--archive-hero-deep);
}

/* ——— auto + نظام داكن ——— */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --primary: var(--archive-hero-lit);
    --secondary: var(--archive-hero-mid);
    --accent: var(--archive-accent);
    --primary-fg: #f8fafc;

    --body-fg: #e2e8f0;
    --body-bg: var(--archive-hero-deep);
    --body-quiet-color: #94a3b8;
    --body-medium-color: #cbd5e1;
    --body-loud-color: #f8fafc;

    --header-color: rgba(248, 250, 252, 0.94);
    --header-branding-color: var(--archive-accent-hover);
    --header-bg: var(--archive-hero-mid);
    --header-link-color: #f8fafc;

    --breadcrumbs-bg: #0a1628;
    --breadcrumbs-fg: #94a3b8;
    --breadcrumbs-link-fg: #f8fafc;

    --link-fg: #7dd3fc;
    --link-hover-color: #bae6fd;
    --link-selected-fg: var(--archive-accent-hover);

    --hairline-color: #1e293b;
    --border-color: #334155;

    --darkened-bg: #0f172a;
    --selected-bg: #1e293b;
    --selected-row: rgba(212, 169, 58, 0.22);

    --button-bg: var(--archive-hero-lit);
    --button-hover-bg: #2563ab;
    --button-fg: #f8fafc;

    --default-button-bg: var(--archive-accent);
    --default-button-hover-bg: var(--archive-accent-hover);

    --close-button-bg: #475569;
    --close-button-hover-bg: #64748b;

    --object-tools-bg: #475569;
    --object-tools-hover-bg: #64748b;

    --message-info-bg: #1e3a5f;
    --message-success-bg: #14532d;
    --message-warning-bg: #422006;
    --message-error-bg: #450a0a;
    --message-debug-bg: #334155;
  }
}

/* ——— وضع داكن صريح ——— */
html[data-theme="dark"] {
  --primary: var(--archive-hero-lit);
  --secondary: var(--archive-hero-mid);
  --accent: var(--archive-accent);
  --primary-fg: #f8fafc;

  --body-fg: #e2e8f0;
  --body-bg: var(--archive-hero-deep);
  --body-quiet-color: #94a3b8;
  --body-medium-color: #cbd5e1;
  --body-loud-color: #f8fafc;

  --header-color: rgba(248, 250, 252, 0.94);
  --header-branding-color: var(--archive-accent-hover);
  --header-bg: var(--archive-hero-mid);
  --header-link-color: #f8fafc;

  --breadcrumbs-bg: #0a1628;
  --breadcrumbs-fg: #94a3b8;
  --breadcrumbs-link-fg: #f8fafc;

  --link-fg: #7dd3fc;
  --link-hover-color: #bae6fd;
  --link-selected-fg: var(--archive-accent-hover);

  --hairline-color: #1e293b;
  --border-color: #334155;

  --darkened-bg: #0f172a;
  --selected-bg: #1e293b;
  --selected-row: rgba(212, 169, 58, 0.22);

  --button-bg: var(--archive-hero-lit);
  --button-hover-bg: #2563ab;
  --button-fg: #f8fafc;

  --default-button-bg: var(--archive-accent);
  --default-button-hover-bg: var(--archive-accent-hover);

  --close-button-bg: #475569;
  --close-button-hover-bg: #64748b;

  --object-tools-bg: #475569;
  --object-tools-hover-bg: #64748b;

  --message-info-bg: #1e3a5f;
  --message-success-bg: #14532d;
  --message-warning-bg: #422006;
  --message-error-bg: #450a0a;
  --message-debug-bg: #334155;
}

/* شريط علوي بنفس تدرّج الهبوط */
#header {
  background: linear-gradient(
    165deg,
    var(--archive-hero-deep) 0%,
    var(--archive-hero-mid) 52%,
    var(--archive-hero-lit) 100%
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

#site-name a:link,
#site-name a:visited {
  color: var(--archive-accent-hover);
}

#archive-admin-branding #site-name a {
  color: var(--archive-accent-hover);
}

#archive-admin-branding #site-name a:hover {
  color: #f8fafc;
}

/* شعار الرأس — دون تشويه (نسبة العرض للارتفاع الأصلية) */
#archive-admin-branding {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  min-width: 0;
}

.archive-branding__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  max-width: min(280px, 46vw);
}

.archive-branding__logo {
  display: block;
  max-height: 48px;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 767px) {
  .archive-branding__logo-link {
    max-width: min(220px, 70vw);
  }

  .archive-branding__logo {
    max-height: 40px;
  }
}