/* ==========================================================================
   Parkify Enterprise Design System
   File: assets/css/responsive.css
   Purpose: Master responsive system for Parkify Smart Parking Platform
   Depends on: variables.css, typography.css, layout.css, buttons.css, forms.css,
               cards.css, badges.css, tables.css, modal.css, navbar.css,
               footer.css, animations.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Responsive foundation
-------------------------------------------------------------------------- */

:root {
  --pf-vw: 100vw;
  --pf-safe-top: env(safe-area-inset-top, 0px);
  --pf-safe-right: env(safe-area-inset-right, 0px);
  --pf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pf-safe-left: env(safe-area-inset-left, 0px);
  --pf-responsive-page-x: clamp(1rem, 4vw, 4rem);
  --pf-responsive-section-y: clamp(3rem, 7vw, 7rem);
}

html {
  min-width: 320px;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

.pf-responsive-lock {
  max-width: 100%;
  overflow-x: hidden;
}

.pf-safe-area {
  padding-top: max(0px, var(--pf-safe-top));
  padding-right: max(0px, var(--pf-safe-right));
  padding-bottom: max(0px, var(--pf-safe-bottom));
  padding-left: max(0px, var(--pf-safe-left));
}

.pf-safe-area-bottom {
  padding-bottom: max(1rem, var(--pf-safe-bottom));
}

.pf-safe-area-top {
  padding-top: max(1rem, var(--pf-safe-top));
}

/* --------------------------------------------------------------------------
   02. Universal fluid media
-------------------------------------------------------------------------- */

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

.pf-fluid-media {
  width: 100%;
  height: auto;
  display: block;
}

.pf-cover-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-contain-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pf-aspect-square { aspect-ratio: 1 / 1; }
.pf-aspect-video { aspect-ratio: 16 / 9; }
.pf-aspect-photo { aspect-ratio: 4 / 3; }
.pf-aspect-wide { aspect-ratio: 21 / 9; }
.pf-aspect-card { aspect-ratio: 16 / 10; }

/* --------------------------------------------------------------------------
   03. Responsive visibility helpers
-------------------------------------------------------------------------- */

.pf-show-xs,
.pf-show-sm,
.pf-show-md,
.pf-show-lg,
.pf-show-xl,
.pf-show-2xl,
.pf-show-4k {
  display: none !important;
}

.pf-hide {
  display: none !important;
}

.pf-visible {
  visibility: visible !important;
}

.pf-invisible {
  visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   04. Responsive containers
-------------------------------------------------------------------------- */

.pf-container-responsive {
  width: min(100% - var(--pf-responsive-page-x), var(--pf-container-2xl, 88rem));
  margin-inline: auto;
}

.pf-container-bleed {
  width: 100%;
  margin-inline: auto;
}

.pf-container-safe {
  width: min(100% - max(1rem, var(--pf-safe-left)) - max(1rem, var(--pf-safe-right)), var(--pf-container-2xl, 88rem));
  margin-inline: auto;
}

.pf-responsive-section {
  padding-block: var(--pf-responsive-section-y);
}

/* --------------------------------------------------------------------------
   05. Responsive grid utilities
-------------------------------------------------------------------------- */

.pf-r-grid {
  display: grid;
  gap: var(--pf-r-grid-gap, clamp(1rem, 2vw, 1.5rem));
}

.pf-r-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pf-r-grid-min, 18rem)), 1fr));
}

.pf-r-grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pf-r-grid-min, 18rem)), 1fr));
}

.pf-r-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-r-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-r-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-r-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pf-r-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.pf-r-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pf-r-stack-gap, 1rem);
}

.pf-r-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-r-cluster-gap, .75rem);
}

/* --------------------------------------------------------------------------
   06. Extra small phones: <= 360px
-------------------------------------------------------------------------- */

