/* FINAL V9 — iPhone viewport, one physical-left close rule, frame live workspace */
:root {
  --v9-safe-top: env(safe-area-inset-top, 0px);
  --v9-safe-bottom: env(safe-area-inset-bottom, 0px);
  --v9-visual-height: 100dvh;
}

html, body, #root {
  width: 100%;
  min-height: 100%;
  min-height: 100svh;
  min-height: var(--v9-visual-height, 100dvh);
  max-width: 100%;
}
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: calc(4.75rem + var(--v9-safe-top));
  scroll-padding-bottom: calc(7.5rem + var(--v9-safe-bottom));
}
body, #root {
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
body { overscroll-behavior-y: auto !important; }

@supports (-webkit-touch-callout: none) {
  html, body, #root { min-height: -webkit-fill-available; }
}

/* iPhone/PWA: content begins BELOW the status/notch area instead of touching it.
   safe-area is additive so Safari browser mode also keeps a small comfortable gap. */
@media (max-width: 1023px) {
  .admin-mobile-header {
    padding-top: calc(var(--v9-safe-top) + .8rem) !important;
    padding-bottom: .75rem !important;
    min-height: calc(4rem + var(--v9-safe-top)) !important;
  }
  .admin-mobile-main {
    min-height: calc(var(--v9-visual-height, 100dvh) - 4rem) !important;
    padding-top: 1.35rem !important;
    padding-bottom: calc(4.25rem + var(--v9-safe-bottom)) !important;
    overflow: visible !important;
  }
  .admin-mobile-scroll {
    height: var(--v9-visual-height, 100dvh) !important;
    max-height: var(--v9-visual-height, 100dvh) !important;
    padding-top: calc(var(--v9-safe-top) + 1rem) !important;
    padding-bottom: calc(3rem + var(--v9-safe-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .participant-safe-shell {
    min-height: var(--v9-visual-height, 100dvh) !important;
    padding-top: calc(var(--v9-safe-top) + .85rem) !important;
    padding-bottom: calc(7.5rem + var(--v9-safe-bottom)) !important;
    overflow: visible !important;
  }
  .participant-bottom-nav {
    bottom: 0 !important;
    padding-bottom: max(.8rem, var(--v9-safe-bottom)) !important;
  }
  input, textarea, select, button, [tabindex] {
    scroll-margin-top: calc(5.5rem + var(--v9-safe-top));
    scroll-margin-bottom: calc(7.5rem + var(--v9-safe-bottom));
  }
}

/* Every popup / sheet / drawer close button sits on the PHYSICAL LEFT,
   opposite Arabic headings. Inline logical/right positioning is neutralized. */
.ui-close-button,
[data-ui-close="true"],
.v9-close-button {
  position: absolute !important;
  inset: auto !important;
  left: .85rem !important;
  right: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  top: .85rem !important;
  margin: 0 !important;
  transform: none !important;
  direction: ltr !important;
  z-index: 2147483000 !important;
}
[role="dialog"] > h2:first-child,
[role="dialog"] [data-radix-dialog-title],
[data-vaul-drawer] h2:first-child,
[data-radix-dialog-content] h2:first-child {
  padding-left: 3.4rem !important;
  padding-right: 0 !important;
}
/* Full-screen mobile sheets own the safe-area too, so their X is never under the notch. */
@media (max-width: 1023px) and (display-mode: standalone) {
  .admin-mobile-scroll .ui-close-button,
  .admin-mobile-scroll [data-ui-close="true"],
  .admin-mobile-scroll .v9-close-button {
    top: calc(var(--v9-safe-top) + .7rem) !important;
  }
}

/* Admin frame editor: preview is sticky on one side, ALL controls stay beside it.
   This removes the up/down loop while positioning elements. */
@media (min-width: 1100px) {
  .event-frame-editor {
    display: grid !important;
    grid-template-columns: minmax(350px, 520px) minmax(430px, 1fr) !important;
    align-items: start !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 1260px !important;
    margin-inline: auto !important;
  }
  .event-frame-editor > .frame-preview-column {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 1rem !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 !important;
    align-self: start !important;
  }
  .event-frame-editor > .frame-preview-column > .glass { max-width: 500px !important; }
  .event-frame-editor > :not(.frame-preview-column) {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .event-frame-editor > .grid {
    grid-template-columns: 1fr !important;
    align-content: start !important;
  }
}

/* Member frame editor gets a live preview beside controls on tablets/desktops. */
@media (min-width: 900px) {
  .v9-user-frame-layout {
    display: grid !important;
    grid-template-columns: minmax(330px, 500px) minmax(360px, 1fr) !important;
    gap: 1rem !important;
    align-items: start !important;
    max-width: 1040px !important;
    margin-inline: auto !important;
  }
  .v9-user-frame-layout > header { grid-column: 1 / -1 !important; }
  .v9-user-frame-preview {
    grid-column: 1 !important;
    grid-row: 2 / span 4 !important;
    position: sticky !important;
    top: 1rem !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 !important;
  }
  .v9-user-frame-controls,
  .v9-user-frame-actions,
  .v9-user-frame-note { grid-column: 2 !important; }
}

/* Never show technical resolution/watermark text inside the visual frame. */
[data-frame-width] .v9-hide-frame-label { display: none !important; }
.v9-hide-frame-label { display: none !important; }

/* Audit Excel export for whichever category/search is currently displayed. */
.v9-audit-export {
  min-height: 2.75rem;
  width: fit-content;
  border-radius: .85rem;
  padding-inline: 1rem;
  border: 1px solid color-mix(in oklab, var(--color-primary) 45%, transparent);
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-weight: 800;
  font-size: .8rem;
  cursor: pointer;
}
.v9-audit-export:hover { background: color-mix(in oklab, var(--color-primary) 18%, transparent); }

/* FINAL V10 — searchable notification recipient */
.recipient-search-v10{position:relative;width:100%;z-index:35}
.recipient-search-v10__row{position:relative;display:flex;align-items:center;width:100%}
.recipient-search-v10__input{width:100%;height:48px;border:1px solid hsl(var(--input));border-radius:12px;background:hsl(var(--background));color:hsl(var(--foreground));padding:0 42px 0 42px;font-size:14px;font-weight:700;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.recipient-search-v10__input::placeholder{color:hsl(var(--muted-foreground));font-weight:500}
.recipient-search-v10__input:focus{border-color:rgba(239,68,68,.75);box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.recipient-search-v10__icon{position:absolute;right:15px;z-index:2;color:hsl(var(--muted-foreground));pointer-events:none;font-size:14px}
.recipient-search-v10__clear{position:absolute;left:8px;width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:hsl(var(--muted-foreground));display:grid;place-items:center;cursor:pointer}
.recipient-search-v10__clear:hover{background:rgba(255,255,255,.06);color:hsl(var(--foreground))}
.recipient-search-v10__results{position:absolute;inset-inline:0;top:calc(100% + 7px);max-height:310px;overflow:auto;padding:6px;border:1px solid rgba(148,163,184,.22);border-radius:14px;background:#0b1018;box-shadow:0 20px 55px rgba(0,0,0,.48);z-index:9999;overscroll-behavior:contain}
.recipient-search-v10__item{width:100%;border:0;background:transparent;color:#f8fafc;border-radius:10px;padding:10px 11px;display:flex;align-items:center;gap:10px;text-align:right;cursor:pointer;font-family:inherit}
.recipient-search-v10__item:hover,.recipient-search-v10__item:focus-visible{background:rgba(239,68,68,.12);outline:none}
.recipient-search-v10__item>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.recipient-search-v10__item strong{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recipient-search-v10__item small{font-size:12px;color:#cbd5e1;direction:ltr;text-align:right;margin-top:2px}
.recipient-search-v10__avatar,.recipient-search-v10__all-icon{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(239,68,68,.15);color:#ff3535;font-weight:900}
.recipient-search-v10__item.is-all{border-bottom:1px solid rgba(148,163,184,.13);border-radius:10px 10px 6px 6px;margin-bottom:4px}
.recipient-search-v10__item.is-all small{direction:rtl;text-align:right}
.recipient-search-v10__empty{padding:18px 12px;text-align:center;color:#94a3b8;font-size:12px}
.recipient-search-v10__native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}
@media (max-width:640px){
  .recipient-search-v10__results{max-height:min(330px,48vh)}
  .recipient-search-v10__input{font-size:16px} /* prevent iOS input zoom */
  .recipient-search-v10__item{padding:12px 10px}
}