/* Shared page rules for every screen (house rule: no page ever scrolls sideways, on any
   width). Causes are fixed in the templates — wrapping headers and toolbars, panes that
   stack below 1024 px, tables that turn into cards on phones — this is the safety net.
   clip instead of hidden keeps position: sticky working. */
html, body { overflow-x: clip; }

/* Tables with many columns read as one card per row on phones. Each cell carries its
   column name in data-label. */
@media (max-width: 639px) {
    table.cards-sm, table.cards-sm tbody, table.cards-sm tr, table.cards-sm td { display: block; width: 100%; }
    table.cards-sm thead { display: none; }
    table.cards-sm tr { border-bottom: 1px solid #e2e8f0; padding: .5rem 0; }
    table.cards-sm td { padding: .15rem .75rem !important; text-align: left !important; overflow-wrap: anywhere; }
    table.cards-sm td[data-label]::before {
        content: attr(data-label); display: block; font-size: 10px; font-weight: 600;
        text-transform: uppercase; letter-spacing: .04em; color: #64748b;
    }
}

/* Top bar of the pages outside the Studio (templates/_shell_header.html): the same bar
   as the Studio, so the platform reads as one product on every screen. */
.wv-top { flex-shrink: 0; display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 20px;
          background: #1b4965; color: #fff; font: 14px/1.3 inherit; position: relative; z-index: 10; }
.wv-brand { display: flex; flex-direction: column; color: #fff; text-decoration: none; line-height: 1.1; min-width: 150px; }
.wv-brand b { font-size: 20px; letter-spacing: -0.5px; }
.wv-brand small { font-size: 8px; letter-spacing: 1.5px; color: #b9c9d6; margin-top: 4px; }
.wv-sr { position: absolute; left: -9999px; }
.wv-magazine { font: inherit; font-size: 13px; color: #fff; background: rgba(255, 255, 255, 0.12);
               border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 4px; padding: 5px 8px; }
.wv-magazine option { color: #1b2a3a; background: #fff; }
.wv-top nav { display: flex; align-self: stretch; }
/* Links that do not fit move into the "Mehr" menu (static/wirevo-ui.js). */
.wv-top .top-links { display: contents; }
.wv-top .top-more { display: none; }
@media (max-width: 1400px) { .wv-top .wv-sub { display: none; } }
@media (max-width: 1240px) {
  .wv-top .top-links { display: none; }
  .wv-top .top-more { display: inline-flex; align-items: center; margin-left: auto; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 4px; background: transparent; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
}
.wv-top nav a { display: flex; align-items: center; padding: 0 11px; color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.wv-top nav a:hover { color: #fff; }
.wv-top nav a.active { color: #fff; box-shadow: inset 0 -3px #b8471f; }
.wv-sub { margin-left: auto; font-size: 11px; color: #c3d0db; white-space: nowrap; }
.wv-logout { font: inherit; font-size: 12px; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3);
             border-radius: 4px; padding: 5px 10px; cursor: pointer; }
.wv-logout:hover { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 760px) {
    .wv-top { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px 12px; }
    .wv-top nav { overflow: auto; width: 100%; order: 9; }
    .wv-top nav a { padding: 8px 10px; }
    .wv-sub { display: none; }
}