/* Component layer: surfaces, controls, tiles, dialogs and the install UI.
   Was product-ui.css + pwa/pwa.css + product-polish.css, in that order, so
   the cascade is unchanged. Loads after pages.css, before layout.css. */

/* ===================================================================
   .tile — MARKUP CONTRACT
   ===================================================================
   One component for the three tiles of the overview: company, stat, hub.
   Build the dashboard against exactly this markup; the CSS assumes it.

   Containers
     .tile-grid    auto-fill, minmax(260px, 1fr)  -> row A, the companies
     .tile-strip   4 equal columns (2 on phones)  -> row B, the four numbers
     .tile-wrap    a tile plus its .tile-actions  -> only when a tile needs buttons
     .tile-row     horizontal scroll-snap strip   -> phones, the company strip

   Stat tile
     <a class="tile tile-stat" href="/invoices?overdue=1">
       <span class="tile-eyebrow">Po splatnosti</span>
       <strong class="tile-value tone-overdue">128 400 Kc</strong>
       <span class="tile-foot">3 faktury &middot; nejstarsi 24 dni</span>
     </a>

   Company tile
     <a class="tile tile-company" href="/?company=7">
       <span class="tile-brand">                     <!-- only inside .tile-grid.is-branded -->
         <img class="tile-logo" src="data:image/png;base64,..." alt="">
       </span>
       <span class="tile-head">
         <span class="tile-avatar" aria-hidden="true">FA</span>  <!-- only when there is no .tile-brand -->
         <span class="tile-title">FRAMA s.r.o.</span>
         <span class="tile-dot is-ok"></span>        <!-- bank: is-ok / is-warn / is-off -->
       </span>
       <span class="tile-eyebrow">Po splatnosti</span>
       <strong class="tile-value tone-overdue">128 400 Kc</strong>
       <span class="tile-foot">3 faktury po splatnosti</span>
       <span class="tile-meta">
         <span><i>K uhrade</i><b>312 000 Kc</b></span>
         <span><i>Letos</i><b>1 204 000 Kc</b></span>
       </span>
       <span class="tile-foot">Banka: v poradku &middot; sync pred 4 min</span>
       <span class="tile-chart"><svg role="img" aria-label="..."> ... </svg></span>
     </a>

   Hub tile
     <a class="tile tile-hub" href="/reports">
       <span class="tile-icon"><svg class="icon"> ... </svg></span>
       <span class="tile-title">Reporty</span>
       <span class="tile-foot">Doklady, uhrady a vysledky</span>
     </a>

   Rules
     1. The whole tile is the <a>. Never nest a link or a button inside it;
        actions go in a sibling .tile-actions inside .tile-wrap.
     2. Only <span>, <strong>, <b>, <i>, <svg> and the one <img> of
        .tile-brand inside a tile, so the link stays valid and the tile
        stays reachable with one Tab stop. That <img> carries alt="":
        it is the company's mark and its name is written right below it.
     3. .tile-value carries the money reading through one of
        .tone-paid / .tone-open / .tone-overdue / .tone-draft, and the word
        next to it must say the same thing (never colour alone).
     4. .is-muted dims a tile (the DEMO company), .is-total marks the sum tile.
     5. A tile that is still loading gets aria-busy="true"; it keeps its height.
     6. .tile-dot needs a text equivalent nearby; it is decorative on its own.
     7. A company tile is a grid of the seven slots shown above, in that
        order, so the amounts read across the row whatever the name does.
        Keep every slot, empty if need be: a company with no documents
        still emits <span class="tile-chart"></span>, because a slot that
        disappears takes the alignment of the whole row with it.
        A tile without money (.is-limited) has the first three only.
   =================================================================== */

/* 260px, not 230: at a laptop width that is four columns instead of five, and four columns leave room for the
   longest amount on one line. A wrapped amount is what used to push every tile in the row out of step. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.tile-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.tile-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}

a.tile:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.tile:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.tile[aria-busy="true"] {
  color: var(--muted);
}

.tile.is-muted {
  background: var(--surface-subtle);
  color: var(--muted);
}

.tile.is-total {
  border-style: dashed;
}

/* The company you are signed into, and the word that says so; colour alone never carries it. */
.tile.is-current {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.tile-flag {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tile-flag.is-test {
  background: var(--surface-subtle);
  color: var(--muted);
}

.tile-eyebrow {
  font-size: var(--text-sm);
  font-weight: 550;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tile-title {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.tile-value {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.tile-value small {
  font-size: var(--text-sm);
  font-weight: 450;
  letter-spacing: 0;
  margin-left: var(--space-1);
  color: var(--muted);
}

.tile-value.tone-paid {
  color: var(--money-paid);
}

.tile-value.tone-open {
  color: var(--money-open);
}

.tile-value.tone-overdue {
  color: var(--money-overdue);
}

.tile-value.tone-draft {
  color: var(--money-draft);
}

.tile-foot {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
}

.tile-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.tile-head .tile-title {
  flex: 1;
  min-width: 0;
}

.tile-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.tile-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--muted);
}

.tile-dot.is-ok {
  background: var(--success-text);
}

.tile-dot.is-warn {
  background: var(--warning-text);
}

.tile-dot.is-off {
  background: var(--line);
}

/* Two fixed columns rather than wrapping: the same three readings then occupy the same two rows on every tile,
   so the labels sit under each other across the whole grid instead of wherever the text happened to break. */
.tile-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-1);
}

.tile-meta>span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* An odd number of readings leaves the last one alone in its row; it takes the whole width rather than sitting
   next to a hole. */
.tile-meta>span:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.tile-meta i {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--muted);
}

.tile-meta b {
  font-size: var(--text-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tile-chart {
  display: block;
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--chart-received);
}

.tile-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.tile-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  margin-bottom: var(--space-1);
}

.tile-icon .icon {
  width: 20px;
  height: 20px;
}

.tile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tile-hub .tile-title {
  font-size: var(--text-xl);
  letter-spacing: -.02em;
}

.tile-stat .tile-value {
  margin-top: auto;
}

/* ------------------------------------------------------------------
   Company tiles: one grid, seven fixed slots, read across the row.

   The flex column used to let the name decide where the money sat, so
   a three-line name pushed its amount below the amounts beside it and
   the row read as a staircase. The slots are the seven children of the
   markup contract above, in that order; the chart is last and its row
   is the only one that grows, so the slack a tile without a chart still
   reserves falls at the bottom edge, where it reads as padding rather
   than as a hole between two lines of text. A tile without a chart keeps
   an empty .tile-chart, because a slot that disappears on one tile takes
   the alignment of every tile beside it with it.
   ------------------------------------------------------------------ */
.tile-company {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto 1fr;
  align-content: start;
}

/* With a logo row the tile has eight slots; the class sits on the grid, not on the tile, because the row is
   reserved for all of them or for none. Logos differ in shape — a wide wordmark, a square mark, an upright
   monogram — so the box is fixed and the image is fitted inside it rather than the other way round. */
.tile-grid.is-branded .tile-company {
  grid-template-rows: auto auto auto auto auto auto auto 1fr;
}

/* 48px, not 36: an upright mark like a monogram is limited by the height of the box, and at 36px those came
   out as postage stamps beside a wordmark that filled the width. */
.tile-brand {
  display: flex;
  align-items: center;
  height: 48px;
  margin-bottom: var(--space-1);
}

.tile-logo {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

/* No numbers to line up, so this one keeps its own height instead of the shared slots. Both selectors, because
   the branded rule above is more specific than the class on its own. */
.tile-company.is-limited,
.tile-grid.is-branded .tile-company.is-limited {
  grid-template-rows: none;
}

/* Two lines of name, always: one line leaves the gap, three would take it from the money. */
.tile-company .tile-head {
  align-items: start;
  min-height: 40px;
}

.tile-company .tile-title {
  font-size: var(--text-base);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
}

.tile-company .tile-avatar,
.tile-company .tile-flag,
.tile-company .tile-dot {
  margin-top: 2px;
}

/* Smaller than the four numbers below, which are the reading of the company you are actually in. */
.tile-company .tile-value {
  font-size: clamp(22px, 1.8vw, 28px);
  overflow-wrap: normal;
}

/* 42px is the 8px of padding above plus the 34px of the line itself, so the slot is exactly as tall with a
   sparkline in it as without one, and two rows of tiles come out the same height. */
.tile-company .tile-chart {
  align-self: end;
  min-height: 42px;
  width: 100%;
}

.tile-company .tile-chart svg {
  height: 34px;
}

/* Two empty states, so "nothing yet" never looks like "something is wrong". */
.allgood {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--success-text);
  font-size: var(--text-md);
}

.allgood:before {
  content: '\2713';  /* escaped check mark, so the file stays ASCII */
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--success-bg);
  color: var(--success-text);
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  line-height: 1;
}

.tile .allgood {
  font-size: var(--text-sm);
}

@media(max-width:1100px) {
  .tile-grid,
  .tile-strip {
    gap: var(--space-4);
  }
}

@media(max-width:760px) {
  .tile-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:640px) {
  .tile-grid,
  .tile-strip {
    gap: var(--space-3);
  }
  .tile {
    padding: var(--space-4);
  }
  /* Phones scroll the company tiles instead of stacking eight of them. */
  .tile-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: var(--space-1);
  }
  .tile-row>.tile,
  .tile-row>.tile-wrap {
    scroll-snap-align: start;
  }
  .tile-company .tile-chart,
  .tile-company .tile-meta>span:nth-child(n+3) {
    display: none;
  }
}

/* ==================================================================
   FRAMA material and motion
   ================================================================== */

/* The frame is quiet matte graphite; copper/champagne appears only as a
   hairline reflection. Content cards remain high-contrast paper surfaces. */
.product-app {
  background:
    radial-gradient(circle at 12% -10%,var(--material-glow),transparent 32%),
    linear-gradient(145deg,var(--graphite-soft),var(--graphite-deep));
}
.app-frame {
  border-color:var(--material-line);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--champagne-bright) 22%,transparent),
    0 18px 50px var(--shadow-overlay-color);
}
.topbar {
  background:
    linear-gradient(115deg,var(--graphite-deep),var(--graphite) 64%,var(--graphite-soft));
  border-bottom-color:var(--material-line);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--champagne-bright) 18%,transparent),
    0 8px 24px var(--shadow-raised-color);
}
.topbar #navigation a,
.topbar .profile .icon-button,
.topbar .menu-toggle {
  color:var(--on-graphite-muted);
}
.topbar #navigation a:hover,
.topbar #navigation a.active {
  color:var(--on-graphite);
}
.topbar #navigation a.active {
  background:color-mix(in srgb,var(--copper) 32%,var(--graphite-soft));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--champagne) 38%,transparent);
}
.topbar .brand {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(145deg,var(--champagne-bright),var(--champagne));
  border:1px solid color-mix(in srgb,var(--champagne-bright) 56%,var(--copper));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--white) 68%,transparent),
    inset 0 -1px 0 color-mix(in srgb,var(--copper) 38%,transparent),
    0 3px 9px color-mix(in srgb,var(--graphite-deep) 44%,transparent);
}
.topbar .brand:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(105deg,transparent 18%,color-mix(in srgb,var(--white) 25%,transparent) 46%,transparent 70%);
  opacity:.55;
  pointer-events:none;
}
.topbar .brand img {
  position:relative;
  z-index:1;
  filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--white) 75%,transparent)) drop-shadow(0 -1px 0 color-mix(in srgb,var(--copper) 38%,transparent));
}
.topbar #current-company,
.topbar #global-search,
.topbar .theme-toggle {
  background:color-mix(in srgb,var(--graphite-soft) 88%,var(--champagne));
  border-color:color-mix(in srgb,var(--champagne) 30%,var(--graphite-soft));
  color:var(--on-graphite);
}
.topbar #company-switch,
.topbar #global-query {
  color:var(--on-graphite);
}
.topbar #global-query::placeholder,
.topbar #current-company>.icon,
.topbar #current-company>span {
  color:var(--on-graphite-muted);
}
.topbar #company-switch option {
  background:var(--graphite);
  color:var(--on-graphite);
}
.card,.tile {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--champagne-bright) 13%,transparent),
    var(--shadow);
}
a.tile {
  transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease,background-color 180ms ease;
}
a.tile:hover {
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--champagne-bright) 18%,transparent),
    0 12px 28px var(--shadow-raised-color);
}
a.tile:active {
  transform:translateY(-1px);
}
.create-toggle,.btn.primary {
  background:linear-gradient(135deg,var(--copper),var(--primary-bg));
  border-color:color-mix(in srgb,var(--champagne) 48%,var(--copper));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--champagne-bright) 34%,transparent);
}

/* A single motion vocabulary: reveal, chart draw, count-up and success. */
@keyframes frama-reveal {
  from {opacity:0;transform:translateY(9px)}
  to {opacity:1;transform:translateY(0)}
}
@keyframes frama-draw {
  from {stroke-dashoffset:1}
  to {stroke-dashoffset:0}
}
@keyframes frama-ring {
  from {stroke-dasharray:0 100}
}
@keyframes frama-success {
  0% {box-shadow:0 0 0 0 color-mix(in srgb,var(--success-text) 40%,transparent)}
  55% {box-shadow:0 0 0 8px transparent}
  100% {box-shadow:var(--shadow)}
}
/* `backwards`, not `both`: the last keyframe of frama-reveal is the element's
   own resting state, so filling it forwards changes nothing that is seen — but
   a filled animation outranks every normal declaration, so it was also holding
   `transform:translateY(0)` over the hover lift of a tile and over the tilt of
   the document sheet for as long as the page lived. */
