/*
 * Datei: assets/styles/layout.css
 * Zweck: Globale Shell- und Layoutbasis.
 * Domäne: App-Rahmen, Arbeitsfläche, Section-Abstände und Search-Dock-Geometrie.
 * Status: führend
 * Darf definieren: Shell-/Layoutverträge und räumliche Grundstruktur.
 * Darf nicht definieren: Komponenten-Grundstile oder Bereichsfachlogik.
 */

/* AP-29D-REV2 | 2026-05-01 | Zweck: Ownership-Lock bestätigt; neue oder geänderte Grundkomponenten nur in der führenden Domänendatei. | Owner: assets/styles/layout.css */
/* Header ownership cleaned on 2026-04-13: app-header.css is the sole active header authority. */
html,body{
  min-height:100dvh;
}
.app,.wrap{
  width:100%;
  max-width:none;
  margin:0;
  overflow-x:hidden;
}
.app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.section{
  padding:var(--section-pad);
  width:100%;
  min-width:0;
}

.grid2{
  display:grid;
  gap:12px;
  width:100%;
  grid-template-columns:1fr;
}
@media (min-width:860px){
  .grid2{
    grid-template-columns:1fr 1.2fr;
  }
}
.top{
  padding:16px 12px;
  display:grid;
  gap:12px;
}
.grid{
  display:grid;
  gap:12px;
}
@media (min-width:860px){
  .grid{
    grid-template-columns:1fr 1fr;
  }
}
.admin-shell{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}
.admin-login-shell{
  min-height:calc(100dvh - 86px);
  display:grid;
  place-items:center;
  padding:12px;
}
.bottom-search-dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:var(--search-dock-z, 60);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(13,16,21,0), rgba(13,16,21,.82) 28%, rgba(13,16,21,.96));
  backdrop-filter:blur(18px);
}
@media (min-width:861px){
  .bottom-search-dock{
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:min(760px, calc(100% - 24px));
    bottom:12px;
    border-radius:22px;
  }
}


/* AP-29D-REV3 | 2026-05-01 | Zweck: Mitarbeiter-Desktop-Arbeitsfläche berücksichtigt kompakte rechte Rail und zentriert die fixe Suche zur freien Arbeitsfläche. | Owner: assets/styles/layout.css */
@media (min-width: 961px) {
  body[data-area="employee"] .app {
    width: calc(100% - var(--employee-rail-desktop-width, 6.25rem));
    margin-right: var(--employee-rail-desktop-width, 6.25rem);
    margin-left: 0;
    max-width: none;
  }

  body[data-area="employee"] .content-section {
    padding-top: calc(var(--app-header-safe, 0px) + var(--app-header-h, 76px) + 6.35rem);
    padding-right: var(--zm-content-padding);
    padding-bottom: var(--employee-detail-bottom-space, 2rem);
    padding-left: var(--zm-content-padding);
  }

  body[data-area="employee"] .bottom-search-dock {
    position: fixed;
    top: calc(var(--app-header-safe, 0px) + var(--app-header-h, 76px) + var(--m3-space-4, 1rem));
    right: auto;
    bottom: auto;
    left: calc((100vw - var(--employee-rail-desktop-width, 6.25rem)) / 2);
    width: min(var(--zm-search-width-desktop), calc(100vw - var(--employee-rail-desktop-width, 6.25rem) - (2 * var(--zm-content-padding))));
    padding: 0;
    transform: translateX(-50%);
    border-radius: var(--m3-radius-xl, 2rem);
    background: transparent;
    backdrop-filter: none;
    z-index: 130;
  }

  body[data-area="employee"] .search-results {
    top: calc(var(--app-header-safe, 0px) + var(--app-header-h, 76px) + 5.35rem);
    right: calc(var(--employee-rail-desktop-width, 6.25rem) + var(--zm-content-padding));
    bottom: auto;
    left: max(var(--zm-content-padding), calc(((100vw - var(--employee-rail-desktop-width, 6.25rem)) - min(var(--zm-search-width-desktop), calc(100vw - var(--employee-rail-desktop-width, 6.25rem) - (2 * var(--zm-content-padding))))) / 2));
    max-height: min(48dvh, 36rem);
  }
}


