/* The idle warning.
 *
 * It was a bar across the bottom of the page. On a tall admin screen that is
 * exactly where nobody is looking — the thing it is warning about is the one
 * thing you need to see before it happens, and it sat below the fold of
 * attention while the clock ran out.
 *
 * A centred modal over a dimmed page instead. Amber, not red: nothing has gone
 * wrong yet, and a session about to expire is not an error.
 */

.idle-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 12, 15, .55);
  /* Enough to separate the dialog from the page, not so much that the page
     stops being readable — somebody deciding whether to stay may want to see
     what they were in the middle of. */
  backdrop-filter: blur(2px);
  animation: idle-fade .18s ease-out;
}

@keyframes idle-fade { from { opacity: 0 } to { opacity: 1 } }

.idle-warn {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  padding: 1.75rem;
  background: var(--a-bg-card, #fff);
  border: 1px solid var(--a-border, #E2E5EA);
  box-shadow: 0 24px 60px rgba(10, 12, 15, .28);
  text-align: center;
  animation: idle-rise .22s cubic-bezier(.2, .9, .3, 1);
}

@keyframes idle-rise {
  from { opacity: 0; transform: translateY(12px) scale(.97) }
  to   { opacity: 1; transform: none }
}

.idle-icon {
  width: 52px; height: 52px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(229, 168, 51, .16);
  color: #B07D18;
}
.idle-icon svg { width: 26px; height: 26px }

.idle-warn h2 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--a-fg, #12161B);
}

.idle-warn p {
  margin: 0 0 1.25rem;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--a-fg-3, #5A6472);
}

/* The number, large enough to read from across a desk — which is where
   somebody who has been idle for ten minutes probably is. */
.idle-count {
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 1.25rem;
  color: #B07D18;
  font-variant-numeric: tabular-nums;
}

.idle-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap }

