/* The TabbyHR theme layer. Soft indigo and violet, glass and glow, and motion that follows the person's settings.
   It sits on top of the page's own styles and Tailwind. Rules that restyle Tailwind classes start with #app, #page,
   #modal-root or body, so they win over Tailwind's single-class utilities without !important. The reduced-motion block
   at the end uses !important because it must beat every animation, inline ones included. */

:root {
  --t-a: #6F63F0;        /* indigo end of the accent */
  --t-b: #8F7DF6;        /* violet end */
  --t-faint: #6B7691;    /* small grey text: 4.5:1 on white, where slate-400 is only 2.6:1 */
  --t-line: rgba(111, 99, 240, .14);
  --t-ease: cubic-bezier(.2, .8, .2, 1);
}
::selection { background: rgba(143, 125, 246, .28); }
* { scrollbar-width: thin; scrollbar-color: #D3CFF8 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D3CFF8; border: 3px solid transparent; border-radius: 99px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #B9B3F2; background-clip: padding-box; }
::placeholder { color: var(--t-faint); opacity: 1; }
body .text-slate-400 { color: var(--t-faint); }

/* A slow aurora behind everything. It is decoration: it never takes clicks and stands still for people who ask for less motion. */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 40% at 20% 25%, rgba(167, 139, 250, .17), transparent 70%),
              radial-gradient(35% 35% at 82% 18%, rgba(125, 211, 252, .15), transparent 70%),
              radial-gradient(40% 40% at 62% 88%, rgba(196, 181, 253, .15), transparent 70%);
  animation: t-aurora 30s ease-in-out infinite alternate;
}
@keyframes t-aurora { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }

/* The top bar: frosted glass, a little brighter at the top, with the gradient hairline the kernel draws at its foot. */
#topbar { background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .66)); -webkit-backdrop-filter: saturate(1.4) blur(20px); backdrop-filter: saturate(1.4) blur(20px); }

/* ---------- Keyboard and screen readers ---------- */
.skip-link { position: fixed; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: #1E1B4B; color: #fff; font-weight: 500; text-decoration: none; transition: top .2s var(--t-ease); }
.skip-link:focus { top: 12px; }
#page:focus { outline: none; }
body :is(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible, .skip-link:focus-visible { outline: 2px solid var(--t-a); outline-offset: 2px; }
#sidenav :is(.sn-item, .sn-fold, .sn-brand):focus-visible { outline-offset: -2px; }
body :is(input, select, textarea):focus-visible { outline: none; border-color: var(--t-a); box-shadow: 0 0 0 4px rgba(111, 99, 240, .16); }

/* ---------- Surfaces ---------- */
#page :is(.rounded-xl, .rounded-2xl).bg-white {
  border-color: var(--t-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 16px 32px -26px rgba(55, 48, 163, .38);
  transition: transform .25s var(--t-ease), box-shadow .25s var(--t-ease), border-color .25s;
}
/* a card you can press lifts a little, and its edge takes the accent */
#page :is(button, a, [data-act], [data-hr]):is(.rounded-xl, .rounded-2xl).bg-white:hover {
  transform: translateY(-2px); border-color: rgba(111, 99, 240, .34);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 22px 36px -24px rgba(91, 76, 240, .5);
}
#page table thead { background: rgba(111, 99, 240, .05); }
#page table tbody tr:hover { background: rgba(111, 99, 240, .05); }
#modal-root form {
  border-radius: 20px; border-color: var(--t-line); background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -30px rgba(30, 27, 75, .5);
}

