/* هيكلُ لوحة التحكّم: الشريطُ العلويّ، وقائمةُ الحساب، والتنبيهُ العائم، ورأسُ الصفحة، والنماذج.
   محتوى الصفحات نفسِها في admin-pages.css. مقياسُ مسافاتٍ واحد (--space-*)، وكلُّ لونٍ من tokens.css. */

body.admin { line-height: 1.7; }
.admin-main { width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-10); }
.admin-main.is-form { max-width: 820px; }
.admin-main.is-narrow { max-width: 540px; }
.admin .btn .icon-svg { width: 18px; height: 18px; }
.admin .btn.small .icon-svg { width: 16px; height: 16px; }

.admin-top {
  position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px);
}
.admin-top-inner { max-width: var(--container); height: 64px; margin: 0 auto; padding: 0 var(--space-6); display: flex; align-items: center; gap: var(--space-6); }
.admin-brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-weight: 800; text-decoration: none; white-space: nowrap; }
.admin-brand .brand-mark { animation: none; }
.admin-brand-tag { padding: 1px var(--space-2); border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .72rem; font-weight: 700; }
.admin-nav { display: flex; align-items: center; gap: var(--space-1); }
.admin-nav a {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 64px; padding: 0 var(--space-3);
  color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color var(--transition);
}
.admin-nav a:hover { color: var(--ink); }
.admin-nav a.is-active { color: var(--brand); }
.admin-nav a.is-active::after { content: ''; position: absolute; inset-inline: var(--space-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); }
.admin-nav .icon-svg, .admin-site-link .icon-svg, .account-menu .icon-svg { width: 18px; height: 18px; }
.admin-top-end { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.admin-site-link {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--muted); font-size: .86rem; font-weight: 600; text-decoration: none; transition: background var(--transition), color var(--transition);
}
.admin-site-link:hover { background: var(--surface-2); color: var(--ink); }
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--danger); color: var(--on-brand); font-size: .72rem; font-weight: 700; line-height: 1;
}

.account { position: relative; }
.account summary {
  display: flex; align-items: center; gap: var(--space-2); padding: 3px var(--space-1) 3px var(--space-3); list-style: none;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; transition: background var(--transition);
}
.account summary::-webkit-details-marker { display: none; }
.account summary:hover, .account[open] summary { background: var(--surface-2); }
.account summary > .icon-svg { width: 16px; height: 16px; color: var(--muted); transition: transform var(--transition); }
.account[open] summary > .icon-svg { transform: rotate(180deg); }
.account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 700; }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand); font-size: .85rem; font-weight: 800;
}
.account-menu {
  position: absolute; top: calc(100% + var(--space-2)); inset-inline-end: 0; min-width: 250px; padding: var(--space-2);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop);
  animation: pop-in .16s var(--ease-out);
}
.account-head { margin: 0 0 var(--space-1); padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.account-head strong { display: block; color: var(--ink); font-size: .92rem; }
.menu-item {
  position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 600; text-align: start; text-decoration: none;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.is-danger { margin-top: var(--space-3); color: var(--danger); }
.menu-item.is-danger::before { content: ''; position: absolute; top: calc(-1 * var(--space-2)); inset-inline: 0; height: 1px; background: var(--line); }
.menu-item.is-danger:hover { background: var(--danger-soft); }
.switch { position: relative; flex: none; width: 36px; height: 20px; margin-inline-start: auto; border-radius: 999px; background: var(--line-strong); transition: background var(--transition); }
.switch::after {
  content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--on-brand); box-shadow: var(--shadow-xs); transition: inset-inline-start var(--transition);
}
[data-theme="dark"] .switch { background: var(--brand); }
[data-theme="dark"] .switch::after { inset-inline-start: 18px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

.toast {
  position: fixed; z-index: 50; bottom: var(--space-6); inset-inline-start: var(--space-6);
  display: flex; align-items: center; gap: var(--space-3); max-width: min(440px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); border: 1px solid var(--line); border-inline-start: 4px solid var(--success);
  border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-pop); font-size: .92rem; font-weight: 700; cursor: pointer;
  animation: toast-in .35s var(--ease-out) both, toast-out .4s ease 5s forwards;
}
.toast .icon-svg { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--success-soft); color: var(--success); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); visibility: hidden; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-head h1 { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.35; }
.page-head p { margin: var(--space-1) 0 0; color: var(--muted); font-size: .95rem; }