.motion-enter {
  animation:frama-reveal 380ms cubic-bezier(.2,.75,.25,1) backwards;
}
.tile-grid>.motion-enter:nth-child(2),
.tile-strip>.motion-enter:nth-child(2),
.cards-grid>.motion-enter:nth-child(2) {animation-delay:45ms}
.tile-grid>.motion-enter:nth-child(3),
.tile-strip>.motion-enter:nth-child(3),
.cards-grid>.motion-enter:nth-child(3) {animation-delay:90ms}
.tile-grid>.motion-enter:nth-child(n+4),
.tile-strip>.motion-enter:nth-child(n+4),
.cards-grid>.motion-enter:nth-child(n+4) {animation-delay:135ms}
.chart-svg line,
.chart-spark polyline {
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:frama-draw 760ms cubic-bezier(.2,.7,.2,1) forwards;
}
.chart-svg line:nth-child(2n) {animation-delay:70ms}
.chart-spark polyline {animation-duration:900ms}
.donut-slice {
  animation:frama-ring 780ms cubic-bezier(.2,.7,.2,1) both;
}
.tile-value.is-counting,.stat-number.is-counting {
  color:var(--accent-text);
}
.toast.is-success,.alert.success {
  animation:frama-success 620ms ease-out both;
  border-color:color-mix(in srgb,var(--success-text) 42%,var(--line));
}

@media(prefers-reduced-motion:reduce) {
  .motion-enter,
  .chart-svg line,
  .chart-spark polyline,
  .donut-slice,
  .toast.is-success,
  .alert.success {
    animation:none!important;
  }
  .chart-svg line,
  .chart-spark polyline {
    stroke-dashoffset:0;
  }
  a.tile:hover,
  a.tile:active {
    transform:none;
  }
}

/* ------------------------------------------------------------------
   Product surfaces and controls.
   ------------------------------------------------------------------ */

