/* =====================================================================
   FortiSign components
   ---------------------------------------------------------------------
   The namespaced .fs-* set. Every value comes from fortisign-tokens.css;
   there is not a raw hex in this file, which is the rule that keeps the
   palette from drifting again.

   Namespaced on purpose. Nothing here selects a bare element or a
   Bootstrap class, so an unmodified legacy page picks up none of it. A
   screen opts in by using the class; that is what makes a page-by-page
   rollout safe next to a signing pipeline.

   Load order: tokens -> ui -> components.
   ===================================================================== */

/* ---------------------------------------------------------------------
   APP SHELL
   --------------------------------------------------------------------- */

.fs-app-shell {
  display: grid;
  grid-template-columns: var(--fs-sidebar-width) 1fr;
  grid-template-rows: var(--fs-topbar-height) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar page";
  min-height: 100vh;
  background: var(--fs-canvas);
}

.fs-sidebar {
  grid-area: sidebar;
  background: var(--fs-navy-gradient);
  color: var(--fs-on-navy);
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-1);
  padding: var(--fs-space-4) var(--fs-space-3);
  overflow-y: auto;
}

.fs-sidebar__brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--fs-space-2);
  margin-bottom: var(--fs-space-5);
}
.fs-sidebar__brand img { max-width: 160px; height: auto; display: block; }

.fs-sidebar__section {
  margin: var(--fs-space-5) var(--fs-space-2) var(--fs-space-2);
  font-size: var(--fs-text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fs-on-navy-muted);
}

.fs-nav-item {
  display: flex;
  align-items: center;
  gap: var(--fs-space-3);
  min-height: 44px;                     /* thumb-sized, per the brief */
  padding: 0 var(--fs-space-3);
  border-radius: var(--fs-radius-md);
  color: var(--fs-on-navy-muted);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-medium);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color var(--fs-duration-fast) var(--fs-ease),
              color var(--fs-duration-fast) var(--fs-ease);
}
.fs-nav-item:hover { background: rgba(255, 255, 255, .08); color: var(--fs-on-navy); }

/* Current page: colour AND a rail AND weight. Three signals, so the
   active item survives a greyscale print or a colour-blind reader. */
.fs-nav-item[aria-current="page"],
.fs-nav-item.is-active {
  background: rgba(255, 255, 255, .12);
  color: var(--fs-on-navy);
  border-left-color: var(--fs-on-navy-accent);
  font-weight: var(--fs-weight-semibold);
}

.fs-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-4);
  padding: 0 var(--fs-space-5);
  background: var(--fs-ink-000);
  border-bottom: 1px solid var(--fs-ink-200);
}

.fs-page {
  grid-area: page;
  padding: var(--fs-space-6) var(--fs-space-5);
  max-width: var(--fs-page-max);
  width: 100%;
}

.fs-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-4);
  margin-bottom: var(--fs-space-5);
}
.fs-page-header h1 {
  margin: 0;
  font-size: var(--fs-text-xl);
  font-weight: var(--fs-weight-bold);
  color: var(--fs-navy-700);
  letter-spacing: -.01em;
}
.fs-page-header p {
  margin: var(--fs-space-1) 0 0;
  font-size: var(--fs-text-sm);
  color: var(--fs-ink-600);
}

/* ---------------------------------------------------------------------
   SURFACES
   --------------------------------------------------------------------- */

.fs-card {
  background: var(--fs-ink-000);
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm);
  padding: var(--fs-space-5);
}
.fs-card--flush { padding: 0; overflow: hidden; }
.fs-card__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fs-space-3);
  padding: var(--fs-space-4) var(--fs-space-5);
  border-bottom: 1px solid var(--fs-ink-200);
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-navy-700);
}

/* ---------------------------------------------------------------------
   CONTROLS
   --------------------------------------------------------------------- */

