/* 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).

   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).

   Redrawn 2026-09-12 (icon disc, type step, content held to the page's
   measure) and again 2026-09-13, after the operator looked at it on the
   live panel: a 7% tint reads as decoration, and a notice that must be
   acted on before the next invoice can be collected should not look
   like something the page happens to mention. So:

     · a FILLED bar in the warning hue, not a tint — the amber the
       meters use (--mb-meter-amber), with the darker warning hue as
       its bottom rule. No coloured edge on the side: the fill itself
       is the signal (2026-09-13). Still not red: nothing is broken and
       nothing is locked; red here would teach the office to ignore red.
     · ink on amber, in both modes. #171717 on #F59E0B is 8:1; the
       suite computes it rather than trusting this comment.
     · sticky under the navbar, so scrolling the page does not scroll
       the obligation out of sight. It leaves when the mandate does.
     · the strip spans the full width — that is what says it concerns
       the whole panel — but its CONTENT stops at 1180px so the button
       stays beside its own sentence on a wide monitor. */

.mandate-bar {
  display: block;
  padding: 0;
  margin: 0;
  /* Pinned under the navbar (56px, navbar.css) at one layer below it,
     so the navbar's own menus still open over this. */
  position: sticky;
  top: 56px;
  z-index: calc(var(--mb-z-navbar, 60) - 1);
  background: var(--mb-meter-amber, #F59E0B);
  border-bottom: 1px solid var(--mb-warn, #B45309);
  color: var(--mb-ink, #171717);
  font-size: 13.5px;
  line-height: 1.55;
}

.mandate-bar .mandate-row {
  display: flex;
  align-items: center;
  gap: 14px;
  /* The same measure the pages use, so the sentence and the button stay
     in one another's company on a wide monitor. */
  max-inline-size: 1180px;
  margin-inline: auto;
  padding: 12px 20px;
}

/* The anchor. 32px of ink-tinted disc carries at a glance where a 9px
   dot does not, and the icon says WHICH kind of notice this is before
   the words are read. */
.mandate-bar .mandate-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--mb-ink, #171717) 12%, transparent);
  color: var(--mb-ink, #171717);
}
.mandate-bar .mandate-mark .mandate-ic { inline-size: 17px; block-size: 17px; }

.mandate-bar .mandate-text { flex: 1; min-inline-size: 0; }
.mandate-bar .mandate-text b {
  display: block;
  color: var(--mb-ink, #171717);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -0.005em;
}
.mandate-bar .mandate-text span {
  display: block;
  margin-block-start: 1px;
  color: var(--mb-ink, #171717);
  opacity: 0.86;
  font-size: 12.5px;
  /* An address or a reference must not push the row sideways. */
  overflow-wrap: anywhere;
}

.mandate-bar .mandate-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 44px: the touch target, not a visual choice. */
  min-block-size: 44px;
  padding-inline: 18px;
  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), transform 160ms var(--mb-ease-out, ease), opacity 160ms var(--mb-ease-out, ease);
}
.mandate-bar .mandate-cta:hover { background: var(--mb-ink-2, #2A2A2A); transform: translateY(-1px); }
.mandate-bar .mandate-cta:active { transform: translateY(0); }
.mandate-bar .mandate-cta:disabled { opacity: 0.6; cursor: progress; transform: none; }
/* Ink, not lime: a lime ring on amber is the one pairing here that does
   not clear 3:1. */
.mandate-bar .mandate-cta:focus-visible {
  outline: 2px solid var(--mb-ink, #171717);
  outline-offset: 3px;
}
.mandate-bar .mandate-cta .mandate-ic { inline-size: 16px; block-size: 16px; }

/* Dark mode keeps the same fill on purpose. A dimmed amber on a dark
   ground reads as "a warning you may ignore"; the obligation is the
   same in both modes, so the bar is. Only the edge is softened. */
body.dark .mandate-bar {
  border-bottom-color: color-mix(in srgb, var(--mb-warn, #B45309) 60%, var(--mb-meter-amber, #F59E0B));
}

/* "Konto wird gelöscht" (2026-09-17): the same strip, the danger hue —
   this one IS about something irreversible, so red is right here and
   only here. Ink stays the ink on the light tint; the button too. */
.mandate-bar.is-deletion {
  background: var(--mb-danger-200, #FECACA);
  border-bottom-color: var(--mb-danger, #E5484D);
}
.mandate-bar.is-deletion .mandate-mark { background: color-mix(in srgb, var(--mb-danger, #E5484D) 22%, transparent); color: var(--mb-danger, #E5484D); }

@media (max-width: 720px) {
  .mandate-bar { position: static; }
  .mandate-bar .mandate-row { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  /* The button takes the second row rather than squeezing the sentence
     into two words a line. */
  .mandate-bar .mandate-cta { inline-size: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mandate-bar .mandate-cta { transition: none; }
  .mandate-bar .mandate-cta:hover { transform: none; }
}