/* ==========================================================================
   motion.css — the finish layer: depth, focus, and movement.
   --------------------------------------------------------------------------
   Loaded last, after polish.css. Ground rules, same as that file:

     - Nothing moves position, changes wording, or reorders a screen. 130
       converters are learning this portal; the layout they learn must not
       shift under them.
     - Movement is short (120-240ms) and only ever confirms something the
       person did, or introduces content on arrival. Nothing loops, nothing
       bounces, nothing waits for an animation to finish before it can be used.
     - Every animation is off under prefers-reduced-motion. That setting is
       chosen by people who get motion sickness from moving interfaces, and it
       is honoured at the bottom of this file without exception.
     - No new files: it is all CSS, so there is nothing further to upload and
       nothing else that can fail to arrive over FTP.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --fast: 120ms;
  --base: 180ms;
  --slow: 240ms;
}

/* ---------- arriving on a page ------------------------------------------
   Content fades up a few pixels. Deliberately small: a big movement on every
   page load stops being feedback and becomes a wait. */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.page-title-box,
.content-page .card,
.widget-box-three {
  animation: rise var(--slow) var(--ease-out) both;
}

/* The KPI row deals itself out left to right, ~40ms apart. Any slower and it
   reads as the page being slow. */
.widget-box-three:nth-child(1) { animation-delay: 0ms; }
.row > div:nth-child(2) .widget-box-three { animation-delay: 40ms; }
.row > div:nth-child(3) .widget-box-three { animation-delay: 80ms; }
.row > div:nth-child(4) .widget-box-three { animation-delay: 120ms; }
.row > div:nth-child(5) .widget-box-three { animation-delay: 160ms; }

/* ---------- the KPI tiles ------------------------------------------------ */
.widget-box-three {
  transition: transform var(--base) var(--ease-out),
              box-shadow var(--base) var(--ease-out),
              border-color var(--base) var(--ease-out);
  border: 1px solid #EEF0F4;
}
.widget-box-three:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 15, 26, .10);
  border-color: #E2E6EE;
}
.widget-box-three:active { transform: translateY(-1px); }

.widget-box-three .stat-icon .mdi {
  transition: transform var(--base) var(--ease-out), opacity var(--base) var(--ease-out);
}
.widget-box-three:hover .stat-icon .mdi { transform: scale(1.08); opacity: 1; }

/* The tile is a link to its own filtered list; it must look like one to a
   keyboard as clearly as to a mouse. */
.widget-box-three:focus-visible {
  outline: 0; transform: translateY(-3px);
  box-shadow: 0 0 0 3px rgba(237, 28, 36, .35), 0 12px 28px rgba(11, 15, 26, .10);
}

/* Big standalone numbers use the font's proportional figures - tabular ones
   give every digit the width of a zero, which looks loose at this size. */
.widget-count { font-variant-numeric: proportional-nums; font-size: 30px; letter-spacing: -.015em; }
.widget-title { letter-spacing: .07em; font-size: 11.5px; font-weight: 700; opacity: .78; }

/* The period-on-period line. Deliberately one colour for all five tiles:
   "up" is good on Approved and bad on Rejected, so a green arrow would be
   telling half of them the wrong story. The arrow carries the direction; the
   words carry the rest. */
.widget-delta {
  margin: 6px 0 0; font-size: 12px; color: #7B8494;
  font-variant-numeric: proportional-nums; white-space: nowrap;
}
.widget-delta .mdi { font-size: 13px; vertical-align: -1px; }

/* ---------- cards, buttons, inputs --------------------------------------- */
.content-page .card {
  transition: box-shadow var(--base) var(--ease-out);
  border: 1px solid #EEF0F4;
}
.content-page .card:hover { box-shadow: 0 10px 26px rgba(11, 15, 26, .07); }

.btn {
  transition: transform var(--fast) var(--ease-out),
              box-shadow var(--fast) var(--ease-out),
              filter var(--fast) var(--ease-out);
}
.btn:hover  { transform: translateY(-1px); filter: brightness(1.04); }
.btn:active { transform: translateY(0); filter: brightness(.96); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(237, 28, 36, .32); }
.btn-pink { box-shadow: 0 4px 12px rgba(237, 28, 36, .22); }
.btn-pink:hover { box-shadow: 0 7px 18px rgba(237, 28, 36, .30); }

.form-control, .custom-select {
  transition: border-color var(--fast) var(--ease-out),
              box-shadow var(--fast) var(--ease-out),
              background-color var(--fast) var(--ease-out);
}
.form-control:focus, .custom-select:focus {
  box-shadow: 0 0 0 3px rgba(237, 28, 36, .12);
}