.fs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  min-height: 44px;
  padding: 0 var(--fs-space-5);
  border: 1px solid transparent;
  border-radius: var(--fs-radius-md);
  font-family: var(--fs-font);
  font-size: var(--fs-text-base);
  font-weight: var(--fs-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fs-duration-fast) var(--fs-ease),
              box-shadow var(--fs-duration-fast) var(--fs-ease),
              transform var(--fs-duration-fast) var(--fs-ease);
}
.fs-button--primary   { background: var(--fs-brand-action); color: var(--fs-ink-000); }
.fs-button--primary:hover { background: var(--fs-brand-action-hover); box-shadow: var(--fs-shadow-md); }
.fs-button--secondary { background: var(--fs-ink-000); color: var(--fs-navy-700); border-color: var(--fs-ink-300); }
.fs-button--secondary:hover { background: var(--fs-navy-100); border-color: var(--fs-navy-500); }
.fs-button--ghost     { background: transparent; color: var(--fs-brand-action); }
.fs-button--ghost:hover { background: var(--fs-brand-action-quiet); }
.fs-button--danger    { background: var(--fs-danger-fg); color: var(--fs-ink-000); }
.fs-button:active     { transform: translateY(1px); box-shadow: none; }
.fs-button[disabled], .fs-button[aria-disabled="true"] {
  background: var(--fs-ink-200); color: var(--fs-ink-500);
  cursor: not-allowed; transform: none; box-shadow: none;
}
/* Guards against a second submit while a request is in flight. Visual
   only -- the form's own handler still decides what happens. */
.fs-button.is-busy { pointer-events: none; opacity: .7; }

.fs-input, .fs-select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--fs-space-4);
  border: 1px solid var(--fs-ink-300);
  border-radius: var(--fs-radius-md);
  background: var(--fs-ink-100);
  font-family: var(--fs-font);
  font-size: var(--fs-text-base);       /* 16px: below this iOS zooms on focus */
  color: var(--fs-ink-900);
  transition: border-color var(--fs-duration-fast) var(--fs-ease),
              background-color var(--fs-duration-fast) var(--fs-ease),
              box-shadow var(--fs-duration-fast) var(--fs-ease);
}
.fs-input:hover, .fs-select:hover { border-color: var(--fs-ink-500); }
.fs-input:focus, .fs-select:focus {
  outline: none; background: var(--fs-ink-000);
  border-color: var(--fs-brand-action);
  box-shadow: 0 0 0 3px var(--fs-brand-action-quiet);
}
.fs-input[aria-invalid="true"] { border-color: var(--fs-danger-fg); }
.fs-select { appearance: none; padding-right: var(--fs-space-7); }

/* =====================================================================
   TRUST PATH
   ---------------------------------------------------------------------
   Draft -> Prepared -> Awaiting signatures -> Signed -> Verified

   The product's signature component. Most e-signature tools show a status
   chip: one word, no context. A signer looking at a chip cannot tell how
   far along the document is or what happens next.

   The path shows the whole lifecycle with the current position marked, so
   the answer to "where is this and what is left" is readable at a glance.

   It is presentation only. It maps server-provided status onto a step
   index; it never writes, and where the current step cannot be determined
   from what the server sent, the caller renders only the known state
   rather than guessing.
   ===================================================================== */

.fs-trust-path {
  display: flex;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: fs-step;
}

.fs-trust-path__step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fs-space-2);
  position: relative;
  min-width: 0;
  text-align: center;
}

/* The connector is drawn behind the markers, offset so it meets the edges
   rather than running under them. */
.fs-trust-path__step::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--fs-ink-200);
  z-index: 0;
}
.fs-trust-path__step:first-child::before { display: none; }
.fs-trust-path__step.is-done::before,
.fs-trust-path__step.is-current::before { background: var(--fs-path-signed-fg); }

.fs-trust-path__marker {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fs-ink-000);
  border: 2px solid var(--fs-ink-300);
  color: var(--fs-ink-500);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-bold);
  flex: none;
}

.fs-trust-path__label {
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-medium);
  color: var(--fs-ink-600);
  line-height: var(--fs-leading-tight);
  overflow-wrap: anywhere;
}

/* Completed: green fill plus a tick glyph supplied by the markup, so the
   state survives without colour. */
.fs-trust-path__step.is-done .fs-trust-path__marker {
  background: var(--fs-path-signed-fg);
  border-color: var(--fs-path-signed-fg);
  color: var(--fs-ink-000);
}
.fs-trust-path__step.is-done .fs-trust-path__label { color: var(--fs-path-signed-fg); }

/* Current: brand ring, heavier label, and aria-current in the markup. */
.fs-trust-path__step.is-current .fs-trust-path__marker {
  background: var(--fs-brand-action);
  border-color: var(--fs-brand-action);
  color: var(--fs-ink-000);
  box-shadow: 0 0 0 4px var(--fs-brand-action-quiet);
}
.fs-trust-path__step.is-current .fs-trust-path__label {
  color: var(--fs-brand-action);
  font-weight: var(--fs-weight-bold);
}

