/* Mobile polish overrides - deployed 2026-05-31 */
/* Desktop analytics fix - keep Earning Reports aligned on common laptop widths. */
@media (min-width: 981px) {
  .report-layout--analytics {
    grid-template-columns: minmax(178px, .76fr) minmax(230px, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .report-layout--analytics .report-summary {
    min-width: 0 !important;
  }

  .report-layout--analytics .report-score {
    margin-bottom: 12px !important;
  }

  .report-layout--analytics .report-note {
    max-width: 220px !important;
    margin-bottom: 0 !important;
  }

  .report-layout--analytics .report-chart,
  .report-layout--analytics .report-chart__item {
    height: 178px !important;
    min-height: 178px !important;
  }

  .report-layout--analytics .report-chart {
    gap: 8px !important;
    padding: 8px 4px 0 !important;
  }

  .report-layout--analytics .mini-summary--wide {
    margin-top: 4px !important;
    padding: 18px 20px !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  #app {
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.vexa-sidebar-open {
    overflow: hidden !important;
  }

  .mobile-sidebar-toggle {
    color: var(--vx-icon-primary, #4d5169);
    background: var(--vx-surface, #fff);
    border: 1px solid var(--vx-border-subtle, #ececf6);
    border-radius: 12px;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    display: grid;
    flex: 0 0 52px;
    box-shadow: 0 8px 20px rgba(89, 93, 118, .12);
  }

  html[data-theme="dark"] .mobile-sidebar-toggle {
    color: var(--vx-icon-primary, #d6deef) !important;
    background: var(--vx-surface-raised, #202a44) !important;
    border-color: var(--vx-border, #aebcdc33) !important;
    box-shadow: 0 10px 24px rgba(4, 8, 20, .34) !important;
  }

  .mobile-sidebar-toggle svg {
    width: 22px;
    height: 22px;
  }

  .mobile-sidebar-overlay {
    z-index: 78;
    pointer-events: none;
    opacity: 0;
    background: rgba(21, 23, 38, .42);
    border: 0;
    padding: 0;
    display: block;
    position: fixed;
    inset: 0;
    transition: opacity .22s ease;
  }

  body.vexa-sidebar-open .mobile-sidebar-overlay {
    pointer-events: auto;
    opacity: 1;
  }

  .sidebar {
    z-index: 80 !important;
    display: flex !important;
    width: min(82vw, 306px) !important;
    max-width: 306px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 18px 14px 18px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateX(-105%) !important;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), box-shadow .24s ease !important;
    box-shadow: none !important;
  }

  body.vexa-sidebar-open .sidebar {
    transform: translateX(0) !important;
    box-shadow: 18px 0 46px rgba(30, 35, 70, .24) !important;
  }

  .sidebar-scroll {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .brand-row {
    padding-bottom: 22px !important;
  }

  .dashboard-shell {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .dashboard-main {
    height: auto !important;
    min-height: 100dvh !important;
    padding: 12px 14px 96px !important;
    overflow: visible !important;
  }

  .dashboard-main__inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 92px !important;
  }

  .topbar {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .searchbar {
    display: none !important;
  }

  .searchbar {
    min-height: 52px !important;
    border-radius: 14px !important;
    padding: 0 18px !important;
    box-shadow: 0 8px 20px rgba(89, 93, 118, .12) !important;
  }

  .topbar-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-height: 52px !important;
  }

  .topbar-menu,
  .icon-button {
    width: 34px !important;
    height: 34px !important;
  }

  .profile-chip,
  .profile-chip__avatar {
    width: 38px !important;
    height: 38px !important;
  }

  .menu-panel {
    right: 0 !important;
    max-width: calc(100vw - 28px) !important;
  }

  .menu-panel--notifications,
  .menu-panel--shortcuts {
    position: fixed !important;
    top: 124px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 144px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .floating-button--settings {
    right: 10px !important;
    bottom: 18px !important;
    top: auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  .floating-button--buy {
    display: none !important;
  }

  .customizer-panel {
    left: 12px !important;
    right: 12px !important;
    bottom: 128px !important;
    width: auto !important;
    max-height: calc(100dvh - 156px) !important;
    overflow: hidden !important;
  }

  .customizer-panel__body {
    max-height: calc(100dvh - 276px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .dashboard-grid,
  .dashboard-grid--analytics,
  .ecommerce-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .dashboard-grid > *,
  .ecommerce-grid > *,
  .card--hero,
  .card--third,
  .card--half,
  .card--quarter,
  .card--table,
  .ecommerce-congrats,
  .ecommerce-statistics,
  .ecommerce-profit-card,
  .ecommerce-expense-card,
  .ecommerce-revenue-report,
  .ecommerce-earning-reports,
  .ecommerce-popular-products,
  .ecommerce-transactions,
  .ecommerce-invoices,
  .ecommerce-generated-leads,
  .ecommerce-country-orders {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .card:not(.card--hero):not(.card--table),
  .ecommerce-congrats,
  .ecommerce-statistics,
  .ecommerce-profit-card,
  .ecommerce-expense-card,
  .ecommerce-revenue-report {
    padding: 18px !important;
    border-radius: 14px !important;
  }

  .ecommerce-congrats {
    min-height: 220px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 132px !important;
    align-items: end !important;
    overflow: hidden !important;
  }

  .ecommerce-congrats__content {
    width: auto !important;
    min-width: 0 !important;
  }

  .ecommerce-congrats__visual {
    width: 132px !important;
    min-width: 132px !important;
    justify-self: end !important;
  }

  .ecommerce-congrats__avatar {
    width: 112px !important;
    height: auto !important;
  }

  .ecommerce-statistics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .ecommerce-statistics__item {
    width: auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .ecommerce-statistics__icon {
    width: 42px !important;
    height: 42px !important;
    grid-row: span 2 !important;
  }

  .ecommerce-statistics__item strong,
  .ecommerce-statistics__item h3 {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    font-size: 1.18rem !important;
    line-height: 1.15 !important;
  }

  .ecommerce-statistics__item span:not(.ecommerce-statistics__icon),
  .ecommerce-statistics__item small,
  .ecommerce-statistics__item p {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    font-size: .82rem !important;
  }

  .ecommerce-profit-card {
    min-height: 180px !important;
  }

  .ecommerce-revenue-report__body {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .ecommerce-revenue-report__bars {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
  }

  .ecommerce-revenue-report__side {
    width: 100% !important;
  }

  .ecommerce-invoices__head,
  .ecommerce-invoices__toolbar,
  .ecommerce-invoices__footer,
  .invoice-section__header,
  .invoice-preview-actions,
  .invoice-preview-card__brand,
  .invoice-preview-card__footer,
  .invoice-add-card__summary {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .ecommerce-invoices__toolbar-left,
  .ecommerce-invoices__toolbar-right {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .ecommerce-select,
  .card-button,
  .invoice-btn-send,
  .invoice-btn-outline {
    width: 100% !important;
    min-width: 0 !important;
  }

  .invoice-section,
  .invoice-preview-card,
  .invoice-add-card {
    padding: 18px !important;
  }

  .invoice-preview-card__parties,
  .invoice-preview-card__dates,
  .invoice-add-card__field-row,
  .invoice-add-card__item-header,
  .invoice-add-card__item-row {
    grid-template-columns: 1fr !important;
  }

  .invoice-preview-card__table,
  .invoice-list-card,
  .card--table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .invoice-summary-strip {
    border-radius: 14px !important;
  }
}

@media (max-width: 900px) {
  .ec-pages {
    min-height: auto !important;
  }

  .ec-page {
    gap: 14px !important;
  }

  .ec-card {
    border-radius: 14px !important;
    padding: 16px !important;
  }

  .ec-card-title {
    font-size: 1.25rem !important;
  }

  .ec-add-layout,
  .ec-order-layout,
  .ec-customer-layout,
  .ec-review-metrics,
  .ec-referral-top,
  .ec-settings-layout,
  .ec-grid-2,
  .ec-grid-3,
  .ec-radio-grid,
  .ec-referral-steps,
  .ec-customer-overview-grid,
  .ec-customer-stats,
  .ec-customer-payment-grid,
  .ec-settings-payment-meta {
    grid-template-columns: 1fr !important;
  }

  .ec-add-head,
  .ec-order-head,
  .ec-card-title-row,
  .ec-table-toolbar,
  .ec-table-footer,
  .ec-settings-zone-head,
  .ec-settings-footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ec-add-head h2,
  .ec-order-head h2 {
    font-size: 1.65rem !important;
  }

  .ec-add-head-actions,
  .ec-toolbar-right,
  .ec-settings-badges {
    justify-content: stretch !important;
    flex-wrap: wrap !important;
  }

  .ec-add-head-actions .ec-btn,
  .ec-toolbar-right .ec-btn,
  .ec-settings-footer .ec-btn {
    flex: 1 1 auto !important;
  }

  .ec-metric-strip,
  .ec-metric-strip--orders,
  .ec-metric-strip--referrals {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .ec-metric-item {
    align-items: center !important;
    border-inline-end: 0 !important;
    border-bottom: 1px solid var(--ec-border) !important;
    padding: 12px 0 !important;
  }

  .ec-metric-item:last-child {
    border-bottom: 0 !important;
  }

  .ec-metric-item h3 {
    font-size: 1.6rem !important;
    overflow-wrap: anywhere !important;
  }

  .ec-table-scroll,
  .ec-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ec-table {
    min-width: 680px !important;
  }

  .ec-table--compact {
    min-width: 560px !important;
  }

  .ec-field--search,
  .ec-field--compact,
  .ec-field--size,
  .ec-field--size-lg {
    width: 100% !important;
    max-width: none !important;
  }

  .ec-inline-input,
  .ec-inline-input--wide,
  .ec-inline-input--button,
  .ec-inline-input--social,
  .ec-inline-input--otp,
  .ec-field-with-action,
  .ec-inventory-layout,
  .ec-inventory-content .ec-inline-input {
    grid-template-columns: 1fr !important;
  }

  .ec-inventory-content {
    padding: 16px !important;
  }

  .ec-inventory-nav {
    display: flex !important;
    overflow-x: auto !important;
    border-inline-end: 0 !important;
    border-bottom: 1px solid var(--ec-border) !important;
  }

  .ec-inventory-nav button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .ec-modal-root {
    padding: 12px !important;
  }

  .ec-modal {
    width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .ec-modal-head h3 {
    font-size: 1.35rem !important;
  }

  .ec-modal-foot {
    flex-direction: column !important;
  }

  .ec-modal-foot .ec-btn {
    width: 100% !important;
  }

  .ec-drawer {
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  .datatables-panel,
  .datatables-panel > article,
  .datatables-panel .dt-card,
  .datatables-panel .dt-section {
    min-width: 0 !important;
  }

  .datatables-panel article,
  .datatables-panel .dt-card {
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .datatables-panel table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .datatables-panel .dt-table th:nth-child(n+4),
  .datatables-panel .dt-table td:nth-child(n+4) {
    display: none !important;
  }

  .datatables-panel .dt-table th,
  .datatables-panel .dt-table td {
    overflow-wrap: anywhere !important;
  }

  .datatables-panel .dt-table td:nth-child(2) {
    width: 46% !important;
  }

  .datatables-panel .dt-table td:nth-child(3) {
    width: 42% !important;
  }

  .datatables-panel .dt-table,
  .datatables-panel .dt-table-wrap,
  .datatables-panel .table-responsive,
  .datatables-panel [class*="table"] {
    max-width: 100% !important;
  }

  .datatables-panel label,
  .datatables-panel footer,
  .datatables-panel header,
  .datatables-panel .dt-footer,
  .datatables-panel .dt-card__header,
  .datatables-panel .dt-toolbar,
  .datatables-panel .dt-header-actions,
  .datatables-panel [class*="toolbar"],
  .datatables-panel [class*="actions"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .datatables-panel input[type="search"],
  .datatables-panel select {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  .users-page,
  .user-view-page,
  .users-card,
  .user-view-tabs,
  .users-card__head,
  .users-card__head--inline,
  .access-page,
  .access-header,
  .roles-card-grid,
  .roles-card,
  .permission-surface,
  .table-surface,
  .table-wrap,
  .cards-advance,
  .ca-grid,
  .ca-card,
  .charts-page,
  .chart-card,
  .profile-main,
  .profile-hero,
  .profile-grid,
  .profile-side-stack,
  .surface,
  .overview-card,
  .timeline-card,
  .list-card,
  .profile-about,
  .table-card {
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .tables-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .users-card,
  .permission-surface,
  .table-surface,
  .table-card,
  .chart-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .users-table-scroll,
  .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .users-table,
  .table-card table,
  .permission-surface table,
  .table-surface table {
    width: 100% !important;
    min-width: 640px !important;
  }

  .ca-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .ca-table th,
  .ca-table td {
    overflow-wrap: anywhere !important;
  }

  .ca-table th:nth-child(4),
  .ca-table td:nth-child(4) {
    display: none !important;
  }

  .access-header,
  .access-header--permission {
    padding: 18px !important;
    border-radius: 14px !important;
  }

  .roles-card-grid,
  .roles-card-grid--top,
  .roles-card-grid--bottom,
  .cards-grid,
  .profile-grid,
  .profile-grid--intro,
  .profile-grid--secondary,
  .ca-grid,
  .ca-grid--2,
  .ca-grid--2-1,
  .ca-grid--3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .roles-card,
  .ca-card,
  .chart-card,
  .surface,
  .profile-hero,
  .profile-about,
  .timeline-card,
  .overview-card,
  .list-card {
    border-radius: 14px !important;
    padding: 16px !important;
  }

  .profile-head,
  .profile-cover__grid,
  .profile-identity__meta,
  .profile-identity__stats,
  .profile-hero__actions,
  .table-toolbar,
  .table-title-row,
  .user-view-tabs,
  .users-card__head,
  .users-card__head--inline {
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .user-view-tabs {
    display: flex !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }

  .user-view-tabs > * {
    flex: 0 0 auto !important;
  }

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

  .chart-card--large {
    min-height: auto !important;
  }

  .vexa-nav-menu {
    left: auto !important;
    right: 0 !important;
    max-width: calc(100vw - 28px) !important;
  }

  .invoice-preview-card__table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .invoice-preview-card__table table {
    min-width: 520px !important;
  }

  .invoice-preview-actions .card-button,
  .invoice-preview-actions .invoice-btn-outline,
  .invoice-add-card .card-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}