.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--muted); cursor: pointer; transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.icon-btn .icon-svg { width: 18px; height: 18px; }
.link-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--space-2); border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--muted); font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.link-btn:hover { background: var(--surface-2); color: var(--ink); }
.link-btn.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.link-btn .icon-svg { width: 16px; height: 16px; }

.form-stack { display: grid; gap: var(--space-4); }
.form-section { padding: var(--space-6); }
.form-section-head { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.form-section-head h2 { margin: 0; font-size: 1.05rem; }
.form-section-head p { margin-top: 2px; font-size: .86rem; }
.form-section > .field:last-child { margin-bottom: 0; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* حقولُ نموذج المشروع، وصفحةُ الدخول المستقلّة بلا شريطٍ علويّ. */
.wrap-login { max-width: 400px; padding-top: 80px; }
.icon-preview { display: block; width: 56px; height: 56px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; }
.shots-preview { margin: 0; padding: 0 2px 10px; }
.shots-preview img { height: 140px; border-radius: var(--radius); }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 8px; align-items: center; margin-bottom: 10px; }
.link-row input[name^=link_href]:not(:placeholder-shown) { direction: ltr; text-align: left; }
.google-signin { display: flex; justify-content: center; margin-bottom: var(--gap); max-width: 100%; overflow: hidden; }
.google-signin > div { max-width: 100%; }
.login-divider { display: flex; align-items: center; gap: 12px; margin-bottom: var(--gap-lg); color: var(--muted); font-size: .84rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.password-field { position: relative; }
.password-field input { padding-inline-end: 46px; }
.password-toggle {
  position: absolute; top: 50%; inset-inline-end: 4px; translate: 0 -50%; display: grid; place-items: center; width: 36px; height: 36px;
  background: none; border: none; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer;
}
.password-toggle:hover { background: var(--brand-soft); color: var(--brand); }
.password-toggle .icon-svg { width: 19px; height: 19px; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.is-showing .icon-eye { display: none; }
.password-toggle.is-showing .icon-eye-off { display: block; }

@media (prefers-reduced-motion: reduce) {
  .account-menu { animation: none; }
  .toast { animation: toast-out .4s ease 5s forwards; }
}
@media (max-width: 760px) {
  .admin-top-inner { flex-wrap: wrap; height: auto; gap: 0 var(--space-3); padding: var(--space-2) var(--space-4) 0; }
  .admin-brand-tag { display: none; }
  .admin-nav a { padding: 0 var(--space-2); font-size: .86rem; }
  .admin-nav { order: 3; width: calc(100% + 2 * var(--space-3)); margin-inline: calc(-1 * var(--space-3)); overflow-x: auto; scrollbar-width: none; }
  .admin-nav a { height: 46px; }
  .admin-site-link span, .account-name { display: none; }
  .account summary { padding-inline-start: 3px; }
  .admin-main { padding: var(--space-5) var(--space-4) var(--space-8); }
  .page-head { margin-bottom: var(--space-5); }
  .page-head h1 { font-size: 1.35rem; }
  .field-grid { grid-template-columns: 1fr; }
  .form-section { padding: var(--space-5) var(--space-4); }
  .toast { bottom: var(--space-4); inset-inline: var(--space-4); max-width: none; }
  .link-row {
    grid-template-columns: 1fr; padding: var(--gap); margin-bottom: var(--gap);
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  }
  .link-row .check-inline { justify-self: start; }
  .wrap-login { padding-top: 32px; }
}