@media (max-width: 360px) {
  :root {
    --pf-responsive-page-x: 1rem;
    --pf-responsive-section-y: 2.25rem;
  }

  html {
    font-size: 14.5px;
  }

  .pf-hide-xs { display: none !important; }
  .pf-show-xs { display: initial !important; }

  .pf-container,
  .container,
  .pf-container-responsive,
  .pf-container--xs,
  .pf-container--sm,
  .pf-container--md,
  .pf-container--lg,
  .pf-container--xl,
  .pf-container--2xl {
    width: min(100% - 1rem, 100%);
  }

  .pf-section,
  .pf-responsive-section {
    padding-block: 2.25rem;
  }

  .pf-hero {
    padding-block: 4.25rem 2rem;
  }

  .pf-r-grid,
  .pf-r-grid-2,
  .pf-r-grid-3,
  .pf-r-grid-4,
  .pf-r-grid-5,
  .pf-r-grid-6,
  .pf-grid,
  .pf-grid--2,
  .pf-grid--3,
  .pf-grid--4,
  .pf-grid--12 {
    grid-template-columns: 1fr !important;
  }

  .pf-inline-between,
  .pf-card__header,
  .pf-card__footer,
  .pf-parking-card__top,
  .pf-parking-card__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .pf-btn,
  .btn,
  .pf-card__actions > *,
  .pf-form__actions > * {
    width: 100%;
  }

  .pf-otp {
    gap: .3rem;
  }

  .pf-otp .pf-input,
  .pf-otp__input {
    width: 2.25rem;
    height: 2.75rem;
  }

  .pf-modal__title {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   07. Small phones: <= 480px
-------------------------------------------------------------------------- */

@media (max-width: 480px) {
  :root {
    --pf-responsive-page-x: 1rem;
    --pf-responsive-section-y: 2.75rem;
  }

  .pf-hide-sm { display: none !important; }
  .pf-show-sm { display: initial !important; }

  h1,
  .h1 {
    font-size: clamp(2.1rem, 13vw, 3.2rem);
    letter-spacing: -.055em;
  }

  h2,
  .h2 {
    font-size: clamp(1.75rem, 10vw, 2.55rem);
  }

  .lead {
    font-size: 1rem;
    line-height: 1.62;
  }

  .pf-navbar__right {
    gap: .4rem;
  }

  .pf-brand__text {
    display: none;
  }

  .pf-mobile-menu__panel {
    width: 100%;
  }

  .pf-form-row,
  .pf-form-row--3,
  .pf-form-row--4,
  .pf-filter-layout,
  .pf-stats-grid,
  .pf-card-grid--2,
  .pf-card-grid--3,
  .pf-card-grid--4 {
    grid-template-columns: 1fr !important;
  }

  .pf-card,
  .card {
    --pf-card-padding: .9rem;
    --pf-card-radius: var(--pf-radius-xl);
  }

  .pf-parking-card--compact,
  .pf-parking-card--horizontal,
  .pf-booking-layout,
  .pf-split,
  .pf-split--equal,
  .pf-split--reverse {
    grid-template-columns: 1fr !important;
  }

  .pf-modal {
    align-items: end;
    padding: 0;
  }

  .pf-modal__dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--pf-radius-3xl) var(--pf-radius-3xl) 0 0;
  }

  .pf-footer__grid {
    grid-template-columns: 1fr !important;
  }

  .pf-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   08. Phones and small tablets: <= 640px
-------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --pf-responsive-page-x: 1rem;
    --pf-responsive-section-y: 3rem;
  }

  .pf-hide-mobile { display: none !important; }
  .pf-show-mobile { display: initial !important; }

  body {
    line-height: 1.6;
  }

  .pf-section,
  .pf-section--sm,
  .pf-section--lg,
  .pf-responsive-section {
    padding-block: clamp(2.25rem, 8vw, 3.5rem);
  }

  .pf-page-header {
    padding-block: 4.5rem 2rem;
  }

  .pf-hero {
    padding-block: clamp(4.75rem, 16vw, 6rem) clamp(2rem, 9vw, 3rem);
  }

  .pf-hero__grid,
  .pf-grid,
  .pf-sidebar-layout,
  .pf-admin-layout,
  .pf-owner-layout {
    grid-template-columns: 1fr !important;
  }

  .pf-admin-main,
  .pf-owner-main {
    padding: 1rem;
  }

  .pf-r-grid-auto,
  .pf-r-grid-fill,
  .pf-card-grid,
  .pf-parking-grid {
    grid-template-columns: 1fr;
  }

  .pf-form__actions,
  .pf-card__actions,
  .pf-table-toolbar__actions,
  .pf-table-toolbar__filters {
    width: 100%;
  }

  .pf-form__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  input,
  select,
  textarea,
  .pf-input,
  .pf-select,
  .pf-textarea {
    font-size: 16px;
  }

  .pf-table-wrap--responsive .pf-table td {
    grid-template-columns: 1fr !important;
  }

  .pf-map-card,
  .pf-map-card__canvas {
    min-height: 18rem;
  }

  .pf-breadcrumbs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pf-breadcrumbs::-webkit-scrollbar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   09. Tablets portrait: <= 768px