/* ---------- tables ------------------------------------------------------- */
.table tbody tr { transition: background-color var(--fast) linear; }
.table tbody tr:hover { background-color: #F7F8FA; }
.table thead th { letter-spacing: .04em; }

/* Columns of numbers DO align on a fixed digit width - the opposite rule to
   the standalone figures above. */
.table td, .table th { font-variant-numeric: tabular-nums; }

.table-action-btn { transition: transform var(--fast) var(--ease-out), color var(--fast) linear; }
.table-action-btn:hover { transform: scale(1.15); }

/* ---------- the top bar -------------------------------------------------- */
#topnav .nav-link { transition: color var(--fast) linear, opacity var(--fast) linear; }
#topnav .nav-link::after { transition: opacity var(--fast) linear; }

.dropdown-menu { transform-origin: top center; }
.dropdown-menu.show { animation: rise var(--fast) var(--ease-out) both; }

.brand-lockup img { transition: opacity var(--base) var(--ease-out); }
.brand-lockup:hover img { opacity: .88; }

/* ---------- the sign-in screen ------------------------------------------- */
/* The card arrives a beat after the brand panel, so the eye lands left first. */
.account-page .card { animation: rise 320ms var(--ease-out) both; animation-delay: 90ms; }
.auth-brand-inner    { animation: rise 320ms var(--ease-out) both; }

/* One slow breath in the glow behind the wordmark. 9 seconds, 6% of opacity:
   present if you look, invisible if you are typing a password. */
@keyframes glow {
  0%, 100% { opacity: .92; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
.auth-brand::after { animation: glow 9s ease-in-out infinite; }

/* ---------- flash messages ---------------------------------------------- */
.alert { animation: rise var(--base) var(--ease-out) both; }

/* ==========================================================================
   Off, entirely, for anyone who has asked their device for less movement.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .widget-box-three:hover, .btn:hover, .table-action-btn:hover { transform: none; }
}


/* ---------- signed in as somebody else ----------------------------------- */
.impersonation-bar {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  background: #8A5A00; color: #fff; padding: 9px 18px; font-size: 14px;
}
.impersonation-bar .mdi { font-size: 17px; vertical-align: -2px; }
.impersonation-bar .btn { padding: 3px 12px; font-size: 13px; }

/* ---------- the bell, and anything else that hangs off the top bar -------
   The dropdown is anchored to the right-hand edge and pulled inside the
   window: on a laptop the notification panel was opening past the edge of the
   screen, so the right-hand end of it could not be read at all. */
.topbar .container-fluid { position: relative; }

/* Each menu hangs off its own icon, not off the whole row, and is pulled back
   inside the window. Anchored to the row, the account menu opened past the
   right-hand edge of the screen and its items could not be read. */
.topbar-right > li, .topbar-right .dropdown { position: relative; }

/* Every one of these needs !important, and that is not laziness. Bootstrap
   positions dropdowns with Popper, which writes position, top, left and a
   transform directly onto the element as inline style. An inline style beats
   any stylesheet rule that is not !important - which is why the first attempt
   at this looked correct in the file and changed nothing on screen: Popper's
   own "left: 0" kept winning, so the account menu started at the left edge of
   its icon and ran off the side of the window. */
.topbar-right .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  max-width: calc(100vw - 24px);
}
.notification-list .dropdown-lg { width: 340px; max-width: calc(100vw - 24px); }
.noti-scroll { max-height: 320px; overflow-y: auto; }

@media (max-width: 575.98px) {
  .notification-list .dropdown-lg { width: calc(100vw - 24px); }
}

/* ---------- wide tables --------------------------------------------------
   A table wider than the screen used to put its sideways scrollbar at the very
   bottom of the page: with fifty rows on screen you had to scroll to the end of
   the list before you could scroll sideways, then scroll back up to read what
   you had uncovered.

   The table now scrolls inside its own box. The bar sits at the bottom of that
   box - on screen, next to the rows - and the headings stay put while the rows
   move under them. */
/* Why this one line matters more than the rest of this section:

   a Bootstrap column is a flex item, and a flex item's default minimum width
   is the width of its content - not the share of the row it was given. So a
   table too wide for its column pushes the column wider, which pushes the row
   wider, which makes the PAGE scroll sideways. The scrollbar then sits at the
   very bottom of the page, past every row, which is the exact complaint this
   section was written to fix - it just came back through a different door.

   min-width: 0 lets the column be as narrow as it was told to be, so the
   overflow happens inside the table's own box, where the bar is on screen. */
.content-page .row > [class*="col"] { min-width: 0; }

.content-page .table-responsive {
  max-width: 100%;
  max-height: 68vh;
  overflow: auto;
  scrollbar-width: thin;
}
.content-page .table-responsive > table { margin-bottom: 0; }

.content-page .table-responsive thead th {
  position: sticky; top: 0; z-index: 2;
  background: #F7F8FA;
  box-shadow: inset 0 -1px 0 #E5E7EC;
}

/* A visible scrollbar rather than an invisible one, because it has to be
   obvious that the table moves sideways at all. */
.content-page .table-responsive::-webkit-scrollbar { width: 10px; height: 10px; }
.content-page .table-responsive::-webkit-scrollbar-thumb {
  background: #C7CDD8; border-radius: 6px; border: 2px solid #fff;
}
.content-page .table-responsive::-webkit-scrollbar-thumb:hover { background: #AEB6C4; }
.content-page .table-responsive::-webkit-scrollbar-track { background: #F2F4F7; border-radius: 6px; }

/* Short tables should not get a scroll box of their own. */
.content-page .table-responsive:has(tbody tr:nth-child(-n+8):last-child) { max-height: none; }