body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f3f4f6;
      color: #111827;
    }

    header {
      background: #111827;
      color: white;
      padding: 18px 22px;
    }

    h1 {
      margin: 0;
      font-size: 24px;
    }

    main {
      padding: 18px;
    }

    .nav {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .btn {
      border: 0;
      background: #2563eb;
      color: white;
      padding: 10px 14px;
      border-radius: 8px;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
    }

    .btn.green {
      background: #16a34a;
    }

    .btn.red {
      background: #dc2626;
    }

    .card {
      background: white;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.10);
      margin-bottom: 18px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(160px, 1fr));
      gap: 12px;
    }

    label {
      font-weight: bold;
      font-size: 13px;
      display: block;
      margin-bottom: 5px;
    }

    input, select, textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 9px;
      border: 1px solid #cbd5e1;
      border-radius: 7px;
      font-size: 14px;
    }

    textarea {
      min-height: 42px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      font-size: 14px;
    }

    th, td {
      border: 1px solid #e5e7eb;
      padding: 8px;
      text-align: left;
      vertical-align: top;
    }

    th {
      background: #111827;
      color: white;
    }

    .ok {
      color: #15803d;
      font-weight: bold;
    }

    .warn {
      color: #b45309;
      font-weight: bold;
    }

    .bad {
      color: #dc2626;
      font-weight: bold;
    }

    .small {
      color: #6b7280;
      font-size: 12px;
    }

    .status-box {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 999px;
      font-weight: bold;
      font-size: 12px;
    }

    .status-ok {
      background: #dcfce7;
      color: #166534;
    }

    .status-warn {
      background: #fef3c7;
      color: #92400e;
    }

    .status-bad {
      background: #fee2e2;
      color: #991b1b;
    }

    @media (max-width: 800px) {
      main {
        padding: 10px;
      }

      .grid {
        grid-template-columns: 1fr;
      }

      table {
        font-size: 12px;
      }

      th, td {
        padding: 6px;
      }
    }

/* LECH TRACK GPS - mobilná oprava hornej lišty a safe area */
html {
  scroll-padding-top: calc(72px + env(safe-area-inset-top));
}

body {
  margin: 0;
  padding-top: env(safe-area-inset-top);
  overflow-x: hidden;
}

/* horná tmavá hlavička stránky */
header,
.header,
.top-header,
.navbar,
.page-header {
  padding-top: calc(14px + env(safe-area-inset-top)) !important;
}

/* horné tlačidlá / navigácia */
nav,
.nav,
.menu,
.topnav,
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* mobil */
@media (max-width: 700px) {
  body {
    padding-top: env(safe-area-inset-top);
    font-size: 16px;
  }

  header,
  .header,
  .top-header,
  .navbar,
  .page-header {
    padding-top: calc(18px + env(safe-area-inset-top)) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    min-height: auto !important;
  }

  h1 {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }

  h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  nav,
  .nav,
  .menu,
  .topnav,
  .toolbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  nav a,
  nav button,
  .nav a,
  .nav button,
  .menu a,
  .menu button,
  .topnav a,
  .topnav button,
  .toolbar a,
  .toolbar button,
  a.btn,
  button,
  .btn {
    flex: 0 0 auto !important;
    font-size: 15px !important;
    padding: 10px 13px !important;
    border-radius: 9px !important;
    min-height: 42px !important;
  }

  .card,
  .panel,
  section,
  main > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  table {
    min-width: 900px;
  }

  .table-wrap,
  .table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.hidden{display:none!important}
.section-actions{margin-top:14px}
.message-spaced{margin-top:10px}
.table-scroll{overflow:auto}