/* ============================================================
   Trade Bee — Mobile stylesheet
   Served unconditionally (M-01): every rule below is wrapped in a
   @media block, so wide desktops are unaffected and no server-side
   User-Agent sniffing is needed for CSS. The ?mobile=0 / "Switch to
   desktop site" opt-out is honored client-side by mobile-nav.js,
   which removes this stylesheet when the opt-out is set.

   Breakpoints
   -----------
   <= 1024px  phones + tablets (structural collapse: nav drawer is
              handled in styles.css; tables-to-cards, stacked forms,
              full-screen modals, icon-only buttons live here)
   <= 768px   phones (fine tweaks: type scale, hero stack, cell
              padding, 44px targets)
   769-1024px tablets (2-col form grids restored, see below)

   Convention: every rule is wrapped in a @media block so this
   file is safe to add/remove without affecting desktop users.
   ============================================================ */

/* Batch Analysis: mobile dropdown is hidden on desktop, tabs are visible */
.analysis-mobile-select {
  display: none;
}
@media (max-width: 1024px) {
  /* Lock body scroll when drawer or chart modal is open */
  body.nav-drawer-open,
  body.chart-modal-open {
    overflow: hidden;
  }

  /* ----- Typography + spacing ----- */
  body {
    padding: 12px;
  }

  .container {
    max-width: 100%;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.1rem;
  }

  header {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }

  .section {
    padding: 16px;
    border-radius: 10px;
  }

  /* ----- Forms: stack to single column ----- */
  .form-row,
  .form-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .form-group {
    min-width: 0;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    font-size: 16px; /* prevent iOS auto-zoom on focus */
    padding: 12px;
  }

  /* M-06: every text-entry control gets the 16px iOS no-zoom floor,
     including standalone inputs outside .form-group
     (#batch-desc-filter, #table-search-input, #smtp-test-recipient,
     .modal-input, .analysis-mobile-select). */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* ----- Touch targets ----- */
  .form-group button,
  .primary-btn,
  .secondary-btn,
  .view-btn,
  .theme-toggle,
  .delete-btn,
  .label-btn,
  .analysis-tab,
  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 0.95rem;
  }

  /* ----- Tables: horizontal scroll inside card ----- */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }

  .table-scroll table {
    min-width: 520px;
  }

  .table-scroll-hint {
    display: block;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-bottom: 6px;
    opacity: 1;
    animation: fade-out-hint 4s ease 1.5s forwards;
  }

  @keyframes fade-out-hint {
    to {
      opacity: 0;
    }
  }

  /* ----- Modals: full-screen sheet ----- */
  .modal {
    align-items: stretch;
  }

  .modal-content {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .modal-header {
    position: sticky;
    top: 0;
    background: var(--surface);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    z-index: 1;
  }

  .chart-wrapper {
    height: 55vh;
    min-height: 280px;
  }

  /* ----- Toast: anchor to top on mobile so it doesn't overlap nav ----- */
  .toast-container {
    bottom: auto;
    top: 12px;
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
    right: calc(12px + env(safe-area-inset-right));
    left: 12px;
    left: calc(12px + env(safe-area-inset-left));
    max-width: none;
  }

  /* ----- Hide admin/bulk-action clusters on mobile ----- */
  .mobile-hidden {
    display: none !important;
  }

  /* ----- Sim page specific ----- */
  .sim-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .form-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .form-actions button {
    width: 100%;
  }

  /* ----- Strategy explorer (home) ----- */
  .strategy-explorer {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .strategy-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 16px;
    max-height: none;
  }

  .strategy-display {
    padding-left: 0;
    padding-top: 12px;
  }

  /* ----- Home: disclaimer section ----- */
  .disclaimer-section,
  .disclaimer-collapsible-container {
    padding: 16px;
  }

  .ack-checkbox-container {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }

  .ack-checkbox-container label {
    line-height: 1.4;
  }

  /* ----- Portfolios: cash ops side-by-side forms stack on mobile.
     M-13: target the .cash-ops-row class (the attribute selector is
     kept as a fallback for any unclassed flex rows). ----- */
  .cash-ops-row,
  #cash-ops-section form + form,
  #cash-ops-section .cash-ops-row,
  #cash-ops-section > div[style*="display: flex"] {
    flex-direction: column;
    gap: 16px;
  }

  /* ----- Admin: user table tweaks ----- */
  #users-table {
    min-width: 560px;
  }

  .group-tag {
    font-size: 0.8rem;
  }

  /* ----- Portfolios: cash ops form button stays full-width ----- */
  #cash-ops-section form button[type="submit"] {
    width: 100%;
  }

  /* ----- Cash ops on portfolios page ----- */
  .cash-ops-row {
    flex-direction: column;
  }

  /* ----- Strategy explorer (also collapsed at phone breakpoint) ----- */
  .strategy-explorer {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .strategy-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 16px;
    max-height: none;
  }

  .strategy-display {
    padding-left: 0;
    padding-top: 12px;
  }

  /* ----- Pagination ----- */
  .pagination-controls {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ----- Batch Analysis: tabs become a dropdown ----- */
  #batch-analysis-tabs {
    display: none !important;
  }

  .analysis-mobile-select {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
  }

  /* ----- M-08: analysis TOC collapsible ----- */
  .analysis-toc-details {
    display: contents;
  }

  .analysis-toc-summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    list-style: none;
  }

  .analysis-toc-summary::-webkit-details-marker {
    display: none;
  }

  .analysis-toc-summary::before {
    content: "▶";
    font-size: 0.7rem;
    margin-right: 8px;
    color: var(--primary);
  }

  .analysis-toc-details[open] .analysis-toc-summary::before {
    content: "▼";
  }

  /* ----- P&L report table inside portfolios card ----- */
  #pnl-table,
  #trades-table {
    overflow-x: auto;
  }

  /* Table to Cards Responsive Layout */
  #batches-table, #runs-table, #users-table, #trades-data-table, #portfolios-data-table, #pnl-data-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #batches-table thead, #runs-table thead, #users-table thead, #trades-data-table thead, #portfolios-data-table thead, #pnl-data-table thead {
    display: none !important;
  }
  #batches-table tbody, #runs-table tbody, #users-table tbody, #trades-data-table tbody, #portfolios-data-table tbody, #pnl-data-table tbody {
    display: block !important;
    width: 100% !important;
  }
  #batches-table tr, #runs-table tr, #users-table tr, #trades-data-table tr, #portfolios-data-table tr, #pnl-data-table tr {
    display: block !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    padding: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }
  #batches-table td, #runs-table td, #users-table td, #trades-data-table td, #portfolios-data-table td, #pnl-data-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed var(--border) !important;
    font-size: 0.9rem !important;
    text-align: right !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #batches-table td:last-child, #runs-table td:last-child, #users-table td:last-child, #trades-data-table td:last-child, #portfolios-data-table td:last-child, #pnl-data-table td:last-child {
    border-bottom: none !important;
  }
  #batches-table td::before, #runs-table td::before, #users-table td::before, #trades-data-table td::before, #portfolios-data-table td::before, #pnl-data-table td::before {
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-align: left !important;
    margin-right: 12px !important;
  }
  
  #batches-table td:nth-child(1)::before { content: "ROI"; }
  #batches-table td:nth-child(2)::before { content: "Description"; }
  #batches-table td:nth-child(3)::before { content: "Actions"; }
  #batches-table td:nth-child(4)::before { content: "Status"; }
  #batches-table td:nth-child(5)::before { content: "Date"; }
  #batches-table td:nth-child(6)::before { content: "ID"; }
  
  /* Class-based labels so the optional admin checkbox column (prepended
     as the first cell) doesn't shift every nth-child label by one. The
     checkbox cell carries no label. */
  #batches-table td.batch-checkbox-cell::before { content: ""; margin-right: 0; }
  #batches-table td.batch-roi-cell::before { content: "ROI"; }
  #batches-table td.batch-desc-cell::before { content: "Description"; }
  #batches-table td.actions-cell::before { content: "Actions"; }
  #batches-table td.batch-status-cell::before { content: "Status"; }
  #batches-table td.batch-created-cell::before { content: "Date"; }
  #batches-table td.batch-id-cell::before { content: "ID"; }
  
  /* The checkbox cell shouldn't be stretched into a labelled row on mobile */
  #batches-table td.batch-checkbox-cell {
    justify-content: flex-start !important;
    border-bottom: none !important;
  }

  /* On the mobile card layout the td itself is the flex row, so ensure the
     admin action buttons wrap instead of overflowing the card width. The
     "Actions" label sits on the left, buttons flow to the right and wrap. */
  #batches-table td.actions-cell {
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }
  
  #runs-table td:nth-child(1)::before { content: "ID"; }
  #runs-table td:nth-child(2)::before { content: "Long"; }
  #runs-table td:nth-child(3)::before { content: "Short"; }
  #runs-table td:nth-child(4)::before { content: "ROI"; }
  #runs-table td:nth-child(5)::before { content: "Ann. ROI"; }
  #runs-table td:nth-child(6)::before { content: "Trades"; }
  #runs-table td:nth-child(7)::before { content: "Win Rate"; }
  #runs-table td:nth-child(8)::before { content: "MAE Eff"; }
  #runs-table td:nth-child(9)::before { content: "PRC"; }
  #runs-table td:nth-child(10)::before { content: "Cap Vel"; }
  #runs-table td:nth-child(11)::before { content: "Status"; }
  #runs-table td:nth-child(12)::before { content: "Actions"; }

  #runs-table td.run-id-cell::before { content: "ID"; }
  #runs-table td.run-long-cell::before { content: "Long"; }
  #runs-table td.run-short-cell::before { content: "Short"; }
  #runs-table td.run-roi-cell::before { content: "ROI"; }
  #runs-table td.run-ann-roi-cell::before { content: "Ann. ROI"; }
  #runs-table td.run-trades-cell::before { content: "Trades"; }
  #runs-table td.run-win-rate-cell::before { content: "Win Rate"; }
  #runs-table td.run-mae-cell::before { content: "MAE Eff"; }
  #runs-table td.run-prc-cell::before { content: "PRC"; }
  #runs-table td.run-cap-vel-cell::before { content: "Cap Vel"; }
  #runs-table td.run-status-cell::before { content: "Status"; }
  
  #users-table td:nth-child(1)::before { content: "Name"; }
  #users-table td:nth-child(2)::before { content: "Nickname"; }
  #users-table td:nth-child(3)::before { content: "Email"; }
  #users-table td:nth-child(4)::before { content: "Groups"; }
  #users-table td:nth-child(5)::before { content: "Admin"; }
  #users-table td:nth-child(6)::before { content: "Actions"; }

  #trades-data-table td:nth-child(1)::before { content: "ID"; }
  #trades-data-table td:nth-child(2)::before { content: "Portfolio"; }
  #trades-data-table td:nth-child(3)::before { content: "Date"; }
  #trades-data-table td:nth-child(4)::before { content: "Action"; }
  #trades-data-table td:nth-child(5)::before { content: "Ticker"; }
  #trades-data-table td:nth-child(6)::before { content: "Price"; }
  #trades-data-table td:nth-child(7)::before { content: "Shares"; }
  #trades-data-table td:nth-child(8)::before { content: "Value"; }
  #trades-data-table td:nth-child(9)::before { content: "Portfolio Value"; }
  #trades-data-table td:nth-child(10)::before { content: "Actions"; }

  #portfolios-data-table td:nth-child(1)::before { content: "ID"; }
  #portfolios-data-table td:nth-child(2)::before { content: "Portfolio Name"; }
  #portfolios-data-table td:nth-child(3)::before { content: "Status"; }
  #portfolios-data-table td:nth-child(4)::before { content: "Mode"; }
  #portfolios-data-table td:nth-child(5)::before { content: "Last Updated"; }
  #portfolios-data-table td:nth-child(6)::before { content: "Cash"; }
  #portfolios-data-table td:nth-child(7)::before { content: "Long Shares"; }
  #portfolios-data-table td:nth-child(8)::before { content: "Short Shares"; }
  #portfolios-data-table td:nth-child(9)::before { content: "Position"; }

  #pnl-data-table td:nth-child(1)::before { content: "Ticker"; }
  #pnl-data-table td:nth-child(2)::before { content: "Shares Held"; }
  #pnl-data-table td:nth-child(3)::before { content: "Avg Cost Basis"; }
  #pnl-data-table td:nth-child(4)::before { content: "Current Price"; }
  #pnl-data-table td:nth-child(5)::before { content: "Total Invested"; }
  #pnl-data-table td:nth-child(6)::before { content: "Current Value"; }
  #pnl-data-table td:nth-child(7)::before { content: "Realized P&L"; }
  #pnl-data-table td:nth-child(8)::before { content: "Unrealized P&L"; }
  #pnl-data-table td:nth-child(9)::before { content: "Total P&L"; }
  #pnl-data-table td:nth-child(10)::before { content: "Win/Loss Trades"; }
  #pnl-data-table td:nth-child(11)::before { content: "Win Rate"; }

  /* Strategy Explorer Accordion Layout on Mobile */
  .strategy-explorer {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  
  .strategy-sidebar {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-height: none !important;
  }

  .strategy-display {
    display: none !important;
  }

  #strategy-desc-container {
    background: var(--bg);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 16px;
    margin-top: -8px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .strategy-btn.active {
    border-radius: 8px 8px 0 0 !important;
    border-bottom: 1px solid transparent !important;
  }

  /* Mobile split button styling overrides */
  .split-btn-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  .split-btn-main {
    width: 100%;
    border-radius: 4px !important;
    border-right: none !important;
  }
  .split-btn-caret {
    display: none !important;
  }
  .split-dropdown {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
  }
  .split-dropdown.hidden {
    display: flex !important; /* Always show options in mobile stack */
  }
  .split-dropdown a {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100% !important;
    background: var(--surface, #1e293b) !important;
    border: 1px solid var(--border, #334155) !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    font-weight: 500;
    box-sizing: border-box;
  }
  .split-dropdown a:hover {
    background: var(--primary-hover, #2563eb) !important;
  }

  .mobile-only {
    display: inline !important;
  }

  /* Compact styling for buttons that are icon-only on mobile */
  .btn-mobile-icon-only {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    min-width: unset !important;
  }
  .btn-mobile-icon-only .btn-icon {
    margin-right: 0 !important;
  }
  .btn-mobile-icon-only .btn-text {
    display: none !important;
  }

  /* ----- M-03: portfolios record/edit modals use inline-styled
     wrappers (no .modal class) with 1fr 1fr grids. Collapse those
     grids (marked .modal-2col) to one column and let the dialog
     fill the viewport height. ----- */
  .modal-2col {
    grid-template-columns: 1fr !important;
  }

  #record-trade-modal > div,
  #edit-trade-modal > div {
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  /* ----- M-05: simulations header/toolbar clusters wrap instead
     of overflowing at 360px. ----- */
  .sim-header-actions,
  .batches-toolbar,
  .batch-details-actions {
    flex-wrap: wrap !important;
  }

  #batch-desc-filter {
    flex: 1 1 100% !important;
    order: -1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sim-header-actions .primary-btn,
  .sim-header-actions .secondary-btn {
    flex: 1 1 140px;
  }

  /* ----- M-10: overflow "More" menu becomes a dropdown ----- */
  .overflow-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    white-space: nowrap;
  }

  .overflow-menu-items {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 200px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    padding: 8px;
  }

  .overflow-menu.open .overflow-menu-items {
    display: flex;
  }

  .overflow-menu-items .secondary-btn,
  .overflow-menu-items .primary-btn {
    width: 100%;
    justify-content: flex-start;
    min-height: 44px;
  }

  /* ----- M-11: gateway tables scroll inside their card; order
     filter pills are 44px targets. ----- */
  table.gw-table {
    min-width: 560px;
  }

  .gw-order-filter {
    min-height: 44px;
    padding: 10px 14px;
  }

  /* ----- M-12: DataTables chrome on phones ----- */
  .dataTables_wrapper .dataTables_info {
    width: 100%;
    text-align: center;
    padding-top: 8px;
  }

  .dataTables_wrapper .dataTables_paginate {
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-height: 40px;
    min-width: 40px;
    padding: 10px 12px !important;
    box-sizing: border-box;
  }

  .dataTables_wrapper .dataTables_length {
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
  }

  /* ----- M-14: no-JS / JS-failed fallback. The drawer is a sibling
     of <nav>, so keyboard focus on the hamburger (or anything inside
     <nav>) reveals it via :focus-within — no script needed. ----- */
  nav:focus-within ~ #nav-drawer {
    opacity: 1;
    pointer-events: auto;
  }

  nav:focus-within ~ #nav-drawer .nav-drawer-panel {
    transform: translateX(0);
  }

  /* ----- M-15: touch-target sweep ----- */
  .jump-pill {
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  button.danger-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  .close-btn,
  #close-modal-btn,
  #close-bh-modal-btn,
  #close-batch-analysis-btn,
  #close-record-trade-modal-btn,
  #close-edit-trade-modal-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ===========================================================
   Phones (<=768px) — fine tweaks layered on top of the 1024px
   structural collapse above.
   =========================================================== */
@media (max-width: 768px) {
  /* ----- M-04: home/analysis hero stacks; CTAs go full-width ----- */
  .insights-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }

  .hero-title {
    font-size: 1.6rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .hero-actions .btn,
  .hero-actions .logout,
  .hero-actions .login {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* ----- M-07: tighter insights table cells + sections ----- */
  .insights-table th,
  .insights-table td {
    padding: 8px 10px;
  }

  .insights-section {
    padding: 20px 16px;
  }

  /* ----- M-09: strategy explorer rows are 44px targets ----- */
  .strategy-btn {
    padding: 12px 14px;
    min-height: 44px;
  }

  /* Strategy explorer stays a single-column accordion on phones
     (mirrors the 900px collapse; restated here so the 768px block
     owns the phone layout end to end). */
  .strategy-explorer {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    gap: 8px !important;
  }
}

/* ===========================================================
   Tablet (769-1024px) — modest tweaks
   =========================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section {
    padding: 20px;
  }

  .container {
    max-width: 100%;
  }
}

/* ===========================================================
   Strategy explorer collapse at 900px (preserves the original
   home.html inline @media breakpoint; lives in mobile.css now
   so the home template stays free of responsive CSS).
   =========================================================== */
@media (max-width: 900px) {
  .strategy-explorer {
    grid-template-columns: 1fr;
  }

  .strategy-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 20px;
    max-height: none;
  }

  .strategy-display {
    padding-left: 0;
    padding-top: 10px;
  }
}

/* ===========================================================
   prefers-reduced-motion: strip the drawer + hint animations
   for users who request it via OS settings.
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-drawer-panel,
  .table-scroll-hint,
  .busy-overlay-spinner,
  .busy-overlay-spinner::before,
  .busy-overlay-spinner::after,
  .busy-overlay-core,
  .busy-overlay-text,
  .pulse-dot,
  .toast {
    transition: none !important;
    animation: none !important;
  }

  .nav-drawer-panel {
    transform: none;
  }
}