:root {
  --ink: #12362b;
  --muted: #6c7c75;
  --paper: #f7f3ea;
  --card: #fffdf8;
  --line: #dbe2dc;
  --green: #1d7656;
  --green-dark: #0b382b;
  --lime: #f49a38;
  --orange: #ee8426;
  --orange-soft: #fff0df;
  --red: #cf5b21;
  --navy: #092f25;
  --shadow: 0 20px 55px rgba(11, 56, 43, .10);
}

body {
  min-height: 100vh;
  background-color: #f2f4f0;
  background:
    radial-gradient(circle at 92% 7%, rgba(226, 132, 42, .13), transparent 32rem),
    radial-gradient(circle at 5% 48%, rgba(21, 92, 68, .10), transparent 38rem),
    linear-gradient(180deg, #faf9f5 0%, #edf3ee 52%, #f8f4ed 100%);
}

main {
  position: relative;
}

.market-calendar {
  margin: 0 0 24px;
  padding: 27px 30px 23px;
  border: 1px solid rgba(18, 54, 43, .11);
  border-radius: 18px;
  background: rgba(255, 253, 248, .98);
  box-shadow: 0 20px 55px rgba(9, 47, 37, .09);
}

.calendar-heading,
.calendar-heading-actions,
.calendar-nav,
.calendar-legend {
  display: flex;
  align-items: center;
}

.calendar-heading-actions {
  gap: 12px;
}

.calendar-heading {
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.calendar-heading .kicker {
  margin-bottom: 6px;
}

.calendar-heading h2 {
  margin: 0;
  color: var(--green-dark);
  font-family: Georgia, serif;
  font-size: 29px;
  font-weight: 400;
}

.calendar-nav {
  gap: 13px;
}

.calendar-nav strong {
  min-width: 155px;
  color: var(--green-dark);
  font-size: 14px;
  text-align: center;
  text-transform: capitalize;
}

.calendar-arrow {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(18, 54, 43, .14);
  border-radius: 10px;
  background: #f5f7f3;
  color: var(--green-dark);
}

.calendar-arrow:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
}

.calendar-arrow:disabled {
  cursor: default;
  opacity: .35;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.calendar-weekdays {
  margin-bottom: 7px;
}

.calendar-weekdays span {
  padding: 4px;
  color: #7b8983;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
}

.calendar-day {
  position: relative;
  min-height: 50px;
  border: 1px solid #e4e9e5;
  border-radius: 11px;
  background: #f8faf7;
  color: #274c40;
  font-size: 13px;
  font-weight: 750;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.calendar-day:hover:not(:disabled):not(.calendar-empty) {
  z-index: 1;
  border-color: #69a58d;
  background: #eef6f0;
  transform: translateY(-1px);
}

.calendar-day:disabled {
  cursor: default;
  opacity: .3;
}

.calendar-empty {
  border-color: transparent;
  background: transparent;
}

.calendar-alert {
  border-color: #df745c;
  background: linear-gradient(145deg, #fff4f0, #fde4dc);
  color: #a43d29;
  box-shadow: inset 0 0 0 1px rgba(190, 65, 39, .06);
}

.calendar-alert small {
  position: absolute;
  right: 6px;
  bottom: 5px;
  color: #bf4c35;
  font-size: 8px;
  font-weight: 850;
}

.calendar-selected {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.calendar-legend {
  justify-content: flex-end;
  gap: 7px;
  margin-top: 13px;
  color: var(--muted);
  font-size: 10px;
}

.calendar-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #df745c;
}

.calendar-error {
  grid-column: 1 / -1;
  margin: 10px 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.loss-actions {
  display: flex;
  align-items: end;
  gap: 9px;
}

.loss-actions button {
  flex: 1;
}

.metrics,
.panel:not(.filter-panel),
.monthly-panel {
  background: rgba(255, 253, 248, .98);
  border-color: rgba(18, 54, 43, .11);
  box-shadow: 0 22px 60px rgba(9, 47, 37, .11), 0 1px 0 rgba(255, 255, 255, .85) inset;
}

.topbar {
  height: 80px;
  border-bottom: 0;
  background: rgba(8, 45, 35, .96);
  box-shadow: 0 8px 30px rgba(4, 31, 24, .16);
  backdrop-filter: none;
}

.brand,
.topbar nav a {
  color: #fff;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, #ffac4d, #ec761d);
  color: #12362b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 7px 18px rgba(238, 132, 38, .25);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
}

.brand strong {
  font-size: 15px;
}

.brand small {
  color: #a9c3b9;
}

.topbar nav a {
  padding: 9px 4px;
  color: #d9e6e1;
}

.topbar nav a:hover {
  color: #ffad54;
}

.live {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .08);
  color: #e8f0ed;
}

.hero {
  position: relative;
  min-height: 510px;
  margin-top: 28px;
  padding: 72px 54px 68px;
  overflow: hidden;
  border-radius: 26px;
  background-image: url('/assets/solar-park-hero.png');
  background-position: center center;
  background-size: cover;
  box-shadow: 0 28px 70px rgba(6, 39, 30, .2);
}

.hero.hero-single {
  grid-template-columns: minmax(0, 1fr);
}

.hero::before {
  position: absolute;
  inset: 0;
  content: '';
  background:
    linear-gradient(90deg, rgba(5, 43, 33, .94) 0%, rgba(6, 45, 35, .78) 46%, rgba(7, 39, 31, .28) 100%),
    linear-gradient(0deg, rgba(5, 34, 27, .35), transparent 52%);
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero .eyebrow {
  color: #ffad54;
}

.hero h1 {
  max-width: 720px;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .18);
}

.hero h1 em {
  color: #ffad54;
}

.hero-copy {
  color: #d8e6e0;
  font-size: 16px;
}

.date-card {
  border: 1px solid rgba(255, 173, 84, .32);
  border-radius: 16px;
  background: rgba(7, 45, 35, .82);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
  backdrop-filter: none;
}

.date-card input,
.date-row input,
.filter-grid input,
.upload-options input,
.upload-options select {
  border-radius: 9px;
}

.date-card input {
  background: #fffaf2;
}

.primary {
  border-radius: 9px;
  background: linear-gradient(135deg, #ffa646, #ed7b20);
  color: #17382e;
  box-shadow: 0 8px 20px rgba(238, 132, 38, .2);
}

.primary:hover {
  background: linear-gradient(135deg, #ffb460, #f18a2c);
}

.secondary {
  border-radius: 9px;
  border-color: #cfdad3;
  background: #fffdf8;
}

.metrics {
  position: relative;
  z-index: 2;
  margin: 0 0 28px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(10, 51, 40, .16);
}

.metrics article {
  position: relative;
  background: rgba(255, 253, 248, .98);
}

.metrics article::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: '';
  background: linear-gradient(90deg, var(--green), #55a779);
}

.metrics article:nth-child(3)::before {
  background: linear-gradient(90deg, #f2a347, #e87422);
}

.metrics .accent {
  background: linear-gradient(145deg, #124b3a, #0a3429);
}

.metrics .accent::before {
  background: linear-gradient(90deg, #ffad54, #ee8426);
}

.panel {
  overflow: hidden;
  border: 1px solid rgba(25, 95, 71, .12);
  border-radius: 18px;
  background: rgba(255, 253, 248, .98);
}

.panel-heading {
  background: linear-gradient(90deg, rgba(239, 246, 240, .78), rgba(255, 248, 237, .72));
}

.panel-heading h2 {
  color: var(--green-dark);
  font-size: 30px;
}

.eyebrow,
.kicker {
  color: #d8681d;
}

.chart-panel {
  border-top: 4px solid var(--orange);
}

th {
  background: #f4f7f2;
  color: #65786f;
}

tbody tr:hover td {
  background: #fff8ed;
}

.negative-value {
  color: #c7561c;
}

.positive-value {
  color: #176b4e;
}

.split {
  margin: 80px -28px 70px;
  padding: 72px 32px;
  border: 1px solid rgba(222, 119, 32, .12);
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, rgba(238, 132, 38, .18), transparent 36%),
    linear-gradient(135deg, #fff5e9, #edf5ee);
}

.section-intro h2 {
  color: #123f31;
}

.filter-panel {
  box-shadow: 0 24px 55px rgba(29, 84, 64, .12);
}

.loss-totals > div:first-child {
  border-top: 3px solid #ed8429;
}

.loss-totals > div:nth-child(2) {
  border-top: 3px solid #4a9b72;
}

.loss-total-accent {
  border-top: 3px solid #ffad54;
  background: linear-gradient(145deg, #124b3a, #092f25);
}

.production-section {
  position: relative;
  margin: 0 -28px 32px;
  padding: 42px max(28px, calc((100% - 1184px) / 2));
  grid-template-columns: .65fr 1.35fr;
  gap: 38px;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 0, rgba(244, 154, 56, .16), transparent 33%),
    linear-gradient(145deg, #0c3d30, #082b22);
}

.csv-import-section {
  scroll-margin-top: 92px;
}

.csv-import-section .section-intro h2 {
  font-size: clamp(34px, 4vw, 50px);
}

.csv-import-section .section-intro > p:last-child {
  margin-top: 18px;
}

.section-intro.light .eyebrow {
  color: #ffad54;
}

.upload-card {
  padding: 18px;
  border-radius: 18px;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .2);
}

.dropzone {
  min-height: 112px;
  border: 2px dashed #9db9ad;
  border-radius: 14px;
  background: linear-gradient(145deg, #fffdf8, #f3f8f3);
}

.dropzone:hover,
.dropzone.drag {
  border-color: var(--orange);
  background: var(--orange-soft);
}

.upload-icon {
  color: var(--orange);
}

.monthly-panel {
  border-top: 4px solid var(--green);
}

.monthly-totals > div:nth-child(2) strong {
  color: var(--green);
}

.monthly-totals > div:nth-child(3) strong {
  color: var(--orange);
}

.monthly-totals > div:nth-child(4) strong {
  color: var(--lime);
}

footer {
  color: #6c7c75;
}

footer span:first-child {
  color: var(--green-dark);
  font-weight: 800;
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding: 58px 34px 48px;
    background-position: 62% center;
  }

  .hero::before {
    background: rgba(6, 43, 33, .82);
  }

  .metrics {
    margin-right: 12px;
    margin-left: 12px;
  }

  .split {
    margin-right: -14px;
    margin-left: -14px;
  }

  .production-section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 34px;
    padding-bottom: 34px;
  }
}

@media (max-width: 560px) {
  .market-calendar {
    padding: 22px 14px 18px;
  }

  .calendar-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-nav {
    width: 100%;
    justify-content: space-between;
  }

  .calendar-heading-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .calendar-day {
    min-height: 42px;
  }

  .hero {
    margin-top: 16px;
    padding: 42px 22px 34px;
    border-radius: 18px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .metrics {
    margin-top: 0;
  }

  .split,
  .production-section {
    border-radius: 18px;
  }

  .production-section {
    padding: 28px 18px;
  }
}

@media print {
  body {
    background: #fff;
  }

  .split {
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
  }
}

:where(button, a, input, select):focus-visible {
  outline: 3px solid #f08a2b;
  outline-offset: 3px;
}

.dropzone {
  position: relative;
}

.dropzone input[type="file"] {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone:focus-within {
  outline: 3px solid #f08a2b;
  outline-offset: 3px;
}