/* Physics SciEd Learning Workspace — Folder Tabs Seam/Baseline Fix v1.4.2
   Fixes the small square gaps visible at the lower junction between adjacent folder tabs.

   Cause:
   the skewed right-side folder lip does not fully occupy the lower inside corner
   where the next tab begins, exposing the white workspace background.

   Fix:
   - preserve the v1.4.1 reference folder shape;
   - add a concealed lower seam-fill inside each tab;
   - lower the visual tab bodies 3px relative to the baseline;
   - keep the workspace content border behind the tabs;
   - retain equal-width distribution and native Bootstrap behavior.
*/

:root {
  --psc-folder-line: #cfc7ac;
  --psc-folder-content: #ffffff;
  --psc-folder-text: #10233f;

  --psc-course-top: #ffe47a;
  --psc-course-bottom: #f5c536;
  --psc-course-edge: #d5aa18;

  --psc-tutorial-top: #9fc1f3;
  --psc-tutorial-bottom: #6f9ee7;
  --psc-tutorial-edge: #537fca;

  --psc-supp-top: #b1d39f;
  --psc-supp-bottom: #83b86a;
  --psc-supp-edge: #639948;

  --psc-profile-top: #c4ade9;
  --psc-profile-bottom: #9b78d0;
  --psc-profile-edge: #7956b5;
}

/* =========================================================
   FULL-WIDTH TAB STRIP
   ========================================================= */
body.psc-student-page .student-learning-workspace #dashboardTabs {
  position: relative !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0.6rem 0 2px 0 !important;
  padding: 0 0.55rem !important;

  overflow: visible !important;

  /* The content panel supplies the horizontal baseline.
     Removing the UL border prevents it from showing through the slanted seams. */
  border-bottom: 0 !important;
  background: transparent !important;
}

