@layer base {
  #appContent,
  .page-shell,
  .content-stage,
  .route-page {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    overflow: visible;
  }

  /* Route không active: [hidden] + !important để không bị rule khác override display */
  .route-pages-host .route-page.route-root[hidden] {
    display: none !important;
  }

  .route-page {
    min-width: 0;
    min-height: 0;
  }

  .dashboard-layout,
  .orders-page,
  .products-page,
  .profile-panel,
  .proxy-manager {
    min-width: 0;
    min-height: 0;
  }

  .route-page .page-shell,
  .route-page .page-content,
  .route-page .panel,
  .route-page .card {
    min-width: 0;
  }

  .route-page .page-content {
    overflow: auto;
  }

  .route-page .table-wrap {
    overflow-x: auto;
    overflow-y: auto;
  }

  #modal .modal-content {
    overflow: auto;
  }

  .command-palette-overlay.hidden {
    display: none;
    pointer-events: none;
  }

  .command-palette-overlay:not(.hidden) {
    pointer-events: auto;
  }

  .page-shell {
    position: relative;
  }

  .page-content {
    position: relative;
    min-height: 180px;
  }

  .page-shell.route-shell-stale .page-content::after {
    content: "Đang cập nhật...";
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 11px;
    line-height: 1.2;
    color: rgba(100, 116, 139, 0.92);
    pointer-events: none;
    z-index: 3;
  }

  body.dark .page-shell.route-shell-stale .page-content::after {
    color: rgba(148, 163, 184, 0.88);
  }

  .fade-page-enter {
    opacity: 0;
  }

  .fade-page-active {
    opacity: 1;
    transition: opacity var(--instant-ms) var(--instant-ease);
  }

  .page-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 12;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
    background: linear-gradient(180deg, rgba(245, 247, 251, 0.14), rgba(245, 247, 251, 0.22));
  }

  body.dark .page-loading-overlay {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.45));
  }

  .page-loading-overlay.active {
    opacity: 1;
  }

  .page-loading-skeleton {
    position: absolute;
    inset: 14px;
    display: grid;
    align-content: start;
    gap: 10px;
  }

  .page-loading-skeleton > span {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.16), rgba(148, 163, 184, 0.26), rgba(148, 163, 184, 0.16));
    background-size: 220% 100%;
    animation: shimmer 1s linear infinite;
  }

  .page-loading-skeleton > span:nth-child(1) {
    width: 42%;
  }

  .page-loading-skeleton > span:nth-child(2) {
    width: 68%;
  }

  .page-loading-skeleton > span:nth-child(3) {
    width: 92%;
  }

  .page-loading-skeleton > span:nth-child(4) {
    width: 88%;
  }

  .page-loading-skeleton > span:nth-child(5) {
    width: 76%;
  }

  .page-loading-skeleton > span:nth-child(6) {
    width: 54%;
  }

  .page-content.is-loading .table-wrap {
    position: relative;
    overflow: hidden;
    min-height: 240px;
  }

  .page-content.is-loading .table-wrap::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50px;
    bottom: 10px;
    border-radius: 10px;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(148, 163, 184, 0.16) 0px,
        rgba(148, 163, 184, 0.16) 14px,
        rgba(255, 255, 255, 0) 14px,
        rgba(255, 255, 255, 0) 44px
      );
    opacity: 0.85;
    pointer-events: none;
  }

  body.dark .page-content.is-loading .table-wrap::after {
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(71, 85, 105, 0.35) 0px,
        rgba(71, 85, 105, 0.35) 14px,
        rgba(255, 255, 255, 0) 14px,
        rgba(255, 255, 255, 0) 44px
      );
  }
}