/* Shared viewport guardrails. The device context script adds data-device and
   data-orientation, while CSS remains the source of truth for breakpoints. */
:root {
  --app-inline-gutter: clamp(12px, 3vw, 26px);
}

html[data-device="mobile"] {
  --app-inline-gutter: 12px;
}

html[data-device="tablet"] {
  --app-inline-gutter: 18px;
}

html,
body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.dashboard-shell {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

/* A device canvas is sized by its containing device, never by the browser
   viewport. Using 100vw here makes a card or embedded screen wider than its
   phone frame and creates horizontal overflow on narrow devices. */
.device-screen {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow-x: clip;
}

@media (max-width: 767.98px) {
  html.dashboard-shell,
  body.dashboard-shell,
  body.dashboard-shell .layout-wrapper,
  body.dashboard-shell .layout-container,
  body.dashboard-shell .layout-page,
  body.dashboard-shell .content-wrapper {
    box-sizing: border-box;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .device-screen {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh;
  }
}

/* One opaque, page-level mobile navigation for every dashboard route. Page
   content stays responsible for its own data and actions; this bar is the
   only fixed navigation surface and therefore cannot be trapped by a card or
   a page-specific positioning context. */
.dashboard-mobile-bottom-nav { display: none; }

@media (max-width: 767.98px) {
  body.dashboard-shell .dashboard-mobile-bottom-nav {
    position: fixed !important;
    top: auto !important;
    right: 12px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    z-index: 2000 !important;
    display: grid !important;
    width: auto !important;
    max-width: none !important;
    min-height: 76px;
    box-sizing: border-box;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 6px;
    overflow: visible;
    border: 1px solid #dbe3f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(31, 41, 55, .16);
    isolation: isolate;
    pointer-events: auto;
  }

  body.dashboard-shell .dashboard-mobile-bottom-nav.is-hidden {
    display: none !important;
  }

  body.dashboard-shell .dashboard-mobile-bottom-nav > a {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    padding: 5px 2px;
    border-radius: 10px;
    color: #172033;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(49, 88, 223, .18);
    user-select: none;
  }

  body.dashboard-shell .dashboard-mobile-bottom-nav > a i {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1;
  }

  body.dashboard-shell .dashboard-mobile-bottom-nav > a span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.dashboard-shell .dashboard-mobile-bottom-nav > a.is-active,
  body.dashboard-shell .dashboard-mobile-bottom-nav > a:active,
  body.dashboard-shell .dashboard-mobile-bottom-nav > a:focus-visible {
    background: #e9edff;
    color: #3158df;
    outline: 0;
  }

  body.dashboard-shell .content-wrapper {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

.dashboard-shell .layout-wrapper,
.dashboard-shell .layout-container,
.dashboard-shell .layout-page,
.dashboard-shell .content-wrapper,
.dashboard-shell .content-wrapper > * {
  min-width: 0;
  max-width: 100%;
}

.dashboard-shell .layout-page {
  width: 100%;
  flex-basis: 100%;
}

.dashboard-shell .layout-container {
  min-height: var(--viewport-height, 100dvh);
}

.dashboard-shell .content-wrapper {
  width: 100%;
  overflow-x: clip;
}

.dashboard-shell .content-wrapper > .container-xxl,
.dashboard-shell .content-wrapper > .container-xl,
.dashboard-shell .content-wrapper > .container-lg,
.dashboard-shell .content-wrapper > .container-md,
.dashboard-shell .content-wrapper > .container-sm,
.dashboard-shell .content-wrapper > .container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1199.98px) {
  .dashboard-shell .layout-navbar.navbar-detached {
    width: calc(100% - 1.5rem) !important;
    max-width: none !important;
    margin-right: 0.75rem;
    margin-left: 0.75rem;
  }
}

@media (max-width: 767.98px) {
  .dashboard-shell .content-wrapper {
    padding-right: 0;
    padding-left: 0;
  }

  .dashboard-shell .content-wrapper > .container-xxl,
  .dashboard-shell .content-wrapper > .container-xl,
  .dashboard-shell .content-wrapper > .container-lg,
  .dashboard-shell .content-wrapper > .container-md,
  .dashboard-shell .content-wrapper > .container-sm,
  .dashboard-shell .content-wrapper > .container {
    width: 100%;
    max-width: none;
    padding-right: var(--app-inline-gutter);
    padding-left: var(--app-inline-gutter);
  }

  .dashboard-shell .content-wrapper > .container-xxl.profile-studio,
  .dashboard-shell .content-wrapper > .container-xl.profile-studio,
  .dashboard-shell .content-wrapper > .container.profile-studio {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .dashboard-shell .row,
  .dashboard-shell .card,
  .dashboard-shell .table-responsive {
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-shell .profile-studio__nav {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .dashboard-shell .content-wrapper > .container-xxl,
  .dashboard-shell .content-wrapper > .container-xl,
  .dashboard-shell .content-wrapper > .container-lg,
  .dashboard-shell .content-wrapper > .container-md,
  .dashboard-shell .content-wrapper > .container-sm,
  .dashboard-shell .content-wrapper > .container {
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* Dashboard home uses Bootstrap rows inside the container. Reset only the
   home page's outer rows so their negative gutter margins cannot make the
   banner and cards use different left/right edges on narrow screens. */
@media (max-width: 767.98px) {
  .dashboard-shell .layout-navbar.navbar-detached {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 0.5rem 12px 0 !important;
  }

  .dashboard-shell .content-wrapper > .container-xxl.dashboard-home-page {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .dashboard-shell .dashboard-home-page > .row {
    width: 100%;
    max-width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .dashboard-shell .dashboard-home-page > .row > [class*="col-"] {
    max-width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .dashboard-shell .dashboard-home-page > .alert {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .dashboard-shell .content-wrapper > .container-xxl.profile-studio {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .dashboard-shell .content-wrapper > .container-xxl.dashboard-workspace-page {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .dashboard-shell .content-wrapper > .container-xxl.dashboard-events-page {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .dashboard-shell .dashboard-events-page > .row {
    width: 100%;
    max-width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .dashboard-shell .dashboard-events-page > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .dashboard-shell .dashboard-events-page > .d-flex,
  .dashboard-shell .dashboard-events-page .card,
  .dashboard-shell .dashboard-events-page .card-body,
  .dashboard-shell .dashboard-events-page .card-header,
  .dashboard-shell .dashboard-events-page .table-responsive {
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-shell .dashboard-events-page .card {
    width: 100%;
  }

  .dashboard-shell .dashboard-events-page .card-body > form.row {
    width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .dashboard-shell .dashboard-events-page .card-body > form.row > [class*="col-"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .dashboard-shell .dashboard-workspace-page > .row {
    width: 100%;
    max-width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .dashboard-shell .dashboard-workspace-page > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .dashboard-shell .dashboard-workspace-page .card,
  .dashboard-shell .dashboard-workspace-page .card-body,
  .dashboard-shell .dashboard-workspace-page .card-header,
  .dashboard-shell .dashboard-workspace-page .table-responsive {
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-shell .dashboard-workspace-page .card {
    width: 100%;
  }

  .dashboard-shell .dashboard-workspace-page .card-body > form > .row {
    width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .dashboard-shell .dashboard-workspace-page .card-body > form > .row > [class*="col-"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Settings has a form between the page container and its main row. Reset
     that extra Bootstrap gutter layer, plus the rows inside each settings
     card, so every mobile card shares the same left and right edge. */
  .dashboard-shell .dashboard-settings-page,
  .dashboard-shell .dashboard-settings-page > form,
  .dashboard-shell .dashboard-settings-page .card,
  .dashboard-shell .dashboard-settings-page .card-body,
  .dashboard-shell .dashboard-settings-page .card-header,
  .dashboard-shell .dashboard-settings-page .input-group,
  .dashboard-shell .dashboard-settings-page .form-control,
  .dashboard-shell .dashboard-settings-page .form-select,
  .dashboard-shell .dashboard-settings-page textarea {
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-shell .dashboard-settings-page {
    overflow-x: clip;
  }

  .dashboard-shell .dashboard-settings-page > form {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .dashboard-shell .dashboard-settings-page > form > .row,
  .dashboard-shell .dashboard-settings-page .card-body .row {
    width: 100%;
    max-width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .dashboard-shell .dashboard-settings-page > form > .row > [class*="col-"],
  .dashboard-shell .dashboard-settings-page .card-body .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .dashboard-shell .dashboard-settings-page .input-group > * {
    min-width: 0;
  }

  .dashboard-shell .dashboard-settings-page .input-group .form-control,
  .dashboard-shell .dashboard-settings-page .input-group .form-select {
    width: 1%;
    flex: 1 1 auto;
  }

  .dashboard-shell .dashboard-settings-page .table-responsive {
    width: 100%;
    overflow-x: auto;
  }

  .dashboard-shell .profile-studio > .row {
    width: 100%;
    max-width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .dashboard-shell .profile-studio > .row > [class*="col-"] {
    max-width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .dashboard-shell .profile-studio__hero,
  .dashboard-shell .profile-studio__nav {
    width: 100%;
    max-width: 100%;
  }
}

body.auth-page {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

body.auth-page .arowet-auth-wrapper,
body.auth-page .arowet-left,
body.auth-page .arowet-form-container {
  min-width: 0;
  max-width: 100%;
}

.email-verification-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100% - 24px, 1440px);
  margin: 0 auto 16px;
  padding: 14px 16px;
  border: 1px solid #f0d59c;
  border-radius: 14px;
  background: #fff8e8;
  color: #7a5210;
}

.email-verification-banner__copy {
  min-width: 0;
}

.email-verification-banner__copy strong,
.email-verification-banner__copy p {
  display: block;
  margin: 0;
}

.email-verification-banner__copy strong {
  color: #5f410e;
  font-size: 0.9rem;
}

.email-verification-banner__copy p {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  line-height: 1.45;
}

.email-verification-banner__action {
  flex: 0 0 auto;
}

.email-verification-banner__action .btn {
  white-space: nowrap;
}

body.auth-page .email-verification-banner {
  width: 100%;
  margin: 0 0 18px;
}

body.auth-page .email-verification-banner__action .btn {
  border: 1px solid #7a5210;
  background: #7a5210;
  color: #fff;
}

.arowet-browser-icon {
  display: block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex: 0 0 24px;
  object-fit: contain;
  aspect-ratio: 1;
}

.arowet-browser-icon[hidden] { display: none; }

.dashboard-shell .email-verification-banner__copy strong {
  color: #5f410e !important;
}

.dashboard-shell .email-verification-banner__copy p {
  color: #7a5210 !important;
}

@media (max-width: 575.98px) {
  .email-verification-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .email-verification-banner__action .btn {
    width: 100%;
  }
}

/* Shared dashboard mobile type scale. Keep this in the common responsive
   layer so every dashboard page, including create/edit screens and modals,
   uses the same readable scale without changing desktop typography. */
@media (max-width: 767.98px) {
  body.dashboard-shell {
    --dashboard-mobile-page-title: 24px;
    --dashboard-mobile-section-title: 20px;
    --dashboard-mobile-card-title: 16px;
    --dashboard-mobile-body: 14px;
    --dashboard-mobile-label: 14px;
    --dashboard-mobile-button: 14px;
    --dashboard-mobile-value: 16px;
    --dashboard-mobile-stat: clamp(24px, 7vw, 28px);
    --dashboard-mobile-badge: 12px;
    --dashboard-mobile-leading: 1.45;
  }

  /* All dashboard page containers sit directly under content-wrapper. The
     selector also covers custom mobile-view/mobile-layout roots. */
  body.dashboard-shell .content-wrapper > * :where(h1) {
    font-size: var(--dashboard-mobile-page-title) !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  body.dashboard-shell .content-wrapper > * :where(h2) {
    font-size: var(--dashboard-mobile-section-title) !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  body.dashboard-shell .content-wrapper > * :where(h3, h4, h5, h6) {
    font-size: var(--dashboard-mobile-card-title) !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  /* Legacy dashboard pages use h4 for the page heading and h5 for card
     section headings. Give those semantic headings the same scale as the
     newer mobile layouts. */
  body.dashboard-shell .content-wrapper > * :where(
    .dashboard-page-hero-copy h4, .event-form-page-heading h4,
    .page-hero h4, .dashboard-mobile-heading h1) {
    font-size: var(--dashboard-mobile-page-title) !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  body.dashboard-shell .content-wrapper > * :where(.card-header h5,
    .card-header h6, .dashboard-mobile-card-heading h2,
    .dashboard-mobile-alert-heading h2) {
    font-size: var(--dashboard-mobile-section-title) !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  body.dashboard-shell .content-wrapper > * :where(p, small, .small, .form-text,
    [class*="copy"], [class*="description"], [class*="helper"],
    [class*="subtitle"], [class*="subtext"], [class*="empty"],
    [class*="label"], [class*="meta"], [class*="feedback"],
    [class*="note"], [class*="legend"]) {
    font-size: var(--dashboard-mobile-body) !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  body.dashboard-shell .content-wrapper > * :where(.form-label, label.form-label,
    .form-check-label) {
    font-size: var(--dashboard-mobile-label) !important;
    font-weight: 500 !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  body.dashboard-shell .content-wrapper > * :where(input:not([type="hidden"]),
    select, textarea, .form-control, .form-select) {
    font-size: var(--dashboard-mobile-body) !important;
    line-height: var(--dashboard-mobile-leading) !important;
  }

  body.dashboard-shell .content-wrapper > * :where(.btn, button:not([aria-hidden="true"])) {
    font-size: var(--dashboard-mobile-button) !important;
    font-weight: 600 !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* Common card/row titles and profile copies. */
  body.dashboard-shell .content-wrapper > * :where(.card-title,
    [class*="row"] strong,
    [class*="row"] h3, [class*="row"] h4, [class*="row"] h5,
    [class*="row"] h6, [class*="card__title"], [class*="card__copy"] strong,
    [class*="profile__copy"] strong) {
    font-size: var(--dashboard-mobile-card-title) !important;
    font-weight: 600 !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  /* Main statistics are the intentional exception to the normal value scale. */
  body.dashboard-shell .content-wrapper > * :where(
    [class*="metric"] > strong, [class*="metric"] strong,
    [class*="stat"] > strong, [class*="stat"] strong,
    [class*="stat"] h3, [class*="stat"] h4, [class*="stat"] .fs-4,
    .analytics-mobile-metric-value, .dashboard-mobile-performance h2) {
    font-size: var(--dashboard-mobile-stat) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* Dates, percentages, prices, changes, and row values stay prominent and
     remain readable when their labels wrap. */
  body.dashboard-shell .content-wrapper > * :where(
    [class*="data-value"], [class*="row-value"], [class*="metric-change"],
    [class*="trend"], [class*="clicks"] strong, [class*="rsvp"],
    [class*="price"] strong, [class*="date"], [class*="time"],
    [class*="amount"], [class*="count"], time, [data-value],
    [data-count], [data-percent], [data-percentage], [data-price],
    [data-date], [data-analytics-date-label]) {
    font-size: var(--dashboard-mobile-value) !important;
    font-weight: 600 !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    text-align: right;
    text-overflow: clip;
    white-space: normal;
  }

  body.dashboard-shell .content-wrapper > * :where(.badge, [class*="badge"],
    [class*="status"]) {
    min-width: 0;
    font-size: var(--dashboard-mobile-badge) !important;
    font-weight: 600 !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  /* The shared scale must not make important labels disappear behind a
     mobile card's old ellipsis rules. */
  body.dashboard-shell .content-wrapper > * :where(
    h1, h2, h3, h4, h5, h6, p, small, strong, label,
    [class*="title"], [class*="copy"], [class*="label"],
    [class*="value"], [class*="description"], [class*="meta"]) {
    overflow: visible !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  body.dashboard-shell .content-wrapper > * :where(
    .analytics-mobile-data-row, .links-mobile-row, .qr-mobile-row,
    .dashboard-mobile-alert-row, .events-mobile-event,
    .gallery-mobile-card, .settings-mobile-subscriber) {
    min-height: 48px;
    line-height: var(--dashboard-mobile-leading) !important;
  }

  /* Modals can be rendered at the page root or inside a page container. */
  body.dashboard-shell :where(.modal, [role="dialog"]) :where(.modal-title,
    h1, h2, h3, h4, h5, h6) {
    font-size: var(--dashboard-mobile-section-title) !important;
    line-height: var(--dashboard-mobile-leading) !important;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  body.dashboard-shell :where(.modal, [role="dialog"]) :where(p, small, label,
    .form-label, .form-text, .modal-body, .modal-footer, .btn) {
    font-size: var(--dashboard-mobile-body) !important;
    line-height: var(--dashboard-mobile-leading) !important;
  }

  body.dashboard-shell :where(.modal, [role="dialog"]) :where(.form-label,
    label) {
    font-weight: 500 !important;
  }

}