/* developers-halpas-production/my-projects-workspace.css */

#my-projects {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 64px) !important;
}

#sidebar nav [data-page="my-projects"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M4 5h6l2 2h8v12H4V5Z'/%3E%3Cpath d='M8 11h8M8 15h5'/%3E%3C/svg%3E");
}

.my-projects-loading {
  min-height: 360px;
  display: grid;
  place-items: center;
  color: #77746f;
}

.my-projects-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #d8d6d1;
  background: #fff;
  margin-bottom: 24px;
}

.my-projects-overview > span {
  display: grid;
  gap: 4px;
  min-height: 92px;
  align-content: center;
  padding: 18px 22px;
  border-right: 1px solid #deddd8;
}

.my-projects-overview > span:last-child {
  border-right: 0;
}

.my-projects-overview strong {
  font-size: 27px;
}

.my-projects-overview small,
.my-project-state,
.my-task-title > span,
.my-task-information small,
.my-image-gallery small,
.my-materials small,
.my-submission-panel small {
  color: #6f6d68;
  font: 10px "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.my-project-list {
  display: grid;
  gap: 26px;
}

.my-project-card {
  border: 1px solid #cbc8c1;
  background: #fff;
}

.my-project-card > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: end;
  padding: 28px 30px 24px;
  border-top: 5px solid #111;
  border-bottom: 1px solid #deddd8;
}

.my-project-card > header h2 {
  overflow: hidden;
  margin: 8px 0 6px;
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-project-card > header p {
  max-width: 760px;
  margin: 0;
  color: #706e69;
  line-height: 1.5;
}

.my-project-counts {
  display: flex;
  gap: 28px;
}

.my-project-counts > span {
  display: grid;
  gap: 3px;
  min-width: 56px;
}

.my-project-counts strong {
  font-size: 20px;
}

.my-project-counts small,
.my-project-progress small {
  color: #77746f;
  font-size: 10px;
}

.my-project-progress {
  display: grid;
  grid-template-columns: 56px minmax(160px, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 15px 30px;
  border-bottom: 1px solid #deddd8;
}

.my-project-progress > strong {
  font-size: 22px;
}

.my-project-progress > div {
  height: 5px;
  background: #deddd8;
}

.my-project-progress > div span {
  display: block;
  height: 100%;
  background: #111;
}

.my-project-task-stack {
  display: grid;
}

.my-task-card {
  border-bottom: 1px solid #deddd8;
  background: #fff;
}

.my-task-card:last-child {
  border-bottom: 0;
}

.my-task-card.high-priority {
  box-shadow: inset 5px 0 0 #d9a51d;
}

.my-task-summary {
  width: 100%;
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 310px) auto 28px;
  gap: 20px;
  align-items: center;
  padding: 18px 24px;
  border: 0;
  background: #fff;
  color: #111;
  text-align: left;
  cursor: pointer;
}

.my-task-summary:hover,
.my-task-summary:focus-visible {
  background: #f7f6f2;
  outline: none;
}

.my-task-title {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.my-task-title strong {
  overflow: hidden;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-task-title small {
  color: #77746f;
  font-size: 11px;
}

.my-task-previews {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.my-image-button {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d6d4cf;
  background: #eeede9;
  cursor: pointer;
}

.my-image-button.preview {
  width: 72px;
  height: 56px;
}

.my-image-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.my-image-button > span {
  position: absolute;
  inset: auto 0 0;
  padding: 4px;
  background: rgb(0 0 0 / 72%);
  color: #fff;
  font-size: 9px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.my-image-button:hover > span,
.my-image-button:focus-visible > span {
  opacity: 1;
}

.my-image-button.unavailable::after {
  content: "Unavailable";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #eceae5;
  color: #77746f;
  font-size: 9px;
}

.my-task-more {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid #d6d4cf;
  background: #111;
  color: #fff;
  font-weight: 700;
}

.my-task-toggle-mark {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}

.my-task-expanded {
  display: grid;
  gap: 22px;
  padding: 0 30px 30px;
  background: #faf9f6;
}

.my-task-information {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  border: 1px solid #deddd8;
  background: #fff;
}

.my-task-information section {
  min-width: 0;
  padding: 20px;
}

.my-task-information section + section {
  border-left: 1px solid #deddd8;
}

.my-task-information p,
.my-revision-note p,
.my-submission-panel p {
  margin: 9px 0 0;
  color: #5f5d59;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.inline-link {
  color: #1558b0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inline-link:hover,
.inline-link:focus-visible {
  color: #0a3674;
}

.my-revision-note {
  padding: 17px 20px;
  border-left: 5px solid #7651a6;
  background: #f0e8fa;
}

.my-image-gallery,
.my-materials,
.my-submission-panel {
  border: 1px solid #deddd8;
  background: #fff;
}

.my-image-gallery > header,
.my-materials > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #deddd8;
}

.my-image-gallery > header > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.my-image-gallery > header > span {
  color: #77746f;
  font-size: 11px;
}

.my-image-carousel {
  position: relative;
  padding: 18px 48px;
}

.my-image-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.my-image-track::-webkit-scrollbar {
  display: none;
}

.my-image-button.gallery {
  flex: 0 0 min(520px, 78%);
  height: 300px;
  scroll-snap-align: center;
}

.my-image-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 36px;
  height: 54px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 40px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: transform 0.15s ease, text-shadow 0.15s ease;
}

.my-image-arrow:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.16);
  text-shadow: 0 0 12px rgb(0 0 0 / 45%);
}

.my-image-arrow.previous {
  left: 7px;
}

.my-image-arrow.next {
  right: 7px;
}

.my-image-arrow:disabled {
  opacity: 0.2;
  cursor: default;
}

.my-materials h4,
.my-submission-panel h4 {
  margin: 4px 0 0;
  font-size: 20px;
}

.my-materials > div {
  display: grid;
}

.my-materials article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 20px;
  border-bottom: 1px solid #ebe9e4;
}

.my-materials article:last-child {
  border-bottom: 0;
}

.my-materials article > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.my-materials article strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-materials > div > p {
  margin: 0;
  padding: 20px;
  color: #77746f;
}

.my-submission-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(320px, 1.25fr);
  gap: 26px;
  padding: 20px;
}