body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item {
  position: relative !important;
  z-index: 1 !important;

  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;

  margin: 0 -9px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* The old external overlap bridge remains disabled. */
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item::before,
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item:not(:first-child)::before {
  content: none !important;
  display: none !important;
}

/* Identity colors. */
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item:nth-child(1) {
  --tab-top: var(--psc-course-top);
  --tab-bottom: var(--psc-course-bottom);
  --tab-edge: var(--psc-course-edge);
}
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item:nth-child(2) {
  --tab-top: var(--psc-tutorial-top);
  --tab-bottom: var(--psc-tutorial-bottom);
  --tab-edge: var(--psc-tutorial-edge);
}
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item:nth-child(3) {
  --tab-top: var(--psc-supp-top);
  --tab-bottom: var(--psc-supp-bottom);
  --tab-edge: var(--psc-supp-edge);
}
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item:nth-child(4) {
  --tab-top: var(--psc-profile-top);
  --tab-bottom: var(--psc-profile-bottom);
  --tab-edge: var(--psc-profile-edge);
}

/* =========================================================
   FOLDER TAB BODY
   ========================================================= */
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link {
  position: relative !important;
  top: 3px !important;
  z-index: 3 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: calc(100% - 17px) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;

  margin: 0 !important;
  padding: 0 0.75rem !important;

  border: 1px solid var(--tab-edge) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 11px 8px 0 0 !important;

  background:
    linear-gradient(
      to bottom,
      var(--tab-top) 0%,
      var(--tab-top) 28%,
      var(--tab-bottom) 100%
    ) !important;

  color: var(--psc-folder-text) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 -1px 1px rgba(16,35,63,0.07) !important;

  font-family: "Inter", system-ui, sans-serif !important;
  font-size: clamp(0.72rem, 1.08vw, 0.84rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;

  transform: none !important;
  filter: none !important;
  transition: filter 0.12s ease, background-color 0.12s ease !important;
}

/* Concealed seam-fill:
   a tiny bottom rectangle sits underneath the skewed lip.
   Its only job is to fill the transparent square notch; it does not extend
   beyond the visible folder lip. */
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link::before {
  content: "" !important;
  position: absolute !important;
  z-index: -2 !important;

  right: -13px !important;
  bottom: 0 !important;

  width: 17px !important;
  height: 7px !important;

  background: var(--tab-bottom) !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

/* Main slanted folder lip. */
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;

  top: -1px !important;
  right: -18px !important;
  width: 31px !important;
  height: 39px !important;

  background:
    linear-gradient(
      to bottom,
      var(--tab-top) 0%,
      var(--tab-top) 28%,
      var(--tab-bottom) 100%
    ) !important;

  border-top: 1px solid var(--tab-edge) !important;
  border-right: 1px solid var(--tab-edge) !important;
  border-bottom: 0 !important;

  border-radius: 0 12px 0 0 !important;

  transform: skewX(24deg) !important;
  transform-origin: bottom left !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42) !important;
}

/* Hide native tab icons. */
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link > i,
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link > svg,
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link > img {
  display: none !important;
}

/* Never clip tab labels. */
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link > span {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;

  opacity: 1 !important;
  transform: none !important;
}

/* =========================================================
   SELECTED TAB
   ========================================================= */
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link.active,
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link[aria-selected="true"] {
  z-index: 30 !important;

  background: var(--psc-folder-content) !important;
  color: var(--psc-folder-text) !important;

  border-color: var(--psc-folder-line) !important;
  border-bottom: 0 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 -1px 2px rgba(16,35,63,0.05) !important;

  transform: none !important;
  filter: none !important;
}

/* Active seam filler becomes white and disappears into the content surface. */
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link.active::before,
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link[aria-selected="true"]::before {
  background: var(--psc-folder-content) !important;
}

body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link.active::after,
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link[aria-selected="true"]::after {
  background: var(--psc-folder-content) !important;
  border-color: var(--psc-folder-line) !important;
  border-bottom: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item:has(> .nav-link.active),
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item:has(> .nav-link[aria-selected="true"]) {
  z-index: 40 !important;
}

/* Stable interaction. */
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link:hover,
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link:focus-visible {
  transform: none !important;
  filter: brightness(1.02) !important;
  outline: none !important;
}

body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link.active:hover,
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link[aria-selected="true"]:hover,
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link.active:focus-visible,
body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link[aria-selected="true"]:focus-visible {
  filter: none !important;
}

/* =========================================================
   BASELINE / CONTENT PANEL
   The line now lives behind the tabs and slightly lower than before.
   ========================================================= */
body.psc-student-page .student-learning-workspace #dashboardTabsContent.student-dashboard-content {
  position: relative !important;
  z-index: 1 !important;

  width: 100% !important;

  /* Pull the content surface upward behind the lowered tabs. */
  margin-top: -2px !important;

  border-top: 1px solid var(--psc-folder-line) !important;
  background: var(--psc-folder-content) !important;
}

/* Mobile: preserve one row and compact dimensions. */
@media (max-width: 700px) {
  body.psc-student-page .student-learning-workspace #dashboardTabs {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }

  body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item {
    margin-right: -6px !important;
  }

  body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link {
    top: 2px !important;
    width: calc(100% - 11px) !important;
    height: 35px !important;

    padding: 0 0.28rem !important;
    font-size: clamp(0.55rem, 2.25vw, 0.68rem) !important;
    letter-spacing: -0.01em !important;
  }

  body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link::before {
    right: -9px !important;
    width: 13px !important;
    height: 6px !important;
  }

  body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link::after {
    right: -12px !important;
    width: 21px !important;
    height: 36px !important;
    border-radius: 0 10px 0 0 !important;
    transform: skewX(21deg) !important;
  }
}

@media (max-width: 390px) {
  body.psc-student-page .student-learning-workspace #dashboardTabs > .nav-item > .nav-link {
    font-size: 0.52rem !important;
    padding: 0 0.12rem !important;
  }
}