.main {
  background-color: #101e38;
}

.main > .topbar {
  background: #000;
  border-color: #352c40;
  color: #fff;
}

.main > .topbar :is(.crumb, .crumb b, .user small, .mobile-language-label) {
  color: #eee8f4;
}

.main > .topbar > .workspace-tools {
  border-top-color: #352c40;
}

.main > .topbar :is(button:not(.avatar), select) {
  border-radius: 999px;
  border: 1px solid #645470;
  color: #fff;
  background: linear-gradient(#393044, #21192a);
  box-shadow: inset 0 1px 0 #ffffff26, 0 2px 4px #0008;
}

.main > .topbar :is(button:not(.avatar), select):hover {
  background: linear-gradient(#493855, #302238);
}

.main > .topbar :is(button, select):focus-visible {
  outline: 2px solid #e7abff;
  outline-offset: 2px;
}

.main > .topbar select option {
  background: #21192a;
  color: #fff;
}

#overview {
  --scene-sheet: url(/overview-scenes-v1.webp);
  --scene-size: 200% 200%;
  --scene-ratio: 3 / 2;
  --scene-position: right top;
}

.main > .section:not(#overview) {
  --scene-sheet: url(/workspace-scenes-v1.webp);
  --scene-size: 400% 300%;
}

#projects { --scene-position: left top; }
#procurement { --scene-position: 33.3333% top; }
#sales { --scene-position: 66.6667% top; }
#design { --scene-position: right top; }
#quality { --scene-position: left center; }
#assignments { --scene-position: 33.3333% center; }
#photos { --scene-position: 66.6667% center; }
#overtime, #overtimeConsent { --scene-position: right center; }
#reports { --scene-position: left bottom; }
#attendance { --scene-position: 33.3333% bottom; }
#workers { --scene-position: 66.6667% bottom; }
#settings { --scene-position: right bottom; }

.main :is(.project, .project-card)[data-project-scene] {
  --scene-sheet: url(/overview-scenes-v1.webp);
  --scene-size: 200% 200%;
  --scene-ratio: 3 / 2;
}

[data-project-scene="architecture"] { --scene-position: left top; }
[data-project-scene="interior"] { --scene-position: right top; }
[data-project-scene="woodwork"] { --scene-position: left bottom; }
[data-project-scene="plaster"] { --scene-position: right bottom; }

.main :is(.project, .project-card):is([data-project-scene="vanity"], [data-project-scene="wardrobe"], [data-project-scene="wall-decor"], [data-project-scene="villa"]) {
  --scene-sheet: url(/project-decor-scenes-v1.webp);
}
[data-project-scene="vanity"] { --scene-position: left top; }
[data-project-scene="wardrobe"] { --scene-position: right top; }
[data-project-scene="wall-decor"] { --scene-position: left bottom; }
[data-project-scene="villa"] { --scene-position: right bottom; }

[data-project-scene="vanity"] { --alternate-position: left top; }
[data-project-scene="wardrobe"] { --alternate-position: 33.3333% top; }
[data-project-scene="wall-decor"] { --alternate-position: 66.6667% top; }
[data-project-scene="villa"] { --alternate-position: right top; }
[data-project-scene="woodwork"] { --alternate-position: left bottom; }
[data-project-scene="plaster"] { --alternate-position: 33.3333% bottom; }
[data-project-scene="interior"] { --alternate-position: 66.6667% bottom; }
[data-project-scene="architecture"] { --alternate-position: right bottom; }

@media screen and (prefers-reduced-motion: no-preference) {
  .main > .section :is(.project, .project-card)[data-project-scene]::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    aspect-ratio: 1;
    min-height: 100%;
    transform: translateY(-50%);
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(#17152b92, #17152baf),
      url(/project-decor-alternates-v1.webp) var(--alternate-position) / 400% 200% no-repeat;
    animation: project-scene-swap 16s linear infinite both;
  }

  .main > .section :is(.project, .project-card)[data-project-scene]:is(:hover, :focus-within)::after {
    animation-play-state: paused;
  }
}

@keyframes project-scene-swap {
  0%, 43%, 100% { opacity: 0; }
  50%, 93% { opacity: 1; }
}

.main > .topbar,
.main > .section > .heading,
.main > .section .panel-head,
.main > .section :is(.project, .project-card),
#overview .stat[data-scene] {
  position: relative;
  isolation: isolate;
}