/* AP-29D-FINAL | 2026-05-03 | Zweck: Admin- und Mitarbeiterarbeitsfläche berücksichtigen dieselbe 96px-Rechtsrail ohne zweite Navigation. | Owner: assets/styles/layout.css */
@media (min-width: 961px) {
  body[data-area="admin"] .admin-shell,
  body[data-area="admin"] .admin27-shell {
    width: calc(100% - var(--zm-rail-width));
    max-width: none;
    margin-left: 0;
    margin-right: var(--zm-rail-width);
  }
}

/* AP-29D-FINAL | 2026-05-03 | Zweck: admin27-Shell, Raster und responsive Arbeitsflächen zentral in der Layoutdatei. | Owner: assets/styles/layout.css */
body.admin-body{overflow-x:hidden;}
body.admin-body .brand-row{grid-template-columns:minmax(0,1fr) auto !important;}
body.admin-body .header-actions{gap:var(--m3-space-2,.5rem) !important;}
.admin-shell.admin27-shell{
  width:100%;
  max-width:none;
  margin:0;
  padding-top:calc(var(--app-header-safe,0px) + var(--app-header-h,76px)) !important;
  padding-left:var(--zm-content-padding);
  padding-right:calc(var(--zm-rail-width) + var(--zm-content-padding));
  padding-bottom:var(--m3-space-8,2rem);
  min-height:100vh;
}
.admin27-page{
  width:min(var(--admin27-page-width),100%);
  max-width:var(--admin27-page-width);
  margin-inline:auto;
  padding:var(--m3-space-6,1.5rem) 0 var(--m3-space-8,2rem);
}
.admin27-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,24rem);gap:var(--m3-space-5,1.25rem);align-items:start;}
.admin27-workarea{display:grid;gap:var(--m3-space-5,1.25rem);min-width:0;}
.admin27-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--m3-space-4,1rem);}
.admin27-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.admin27-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:1120px){.admin27-grid,.admin27-grid--3,.admin27-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}.admin27-layout{grid-template-columns:1fr;}.admin27-context{position:static;}.admin27-list-row{grid-template-columns:1fr;}}
@media(max-width:960px){
  .admin-shell.admin27-shell{padding-left:var(--m3-space-3,.75rem);padding-right:var(--m3-space-3,.75rem);padding-bottom:var(--m3-space-6,1.5rem) !important;}
  .admin27-page{width:100%;padding:var(--m3-space-4,1rem) 0 var(--m3-space-8,2rem);}
  .admin27-grid,.admin27-grid--3,.admin27-grid--4{grid-template-columns:1fr;}
  .admin27-list-row{grid-template-columns:1fr;align-items:start;}.admin27-row-actions{justify-content:flex-start;}
}
@media(max-width:640px){.admin27-row{grid-template-columns:1fr;}.admin27-actions .admin27-action{width:100%;}.admin27-hero h1{font-size:clamp(1.8rem,10vw,2.4rem);}}

/* AP-29D-FINAL-FIX | 2026-05-03 | Zweck: Mitarbeiter-Suche auf Desktop wieder unten fixiert und zur freien Arbeitsfläche zentriert. | Owner: assets/styles/layout.css */
@media (min-width: 961px) {
  body[data-area="employee"] .content-section {
    padding-top: calc(var(--app-header-safe, 0px) + var(--app-header-h, 76px) + var(--m3-space-4, 1rem));
    padding-bottom: calc(var(--employee-detail-bottom-space, 2rem) + 5.5rem);
  }
  body[data-area="employee"] .bottom-search-dock {
    top: auto;
    bottom: var(--zm-search-bottom-desktop);
    left: calc((100vw - var(--zm-rail-width)) / 2);
    width: min(var(--zm-search-width-desktop), calc(100vw - var(--zm-rail-width) - (2 * var(--zm-content-padding))));
    padding: 0;
    transform: translateX(-50%);
    border-radius: var(--m3-radius-xl, 2rem);
    background: transparent;
    backdrop-filter: none;
  }
  body[data-area="employee"] .search-results {
    top: auto;
    bottom: 5.85rem;
    right: calc(var(--zm-rail-width) + var(--zm-content-padding));
    max-height: min(48dvh, 36rem);
  }
}


