/* ===========================================================================
   VEORA ONE — design system v26
   ---------------------------------------------------------------------------
   The visual idea is a travel document. Work in this office moves on printed
   things: invoice stubs, manifests, boarding passes, bank transfer slips, a
   LUNAS stamp. So the interface borrows that world's structure — a counterfoil
   in ink, a form on pale stock, ruled fields, margin marks, a perforated tear
   line — rather than the usual dashboard chrome.

   Colour: navy ink (the brand navy), cool lavender-white stock, and one accent
   taken from the logo's magenta, used the way a stamp pad is used: rarely.
   Type: Archivo throughout. Headings use its width axis (expanded, like
   terminal signage); body uses the normal width. Azeret Mono only where
   characters must line up: OTP digits, account numbers.
   ========================================================================= */

:root {
  /* --- ink: the counterfoil the office keeps ---------------------------- */
  --ink:            #0E1C2B;
  --ink-raised:     #16293D;
  --ink-soft:       #1B3048;
  --ink-line:       #3A5877;
  --on-ink:         #EDF1F5;
  --on-ink-dim:     #93A7BC;

  /* --- paper: the part you fill in and hand over ------------------------ */
  --paper:          #F6F6FB;
  --paper-sunk:     #ECEDF5;
  --paper-raised:   #FFFFFF;
  --rule:           #D6D8E6;
  --rule-strong:    #B4B8CF;
  --on-paper:       #131C2B;
  --on-paper-dim:   #556072;

  /* --- the seal: the logo's magenta, used like a stamp pad --------------- */
  --seal:           #B0126A;
  --seal-bright:    #E0449A;
  --seal-wash:      #F9E7F1;

  /* --- status: borrowed from the stamps already used on documents ------- */
  --verify:         #1E6B58;
  --verify-wash:    #E4F0EB;
  --flag:           #A33129;
  --flag-wash:      #F8E9E7;
  --hold:           #8A5B12;
  --hold-wash:      #FBF0DC;
  --note:           #27506E;
  --note-wash:      #E8EFF5;

  /* --- measure ---------------------------------------------------------- */
  --step--1:  0.8125rem;
  --step-0:   0.9375rem;
  --step-1:   1.0625rem;
  --step-2:   1.375rem;
  --step-3:   1.875rem;
  --step-4:   2.5rem;

  --font-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ui:      "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-code:    "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-field:  6px;
  --r-card:   14px;
  --r-pill:   999px;

  --lift-1: 0 1px 2px rgba(14, 28, 43, .06);
  --lift-2: 0 6px 18px -8px rgba(14, 28, 43, .22);
  --lift-3: 0 28px 60px -28px rgba(14, 28, 43, .45);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* The dashboard keeps its own dark chrome; only components defined here
   respond to this flag, so nothing downstream is restyled by accident. */
[data-veora-surface="ink"] {
  --paper:        var(--ink-raised);
  --paper-sunk:   var(--ink);
  --paper-raised: var(--ink-soft);
  --rule:         var(--ink-line);
  --rule-strong:  #33506F;
  --on-paper:     var(--on-ink);
  --on-paper-dim: var(--on-ink-dim);
}

/* ===========================================================================
   Alerts — a margin mark, the way a clerk annotates a form
   ========================================================================= */

.v-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  padding: .875rem 1rem .875rem .875rem;
  border: 1px solid var(--rule);
  border-left-width: 4px;
  border-radius: var(--r-field);
  background: var(--paper-raised);
  color: var(--on-paper);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: 1.5;
}

.v-alert__mark {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  margin-top: .0625rem;
}

.v-alert__body > strong {
  display: block;
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -.005em;
  margin-bottom: .125rem;
}

.v-alert__body p { margin: 0; color: var(--on-paper-dim); }

.v-alert__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.v-alert__close {
  grid-column: 3;
  align-self: start;
  border: 0;
  background: none;
  color: var(--on-paper-dim);
  font-size: 1.125rem;
  line-height: 1;
  padding: .125rem .25rem;
  cursor: pointer;
  border-radius: 4px;
}
.v-alert__close:hover { color: var(--on-paper); background: var(--paper-sunk); }
.v-alert:has(.v-alert__close) { grid-template-columns: auto 1fr auto; }