.idle-warn button {
  border: 0; border-radius: 9px;
  padding: .7rem 1.5rem;
  font: inherit; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.idle-stay   { background: var(--a-accent, #B07D18); color: #fff }
.idle-logout { background: transparent; color: var(--a-fg-3, #5A6472);
               box-shadow: inset 0 0 0 1px var(--a-border, #E2E5EA) }

.idle-stay:hover   { filter: brightness(1.06) }
.idle-logout:hover { background: var(--a-bg-2, #F4F6F8) }

/* The last thirty seconds. A colour change is a second signal for anyone who
   has the sound muted, which on a work machine is most people. */
.idle-warn.is-urgent .idle-count { color: #B42318 }
.idle-warn.is-urgent .idle-icon  { background: rgba(217, 45, 32, .14); color: #B42318 }

[data-theme="dark"] .idle-warn,
[data-admin-theme="dark"] .idle-warn {
  background: #12161B;
  border-color: rgba(255, 255, 255, .1);
}
[data-theme="dark"] .idle-warn h2,
[data-admin-theme="dark"] .idle-warn h2 { color: #E8EBEF }
[data-theme="dark"] .idle-count,
[data-admin-theme="dark"] .idle-count { color: #EDC155 }
[data-theme="dark"] .idle-icon,
[data-admin-theme="dark"] .idle-icon { background: rgba(229,168,51,.14); color: #EDC155 }

@media (prefers-reduced-motion: reduce) {
  .idle-backdrop, .idle-warn { animation: none }
}

/* ── The absolute cap ────────────────────────────────────────
 *
 * Red, where the idle warning is amber, and one button instead of two.
 *
 * The idle warning is not an error — a page was left open, and pressing a
 * button undoes it. This one is different in kind: the cap runs from sign-in,
 * nothing extends it, and the only useful action is to save and go. Dressing
 * the two the same would teach people to reach for a "stay signed in" button
 * that is not there.
 */
.idle-warn.is-absolute .idle-icon {
  background: rgba(217, 45, 32, .14);
  color: #B42318;
}
.idle-warn.is-absolute .idle-count { color: #B42318 }
.idle-warn.is-absolute .idle-logout {
  background: #B42318;
  color: #fff;
  box-shadow: none;
}
.idle-warn.is-absolute .idle-logout:hover { filter: brightness(1.08); background: #B42318 }
.idle-warn.is-absolute p { max-width: 34ch; margin-inline: auto }

[data-theme="dark"] .idle-warn.is-absolute .idle-count,
[data-admin-theme="dark"] .idle-warn.is-absolute .idle-count { color: #F97066 }
[data-theme="dark"] .idle-warn.is-absolute .idle-icon,
[data-admin-theme="dark"] .idle-warn.is-absolute .idle-icon {
  background: rgba(249, 112, 102, .16); color: #F97066;
}

/* Tap targets. Somebody reading this has about two minutes and may be on a
   phone; 44px is the floor, and these buttons were under it at small sizes. */
.idle-warn button { min-height: 44px; min-width: 44px }

/* The dialog is focus-trapped, so the ring has to be visible — it is the only
   thing telling a keyboard user where they are inside it. */
.idle-warn button:focus-visible {
  outline: 2px solid var(--a-accent, #B07D18);
  outline-offset: 2px;
}

/* ── The confirmation after a token refresh ───────────────────
 *
 * A small notice rather than a dialog: the token refreshed, nothing needs
 * deciding, and interrupting somebody a second time to tell them the
 * interruption is over would be worse than the interruption.
 *
 * Its class was written into csrf-guard.js and never styled, so on the one
 * path that could have shown it, it would have rendered as unstyled text in
 * the corner of the page.
 */
.csrf-guard-banner {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 10001;
  padding: .7rem 1.1rem;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  background: var(--a-fg, #1f2937);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  animation: csrf-rise .2s ease-out;
}

/* Above the backdrop's 10000, so it is visible even if one is somehow still
   there — which is the bug this drop fixes, and belt as well as braces. */
.csrf-guard-ok { background: var(--a-ok, #15803d) }

@keyframes csrf-rise {
  from { opacity: 0; transform: translateY(6px) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .csrf-guard-banner { animation: none }
}

/* drop 953: the public website and the client portal define --a-* for their own dark design, so in the light theme the
   card picked up a dark background. Each page's own theme now decides: light pages get the light card, dark pages the
   dark one — whichever variables the page happens to define. */
html[data-theme="light"] .idle-warn { background: #FFFFFF; border-color: #E2E5EA; color: #12161B }
html[data-theme="light"] .idle-warn h2 { color: #12161B }
html[data-theme="light"] .idle-warn p, html[data-theme="light"] .idle-warn .idle-msg { color: #4A5361 }
html[data-theme="light"] .idle-count { color: #8C6410 }
html[data-theme="light"] .idle-icon { background: rgba(176, 125, 24, .12); color: #8C6410 }
html[data-theme="light"] .idle-logout { color: #4A5361; border-color: #D5DAE2 }
html[data-theme="light"] .idle-logout:hover { background: #F4F6F8 }
html[data-theme="light"] .idle-warn.is-urgent .idle-count { color: #B42318 }
html[data-theme="dark"] .idle-warn { background: #12161B; border-color: rgba(255, 255, 255, .1); color: #E8EBEF }
html[data-theme="dark"] .idle-warn p, html[data-theme="dark"] .idle-warn .idle-msg { color: #AEB6C2 }

/* ── Drop 1081: the countdown ring ───────────────────────────
 * The time left as minutes and seconds inside a ring that empties, so the warning reads at a glance from across a
 * desk. Amber while there is time, red in the last thirty seconds. One design for every portal and both themes. */
.idle-warn { max-width: 440px; padding: 2rem 1.75rem 1.6rem }
.idle-ring { position: relative; width: 132px; height: 132px; margin: 0 auto 1.1rem }
.idle-ring svg { width: 100%; height: 100%; transform: rotate(-90deg) }
[dir="rtl"] .idle-ring svg { transform: rotate(-90deg) scaleY(-1) }
.idle-ring-bg { fill: none; stroke: rgba(176, 125, 24, .16); stroke-width: 8 }
.idle-ring-fg { fill: none; stroke: #C98E1F; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s }
.idle-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem }
.idle-ring .idle-count { margin: 0; font-size: 2rem; letter-spacing: .01em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace }
.idle-ring-l { font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--a-fg-3, #5A6472) }
.idle-warn.is-urgent .idle-ring-fg { stroke: #D92D20 }
.idle-warn.is-urgent .idle-ring-bg { stroke: rgba(217, 45, 32, .14) }
.idle-warn.is-absolute .idle-ring-fg { stroke: #D92D20 }
.idle-warn h2 { font-size: 1.15rem }
.idle-warn p { max-width: 36ch; margin-inline: auto }
.idle-actions .idle-stay { min-width: 10rem }
.idle-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
/* signed out: whatever was on the page is no longer theirs to read */
.idle-backdrop.is-ended { background: rgba(10, 12, 15, .92); backdrop-filter: blur(12px) }
html[data-theme="light"] .idle-ring-l { color: #4A5361 }
html[data-theme="dark"] .idle-ring-l, [data-admin-theme="dark"] .idle-ring-l { color: #AEB6C2 }
[data-theme="dark"] .idle-ring-bg, [data-admin-theme="dark"] .idle-ring-bg { stroke: rgba(237, 193, 85, .16) }
[data-theme="dark"] .idle-ring-fg, [data-admin-theme="dark"] .idle-ring-fg { stroke: #EDC155 }
[data-theme="dark"] .idle-warn.is-urgent .idle-ring-fg, [data-admin-theme="dark"] .idle-warn.is-urgent .idle-ring-fg,
[data-theme="dark"] .idle-warn.is-absolute .idle-ring-fg, [data-admin-theme="dark"] .idle-warn.is-absolute .idle-ring-fg { stroke: #F97066 }

/* "You are still signed in" after Stay signed in */
.idle-toast { position: fixed; z-index: 10002; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; padding: .75rem 1.1rem;
  border-radius: 10px; font-size: .85rem; font-weight: 700; color: #fff; background: #15803D; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  animation: csrf-rise .2s ease-out; transition: opacity .4s, transform .4s }
.idle-toast.is-out { opacity: 0; transform: translateY(6px) }
@media (prefers-reduced-motion: reduce) { .idle-ring-fg { transition: none } .idle-toast { animation: none; transition: none } }
@media print { .idle-backdrop, .idle-toast { display: none !important } }