body {
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.product-app {
  padding:20px;
  overflow-x:clip;
}
.app-frame {
  max-width:1800px;
  margin:0 auto;
  min-height:calc(100dvh - 40px);
  border-radius:var(--radius-lg);
  background:var(--surface-subtle);
  border:1px solid var(--line);
}
.app-area {
  margin:0;
  min-width:0;
}
.app-area main {
  padding:26px 30px 40px;
  max-width:none;
  margin:0;
}
.app-footer {
  padding:20px 30px 100px;
  gap:15px;
}
.topbar {
  display:block;
  position:relative;
  inset:auto;
  min-height:0;
  height:auto;
  padding:20px 28px 0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.masthead {
  display:flex;
  align-items:center;
  gap:22px;
  min-width:0;
}
.brand {
  height:auto;
  padding:0;
  gap:10px;
  flex:none;
  color:var(--ink);
}
.brand img {
  height:43px;
  width:43px;
  max-height:none;
  object-fit:contain;
}
.brand>span {
  font-size:var(--text-xl);
  font-weight:750;
  letter-spacing:-.045em;
  line-height:1.05;
}
.brand small {
  display:block;
  font-size:var(--text-sm);
  font-weight:450;
  letter-spacing:.055em;
  margin-top:3px;
  color:var(--muted);
}
.navigation-panel {
  display:contents;
}
.sidebar-controls {
  display:none;
}
#navigation {
  flex:1;
  display:flex;
  flex-direction:row;
  gap:3px;
  align-items:center;
  justify-content:center;
  min-width:0;
}
#navigation a {
  min-height:44px;
  padding:10px 16px;
  border-radius:var(--radius-pill);
  font-size:var(--text-md);
  font-weight:550;
  gap:6px;
  color:var(--ink);
  white-space:nowrap;
}
#navigation a>span {
  display:none;
}
#navigation a.active:before {
  display:none;
}
#navigation a.active {
  background:var(--accent-soft);
  color:var(--accent-text);
}
#navigation a:hover {
  background:var(--surface-raised);
  color:var(--ink);
}
.navigation-panel .profile {
  order:4;
  flex:none;
  border:0;
  margin:0;
  padding:0;
  gap:7px;
  color:var(--ink);
}
.profile>div {
  display:none;
}
.profile .avatar {
  width:35px;
  height:35px;
  background:var(--surface-raised);
  color:var(--ink);
  font-size:var(--text-md);
}
.profile .icon-button {
  color:var(--muted);
  width:36px;
  min-height:44px;
}
.header-tools {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.header-tools .theme-label {
  display:none;
}
.header-tools .theme-toggle {
  border:0;
  background:var(--surface);
  border-radius:50%;
  width:44px;
  height:44px;
}
.topbar #global-search {
  display:flex;
  align-items:center;
  gap:8px;
  width:190px;
  min-width:0;
  max-width:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:0 12px;
  margin:0;
  height:44px;
}
#global-search input {
  padding:0;
  background:transparent;
  border:0;
  min-height:0;
  width:100%;
  font-size:var(--text-sm);
  color:var(--ink);
}
#global-search kbd {
  flex:none;
  background:var(--surface-subtle);
  padding:1px 5px;
  border:0;
}
.header-context {
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px 0 12px;
  min-width:0;
}
.breadcrumb {
  font-size:var(--text-xs);
  gap:9px;
  white-space:nowrap;
}
.header-context .current-company {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:var(--radius-pill);
  padding:0 10px;
  background:var(--surface);
  max-width:340px;
  min-width:0;
  font-weight:550;
  font-size:var(--text-sm);
  flex-basis:auto;
  order:0;
}
#company-switch {
  height:40px;
  min-height:40px;
  max-width:100%;
  width:100%;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--ink);
  font-size:var(--text-sm);
  font-weight:550;
  padding:6px 24px 6px 3px;
}
#company-switch option {
  background:var(--surface-raised);
  color:var(--ink);
}
.current-company>.icon {
  width:16px;
  height:16px;
  color:var(--muted);
}
.header-meta {
  display:flex;
  align-items:center;
  gap:12px;
}
.header-meta .system-status {
  padding:0;
  font-size:var(--text-xs);
  color:var(--muted);
  gap:5px;
}
.header-meta .system-status i {
  background:var(--chart-received);
}
.environment {
  font-size:var(--text-xs);
  letter-spacing:.06em;
  background:transparent;
  color:var(--muted);
  border:0;
  padding:0;
}
.help-link {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
}
.menu-toggle {
  display:none;
}
.page-heading {
  align-items:center;
  margin-bottom:25px;
  gap:20px;
}
.page-heading h1 {
  font-size:var(--text-2xl);
  font-weight:650;
  letter-spacing:-.045em;
  line-height:1.15;
  margin-bottom:8px;
}
.page-heading p {
  font-size:var(--text-md);
  color:var(--muted);
  margin-bottom:0;
}
.page-actions {
  align-items:center;
  gap:8px;
}
h2 {
  font-size:var(--text-xl);
  font-weight:600;
  letter-spacing:-.035em;
}
h3 {
  font-size:var(--text-lg);
  font-weight:600;
}
.card {
  border:1px solid color-mix(in srgb,var(--line) 62%,transparent);
  border-radius:var(--radius-card);
  background:var(--surface);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card.pad,.pad {
  padding:25px;
}
.card-head {
  padding:24px 24px 18px;
  gap:18px;
  align-items:center;
}
.card-head h2 {
  margin:0;
}
.card-head p {
  font-size:var(--text-sm);
  color:var(--muted);
  margin:7px 0 0;
}
.card.pad .card-head {
  padding:0 0 20px;
}
.btn,.icon-button,input,select,textarea,.picker-trigger {
  transition:background-color .15s,border-color .15s;
}
.btn {
  min-height:42px;
  border-radius:var(--radius-control);
  padding:10px 17px;
  font-size:var(--text-sm);
  font-weight:550;
  line-height:1.4;
  border-color:var(--line);
  box-shadow:none;
}
.btn.small {
  min-height:38px;
  padding:8px 13px;
  font-size:var(--text-sm);
}
.btn.primary {
  background:var(--primary-bg);
  border-color:var(--primary-bg);
  color:var(--on-primary);
}
.btn.primary:hover {
  background:var(--primary-hover);
  border-color:var(--primary-hover);
}
[data-theme=dark] .btn.primary {
  color:var(--on-primary);
}
.btn.ghost {
  background:transparent;
}
.btn .icon {
  width:16px;
  height:16px;
}
.icon-button {
  border-radius:50%;
  color:var(--muted);
}
input,select,.picker-trigger {
  min-height:44px;
  border-radius:var(--radius-sm);
  background:var(--surface-subtle);
  color:var(--ink);
  border:1px solid var(--line);
}
textarea {
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
  min-height:100px;
}
label {
  font-size:var(--text-sm);
  font-weight:550;
}
.form-group {
  margin-bottom:18px;
}
.form-section {
  border-color:var(--line);
}
.form-step {
  border-radius:50%;
}
.form-grid {
  gap:18px;
}
.form-actions {
  gap:10px;
}
.line-editor td input,.line-editor td select {
  border-radius:var(--radius-sm);
}
.filters {
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:22px 24px;
  border-bottom:0;
  flex-wrap:wrap;
  position:relative;
}
.filters>.form-group,.filters .form-group {
  flex:1 1 135px;
  min-width:125px;
  max-width:220px;
  margin:0;
}
.filters>input:not([type=hidden]) {
  flex:2 1 200px;
  min-width:160px;
  padding-left:40px;
}
.filters>span:has(.icon) {
  position:absolute;
  left:38px;
  bottom:33px;
  margin:0;
  pointer-events:none;
  color:var(--muted);
}
.filters>select {
  flex:1 1 145px;
  min-width:125px;
}
.filters input,.filters select,.filters .picker-trigger {
  height:42px;
  min-height:42px;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border-color:var(--line);
  font-size:var(--text-sm);
}
.filters label {
  font-size:var(--text-xs);
  color:var(--muted);
  padding-left:5px;
  margin-bottom:6px;
}
.filters:has(#filter-query)>.form-group>label {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.picker-popup {
  border-radius:var(--radius-md);
  background:var(--surface-raised);
  box-shadow:0 16px 45px var(--shadow-raised-color);
  border-color:var(--line);
  z-index:70;
}
.picker-popup input {
  background:var(--surface);
  border-radius:var(--radius-sm);
}
.picker-options button {
  border-radius:var(--radius-sm);
}
.picker-trigger {
  font-size:var(--text-md);
}
.table-wrap {
  margin:0;
  max-width:100%;
  border:0;
}
.document-list {
  padding:0 24px;
}
.table-wrap table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:650px;
}
.table-wrap th {
  background:var(--surface-subtle);
  color:var(--muted);
  font-size:var(--text-sm);
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
  padding:17px 18px;
  border:0;
}
.table-wrap th:first-child {
  border-radius:var(--radius-md) 0 0 0;
}
.table-wrap th:last-child {
  border-radius:0 var(--radius-md) 0 0;
}
.table-wrap td {
  padding:21px 18px;
  border:0;
  border-bottom:1px solid var(--line);
  font-size:var(--text-md);
  color:var(--ink);
  vertical-align:middle;
}
.table-wrap td strong {
  font-weight:600;
}
.table-wrap tbody tr:last-child td {
  border-bottom:0;
}
.table-wrap tbody tr:hover {
  background:var(--surface-subtle);
}
.table-wrap a:not(.btn) {
  color:var(--ink);
}
.table-sub {
  font-size:var(--text-xs);
  margin-top:4px;
  color:var(--muted);
}
.num {
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.document-number {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.document-number>a {
  font-size:var(--text-md);
}
.document-badges {
  min-width:0;
  gap:6px;
}
.badge,.document-badges .badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-pill);
  padding:6px 11px;
  font-size:var(--text-xs);
  font-weight:550;
  line-height:1.3;
  letter-spacing:0;
  max-width:100%;
  white-space:normal;
  text-align:center;
  border:0;
}
.badge.state-sent,:root[data-theme=dark] .badge.state-sent {
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
  padding:3px 7px;
  font-size:var(--text-xs);
  font-weight:500;
}
.badge {
  background:var(--state-draft-bg);
  color:var(--state-draft-text);
}
.badge.green {
  background:var(--state-paid-bg);
  color:var(--state-paid-text);
}
.badge.amber {
  background:var(--state-open-bg);
  color:var(--state-open-text);
}
.badge.red {
  background:var(--state-overdue-bg);
  color:var(--state-overdue-text);
}
.badge.credit-status {
  background:var(--state-advance-bg);
  color:var(--state-advance-text);
}
/* One reading for an amount; no !important, the token decides. */
.amount-paid {
  color:var(--money-paid);
}
.amount-overdue {
  color:var(--money-overdue);
}
.table-footer {
  padding:20px 24px;
  border-top:1px solid var(--line);
  font-size:var(--text-sm);
}
.table-footer .btn {
  min-width:42px;
  border-radius:var(--radius-pill);
}
.card>.card-head:last-child {
  border-top:1px solid var(--line);
  font-size:var(--text-md);
}
.stats {
  gap:18px;
  margin-bottom:28px;
}
.stats .stat {
  position:relative;
  padding:24px;
  border:0;
  box-shadow:none;
  background:transparent;
  min-height:135px;
}
.stats .stat:before {
  content:'';
  position:absolute;
  left:0;
  top:25px;
  bottom:25px;
  border-left:1px solid var(--line);
}
.stats .stat:first-child:before {
  display:none;
}
.stat-top {
  margin:0 0 10px;
}
.stat-top span {
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--muted);
}
.stats .stat-number {
  font-size:var(--text-2xl);
  font-weight:550;
  letter-spacing:-.045em;
  margin:0;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.stat-bottom {
  font-size:var(--text-xs);
  margin-top:10px;
  line-height:1.5;
  color:var(--muted);
}
.stat-issued .stat-top span {
  letter-spacing:0;
  text-transform:none;
}
.stat-issued .stat-number {
  color:var(--ink);
}
.v2-overview {
  grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);
  gap:22px;
}
.card.v2-chart-card {
  padding:var(--space-6);
}
.v2-chart {
  height:256px;
  gap:13px;
  padding-top:12px;
}
.v2-bars {
  height:208px;
  gap:5px;
  border-color:var(--line);
  background:repeating-linear-gradient(to top,transparent 0,transparent 51px,var(--line) 52px,transparent 53px);
}
.v2-bars span {
  width:20px;
  max-width:40%;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  min-height:2px;
}
.v2-issued {
  background:repeating-linear-gradient(135deg,transparent 0 5px,var(--chart-hatch) 5px 10px),var(--chart-issued);
}
.v2-received {
  background:var(--chart-received);
}
.v2-month-label {
  padding-top:10px;
  font-size:var(--text-xs);
  color:var(--muted);
}
.chart-legend {
  font-size:var(--text-xs);
  gap:16px;
}
.chart-legend span:first-child:before {
  background:var(--chart-issued);
}
.chart-legend span:last-child:before {
  background:var(--chart-received);
}
.chart-data {
  margin-top:17px;
  font-size:var(--text-xs);
  color:var(--muted);
}
.card.attention-card {
  padding:var(--space-6);
}
.attention-card h2 {
  font-size:var(--text-xl);
  margin-bottom:14px;
}
.attention-row {
  gap:12px;
  padding:23px 0;
  border-bottom:1px solid var(--line);
}
.attention-row:last-child {
  border-bottom:0;
}
.attention-icon {
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--surface-subtle);
  color:var(--muted);
}
.attention-row.urgent .attention-icon {
  background:var(--error-bg);
  color:var(--error-text);
}
.attention-row.pending .attention-icon {
  background:var(--warning-bg);
  color:var(--warning-text);
}
.attention-copy strong {
  font-size:var(--text-md);
  font-weight:550;
}
.attention-copy small {
  font-size:var(--text-xs);
}
.attention-row>b {
  font-size:var(--text-2xl);
  font-weight:550;
}
.attention-row>.icon {
  border:1px solid var(--line);
  border-radius:50%;
  width:30px;
  height:30px;
  padding:6px;
}
.cards-grid:has(.customer-card) {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.customer-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:25px;
  gap:0;
  min-width:0;
}
.customer-card .company-avatar {
  border-radius:50%;
  width:48px;
  height:48px;
  margin:0 0 22px;
  font-size:var(--text-lg);
  background:var(--accent-soft);
  color:var(--accent-text);
}
.customer-card h3 {
  font-size:var(--text-lg);
  margin:0 0 9px;
  align-self:auto;
  overflow-wrap:anywhere;
}
.customer-card h3 a {
  color:var(--ink);
}
.customer-card p {
  font-size:var(--text-sm);
  line-height:1.8;
  margin:0 0 18px;
  color:var(--muted);
}
.customer-card footer {
  width:100%;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:var(--text-xs);
}
.customer-card footer .btn {
  min-height:40px;
  padding:8px 12px;
}
.detail-layout {
  grid-template-columns:minmax(0,1fr) 310px;
  gap:24px;
}
.document-preview {
  padding:30px;
}
.document-head {
  gap:20px;
  align-items:flex-start;
}
.document-brand {
  width:150px;
  background:var(--logo-plate);
  border-radius:var(--radius-md);
  padding:8px 12px;
}
.document-brand img {
  max-width:100%;
  width:125px;
}
.document-title {
  text-align:right;
}
.document-title .document-number {
  justify-content:flex-end;
  margin-bottom:12px;
}
.document-title h2 {
  font-size:var(--text-xl);
  margin:0;
}
.document-title>.badge {
  font-size:var(--text-sm);
}
.eyebrow {
  color:var(--muted);
  letter-spacing:.09em;
  font-size:var(--text-xs);
}
.parties {
  border:0;
  gap:24px;
  padding:25px 0;
}
.parties h3 {
  font-size:var(--text-xs);
  letter-spacing:.08em;
}
.dates-row {
  border:0;
  border-radius:var(--radius-md);
  padding:16px;
  margin:8px 0 22px;
  gap:15px;
}
.dates-row span {
  font-size:var(--text-xs);
}
.dates-row strong {
  font-size:var(--text-sm);
}
.document-preview .table-wrap th,.document-preview .table-wrap td {
  padding:16px 12px;
}
.document-totals {
  margin-top:25px;
}
.document-totals .total {
  border-radius:var(--radius-sm);
  background:var(--surface-raised);
  color:var(--ink);
}
.side-stack {
  gap:18px;
}
.side-stack .card.pad {
  padding:22px;
}
.side-stack .card h3 {
  margin-bottom:16px;
}
.status-list>div,.summary-list>div {
  padding:12px 0;
  border-color:var(--line);
  gap:12px;
  font-size:var(--text-sm);
}
.detail-meta {
  font-size:var(--text-xs);
  line-height:1.6;
}
.timeline-item:before {
  background:var(--chart-received);
}
.quote-next-actions .btn {
  min-height:44px;
}
.alert {
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  padding:15px 18px;
  border:0;
  line-height:1.6;
}
.settings-sections,.settings-grid {
  gap:22px;
}
.settings-sections .card-head {
  border:0;
}
.segmented {
  border-radius:var(--radius-pill);
  padding:5px;
  background:var(--surface-raised);
}
.segmented a {
  border-radius:var(--radius-pill);
  font-size:var(--text-sm);
}
.segmented a[aria-current] {
  background:var(--surface);
  box-shadow:none;
}
.report-bar-track>span {
  background:var(--chart-received);
}
.report-total>strong {
  font-weight:550;
}
.report-note {
  font-size:var(--text-xs);
}
.report-table table {
  min-width:0;
}
.report-donut {
  filter:saturate(.65);
}
dialog {
  padding:0;
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 24px 80px var(--shadow-overlay-color);
  max-height:calc(100dvh - 40px);
  max-width:min(760px,calc(100vw - 32px));
}
dialog::backdrop {
  background:var(--overlay);
  backdrop-filter:blur(3px);
}
.modal-heading {
  background:var(--surface-raised);
  padding:22px 24px;
  border-color:var(--line);
}
#modal-body {
  padding:24px;
}
.modal-heading h2 {
  font-size:var(--text-xl);
}
.modal-heading button {
  min-width:44px;
  min-height:44px;
}
.toast {
  border-radius:var(--radius-md);
  background:var(--surface-raised);
  color:var(--ink);
  border-color:var(--line);
}
.create-dock {
  position:fixed;
  right:max(32px,env(safe-area-inset-right));
  bottom:max(24px,env(safe-area-inset-bottom));
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}
.create-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:56px;
  padding:15px 22px;
  border:1px solid color-mix(in srgb,var(--accent) 70%,var(--line));
  border-radius:var(--radius-pill);
  background:var(--primary-bg);
  color:var(--on-primary);
  font-weight:600;
  box-shadow:0 6px 24px var(--shadow-raised-color);
}
.create-toggle .icon {
  width:22px;
  height:22px;
}
[data-theme=dark] .create-toggle {
  color:var(--on-primary);
}
.create-menu {
  width:240px;
  padding:9px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 16px 48px var(--shadow-raised-color);
}
.create-menu>a,.create-menu>button {
  display:flex;
  align-items:center;
  gap:14px;
  min-height:52px;
  border:0;
  border-radius:var(--radius-sm);
  padding:13px 14px;
  background:transparent;
  color:var(--ink);
  width:100%;
  font-size:var(--text-base);
  text-align:left;
}
.create-menu>a:hover,.create-menu>button:hover {
  background:var(--surface);
}
.create-menu>a>span:nth-child(2),.create-menu>button>span:nth-child(2) {
  flex:1;
}
.expanded .create-toggle .icon {
  transform:rotate(45deg);
}
:where(button,a,input,select,textarea):focus-visible {
  outline:2px solid var(--focus);
  outline-offset:3px;
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}
.skip-link {
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--ink);
  z-index:150;
}
@media(min-width:1600px) {
  .masthead {
    gap:30px;
  }
  .topbar #global-search {
    width:245px;
  }
  #navigation a {
    padding:13px 22px;
    font-size:var(--text-base);
  }
  .stats .stat {
    padding:28px;
  }
}
@media(max-width:1250px) {
  .masthead {
    gap:12px;
  }
  #navigation a {
    padding:10px 12px;
  }
  .topbar #global-search {
    width:170px;
  }
  .profile .avatar {
    display:none;
  }
  .header-meta .system-status>span {
    display:none;
  }
  .detail-layout {
    grid-template-columns:minmax(0,1fr) 285px;
  }
}
@media(max-width:1100px) {
  .product-app {
    padding:12px;
  }
  .app-frame {
    border-radius:var(--radius-lg);
    min-height:calc(100dvh - 24px);
  }
  .topbar {
    padding:18px 22px 0;
  }
  .masthead {
    gap:16px;
  }
  .header-tools {
    margin-left:auto;
  }
  .topbar #global-search {
    width:245px;
  }
  .menu-toggle {
    display:flex;
    min-height:44px;
    gap:7px;
    padding:10px 14px;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:var(--radius-pill);
    font-size:var(--text-sm);
  }
  .header-context {
    padding-top:17px;
    gap:12px;
  }
  .header-meta .environment,.header-meta .system-status {
    display:none;
  }
  .header-context .current-company {
    max-width:360px;
  }
  .navigation-panel {
    display:none;
    position:fixed;
    inset:16px 16px auto auto;
    width:min(420px,calc(100vw - 32px));
    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:20px;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    background:var(--surface-raised);
    color:var(--ink);
    z-index:110;
    box-shadow:0 20px 80px var(--shadow-overlay-color);
  }
  .navigation-panel.open {
    display:flex;
    flex-direction:column;
  }
  .sidebar-controls {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:20px;
  }
  .sidebar-controls>strong {
    font-size:var(--text-lg);
  }
  .menu-close {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:44px;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:var(--radius-pill);
    color:var(--ink);
    font-size:var(--text-sm);
  }
  .menu-close>span {
    font-size:21px;
  }
  #navigation {
    flex:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    align-items:stretch;
  }
  #navigation a {
    min-height:58px;
    white-space:normal;
    font-size:var(--text-base);
    padding:14px;
    border:1px solid var(--line);
    border-radius:var(--radius-pill);
    gap:10px;
  }
  #navigation a>span {
    display:block;
  }
  #navigation a.active {
    border-color:transparent;
  }
  .navigation-panel .profile {
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid var(--line);
    width:100%;
    order:0;
    gap:12px;
  }
  .navigation-panel .profile>div {
    display:block;
    flex:1;
    min-width:0;
    overflow-wrap:anywhere;
  }
  .navigation-panel .profile>div span {
    display:block;
    font-size:var(--text-xs);
    color:var(--muted);
  }
  .navigation-panel .profile .avatar {
    display:flex;
  }
  .menu-backdrop {
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    border:0;
    background:var(--overlay);
    backdrop-filter:blur(3px);
    z-index:100;
  }
  .menu-overlay-open {
    overflow:hidden;
  }
  .app-area main {
    padding:24px 22px 35px;
  }
  .v2-overview {
    grid-template-columns:minmax(0,1.4fr) minmax(270px,1fr);
    gap:18px;
  }
  .stats {
    gap:8px;
  }
  .stats .stat {
    padding:16px;
    min-height:120px;
  }
  .stats .stat-number {
    font-size:var(--text-2xl);
  }
  .v2-chart {
    gap:5px;
  }
  .card.v2-chart-card,.card.attention-card {
    padding:var(--space-5);
  }
  .v2-chart-card .card-head h2,.attention-card h2 {
    font-size:var(--text-xl);
  }
  .chart-legend {
    gap:10px;
  }
  .cards-grid:has(.customer-card) {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .detail-layout {
    grid-template-columns:minmax(0,1fr);
  }
  .side-stack {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
  .side-stack .quote-next-actions {
    grid-column:1/-1;
  }
  .document-title {
    max-width:65%;
  }
}
@media(max-width:760px) {
  .header-context .breadcrumb {
    display:none;
  }
  .header-context .current-company {
    margin-left:0;
    max-width:calc(100% - 42px);
    flex:1;
  }
  .header-meta {
    margin-left:auto;
  }
  .topbar #global-search {
    width:180px;
  }
  .v2-overview {
    grid-template-columns:1fr;
  }
  .stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .stats .stat {
    background:var(--surface);
    border-radius:var(--radius-lg);
    padding:20px;
    min-height:130px;
  }
  .stats .stat:before {
    display:none;
  }
  .stats .stat-number {
    font-size:var(--text-2xl);
  }
  .page-heading h1 {
    font-size:var(--text-2xl);
  }
  .page-heading {
    align-items:flex-start;
  }
  .page-heading .page-actions {
    flex-wrap:wrap;
  }
  .side-stack {
    display:flex;
    flex-direction:column;
  }
  .side-stack>.card {
    width:100%;
  }
  .report-filters .form-group {
    max-width:none;
  }
  .table-wrap {
    overflow-x:auto;
  }
  .document-preview {
    padding:24px;
  }
  .app-footer {
    padding:20px 22px 105px;
  }
  .report-summary,.report-clients {
    gap:18px;
  }
}
@media(max-width:640px) {
  .product-app {
    padding:0;
  }
  .app-frame {
    border:0;
    border-radius:0;
    min-height:100dvh;
    background:var(--bg);
  }
  .topbar {
    padding:16px 16px 0;
    background:var(--bg);
  }
  .masthead {
    gap:10px;
    flex-wrap:wrap;
  }
  .brand img {
    width:37px;
    height:37px;
  }
  .brand>span {
    font-size:var(--text-xl);
  }
  .brand small {
    font-size:var(--text-xs);
  }
  .header-tools {
    gap:8px;
  }
  .topbar #global-search {
    display:none;
  }
  .theme-toggle {
    width:42px;
    min-width:42px;
  }
  .header-context {
    padding:15px 0 12px;
  }
  .header-context .current-company {
    max-width:calc(100% - 38px);
    font-size:var(--text-sm);
    background:var(--surface);
  }
  .current-company #company-switch {
    height:42px;
  }
  .header-meta .help-link {
    width:28px;
  }
  .app-area main {
    padding:20px 16px 28px;
  }
  .page-heading {
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:23px;
  }
  .page-heading>div {
    width:100%;
  }
  .page-heading h1 {
    font-size:var(--text-2xl);
    max-width:330px;
    line-height:1.2;
  }
  .page-heading p {
    font-size:var(--text-sm);
    line-height:1.65;
  }
  .page-heading .page-actions {
    justify-content:flex-start;
    gap:8px;
  }
  .page-heading .page-actions .period-control {
    width:auto;
  }
  .period-control select {
    min-width:170px;
    border-radius:var(--radius-lg);
  }
  .period-control label {
    font-size:var(--text-xs);
  }
  .stats {
    gap:12px;
    margin-bottom:22px;
  }
  .stats .stat {
    padding:18px 16px;
    min-height:132px;
  }
  .stats .stat-number {
    font-size:var(--text-2xl);
    overflow-wrap:anywhere;
  }
  .stat-top span {
    font-size:var(--text-xs);
  }
  .stat-bottom {
    font-size:var(--text-xs);
  }
  .card {
    border-radius:var(--radius-lg);
  }
  .card-head {
    padding:20px;
    gap:12px;
    flex-wrap:wrap;
  }
  .card-head h2 {
    font-size:var(--text-xl);
  }
  .card.pad,.pad {
    padding:20px;
  }
  .card.v2-chart-card {
    padding:var(--space-5);
  }
  .v2-chart {
    height:248px;
    gap:4px;
  }
  .v2-bars {
    height:194px;
    gap:3px;
  }
  .v2-bars span {
    width:10px;
  }
  .v2-month {
    min-width:17px;
  }
  .v2-month-label {
    font-size:var(--text-xs);
    line-height:15px;
    padding-top:10px;
  }
  .v2-chart-card .card-head {
    gap:10px;
  }
  .card.attention-card {
    padding:var(--space-5);
  }
  .attention-row {
    padding:22px 0;
  }
  .attention-copy strong {
    font-size:var(--text-sm);
  }
  .attention-copy small {
    font-size:var(--text-xs);
  }
  .attention-row>b {
    font-size:var(--text-xl);
  }
  .attention-icon {
    width:34px;
    height:38px;
  }
  .attention-row>.icon {
    width:26px;
    height:26px;
  }
  .filters {
    padding:20px;
    gap:10px;
  }
  .filters>.form-group,.filters .form-group {
    min-width:calc(50% - 5px);
    flex:1 1 calc(50% - 5px);
    max-width:none;
  }
  .filters>input:not([type=hidden]) {
    flex-basis:100%;
    width:100%;
    min-width:0;
    order:-2;
    padding-left:38px;
  }
  .filters>span:has(.icon) {
    display:block;
    left:33px;
    top:32px;
    bottom:auto;
    width:18px;
    height:18px;
    z-index:1;
  }
  .filters>select {
    flex:1 1 calc(50% - 5px);
    width:calc(50% - 5px);
    min-width:0;
  }
  .filters input,.filters select,.filters .picker-trigger {
    font-size:var(--text-sm);
  }
  .report-filters {
    padding:0 0 18px;
  }
  .document-list {
    padding:0;
  }
  .document-table,.table-wrap .payment-table {
    min-width:0;
    width:100%;
  }
  .document-table thead,.payment-table thead {
    display:none;
  }
  .document-table tbody,.payment-table tbody {
    display:block;
  }
  .document-table tr,.payment-table tr {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:11px;
    padding:21px 20px;
    border-bottom:1px solid var(--line);
    min-width:0;
  }
  .document-table td,.payment-table td {
    display:block;
    border:0;
    padding:0!important;
    min-width:0;
    font-size:var(--text-sm);
  }
  .document-table td:first-child,.document-table td:nth-child(2),.document-table td:nth-child(5),.payment-table td:first-child,.payment-table td:nth-child(5),.payment-table td:last-child {
    grid-column:1/-1;
  }
  .document-table td:last-child {
    grid-column:2;
    grid-row:4;
  }
  .document-table td:nth-child(5) {
    grid-row:4;
    grid-column:1;
  }
  .document-table td[data-label]:before,.payment-table td[data-label]:before {
    content:attr(data-label);
    display:block;
    font-size:var(--text-xs);
    color:var(--muted);
    margin-bottom:4px;
  }
  .document-table td:first-child strong {
    font-size:var(--text-md);
  }
  .document-table .table-sub {
    display:block;
    margin:6px 0 0;
    font-size:var(--text-xs);
  }
  .document-number {
    gap:7px;
  }
  .badge.state-sent {
    font-size:var(--text-xs);
  }
  .document-table .document-badges .badge {
    font-size:var(--text-xs);
    min-height:31px;
    padding:7px 12px;
  }
  .payment-table .num {
    text-align:left;
  }
  .payment-table td:last-child {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .payment-table td:nth-child(4) {
    grid-column:2;
    grid-row:3;
  }
  .table-footer {
    padding:18px 20px;
    gap:12px;
  }
  .cards-grid:has(.customer-card) {
    grid-template-columns:1fr;
    gap:16px;
  }
  .customer-card {
    padding:24px;
  }
  .customer-card .company-avatar {
    margin-bottom:18px;
  }
  .customer-card h3 {
    font-size:var(--text-xl);
  }
  .customer-card footer {
    font-size:var(--text-sm);
  }
  .customer-card footer .btn {
    min-height:44px;
  }
  .document-head {
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .document-preview {
    padding:22px 20px;
  }
  .document-brand {
    width:138px;
  }
  .document-title {
    max-width:100%;
    margin:0;
    text-align:left;
    width:100%;
  }
  .document-title .document-number {
    justify-content:flex-start;
  }
  .document-title h2 {
    font-size:var(--text-xl);
    overflow-wrap:anywhere;
  }
  .parties {
    grid-template-columns:1fr;
    gap:22px;
    padding-top:27px;
  }
  .parties p {
    font-size:var(--text-sm);
  }
  .dates-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px;
  }
  .document-preview .table-wrap table {
    min-width:520px;
  }
  .document-totals {
    width:100%;
    min-width:0;
  }
  .document-totals .total {
    font-size:var(--text-xl);
  }
  .form-grid,.form-grid.three {
    gap:12px;
  }
  .form-grid .form-group {
    margin-bottom:8px;
  }
  #modal-body {
    padding:20px;
  }
  .modal-heading {
    padding:18px 20px;
  }
  dialog {
    max-height:calc(100dvh - 24px);
    max-width:calc(100vw - 20px);
    border-radius:var(--radius-lg);
  }
  .create-dock {
    right:18px;
    bottom:max(18px,env(safe-area-inset-bottom));
  }
  .create-toggle {
    min-height:54px;
    padding:14px 20px;
    gap:18px;
    font-size:var(--text-md);
  }
  .create-menu {
    width:230px;
  }
  .create-menu>a,.create-menu>button {
    min-height:54px;
  }
  .app-footer {
    padding:20px 16px 108px;
    font-size:var(--text-xs);
  }
  .settings-sections .card-head {
    padding-bottom:16px;
  }
  .settings-sections [data-settings-section=people]>.card-head {
    padding:20px;
  }
}
.topbar {
  z-index:auto;
}
.badge:before {
  display:none;
}
.login-body {
  background:var(--bg);
}
.login-story {
  background:var(--surface-subtle);
  color:var(--ink);
  border-right:1px solid var(--line);
}
.login-story h1 {
  color:var(--ink);
}
.login-story p,.login-story small,.login-points {
  color:var(--muted);
}
.login-brand {
  display:inline-flex;
  background:var(--logo-plate);
  border-radius:var(--radius-lg);
  padding:12px 18px;
  align-self:flex-start;
}
.login-brand img {
  max-width:190px;
}
.login-story .light {
  color:var(--accent);
}
.login-card {
  background:var(--surface);
  padding:30px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.login-theme {
  background:var(--surface);
  border-radius:var(--radius-pill);
}
.login-form-wrap {
  padding-bottom:40px;
}
@media(max-width:640px) {
  .table-wrap .document-table {
    min-width:0;
  }
  .document-list {
    padding:0;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}
/* Logo firmy v nastavení;
na dokladech se tiskne v hlavičce. */
.company-logo-preview {
  max-width:260px;
  max-height:110px;
  object-fit:contain;
  background:var(--logo-plate);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px;
}

/* ------------------------------------------------------------------
   Install dialog and safe areas (was pwa/pwa.css).
   ------------------------------------------------------------------ */

/* Installation UI shares FRAMA's theme tokens; no business content is stored offline. */
.pwa-install-strip{margin-top:25px;display:flex;justify-content:center;width:100%;max-width:355px}
.pwa-install-strip[hidden],#pwa-install[hidden]{display:none}
#pwa-open{display:grid;place-items:center;width:56px;height:52px;background:var(--surface-raised);color:var(--teal);border:1px solid var(--line);border-radius:var(--radius-sm);transition:background .15s}
#pwa-open:hover{background:var(--info-bg,var(--surface-subtle))}
#pwa-open svg{width:27px;height:27px}
#pwa-dialog{max-width:520px;max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-color:var(--line);background:var(--surface)}
#pwa-dialog .modal-heading{padding:23px 25px;gap:14px}
#pwa-dialog .eyebrow{margin:0 0 5px}
#pwa-close{width:44px;min-width:44px;height:44px}
.pwa-dialog-body{padding:24px}
#pwa-description{color:var(--muted);font-size:var(--text-md);margin-bottom:23px}
.pwa-platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.pwa-platforms button{display:flex;align-items:center;flex-direction:column;gap:10px;padding:17px 4px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--muted);background:var(--surface);min-height:94px;font-size:var(--text-xs)}
.pwa-platforms button[aria-pressed=true]{color:var(--ink);border-color:var(--teal);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--teal)}
.pwa-platforms svg{width:27px;height:27px}
.pwa-guide{margin-top:27px}
.pwa-guide h3{font-size:var(--text-lg);margin-bottom:17px}
#pwa-steps{list-style:none;padding:0;margin:0;display:grid;gap:17px;counter-reset:step}
#pwa-steps li{display:flex;gap:13px;align-items:center;font-size:var(--text-md)}
.pwa-step-icon{width:35px;min-width:35px;height:35px;border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--teal);display:grid;place-items:center}
.pwa-step-icon svg{width:21px;height:21px}
.pwa-hint{font-size:var(--text-xs);line-height:1.7;color:var(--muted);margin:20px 0 0}
.pwa-hint:empty,.pwa-status:empty{display:none}
#pwa-install{margin-top:22px;min-height:46px;width:100%;justify-content:center;font-size:var(--text-md)}
.pwa-status{font-size:var(--text-sm);color:var(--muted);margin:15px 0 0}
.login-layout,.login-story{min-height:100dvh}
.login-form-wrap{padding-top:calc(90px + env(safe-area-inset-top));padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.login-theme{z-index:2;top:calc(24px + env(safe-area-inset-top));right:calc(28px + env(safe-area-inset-right))}
.sidebar{padding-top:calc(23px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom));padding-left:calc(15px + env(safe-area-inset-left))}
.topbar{padding-top:calc(12px + env(safe-area-inset-top));padding-right:calc(37px + env(safe-area-inset-right))}
.app-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
dialog{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@media(max-width:940px){.app-area{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.login-form-wrap{padding-left:calc(30px + env(safe-area-inset-left));padding-right:calc(30px + env(safe-area-inset-right))}}
@media(max-width:640px){.login-story{min-height:0}.login-theme{top:calc(18px + env(safe-area-inset-top));right:calc(20px + env(safe-area-inset-right))}.topbar{padding-top:calc(10px + env(safe-area-inset-top));padding-right:18px}.login-form-wrap input{font-size:16px}#pwa-dialog .modal-heading{padding:18px}.pwa-dialog-body{padding:20px}.pwa-platforms{gap:6px}.pwa-platforms button{font-size:var(--text-xs)}.pwa-install-strip{margin-top:20px}}
@media(display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){.pwa-install-strip{display:none}}
/* Installed application (pwa/pwa.js): the install entry, the install sheet, the one-time suggestion on a
   phone, the update toast and the connection pill. Tokens only; every piece is injected by script. */
/* Header and menu rules style these as buttons; the hidden attribute must still win. */
.pwa-entry[hidden],.pwa-menu-entry[hidden],.pwa-sheet-guide[hidden],.pwa-sheet-install[hidden],.pwa-net[hidden]{display:none!important}
.pwa-entry svg{width:20px;height:20px}
.pwa-menu-entry{display:flex;align-items:center;gap:12px;width:100%;margin:8px 0;padding:12px 14px;border:1px solid var(--edge-settled);border-radius:var(--radius-md);background:color-mix(in srgb,var(--champagne) 10%,var(--surface));color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.pwa-menu-entry:hover{border-color:var(--edge-attention)}
.pwa-menu-entry-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:var(--radius-sm);background:var(--graphite);color:var(--champagne)}
.pwa-menu-entry svg{width:20px;height:20px}
.pwa-menu-entry strong{display:block;font-size:var(--text-md)}
.pwa-menu-entry small{display:block;color:var(--muted);font-size:var(--text-sm)}
@media(min-width:1101px){.pwa-menu-entry{display:none}}
@media(max-width:1100px){body:not(.company-gateway) .pwa-entry{display:none}}
.pwa-sheet{width:min(480px,calc(100vw - 32px));max-width:100%;padding:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:0 24px 64px var(--shadow-overlay-color)}
.pwa-sheet::backdrop{background:var(--overlay)}
.pwa-sheet[open]{animation:pwa-rise var(--motion-panel) var(--ease-out)}
.pwa-sheet-grip{display:none}
.pwa-sheet-head{display:flex;align-items:center;gap:14px;padding:22px 22px 0}
.pwa-sheet-head .eyebrow{margin:0}
.pwa-sheet-head h2{margin:2px 0 0;font-size:var(--text-xl);line-height:1.2}
.pwa-sheet-mark{width:56px;height:56px;flex:none;border-radius:14px;box-shadow:0 8px 20px var(--shadow-raised-color)}
.pwa-sheet-close{margin-left:auto;align-self:flex-start;width:44px;min-width:44px;height:44px}
.pwa-sheet-close svg{width:18px;height:18px}
.pwa-sheet-lead{margin:14px 22px 0;color:var(--muted);font-size:var(--text-md)}
.pwa-benefits{list-style:none;margin:18px 22px 0;padding:0;display:grid;gap:12px}
.pwa-benefits li{display:flex;align-items:flex-start;gap:12px}
.pwa-benefits strong{display:block;font-size:var(--text-md)}
.pwa-benefits small{display:block;color:var(--muted);font-size:var(--text-sm)}
.pwa-benefit-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:var(--radius-sm);background:var(--selected-bg);color:var(--copper)}
.pwa-benefit-icon svg{width:19px;height:19px}
.pwa-sheet-guide{margin:20px 22px 0;padding:16px;border:1px solid var(--card-line);border-radius:var(--radius-md);background:var(--surface-subtle)}
.pwa-sheet-guide h3{margin:0 0 12px;font-size:var(--text-lg)}
.pwa-sheet-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pwa-sheet-steps li{display:flex;align-items:center;gap:12px;font-size:var(--text-md)}
.pwa-sheet-actions{display:flex;justify-content:flex-end;gap:10px;padding:20px 22px 22px}
.pwa-sheet-install svg{width:18px;height:18px}
.pwa-sheet-status{margin:-8px 22px 18px;color:var(--muted);font-size:var(--text-sm)}
.pwa-sheet-status:empty{display:none}
.pwa-update{position:fixed;z-index:300;left:max(24px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;max-width:min(480px,calc(100vw - 32px));padding:10px 8px 10px 12px;border:1px solid var(--edge-settled);border-radius:var(--radius-lg);background:var(--graphite);color:var(--on-graphite);box-shadow:0 18px 48px var(--shadow-overlay-color);animation:pwa-rise var(--motion-panel) var(--ease-out)}
.pwa-update img{flex:none;border-radius:8px}
.pwa-update-text{display:grid;min-width:0}
.pwa-update-text strong{font-size:var(--text-md)}
.pwa-update-text small{color:var(--on-graphite-muted);font-size:var(--text-sm)}
.pwa-update-apply{flex:none;gap:6px}
.pwa-update-apply svg,.pwa-update-close svg{width:16px;height:16px}
.pwa-update-close{flex:none;width:40px;min-width:40px;height:40px;border-color:transparent;background:transparent;color:var(--on-graphite-muted)}
.pwa-update-close:hover{color:var(--on-graphite);background:color-mix(in srgb,var(--on-graphite) 10%,transparent)}
.pwa-promo{position:fixed;z-index:250;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom) + var(--mobile-bar-height,0px));display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 12px;padding:14px;border:1px solid var(--edge-settled);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:0 18px 48px var(--shadow-overlay-color);animation:pwa-rise var(--motion-panel) var(--ease-out)}
.pwa-promo img{border-radius:11px}
.pwa-promo-text strong{display:block;font-size:var(--text-md)}
.pwa-promo-text span{display:block;color:var(--muted);font-size:var(--text-sm)}
.pwa-promo-actions{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:8px}
.pwa-update.is-leaving,.pwa-promo.is-leaving{opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.pwa-net{position:fixed;z-index:290;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 24px);padding:8px 14px;border:1px solid var(--material-line);border-radius:var(--radius-pill);background:var(--graphite);color:var(--on-graphite);box-shadow:0 10px 30px var(--shadow-overlay-color);font-size:var(--text-sm);font-weight:600;pointer-events:none}
.pwa-net-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--champagne);box-shadow:0 0 0 3px color-mix(in srgb,var(--champagne) 25%,transparent)}
.pwa-net.is-online .pwa-net-dot{background:var(--chart-1);box-shadow:0 0 0 3px color-mix(in srgb,var(--chart-1) 25%,transparent)}
.pwa-standalone{-webkit-tap-highlight-color:transparent}
.pwa-standalone body{overscroll-behavior-y:none}
.pwa-standalone :is(.topbar,.navigation-panel,.create-dock,.finance-module-nav,.pwa-update,.pwa-promo,.pwa-net) :is(a,button,nav,strong,small,svg){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@keyframes pwa-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pwa-sheet-up{from{transform:translateY(100%)}to{transform:none}}
@media(max-width:640px){
  .pwa-sheet{width:100%;margin:auto 0 0;border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:calc(100dvh - 24px - env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom)}
  .pwa-sheet[open]{animation-name:pwa-sheet-up}
  .pwa-sheet-grip{display:block;width:40px;height:5px;margin:10px auto 0;border-radius:var(--radius-pill);background:var(--line)}
  .pwa-sheet-head{padding-top:14px}
  .pwa-sheet-actions{flex-direction:column}
  .pwa-sheet-actions .btn{width:100%;min-height:48px;justify-content:center}
  /* Above a mobile bottom bar, should the layout publish its height as --mobile-bar-height. */
  .pwa-update,.pwa-promo{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom) + var(--mobile-bar-height,0px));max-width:none}
  .pwa-update-text small{display:none}
}
@media(prefers-reduced-motion:reduce){.pwa-sheet[open],.pwa-update,.pwa-promo{animation:none}}