.v-alert[data-tone="success"] { border-left-color: var(--verify); background: var(--verify-wash); }
.v-alert[data-tone="success"] .v-alert__mark { background: var(--verify); color: #fff; }

.v-alert[data-tone="danger"]  { border-left-color: var(--flag); background: var(--flag-wash); }
.v-alert[data-tone="danger"] .v-alert__mark  { background: var(--flag); color: #fff; }

.v-alert[data-tone="warning"] { border-left-color: var(--hold); background: var(--hold-wash); }
.v-alert[data-tone="warning"] .v-alert__mark { background: var(--hold); color: #fff; }

.v-alert[data-tone="info"]    { border-left-color: var(--note); background: var(--note-wash); }
.v-alert[data-tone="info"] .v-alert__mark    { background: var(--note); color: #fff; }

.v-alert[data-tone="pending"] { border-left-color: var(--seal); background: var(--seal-wash); }
.v-alert[data-tone="pending"] .v-alert__mark {
  background: none;
  border: 2px solid var(--seal);
  border-top-color: transparent;
  animation: v-spin .7s linear infinite;
}
@keyframes v-spin { to { transform: rotate(360deg); } }

/* Arrival: the mark is struck first, then the text settles beside it. */
.v-alert[data-enter] { animation: v-alert-in .32s var(--ease) both; }
@keyframes v-alert-in {
  from { opacity: 0; transform: translateY(-4px); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; transform: none;             clip-path: inset(0 0 0 0); }
}

/* ===========================================================================
   Toasts
   ========================================================================= */

.v-toasts {
  position: fixed;
  z-index: 9200;
  inset-inline-end: 1.25rem;
  inset-block-end: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(23rem, calc(100vw - 2.5rem));
  pointer-events: none;
}
.v-toasts > * { pointer-events: auto; }

.v-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: start;
  padding: .8125rem .9375rem;
  border-radius: var(--r-field);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--note);
  background: var(--paper-raised);
  color: var(--on-paper);
  box-shadow: var(--lift-2);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: 1.45;
  animation: v-toast-in .28s var(--ease) both;
}
.v-toast strong { display: block; font-weight: 600; font-size: var(--step-0); }
.v-toast p { margin: .0625rem 0 0; color: var(--on-paper-dim); }
.v-toast__mark { width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: #fff; }
.v-toast__close { border: 0; background: none; color: var(--on-paper-dim); font-size: 1.125rem; line-height: 1; cursor: pointer; padding: 0 .125rem; border-radius: 4px; }
.v-toast__close:hover { color: var(--on-paper); }

.v-toast[data-tone="success"] { border-left-color: var(--verify); }
.v-toast[data-tone="success"] .v-toast__mark { background: var(--verify); }
.v-toast[data-tone="danger"]  { border-left-color: var(--flag); }
.v-toast[data-tone="danger"]  .v-toast__mark { background: var(--flag); }
.v-toast[data-tone="warning"] { border-left-color: var(--hold); }
.v-toast[data-tone="warning"] .v-toast__mark { background: var(--hold); }
.v-toast[data-tone="info"]    { border-left-color: var(--note); }
.v-toast[data-tone="info"]    .v-toast__mark { background: var(--note); }

.v-toast.is-leaving { animation: v-toast-out .2s var(--ease) both; }
@keyframes v-toast-in  { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes v-toast-out { to { opacity: 0; transform: translateX(12px); } }

@media (max-width: 640px) {
  .v-toasts { inset-block: 1rem auto; inset-inline: 1rem; width: auto; }
  @keyframes v-toast-in  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  @keyframes v-toast-out { to { opacity: 0; transform: translateY(-10px); } }
}

/* ===========================================================================
   Modal — a document slip laid on the desk
   ========================================================================= */

.v-modal {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(14, 28, 43, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.v-modal.is-open { opacity: 1; }

.v-modal__card {
  width: min(28rem, 100%);
  background: var(--paper);
  color: var(--on-paper);
  border-radius: var(--r-card);
  border: 1px solid var(--rule);
  box-shadow: var(--lift-3);
  padding: 1.5rem;
  font-family: var(--font-ui);
  transform: translateY(8px) scale(.985);
  transition: transform .24s var(--ease);
}
.v-modal.is-open .v-modal__card { transform: none; }

.v-modal__mark {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.0625rem; font-weight: 700; color: #fff;
  background: var(--note);
  margin-bottom: .875rem;
}
.v-modal__card[data-tone="success"] .v-modal__mark { background: var(--verify); }
.v-modal__card[data-tone="danger"]  .v-modal__mark { background: var(--flag); }
.v-modal__card[data-tone="warning"] .v-modal__mark { background: var(--hold); }

.v-modal__card h2 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 650;
  font-size: var(--step-2);
  line-height: 1.2;
  margin: 0 0 .375rem;
  letter-spacing: -.012em;
}
.v-modal__card > p { margin: 0; color: var(--on-paper-dim); font-size: var(--step-0); line-height: 1.55; }

.v-modal__detail {
  margin-top: .875rem;
  padding: .6875rem .8125rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-field);
  font-family: var(--font-code);
  font-size: var(--step--1);
  color: var(--on-paper-dim);
  word-break: break-word;
}

.v-modal__actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.v-modal__actions button {
  font: inherit;
  font-weight: 600;
  font-size: var(--step-0);
  padding: .5625rem 1.0625rem;
  border-radius: var(--r-field);
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--on-paper);
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.v-modal__actions button:hover { background: var(--paper-sunk); }
.v-modal__actions .is-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.v-modal__actions .is-primary:hover { background: var(--ink-raised); }
.v-modal__actions .is-danger { background: var(--flag); border-color: var(--flag); color: #fff; }
.v-modal__actions .is-danger:hover { filter: brightness(1.08); }

/* ===========================================================================
   Shared primitives
   ========================================================================= */

.v-stamp {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .5625rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
}
.v-stamp[data-tone="verify"] { color: var(--verify); }
.v-stamp[data-tone="seal"]   { color: var(--seal); }
.v-stamp[data-tone="flag"]   { color: var(--flag); }

.v-inline-loader {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.v-inline-loader::before {
  content: "";
  width: .875rem; height: .875rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: v-spin .7s linear infinite;
}

.v-alert :focus-visible, .v-toast :focus-visible, .v-modal__card :focus-visible,
.v-modal__actions button:focus-visible {
  outline: 2px solid var(--seal) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ===========================================================================
   SweetAlert2 — 16 existing call sites keep working, dressed as our own
   ========================================================================= */

.swal2-popup {
  font-family: var(--font-ui) !important;
  border-radius: var(--r-card) !important;
  border: 1px solid var(--rule) !important;
  background: var(--paper) !important;
  color: var(--on-paper) !important;
  box-shadow: var(--lift-3) !important;
}
.swal2-title {
  font-family: var(--font-display) !important;
  font-stretch: 112% !important;
  font-weight: 650 !important;
  letter-spacing: -.012em !important;
  color: var(--on-paper) !important;
}
.swal2-html-container { color: var(--on-paper-dim) !important; font-size: var(--step-0) !important; }
.swal2-styled.swal2-confirm {
  background: var(--ink) !important;
  border-radius: var(--r-field) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.swal2-styled.swal2-cancel {
  background: var(--paper-raised) !important;
  color: var(--on-paper) !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: var(--r-field) !important;
  font-weight: 600 !important;
}
.swal2-styled:focus-visible { outline: 2px solid var(--seal) !important; outline-offset: 2px !important; }
.swal2-icon.swal2-success { border-color: var(--verify) !important; color: var(--verify) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--verify) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--verify) 30%, transparent) !important; }
.swal2-icon.swal2-error { border-color: var(--flag) !important; color: var(--flag) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--flag) !important; }
.swal2-icon.swal2-warning { border-color: var(--hold) !important; color: var(--hold) !important; }
.swal2-icon.swal2-info,
.swal2-icon.swal2-question { border-color: var(--note) !important; color: var(--note) !important; }
.swal2-toast { border-left: 4px solid var(--note) !important; }

/* ===========================================================================
   Legacy-hook reconciliation
   The notification layer keeps the older class names for the modal manager in
   veora-ux-v23110.js. These rules make sure the older stylesheets, which load
   earlier, cannot reposition or recolour the v26 components.
   ========================================================================= */

.veora-toast-stack.v-toasts { top: auto; left: auto; right: 1.25rem; bottom: 1.25rem; z-index: 9200; }
.veora-toast.v-toast { opacity: 1; transform: none; border-radius: var(--r-field); background: var(--paper-raised); box-shadow: var(--lift-2); }
.veora-toast.v-toast strong { font-size: var(--step-0); }
.veora-toast.v-toast p { font-size: var(--step--1); line-height: 1.45; margin: .0625rem 0 0; color: var(--on-paper-dim); }
.veora-toast.v-toast button.v-toast__close { min-height: 0; padding: 0 .125rem; color: var(--on-paper-dim); }
.veora-modal-layer.v-modal { z-index: 9400; background: rgba(14, 28, 43, .55); backdrop-filter: blur(3px); }
.veora-modal-layer.v-modal .v-modal__card { border-radius: var(--r-card); border: 1px solid var(--rule); background: var(--paper); box-shadow: var(--lift-3); padding: 1.5rem; max-height: min(44rem, calc(100dvh - 2.5rem)); overflow: auto; }

@media (max-width: 640px) {
  .veora-toast-stack.v-toasts { top: max(.75rem, env(safe-area-inset-top, 0px)); bottom: auto; left: .75rem; right: .75rem; width: auto; }
  /* Phones get a bottom sheet; the primary action sits where the thumb is. */
  .veora-modal-layer.v-modal { place-items: end center; padding: .625rem; padding-bottom: max(.625rem, env(safe-area-inset-bottom, 0px)); }
  .veora-modal-layer.v-modal .v-modal__card { width: 100%; border-radius: 1.125rem 1.125rem .875rem .875rem; transform: translateY(1.5rem); }
  .veora-modal-layer.v-modal.is-open .v-modal__card { transform: none; }
  .v-modal__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .v-modal__actions button:only-child { grid-column: 1 / -1; }
}

/* ===========================================================================
   Motion preference
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .v-alert[data-enter],
  .v-toast,
  .v-toast.is-leaving { animation: none !important; }
  .v-modal, .v-modal__card { transition: none !important; }
  .v-alert[data-tone="pending"] .v-alert__mark,
  .v-inline-loader::before { animation-duration: 1.6s; }
}