/* Terminal states replace the forward path rather than extending it: a
   declined document has not progressed, it has stopped. */
.fs-trust-path__step.is-stopped .fs-trust-path__marker {
  background: var(--fs-path-declined-fg);
  border-color: var(--fs-path-declined-fg);
  color: var(--fs-ink-000);
}
.fs-trust-path__step.is-stopped .fs-trust-path__label { color: var(--fs-path-declined-fg); }

/* Mobile: the horizontal path cannot hold five labels at 390px, so it
   becomes a vertical list with the connector on the left. */
@media (max-width: 640px) {
  .fs-trust-path { flex-direction: column; align-items: stretch; gap: var(--fs-space-1); }
  .fs-trust-path__step {
    flex-direction: row;
    align-items: center;
    gap: var(--fs-space-3);
    text-align: left;
    padding: var(--fs-space-1) 0;
  }
  .fs-trust-path__step::before {
    top: -8px; left: 15px; width: 2px; height: 16px;
  }
  .fs-trust-path__label { font-size: var(--fs-text-sm); }
}

/* ---------------------------------------------------------------------
   STATUS
   Text + icon + colour. Never colour alone.
   --------------------------------------------------------------------- */

.fs-status {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-2);
  padding: var(--fs-space-1) var(--fs-space-3);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: .02em;
  white-space: nowrap;
}
.fs-status__icon { flex: none; width: 14px; height: 14px; }
.fs-status--draft     { color: var(--fs-path-draft-fg);     background: var(--fs-path-draft-bg); }
.fs-status--preparing { color: var(--fs-path-prepared-fg);  background: var(--fs-path-prepared-bg); }
.fs-status--awaiting-me     { color: var(--fs-path-awaiting-fg); background: var(--fs-path-awaiting-bg); }
.fs-status--awaiting-others { color: var(--fs-path-awaiting-fg); background: var(--fs-path-awaiting-bg); }
.fs-status--ready     { color: var(--fs-brand-action);      background: var(--fs-brand-action-quiet); }
.fs-status--signed    { color: var(--fs-path-signed-fg);    background: var(--fs-path-signed-bg); }
.fs-status--verified  { color: var(--fs-path-verified-fg);  background: var(--fs-path-verified-bg); }
.fs-status--declined  { color: var(--fs-path-declined-fg);  background: var(--fs-path-declined-bg); }
.fs-status--expired   { color: var(--fs-path-expired-fg);   background: var(--fs-path-expired-bg); }
.fs-status--failed    { color: var(--fs-path-failed-fg);    background: var(--fs-path-failed-bg); }

/* ---------------------------------------------------------------------
   DOCUMENT ROW / SIGNER CARD
   --------------------------------------------------------------------- */

.fs-document-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--fs-space-4);
  padding: var(--fs-space-4) var(--fs-space-5);
  border-bottom: 1px solid var(--fs-ink-200);
  background: var(--fs-ink-000);
  transition: background-color var(--fs-duration-fast) var(--fs-ease);
}
.fs-document-row:hover { background: var(--fs-navy-100); }
.fs-document-row:last-child { border-bottom: 0; }
.fs-document-row__name {
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-navy-700);
  overflow-wrap: anywhere;
}
.fs-document-row__meta {
  font-size: var(--fs-text-sm);
  color: var(--fs-ink-600);
  font-variant-numeric: tabular-nums;
}

.fs-signer-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--fs-space-4);
  padding: var(--fs-space-4);
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-md);
  background: var(--fs-ink-000);
}
.fs-signer-card__order {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fs-navy-100);
  color: var(--fs-navy-700);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-bold);
  font-variant-numeric: tabular-nums;
}
.fs-signer-card__name  { font-weight: var(--fs-weight-semibold); color: var(--fs-ink-900); }
.fs-signer-card__email { font-size: var(--fs-text-sm); color: var(--fs-ink-600); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   STEPPER (upload wizard)
   --------------------------------------------------------------------- */

.fs-stepper { display: flex; align-items: center; gap: var(--fs-space-2); flex-wrap: wrap; }
.fs-stepper__step {
  display: flex; align-items: center; gap: var(--fs-space-2);
  font-size: var(--fs-text-sm); color: var(--fs-ink-600);
}
.fs-stepper__num {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--fs-ink-200); color: var(--fs-ink-600);
  font-weight: var(--fs-weight-bold); font-size: var(--fs-text-sm);
}
.fs-stepper__step.is-current .fs-stepper__num { background: var(--fs-brand-action); color: var(--fs-ink-000); }
.fs-stepper__step.is-current { color: var(--fs-brand-action); font-weight: var(--fs-weight-semibold); }
.fs-stepper__step.is-done .fs-stepper__num { background: var(--fs-path-signed-fg); color: var(--fs-ink-000); }
.fs-stepper__step.is-done { color: var(--fs-path-signed-fg); }