/* ------------------------------------------------------------------
   Compact navigation and safe areas for browser and installed app
   (was product-polish.css). Last layer before layout.css.
   ------------------------------------------------------------------ */

/* Compact navigation and safe areas for browser and installed app. */
:root {
  scroll-padding-top:100px;
}
:root[data-theme=light] {
  color-scheme:light;
}
.app-frame {
  width:100%;
  min-width:0;
}
.app-area,.app-area main {
  min-width:0;
  max-width:100%;
}
.topbar {
  position:sticky;
  top:0;
  z-index:120;
  padding:calc(12px + env(safe-area-inset-top)) 22px 12px;
  background:var(--surface-subtle);
  border-bottom:1px solid var(--line);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:0 4px 12px var(--shadow-raised-color);
}
.masthead {
  gap:12px;
  min-height:44px;
}
.brand {
  background:var(--logo-plate);
  border-radius:var(--radius-sm);
  padding:2px 7px;
}
.brand img {
  width:130px;
  height:44px;
  object-fit:contain;
  max-height:none;
}
#navigation {
  gap:1px;
}
#navigation a {
  padding:10px 10px;
  font-size:var(--text-sm);
}
#current-company {
  display:flex;
  align-items:center;
  gap:8px;
  width:270px;
  min-width:270px;
  max-width:270px;
  flex:0 0 270px;
  height:44px;
  min-height:44px;
  border-radius:var(--radius-pill);
  background:var(--surface);
  border:1px solid var(--line);
  padding:0 12px;
  margin:0;
  box-sizing:border-box;
}
#current-company>.icon,#current-company>span {
  flex:0 0 20px;
  width:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}