/* ---------- Controls ---------- */
body button { transition: transform .15s var(--t-ease), box-shadow .2s, background-color .2s, border-color .2s, color .2s, opacity .2s, filter .2s; }
body button:is([class*="rounded-lg"], [class*="rounded-md"], [class*="rounded-full"]):active:not(:disabled) { transform: scale(.97); }
body :is(button, a)[class*="bg-[#5B4CF0]"], body :is(button, a)[class*="bg-[#6F63F0]"] {
  background-image: linear-gradient(135deg, var(--t-a), var(--t-b)); background-color: var(--t-a);
  box-shadow: 0 10px 20px -12px rgba(111, 99, 240, .7);
}
body :is(button, a)[class*="bg-[#5B4CF0]"]:hover:not(:disabled), body :is(button, a)[class*="bg-[#6F63F0]"]:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
body button[class*="border-slate-200"][class*="bg-white"]:hover:not(:disabled) { border-color: #C7D2FE; background-color: #F8F7FF; }
#app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { border-radius: 12px; transition: border-color .15s, box-shadow .2s, background-color .15s; }
#app :is(input, select, textarea):not(:disabled):not(:focus):hover { border-color: #C7D2FE; }

/* ---------- Motion ---------- */
/* On a new page the blocks rise in one after another. The class comes off after about a second, so a redraw never replays it. */
#page.page-in > * { animation: t-rise .5s var(--t-ease) both; }
#page.page-in > :nth-child(2) { animation-delay: .05s; }
#page.page-in > :nth-child(3) { animation-delay: .1s; }
#page.page-in > :nth-child(4) { animation-delay: .15s; }
#page.page-in > :nth-child(5) { animation-delay: .2s; }
#page.page-in > :nth-child(6) { animation-delay: .25s; }
#page.page-in > :nth-child(n+7) { animation-delay: .3s; }
@keyframes t-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* a placeholder with a soft sweep while a page loads */
.t-sk { position: relative; overflow: hidden; border-radius: 14px; background: #ECEEFB; }
.t-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: t-shimmer 1.4s ease-in-out infinite; }
@keyframes t-shimmer { to { transform: translateX(100%); } }

/* ---------- Home dashboard: light cards, lilac icons, colour only where it means something ---------- */
/* --c1/--c2 are a colour's two gradient stops, --cg its glow as r, g, b. Used by the pills (.db-p-*) and bars (.db-t-*). */
:is(.db-t-indigo, .db-p-indigo) { --c1: #5B4CF0; --c2: #8F7DF6; --cg: 111, 99, 240; }
:is(.db-t-violet, .db-p-violet) { --c1: #7C3AED; --c2: #A78BFA; --cg: 139, 92, 246; }
:is(.db-t-emerald, .db-p-emerald) { --c1: #059669; --c2: #34D399; --cg: 16, 185, 129; }
:is(.db-t-sky, .db-p-sky) { --c1: #0284C7; --c2: #38BDF8; --cg: 14, 165, 233; }
:is(.db-t-amber, .db-p-amber) { --c1: #B45309; --c2: #FBBF24; --cg: 245, 158, 11; }
:is(.db-t-rose, .db-p-rose) { --c1: #E11D48; --c2: #FB7185; --cg: 244, 63, 94; }
:is(.db-t-slate, .db-p-slate) { --c1: #475569; --c2: #94A3B8; --cg: 100, 116, 139; }
/* one surface for every card on the home screen: white, a hairline edge, a soft lilac shadow */
.db-card, .db-kpi, .db-qt { background: rgba(255, 255, 255, .92); border: 1px solid rgba(111, 99, 240, .1); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 32px -22px rgba(76, 61, 220, .35); }
/* Quick access: six across, three on a phone (the page's phone rule would stack them one per row) */
#page .db-qgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 899px) { #page .db-qgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
/* Quick access tiles: an icon in a white circle over its name */
.db-qt { transition: transform .2s var(--t-ease), box-shadow .25s, border-color .25s; }
.db-qt:hover { transform: translateY(-2px); border-color: rgba(111, 99, 240, .3); box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 22px 40px -22px rgba(76, 61, 220, .55); }
.db-qi { display: grid; place-items: center; flex: none; color: #5B4CF0; background: #fff; box-shadow: 0 0 0 4px rgba(111, 99, 240, .07), 0 6px 14px -8px rgba(91, 76, 240, .45); transition: color .2s, background-color .2s, box-shadow .25s; }
.db-qt:hover .db-qi { color: #fff; background: linear-gradient(135deg, #6F63F0, #8F7DF6); box-shadow: 0 0 0 4px rgba(111, 99, 240, .12), 0 8px 18px -8px rgba(91, 76, 240, .6); }
/* number cards */
.db-kpi { transition: transform .25s var(--t-ease), box-shadow .3s, border-color .25s; }
button.db-kpi:hover { transform: translateY(-3px); border-color: rgba(111, 99, 240, .28); box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 24px 44px -24px rgba(76, 61, 220, .5); }
/* one icon style for every card: a rounded square in the indigo to violet gradient (module cards use their own colour) */
.db-kic { display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #6F63F0, #A78BFA); box-shadow: 0 8px 16px -10px rgba(91, 76, 240, .7), inset 0 1px 0 rgba(255, 255, 255, .3); }
.db-num { color: #1E1B4B; }
.db-go { color: #8F7DF6; opacity: 0; transform: translate(-4px, 4px); transition: opacity .2s, transform .25s var(--t-ease); }
.db-kpi:is(:hover, :focus-visible) .db-go { opacity: 1; transform: none; }
.db-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--c1); background: rgba(var(--cg), .1); border: 1px solid rgba(var(--cg), .2); }
.db-bar { background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 0 10px rgba(var(--cg), .45); transform-origin: left; animation: db-grow 1s var(--t-ease) .25s both; }
.db-pill.sm { height: 20px; padding: 0 8px; font-size: 11px; }
/* module cards: a line in the module's colour along the top, a gradient icon, rows that light up */
.db-card { transition: transform .25s var(--t-ease), box-shadow .3s, border-color .25s; }
.db-card:hover { border-color: rgba(111, 99, 240, .22); box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 22px 44px -26px rgba(76, 61, 220, .5); }
.db-mod:hover { transform: translateY(-3px); }
.db-mod::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)); opacity: .85; }
.db-mi { display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 18px -10px rgba(var(--cg), .8), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.db-mod:hover .db-mi, .db-card:hover > div > div > .db-kic { transform: rotate(-8deg) scale(1.08); }
.db-kic { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.db-row { transition: background-color .15s; }
.db-row:hover { background: rgba(111, 99, 240, .05); }
.db-chev { flex: none; color: #CBD5E1; transition: color .15s, transform .2s var(--t-ease); }
.db-row:hover .db-chev { color: #8F7DF6; transform: translateX(2px); }
.db-ti { display: grid; place-items: center; flex: none; color: var(--c1); background: rgba(var(--cg), .12); }
/* calendar and holidays */
.db-today { color: #fff; font-weight: 600; background: linear-gradient(135deg, #6F63F0, #8F7DF6); box-shadow: 0 6px 14px -6px rgba(91, 76, 240, .6); }
.db-round { display: grid; place-items: center; color: #475569; background: #fff; border: 1px solid rgba(111, 99, 240, .18); transition: background-color .15s, color .15s, border-color .15s; }
.db-round:hover { color: #5B4CF0; background: #F5F3FF; border-color: rgba(111, 99, 240, .35); }
.db-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: none; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 16px -10px rgba(var(--cg), .8); }
/* Latest changes as a timeline: a line down the left, a dot per change */
.db-tl li::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: linear-gradient(#E0E7FF, #EDE9FE); }
.db-tl li:first-child::before { top: 16px; }
.db-tl li:last-child::before { bottom: calc(100% - 16px); }
.db-tl li::after { content: ""; position: absolute; left: 3px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #6F63F0, #A78BFA); box-shadow: 0 0 0 3px #fff, 0 0 10px rgba(111, 99, 240, .5); animation: db-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.db-tl li:nth-child(2)::after { animation-delay: .06s; } .db-tl li:nth-child(3)::after { animation-delay: .12s; } .db-tl li:nth-child(4)::after { animation-delay: .18s; }
.db-tl li:nth-child(5)::after { animation-delay: .24s; } .db-tl li:nth-child(6)::after { animation-delay: .3s; } .db-tl li:nth-child(n+7)::after { animation-delay: .36s; }
/* On arrival the cards of each row rise one after another (only while the page arrives: #page.page-in) */
#page.page-in :is(.db-qt, .db-kpi, .db-mod, .db-card) { animation: db-rise .55s var(--t-ease) both; }
#page.page-in :is(.db-qt, .db-kpi, .db-mod, .db-card):nth-child(2) { animation-delay: .05s; }
#page.page-in :is(.db-qt, .db-kpi, .db-mod, .db-card):nth-child(3) { animation-delay: .1s; }
#page.page-in :is(.db-qt, .db-kpi, .db-mod, .db-card):nth-child(4) { animation-delay: .15s; }
#page.page-in :is(.db-qt, .db-kpi, .db-mod, .db-card):nth-child(5) { animation-delay: .2s; }
#page.page-in :is(.db-qt, .db-kpi, .db-mod, .db-card):nth-child(6) { animation-delay: .25s; }
#page.page-in :is(.db-qt, .db-kpi, .db-mod, .db-card):nth-child(n+7) { animation-delay: .3s; }
@keyframes db-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes db-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes db-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes db-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(111, 99, 240, .45), 0 6px 14px -6px rgba(91, 76, 240, .6); } 50% { box-shadow: 0 0 0 6px rgba(111, 99, 240, 0), 0 6px 14px -6px rgba(91, 76, 240, .6); } }
/* number cards: a gradient icon, and the same icon large and faint in the corner */
.db-kgi { display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #6F63F0, #A78BFA); box-shadow: 0 10px 20px -10px rgba(91, 76, 240, .75), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.db-kpi:hover .db-kgi { transform: rotate(-8deg) scale(1.06); }
.db-wm { color: #6F63F0; opacity: .06; transform: rotate(-12deg); transition: transform .5s var(--t-ease), opacity .3s; pointer-events: none; }
.db-kpi:hover .db-wm { opacity: .1; transform: rotate(-4deg) scale(1.08); }
/* Easier to read on the home screen: the smallest text one step up, the greys a step darker */
#page[data-module="dashboard"] .text-\[10px\] { font-size: 11px; }
#page[data-module="dashboard"] .text-\[11px\] { font-size: 12px; }
#page[data-module="dashboard"] .text-xs { font-size: 12.5px; }
#page[data-module="dashboard"] .text-\[13px\] { font-size: 14px; }
#page[data-module="dashboard"] .text-slate-500 { color: #55607A; }
#page[data-module="dashboard"] .text-slate-400 { color: #747F96; }
#page[data-module="dashboard"] .db-pill.sm { font-size: 11.5px; }
/* All clear: the modules with nothing waiting, as one row of chips */
.db-clear { background: linear-gradient(135deg, rgba(236, 253, 245, .9), rgba(240, 249, 255, .9)); border: 1px solid rgba(16, 185, 129, .18); }
.db-chip { background: #fff; border: 1px solid rgba(148, 163, 184, .25); transition: transform .2s var(--t-ease), box-shadow .25s, border-color .2s; }
.db-chip:hover { transform: translateY(-1px); border-color: rgba(var(--cg), .45); box-shadow: 0 8px 16px -10px rgba(var(--cg), .6); }
/* Your day: a one-line summary at the top */
.db-day { background: linear-gradient(90deg, rgba(238, 240, 255, .95), rgba(245, 243, 255, .85) 60%, rgba(236, 246, 255, .9)); border: 1px solid rgba(111, 99, 240, .14); }
.db-dchip { background: rgba(255, 255, 255, .88); border: 1px solid rgba(var(--cg), .2); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform .2s var(--t-ease), box-shadow .25s, border-color .2s, background-color .2s; }
.db-dchip:hover { transform: translateY(-2px); background: #fff; border-color: rgba(var(--cg), .45); box-shadow: 0 12px 24px -14px rgba(var(--cg), .6); }
.db-dchip:hover .db-chev { color: rgb(var(--cg)); transform: translateX(2px); }
/* Pending approvals by module: the summary box with its ring, which draws its overdue arc on arrival */
.db-sum { background: linear-gradient(135deg, #F6F5FF, #EEF2FF); border: 1px solid rgba(111, 99, 240, .1); }
.db-ring { animation: db-ring-draw 1s var(--t-ease) .3s both; }
@keyframes db-ring-draw { from { stroke-dasharray: 0 var(--c); } }
.db-sum svg { animation: db-spin-in .9s var(--t-ease) both; }
@keyframes db-spin-in { from { opacity: 0; transform: rotate(-270deg) scale(.7); } to { opacity: 1; transform: rotate(-90deg); } }
/* rows slide in one after another; in each bar the on-time part fills first, then the overdue part carries on from it */
.db-apm > .db-row { animation: db-fade .4s var(--t-ease) both; }
.db-apm .db-bar { animation: db-grow .7s var(--t-ease) both; }
.db-apm .db-s2 { transform-origin: left; }
.db-apm > .db-row:nth-child(1) { animation-delay: .1s; }  .db-apm > .db-row:nth-child(1) .db-s1 { animation-delay: .3s; }  .db-apm > .db-row:nth-child(1) .db-s2 { animation-delay: .8s; }
.db-apm > .db-row:nth-child(2) { animation-delay: .16s; } .db-apm > .db-row:nth-child(2) .db-s1 { animation-delay: .38s; } .db-apm > .db-row:nth-child(2) .db-s2 { animation-delay: .88s; }
.db-apm > .db-row:nth-child(3) { animation-delay: .22s; } .db-apm > .db-row:nth-child(3) .db-s1 { animation-delay: .46s; } .db-apm > .db-row:nth-child(3) .db-s2 { animation-delay: .96s; }
.db-apm > .db-row:nth-child(4) { animation-delay: .28s; } .db-apm > .db-row:nth-child(4) .db-s1 { animation-delay: .54s; } .db-apm > .db-row:nth-child(4) .db-s2 { animation-delay: 1.04s; }
.db-apm > .db-row:nth-child(5) { animation-delay: .34s; } .db-apm > .db-row:nth-child(5) .db-s1 { animation-delay: .62s; } .db-apm > .db-row:nth-child(5) .db-s2 { animation-delay: 1.12s; }
.db-apm > .db-row:nth-child(n+6) { animation-delay: .4s; } .db-apm > .db-row:nth-child(n+6) .db-s1 { animation-delay: .7s; } .db-apm > .db-row:nth-child(n+6) .db-s2 { animation-delay: 1.2s; }
/* hover: the icon pops, the bar thickens and brightens, the late pill glows */
.db-apm .db-row .db-kic { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.db-apm .db-row:hover .db-kic { transform: scale(1.12) rotate(-6deg); }
.db-track { transition: transform .25s var(--t-ease), filter .25s; transform-origin: left center; }
.db-apm .db-row:hover .db-track { transform: scaleY(1.5); filter: brightness(1.08) saturate(1.15); }
.db-apm .db-row:hover .db-late { animation: db-glow 1.4s ease-in-out infinite; }
@keyframes db-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, .35); } 50% { box-shadow: 0 0 0 5px rgba(244, 63, 94, 0); } }
/* Waiting on you filter: All, Overdue, Due soon */
.db-seg { background: #F1F0FB; box-shadow: inset 0 0 0 1px rgba(111, 99, 240, .1); }
.db-seg-b { color: #64748B; transition: background-color .2s, color .2s, box-shadow .2s; }
.db-seg-b:hover { color: #1E1B4B; }
.db-seg-b.is-on { color: #4A3BE0; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 10px -6px rgba(76, 61, 220, .45); }
.db-seg-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; background: rgba(111, 99, 240, .12); color: #5B4CF0; }
.db-seg-b.is-late .db-seg-n { background: rgba(244, 63, 94, .12); color: #E11D48; }
/* rows fade in, one after another, whenever the list is drawn (arrival, a filter, an approval) */
.db-arow { animation: db-fade .35s var(--t-ease) both; }
.db-arow:nth-child(2) { animation-delay: .04s; } .db-arow:nth-child(3) { animation-delay: .08s; } .db-arow:nth-child(4) { animation-delay: .12s; } .db-arow:nth-child(5) { animation-delay: .16s; }
@keyframes db-fade { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
/* Waiting on you rows: a tint on hover, a red line down the left of a late one */
.db-arow { transition: background-color .15s; }
.db-arow:hover { background: rgba(111, 99, 240, .05); }
.db-arow.is-late::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(#FB7185, #E11D48); }
/* row actions: Open and Reject are quiet icons until the row is pointed at; Approve is soft lilac, and solid only on
   that row, so the list has one strong button at a time */
.db-ibtn { display: grid; place-items: center; flex: none; color: #A0AABD; background: transparent; border: 1px solid transparent; transition: color .15s, background-color .15s, border-color .15s; }
.db-arow:hover .db-ibtn { color: #64748B; }
.db-ibtn:hover { color: #5B4CF0 !important; background: #F5F3FF; border-color: rgba(111, 99, 240, .25); }
.db-ibtn.rej:hover { color: #E11D48 !important; background: #FFF1F2; border-color: rgba(244, 63, 94, .3); }
.db-appr { color: #4A3BE0; background: #EEF0FF; border: 1px solid rgba(111, 99, 240, .18); transition: color .2s, background .2s, box-shadow .25s, transform .15s; }
.db-arow:hover .db-appr, .db-appr:focus-visible { color: #fff; border-color: transparent; background: linear-gradient(135deg, #6F63F0, #8F7DF6); box-shadow: 0 8px 16px -10px rgba(111, 99, 240, .8); }
.db-appr:active { transform: scale(.97); }
/* how late or how soon: coloured text with a dot; a late one's dot pulses */
.db-due { color: #64748B; }
.db-due .db-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #CBD5E1; }
.db-due.is-soon { color: #B45309; } .db-due.is-soon .db-dot { background: #F59E0B; }
.db-due.is-late { color: #E11D48; } .db-due.is-late .db-dot { background: #F43F5E; box-shadow: 0 0 0 3px rgba(244, 63, 94, .15); }
@keyframes db-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, .5); } 50% { box-shadow: 0 0 0 5px rgba(244, 63, 94, 0); } }
.db-approve { background: linear-gradient(135deg, #6F63F0, #8F7DF6); box-shadow: 0 8px 16px -10px rgba(111, 99, 240, .8); transition: transform .15s, filter .2s; }
.db-approve:hover { filter: brightness(1.06); transform: translateY(-1px); }
/* Waiting on you */
.db-av { display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #6F63F0, #A78BFA); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body::before { animation: none !important; }
}