/* Shared responsive guardrails. Keep page-specific visual rules in their own stylesheets. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.row,
[class*="col-"] {
  min-width: 0;
}

/* Marketing pages and the homepage visual system. */
@media (max-width: 767.98px) {
  .arowet-page-nav__inner,
  .arowet-site-footer .container,
  .studio-home > .container,
  .studio-home > section > .container {
    width: 100%;
    max-width: 100%;
  }

  .studio-home,
  .studio-home > section,
  .studio-home .bento-grid,
  .studio-home .bento-card,
  .studio-home .bento-card__visual,
  .studio-home .studio-home__section-head,
  .studio-home .creator-details-section-head {
    min-width: 0;
    max-width: 100%;
  }

  .studio-home__heading,
  .studio-home__heading--flip,
  .studio-home__heading--flip-auto {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .studio-home__heading--flip,
  .studio-home__heading--flip-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap !important;
    gap: 0.08em;
  }

  .studio-home__heading-lead,
  .studio-home__heading-flip,
  .studio-home__heading--flip-auto .studio-home__heading-flip {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    display: block;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .studio-home__heading-flip::before,
  .studio-home__heading-flip::after {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .studio-home__heading--flip-auto .studio-home__heading-flip::before {
    width: 100% !important;
    left: 0 !important;
    transform: rotateX(-90deg) !important;
  }

  .studio-home__copy,
  .studio-home__lead,
  .studio-home__feature-card p,
  .studio-home__step-copy,
  .studio-home__benefit-card p,
  .bento-card__subtitle,
  .arowet-social-card__tags {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .studio-home__actions,
  .studio-home__cta-actions,
  .studio-home__benefit-actions {
    max-width: 100%;
  }

  .studio-home__button,
  .arowet-home__button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .arowet-static-cards-container,
  .bento-grid,
  .studio-home__feature-grid,
  .studio-home__workflow-layout,
  .studio-home__usecase-explorer,
  .creator-details-hero__grid {
    width: 100%;
    max-width: 100%;
  }

  .arowet-social-card,
  .bento-card,
  .studio-home__feature-card,
  .studio-home__step-card,
  .studio-home__benefit-card,
  .creator-details-cards__card,
  .product-ecosystem__stage,
  .creator-details-hero {
    overflow-wrap: anywhere;
  }

  .studio-home__social-stage,
  .studio-home__hero-panel,
  .studio-home__motion-carousel,
  .studio-home__beam-scene,
  .studio-home__cta {
    width: 100%;
    max-width: 100%;
  }

  .studio-home__hero-frame img,
  .studio-home__feature-media img,
  .product-ecosystem img,
  .creator-details-hero img {
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  /* The homepage rail already controls the outer width. Remove the
     additional Bootstrap container padding so sections use a 12px gutter. */
  body.studio-home-shell .studio-home__section > .container,
  body.studio-home-shell .bento-features > .container {
    width: calc(100% - 24px);
    max-width: none;
    padding-inline: 0;
  }

  body.studio-home-shell .creator-details-nav {
    width: 100%;
    align-items: stretch;
  }

  body.studio-home-shell .creator-details-nav__links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  body.studio-home-shell .creator-details-nav__link {
    width: 100%;
    min-width: 0;
    padding-inline: 4px;
    font-size: clamp(0.62rem, 2.8vw, 0.74rem);
    letter-spacing: 0.03em;
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
  }

  body.studio-home-shell .creator-details-nav__actions {
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  body.studio-home-shell .creator-details-nav__action {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 8px;
    white-space: nowrap;
  }
}

@media (max-width: 575.98px) {
  .arowet-page-nav__inner,
  .arowet-site-footer .container,
  .studio-home > .container,
  .studio-home > section > .container {
    padding-inline: 12px;
  }

  .studio-home__section {
    padding-block: 56px;
  }

  .studio-home__cta,
  .studio-home__feature-card,
  .studio-home__step-card,
  .studio-home__benefit-card,
  .studio-home__hero-panel,
  .creator-details-cards__panel {
    padding-inline: 18px;
  }

  .studio-home__heading,
  .studio-home__heading--flip,
  .studio-home__heading--flip-auto {
    font-size: clamp(1.65rem, 8.6vw, 2.2rem);
  }

  .bento-card {
    padding: 24px 18px;
  }

  .bento-card__title {
    font-size: clamp(1.35rem, 7vw, 1.7rem);
    line-height: 1.12;
  }

  .bento-card__visual > [style*="width: 220px"] {
    width: min(220px, 100%) !important;
  }

  .product-ecosystem__integration {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.studio-home-shell .studio-home__section > .container,
  body.studio-home-shell .bento-features > .container {
    padding-inline: 0;
  }

  body.arowet-public-profile {
    padding-inline: 12px;
  }

  .nav-tabs,
  .nav-pills {
    max-width: 100%;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/* Dashboard and admin shells. */
body.dashboard-shell,
body.superadmin-shell {
  overflow-x: hidden;
}

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

.dashboard-shell .card,
.dashboard-shell .card-body,
.dashboard-shell .modal-content,
.superadmin-shell .card,
.superadmin-shell .card-body {
  min-width: 0;
  max-width: 100%;
}

.dashboard-shell h1,
.dashboard-shell h2,
.dashboard-shell h3,
.dashboard-shell h4,
.dashboard-shell h5,
.dashboard-shell h6,
.superadmin-shell h1,
.superadmin-shell h2,
.superadmin-shell h3,
.superadmin-shell h4,
.superadmin-shell h5,
.superadmin-shell h6,
.dashboard-shell p,
.superadmin-shell p {
  overflow-wrap: anywhere;
}

.dashboard-shell .table-responsive,
.superadmin-shell .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  .dashboard-shell .content-wrapper,
  .superadmin-shell .content-wrapper {
    overflow-x: hidden;
  }

  .dashboard-shell .container-xxl,
  .dashboard-shell .container-xl,
  .dashboard-shell .container-lg,
  .dashboard-shell .container-md,
  .dashboard-shell .container-sm,
  .dashboard-shell .container,
  .superadmin-shell .container-xxl,
  .superadmin-shell .container-xl,
  .superadmin-shell .container-lg,
  .superadmin-shell .container-md,
  .superadmin-shell .container-sm,
  .superadmin-shell .container {
    width: 100%;
    max-width: 100%;
  }

  .dashboard-shell .btn,
  .superadmin-shell .btn {
    max-width: 100%;
    white-space: normal;
  }

  .dashboard-shell .modal-dialog,
  .superadmin-shell .modal-dialog {
    width: calc(100% - 1rem);
    max-width: none;
    margin-inline: auto;
  }

  .dashboard-shell .modal-content,
  .superadmin-shell .modal-content {
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
  }
}

@media (max-width: 575.98px) {
  .dashboard-shell .content-wrapper,
  .superadmin-shell .content-wrapper {
    padding-inline: 0.75rem;
  }

  .dashboard-shell .card-body,
  .superadmin-shell .card-body {
    padding: 1rem;
  }

  .dashboard-shell .modal-header,
  .dashboard-shell .modal-body,
  .dashboard-shell .modal-footer,
  .superadmin-shell .modal-header,
  .superadmin-shell .modal-body,
  .superadmin-shell .modal-footer {
    padding-inline: 1rem;
  }
}

/* Auth forms. */
body.auth-page {
  overflow-x: hidden;
}

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

.arowet-form-container h1,
.arowet-form-container h2,
.arowet-form-container p,
.auth-notice {
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .arowet-header,
  .arowet-form-container {
    max-width: 100%;
  }

  .arowet-form-container h1,
  .arowet-setup-step__header h1 {
    font-size: clamp(1.9rem, 9vw, 2.4rem);
    line-height: 1.08;
  }

  .arowet-form-container .btn,
  .arowet-auth-form-actions .btn,
  .arowet-action-buttons .btn,
  .arowet-setup-actions .btn {
    width: 100%;
    max-width: 100%;
  }
}

/* Public profile and payment modals. */
.arowet-public-profile,
.arowet-public-profile .dashboard-container,
.arowet-public-profile .subscription-modal .modal-content {
  min-width: 0;
  max-width: 100%;
}

.arowet-public-profile .subscription-modal .modal-dialog {
  width: min(100% - 1.5rem, 960px);
  max-width: 960px;
}

.arowet-public-profile .subscription-modal .modal-body,
.arowet-public-profile .subscription-modal .row,
.arowet-public-profile .subscription-modal [class*="col-"] {
  min-width: 0;
}

.arowet-public-profile .subscription-modal p,
.arowet-public-profile .subscription-modal h1,
.arowet-public-profile .subscription-modal h2,
.arowet-public-profile .subscription-modal h3,
.arowet-public-profile .subscription-modal h4,
.arowet-public-profile .subscription-modal h5,
.arowet-public-profile .subscription-modal h6 {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .arowet-public-profile .subscription-modal .modal-dialog {
    width: calc(100% - 1rem);
    margin: 0.5rem auto;
  }

  .arowet-public-profile .subscription-modal .modal-content {
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
  }
}

/* Dashboard shell: use the whole mobile viewport without changing desktop layout. */
.dashboard-shell,
.dashboard-shell .layout-wrapper,
.dashboard-shell .layout-container,
.dashboard-shell .layout-page,
.dashboard-shell .content-wrapper {
  min-width: 0;
  max-width: 100%;
}

/* Keep the sidebar header fixed while the navigation list gets the remaining
   height. This makes both native touch scrolling and PerfectScrollbar work
   in the desktop and off-canvas mobile drawer. */
.dashboard-shell .layout-menu {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dashboard-shell .layout-menu .app-brand {
  flex: 0 0 auto;
}

.dashboard-shell .layout-menu .menu-inner {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dashboard-shell .layout-menu .menu-inner > .menu-item,
.dashboard-shell .layout-menu .menu-inner > .menu-header {
  max-width: 100%;
}

@media (max-width: 1199.98px) {
  .dashboard-shell .layout-container,
  .dashboard-shell .layout-page,
  .dashboard-shell .content-wrapper {
    width: 100%;
  }

  .dashboard-shell .layout-page {
    margin: 0 !important;
    padding-inline: 0 !important;
  }

  .dashboard-shell .content-wrapper {
    padding-inline: 0 !important;
    overflow-x: hidden;
  }

  .dashboard-shell .layout-menu {
    width: min(17rem, 86vw);
    max-width: 86vw;
  }

  /* Keep the full Arowet wordmark inside the mobile drawer header. The
     vendor logo image has a large intrinsic width, which otherwise causes
     the drawer to show only a cropped section of the logo. */
  .dashboard-shell .layout-menu .app-brand {
    overflow: visible;
  }

  .dashboard-shell .layout-menu .app-brand-link {
    min-width: 0;
    padding-right: 2.25rem;
  }

  .dashboard-shell .layout-menu .app-brand-logo {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
    overflow: hidden;
  }

  .dashboard-shell .layout-menu .app-brand-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: min(10.5rem, 100%);
    max-width: 100%;
    height: auto;
    max-height: 2.5rem;
    object-fit: contain;
    object-position: left center;
  }

  .dashboard-shell .layout-menu .app-brand-img-collapsed {
    display: none !important;
    visibility: hidden !important;
  }

  /* A stale desktop collapse class must not replace the wordmark while the
     sidebar is being used as the mobile drawer. */
  html.layout-menu-collapsed .dashboard-shell .layout-menu .app-brand .app-brand-img,
  html.layout-menu-expanded .dashboard-shell .layout-menu .app-brand .app-brand-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html.layout-menu-collapsed .dashboard-shell .layout-menu .app-brand .app-brand-img-collapsed,
  html.layout-menu-expanded .dashboard-shell .layout-menu .app-brand .app-brand-img-collapsed {
    display: none !important;
    visibility: hidden !important;
  }

  /* A desktop collapse state can remain on the root/menu while switching to
     a phone viewport. Keep the mobile drawer expanded with readable labels. */
  .dashboard-shell .layout-menu .menu-inner > .menu-item > .menu-link {
    padding-left: 1rem !important;
  }

  .dashboard-shell .layout-menu .menu-inner > .menu-header {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    overflow: visible !important;
    text-indent: 0 !important;
  }

  .dashboard-shell .layout-menu .menu-inner > .menu-item > .menu-link > div,
  .dashboard-shell .layout-menu .menu-inner > .menu-header .menu-header-text {
    overflow: visible !important;
    opacity: 1 !important;
    text-indent: 0 !important;
    text-overflow: clip !important;
    white-space: nowrap;
  }

  .dashboard-shell .layout-menu .menu-inner > .menu-item > .menu-link .menu-icon {
    width: 1.5rem !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    text-align: left !important;
  }

  .dashboard-shell .layout-navbar.navbar-detached {
    width: calc(100% - 1.5rem) !important;
    max-width: none !important;
    margin: 0.75rem auto 0 !important;
    padding-inline: 0.85rem !important;
  }

  .dashboard-shell .content-wrapper > .dashboard-workspace-page,
  .dashboard-shell .content-wrapper > .container-xxl {
    width: 100%;
    max-width: none;
    padding-inline: 0.75rem !important;
  }

  .dashboard-shell .dashboard-workspace-page,
  .dashboard-shell .content-wrapper > .container-xxl,
  .dashboard-shell .content-wrapper > .container-xxl > .row,
  .dashboard-shell .dashboard-workspace-page > .row,
  .dashboard-shell .dashboard-workspace-page > .row > [class*='col-'],
  .dashboard-shell .dashboard-workspace-page .card,
  .dashboard-shell .dashboard-workspace-page .card-body,
  .dashboard-shell .dashboard-workspace-page .card-header {
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-shell .dashboard-workspace-page .card,
  .dashboard-shell .content-wrapper > .container-xxl .card {
    width: 100%;
  }

  .dashboard-shell .dashboard-workspace-page .row.g-4 {
    --bs-gutter-x: 0.9rem;
    --bs-gutter-y: 0.9rem;
  }

  .dashboard-shell .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .dashboard-shell .table-responsive > .table {
    min-width: 36rem;
  }

  .dashboard-shell .card-header.d-flex {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .dashboard-shell .card-header.d-flex > .input-group,
  .dashboard-shell .card-header.d-flex > .input-group[style] {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100%;
  }

  .dashboard-shell .input-group,
  .dashboard-shell .form-control,
  .dashboard-shell .form-select,
  .dashboard-shell textarea {
    min-width: 0;
    max-width: 100%;
  }

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

  .dashboard-shell .dashboard-profile-avatar-row {
    flex-wrap: wrap;
  }

  .dashboard-shell .dashboard-profile-avatar-row .button-wrapper {
    min-width: 0;
    flex: 1 1 12rem;
  }

  .dashboard-shell .dashboard-profile-avatar-row img {
    max-width: 100%;
  }

  .dashboard-shell canvas,
  .dashboard-shell .apexcharts-canvas,
  .dashboard-shell .apexcharts-svg {
    max-width: 100% !important;
  }

  .dashboard-shell .layout-menu-toggle[aria-controls='layout-menu'] {
    flex: 0 0 auto;
  }
}

@media (max-width: 767.98px) {
  .dashboard-shell,
  .dashboard-shell .layout-wrapper,
  .dashboard-shell .layout-container {
    width: 100%;
    max-width: 100%;
  }

  /* Keep every dashboard page flush with the phone viewport. The vendor
     layout uses a flex-basis/width combination that can leave a thin strip
     on the right on narrow screens. */
  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 {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }

  body.dashboard-shell .layout-page {
    flex: 1 1 0 !important;
  }

  .dashboard-shell .layout-wrapper {
    min-height: 100dvh;
  }

  .dashboard-shell .layout-navbar.navbar-detached {
    width: calc(100% - 1rem) !important;
    margin: 0.5rem auto 0 !important;
    min-height: 3.5rem;
    border-radius: 0.75rem;
    padding-inline: 0.65rem !important;
  }

  .dashboard-shell .layout-navbar .layout-menu-toggle {
    margin-right: 0.45rem !important;
  }

  .dashboard-shell .layout-navbar .layout-menu-toggle .nav-link {
    margin-right: 0 !important;
    padding-inline: 0.15rem !important;
  }

  .dashboard-shell .layout-navbar #navbar-collapse {
    gap: 0.45rem;
    overflow: hidden;
  }

  .dashboard-shell .layout-navbar #navbar-collapse > .navbar-nav:first-child,
  .dashboard-shell .layout-navbar .dashboard-header-search {
    min-width: 0;
  }

  .dashboard-shell .layout-navbar .dashboard-header-search {
    gap: 0.4rem;
  }

  .dashboard-shell .layout-navbar .dashboard-header-search-input {
    min-width: 0;
    padding-inline: 0.1rem;
    font-size: 0.875rem;
    text-overflow: ellipsis;
  }

  .dashboard-shell .layout-navbar .dropdown-user,
  .dashboard-shell .layout-navbar .dropdown-user > .nav-link,
  .dashboard-shell .layout-navbar .dropdown-user .avatar {
    flex: 0 0 auto;
  }

  .dashboard-shell .layout-navbar .dropdown-user img {
    width: 2rem !important;
    height: 2rem;
    object-fit: cover;
  }

  .dashboard-shell .dashboard-workspace-page {
    padding-top: 0.75rem !important;
    padding-bottom: 1rem !important;
  }

  .dashboard-shell .dashboard-workspace-page .row.g-4 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }

  .dashboard-shell .dashboard-workspace-page .card-body,
  .dashboard-shell .dashboard-workspace-page .card-header {
    padding-inline: 1rem;
  }

  .dashboard-shell .dashboard-workspace-page .card-body {
    overflow-wrap: anywhere;
  }

  .dashboard-shell .dashboard-profile-avatar-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  .dashboard-shell .dashboard-profile-avatar-row .button-wrapper {
    width: 100%;
    flex: 1 1 auto;
  }

  .dashboard-shell .dashboard-profile-avatar-row .button-wrapper .btn {
    max-width: 100%;
  }

  .dashboard-shell form > .d-flex.gap-2,
  .dashboard-shell .card-footer.d-flex,
  .dashboard-shell .modal-footer.d-flex {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-shell form > .d-flex.gap-2 > .btn,
  .dashboard-shell form > .d-flex.gap-2 > a,
  .dashboard-shell .card-footer.d-flex > .btn,
  .dashboard-shell .modal-footer.d-flex > .btn {
    width: 100%;
    max-width: 100%;
    margin-inline: 0 !important;
  }

  .dashboard-shell .btn-group {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .dashboard-shell .btn-group > .btn {
    flex: 1 1 auto;
  }

  .dashboard-shell .modal-dialog {
    width: calc(100% - 1rem);
    max-width: none;
    margin: 0.5rem auto;
  }

  .dashboard-shell .modal-content {
    max-width: 100%;
    max-height: calc(100dvh - 1rem);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .dashboard-shell .modal-body,
  .dashboard-shell .modal-header,
  .dashboard-shell .modal-footer {
    min-width: 0;
  }

  .dashboard-shell .modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .dashboard-shell .modal-footer > .btn {
    flex: 1 1 auto;
    margin: 0 !important;
  }

  /* The vendor CSS already supplies the transform/open state. These values
     keep the drawer usable on narrow phones and preserve the overlay layer. */
  .dashboard-shell .layout-menu {
    width: min(17rem, 86vw);
    max-width: 86vw;
  }

  .dashboard-shell .layout-overlay {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .dashboard-shell .layout-navbar.navbar-detached {
    width: calc(100% - 1rem) !important;
    padding-inline: 0.55rem !important;
  }

  .dashboard-shell .content-wrapper > .dashboard-workspace-page,
  .dashboard-shell .content-wrapper > .container-xxl {
    padding-inline: 0.5rem !important;
  }

  .dashboard-shell .dashboard-workspace-page .row.g-4 {
    --bs-gutter-x: 0.65rem;
    --bs-gutter-y: 0.65rem;
  }

  .dashboard-shell .dashboard-workspace-page .card-body,
  .dashboard-shell .dashboard-workspace-page .card-header {
    padding-inline: 0.9rem;
  }

  .dashboard-shell .dashboard-workspace-page .card-header.d-flex {
    gap: 0.6rem;
  }

  .dashboard-shell .table-responsive > .table {
    min-width: 34rem;
  }

  .dashboard-shell .modal-footer > .btn {
    width: 100%;
  }
}

/* Shared mobile dashboard navigation. Individual pages keep their own
   colors and active state, while this component owns the viewport geometry. */
.dashboard-shell nav[class*="mobile-bottom-nav"] {
  display: none;
}

@media (max-width: 767.98px) {
  /* Keep the shared nav fixed to the viewport. A transformed, filtered, or
     contained ancestor would otherwise turn position: fixed into a card-
     relative element. The Design nav is rendered beside content-wrapper so
     it is also outside page cards and preview/export markup. */
  body.dashboard-shell:has(nav[class*="mobile-bottom-nav"]) .layout-wrapper,
  body.dashboard-shell:has(nav[class*="mobile-bottom-nav"]) .layout-container,
  body.dashboard-shell:has(nav[class*="mobile-bottom-nav"]) .layout-page,
  body.dashboard-shell:has(nav[class*="mobile-bottom-nav"]) .content-wrapper {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
    overflow: visible !important;
  }

  .dashboard-shell nav[class*="mobile-bottom-nav"] {
    position: fixed !important;
    z-index: 1100 !important;
    top: auto !important;
    right: 12px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: calc(100dvw - 24px) !important;
    height: 76px !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 7px 6px !important;
    border: 1px solid #dfe5ee !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(31, 41, 55, .16) !important;
    isolation: isolate;
    opacity: 1 !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    pointer-events: auto;
  }

  .dashboard-shell nav[class*="mobile-bottom-nav"] > a {
    display: flex !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: unset !important;
    min-height: 46px !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px !important;
    overflow: hidden !important;
    padding: 5px 4px !important;
    border-radius: 10px;
    font-size: .6rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-decoration: none;
    touch-action: manipulation;
  }

  .dashboard-shell nav[class*="mobile-bottom-nav"] > a > i {
    flex: 0 0 auto;
    font-size: 1.05rem !important;
    line-height: 1 !important;
  }

  .dashboard-shell nav[class*="mobile-bottom-nav"] > a > span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: center;
  }
}

@media print {
  .dashboard-shell nav[class*="mobile-bottom-nav"] {
    display: none !important;
  }
}