#company-switch {
  width:100%;
  min-width:0;
  max-width:100%;
  height:42px;
  min-height:42px;
  border:0;
  background:transparent;
  padding:0 18px 0 0;
  font-size:var(--text-sm);
  font-weight:550;
  color:var(--ink);
  text-overflow:ellipsis;
  cursor:pointer;
  outline:none;
}
.topbar #global-search {
  width:165px;
}
.header-tools {
  gap:8px;
}
.navigation-panel .profile {
  gap:4px;
}
.navigation-panel .profile .avatar {
  display:none;
}
#current-company {
  order:2;
}
.masthead>.header-tools {
  order:3;
}
.navigation-panel .profile {
  order:4;
}
.product-app {
  padding-left:calc(20px + env(safe-area-inset-left));
  padding-right:calc(20px + env(safe-area-inset-right));
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.login-brand {
  background:var(--logo-plate);
  padding:8px 12px;
}
.login-brand img {
  width:210px;
  max-width:100%;
  height:auto;
}
.login-form-wrap {
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
}
.document-brand {
  background:var(--logo-plate);
  padding:5px 8px;
  border-radius:var(--radius-sm);
  object-fit:contain;
}
dialog {
  max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.repeat-origin {
  display:inline-flex;
  align-items:center;
  color:var(--muted);
}
.repeat-origin .icon {
  width:14px;
  height:14px;
}
.theme-save-error {
  position:fixed;
  bottom:max(24px,env(safe-area-inset-bottom));
  left:16px;
  right:16px;
  z-index:200;
  padding:16px;
  background:var(--error-bg);
  color:var(--error-text);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}
@media(max-width:1320px) {
  :root {
    scroll-padding-top:130px;
  }
  .masthead {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto;
    align-items:center;
    gap:8px 12px;
  }
  .masthead>.brand {
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  #navigation {
    grid-column:2;
    grid-row:1;
  }
  .masthead>.header-tools {
    grid-column:3;
    grid-row:1;
    margin-left:0;
  }
  .navigation-panel .profile {
    grid-column:4;
    grid-row:1;
  }
  #current-company {
    grid-column:1/-1;
    grid-row:2;
    justify-self:start;
    order:initial;
    width:min(460px,100%);
    min-width:0;
    max-width:460px;
    margin-top:2px;
  }
}
@media(max-width:1100px) {
  .product-app {
    padding-left:calc(12px + env(safe-area-inset-left));
    padding-right:calc(12px + env(safe-area-inset-right));
  }
  .topbar {
    padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  }
  .masthead {
    grid-template-columns:auto minmax(0,1fr) auto;
  }
  .masthead>.header-tools {
    grid-column:3;
  }
  #current-company {
    grid-column:1/-1;
  }
  #company-switch {
    font-size:16px!important;
  }
  .navigation-panel {
    top:calc(12px + env(safe-area-inset-top));
    right:calc(12px + env(safe-area-inset-right));
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .navigation-panel #navigation a {
    font-size:var(--text-base);
    padding:14px;
  }
  input,select,textarea,.picker-search,.picker-trigger,.line-editor input,.line-editor select,.filters input,.filters select,.login-card input,.topbar #global-query {
    font-size:16px!important;
  }
}
@media(max-width:760px) {
  .topbar #global-search {
    display:none;
  }
  .brand img {
    width:110px;
    height:38px;
  }
  .masthead {
    gap:8px;
  }
  #current-company {
    max-width:100%;
  }
}
@media(max-width:640px) {
  .product-app {
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .topbar {
    border-radius:0;
    padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
  }
  .brand {
    padding:2px 4px;
  }
  .brand img {
    width:110px;
    height:38px;
  }
  .header-tools {
    gap:4px;
    margin-left:auto;
  }
  .menu-toggle {
    padding:10px;
    width:44px;
    justify-content:center;
  }
  .menu-toggle>span:last-child {
    display:none;
  }
  .masthead {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:6px;
    width:100%;
  }
  .masthead>.brand {
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  .masthead>.header-tools {
    grid-column:3;
    grid-row:1;
    margin-left:0;
  }
  #current-company {
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    min-width:0;
    max-width:100%;
    margin-top:2px;
    overflow:visible;
  }
  #company-switch {
    padding-left:0;
    padding-right:18px;
    font-size:16px!important;
  }
  .login-form-wrap {
    padding-left:calc(22px + env(safe-area-inset-left));
    padding-right:calc(22px + env(safe-area-inset-right));
  }
}

/* Final material pass follows every responsive navigation rule. */
body.product-app .app-frame {
  border-color:var(--material-line);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--champagne-bright) 22%,transparent),
    0 18px 50px var(--shadow-overlay-color);
}
.product-app .topbar {
  background:linear-gradient(115deg,var(--graphite-deep),var(--graphite) 64%,var(--graphite-soft));
  border-bottom-color:var(--material-line);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--champagne-bright) 18%,transparent),
    0 8px 24px var(--shadow-raised-color);
}
.login-story {
  background:
    radial-gradient(circle at 18% 12%,var(--material-glow),transparent 34%),
    linear-gradient(145deg,var(--graphite-soft),var(--graphite-deep));
  color:var(--on-graphite);
  border-right-color:var(--material-line);
}
.login-story h1 {
  color:var(--on-graphite);
}
.login-story p,.login-story small,.login-points {
  color:var(--on-graphite-muted);
}
.login-story .light {
  color:var(--champagne-bright);
}
.login-brand {
  background:linear-gradient(145deg,var(--champagne-bright),var(--champagne));
  border:1px solid color-mix(in srgb,var(--champagne-bright) 56%,var(--copper));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--white) 68%,transparent),
    inset 0 -1px 0 color-mix(in srgb,var(--copper) 38%,transparent),
    0 8px 24px var(--shadow-raised-color);
}
.login-brand img {
  filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--white) 75%,transparent)) drop-shadow(0 -1px 0 color-mix(in srgb,var(--copper) 38%,transparent));
}
.login-card {
  border-color:color-mix(in srgb,var(--champagne) 30%,var(--line));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--champagne-bright) 12%,transparent),
    0 18px 42px var(--shadow-raised-color);
}

/* ==================================================================
   Light on the material: the money flow, lit card edges, the sheet of
   paper and the sweep across the wordmark.
   Four effects, one rule between them: light is light. Meaning stays
   with the state palette and with the word printed next to it, so
   every number and every state below reads the same with motion off,
   and the global prefers-reduced-motion block above kills the motion.
   ================================================================== */

/* ---- A. Cesta penez: the channel and its five stages ---------------
   The channel is decoration (aria-hidden); the numbers and the Czech
   labels are text in the <ol> under it. With motion off the light
   simply stands still at the start of the channel. */
.flow-card .card-head {
  align-items:flex-start;
}
.flow-track {
  position:relative;
  margin:var(--space-2) 0 var(--space-1);
}
.flow-channel {
  display:block;
  width:100%;
  height:14px;
  overflow:visible;
}
.flow-rail {
  stroke:var(--flow-channel);
  stroke-width:6;
  stroke-linecap:round;
}
.flow-tick {
  stroke:var(--flow-node-line);
  stroke-width:2;
  stroke-linecap:round;
}
/* One short length of champagne light walking the channel over five seconds,
   then four seconds of nothing. A dash pattern is not used for it: with
   non-scaling-stroke the dashes are measured in device pixels, so their number
   would depend on how wide the card happens to be. A translate in user units
   is the same fraction of the channel at every width. */
.flow-run {
  stroke:var(--flow-light);
  stroke-width:4;
  stroke-linecap:round;
  opacity:0;
  animation:frama-flow 9s linear infinite;
}
@keyframes frama-flow {
  0% {transform:translateX(-9px);opacity:0}
  7% {opacity:.85}
  47% {opacity:.85}
  54%,100% {transform:translateX(83px);opacity:0}
}
/* gap:0 on purpose: with a gap the column centres drift from the ticks above
   them by a few pixels, and a tick that misses its label is worse than air. */
