:root {
  --xe-bg: #f6f2ea;
  --xe-bg-strong: #fffaf4;
  --xe-surface: rgba(255, 252, 247, 0.88);
  --xe-surface-strong: rgba(255, 248, 240, 0.96);
  --xe-stroke: rgba(130, 103, 72, 0.14);
  --xe-stroke-strong: rgba(130, 103, 72, 0.22);
  --xe-text: #19130d;
  --xe-muted: #716457;
  --xe-teal: #0ba7a0;
  --xe-teal-dark: #087974;
  --xe-orange: #ff8e4b;
  --xe-gold: #f6c66b;
  --xe-shadow: 0 30px 90px rgba(131, 107, 74, 0.18);
}

html,
body {
  background:
    radial-gradient(circle at 12% 10%, rgba(11, 167, 160, 0.14), rgba(11, 167, 160, 0.035) 24%, transparent 54%),
    radial-gradient(circle at 84% 18%, rgba(246, 198, 107, 0.24), rgba(246, 198, 107, 0.05) 22%, transparent 42%),
    radial-gradient(circle at 72% 80%, rgba(242, 140, 166, 0.16), rgba(242, 140, 166, 0.035) 20%, transparent 34%),
    linear-gradient(180deg, #fffdf9 0%, #fcf8f2 24%, #f5ecdf 64%, #ecdecf 100%) !important;
  color: var(--xe-text) !important;
  font-family: "Avenir Next", "Segoe UI", sans-serif !important;
}

body {
  padding: 0.78rem;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(130, 103, 72, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 103, 72, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black 42%, transparent 82%);
  opacity: 0.42;
}

body > div.flex.flex-col.h-full {
  position: relative;
  z-index: 1;
  height: calc(100vh - 1.56rem);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 1.45rem;
  background: rgba(255, 252, 247, 0.72);
  box-shadow: var(--xe-shadow);
  backdrop-filter: blur(24px);
}

body > div.flex.flex-col.h-full > div:first-child {
  min-height: 4.2rem;
  padding: 0.85rem 1.05rem !important;
  border-color: var(--xe-stroke) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 249, 243, 0.9)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) inset;
}

body > div.flex.flex-col.h-full > div:first-child > div:first-child {
  gap: 0.78rem;
}

body > div.flex.flex-col.h-full > div:first-child > div:first-child::before {
  content: "";
  display: inline-flex;
  width: clamp(7.6rem, 12vw, 9.4rem);
  height: 2.35rem;
  flex: none;
  background: url("/logo.png") left center / contain no-repeat;
}

body > div.flex.flex-col.h-full > div:first-child svg {
  display: none;
}

body > div.flex.flex-col.h-full > div:first-child input {
  min-width: min(34vw, 18rem);
  border: 1px solid rgba(11, 167, 160, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--xe-text) !important;
  font-weight: 800 !important;
  padding: 0.48rem 0.88rem !important;
  box-shadow: 0 10px 24px rgba(155, 126, 90, 0.08);
}

body > div.flex.flex-col.h-full > div:first-child > div:last-child {
  color: var(--xe-muted) !important;
  font-weight: 700;
}

body > div.flex.flex-col.h-full > div:nth-child(2) {
  gap: 0.18rem;
  padding: 0.58rem 0.78rem !important;
  border-color: var(--xe-stroke) !important;
  background: rgba(255, 250, 244, 0.76) !important;
}

.toolbar-btn {
  min-width: 4.1rem;
  min-height: 3.1rem;
  border: 1px solid transparent;
  border-radius: 0.9rem;
  color: var(--xe-muted);
  font-weight: 800;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.toolbar-btn svg {
  color: var(--xe-teal-dark);
}

.toolbar-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(11, 167, 160, 0.18);
  background: rgba(255, 255, 255, 0.78) !important;
  color: var(--xe-text);
  box-shadow: 0 10px 24px rgba(155, 126, 90, 0.09);
}

.toolbar-btn:hover:not(:disabled) svg {
  color: var(--xe-teal);
}

.toolbar-btn.active {
  border-color: rgba(11, 167, 160, 0.24);
  background: linear-gradient(135deg, rgba(11, 167, 160, 0.14), rgba(255, 142, 75, 0.12)) !important;
  color: var(--xe-text);
  box-shadow: 0 10px 24px rgba(11, 167, 160, 0.12);
}

.toolbar-btn.active svg {
  color: var(--xe-teal);
}

.toolbar-sep {
  width: 1px;
  margin-inline: 0.42rem;
  background: var(--xe-stroke-strong) !important;
}

.grid-cell,
.border-slate-200,
.border-slate-300,
.border-b-2,
.border-r,
.border-b,
.border {
  border-color: var(--xe-stroke) !important;
}

.bg-white,
.bg-slate-50,
.bg-slate-100 {
  background-color: var(--xe-surface) !important;
}

.sticky.top-0.z-20,
svg.sticky.top-0 {
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.96), rgba(246, 242, 234, 0.92)) !important;
}

.grid-cell {
  color: var(--xe-muted);
  font-weight: 800;
}

.grid-row:hover {
  background: rgba(255, 255, 255, 0.66) !important;
}

.grid-row.selected {
  background: rgba(11, 167, 160, 0.14) !important;
}

.bar-normal {
  fill: var(--xe-teal);
}

.bar-normal-prog {
  fill: var(--xe-teal-dark);
}

.bar-summary {
  fill: #2f3b52;
}

.bar-critical {
  fill: var(--xe-orange);
}

.bar-critical-prog {
  fill: #b96f2b;
}

.dep-line {
  stroke: rgba(113, 100, 87, 0.7);
}

.dep-line.critical {
  stroke: var(--xe-orange);
}

input.cell-input {
  border-color: var(--xe-teal) !important;
  border-radius: 0.45rem;
  background: #fffdf9;
  color: var(--xe-text);
}

.absolute.bottom-3.right-3 {
  border-color: rgba(255, 255, 255, 0.8) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--xe-muted) !important;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(155, 126, 90, 0.12);
}

.popover {
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 1rem;
  background: var(--xe-surface-strong) !important;
  box-shadow: 0 24px 70px rgba(35, 25, 15, 0.16);
}

::-webkit-scrollbar-thumb {
  background: rgba(130, 103, 72, 0.24);
}

::-webkit-scrollbar-track {
  background: rgba(255, 250, 244, 0.72);
}

@media (max-width: 820px) {
  body {
    padding: 0;
  }

  body > div.flex.flex-col.h-full {
    height: 100vh;
    border: 0;
    border-radius: 0;
  }

  body > div.flex.flex-col.h-full > div:first-child {
    min-height: 3.8rem;
    align-items: flex-start;
    gap: 0.55rem;
  }

  body > div.flex.flex-col.h-full > div:first-child > div:first-child {
    min-width: 0;
  }

  body > div.flex.flex-col.h-full > div:first-child > div:first-child::before {
    width: 7.2rem;
    height: 2rem;
  }

  body > div.flex.flex-col.h-full > div:first-child input {
    min-width: 9rem;
    max-width: 42vw;
  }

  body > div.flex.flex-col.h-full > div:first-child > div:last-child {
    display: none;
  }

  .toolbar-btn {
    min-width: 3.8rem;
  }
}