/* ---------------------------------------------------------------------
   EMPTY / LOADING / DIALOG / TOAST
   --------------------------------------------------------------------- */

.fs-empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--fs-space-3);
  padding: var(--fs-space-8) var(--fs-space-5);
  text-align: center;
  color: var(--fs-ink-600);
}
.fs-empty-state__title {
  font-size: var(--fs-text-lg);
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-navy-700);
}
.fs-empty-state__body { max-width: 46ch; font-size: var(--fs-text-sm); }

.fs-loading { display: inline-flex; align-items: center; gap: var(--fs-space-3); color: var(--fs-ink-600); }
.fs-loading__spinner {
  width: 20px; height: 20px; flex: none;
  border: 2px solid var(--fs-ink-200);
  border-top-color: var(--fs-brand-action);
  border-radius: 50%;
  animation: fs-spin .7s linear infinite;
}
@keyframes fs-spin { to { transform: rotate(360deg); } }

/* A spinner that cannot be stopped is a vestibular trigger; this swaps it
   for a static ring so the state is still visible. */
@media (prefers-reduced-motion: reduce) {
  .fs-loading__spinner { animation: none; border-top-color: var(--fs-brand-action); }
}

.fs-dialog {
  background: var(--fs-ink-000);
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-lg);
  padding: var(--fs-space-5);
  max-width: 480px;
  width: calc(100% - var(--fs-space-6));
}
.fs-dialog__title {
  margin: 0 0 var(--fs-space-3);
  font-size: var(--fs-text-lg);
  font-weight: var(--fs-weight-bold);
  color: var(--fs-navy-700);
}
.fs-dialog__actions {
  display: flex; justify-content: flex-end; gap: var(--fs-space-3);
  margin-top: var(--fs-space-5);
}

.fs-toast {
  display: flex; align-items: flex-start; gap: var(--fs-space-3);
  padding: var(--fs-space-4) var(--fs-space-5);
  border-radius: var(--fs-radius-md);
  box-shadow: var(--fs-shadow-lg);
  color: var(--fs-ink-000);
  font-size: var(--fs-text-sm);
}
.fs-toast--success { background: var(--fs-ok-fg); }
.fs-toast--error   { background: var(--fs-danger-fg); }
.fs-toast--warning { background: var(--fs-warn-fg); }
.fs-toast--info    { background: var(--fs-info-fg); }

/* ---------------------------------------------------------------------
   RESPONSIVE SHELL
   --------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .fs-app-shell { grid-template-columns: var(--fs-sidebar-width-sm) 1fr; }
  .fs-sidebar__brand img { max-width: 40px; }
  .fs-nav-item { justify-content: center; padding: 0; }
  .fs-nav-item span:not(.fs-nav-item__icon) { display: none; }
  .fs-sidebar__section { display: none; }
}

@media (max-width: 768px) {
  .fs-app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "page";
  }
  /* Off-canvas rather than stacked: a sidebar above the content would push
     the document list below the fold on every load. */
  .fs-sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: var(--fs-sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--fs-duration-base) var(--fs-ease);
    z-index: 40;
  }
  .fs-sidebar.is-open { transform: none; }
  .fs-sidebar__brand img { max-width: 160px; }
  .fs-nav-item { justify-content: flex-start; padding: 0 var(--fs-space-3); }
  .fs-nav-item span:not(.fs-nav-item__icon) { display: inline; }
  .fs-page { padding: var(--fs-space-5) var(--fs-space-4); }
  .fs-document-row { grid-template-columns: 1fr auto; row-gap: var(--fs-space-2); }
}

/* Focus is never removed, only restyled. */
.fs-app-shell :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fs-focus-ring);
  outline-offset: 2px;
}