/* Schedule page styles - generated content styling */

/* Ensure consistent box sizing */
.schedule, .schedule * {
  box-sizing: border-box;
}

/* Navigation styling */
#topnavbar {
  margin: 0;
}
#topnavbar ul {
  list-style: none;
  padding: 8px;
  margin: 0;
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}
#topnavbar ul li {
  display: inline;
}
#topnavbar ul li a {
  display: inline-block;
  padding: 5px;
  background-color: #CC5500;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.2s;
}
#topnavbar ul li a:hover {
  background-color: #a34400;
}

/* Schedule table */
.schedule {
  display: inline-table;
  border-collapse: separate;
  border-spacing: 0 8px;
  table-layout: auto;
  width: fit-content;
}
.schedule th {
  background: #CC5500;
  color: white;
  padding: 10px;
}
.schedule th:first-child {
  border-radius: 8px 0 0 8px;
}
.schedule th:last-child {
  border-radius: 0 8px 8px 0;
}
.schedule thead {
  display: none;
}
.schedule tbody {
  display: block;
}
.schedule td {
  vertical-align: top;
  padding: 12px;
}
.schedule td:first-child {
  border-radius: 8px 0 0 8px;
  border-right: 1px solid #ccc;
}
.schedule td:last-child {
  border-radius: 0 8px 8px 0;
}
.schedule tr {
  display: flex;
  width: fit-content;
  margin-bottom: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* Row background colors by lecture type */
.schedule tr.lecture { background: white; }
.schedule tr.lecture.alt { background: #f5f5f5; }
.schedule tr.noclass { background: #1fc600; }
.schedule tr.info { background: #fffde7; }
.schedule tr.exam { background: #fff9c4; }

.topic {
  font-weight: 600;
  font-size: 1.1em;
  border-bottom: 1px solid #ccc;
  margin-bottom: 12px;
}

/* Assignment grid and cards */
.assignments-grid {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  width: fit-content;
  align-items: flex-start;
  align-content: flex-start;
}
.assignment-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
  min-width: 160px;
  max-width: 100%;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
  box-sizing: border-box;
}
.assignment-card:hover {
  background-color: rgba(0,0,0,0.05);
}
.assignment-card img {
  width: 160px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  background-color: #eee;
}

/* Screenshot thumbnails */
.screenshot-text-thumbnail {
  position: relative;
  width: 160px;
  height: 90px;
  border-radius: 4px;
  overflow: hidden;
}
.screenshot-text-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Icon next to text - base styles */
.assignment-card span {
  margin-top: 6px;
  font-size: 16px;
  text-align: left;
  line-height: 1.4;
  display: block;
  width: 100%;
}
.assignment-card span::before {
  float: left;
  margin-right: 5px;
  margin-top: 2px;
}

/* Icon definitions - base styles for all icons */
.video-card span::before,
.kotlin-card span::before,
.android-card span::before,
.firebase-card span::before,
.maps-card span::before,
.github-card span::before,
.wikipedia-card span::before,
.medium-card span::before,
.sqlite-card span::before,
.proandroiddev-card span::before,
.microsoft-card span::before,
.lecture-pdf-card span::before,
.geeksforgeeks-card span::before {
  content: "";
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.video-card span::before {
  width: 20px;
  height: 20px;
  background-image: url("img/texas-svgrepo-com.svg");
}
.kotlin-card span::before { background-image: url("img/kotlin-svgrepo-com.svg"); }
.android-card span::before { background-image: url("img/android-robot.svg"); }
.firebase-card span::before { background-image: url("img/firebase-icon.svg"); }
.maps-card span::before { background-image: url("img/google-maps-icon.svg"); }
.github-card span::before { background-image: url("img/github-icon.svg"); }
.wikipedia-card span::before { background-image: url("img/wikipedia-icon.svg"); }
.medium-card span::before { background-image: url("img/medium-icon-svgrepo-com.svg"); }
.sqlite-card span::before { background-image: url("img/sqlite-icon.svg"); }
.proandroiddev-card span::before { background-image: url("img/proandroiddev.png"); }
.microsoft-card span::before { background-image: url("img/microsoft_logo.svg"); }
.lecture-pdf-card span::before { background-image: url("img/slide-deck1.svg"); }
.geeksforgeeks-card span::before { background-image: url("img/geeksforgeeks-svgrepo-com.svg"); }

/* Icon placeholders - fallback when screenshot fails */
.icon-placeholder {
  width: 160px;
  height: 90px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.icon-placeholder.link { background: #e3f2fd; }
.icon-placeholder.link::before { content: "🔗"; }
.icon-placeholder.pdf { background: #ffebee; }
.icon-placeholder.pdf::before { content: "📄"; }
.icon-placeholder.doc { background: #e8f5e9; }
.icon-placeholder.doc::before { content: "📝"; }
.icon-placeholder.github { background: #24292e; color: white; }
.icon-placeholder.github::before { content: "⌥"; font-size: 48px; }
.icon-placeholder.video { background: #fff3e0; }
.icon-placeholder.video::before { content: "🎬"; }
.icon-placeholder.android { background: #3ddc84; }
.icon-placeholder.android::before { content: "🤖"; }
.icon-placeholder.firebase { background: #ffca28; }
.icon-placeholder.firebase::before { content: "🔥"; }
.icon-placeholder.kotlin { background: #7F52FF; color: white; font-size: 48px; font-weight: bold; }
.icon-placeholder.kotlin::before { content: "K"; }
.icon-placeholder.article { background: #1a1a1a; }
.icon-placeholder.article::before { content: "📰"; }

/* Text thumbnails for local lecture files */
.text-thumbnail {
  width: 160px;
  height: 90px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}
.text-thumbnail span {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-thumbnail.lecture-pdf { background: linear-gradient(135deg, #c62828 0%, #8e0000 100%); color: white; }
.text-thumbnail.lecture-slides { background: linear-gradient(135deg, #e65100 0%, #bf360c 100%); color: white; }
.text-thumbnail.lecture-lecture { background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%); color: white; }

/* Assignment text boxes (plain text, no link) */
.assignment-text {
  width: 160px;
  height: 90px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 8px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #78909c 0%, #546e7a 100%);
  color: white;
}
.assignment-text span {
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* View toggle button */
#view-toggle {
  cursor: pointer;
  user-select: none;
  background-color: #2563eb !important;
}
#view-toggle:hover {
  background-color: #1d4ed8 !important;
}

/* Compact list styles - shared by ListView and mobile */
.compact-list .schedule tr {
  display: block;
  width: fit-content;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  padding: 12px;
  overflow: hidden;
  border-radius: 8px;
}
.compact-list .schedule tbody,
.compact-list .schedule td {
  display: block;
  width: fit-content;
}
.compact-list .schedule td:first-child {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
}
.compact-list .schedule td:empty {
  display: none;
}
.compact-list .topic,
body.list-view .topic {
  font-size: 1em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ccc;
}
.compact-list .assignments-grid,
body.list-view .assignments-grid {
  flex-direction: column;
  gap: 8px;
}
.compact-list .assignment-card,
body.list-view .assignment-card {
  flex-direction: row;
  width: fit-content;
  padding: 6px;
  align-items: center;
  justify-content: flex-start;
  color: #333;
}
.compact-list .assignment-card .screenshot-text-thumbnail,
.compact-list .assignment-card img,
.compact-list .icon-placeholder,
.compact-list .text-thumbnail,
body.list-view .assignment-card .screenshot-text-thumbnail,
body.list-view .assignment-card img,
body.list-view .icon-placeholder,
body.list-view .text-thumbnail {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.compact-list .assignment-card span,
body.list-view .assignment-card span {
  margin-top: 0;
  font-size: 15px;
  color: #333;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}
.compact-list .assignment-card span::before,
body.list-view .assignment-card span::before {
  width: 14px !important;
  height: 14px !important;
  margin-right: 4px;
}
.compact-list .assignment-text,
body.list-view .assignment-text {
  width: 100%;
  height: auto;
  background: none;
  color: #333;
  padding: 4px 0;
}
.compact-list .assignment-text span,
body.list-view .assignment-text span {
  font-size: 15px;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  color: #333;
}

/* Mobile responsive styles */
@media (max-width: 600px) {
  html {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    width: 100%;
    max-width: 100vw;
    padding: 0 10px;
    box-sizing: border-box;
    /* Prevent long words/URLs from causing overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  h1 {
    font-size: 1.5em;
    margin: 10px 0;
  }

  /* Mobile nav */
  #topnavbar {
    margin: 8px;
  }
  #topnavbar ul {
      flex-wrap: wrap;
      margin: 8px;
  }
  #topnavbar ul li a {
    padding: 8px;
    font-size: 14px;
  }
  /* Hide CardView/ListView toggle on mobile - mobile always uses list view */
  #view-toggle {
    display: none !important;
  }

  /* Mobile uses compact list layout */
  .schedule {
    display: block;
    width: 100%;
  }
  .schedule tbody,
  .schedule tr,
  .schedule td {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .schedule tr {
    margin-bottom: 12px;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 8px;
  }
  .schedule td {
    padding: 0;
    border: none;
    border-radius: 0;
  }
  .schedule td:first-child {
    font-weight: bold;
    font-size: 1.1em;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }
  .schedule td:empty {
    display: none;
  }
  .topic {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: none;
    word-break: break-word;
  }
  .assignments-grid {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }
  .assignment-card {
    flex-direction: row;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    padding: 6px;
    align-items: center;
    justify-content: flex-start;
    color: #333;
    box-sizing: border-box;
  }
  .assignment-card .screenshot-text-thumbnail,
  .assignment-card img,
  .icon-placeholder,
  .text-thumbnail {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .assignment-card span {
    margin-top: 0;
    font-size: 15px;
    color: #333;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    word-break: break-word;
  }
  .assignment-card span::before {
    width: 14px !important;
    height: 14px !important;
    margin-right: 4px;
  }
  .assignment-text {
    width: 100%;
    height: auto;
    background: none;
    color: #333;
    padding: 4px 0;
  }
  .assignment-text span {
    font-size: 15px;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    color: #333;
  }
}