.flow-stages {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  list-style:none;
  margin:0;
  padding:0;
}
.flow-step {
  min-width:0;
}
.flow-stage {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-width:0;
  padding:var(--space-3) var(--space-2) var(--space-2);
  border-radius:var(--radius-sm);
  color:var(--ink);
  text-align:center;
  text-decoration:none;
  transition:background-color .15s;
}
a.flow-stage:hover {
  background:var(--surface-subtle);
  color:var(--ink);
}
a.flow-stage:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:2px;
}
.flow-label {
  font-size:var(--text-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.flow-value {
  font-size:var(--text-lg);
  font-weight:650;
  overflow-wrap:anywhere;
}
.flow-note {
  font-size:var(--text-xs);
  line-height:1.5;
  color:var(--muted);
}
@media(max-width:860px) {
  /* Five columns of money do not fit a narrow screen, and a channel drawn
     across them would point at the wrong words. The stages become a list and
     the rail becomes the left edge of it. */
  .flow-channel {
    display:none;
  }
  .flow-stages {
    grid-template-columns:1fr;
    border-left:2px solid var(--flow-channel);
    padding-left:var(--space-3);
  }
  .flow-stage {
    align-items:flex-start;
    text-align:left;
    padding:var(--space-2) var(--space-2) var(--space-2) 0;
  }
}

/* ---- B. Copper-lit card and tile edges -----------------------------
   MARKUP CONTRACT
     .is-attention   something in this surface waits for the owner:
                     overdue, waiting for approval, failed
     .is-settled     what it holds is finished
     (neither)       the --card-line hairline, unchanged
   A tile may say it with a class or leave it to its own .tile-value
   tone, which already carries the same reading. This is a light along
   the border, strongest at the top-left corner as if lit from above:
   it never replaces the badge, and the badge keeps saying the state in
   a word. position:relative is set only on a lit surface, never on
   every .card - absolutely positioned children elsewhere depend on it
   not being there. */
.card.is-attention,
.card.is-settled,
.tile.is-attention,
.tile.is-settled,
.tile:has(.tile-value.tone-overdue),
.tile:has(.tile-value.tone-paid),
.card:has(>.status-list .badge.red),
.card:has(>.status-list .badge.amber) {
  position:relative;
}
.card.is-attention:before,
.card.is-settled:before,
.tile.is-attention:before,
.tile.is-settled:before,
.tile:has(.tile-value.tone-overdue):before,
.tile:has(.tile-value.tone-paid):before,
.card:has(>.status-list .badge.red):before,
.card:has(>.status-list .badge.amber):before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  box-sizing:border-box;
  padding:1px;
  border-radius:inherit;
  pointer-events:none;
  /* The two mask layers leave exactly the 1px ring between them, so the
     gradient paints the border and nothing inside it. */
  -webkit-mask:linear-gradient(var(--white) 0 0) content-box,linear-gradient(var(--white) 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(var(--white) 0 0) content-box,linear-gradient(var(--white) 0 0);
  mask-composite:exclude;
}
.card.is-attention:before,
.tile.is-attention:before,
.tile:has(.tile-value.tone-overdue):before,
.card:has(>.status-list .badge.red):before,
.card:has(>.status-list .badge.amber):before {
  background:linear-gradient(135deg,
    var(--edge-attention) 0%,
    color-mix(in srgb,var(--edge-attention) 34%,transparent) 30%,
    transparent 62%);
}
.card.is-settled:before,
.tile.is-settled:before,
.tile:has(.tile-value.tone-paid):before {
  background:linear-gradient(135deg,
    var(--edge-settled) 0%,
    color-mix(in srgb,var(--edge-settled) 26%,transparent) 28%,
    transparent 58%);
}
/* A surface that waits wins over one that is settled, whichever way each of
   the two readings arrived. */
.tile.is-attention:has(.tile-value.tone-paid):before,
.tile:has(.tile-value.tone-overdue).is-settled:before {
  background:linear-gradient(135deg,
    var(--edge-attention) 0%,
    color-mix(in srgb,var(--edge-attention) 34%,transparent) 30%,
    transparent 62%);
}

/* ---- C. The invoice as a sheet of paper ----------------------------
   A page shadow, a little warmth from the top-left, and a tilt of at
   most 0.7 degrees that only exists while a mouse is over the sheet:
   at rest there is no transform at all, so text is never resampled and
   printing is exactly what it was. The PDF is rendered from
   app/templates/document.html on the server and is untouched. */
.document-preview.is-paper {
  background-image:linear-gradient(152deg,var(--paper-warm),transparent 46%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--champagne-bright) 16%,transparent),
    0 1px 1px var(--paper-shadow),
    0 10px 24px var(--paper-shadow),
    0 26px 56px color-mix(in srgb,var(--paper-shadow) 55%,transparent);
}
.document-preview.is-tilting {
  transform:perspective(1600px)
    rotateX(calc(var(--paper-x,0) * 1deg))
    rotateY(calc(var(--paper-y,0) * 1deg));
  transition:box-shadow 260ms ease;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--champagne-bright) 20%,transparent),
    0 2px 2px var(--paper-shadow),
    0 16px 34px var(--paper-shadow),
    0 34px 70px color-mix(in srgb,var(--paper-shadow) 60%,transparent);
}
@media(prefers-reduced-motion:reduce) {
  .document-preview.is-tilting {
    transform:none;
  }
}
@media print {
  .document-preview.is-paper,
  .document-preview.is-tilting {
    transform:none;
    box-shadow:none;
    background-image:none;
  }
}

/* ---- D. One sweep of light across the wordmark ---------------------
   The mark is a raster PNG, so the band of light is masked by the
   file's own alpha and follows the letters instead of painting a
   rectangle over the header. mask-origin:content-box with the plate's
   own padding inherited reproduces the object-fit:contain box of the
   <img> exactly, so the mask sits on the glyphs. :after on .topbar
   .brand is the static plate highlight; this is :before, above the
   image. It runs once, on a success toast only, and the class is
   removed when it ends. */
.topbar .brand.is-lit:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  box-sizing:border-box;
  padding:inherit;
  pointer-events:none;
  /* The band is a narrow image travelling across a wider box, so the position
     percentages read the way they look: it starts clear of the left edge of
     the mark and ends clear of the right one, once, left to right. */
  background-image:linear-gradient(105deg,
    transparent 2%,
    var(--logo-sweep) 50%,
    transparent 98%);
  background-repeat:no-repeat;
  background-size:42% 100%;
  background-position:-120% 0;
  -webkit-mask-image:url("/static/framaai-logo.svg");
  -webkit-mask-size:contain;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-origin:content-box;
  -webkit-mask-clip:content-box;
  mask-image:url("/static/framaai-logo.svg");
  mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-origin:content-box;
  mask-clip:content-box;
  /* linear, and long enough that the band is on the mark for about a second:
     an ease spends most of the run off both ends of the letters, which turns
     a slow sweep into a blink in the middle. */
  animation:frama-sweep 1120ms linear 1 both;
}
@keyframes frama-sweep {
  from {background-position:-120% 0}
  to {background-position:220% 0}
}
@media(prefers-reduced-motion:reduce) {
  .topbar .brand.is-lit:before {
    display:none;
  }
}


/* Company gateway: choose a workspace before opening its records. */
.company-home-heading { max-width: 1120px; margin: 0 auto var(--space-6); }
.company-home-heading p { margin-top: var(--space-2); color: var(--muted); }
.company-home-hero {
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  min-height: 244px; padding: 36px 40px;
  border: 1px solid color-mix(in srgb, var(--copper) 32%, var(--graphite));
  border-radius: var(--radius-card);
  background: radial-gradient(ellipse at 65% 0%, var(--graphite-soft), transparent 70%), var(--graphite-deep);
  color: var(--champagne-bright);
}
.company-home-hero-copy { position: relative; z-index: 1; max-width: 75%; }
.company-home-signature { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.company-home-wordmark { color: var(--white); font-size: 28px; font-weight: 750; letter-spacing: -1.4px; line-height: 1; white-space: nowrap; }
.company-home-wordmark > span { color: var(--copper); font-weight: 400; }
.company-home-tagline {
  padding-left: var(--space-4); border-left: 1px solid color-mix(in srgb, var(--white) 38%, transparent);
  color: color-mix(in srgb, var(--white) 78%, var(--graphite-deep));
  font-size: var(--text-xs); line-height: 1.6; letter-spacing: .16em; text-transform: uppercase;
}
.company-home-hero h1 { margin: 0; color: inherit; font-size: clamp(36px, 4.5vw, 62px); line-height: 1.08; font-weight: 750; letter-spacing: -.035em; }
.company-home-hero p { margin: var(--space-3) 0 0; color: color-mix(in srgb, var(--white) 72%, var(--graphite-deep)); font-size: 16px; line-height: 1.5; }
.company-home-art { position: absolute; z-index: 0; top: 50%; right: -12px; width: 420px; max-width: 48%; height: auto; transform: translateY(-50%); pointer-events: none; }
@media (max-width: 640px) {
  .company-home-hero { min-height: 224px; padding: 28px 24px; }
  .company-home-hero-copy { max-width: 100%; }
  .company-home-signature { gap: var(--space-3); }
  .company-home-wordmark { font-size: 25px; }
  .company-home-tagline { padding-left: var(--space-3); letter-spacing: .1em; }
  .company-home-art { right: -105px; width: 340px; max-width: none; opacity: .22; }
}
.company-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); max-width: 1120px; margin-inline: auto; }
/* ---- Gateway company tile: cover photo (or a pattern drawn from the company accent), logo plate, name.
   Markup: a.company-entry.company-entry-link[data-accent] > span.company-cover(.has-photo) (img | span.company-cover-pattern)
   + div.company-entry-brand (img | span.company-entry-initials) + span.company-entry-body > h2 + span.company-entry-open.
   --co / --co-strong come from [data-accent] in tokens.css; copper is the fallback. ---- */
.company-entry {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--card-line); border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 6%, transparent), 0 1px 2px var(--shadow-raised-color), var(--shadow);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 200ms ease;
}
.company-cover {
  position: relative; display: block; height: 140px; overflow: hidden;
  background: color-mix(in srgb, var(--co, var(--copper)) 55%, var(--graphite-deep));
  border-bottom: 2px solid var(--co, var(--copper));
}
.company-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--graphite-deep) 22%, transparent), transparent 38%, transparent 55%, color-mix(in srgb, var(--graphite-deep) 58%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--co, var(--copper)) 16%, transparent), transparent 60%);
}
.company-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.company-cover-pattern {
  position: absolute; inset: 0;
  background:
    repeating-radial-gradient(circle at 104% 128%, transparent 0 17px, color-mix(in srgb, var(--champagne-bright) 13%, transparent) 17px 18px),
    radial-gradient(70% 110% at 8% -10%, color-mix(in srgb, var(--champagne-bright) 26%, transparent), transparent 70%),
    radial-gradient(90% 130% at 20% 0%, color-mix(in srgb, var(--co, var(--copper)) 70%, transparent), transparent 75%),
    linear-gradient(140deg, color-mix(in srgb, var(--co, var(--copper)) 58%, var(--graphite-deep)), var(--graphite-deep) 88%);
}
.company-entry-brand {
  position: relative; z-index: 2; align-self: flex-start;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 68px; min-width: 68px; max-width: calc(100% - 40px);
  margin: -38px 0 0 20px; padding: 10px 14px;
  background: var(--logo-plate); border: 1px solid color-mix(in srgb, var(--graphite-deep) 9%, transparent);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--graphite-deep) 26%, transparent), 0 1px 2px color-mix(in srgb, var(--graphite-deep) 20%, transparent);
}
.company-entry-brand img { display: block; max-width: 100%; max-height: 46px; width: auto; height: auto; object-fit: contain; }
.company-entry-initials {
  font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1;
  color: color-mix(in srgb, var(--co, var(--copper)) 55%, var(--graphite-deep));
}
.company-entry-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-5) var(--space-4); }
.company-entry h2 { margin: 0; font-size: 19px; font-weight: 650; line-height: 1.3; letter-spacing: -.012em; text-align: left; overflow-wrap: anywhere; }
.company-entry:focus-within {
  border-color: color-mix(in srgb, var(--co, var(--copper)) 55%, var(--line));
}
@media (hover: hover) and (pointer: fine) {
  .company-entry:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--co, var(--copper)) 45%, var(--line));
    box-shadow: inset 0 1px 0 var(--material-glow), 0 18px 40px var(--shadow-raised-color);
  }
  .company-entry:hover .company-cover img { transform: scale(1.045); }
  .company-entry:hover .company-entry-go { background: var(--co, var(--copper)); border-color: transparent; color: var(--surface); transform: translateX(2px); }
}
.company-entry-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: auto; }
.company-entry-actions .btn { min-height: 48px; justify-content: center; padding-inline: var(--space-2); }
.company-entry-actions .btn:only-child { grid-column: 1 / -1; }
.company-entry-actions .btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-bg) 92%, var(--champagne-bright)), var(--primary-bg));
  border-color: color-mix(in srgb, var(--primary-bg) 78%, var(--champagne));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--champagne-bright) 40%, transparent), 0 3px 8px var(--shadow-raised-color);
}
.company-entry-actions .btn.primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-hover) 92%, var(--champagne-bright)), var(--primary-hover));
  border-color: var(--primary-hover);
}
@media (prefers-reduced-motion: reduce) {
  .company-entry { transition: none; }
  .company-entry:hover { transform: none; }
}
body.company-gateway #navigation, body.company-gateway #current-company,
body.company-gateway #global-search, body.company-gateway #create-toggle,
body.company-gateway #create-menu, body.company-gateway .header-context { display: none; }
@media (max-width: 1000px) { .company-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .company-home-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .company-home-heading { margin-bottom: var(--space-5); } }
@media (min-width: 1100px) {
  :root[data-layout="side"] body.company-gateway .app-frame { display: block; }
  :root[data-layout="side"] body.company-gateway .masthead { flex-direction: row; align-items: center; }
}

.company-entry-actions .btn { font-size: var(--text-lg); font-weight: 600; }
.company-entry-actions .btn:not(.primary) { background: var(--surface-subtle); color: var(--ink); }
body.company-gateway .topbar .icon-button { background: var(--surface-subtle); color: var(--ink); border-color: var(--line); }

