/*
  Zweck: Tablet-Zwischenlayout bis 1180px (kompaktes Header-Raster, angepasste Spalten).
  Zielpfad: /home/mckiede/public_html/design/layout-tablet.css
  Verantwortlich: mckie-Portal
*/

@media (max-width: 1180px) {
  .page-shell {
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  .page-shell::before,
  .page-shell::after {
    opacity: 0.55;
  }

  .command-header {
    grid-template-columns: 8.5rem minmax(0, 1fr) minmax(9rem, 26%) 2rem;
    grid-template-rows: var(--header-bar-sm) minmax(5.8rem, auto);
    min-height: 7.5rem;
  }

  .header-bars {
    left: 8.5rem;
    right: 2rem;
    gap: var(--console-matrix-gap);
    background: var(--console-bg);
    grid-template-columns: minmax(6rem, 0.36fr) minmax(0, 1fr) minmax(8rem, 0.22fr);
  }

  .header-elbow-left {
    grid-column: 1;
  }

  .side-rail-frame-svg {
    display: none;
  }

  .command-layout {
    grid-template-columns: 1fr;
    /* Two rows only: panel matrix + main (a third 1fr row stayed empty before). */
    grid-template-rows: auto minmax(min(12rem, 36svh), 1fr);
    align-content: start;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    gap: 0.45rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .command-panel-matrix {
    flex-shrink: 0;
  }

  .command-panel-matrix {
    order: 1;
    min-width: 0;
  }

  .main-console {
    border-radius: var(--radius-lg);
  }

  .header-brand,
  .header-status {
    min-height: 4.6rem;
  }

  .header-brand {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    margin-top: var(--header-bar);
    padding: 0.85rem 0.45rem 0.85rem 0.9rem;
    min-width: 0;
    overflow: visible;
  }

  .header-status {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
    margin-top: var(--header-bar);
    padding: 0.85rem 0.4rem 0.85rem 0.3rem;
    min-width: 0;
    overflow: visible;
  }

  .header-brand #page-title {
    font-size: clamp(0.46rem, 5.5cqi, 1.72rem);
    line-height: 0.9;
    overflow: hidden;
  }

  .header-brand .title-combo,
  .header-brand .title-combo span,
  .header-brand h1 > span {
    display: inline;
    white-space: nowrap;
  }

  .header-brand,
  .header-brand h1,
  .header-brand h1 span {
    min-width: 0;
  }

  .header-brand p,
  .header-elbow .system-label,
  .header-status span {
    margin-bottom: 0.25rem;
    font-size: 0.58rem;
  }

  .header-elbow .system-label {
    top: 0.85rem;
    left: 0.75rem;
  }

  .header-status > span {
    position: absolute;
    z-index: 4;
    top: calc(var(--header-bar) * -1);
    right: 0;
    display: grid;
    align-items: center;
    justify-content: center;
    min-width: 8.5rem;
    height: var(--header-bar);
    padding: 0 0.5rem;
    border-radius: 0 0 var(--radius-control) var(--radius-control);
    background: var(--console-frame);
    color: var(--black);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  .header-bars .header-bar-short {
    border-radius: 0 0 var(--radius-control) var(--radius-control);
  }

  .header-status {
    align-items: flex-end;
    justify-content: space-between;
    text-align: right;
  }

  .header-status strong {
    container-type: inline-size;
    width: 100%;
    max-width: 100%;
    margin-top: auto;
    overflow: hidden;
    font-size: clamp(0.62rem, 4.75cqi, 1.28rem);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-controls {
    width: 5.6rem;
    min-width: 5.6rem;
    height: 2.35rem;
    margin-top: 0.35rem;
    margin-left: auto;
  }

  .control-icon {
    width: 1.15rem;
    height: 1.15rem;
  }

  /*
    Module rail spacing (≤1180px) – avoid desktop leftovers:
    - layout-desktop: gap 0.75rem + padding only from min-width 1181px
    - components: .module-button min-height 4.25rem → overridden below
    - system-activity: .nav-sensor-map align-self:end → only on header, not --rail
    Chain: .module-rail gap → .module-buttons (no extra margin) → .nav-sensor-map--rail
  */
  .module-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--console-matrix-gap);
    min-height: auto;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    z-index: 2;
  }

  .module-rail > .module-buttons {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .module-rail > .nav-sensor-map--rail {
    flex: 0 0 auto;
    align-self: stretch;
    margin: 0;
  }

  .module-rail-header {
    display: none;
  }

  .main-console {
    order: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .status-strip {
    flex: 0 0 auto;
  }

  .module-view {
    flex: 1 1 auto;
    min-height: min(12rem, 36svh);
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .module-view.is-history,
  .module-view.is-single {
    overflow-y: auto;
  }

  .side-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    min-height: auto;
    gap: var(--console-matrix-gap);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .side-block,
  .side-cutout {
    position: static;
    min-height: 0;
    display: contents;
  }


  .rail-button,
  .module-button {
    border-radius: var(--radius-md);
    justify-content: center;
    text-align: center;
  }

  .side-rail .rail-button {
    width: 100%;
    margin-left: 0;
    align-self: start;
    min-height: 2.6rem;
    max-height: 3.1rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-md);
    justify-content: center;
    text-align: center;
    box-shadow:
      inset 0 0 0 0.12rem color-mix(in srgb, var(--tone) 34%, transparent),
      0 0.35rem 0 var(--wash-black-18);
  }

  .side-rail .rail-button + .rail-button {
    margin-top: 0;
  }

  .module-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--console-matrix-gap);
    width: 100%;
    overflow: visible;
  }

  .module-rail .module-button {
    width: 100%;
    min-height: 3.35rem;
    padding: 0.62rem 0.55rem 0.4rem;
    gap: 0.2rem 0.4rem;
    border-width: 0;
    box-shadow:
      inset -0.28rem 0 0 color-mix(in srgb, var(--tone) 46%, transparent),
      inset 0 0 0 0.12rem color-mix(in srgb, var(--tone) 34%, transparent),
      0 0.35rem 0 var(--wash-black-18);
  }

  .module-button::before {
    left: 2.2rem;
    right: 0.5rem;
    top: 0.35rem;
    height: var(--module-top-line);
  }

  .module-number {
    width: 1.45rem;
    height: 1.45rem;
    font-size: 0.8rem;
  }

  .module-label {
    font-size: 0.92rem;
  }

  .module-kicker {
    display: block;
    font-size: 0.58rem;
  }

  .status-strip {
    min-height: 3.45rem;
    padding: 0.65rem 1rem;
  }

  .status-strip::before {
    display: none;
  }

  .status-strip h2 {
    font-size: clamp(1.2rem, 4vw, 1.8rem);
  }

  .module-card {
    grid-template-columns: 1fr;
    min-height: auto;
    overflow: visible;
  }

  .module-card::before {
    border-top-width: var(--segment-line-strong);
    border-left-width: var(--segment-line);
  }

  .module-card::after {
    display: none;
  }

  .segment-link {
    --segment-cap-width: 3.5rem;
    --segment-body-pad-y: 0.55rem;
    --segment-body-pad-x: 0.65rem;
    min-height: 4.65rem;
  }

  .module-buttons,
  .segment-link-list,
  .legal-grid {
    overflow: visible;
  }

  .module-stack:has(.module-card:nth-child(2)),
  .module-stack:has(.module-card:nth-child(3)) {
    grid-template-rows: none;
  }

  .module-card.is-secondary .segment-link-list {
    grid-template-columns: 1fr;
  }

  .command-footer::before,
  .command-footer::after {
    display: none !important;
  }

  /*
    Tablet/mobile footer: Zeile 1 – Site | Uhr | Impressum; Zeile 2 – Statusband.
    flex-shrink: 0, damit page-shell (overflow:hidden) die zweite Zeile nicht abschneidet.
  */
  .command-footer {
    flex: 0 0 auto;
    flex-shrink: 0;
    --footer-chip-height: 1.85rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 0.28rem 0.4rem;
    align-items: stretch;
    min-height: calc(var(--footer-chip-height) * 2 + 0.28rem);
    margin-top: var(--gap);
    padding: 0.4rem 0.65rem 0.5rem;
    font-size: 0.82rem;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--violet) 16%, transparent), transparent 68%),
      var(--surface-deep);
  }

  .command-footer .footer-chip--site,
  .command-footer .footer-chip--clock,
  .command-footer .footer-button {
    min-width: 0;
    min-height: var(--footer-chip-height);
  }

  .footer-chip--site {
    order: 1;
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    justify-self: start;
    width: auto;
    height: var(--footer-chip-height);
    padding-inline: 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--violet);
    color: var(--black);
  }

  .footer-chip--clock {
    order: 2;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.04rem;
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: var(--footer-chip-height);
    padding: 0.22rem 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--black);
    color: var(--peach);
    letter-spacing: 0.03em;
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--violet) 62%, transparent);
  }

  .footer-chip--clock .clock-date,
  .footer-chip--clock .clock-time {
    display: block;
    white-space: nowrap;
    line-height: 1.05;
    font-size: clamp(0.58rem, 2.35vw, 0.72rem);
    font-weight: 900;
  }

  .command-footer .footer-button {
    order: 3;
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    display: grid;
    place-items: center;
    width: auto;
    height: var(--footer-chip-height);
    padding-inline: 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--violet);
    color: var(--black);
  }

  .command-footer #console-status-feed.footer-status-band {
    order: 4;
    grid-column: 1 / -1;
    grid-row: 2;
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 1.55rem;
    height: var(--footer-chip-height);
    max-height: var(--footer-chip-height);
    padding-inline: 0.75rem;
    background: var(--console-frame);
  }
}