/* Visual polish over the theme. Loaded last from index.html; delete the <link> to turn it off.
   Never transform containers (cards, pages, outlets): a transformed ancestor re-anchors the
   position:fixed Bootstrap modals that live inside page components. Containers only fade. */

:root {
  --sh-accent: #009688;
  --sh-accent-ring: rgba(0, 150, 136, 0.18);
  --sh-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Softer surfaces */
.card {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}
.card > .card-header:first-child {
  border-radius: 10px 10px 0 0;
}
.modal-content {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.dropdown-menu {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
.btn {
  border-radius: 6px;
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 3px var(--sh-accent-ring);
}

@media (prefers-reduced-motion: no-preference) {
  /* Buttons: lift on hover, springy press */
  .btn,
  .mat-raised-button,
  .mat-flat-button,
  .mat-stroked-button {
    transition: transform 0.2s var(--sh-bounce), box-shadow 0.2s var(--sh-ease), background-color 0.15s,
      border-color 0.15s, color 0.15s !important;
  }
  .btn:not(.btn-link):not(:disabled):not(.disabled):not(.input-group *):not(.btn-group *):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.14);
  }
  .btn:not(:disabled):not(.disabled):active,
  .mat-raised-button:not([disabled]):active,
  .mat-flat-button:not([disabled]):active,
  .mat-stroked-button:not([disabled]):active {
    transform: scale(0.96);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14);
    transition-duration: 0.06s !important;
  }

  /* Inputs, links, rows, tabs: smooth state changes */
  .form-control,
  .custom-select {
    transition: border-color 0.2s var(--sh-ease), box-shadow 0.2s var(--sh-ease) !important;
  }
  #sidebarnav a,
  .nav-tabs .nav-link,
  .nav-pills .nav-link,
  .page-link,
  .dropdown-item,
  .table tbody tr {
    transition: background-color 0.2s var(--sh-ease), color 0.2s var(--sh-ease), border-color 0.2s var(--sh-ease);
  }
  .card {
    transition: box-shadow 0.25s var(--sh-ease);
  }

  /* Modals pop in with a small overshoot (replaces Bootstrap's slide-down) */
  .modal.fade .modal-dialog {
    transform: translateY(12px) scale(0.96);
    transition: transform 0.35s var(--sh-bounce);
  }
  .modal.show .modal-dialog {
    transform: none;
  }

  /* Opacity only: Popper positions dropdowns with transform, and the sidebar flyout is position:fixed */
  .dropdown-menu.show,
  #sidebarnav ul.collapse.in {
    animation: sh-fade 0.16s var(--sh-ease);
  }

  /* Each routed page fades in */
  router-outlet + * {
    animation: sh-fade 0.25s var(--sh-ease);
  }

  /* Toasts drop in with a bounce */
  #toast-container > div {
    animation: sh-pop 0.4s var(--sh-bounce);
  }
}

@keyframes sh-fade {
  from {
    opacity: 0;
  }
}
@keyframes sh-pop {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}