/* One gateway masthead: brand, controls and introduction share the same surface. */
body.company-gateway .topbar.company-home-hero {
  position: relative; inset: auto; z-index: 120;
  width: calc(100% - 60px); max-width: 1120px; margin: 32px auto 0;
  padding: 28px 40px 36px; min-height: 252px; border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--copper) 32%, var(--graphite));
  background: radial-gradient(ellipse at 65% 0%, var(--graphite-soft), transparent 70%), var(--graphite-deep);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 5%, transparent);
}
body.company-gateway .topbar .masthead {
  position: relative; z-index: 1; display: flex; flex-direction: row;
  align-items: center; justify-content: space-between; gap: 20px; width: 100%;
  min-height: 44px; margin: 0 0 28px; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
body.company-gateway .topbar .brand {
  display: flex; align-items: center; gap: 16px; margin: 0; padding: 0;
  min-width: 0; background: none; border: 0; box-shadow: none;
  border-radius: 4px; text-decoration: none;
}
body.company-gateway .topbar .brand::before,
body.company-gateway .topbar .brand::after { display: none; }
body.company-gateway .topbar .company-home-wordmark { font-size: 28px; line-height: 1; font-weight: 750; letter-spacing: -1.4px; }
body.company-gateway .topbar .company-home-tagline { font-size: var(--text-xs); font-weight: 400; line-height: 1.6; letter-spacing: .16em; }
body.company-gateway .topbar .masthead > .header-tools {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px;
  width: auto; flex: 0 0 auto; margin: 0 0 0 auto; order: 3;
}
body.company-gateway .topbar .icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; padding: 10px;
  background: color-mix(in srgb, var(--white) 6%, transparent);
  color: var(--on-graphite); border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
  border-radius: var(--radius-pill); box-shadow: none;
}
body.company-gateway .topbar .icon-button:hover { background: color-mix(in srgb, var(--copper) 22%, var(--graphite-deep)); border-color: var(--copper); }
body.company-gateway .topbar .brand:focus-visible,
body.company-gateway .topbar .icon-button:focus-visible { outline: 2px solid var(--champagne-bright); outline-offset: 4px; }
body.company-gateway .topbar .navigation-panel,
body.company-gateway .topbar .menu-toggle { display: none; }
body.company-gateway .company-home-hero-copy { max-width: 78%; }
body.company-gateway .company-home-art { right: -12px; opacity: .8; }
@media (max-width: 640px) {
  body.company-gateway .topbar.company-home-hero { width: calc(100% - 32px); margin-top: 16px; padding: 20px 20px 28px; min-height: 244px; }
  body.company-gateway .topbar .masthead { gap: 12px; margin-bottom: 28px; }
  body.company-gateway .topbar .company-home-wordmark { font-size: 25px; }
  body.company-gateway .topbar .company-home-tagline { display: none; }
  body.company-gateway .topbar .header-tools { gap: 6px; }
  body.company-gateway .company-home-hero-copy { max-width: 100%; }
  body.company-gateway .company-home-art { right: -110px; opacity: .18; }
}

/* Company workspaces and their module entry points. */
.company-entry-link { color: var(--ink); text-decoration: none; }
.company-entry-open { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; min-height: 34px; color: var(--muted); font-size: var(--text-md); font-weight: 550; }
.company-entry-go {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--card-line); border-radius: var(--radius-pill); background: var(--surface-subtle);
  color: var(--co-strong, var(--accent-text));
  transition: background-color 200ms ease, color 200ms ease, transform 260ms var(--ease-out);
}
.company-entry-go .icon { width: 16px; height: 16px; }
.company-entry-link:focus-visible { outline: 2px solid var(--co, var(--copper)); outline-offset: 3px; }
@media (max-width: 640px) {
  .company-entry { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .company-cover { grid-column: 1 / -1; height: 104px; }
  .company-entry-brand { height: 56px; min-width: 56px; max-width: 46vw; margin: -28px 0 14px 16px; padding: 8px 10px; }
  .company-entry-brand img { max-height: 38px; }
  .company-entry-initials { font-size: 19px; }
  .company-entry-body { padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); gap: 2px; }
  .company-entry h2 { font-size: 16px; }
  .company-entry-open { min-height: 30px; font-size: var(--text-sm); }
  .company-entry-go { width: 30px; height: 30px; }
}
.workspace-back { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); text-decoration: none; margin-bottom: var(--space-5); }
.workspace-back-arrow { display: inline-flex; transform: rotate(180deg); }
/* Workspace hero: the gateway tile, opened up. Graphite material in both themes, cover photo or accent pattern
   behind a scrim, logo plate and name on top, the company accent as the bottom hairline. */
.workspace-intro {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; gap: var(--space-5);
  min-height: 208px; margin-bottom: var(--space-6); padding: var(--space-6) var(--space-6) var(--space-5);
  border: 1px solid var(--material-line); border-radius: var(--radius-lg);
  background: var(--graphite-deep); color: var(--on-graphite);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--champagne-bright) 16%, transparent), 0 14px 36px var(--shadow-raised-color);
}
.workspace-intro > .company-cover { position: absolute; inset: 0; z-index: -1; height: auto; border-bottom: 0; box-shadow: inset 0 -3px 0 var(--co, var(--copper)); }
.workspace-intro > .company-cover::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--graphite-deep) 86%, transparent), color-mix(in srgb, var(--graphite-deep) 52%, transparent) 55%, color-mix(in srgb, var(--graphite-deep) 12%, transparent)),
    linear-gradient(0deg, color-mix(in srgb, var(--graphite-deep) 55%, transparent), transparent 60%);
}
.workspace-intro-copy { min-width: 0; }
.workspace-intro h1 { font-size: clamp(28px, 3vw, 42px); margin: var(--space-2) 0; line-height: 1.15; color: var(--on-graphite); letter-spacing: -.02em; }
.workspace-intro p { color: var(--on-graphite-muted); }
.workspace-intro .workspace-eyebrow { color: color-mix(in srgb, var(--champagne-bright) 82%, var(--co, var(--copper))); }
.workspace-eyebrow { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.workspace-company-mark {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 96px; max-width: 240px; height: 96px; padding: var(--space-3) var(--space-4);
  background: var(--logo-plate); border: 1px solid color-mix(in srgb, var(--graphite-deep) 9%, transparent); border-radius: var(--radius-md);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--graphite-deep) 40%, transparent);
}
.workspace-company-mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.workspace-modules { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); }
.workspace-module { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); min-height: 160px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.workspace-module:hover, .workspace-module:focus-visible { border-color: var(--copper); outline-color: var(--copper); }
.workspace-module-icon { display: flex; align-items: center; justify-content: center; padding: var(--space-3); background: var(--surface-subtle); border-radius: var(--radius-sm); color: var(--copper); }
.workspace-module h2 { margin-bottom: var(--space-2); font-size: 24px; }
.workspace-module p { color: var(--muted); line-height: 1.6; }
.workspace-module-copy { flex: 1; min-width: 0; }
.workspace-module-arrow { color: var(--muted); margin-top: var(--space-3); }
.workspace-module-flow { border-color: color-mix(in srgb,var(--copper) 55%,var(--line)); }
.workspace-tabs, .finance-module-nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.workspace-tabs a, .finance-module-nav a { color: var(--ink); padding: var(--space-3) var(--space-4); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
.workspace-tabs a[aria-current], .finance-module-nav a[aria-current] { border-color: var(--copper); background: var(--surface-subtle); font-weight: 650; }
.finance-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.finance-actions a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.finance-actions a:hover { border-color: var(--copper); }
.finance-actions a > span:not(.finance-action-icon) { flex: 1; min-width: 0; }
.finance-actions strong, .finance-actions small { display: block; }
.finance-actions small { color: var(--muted); margin-top: var(--space-1); line-height: 1.4; }
.finance-action-icon { color: var(--copper); }
.finance-utilities { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-5); }
.finance-utilities a { color: var(--muted); font-size: var(--text-base); text-decoration: underline; text-underline-offset: 3px; }
.flow-connect { max-width: 560px; margin: var(--space-6) auto; }
.flow-connect form { margin-top: var(--space-5); }
.flow-source-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); color: var(--muted); }
.flow-source-status > div { display: flex; gap: var(--space-2); }
.flow-stock-totals { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
.flow-stock-total { display: grid; gap: var(--space-2); padding: var(--space-5); min-width: 220px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.flow-stock-total strong { font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.flow-stock-total span, .flow-stock-total small { color: var(--muted); }
.flow-stock-card { margin-bottom: var(--space-5); }
.flow-stock-card caption { text-align: left; padding: var(--space-5); font-size: var(--text-xl); font-weight: 650; color: var(--ink); }
.flow-stock-card td small, .flow-stock-card th small { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.flow-stock-card > .field-help { padding: var(--space-4) var(--space-5); }
.flow-stock-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); }
.flow-stock-heading h2 { margin:0; }
.flow-stock-heading .field-help { margin:var(--space-2) 0 0; }
.flow-quick-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.flow-stock-card table { width:100%; }
.flow-stock-card th, .flow-stock-card td { vertical-align:top; }
.flow-stock-card td > strong { display:block; font-size:var(--text-lg); font-variant-numeric:tabular-nums; white-space:nowrap; }
.flow-unit { font-size:.85em; font-weight:400; white-space:nowrap; }
.flow-stock-detail { margin-top:var(--space-2); font-size:var(--text-sm); color:var(--muted); }
.flow-stock-detail summary { cursor:pointer; padding:var(--space-2) 0; }
.flow-stock-detail summary:focus-visible { outline:2px solid var(--copper); outline-offset:3px; }
.flow-stock-detail dl { display:grid; grid-template-columns:auto auto; gap:var(--space-2); margin:var(--space-2) 0; }
.flow-stock-detail dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.flow-form-section { margin:var(--space-5) 0; padding-top:var(--space-4); border-top:1px solid var(--line); }
.flow-form-section h3 { margin:0 0 var(--space-4); }
.flow-order-item { display:block; margin-top:var(--space-2); color:var(--muted); font-weight:400; }
.flow-entry .form-group, .flow-entry .form-grid { min-width:0; }
.flow-entry select { width:100%; min-width:0; }
@media(max-width:640px) {
  .flow-stock-totals { display:grid; grid-template-columns:minmax(0,1fr); }
  .flow-stock-total { min-width:0; }
  .flow-stock-card th, .flow-stock-card td { padding:var(--space-3) var(--space-2); }
  .flow-stock-card td > strong { font-size:var(--text-base); }
  .flow-stock-detail dl { grid-template-columns:minmax(0,1fr); }
  .flow-stock-detail dd { text-align:left; }
  .flow-entry .form-grid, .flow-dispatch-lines { grid-template-columns:minmax(0,1fr); }
}
body.company-workspace .create-dock, body.company-workspace #global-search { display: none; }
@media (max-width: 900px) { .finance-actions { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) {
  .workspace-intro { align-items: flex-start; flex-direction: column; gap: var(--space-4); min-height: 0; padding: var(--space-5); }
  .workspace-company-mark { min-width: 72px; max-width: 70%; height: 72px; }
  .workspace-modules, .finance-actions { grid-template-columns: minmax(0,1fr); }
  .workspace-module { padding: var(--space-5); min-height: 140px; }
  .workspace-intro h1 { overflow-wrap: anywhere; }
}

/* ---- Login illustration & entry motion (item 23) + Company nav badge (item 28) ---- */
.login-story-main { display: flex; flex-direction: column; gap: var(--space-3); }
.login-illustration {
  margin-top: var(--space-4);
  max-width: 460px;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 88%, var(--champagne-bright)), var(--surface-subtle));
  border: 1px solid var(--material-line);
  box-shadow: var(--shadow);
  animation: login-enter var(--motion-panel, 200ms) var(--ease-out, ease-out) both;
}
.login-illustration svg { display: block; width: 100%; height: auto; }
.login-card {
  box-shadow: 0 14px 36px var(--shadow-raised-color);
  animation: login-enter var(--motion-panel, 200ms) var(--ease-out, ease-out) both;
}
@keyframes login-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .login-illustration { display: none; }
}
@media (max-width: 640px) {
  .login-story { padding: 14px 20px 16px; }
  .login-story h1 { font-size: var(--text-xl); margin: 8px 0 0; }
  .login-form-wrap { padding: 18px 20px 24px; }
  .login-card > .muted { margin-bottom: 14px; }
  .login-card label { margin-top: 12px; }
  .login-card .btn[type="submit"] { margin-top: 16px; }
}

#current-company[hidden] { display: none !important; }
#current-company > .company-nav-badge {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--copper) 28%, transparent);
}
#current-company .company-nav-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--logo-plate);
  padding: 2px;
}
#current-company .company-nav-initials {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--accent-text);
}
.flow-entry{max-width:880px}.flow-entry form{margin-top:20px}.flow-entry label small{display:block;font-weight:400;color:var(--muted)}.flow-dispatch-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}.flow-review-details{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,3fr);gap:10px 20px}.flow-review-details dt{color:var(--muted)}.flow-review-details dd{margin:0;overflow-wrap:anywhere}.flow-review{margin-top:20px}.flow-review .btn{margin-right:8px}.flow-recent{margin-top:24px}.flow-recent a{display:block;padding:8px 0}.flow-entry .checkbox-label{margin:12px 0}


/* ---- Mobile tab bar (navigation.js installTabBar), ≤760 px -------------------------------------------------------
   Graphite like the masthead, in both themes: the two pieces of chrome are one material. Active tab = a soft pill
   behind the icon in the company accent; the unread dot mirrors the header bell. The bar leaves for the keyboard
   (body.tabbar-keyboard) and for modal dialogs; the page reserves its height so nothing is ever covered. */
