/* DESKTOP TIMETABLE (Graph View) */
  .timetable {
      display: grid;
      grid-template-columns: 80px repeat(7, 1fr);
      /* Time + halls */
      border: 1px solid #ccc;
      position: relative;
  }

  /* Hall headers */
  .hall-header {
      font-weight: bold;
      text-align: center;
      padding: 10px;
      background: #f3f3f3;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc;
  }

  /* Time column */
  .time-col {
      border-right: 1px solid #ccc;
  }

  .time-label {
      border-bottom: 1px solid #ddd;
      font-size: 12px;
      text-align: right;
      padding-right: 5px;
      height: 60px;
      /* 1 hour = 60px */
  }

  /* Hall columns */
  .hall {
      border-left: 1px solid #ddd;
      position: relative;
  }

  /* Session blocks */
  .session {
      position: absolute;
      left: 5px;
      right: 5px;
      color: #fff;
      padding: 5px;
      font-size: 11px;
      cursor: pointer;
      overflow: hidden;
      /* border-radius: 5px; */
      transition: all 0.2s ease;
  }

  /* Hover time shown inside box (desktop only) */
  @media (min-width: 769px) {
      .session::after {
          content: attr(data-time);
          display: none;
          position: absolute;
          bottom: 5px;
          right: 5px;
          background: rgba(0, 0, 0, 0.75);
          color: #fff;
          font-size: 11px;
          padding: 2px 6px;
          border-radius: 4px;
      }

      .session:hover {
          transform: scale(1.05);
          z-index: 10;
      }

      .session:hover::after {
          display: block;
      }
  }

  /* Colors */
  .plenary {
      background: #004080;
  }

  .pfo {
      background: #1f77b4;
  }

  .mitral {
      background: #2ca02c;
  }

  .vascular {
      background: #ffbf00;
      color: #000;
  }

  .live {
      background: #b22222;
  }

  .ai {
      background: #6a0dad;
  }
  .presidential{
      background: #ce128c;
  }

  .lunchbrack{
    background: #8dc63e;
      color: #000;
  }

  .nursing1{
    background: #91268f;
  }

  /* MOBILE AGENDA (Hall wise boxes) */
  .mobile-agenda {
      display: none;
  }

  @media (max-width: 768px) {
      .timetable {
          display: none;
          /* hide graph */
      }

      .mobile-agenda {
          display: block;
      }

      .hall-box {
          border: 1px solid #ccc;
          border-radius: 8px;
          margin-bottom: 20px;
          padding: 10px;
          background: #f9f9f9;
      }

      .hall-title {
          font-weight: bold;
          font-size: 16px;
          margin-bottom: 10px;
          text-align: center;
          background: #eee;
          padding: 6px;
          border-radius: 5px;
      }

      .topic {
          margin: 6px 0;
          padding: 8px;
          border-radius: 5px;
          color: #fff;
          font-size: 14px;
          cursor: pointer;
      }

      .topic .time {
          display: block;
          font-size: 12px;
          font-weight: bold;
          margin-bottom: 4px;
          opacity: 0.9;
      }
      
      .session {
          font-size: 7px !important;
      }
  }



  @media (max-width: 768px) {
      .timetable {
          display: grid;
          grid-template-columns: 80px repeat(7, minmax(200px, 1fr));
          /* Time column + halls */
          overflow-x: scroll;
          /* always show horizontal scrollbar */
          overflow-y: hidden;
          /* no vertical scroll inside grid */
          max-width: 100vw;
          white-space: nowrap;
      }

      .hall {
          min-width: 200px;
          /* hall columns stay wide */
      }

      .mobile-agenda {
          display: none !important;
      }

      /* Optional: make scrollbar visible & styled */
      .timetable::-webkit-scrollbar {
          height: 10px;
          /* scrollbar thickness */
      }

      .timetable::-webkit-scrollbar-thumb {
          background: #00b2ea;
          border-radius: 5px;
      }

      .timetable::-webkit-scrollbar-thumb:hover {
          background: #00b2ea;
      }
  }