/* ==========================================================================
   Montiliya admin site — the shell of admin/index.html (admin/app.js): the top bar (brand, language, theme, the signed-in administrator, sign out), the admin sign-in card,
   and the frame the dashboard (admin/dash.js, admin/dash.css) is drawn in. Built only from the tokens of css/styles.css; the accent marks the admin badge and the way forward.
   The page scrolls as a document (the app's body is a fixed frame; this one is not). Logical properties everywhere (LTR and RTL share one sheet); no inline styles (CSP).
   ========================================================================== */

body.ad { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; background: var(--glow), var(--panel); }

/* ---- the top bar */
.ad-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px;
  padding-block: max(var(--s2), env(safe-area-inset-top, 0px)) var(--s2); padding-inline: max(var(--s6), env(safe-area-inset-left, 0px)) max(var(--s6), env(safe-area-inset-right, 0px));
  background: var(--panel); background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.ad-brand { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; color: var(--ink); text-decoration: none; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; border-radius: var(--r-md); }
.ad-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ad-brand img { height: 26px; width: auto; filter: var(--logo-filter); }
.ad-badge { padding: 2px var(--s2); border-radius: var(--r-full); border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
:lang(ar) .ad-badge { text-transform: none; }
.ad-env { padding: 2px var(--s2); border-radius: var(--r-full); border: 1px dashed var(--line-strong); color: var(--ink-3); font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.06em; }
.ad-env[hidden] { display: none; }
.ad-tools { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.ad-lang.seg { width: auto; }
.ad-lang.seg .seg-opt { min-height: 34px; min-width: 40px; padding: 0 var(--s3); }
.ad-who { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.ad-who[hidden] { display: none; }
.ad-who-mail { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: var(--fs-sm); }
.ad-out { min-height: 40px; padding-inline: var(--s4); gap: var(--s2); font-size: var(--fs-sm); }

/* ---- the content */
.ad-main { display: block; min-height: calc(100dvh - 64px); outline: none; }
.ad-boot { margin: 0; padding: var(--s16) var(--s4); text-align: center; color: var(--ink-3); }
.ad-boot[hidden] { display: none; }

/* ---- the sign-in card (the app's .signin-card and .field, with the admin's eyebrow and accent button) */
.ad-signin { display: flex; padding: var(--s12) var(--s4); }
.ad-signin[hidden] { display: none; }
.ad-signin h1 { margin: 0; font-size: var(--fs-h2); font-weight: 650; letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
.ad-eyebrow { display: inline-flex; align-self: center; align-items: center; gap: var(--s1); margin: 0; color: var(--accent); font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
:lang(ar) .ad-eyebrow { text-transform: none; }
.ad-eyebrow .icon { width: 14px; height: 14px; }
.ad-note { margin: 0; padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; }
.ad-note[hidden] { display: none; }
.ad-card .btn-accent { min-height: 48px; justify-content: center; }
.ad-card .btn-accent[aria-disabled='true'] { opacity: 0.7; }

/* ---- the dashboard's frame */
.admin-view[hidden] { display: none; }

@media (max-width: 720px) {
  .ad-bar { padding-inline: max(var(--s4), env(safe-area-inset-left, 0px)) max(var(--s4), env(safe-area-inset-right, 0px)); gap: var(--s2); }
  .ad-who-mail { display: none; }
  .ad-brand img { height: 22px; }
  .ad-out span { display: none; }
  .ad-out { padding-inline: var(--s3); }
  .ad-signin { padding: var(--s6) var(--s4); }
}
@media (max-width: 480px) {
  .ad-badge { display: none; }                     /* the page's own heading says Admin; the environment badge (MOCK, DEVELOPMENT) stays */
  .ad-tools { gap: var(--s1); }
  .ad-lang.seg .seg-opt { min-width: 34px; min-height: 32px; padding: 0 var(--s2); }
  .ad-brand { gap: var(--s1); min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .ad-bar { backdrop-filter: none; -webkit-backdrop-filter: none; } }