@layer components {
  :root { --gutter: 72px; } /* +40px pro Seite */

  /* Page + app layout */
  body { background: #f2f2f2; }
  .app { display: flex; min-height: 100vh; }

  /* Sidebar (left, full height) */
  .sidebar{
    flex: 0 0 300px;
    height: 100vh; min-height: 100vh;
    background: #f2f2f2;
    box-shadow: 3px 0 8px rgba(0,0,0,0.12);
    padding: 40px 32px;
    display: flex; flex-direction: column; justify-content: flex-start;
    position: relative; z-index: 4;
  }
  .logo-container{ text-align: center; margin-bottom: 34px; }
  /*.logo-container img{ max-width: 180px; height: auto; }*/
  .logo-container img{ max-width: 180px; height: 123px; }
  .nav{ display: flex; flex-direction: column; gap: 20px; }
  .sidebar-footer{ margin-top: auto; }

  /* Content column (right of sidebar) */
  .content{
    flex: 1; min-width: 0;
    background: #fff;
    position: relative; z-index: 1;
    overflow-x: hidden;
  }

  /* Banner stays full width (no side gutters) */
  .banner{
    position: relative;
    width: 100%;
    height: 240px;
    margin: 0;
    background-image: url("../../images/topbar.jpg");
    background-size: cover;
    background-position: center;
  }

  /* Topbar & Main share equal full-with-minus-gutter width */
  .topbar,
  .main{
    width: calc(100% - var(--gutter) * 2) !important;
    margin-inline: var(--gutter) !important;
	margin-bottom: 20px; /* oder padding-bottom */
    max-width: none !important;
  }

  .topbar{
    border-radius: 0;
    padding: 20px 20px;              /* 20px links/rechts */
    background: var(--card-bg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    position: relative; top: -82px;  /* float over banner */
    margin-bottom: -82px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 3;
  }

  /* Topbar content alignment */
  .topbar-actions{ margin-left: auto; display: flex; align-items: center; gap: 16px;  }
  .topbar-actions .btn{ white-space: nowrap; flex: 0 0 auto; }
  .global-search{ flex: 1 1 260px; max-width: 520px; min-width: 200px; }
  .global-search .input{ width: 100%; }

  /* Topbar typography */
  .welcome p{ color: var(--muted); }
  .welcome h1{ font-size: 1.2rem; color: #006598; font-weight: 600; }

  /* Content width equals Topbar width */
  .main .card,
  .main .table{
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 24px 0;
  }

  /* Icons */
  .login-icon{ width: 24px; height: 24px; fill: #0f172a; flex-shrink: 0; }
}

@layer components {
  .sidebar-footer{ font-size: .8rem; white-space: nowrap; }
  .sidebar-footer a{ font-size: inherit; }
}
@layer components {
  .topbar{
    padding: 40px !important;
    top: -42px !important;
    margin-bottom: -42px !important;
  }
}

@layer components {
  /* keep gutters */
  :root { --gutter: 72px; }

  /* Topbar: keep wider padding and offset */
  .topbar{
    width: calc(100% - var(--gutter) * 2) !important;
    margin-inline: var(--gutter) !important;
    padding: 40px !important;
    top: -42px !important;
    margin-bottom: -42px !important;
    border-radius: 0 !important;
    display:flex; justify-content:space-between; align-items:center;
  }

  /* Content: same width as Topbar, 100px distance, no inner padding */
  .main{
    width: calc(100% - var(--gutter) * 2) !important;
    margin-inline: var(--gutter) !important;
    margin-top: 100px !important;
    box-sizing: border-box !important;
    padding-inline: 0 !important;
    background: transparent !important;
  }

  /* Remove shadows/background from generic content wrappers */
  .card, .section, .panel, .content-card, .content-box, .surface, .paper, .block, .box{
    box-shadow: none;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* Only tables have a subtle shadow */
  .table{
    background: #fff !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06) !important;
    border-radius: 0 !important;
  }

  /* Headlines left, weight 500, underline 85px */
  .main h1, .main h2, .main h3{
    text-align: left !important;
    font-weight: 500 !important;
    background: #fff;
    margin: 0;
  }
  .main h1::after, .main h2::after, .main h3::after{
    content: "";
    display: block;
    height: 2px;
    width: 85px !important;
    background: #F3C400;
    margin-top: 8px;
    margin-bottom: 24px;
  }

  /* Ausnahme: Gerät-Detail wie Tabelle behandeln */
  .page-geraet-detail .main{
    padding-inline: 20px !important;
    background: #f2f2f2 !important;
  }
}

@layer components {
  /* Yellow underline length increased by 30px */
  .main h1::after, .main h2::after, .main h3::after{
    width: 115px !important;
  }

  /* Topbar move 20px up */
  .topbar{
    top: -62px !important;
    margin-bottom: -62px !important;
  }

  /* Content headings same size as dashboard section titles */
  .main h1, .main h2, .main h3{
    font-size: 1.25rem !important;
  }

  /* Gerät-Detail: headings outside grey boxes; boxes are grey */
  .page-geraet-detail .main{ background: transparent !important; padding-inline: 20px !important; }
  .page-geraet-detail .card{ background: #f2f2f2 !important; padding: 16px !important; }
}

@layer components {
  /* Sections in device detail use same width/gutters as main (full width minus gutter) */
  .page-geraet-detail .section{ width:100% !important; margin-inline:0 !important; }
  /* Headings on white, in brand blue */
  .page-geraet-detail h2, .page-geraet-detail h3{
    color: #006598 !important;
    background: #fff !important;
  }
  /* Grey boxes underneath headings */
  .page-geraet-detail .section .card{
    padding: 30px !important;
    margin-top: 8px !important;
    background: #fff;
  }
}

@layer components {
  /* Gerät-Detail: 30px Abstand unter gelbem Strich */
  .page-geraet-detail .main h1::after,
  .page-geraet-detail .main h2::after,
  .page-geraet-detail .main h3::after{
    margin-bottom: 30px !important;
  }

  /* Graue Boxen responsiv, kein Überlaufen */
  .page-geraet-detail .card{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden; /* falls Kinder größer wären */
  }
  .page-geraet-detail .card > *{ max-width: 100%; }

  /* Grids ohne Inline-Style steuern */
  .page-geraet-detail .facts-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 24px;
    margin-bottom: 16px;
  }
  .page-geraet-detail .xml-grid{
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, auto)) !important;
    gap: 8px;
    align-content: start;
  }
}

@layer components {
  /* Headlines outside boxes with proper spacing on device-detail */
  .page-geraet-detail h2,
  .page-geraet-detail h3{
    margin-bottom: 30px !important;  /* space under yellow rule */
  }
  .page-geraet-detail h1::after,
  .page-geraet-detail h2::after,
  .page-geraet-detail h3::after{
    margin-top: 8px !important;
    margin-bottom: 0 !important;     /* spacing handled by heading margin */
  }

  /* Sections themselves remain white */
  .page-geraet-detail .section{ background: transparent !important; }

  /* Grey boxes are responsive and contain content */
  .page-geraet-detail .card{
    background: #f2f2f2 !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 20px !important;
    overflow-x: auto;                 /* keep long rows scrollable without overflow */
  }
}

@layer components {
  /* Device detail: headlines fully outside; add clear gap before grey box */
  .page-geraet-detail .section-box{
    margin-top: 40px !important;   /* Abstand unter der Headline */
    background:#f2f2f2 !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:16px 20px !important;
    overflow-x:auto;
    box-shadow:none !important;
    border:none !important;
  }
  /* Responsive facts grid: wrap on small screens */
  .page-geraet-detail #facts{
    display:grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 24px 48px !important;
  }
}


@layer components {
  .page-geraet-detail .main{
    padding-inline: 0px !important;
    box-sizing: border-box !important;
  }
  .page-geraet-detail .section-box{
    background:#ffffff !important;
    box-shadow: 0 8px 18px rgba(3, 27, 76, .12)!important;
    border:none !important;
    width:100% !important;
    box-sizing:border-box !important;
    margin-top:16px !important;
    overflow-x:auto;
  }
  
}

@layer components { .section-rule{ height:2px; width:85px; background:#F3C400; margin:8px 0 16px 0; } }

/* small space and size for sort indicators */
th .sort-indicator{margin-left:5px;font-size:11px;opacity:.75}
th[aria-sort="asc"] .sort-indicator, th[aria-sort="desc"] .sort-indicator{opacity:1}

/* --- bulk action header (dashboard due devices) --- */
.section-header{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.section-header .btn[disabled]{opacity:.5;cursor:not-allowed;}


/* --- Page-specific header alignment for Gerätedetails --- */
.page-geraet-detail .section-header{
  align-items: baseline;
}
.page-geraet-detail .section-header h2{
  margin-bottom: 0;
}

/* === Bulk Modal === */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;display:flex;align-items:center;justify-content:center}
.modal__dialog{background:#fff;max-width:880px;width:92%;border-radius:4px;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.modal__head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #eef1f4}
.modal__content{padding:20px 24px}
.modal__actions{padding:16px 24px;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid #eef1f4}
.modal__close{background:transparent;border:0;font-size:22px;line-height:1;cursor:pointer}
.bulk-list{max-height:360px;overflow:auto;border:1px solid #eef1f4;border-radius:4px;padding:12px}
.bulk-list table{width:100%;border-collapse:collapse;font-size:.95rem}
.bulk-list th,.bulk-list td{padding:8px 10px;border-bottom:1px solid #f1f4f7;text-align:left}
.kv-group label{margin-right:18px}

/* v65: Cursor-Feedback für alle Buttons */
.btn, .btn:hover, .btn:focus { cursor: pointer; }
.btn { margin-right: 15px; }
.modal__close { cursor: pointer; }
/* Deaktivierte Zustände */
.btn[disabled], .btn.is-disabled { cursor: not-allowed; }
.js-bulk-btn[disabled] { cursor: not-allowed; }

/* v69 sticky sidebar */
.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* v70: dummy search in topbar */
.topbar__actions{ display:flex; align-items:center; gap:16px; }
.topbar-search{
  flex: 0 1 clamp(160px, 22vw, 280px);
  height: 36px;
  padding: 6px 10px;
  background: #fff;
  border: none;
  border-left: 1px solid #6ea7c4;   /* project blue */
  border-bottom: 1px solid #6ea7c4;
  outline: none;
}
.topbar-search:hover,
.topbar-search:focus{
  border-left-color: #F3C400;        /* yellow focus like forms */
  border-bottom-color: #F3C400;
}

/* v71: topbar search */
.topbar__actions, .topbar-actions{ display:flex; align-items:center; gap:16px; }
.topbar-search{
  flex:0 1 clamp(160px, 22vw, 280px);
  height:36px;
  padding:6px 10px;
  background:#fff;
  border:none;
  border-left:1px solid #6ea7c4;
  border-bottom:1px solid #6ea7c4;
  outline: none;
}
.topbar-search:hover, .topbar-search:focus{
  border-left-color:#F3C400;
  border-bottom-color:#F3C400;
}



/* v73: Language Switcher */
@layer components {
  .lang-switcher{ position: relative; display: inline-block; }
  .lang-switcher__button,
  .lang-switcher__option{
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 16px; padding: 0; background: transparent; border: 0; cursor: pointer;
  }
  .lang-switcher__button:focus-visible,
  .lang-switcher__option:focus-visible{ outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; border-radius: 2px; }
  .lang-switcher__menu{
    position: absolute; right: 0; top: calc(100% + 6px);
    display: none; margin: 0; padding: 4px; list-style: none;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border-radius: 6px; z-index: 20;
  }
  .lang-switcher.is-open .lang-switcher__menu{ display: block; }
  .lang-switcher .flag{ display: block; width: 24px; height: 16px; }
}


/* v90: Banner toolbar (logo left, legal links right) */
.banner{ position: relative; }
.banner-toolbar{
  position: absolute; top: 10px;
  left: var(--gutter); right: var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  z-index: 4;
  color: #fff;
  pointer-events: auto;
}
.banner-toolbar .site-logo img{ height:auto; max-height:36px; width:auto; display:block; }
.banner-toolbar .legal-links{ display: flex; gap: 20px; align-items: center; }
.banner-toolbar .legal-links a{
  color: #fff; text-decoration: none; font-weight: 500; opacity: .9;
}
.banner-toolbar .legal-links a:hover{ text-decoration: underline; opacity: 1; }