/* Sri Sara HMS - "it is done": the green badge with the tick (Dr. Ranadheer, 10 Oct 2026).

   "Make sure that we will show the animation, like how we see in the app - bill paid, everything cleared -
   those pop-ups will come and it will show like green thing, tick mark ... in the reception and billing
   counter. In the app also." And that evening he sent the picture of it: the "verified badge" - a green
   seal with a scalloped edge, flat, a bold white tick in the middle. Not a plain round with a ring.

   One part for every place something has been DONE and the server has said so: static/done_tick.js
   builds it. It belongs to no look - the classic screens, the new Sky screens and the patient app all
   use the same markup - so every class starts `done-` and every accent is a variable with a safe default:

     --done-green      the badge: the fresh mid green of his picture. The white tick on it is a large drawing.
     --done-green-ink  a darker green of the same family, for green WORDS - the badge's green is too light
                       for words on white
     --done-ink / --done-muted   the words (default: whatever the box it sits in uses)
     --done-accent     the card's main button (staff blue by default; the patient app sets its orange)
     --done-due        a line that says money is still owed
     --done-card       the ground of the card HMSDone.show() opens

   What moves: the badge comes in from a little smaller with a quarter turn and a small overshoot, then
   the tick draws itself - two thirds of a second in all, with transform, opacity and stroke-dashoffset
   only, so nothing on the page shifts. The REST state of every rule is the finished badge; the movement is
   added only for a browser that says motion is welcome, so "reduce motion" (and an old browser that does
   not know the question) gets the finished badge at once. No halo, no glow, no confetti, no stars, no sound. */

.done-mark {
  --done-green: #3BB54A; --done-green-ink: #0E6B41; --done-due: #B4470A;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0;
  color: var(--done-ink, inherit);
}
/* 56 in a card, 40 beside the words of a heading ("make them small, looks cute", 10 Oct 2026): it is lines, sharp at each */
.done-tick { width: 56px; height: 56px; flex: none; display: block; margin-bottom: 4px; }
.done-tick svg { width: 100%; height: 100%; display: block; overflow: visible; }
.done-badge { fill: var(--done-green); transform-origin: 32px 32px; }
.done-check { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 38; stroke-dashoffset: 0; }
.done-title { font-size: 1.05rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; max-width: 100%; }
.done-amount { font-size: 1.5rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 100%; }
.done-lines { list-style: none; margin: 4px 0 0; padding: 0; max-width: 100%; }
.done-lines li { font-size: .84rem; font-weight: 600; color: var(--done-muted, #55627A); overflow-wrap: anywhere; }
.done-lines li.is-strong { color: var(--done-ink, inherit); font-weight: 800; }
.done-lines li.is-due { color: var(--done-due); font-weight: 800; }
.done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; width: 100%; }
/* One main action: only the button marked primary is filled. */
.done-btn { font: inherit; font-size: .9rem; font-weight: 800; min-height: 40px; padding: 0 20px; border-radius: 999px; cursor: pointer; background: #fff; color: var(--done-accent, #1E56A8); border: 1.5px solid var(--done-accent, #1E56A8); transition: background .15s, transform .12s; }
.done-btn.is-primary { background: var(--done-accent, #1E56A8); color: #fff; }
.done-btn:hover { background: #F2F6FC; }
.done-btn.is-primary:hover { background: var(--done-accent, #1E56A8); filter: brightness(.92); }
.done-btn:active { transform: scale(.97); }
.done-btn:focus-visible { outline: 2px solid var(--done-accent, #1E56A8); outline-offset: 3px; }

/* A heading inside a box that is already there: the badge beside the words. */
.done-mark.is-row { flex-direction: row; align-items: center; text-align: left; gap: 10px; }
.done-mark.is-row .done-tick { width: 40px; height: 40px; margin: 0; }
.done-mark.is-row .done-words { min-width: 0; flex: 1; }
.done-mark.is-row .done-amount { font-size: 1.2rem; }
.done-mark.is-row .done-lines { margin-top: 0; }
.done-mark.is-row .done-actions { justify-content: flex-start; }
.done-words { min-width: 0; max-width: 100%; }

/* On a filled blue card it is the same green badge, held by a thin white line so it reads on the blue. */
.done-mark.is-on-blue { --done-ink: #fff; --done-muted: rgba(255, 255, 255, .9); }
.done-mark.is-on-blue .done-badge { stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.done-mark.is-on-blue .done-lines li.is-due { color: #FFD9BF; }

/* By itself, for an action with no result box: a small card in the middle. */
.done-veil { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 250; display: grid; place-items: center; padding: 16px; background: rgba(10, 22, 45, .42); }
.done-card { --done-ink: #0B1D3A; width: 100%; max-width: 300px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--done-card, #fff); color: var(--done-ink); border-radius: 20px; padding: 18px 18px 14px; box-shadow: 0 18px 44px -14px rgba(11, 29, 58, .35); outline: 0; }

@media (prefers-reduced-motion: no-preference) {
  .done-mark:not(.is-still) .done-badge { animation: done-badge .35s cubic-bezier(.34, 1.56, .64, 1) both; }
  .done-mark:not(.is-still) .done-check { animation: done-check .3s ease-out .32s both; }
  .done-veil:not(.is-still) { animation: done-veil .16s ease-out both; }
  .done-veil:not(.is-still) .done-card { animation: done-card .22s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes done-badge { from { opacity: 0; transform: scale(.6) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes done-check { from { stroke-dashoffset: 38; } to { stroke-dashoffset: 0; } }
@keyframes done-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes done-card { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media print { .done-veil { display: none; } }