/* ==========================================================
   VTU Syllabus Finder — Frontend Stylesheet
   ------------------------------------------
   Clean, responsive, and scrollable design for syllabus UI.
   Compatible with vtusyllcusfin-display.js
   © 2025 VTU Circle | MIT License
   ========================================================== */

/* ==========================================================
   Filters (Scheme + Branch Dropdowns)
   ========================================================== */
.vtusyllcusfin-filters {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

#post-6110 h1 {
    background: repeating-linear-gradient(33deg, #000000 0 0, #2d2c2c 21px 25px);
    color: #fff;
    border-radius: 8px;
    text-align: center;
    padding: 8px;
    font-size: 25px;
    box-shadow: rgb(50 50 105 / .15) 0 2px 5px 0, rgb(0 0 0 / .05) 0 1px 1px 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

@media (max-width: 380px) {
   #post-6110 h1 {
        font-size: 21px;
    }
}

.vtusyllcusfin-scheme-container,
.vtusyllcusfin-branch-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}

.vtusyllcusfin-scheme-container label,
.vtusyllcusfin-branch-container label {
  font-weight: 700;
  color: #000;
}

.vtusyllcusfin-filters select {
  padding: 12px 42px 12px 18px;
  width: 100%;
  border: 1px solid #000;
  border-radius: 7px;
  background: #fff;
  color: #000;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNjY2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTUuNTE2IDcuNTQ4TDEwIDEyLjAzMmwyLjQ4NC00LjQ4NEwxNiA4LjA2M2wtNiA2LTYtNnoiLz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  cursor: pointer;
}

/* ==========================================================
   Layout Containers
   ========================================================== */
.vtusyllcusfin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.vtusyllcusfin-loading {
  text-align: center;
  color: #333;
  font-weight: 700;
}

.vtusyllcusfin-empty{
    text-align: center;
    border-radius: 7px;
    padding: 10px;
    color: #d70f00;
    font-weight: 700;
    border-left: 4px solid #d70f00;
    background: #ff000014;
}

.vtusyllcusfin-note .notice-text{
    color: #333 !important;
    font-size: 11px !important;
}
/* ==========================================================
   First-Year Grouped Table View
   ========================================================== */
.vtusyllcusfin-group {
  overflow: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: thin;
}

/* ---------- Scrollbar Styling ---------- */
.vtusyllcusfin-group::-webkit-scrollbar,
.vtusyllcusfin-card::-webkit-scrollbar {
  height: 7px;
}

.vtusyllcusfin-group::-webkit-scrollbar-thumb,
.vtusyllcusfin-card::-webkit-scrollbar-thumb {
  background: #bcbafc;
  border-radius: 4px;
}

.vtusyllcusfin-group::-webkit-scrollbar-track,
.vtusyllcusfin-card::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.vtusyllcusfin-group:hover::-webkit-scrollbar-thumb,
.vtusyllcusfin-card:hover::-webkit-scrollbar-thumb {
  background: #7b5cff;
}

/* ---------- Table Header ---------- */
.vtusyllcusfin-group .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 460px;
  background: #2C3E50;
  padding: 15px 10px;
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
  color: #fff;
}

/* ---------- Table Header Actions ---------- */
.vtusyllcusfin-group .head .right a {
  background: #fff;
  color: #6200ee;
  font-size: 15px;
  padding: 5px 7px;
  border-radius: 5px;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 0.25s;
}

.vtusyllcusfin-group .head .right a:hover {
  box-shadow: 0 0 0 1px, 0 0 0 4px #ffffff;
}

/* ---------- Table Body ---------- */
.vtusyllcusfin-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
  min-width: 460px;
  background: #fff;
  line-height: normal;
}

.vtusyllcusfin-table tr {
  border-top: 1px solid #2c3e500f;
}

.vtusyllcusfin-table td {
  text-align: left;
  font-size: 13px;
  padding: 15px 10px;
}

/* ---------- “Syllabus” Button ---------- */
.vtusyllcusfin-table .open a {
  background: #6200ee;
  color: #fff;
  padding: 6px 8px;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: rgb(9 30 66 / .25) 0 4px 8px -2px, rgb(9 30 66 / .08) 0 0 0 1px;
  transition: box-shadow 0.25s;
}

.vtusyllcusfin-table .open a:hover {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #6200ee;
}

/* ==========================================================
   Info Note (Welcome message)
   ========================================================== */
.vtusyllcusfin-note {
  background: #fff;
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  border: none;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: #000;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.vtusyllcusfin-note strong {
  color: #6200ee;
  font-size: 16px;
}

.vtusyllcusfin-note i.fa-solid {
  vertical-align: middle;
}

/* ==========================================================
   Upper-Year Card Layout
   ========================================================== */
.vtusyllcusfin-card {
  border-radius: 10px;
  overflow: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: thin;
  box-shadow: rgb(9 30 66 / .25) 0 4px 8px -2px, rgb(9 30 66 / .08) 0 0 0 1px;
}

.scroll-container {
  min-width: 370px;
}

/* ---------- Card Header ---------- */
.vtusyllcusfin-card .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2C3E50;
  padding: 10px 10px;
  color: #fff;
  font-size: 15px;
  line-height: normal;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* ---------- Header Buttons ---------- */
.vtusyllcusfin-actions {
  display: flex;
  gap: 10px;
}

.vtusyllcusfin-btn {
  background: #fff;
  color: #6200ee;
  font-size: 15px;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 5px;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 0.25s;
}

.vtusyllcusfin-btn:hover {
  box-shadow: 0 0 0 1px, 0 0 0 4px #fff;
}

.vtusyllcusfin-btn.syllabus {
  background: #6c4ad9;
  color: #fff;
}

/* ---------- List Section ---------- */
.vtusyllcusfin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.vtusyllcusfin-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 7px;
  box-shadow: rgb(9 30 66 / .25) 0 4px 8px -2px, rgb(9 30 66 / .08) 0 0 0 1px;
}

.vtusyllcusfin-link a {
  font-weight: 600;
  color: #3a3a3a;
  text-decoration: none;
}

.vtusyllcusfin-link .open {
  background: #6200ee;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 5px;
  font-weight: normal;
  text-decoration: none;
  box-shadow: rgb(9 30 66 / .25) 0 4px 8px -2px, rgb(9 30 66 / .08) 0 0 0 1px;
  transition: box-shadow 0.25s;
}

.vtusyllcusfin-link .open:hover {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #6200ee;
}