.main > .section:not(#overview) > .heading {
  padding: clamp(16px, 3vw, 24px);
  border-radius: 16px;
  background-color: #241d37;
  color: #fff;
}

.main > .section:not(#overview) > .heading :is(h1, p) {
  color: #fff;
}

.main > .section > .heading::before,
.main > .section .panel-head::before,
.main > .section :is(.project, .project-card)::before,
#overview .stat[data-scene]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background: var(--scene-sheet) var(--scene-position) / var(--scene-size) no-repeat;
  mask-image: linear-gradient(to right, #000, #0008 20%, transparent 43%);
  opacity: .23;
}

.main > .section > .heading {
  min-height: 190px;
  overflow: hidden;
}

.main > .section > .heading::before,
.main > .section .panel-head::before,
.main > .section :is(.project, .project-card)::before,
#overview .stat[data-scene]::before {
  inset: 50% 0 auto;
  min-height: 100%;
  aspect-ratio: var(--scene-ratio, 1);
  transform: translateY(-50%);
  background: linear-gradient(#17152b92, #17152baf),
    var(--scene-sheet) var(--scene-position) / var(--scene-size) no-repeat;
  opacity: 1;
  mask-image: none;
}

.main > #overview .overview-tools button { background: #352342; }
.main > #overview .overview-tools button:hover { background: #503562; }
#overview .project .link-btn[data-rename-project] { color: #000; }
.main > #overview .overview-tools .date {
  background: #352342;
  border-radius: 6px;
  padding: 3px 6px;
}

@media screen {
  #overview .panel:has(> #overviewProjects) {
    background-color: #0b162b;
    border-color: #273653;
    color: #fff;
  }

  #overview .panel:has(> #overviewProjects) .panel-head { border-bottom-color: #273653; }
  #overview .panel:has(> #overviewProjects) :is(.panel-head h2, .project-name, .empty) { color: #fff; }

  .main > .section :is(.panel-head, .project, .project-card),
  #overview .stat[data-scene] {
    overflow: hidden;
    background-color: #241d37;
    color: #fff;
  }

  .main > .section .panel-head { padding: 12px; border-radius: 10px; }
  .main > .section :is(.panel-head, .project, .project-card) :is(h2, h3, p, small, .project-name, .project-meta, .progress-row > b, .project-card-footer > span),
  #overview .stat[data-scene] :is(.stat-top, strong, small) {
    color: #fff;
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .main > .section.active > .heading { animation: workspace-enter 220ms ease-out both; }
  #overview .progress-row .bar i {
    transform-origin: right center;
    animation: workspace-progress 280ms ease-out both;
  }
  #overview:dir(ltr) .progress-row .bar i { transform-origin: left center; }
}

@media screen and (hover: hover) and (prefers-reduced-motion: no-preference) {
  #overview :is(.stat, .project) { transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
  #overview :is(.stat, .project):hover { transform: translateY(-2px); box-shadow: 0 6px 14px #0003; }
}

@keyframes workspace-enter {
  from { opacity: .65; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes workspace-progress {
  from { transform: scaleX(.75); }
  to { transform: scaleX(1); }
}

@media print {
  .main { background-color: #fff; }
  .main > .section > .heading { min-height: 0; }
  .main > .section:not(#overview) > .heading { background-color: #fff; color: #241d37; }
  .main > .section:not(#overview) > .heading :is(h1, p) { color: #241d37; }
  .main > .section > .heading::before,
  .main > .section .panel-head::before,
  .main > .section :is(.project, .project-card)::before,
  #overview .stat[data-scene]::before { display: none; }
}

#attendanceSiteCards .project-card > .notice {
  background: #fbf3f8;
  color: #30243b;
  font-size: .8125rem;
  line-height: 1.55;
}

#allProjects .project-card button.link-btn {
  background: #f7effa;
  color: #34213f;
  border-radius: 8px;
  padding: 7px 10px;
  font-weight: 600;
}

#allProjects .project-card button.link-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}