* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    /* DESKTOP LAYOUT */

    .layout {
      display: grid;
      grid-template:
        "header header header" 60px
        "nav main filters" 1fr
        / 220px minmax(0, 1fr) 260px;
      min-height: 100dvh;
    }

    header {
      grid-area: header;
      background: #ddd;
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    nav {
      grid-area: nav;
      background: #eee;
      padding: 20px;
    }

    main {
      grid-area: main;
      padding: 20px;
      min-width: 0;
      overflow-x: auto;
    }

     /* TABLE */

  .table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 40px;
  }

  .schedule-table {
    border-collapse: collapse;
    /*min-width: 1200px;*/
    width: max-content;
  }

  .schedule-table th,
  .schedule-table td {
    border: 1px solid #ccc;
    padding: 8px;
    max-width: 80px;
    width: 80px;
    max-height: 100%;
    height: 100%;
    background: white;
  }

  /* First column */
  .schedule-table th:first-child,
  .schedule-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    max-width: 80px;
    width: 80px;
    background: white;
  }

  /* Top-left cell above the other sticky cells */
  .schedule-table thead th:first-child {
    z-index: 4;
  }

  /* Optional: keep the header visible vertically too */
  .schedule-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: white;
  }


.schedule-table .first-column-div {
  display: flex;
  flex-direction: row;
  gap: 10px
}

.schedule-table .lesson div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 5px;
}

.schedule-table .replaced {
  text-decoration: line-through;
  color: grey;
}

.schedule-table .replacing {
  color: blue;
}

.schedule-table .special {
  background: yellow;
}


    aside {
      grid-area: filters;
      background: #eee;
      padding: 20px;
    }

    .mobile-buttons {
      display: none;
    }

    .close-button {
      display: none;
    }

    .overlay {
      display: none;
    }

    /* MOBILE LAYOUT */

    @media (max-width: 768px) {

      .layout {
        display: block;
      }

      header {
        height: 60px;
      }

      .mobile-buttons {
        display: flex;
        gap: 10px;
      }

      .close-button {
        display: block;
      }

      nav,
      aside {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #eee;
        overflow-y: auto;
      }

      /* Left sidebar */

      nav {
        top: 0;
        left: 0;
        width: 280px;
        max-width: 85vw;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.25s;
      }

      nav.open {
        transform: translateX(0);
      }

      /* Bottom filter panel */

      aside {
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 85dvh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.25s;
      }

      aside.open {
        transform: translateY(0);
      }

      /* Background overlay */

      .overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 10;
      }

      .overlay.open {
        display: block;
      }
    }