-------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .pf-hide-md { display: none !important; }
  .pf-show-md { display: initial !important; }

  .pf-r-grid-3,
  .pf-r-grid-4,
  .pf-r-grid-5,
  .pf-r-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-r-grid-2 {
    grid-template-columns: 1fr;
  }

  .pf-table-toolbar,
  .pf-table-footer,
  .pf-bulk-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .pf-navbar__center {
    display: none;
  }

  .pf-navbar-search {
    display: none;
  }

  .pf-user-button__meta {
    display: none;
  }

  .pf-dashboard-list__item,
  .pf-alert-card,
  .pf-payment-method {
    align-items: flex-start;
  }

  .pf-pricing-card__amount {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .pf-profile-card__stats {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   10. Tablets landscape / small laptops: <= 920px
-------------------------------------------------------------------------- */

@media (max-width: 920px) {
  .pf-hide-tablet { display: none !important; }
  .pf-show-tablet { display: initial !important; }

  .pf-sidebar-layout,
  .pf-admin-layout,
  .pf-owner-layout {
    grid-template-columns: 1fr;
  }

  .pf-split,
  .pf-split--reverse,
  .pf-split--equal,
  .pf-booking-layout,
  .pf-hero__grid {
    grid-template-columns: 1fr;
  }

  .pf-sticky {
    position: relative;
    top: auto;
  }

  .pf-grid--2,
  .pf-grid--3,
  .pf-grid--4,
  .pf-grid--12 {
    grid-template-columns: 1fr;
  }

  .pf-col-span-2,
  .pf-col-span-3,
  .pf-col-span-4,
  .pf-col-span-5,
  .pf-col-span-6,
  .pf-col-span-7,
  .pf-col-span-8,
  .pf-col-span-9,
  .pf-col-span-10,
  .pf-col-span-11,
  .pf-col-span-12 {
    grid-column: auto;
  }

  .pf-card-grid--3,
  .pf-card-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-modal__footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .pf-modal__footer > * {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   11. Small laptops: <= 1024px
-------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .pf-hide-lg { display: none !important; }
  .pf-show-lg { display: initial !important; }

  .pf-navbar__inner,
  .pf-container,
  .container,
  .pf-container-responsive {
    width: min(100% - clamp(1rem, 3vw, 2rem), 100%);
  }

  .pf-nav {
    display: none;
  }

  .pf-nav-toggle {
    display: grid;
  }

  .pf-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-filter-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-mega__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   12. Desktop refinement: >= 1025px
-------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .pf-desktop-only {
    display: initial !important;
  }

  .pf-mobile-only {
    display: none !important;
  }

  .pf-dashboard-shell {
    min-height: 100vh;
    min-height: 100svh;
  }

  .pf-hover-desktop-lift:hover {
    transform: translateY(-3px);
  }
}

/* --------------------------------------------------------------------------
   13. Large desktop: >= 1280px
-------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  .pf-show-xl { display: initial !important; }

  .pf-container-responsive {
    width: min(100% - 4rem, var(--pf-container-2xl, 88rem));
  }

  .pf-r-grid-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-r-grid-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-r-grid-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-r-grid-xl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .pf-parking-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .pf-dashboard-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   14. 2XL / ultrawide: >= 1536px
-------------------------------------------------------------------------- */

@media (min-width: 1536px) {
  .pf-show-2xl { display: initial !important; }

  :root {
    --pf-responsive-page-x: 5rem;
  }

  .pf-container--2xl,
  .pf-container-responsive {
    width: min(100% - 5rem, 1500px);
  }

  .pf-parking-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }

  .pf-card-grid--lg {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  }

  .pf-modal--2xl {
    --pf-modal-width: 1320px;
  }
}

/* --------------------------------------------------------------------------
   15. 4K and high density large screens: >= 2560px
-------------------------------------------------------------------------- */

@media (min-width: 2560px) {
  .pf-show-4k { display: initial !important; }

  :root {
    --pf-responsive-page-x: 7rem;
    --pf-responsive-section-y: 8rem;
  }

  html {
    font-size: 18px;
  }

  .pf-container--2xl,
  .pf-container-responsive {
    width: min(100% - 8rem, 1760px);
  }

  .pf-navbar__inner,
  .pf-subnav__inner {
    width: min(100% - 8rem, 1760px);
  }

  .pf-parking-grid {
    grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
  }

  .pf-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }

  .pf-hero {
    padding-block: 10rem 7rem;
  }

  .pf-section,
  .pf-responsive-section {
    padding-block: 8rem;
  }
}

/* --------------------------------------------------------------------------
   16. Landscape phones and short screens
-------------------------------------------------------------------------- */

@media (orientation: landscape) and (max-height: 540px) {
  :root {
    --pf-responsive-section-y: 2rem;
  }

  .pf-navbar {
    --pf-nav-height-local: 58px;
  }

  .pf-hero {
    padding-block: 4rem 2rem;
  }

  .pf-section,
  .pf-responsive-section {
    padding-block: 2rem;
  }

  .pf-modal__dialog {
    max-height: 94vh;
  }

  .pf-modal__body {
    max-height: 58vh;
  }

  .pf-mobile-menu__panel {
    width: min(100%, 520px);
  }

  .pf-card__media img,
  .pf-card__media video,
  .pf-parking-card__media {
    min-height: 9rem;
  }
}

/* --------------------------------------------------------------------------
   17. Foldable and narrow tall devices
-------------------------------------------------------------------------- */

@media (max-width: 540px) and (min-height: 760px) {
  .pf-mobile-menu__body {
    padding-bottom: 2rem;
  }

  .pf-bottom-sheet .pf-modal__dialog,
  .pf-modal__dialog {
    max-height: 88vh;
  }
}

/* --------------------------------------------------------------------------
   18. Touch and pointer capabilities
-------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
  .pf-hover-lift:hover,
  .pf-hover-scale:hover,
  .pf-hover-glow:hover,
  .pf-card--interactive:hover,
  .pf-parking-card:hover,
  .pf-mega-card:hover {
    transform: none;
  }

  .pf-btn,
  .btn,
  .pf-nav__link,
  .pf-mobile-nav__link,
  .pf-dropdown__link,
  .pf-table-action,
  .pf-nav-action {
    min-height: 44px;
  }

  .pf-nav-action,
  .pf-table-action,
  .pf-modal__close {
    min-width: 44px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .pf-touch-only {
    display: none !important;
  }

  .pf-pointer-fine-hover:hover {
    transform: translateY(-2px);
  }
}

/* --------------------------------------------------------------------------
   19. High DPI screens
-------------------------------------------------------------------------- */

@media (min-resolution: 2dppx) {
  .pf-hairline {
    border-width: .5px;
  }

  .pf-card,
  .pf-navbar,
  .pf-modal__dialog {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* --------------------------------------------------------------------------
   20. Dashboard responsive helpers
-------------------------------------------------------------------------- */

.pf-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.pf-dashboard-col-3 { grid-column: span 3; }
.pf-dashboard-col-4 { grid-column: span 4; }
.pf-dashboard-col-5 { grid-column: span 5; }
.pf-dashboard-col-6 { grid-column: span 6; }
.pf-dashboard-col-7 { grid-column: span 7; }
.pf-dashboard-col-8 { grid-column: span 8; }
.pf-dashboard-col-9 { grid-column: span 9; }
.pf-dashboard-col-12 { grid-column: span 12; }

@media (max-width: 1180px) {
  .pf-dashboard-col-3,
  .pf-dashboard-col-4 {
    grid-column: span 6;
  }

  .pf-dashboard-col-5,
  .pf-dashboard-col-6,
  .pf-dashboard-col-7,
  .pf-dashboard-col-8,
  .pf-dashboard-col-9 {
    grid-column: span 12;
  }
}

@media (max-width: 720px) {
  .pf-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .pf-dashboard-col-3,
  .pf-dashboard-col-4,
  .pf-dashboard-col-5,
  .pf-dashboard-col-6,
  .pf-dashboard-col-7,
  .pf-dashboard-col-8,
  .pf-dashboard-col-9,
  .pf-dashboard-col-12 {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
   21. Charts and analytics responsive
-------------------------------------------------------------------------- */

.pf-chart-responsive {
  width: 100%;
  min-height: clamp(16rem, 30vw, 28rem);
}

.pf-chart-responsive--sm {
  min-height: clamp(12rem, 22vw, 18rem);
}

.pf-chart-responsive--lg {
  min-height: clamp(20rem, 36vw, 34rem);
}

@media (max-width: 640px) {
  .pf-chart-responsive,
  .pf-chart-responsive--sm,
  .pf-chart-responsive--lg {
    min-height: 15rem;
  }
}

/* --------------------------------------------------------------------------
   22. Parking map responsive
-------------------------------------------------------------------------- */

.pf-parking-map-responsive {
  min-height: clamp(22rem, 52vh, 42rem);
}

@media (max-width: 920px) {
  .pf-parking-map-responsive {
    min-height: 24rem;
  }
}

@media (max-width: 640px) {
  .pf-parking-map-responsive {
    min-height: 18rem;
    border-radius: var(--pf-radius-xl);
  }
}

/* --------------------------------------------------------------------------
   23. Responsive spacing utilities
-------------------------------------------------------------------------- */

.pf-r-p-0 { padding: 0 !important; }
.pf-r-m-0 { margin: 0 !important; }

@media (max-width: 640px) {
  .pf-r-mobile-p-sm { padding: .75rem !important; }
  .pf-r-mobile-p-md { padding: 1rem !important; }
  .pf-r-mobile-mt-md { margin-top: 1rem !important; }
  .pf-r-mobile-mb-md { margin-bottom: 1rem !important; }
  .pf-r-mobile-gap-sm { gap: .75rem !important; }
  .pf-r-mobile-gap-md { gap: 1rem !important; }
}

@media (min-width: 1025px) {
  .pf-r-desktop-p-lg { padding: 1.5rem !important; }
  .pf-r-desktop-p-xl { padding: 2rem !important; }
  .pf-r-desktop-gap-lg { gap: 1.5rem !important; }
  .pf-r-desktop-gap-xl { gap: 2rem !important; }
}

/* --------------------------------------------------------------------------
   24. Responsive text alignment
-------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .pf-text-mobile-left { text-align: left !important; }
  .pf-text-mobile-center { text-align: center !important; }
  .pf-text-mobile-right { text-align: right !important; }
}

@media (min-width: 1025px) {
  .pf-text-desktop-left { text-align: left !important; }
  .pf-text-desktop-center { text-align: center !important; }
  .pf-text-desktop-right { text-align: right !important; }
}

/* --------------------------------------------------------------------------
   25. Print optimization
-------------------------------------------------------------------------- */

@media print {
  @page {
    margin: 1.2cm;
  }

  html,
  body {
    color: #000 !important;
    background: #fff !important;
    font-size: 11pt !important;
  }

  .pf-no-print,
  .pf-navbar,
  .pf-subnav,
  .pf-footer,
  .pf-mobile-menu,
  .pf-modal__backdrop,
  .pf-card__actions,
  .pf-form__actions,
  .pf-table-toolbar,
  .pf-table-footer,
  .pf-bulk-bar {
    display: none !important;
  }

  .pf-print-only {
    display: block !important;
  }

  .pf-page,
  .pf-card,
  .pf-table-wrap,
  .pf-modal__dialog {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
    border-color: #999 !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  .pf-section,
  .pf-responsive-section {
    padding-block: 1rem !important;
  }

  .pf-container,
  .container,
  .pf-container-responsive {
    width: 100% !important;
    max-width: none !important;
  }
}

/* --------------------------------------------------------------------------
   26. Reduced data and performance preferences
-------------------------------------------------------------------------- */

@media (prefers-reduced-data: reduce) {
  .pf-page::after,
  .pf-card::after,
  .pf-modal__dialog::before {
    display: none !important;
  }

  .pf-heavy-visual {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   27. Final safety overrides
-------------------------------------------------------------------------- */

.pf-min-w-0 {
  min-width: 0 !important;
}

.pf-max-w-full {
  max-width: 100% !important;
}

.pf-overflow-x-auto {
  overflow-x: auto !important;
}

.pf-overflow-x-hidden {
  overflow-x: hidden !important;
}

.pf-break-anywhere {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.pf-nowrap {
  white-space: nowrap !important;
}

.pf-wrap {
  white-space: normal !important;
}

.pf-scrollbar-hidden {
  scrollbar-width: none;
}

.pf-scrollbar-hidden::-webkit-scrollbar {
  display: none;
}