/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/* public/mandate-bar.css — the SEPA strip under the navbar (markup +
   behavior in /js/shell/mandate-bar.js, emitted from
   src/features/shell/shell.mandate.ts).

   Warm, not red: nothing is broken and nothing is locked — an invoice
   simply cannot be collected yet. Red here would teach the office to
   ignore red. It carries the `mt-scope` class because every token in
   this file is declared under it; without that the colours resolve to
   nothing and the strip paints itself invisible (IS-077). */

.mandate-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  margin: 0;
  /* One hue, one token: the soft ground and the hairline are mixed from
     --mb-warn rather than invented, so a change to the warning colour
     moves all three together. */
  background: color-mix(in srgb, var(--mb-warn) 7%, var(--surface-card, #FFF));
  border-bottom: 1px solid color-mix(in srgb, var(--mb-warn) 26%, var(--surface-card, #FFF));
  color: var(--mb-body, #404040);
  font-size: 13.5px;
  line-height: 1.6;
}
.mandate-bar .mandate-dot {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--mb-warn);
  flex: none;
}
.mandate-bar .mandate-text {
  flex: 1;
  min-inline-size: 0;
}
.mandate-bar .mandate-text b {
  display: block;
  color: var(--mb-ink, #171717);
  font-weight: 700;
  font-size: 13.5px;
}
.mandate-bar .mandate-text span {
  display: block;
  color: var(--mb-muted, #737373);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.mandate-bar .mandate-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 40px;
  padding-inline: 16px;
  border: 1px solid var(--mb-ink, #171717);
  border-radius: 10px;
  background: var(--mb-ink, #171717);
  color: #FAFAFA;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 160ms var(--mb-ease-out, ease), opacity 160ms var(--mb-ease-out, ease);
}
.mandate-bar .mandate-cta:hover { background: var(--mb-ink-2, #2A2A2A); }
.mandate-bar .mandate-cta:disabled { opacity: 0.6; cursor: progress; }
.mandate-bar .mandate-cta:focus-visible {
  outline: 2px solid var(--mb-lime-deep, #4D7C0F);
  outline-offset: 2px;
}
.mandate-bar .mandate-ic { inline-size: 16px; block-size: 16px; }

body.dark .mandate-bar {
  background: color-mix(in srgb, var(--mb-warn) 16%, var(--surface-card, #171717));
  border-bottom-color: color-mix(in srgb, var(--mb-warn) 34%, var(--surface-card, #171717));
}
body.dark .mandate-bar .mandate-cta {
  background: var(--mb-lime, #A4F03A);
  border-color: var(--mb-lime, #A4F03A);
  color: #0E0E0E;
}

@media (max-width: 720px) {
  .mandate-bar { flex-wrap: wrap; padding: 12px 14px; }
  .mandate-bar .mandate-cta { inline-size: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mandate-bar .mandate-cta { transition: none; }
}