/* AP-29D-REV8 | 2026-05-03 | Zweck: gemeinsame Shell-Pflichtklassen und 96px-Rechtsrail-Vertrag für Mitarbeiter und Admin; vorhandene Laufzeitklassen werden auf die zentrale Shell abgebildet. | Owner: assets/styles/layout.css */
.zm-shell,
body[data-area] .app,
body[data-area="admin"] .admin-shell {
  min-width: 0;
}
.zm-shell__content,
body[data-area="employee"] .app,
body[data-area="admin"] .admin-shell,
body[data-area="admin"] .admin27-shell {
  min-width: 0;
}
@media (min-width: 961px) {
  body[data-area] .app,
  body[data-area="admin"] .admin-shell,
  body[data-area="admin"] .admin27-shell,
  .zm-shell__content {
    padding-right: calc(var(--zm-rail-width) + var(--zm-content-padding));
  }
  body[data-area="employee"] .app {
    width: calc(100% - var(--zm-rail-width));
    margin-right: var(--zm-rail-width);
    padding-right: 0;
  }
  body[data-area="admin"] .admin-shell,
  body[data-area="admin"] .admin27-shell {
    width: calc(100% - var(--zm-rail-width));
    margin-right: var(--zm-rail-width);
    padding-right: var(--zm-content-padding) !important;
  }
  .zm-menu-toggle,
  body[data-area] .menu-btn {
    display: none !important;
  }
}
@media (max-width: 960px) {
  .zm-shell__content,
  body[data-area] .app,
  body[data-area="admin"] .admin-shell,
  body[data-area="admin"] .admin27-shell {
    width: 100%;
    margin: 0;
    padding-right: var(--zm-content-padding);
    padding-left: var(--zm-content-padding);
  }
  .zm-back-button {
    justify-self: start;
  }
}

/* AP-29D-REV8 | 2026-05-03 | Zweck: REV8-Shellvertrag für eine rechte 96px-Rail, arbeitsflächenzentrierte Suche und mobile Overlay-Logik; Owner: assets/styles/layout.css */
.zm-shell,
.app,
.admin-shell {
  min-height: 100dvh;
}

.zm-shell__content,
.content-section,
.admin27-page {
  min-width: 0;
}

@media (min-width: 961px) {
  body[data-area="employee"] .app,
  body[data-area="admin"] .admin-shell,
  body[data-area="admin"] .admin27-shell {
    width: calc(100vw - var(--zm-rail-width));
    margin-left: 0;
    margin-right: var(--zm-rail-width);
  }

  body[data-area="employee"] .content-section {
    padding: calc(var(--app-header-safe, 0px) + var(--app-header-h, 76px) + var(--zm-content-padding)) var(--zm-content-padding) calc(var(--zm-search-height) + var(--zm-search-bottom-desktop) + var(--zm-content-padding));
  }

  body[data-area="employee"] .bottom-search-dock,
  body[data-area="employee"] .zm-search-dock {
    top: auto;
    bottom: var(--zm-search-bottom-desktop);
    left: calc((100vw - var(--zm-rail-width)) / 2);
    width: min(var(--zm-search-width-desktop), calc(100vw - var(--zm-rail-width) - (2 * var(--zm-content-padding))));
    height: var(--zm-search-height);
    padding: 0;
    transform: translateX(-50%);
    border-radius: calc(var(--zm-search-height) / 2);
    background: transparent;
    backdrop-filter: none;
  }

  body[data-area="employee"] .search-results {
    top: auto;
    bottom: calc(var(--zm-search-height) + var(--zm-search-bottom-desktop) + 12px);
    left: max(var(--zm-content-padding), calc(((100vw - var(--zm-rail-width)) - var(--zm-search-width-desktop)) / 2));
    right: calc(var(--zm-rail-width) + var(--zm-content-padding));
  }

  .zm-menu-toggle,
  .menu-btn {
    display: none !important;
  }
}

@media (max-width: 960px) {
  body[data-area] .app,
  body[data-area] .admin-shell,
  body[data-area] .admin27-shell {
    width: 100%;
    margin-right: 0;
  }

  body[data-area="employee"] .bottom-search-dock,
  body[data-area="employee"] .zm-search-dock {
    bottom: var(--zm-search-bottom-mobile);
    height: var(--zm-search-height);
  }

  .zm-menu-toggle,
  .menu-btn {
    position: relative;
    z-index: calc(var(--rail-z, 260) + 20);
  }

  .zm-back-button,
  .header-action[href] {
    justify-self: start;
  }
}