/* Common UI micro-interactions (global) */

@media (prefers-reduced-motion: no-preference) {
  :root {
    --adtool-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --adtool-fast: 90ms;
    --adtool-med: 140ms;
    --adtool-slow: 220ms;
}

/* ── Responsive layout helpers ───────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Tables → stacked cards (opt-in with .adtool-table-stack) */
  .table.adtool-table-stack thead {
    display: none;
  }

  .table.adtool-table-stack,
  .table.adtool-table-stack tbody,
  .table.adtool-table-stack tr,
  .table.adtool-table-stack td {
    display: block;
    width: 100%;
  }

  .table.adtool-table-stack tr {
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid #2d3238;
    border-radius: 14px;
    padding: 12px 12px;
    margin: 0 0 12px 0;
  }

  .table.adtool-table-stack td {
    border: 0 !important;
    padding: 7px 0 !important;
    white-space: normal !important;
    word-break: break-word;
  }

  .table.adtool-table-stack td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    color: rgba(160, 174, 192, 0.92);
    margin-bottom: 2px;
  }

  .table.adtool-table-stack td.adtool-no-label::before,
  .table.adtool-table-stack td[data-label=""]::before {
    content: "";
    display: none;
  }

  .table.adtool-table-stack td.adtool-actions .btn,
  .table.adtool-table-stack td.adtool-actions button,
  .table.adtool-table-stack td.adtool-actions a.btn {
    width: 100%;
  }

  .table.adtool-table-stack .text-truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
  }

  /* Offcanvas width on phones */
  #chatOffcanvas,
  #mobileNavOffcanvas {
    width: min(420px, 92vw);
  }
}

  /* Page fade-in */
  body.adtool-page {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--adtool-slow) var(--adtool-ease), transform var(--adtool-slow) var(--adtool-ease);
  }

  body.adtool-page.adtool-ready {
    opacity: 1;
    transform: translateY(0);
  }

  /* Smooth micro-interactions */
  a,
  button,
  .btn,
  .badge,
  .card,
  .form-control,
  .form-select,
  textarea,
  input,
  .form-check-input {
    transition:
      background-color var(--adtool-med) var(--adtool-ease),
      border-color var(--adtool-med) var(--adtool-ease),
      color var(--adtool-med) var(--adtool-ease),
      box-shadow var(--adtool-med) var(--adtool-ease),
      transform var(--adtool-med) var(--adtool-ease),
      opacity var(--adtool-med) var(--adtool-ease),
      filter var(--adtool-med) var(--adtool-ease);
  }

  /* Buttons */
  .btn:not(:disabled):not(.disabled):hover {
    transform: translateY(-1px);
  }

  .btn:not(:disabled):not(.disabled):active {
    transform: translateY(0);
    transition-duration: var(--adtool-fast);
  }

  /* Inputs */
  .form-control:focus,
  .form-select:focus,
  textarea:focus {
    transform: translateY(-1px);
  }

  /* Cards */
  .card:hover {
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
  }

  /* Reveal-on-scroll (opt-in via JS) */
  .adtool-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--adtool-slow) var(--adtool-ease), transform var(--adtool-slow) var(--adtool-ease);
    will-change: opacity, transform;
  }

  .adtool-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Checkboxes/toggles */
  .form-check-input {
    transition:
      background-color var(--adtool-fast) var(--adtool-ease),
      border-color var(--adtool-fast) var(--adtool-ease),
      box-shadow var(--adtool-fast) var(--adtool-ease),
      transform var(--adtool-fast) var(--adtool-ease);
  }

  /* Bootstrap modal: add subtle slide/scale to the default fade */
  .modal.fade .modal-dialog {
    transform: translateY(14px) scale(0.985);
    transition: transform var(--adtool-med) var(--adtool-ease);
  }

  .modal.show .modal-dialog {
    transform: translateY(0) scale(1);
  }

  .modal-backdrop {
    /* Backdrop darkens a touch more gradually than the dialog so it feels smooth
       without making the modal itself feel laggy. */
    transition: opacity var(--adtool-slow) var(--adtool-ease);
  }

  .modal-backdrop.show {
    opacity: 0.55;
  }

  /* Bootstrap offcanvas: smoother easing */
  .offcanvas {
    transition: transform var(--adtool-slow) var(--adtool-ease), visibility 0s linear var(--adtool-slow);
  }

  .offcanvas.show {
    transition: transform var(--adtool-slow) var(--adtool-ease);
  }

  /* Dropdown: fade/raise (avoid overriding Bootstrap's display:none) */
  @keyframes adtoolDropdownIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .dropdown-menu.show {
    animation: adtoolDropdownIn var(--adtool-med) var(--adtool-ease);
  }

  /* Alerts/toasts: gentle pop */
  .alert,
  .toast {
    transition: opacity var(--adtool-med) var(--adtool-ease), transform var(--adtool-med) var(--adtool-ease);
  }
}