.tabbar { display: none; }
@media (max-width: 760px) {
  :root { --tabbar-h: 62px; }
  .tabbar {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch;
    min-height: var(--tabbar-h);
    padding: 4px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--graphite-deep) 90%, transparent);
    border-top: 1px solid var(--material-line);
    box-shadow: 0 -10px 30px color-mix(in srgb, var(--graphite-deep) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--champagne-bright) 10%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
    transition: transform 240ms var(--ease-out), opacity 200ms ease;
  }
  .tabbar-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; min-height: 54px; padding: 4px 2px; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--on-graphite-muted); text-decoration: none; font: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar-item[hidden] { display: none; }
  .tabbar-icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 30px; border-radius: var(--radius-pill);
    transition: background-color 200ms ease, transform 200ms var(--ease-out);
  }
  .tabbar-icon svg.icon { width: 22px; height: 22px; stroke-width: 1.7; }
  .tabbar-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); font-weight: 600; letter-spacing: .01em; }
  .tabbar-item.is-active, .tabbar-item.is-open { color: var(--on-graphite); }
  .tabbar-item.is-active .tabbar-icon, .tabbar-item.is-open .tabbar-icon {
    background: color-mix(in srgb, var(--co, var(--copper)) 34%, var(--graphite-soft));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--champagne) 26%, transparent);
  }
  .tabbar-item:active .tabbar-icon { transform: scale(.94); }
  /* While Aktivita is open it is the one current tab. */
  .tabbar:has(.is-open) .tabbar-item.is-active:not(.is-open) { color: var(--on-graphite-muted); }
  .tabbar:has(.is-open) .tabbar-item.is-active:not(.is-open) .tabbar-icon { background: none; box-shadow: none; }
  .tabbar-item:focus-visible { outline: 2px solid var(--champagne); outline-offset: -2px; }
  .tabbar-dot {
    position: absolute; top: 3px; right: 13px; width: 9px; height: 9px; border-radius: var(--radius-pill);
    background: var(--champagne-bright); box-shadow: 0 0 0 2px var(--graphite-deep);
  }
  .tabbar-dot[hidden] { display: none; }
  body.tabbar-keyboard .tabbar,
  body:has(dialog[open]) .tabbar,
  body.menu-overlay-open .tabbar { transform: translateY(110%); opacity: 0; pointer-events: none; }
  body.has-tabbar .app-footer { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); }
  body.has-tabbar .app-area { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  body.has-tabbar.tabbar-keyboard .app-area { padding-bottom: 0; }
  /* The create button becomes a round action above the bar, never under it. */
  body.has-tabbar .create-dock { right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); }
  body.has-tabbar .create-toggle { width: 56px; height: 56px; min-height: 56px; padding: 0; gap: 0; border-radius: var(--radius-pill); }
  body.has-tabbar .create-toggle > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.has-tabbar .create-toggle .icon { width: 24px; height: 24px; }
  body.has-tabbar.tabbar-keyboard .create-dock { display: none; }
  /* The notification panel opens above the bar, so Aktivita stays a tab you can tap again to leave. */
  body.has-tabbar .np-panel { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); height: auto; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .tabbar, .tabbar-icon { transition: none; }
}

/* ---- Account sheet (gateway Účet tab): a bottom sheet on phones, a small dialog elsewhere. ---- */
dialog.account-sheet {
  width: min(440px, calc(100vw - 24px)); max-width: none; margin: auto auto 12px; padding: var(--space-3) var(--space-5) var(--space-5);
  border: 1px solid var(--card-line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink);
  box-shadow: 0 -12px 48px var(--shadow-overlay-color);
}
dialog.account-sheet::backdrop { background: var(--overlay); }
dialog.account-sheet[open] { animation: account-sheet-in 320ms var(--ease-out); }
@keyframes account-sheet-in { from { transform: translateY(24px); opacity: 0; } }
.account-sheet-grip { width: 40px; height: 4px; margin: 0 auto var(--space-4); border-radius: var(--radius-pill); background: var(--line-strong); opacity: .5; }
.account-sheet-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.account-sheet-head h2 { margin: 0; font-size: var(--text-xl); }
.account-sheet-head p { margin: 2px 0 0; color: var(--muted); }
.account-sheet-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-pill); background: linear-gradient(145deg, var(--champagne-bright), var(--champagne)); color: var(--graphite-deep); font-weight: 750;
}
.account-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-5); }
.account-sheet-actions .btn { justify-content: center; min-height: 48px; }
@media (prefers-reduced-motion: reduce) { dialog.account-sheet[open] { animation: none; } }

/* Light / dark / system as one segmented control (account sheet and Nastavení → Vzhled). */
.theme-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-subtle); min-width: 0; }
.theme-choice-title { display: block; margin-bottom: var(--space-2); color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
.theme-choice label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-pill); color: var(--muted); font-weight: 600; font-size: var(--text-md); text-align: center; cursor: pointer; }
.theme-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.theme-choice label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px var(--shadow-raised-color), inset 0 0 0 1px var(--selected-line); }
.theme-choice label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- Masthead controls: one graphite-glass treatment in both themes (the light theme used to paint a white disc
   under a white icon). The company badge is a small logo plate, wide enough for a wordmark. ---- */
body:not(.company-gateway) .topbar .header-tools :is(.icon-button, .theme-toggle) {
  background: color-mix(in srgb, var(--graphite-soft) 86%, var(--champagne));
  border: 1px solid color-mix(in srgb, var(--champagne) 24%, var(--graphite-soft));
  color: var(--on-graphite);
}
body:not(.company-gateway) .topbar .header-tools :is(.icon-button, .theme-toggle):hover {
  background: color-mix(in srgb, var(--graphite-soft) 70%, var(--champagne));
  color: var(--on-graphite);
}
#current-company > .company-nav-badge:has(.company-nav-logo) {
  flex: 0 0 auto; width: auto; min-width: 28px; max-width: 64px; height: 28px; padding: 3px 6px; box-sizing: border-box;
  border-radius: 8px; background: var(--logo-plate); border-color: color-mix(in srgb, var(--graphite-deep) 10%, transparent);
}
#current-company .company-nav-badge .company-nav-logo { width: auto; max-width: 100%; height: 100%; padding: 0; background: none; }
:root[data-accent] #current-company { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--co) 70%, transparent); }

/* ---- Inside a company the accent re-tints the interactive chrome; copper companies keep the house look. ---- */
:root[data-accent]:not([data-accent="copper"]) .topbar #navigation a.active {
  background: color-mix(in srgb, var(--co) 34%, var(--graphite-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--co) 48%, transparent);
}
:root[data-accent]:not([data-accent="copper"]) body:not(.company-gateway) .topbar {
  background:
    radial-gradient(42% 160% at 50% -40%, color-mix(in srgb, var(--co) 26%, transparent), transparent 72%),
    linear-gradient(115deg, var(--graphite-deep), var(--graphite) 64%, var(--graphite-soft));
}
:root[data-accent]:not([data-accent="copper"]) :is(.workspace-module-icon, .finance-action-icon) { color: var(--accent-text); }
:root[data-accent]:not([data-accent="copper"]) :is(.workspace-module:hover, .workspace-module:focus-visible, .finance-actions a:hover) { border-color: var(--accent); outline-color: var(--accent); }
:root[data-accent]:not([data-accent="copper"]) :is(.workspace-tabs a[aria-current], .finance-module-nav a[aria-current]) { border-color: var(--accent); }
:root[data-accent]:not([data-accent="copper"]) .workspace-module-flow { border-color: color-mix(in srgb, var(--co) 55%, var(--line)); }
@media (max-width: 640px) {
  .workspace-modules { gap: var(--space-3); }
  .workspace-module { min-height: 0; padding: var(--space-4); align-items: center; }
  .workspace-module h2 { font-size: 19px; margin-bottom: 2px; }
  .workspace-module p { font-size: var(--text-md); line-height: 1.45; }
  .workspace-module-arrow { margin-top: 0; }
}
.workspace-intro::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--co, var(--copper)), color-mix(in srgb, var(--co, var(--copper)) 40%, var(--champagne)) 60%, transparent);
}

/* ---- Nastavení → Vzhled firmy v aplikaci (brand.js): live tile preview, accent swatches, cover photo. ---- */
.brand-look-body { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-top: var(--space-4); }
.brand-preview { pointer-events: none; }
.brand-preview .company-entry-go { font-size: var(--text-md); }
.brand-look-controls { display: grid; gap: var(--space-4); min-width: 0; }
.accent-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--space-2); }
.accent-swatch {
  position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer;
  font-size: var(--text-md); font-weight: 550; color: var(--ink);
}
.accent-swatch:first-child { grid-column: 1 / -1; justify-self: start; padding-right: var(--space-4); }
.accent-swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.accent-swatch input:disabled { cursor: default; }
.accent-dot { width: 18px; height: 18px; flex: none; border-radius: var(--radius-pill); background: var(--co); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--graphite-deep) 18%, transparent), 0 0 0 3px color-mix(in srgb, var(--co) 18%, transparent); }
.accent-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accent-swatch:has(input:checked) { border-color: var(--co); box-shadow: inset 0 0 0 1px var(--co); background: color-mix(in srgb, var(--co) 8%, var(--surface)); }
.accent-swatch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.brand-cover-row { display: grid; gap: var(--space-2); }
.brand-cover-row .field-help { margin: 0; }
.brand-cover-row .page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.brand-cover-row .is-busy { opacity: .6; pointer-events: none; }
.theme-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-4) 0; }
.theme-row .theme-choice { flex: 0 1 380px; }
@media (max-width: 760px) {
  .brand-look-body { grid-template-columns: minmax(0, 1fr); }
  .theme-row .theme-choice { flex-basis: 100%; }
}

/* ---- Light theme polish (and form controls in both themes) ------------------------------------------------------
   Working surfaces are white, not grey: dialogs and the fields inside them. Every text field, select and picker has a
   3:1 boundary (--line-strong) so it can be found outdoors on a phone; hover deepens it, focus uses the accent ring.
   The header search keeps its own graphite treatment. */
:is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden]), select, textarea, .picker-trigger):not(.topbar *, .tabbar *) {
  border-color: var(--line-strong);
}
:is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden]), select, textarea, .picker-trigger):not(.topbar *):hover {
  border-color: color-mix(in srgb, var(--line-strong) 60%, var(--ink));
}
:root:not([data-theme="dark"]) :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden]), select, textarea, .picker-trigger):not(.topbar *) {
  background: var(--surface);
}
:root:not([data-theme="dark"]) #modal,
:root:not([data-theme="dark"]) #modal .modal-heading {
  background: var(--surface);
}
:root:not([data-theme="dark"]) #modal { border-color: var(--line); box-shadow: 0 2px 6px var(--shadow-raised-color), 0 30px 80px var(--shadow-overlay-color); }
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .tile { border-color: var(--line); }
/* The invoice status strip is a row of pills; a generic `nav` column rule had stacked it into full-width bars. */
nav.status-strip { flex-direction: row; align-items: center; }
/* Document list as cards on phones: number on top, client and amount, due date and state, then the actions.
   Two earlier rule sets placed the state and the actions into the same narrow column and squeezed the date. */
@media (max-width: 640px) {
  table.document-table tr:has(> td:nth-child(6):last-child) {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: var(--space-3); row-gap: var(--space-2);
  }
  table.document-table tr:has(> td:nth-child(6):last-child) > td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  table.document-table tr:has(> td:nth-child(6):last-child) > td:nth-child(2) { grid-column: 1; grid-row: 2; align-self: end; font-weight: 600; color: var(--ink); }
  table.document-table tr:has(> td:nth-child(6):last-child) > td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; align-self: end; }
  table.document-table tr:has(> td:nth-child(6):last-child) > td:nth-child(3) { grid-column: 1; grid-row: 3; white-space: nowrap; }
  table.document-table tr:has(> td:nth-child(6):last-child) > td:nth-child(5) { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; }
  table.document-table tr:has(> td:nth-child(6):last-child) > td:nth-child(6) { grid-column: 1 / -1; grid-row: 4; padding-top: var(--space-2) !important; }
  table.document-table tr:has(> td:nth-child(6):last-child) > td:nth-child(6) > * { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-start; }
  table.document-table tr:has(> td:nth-child(6):last-child) > td:nth-child(4)::before { text-align: right; }
}
@media (max-width: 640px) {
  nav.status-strip { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, var(--ink) 86%, transparent); mask-image: linear-gradient(90deg, var(--ink) 86%, transparent); padding-right: var(--space-6); }
}

/* Toasts: a white (light) or raised (dark) slip with a status edge, lifted above the create button and the tab bar. */
#toasts { bottom: calc(var(--toasts-lift, 25px) + env(safe-area-inset-bottom)); }
.toast {
  display: flex; align-items: center; gap: var(--space-3); padding: 13px 18px 13px 16px;
  border-left: 4px solid var(--line-strong); font-size: var(--text-md); font-weight: 550;
  box-shadow: 0 2px 6px var(--shadow-raised-color), 0 16px 40px var(--shadow-raised-color);
}
:root:not([data-theme="dark"]) .toast { background: var(--surface); }
.toast.is-success { border-left-color: var(--success-text); }
.toast.error { border-left-color: var(--error-text); }
body:has(.create-dock:not([hidden])) { --toasts-lift: 96px; }
body:is(.company-gateway, .company-workspace), body:has(.bd-home, .bd-board, .op-page) { --toasts-lift: 25px; }
@media (max-width: 760px) {
  #toasts { left: 12px; right: 12px; max-width: none; }
  body.has-tabbar:has(.create-dock) { --toasts-lift: calc(var(--tabbar-h) + 84px); }
  body.has-tabbar:is(.company-gateway, .company-workspace):has(.create-dock), body.has-tabbar:has(.create-dock):has(.bd-home, .bd-board, .op-page) { --toasts-lift: calc(var(--tabbar-h) + 12px); }
}

/* ---- Logo-first gateway tile: without a cover photo the logo itself is the tile's hero. The band takes the colour
   of the logo's own background (--logo-bg, sampled in company-workspace.js), so the logo reads edge to edge. ---- */
.company-entry.logo-hero .company-cover { height: 156px; background: var(--logo-bg, var(--graphite-deep)); }
.company-entry.logo-hero .company-cover-pattern, .company-entry.logo-hero .company-cover::after { display: none; }
.company-entry.logo-hero .company-entry-brand {
  position: absolute; top: 0; left: 0; right: 0; height: 156px; max-width: none; margin: 0; padding: 14px 18px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.company-entry.logo-hero .company-entry-brand img { max-width: 100%; max-height: 128px; transition: transform 600ms var(--ease-out); }
.company-entry.logo-hero .company-entry-body { padding-top: var(--space-4); }
@media (hover: hover) and (pointer: fine) {
  .company-entry.logo-hero:hover .company-entry-brand img { transform: scale(1.035); }
}
@media (max-width: 640px) {
  .company-entry.logo-hero { display: flex; align-items: stretch; }
  .company-entry.logo-hero .company-cover, .company-entry.logo-hero .company-entry-brand { height: 132px; }
  .company-entry.logo-hero .company-entry-brand img { max-height: 108px; }
  .company-entry.logo-hero .company-entry-body { padding: var(--space-3) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .company-entry.logo-hero .company-entry-brand img { transition: none; } }