/* =========================================================
   لوحة العميل — تنسيقات إضافية فوق editor.css
   ========================================================= */

/* ---------- تسجيل الدخول ---------- */
.login {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(circle at 90% 0%, rgba(242, 166, 90, .25), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(31, 111, 120, .15), transparent 45%),
    var(--bg);
}
.login-card {
  width: min(100%, 400px);
  display: grid; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 26px;
  box-shadow: 0 20px 50px -25px rgba(0, 0, 0, .35);
  text-align: center;
}
.login-card img { margin: 0 auto; border-radius: 14px; }
.login-card h1 { font-size: 1.5rem; }
.login-card .f { text-align: right; }
.login-card input { font-size: 1rem !important; padding: 12px 14px !important; }
.login-btn { height: 48px; font-size: 1.05rem; }
.login-error { color: var(--danger); font-weight: 500; font-size: .92rem; white-space: pre-line; }
.login-ok { color: #1e6b34; background: #e6f4ea; border-radius: 10px; padding: 10px; font-size: .92rem; white-space: pre-line; }
.login-card .f small { text-align: right; }

/* حقل الرمز السري مع زر الإظهار */
.pin-row { display: flex; gap: 8px; }
.pin-row input { flex: 1; min-width: 0; letter-spacing: .5em; text-align: center; font-size: 1.3rem !important; }
.pin-eye { flex: none; width: 50px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 1.2rem; cursor: pointer; }
.link-btn { background: none; border: 0; color: var(--muted); font: inherit; font-size: .92rem; cursor: pointer; }
.link-btn b { color: var(--primary); }
/* حقل كشف البرامج الآلية: مخفي بصرياً دون أن يوسّع الصفحة (لا نستخدم left: -9999px في صفحة RTL) */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }

/* ---------- البداية (متجر جديد) ---------- */
.start { width: min(100% - 32px, 880px); margin: 28px auto 90px; display: grid; gap: 16px; }
.start h2 { font-size: 1.4rem; }
.start-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.start-card {
  display: grid; gap: 4px; justify-items: center;
  padding: 20px 12px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px;
  font: inherit; cursor: pointer; transition: border-color .2s, transform .2s;
}
.start-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.start-card span { font-size: 2.2rem; }
.start-card small { color: var(--muted); }
.start-help {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 16px;
  background: #e9f8ee; border: 1px solid #b9dfc3; color: inherit; text-decoration: none;
}
.start-help > span:first-child { font-size: 2rem; }
.small { font-size: .82rem; }

/* ---------- شريط حالة المراجعة ---------- */
.status-bar { padding: 10px 20px; border-bottom: 1px solid var(--line); font-size: .92rem; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-bar.pending { background: #fff8e8; }
.status-bar.rejected { background: #fdecea; }
.status-bar.approved, .status-bar.live { background: #edf7ef; }
.status-bar .grow { flex: 1; min-width: 220px; }
.status-bar .note { display: block; margin-top: 4px; white-space: pre-line; }
.status-bar .tb-btn { height: 34px; font-size: .85rem; }


/* ---------- تبويبات الجوال ---------- */
.mobile-tabs { display: none; }
body.starting .mobile-tabs { display: none !important; }

@media (max-width: 1000px) {
  .topbar { gap: 8px; }
  .tb-actions { width: 100%; }
  .tb-actions .tb-btn { flex: 1 1 auto; height: 38px; padding: 0 10px; font-size: .88rem; }
  #appView { padding-bottom: 64px; }
  body[data-pane="edit"] .preview-pane { display: none; }
  body[data-pane="preview"] .editor { display: none; }
  body[data-pane="preview"] .preview-pane { height: calc(100vh - 190px); border-top: 0; }
  .mobile-tabs {
    display: flex;
    position: fixed; bottom: 0; inset-inline: 0; z-index: 30;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, .25);
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .mobile-tabs button {
    flex: 1; height: 46px;
    border: 0; border-radius: 12px;
    background: transparent;
    font-weight: 700; font-size: 1rem;
    cursor: pointer;
  }
  .mobile-tabs button.active { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
  .frame-wrap { padding: 10px; }
}