@layer components {
  /* Shell polish migrated from legacy style.css (buttons/hover outside .route-page handled via .app-layout) */

  .app-layout button:not(.menu-item):not(.sidebar-item):not(.notification-bell):not(.modal-close-btn):not(.topbar-inquiry-chip):not(:disabled),
  .app-layout .btn:not(:disabled) {
    transition:
      transform 120ms var(--instant-ease),
      box-shadow 120ms var(--instant-ease),
      background-color 120ms var(--instant-ease),
      border-color 120ms var(--instant-ease),
      filter 120ms var(--instant-ease),
      opacity 120ms var(--instant-ease);
  }

  .app-layout .btn:hover:not(:disabled),
  .app-layout button:not(.menu-item):not(.sidebar-item):not(.notification-bell):not(.modal-close-btn):not(.topbar-inquiry-chip):not(:disabled):hover {
    transform: translateY(-1px);
  }

  .app-layout .btn:active:not(:disabled),
  .app-layout button:not(.menu-item):not(.sidebar-item):not(.notification-bell):not(.modal-close-btn):not(.topbar-inquiry-chip):not(:disabled):active {
    transform: translateY(0) scale(0.98);
  }

  .app-layout .card:not(.premium-kpi-card),
  .app-layout .panel {
    border-color: rgba(228, 233, 243, 0.98);
    padding: var(--space-3);
  }

  .app-layout .card.premium-kpi-card {
    border-color: rgba(228, 233, 243, 0.98);
  }

  body.dark .app-layout .card,
  body.dark .app-layout .panel {
    border-color: rgba(82, 96, 118, 0.92);
  }

  .app-layout .card:hover,
  .app-layout .panel:hover {
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.078) !important;
  }

  .app-layout #menu .menu-item:hover,
  .app-layout #menu .sidebar-item:hover {
    transform: none;
  }

  .app-layout .toolbar,
  .app-layout .toolbar.compact-toolbar,
  .app-layout .dashboard-toolbar {
    gap: var(--space-2);
    row-gap: var(--space-2);
    align-items: center;
  }

  .app-layout .toolbar input,
  .app-layout .toolbar select {
    min-height: 36px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }

  .app-layout input:not([type="checkbox"]):not([type="radio"]):focus-visible,
  .app-layout select:focus-visible,
  .app-layout textarea:focus-visible {
    outline: none;
    border-color: rgba(59, 130, 246, 0.42);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
  }

  body.dark .app-layout input:not([type="checkbox"]):not([type="radio"]):focus-visible,
  body.dark .app-layout select:focus-visible,
  body.dark .app-layout textarea:focus-visible {
    border-color: rgba(96, 165, 250, 0.55);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22);
  }

  .app-layout ::placeholder {
    color: rgba(100, 116, 139, 0.52);
    opacity: 1;
  }

  body.dark .app-layout ::placeholder {
    color: rgba(148, 163, 184, 0.48);
  }

  .app-layout .table-wrap thead th,
  .app-layout table thead th {
    position: sticky;
    top: 0;
    z-index: 6;
    background: linear-gradient(180deg, #fafbfd 0%, #f4f6f9 100%);
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.065);
  }

  body.dark .app-layout .table-wrap thead th,
  body.dark .app-layout table thead th {
    background: linear-gradient(180deg, #1e293b 0%, #172033 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
  }

  .app-layout tbody tr {
    transition: background-color 120ms var(--instant-ease);
  }

  .app-layout tbody tr:hover,
  .app-layout .table-wrap tbody tr:hover {
    background: rgba(59, 130, 246, 0.045);
  }

  body.dark .app-layout tbody tr:hover,
  body.dark .app-layout .table-wrap tbody tr:hover {
    background: rgba(59, 130, 246, 0.08);
  }

  .app-layout tbody tr .btn.btn-xs,
  .app-layout tbody tr .order-actions .btn,
  .app-layout tbody tr .product-actions-cell .btn {
    opacity: 0.84;
    transition: opacity 120ms var(--instant-ease), transform 120ms var(--instant-ease), filter 120ms var(--instant-ease);
  }

  .app-layout tbody tr:hover .btn.btn-xs,
  .app-layout tbody tr:hover .order-actions .btn,
  .app-layout tbody tr:hover .product-actions-cell .btn {
    opacity: 1;
  }

  .app-layout #menu,
  .app-layout .content-scroll,
  .app-layout .command-palette-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.48) transparent;
  }

  .app-layout #menu::-webkit-scrollbar,
  .app-layout .content-scroll::-webkit-scrollbar,
  .app-layout .command-palette-list::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  .app-layout #menu::-webkit-scrollbar-thumb,
  .app-layout .content-scroll::-webkit-scrollbar-thumb,
  .app-layout .command-palette-list::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.38);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  .app-layout #menu::-webkit-scrollbar-thumb:hover,
  .app-layout .content-scroll::-webkit-scrollbar-thumb:hover,
  .app-layout .command-palette-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.45);
  }

  body.dark .app-layout #menu,
  body.dark .app-layout .content-scroll,
  body.dark .app-layout .command-palette-list {
    scrollbar-color: rgba(71, 85, 105, 0.55) transparent;
  }

  body.dark .app-layout #menu::-webkit-scrollbar-thumb,
  body.dark .app-layout .content-scroll::-webkit-scrollbar-thumb,
  body.dark .app-layout .command-palette-list::-webkit-scrollbar-thumb {
    background-color: rgba(71, 85, 105, 0.55);
  }
}