.my-project-submit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.my-project-submit label {
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
}

.my-project-submit input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid #cfcac2;
  background: #fff;
  padding: 10px;
}

.my-submit-message {
  grid-column: 1 / -1;
  min-height: 18px;
  margin: 0 !important;
  font-size: 11px;
}

.my-projects-empty {
  min-height: 260px;
  display: grid;
  place-content: center;
  gap: 8px;
  border: 1px solid #d8d6d1;
  background: #fff;
  text-align: center;
}

.my-projects-empty strong {
  font-size: 27px;
}

.my-projects-empty p {
  margin: 0;
  color: #77746f;
}

#modal .modal-card:has(.my-image-lightbox) {
  width: min(980px, calc(100vw - 32px));
}

.my-image-lightbox {
  display: grid;
  gap: 14px;
}

.my-lightbox-stage {
  min-height: min(62vh, 620px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #111;
  color: #fff;
}

.my-lightbox-stage img {
  width: 100%;
  height: min(62vh, 620px);
  object-fit: contain;
}

.my-image-lightbox > .primary {
  justify-self: end;
  text-decoration: none;
}

@media (max-width: 900px) {
  .my-task-summary {
    grid-template-columns: minmax(180px, 1fr) auto 28px;
  }

  .my-task-previews {
    display: none;
  }

  .my-task-information,
  .my-submission-panel {
    grid-template-columns: 1fr;
  }

  .my-task-information section + section {
    border-left: 0;
    border-top: 1px solid #deddd8;
  }
}

@media (max-width: 650px) {
  #my-projects {
    padding: 22px 16px !important;
  }

  .my-projects-overview {
    grid-template-columns: repeat(2, 1fr);
  }

  .my-projects-overview > span:nth-child(2) {
    border-right: 0;
  }

  .my-projects-overview > span:nth-child(-n + 2) {
    border-bottom: 1px solid #deddd8;
  }

  .my-project-card > header {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px 18px;
  }

  .my-project-counts {
    justify-content: space-between;
  }

  .my-project-progress {
    grid-template-columns: 50px 1fr;
    padding: 14px 18px;
  }

  .my-project-progress small {
    grid-column: 1 / -1;
  }

  .my-task-summary {
    min-height: 96px;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 12px;
    padding: 15px 18px;
  }

  .my-task-summary > .status {
    grid-column: 1;
    justify-self: start;
  }

  .my-task-toggle-mark {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .my-task-expanded {
    padding: 0 18px 22px;
  }

  .my-image-carousel {
    padding: 14px 38px;
  }

  .my-image-button.gallery {
    flex-basis: 88%;
    height: 220px;
  }

  .my-project-submit {
    grid-template-columns: 1fr;
  }
}

/* Modern expanded assignment and folder submission v2 */
.my-project-card{border:0!important;background:transparent!important}.my-project-card>header{padding:18px 4px 20px;border-top:0;border-bottom:1px solid #d5d2cb;background:transparent}.my-project-card>header h2{font-size:clamp(30px,3vw,44px)}.my-project-progress{padding:14px 4px 18px;border-bottom:1px solid #d5d2cb}.my-task-card{margin-top:12px;border:1px solid #dedbd5;border-radius:12px;overflow:hidden}.my-task-summary{min-height:88px;padding:16px 20px;background:#fff}.my-task-expanded{padding:0 18px 18px;background:#fff}.my-image-gallery,.my-materials,.my-submission-panel{border:0!important;border-top:1px solid #e2dfd8!important;background:transparent!important}.my-image-gallery{padding-top:18px}.my-image-gallery>header{padding:0 2px 12px}.my-image-carousel{border:0!important;background:#f4f2ed;border-radius:10px;overflow:hidden}.my-image-track{padding:14px}.my-image-button.gallery{border:0!important;border-radius:8px;overflow:hidden;background:#ebe9e4}.my-task-information{margin:18px 0;border:0;border-top:1px solid #e2dfd8;border-bottom:1px solid #e2dfd8}.my-task-information section{padding:18px 4px}.my-materials>header{padding:18px 4px 12px}.my-materials article{padding:13px 4px}.my-materials .secondary{border:0;background:transparent;text-decoration:underline;text-underline-offset:4px}.my-submission-panel{grid-template-columns:minmax(190px,.65fr) minmax(360px,1.35fr);align-items:start;padding:20px 4px 2px}.my-submission-copy h4{margin:5px 0 7px}.my-submission-copy p{margin:0;color:#706d67;line-height:1.5}.my-project-submit{display:grid;grid-template-columns:1fr;gap:12px}.my-submission-choices{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}.my-submission-or{color:#817d76;font-size:11px}.my-submission-choice{position:relative;min-height:76px;padding:14px;border:1px solid #d8d4cd;border-radius:9px;background:#faf9f6;cursor:pointer}.my-submission-choice:hover{border-color:#111;background:#fff}.my-submission-choice input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.my-submission-choice>span{display:grid;gap:5px}.my-submission-choice small{color:#77746f;font-size:10px;line-height:1.35}.my-project-submit footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.my-submit-message{min-height:16px}.my-submit-action{margin-left:auto;font-weight:800!important}.my-submit-action:hover{text-decoration:underline;text-underline-offset:5px}@media(max-width:780px){.my-project-card>header{grid-template-columns:1fr}.my-project-counts{justify-content:flex-start}.my-submission-panel{grid-template-columns:1fr}.my-submission-choices{grid-template-columns:1fr}.my-submission-or{text-align:center}.my-project-submit footer{align-items:flex-start;flex-direction:column}.my-submit-action{margin-left:0}}


/* Keep collapsed task content inside the rounded assignment card. */
.my-task-card > .my-task-summary {
  box-sizing: border-box;
  padding-inline: 28px !important;
  background: #fff !important;
}

.my-task-card,
.my-task-card.expanded,
.my-task-expanded {
  background: #fff !important;
}