@layer components{
  /* Base gutter scale down on smaller screens */
  @media (max-width: 1100px){
    :root{ --gutter: 40px; }
  }
  @media (max-width: 900px){
  .topbar{ padding: 20px !important; }

  /* v77: kill vertical white space in topbar on mobile */
  .topbar{ justify-content: flex-start !important; height: auto !important; }
  .topbar > *{ flex: 0 0 auto !important; }
    :root{ --gutter: 16px; }
  }

  /* Mobile app flow */
  @media (max-width: 900px){
    .app{ display: block; }
    .sidebar{ display: none !important; }
    .content{ width: 100% !important; }
    .banner{ height: 160px !important; }

    .topbar{
      display: flex; flex-direction: column; align-items: stretch;
      gap: 12px; padding: 16px; top: -70px; margin-bottom: -70px;
    }
    .topbar .welcome{ margin: 0; }
    .topbar .welcome h1{ font-size: 1.2rem; line-height: 1.2; margin: 2px 0 0 0; }
    .topbar .welcome p{ margin: 0; font-size: .9rem; color: var(--muted, #64748b); }

    .topbar-actions{
      display: grid; grid-template-columns: 1fr auto; grid-auto-rows: min-content;
      align-items: center; gap: 12px;
    }
    .topbar-actions .topbar-search{ width: 100%; min-width: 0; }
    .topbar-actions .btn{ justify-self: start; }
    .topbar-actions .login-icon{ justify-self: end; }
    .topbar-actions .lang-switcher{ justify-self: end; }

    /* Mobile nav appears below Topbar */
    nav.mobile-nav{
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
      width: calc(100% - var(--gutter) * 2);
      margin: 16px var(--gutter) 0; padding-bottom: 8px;
    }
    nav.mobile-nav a.btn{ width: 100%; text-align: center; }
  }

  @media (min-width: 901px){
    nav.mobile-nav{ display: none !important; }
  }

  /* Responsive tables */
  @media (max-width: 1024px){
    .table-scroll{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll > table{ min-width: 720px; }
  }

  /* Stacked card table for small screens */
  @media (max-width: 768px){
    .table-scroll{ overflow: visible; } /* not needed when stacked */
    table.responsive{ width: 100%; }
    table.responsive.stacked,
    .table.responsive.stacked,
    .data-table.responsive.stacked{
      border: 0; background: transparent; box-shadow: none;
    }
    .responsive.stacked thead{ position: absolute; width: 1px; height:1px; overflow:hidden; clip: rect(0 0 1px 1px); white-space: nowrap; }
    .responsive.stacked tr{
      display: block;
      background: var(--card-bg, #fff);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      margin-bottom: 12px;
      padding: 8px 12px;
    }
    .responsive.stacked td,
    .responsive.stacked th{
      display: grid;
      grid-template-columns: 42% 58%;
      gap: 10px;
      align-items: center;
      border: 0 !important;
      padding: 10px 10px !important;
      min-height: 40px;
    }
    .responsive.stacked td::before{
      content: attr(data-label);
      font-weight: 600;
      color: var(--muted, #64748b);
    }
    .responsive.stacked td:last-child{ padding-bottom: 12px; }
    .responsive.stacked .actions,
    .responsive.stacked .btn{ width: 100%; justify-content: center; }
  }
}

/* v76: prevent topbar overflow on mid-width desktops */
@media (max-width: 1500px){
  .topbar{ flex-wrap: wrap; gap: 12px 24px; }
  .topbar .welcome{ flex: 1 1 420px; min-width: 280px; }
  .topbar-actions{
    flex: 1 1 680px;
    min-width: 260px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
  }
  .topbar-actions .topbar-search{
    flex: 1 1 360px;
    min-width: 240px;
    max-width: 520px;
  }
  .topbar-actions .btn{ flex: 0 0 auto; }
  .topbar-actions .login-icon,
  .topbar-actions .lang-switcher{ margin-left: auto; }
}

/* v76: tiny fallback if it still gets tight */
@media (max-width: 1200px){
  .topbar-actions .topbar-search{ flex-basis: 100%; order: -1; }
}


/* v82: global table scroll container to prevent overflow on all viewports */
@layer components{
  .table-scroll{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll > table{ width: 100%; min-width: 960px; box-sizing: border-box; }
}


/* v82: mobile stacked tables take full width and do not scroll */
@media (max-width: 768px){
  .table-scroll{ overflow: visible; }
  .responsive.stacked td, .responsive.stacked th{ word-break: break-word; }
  /* equal gutters for stacked table as cards */
  /* v87: removed inner margins on stacked tables */
}
/* v82: non-mobile always allow horizontal scroll when needed */
@media (min-width: 769px){
  .table-scroll{ overflow-x: auto; }
  .table-scroll > table{ min-width: 960px; }
}


/* v83: restore full shadow around tables while preserving overflow */

/* Desktop and tablets: table wrapper acts as the "card" */
@media (min-width: 769px){
  .table-scroll{
    background: var(--card-bg, #fff);
    border-radius: 0px;
    box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,.05));
    border: 1px solid rgba(0,0,0,.06);
    overflow: hidden;        /* clip rounded corners */
    overflow-x: auto;        /* keep horizontal scroll when needed */
  }
  .table-scroll > table{
    background: transparent; /* avoid double white */
    border-radius: 0;        /* wrapper has the radius */
    min-width: 960px;
  }
}

/* Mobile: stacked cards keep their own shadows; wrapper reset */
@media (max-width: 768px){
  .table-scroll{
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
}


/* v84: (1) Border radius = 0 überall (2) Mobile alignment + full visibility */

/* Desktop/Tablets: wrapper is squared with full shadow and scroll */
@media (min-width: 769px){
  .table-scroll{
    box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,.05));
    overflow: hidden;        /* clip header/footer borders */
    overflow-x: auto;
  }
  .table-scroll > table{
    border-radius: 0 !important;
  }
}

/* Mobile: stacked cards aligned to main gutter and squared corners */
@media (max-width: 768px){
  /* align with headings */
  /* v85: moved gutters to .table-scroll on mobile */

  /* kill inherited min-width from desktop rules */
  .table-scroll > table.responsive.stacked{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Card look: squared and unclipped, keep shadow from existing rules */
  .responsive.stacked tr{
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* ensure labels + values wrap and stay readable */
  .responsive.stacked td,
  .responsive.stacked th{
    align-items: start;
    word-break: break-word;
  }
}


/* v85: Mobile stacked tables align to main gutter via wrapper */
@media (max-width: 768px){
  .table-scroll{ width:100% !important; margin:0 !important; box-sizing:border-box; overflow:visible; }
  table.responsive.stacked{ width: 100% !important; min-width: 0 !important; }
  .responsive.stacked tr{ margin-left: 0; margin-right: 0; }
}


/* v85: ensure no clipping inside stacked cards */
@media (max-width: 768px){
  .responsive.stacked tr{ overflow: visible !important; }
  .responsive.stacked td, .responsive.stacked th{ overflow: visible; }
}


/* v88: Left-align 'Status' row in stacked cards and ensure no extra offsets */
@media (max-width: 768px){
  .responsive.stacked .status{ text-align: left !important; justify-content: flex-start; }
}

/* v90: responsive sizing for banner toolbar */
@media (max-width: 900px){
  .banner-toolbar .site-logo img{ height: 28px; }
  .banner-toolbar .legal-links{ gap: 12px; font-size: 12px; }
}

/* v91: Banner-Toolbar nur mobil sichtbar */
@media (min-width: 901px){
  .banner-toolbar{ display: none !important; }
}
@media (max-width: 900px){
  .banner-toolbar{ display: flex !important; }
}


/* v92: bigger logo on mobile and separators between legal links */
@media (max-width: 900px){
  .banner-toolbar{ display:flex !important; align-items:center !important; }
  .banner-toolbar .site-logo img{ height: 68px !important; } /* +40px from previous 28px */
  .banner-toolbar .legal-links{ display:flex; align-items:center; gap:0; }
  .banner-toolbar .legal-links a{ display:inline-block; padding: 0 8px; }
  .banner-toolbar .legal-links a + a::before{
    content: "|";
    opacity:.7;
    margin-right:8px;
  }
}


/* v94: blue logo + dark legal links on mobile */
@media (max-width: 900px){
  .banner-toolbar .legal-links a{ color: #111827 !important; opacity: 1 !important; }
}
@media (min-width: 901px){
  .banner-toolbar{ display: none !important; }
}


/* v97: prevent logo distortion on mobile and set max-height */
@media (max-width: 900px){
  .banner-toolbar .site-logo img{
    height: auto !important;
    width: auto !important;
    max-height: 68px !important;
  }
  .banner-toolbar .legal-links{ align-items: center; }
}


/* v99: keep account + language icons together on mobile */
@media (max-width: 900px){
  .topbar-actions{ justify-content: flex-start; gap: 8px 12px; }
  .topbar-actions .login-icon,
  .topbar-actions .lang-switcher{
    margin-left: 0 !important;
  }
}



/* v101: remove auto push of whole actions block on ≤1200px */
@media (max-width: 1200px){
  .topbar-actions{ margin-left: 0 !important; justify-content:flex-start; }
}