@import url("/assets/fonts.css");

:root {
  --navy: #282a5a;
  --navy-dark: #1c1d45;
  --orange: #684ef2;
  --cream: #f7f7fc;
  --ink: #252752;
  --muted: #7c7f99;
  --line: #e8e7f2;
}

body {
  background:
    radial-gradient(circle at 10% 4%, rgba(104, 78, 242, .09), transparent 24rem),
    radial-gradient(circle at 94% 30%, rgba(20, 190, 166, .07), transparent 22rem),
    var(--cream);
  color: var(--ink);
}

.shell:has(aside) {
  grid-template-columns: 250px minmax(0, 1fr);
}
.shell:has(aside) aside {
  position: sticky;
  top: 0;
  grid-column: 1;
  grid-row: 1;
  height: 100vh;
  padding: 25px 19px;
  background:
    radial-gradient(circle at 50% 105%, rgba(21, 185, 159, .35), transparent 15rem),
    linear-gradient(180deg, #342c80, #242354);
}
.shell:has(aside) main {
  grid-column: 2;
  grid-row: 1;
  width: min(100%, 1320px);
  margin-inline: auto;
  padding: 32px;
}
.shell:has(aside) .brand {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  text-align: center;
  font-size: 18px;
}
.shell:has(aside) .brand::before {
  content: "";
  width: 68px;
  height: 68px;
  display: block;
  margin: 0 auto 10px;
  border-radius: 18px;
  background: white url("/assets/logo.png") center / contain no-repeat;
  box-shadow: 0 9px 24px rgba(0, 0, 0, .18);
}
.shell:has(aside) .member-name,
.shell:has(aside) .planner-name {
  margin: 10px 0 22px;
  text-align: center;
}
.shell:has(aside) nav { gap: 5px; }
.shell:has(aside) nav a {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 700;
}
.shell:has(aside) nav a:first-child,
.shell:has(aside) nav a:hover {
  background: rgba(112, 93, 238, .42);
}
.shell:has(aside) .logout {
  min-height: 50px;
  border-color: rgba(91, 156, 211, .48);
  border-radius: 13px;
}
.shell:has(aside) h1 { color: var(--navy); font-size: 31px; }
.shell:has(aside) .lead { color: var(--muted); }
.shell:has(aside) .card,
.shell:has(aside) .quick-link,
.shell:has(aside) .panel {
  border-color: #ecebea;
  border-radius: 17px;
  box-shadow: 0 10px 28px rgba(7, 47, 84, .045);
}
.shell:has(aside) .card,
.shell:has(aside) .quick-link {
  background: white;
}
.shell:has(aside) .card strong,
.shell:has(aside) .quick-link strong { color: var(--navy); }
.shell:has(aside) .primary {
  border-radius: 12px;
  background: linear-gradient(135deg, #ff7d35, #ff6125);
  box-shadow: 0 8px 18px rgba(255, 107, 44, .18);
}

body:has(.shell > .intro) {
  background:
    radial-gradient(circle at 11% 12%, rgba(104, 78, 242, .14), transparent 25rem),
    radial-gradient(circle at 88% 86%, rgba(21, 185, 159, .12), transparent 28rem),
    var(--cream);
}
body:has(.shell > .intro) .shell {
  border-color: rgba(8, 47, 85, .09);
  box-shadow: 0 26px 75px rgba(8, 47, 85, .14);
}
body:has(.shell > .intro) .intro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 93%, rgba(31, 224, 184, .38), transparent 18rem),
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .15), transparent 15rem),
    linear-gradient(145deg, #6747f5, #5368f5 58%, #15b99f);
}
body:has(.shell > .intro) .intro::after {
  content: "⚡";
  position: absolute;
  top: 30px;
  left: 30px;
  direction: ltr;
  opacity: .16;
  font-size: 110px;
  transform: rotate(-15deg);
}
body:has(.shell > .intro) .brand { color: white; }
body:has(.shell > .intro) .panel { background: rgba(255, 255, 255, .98); }
body:has(.shell > .intro) h2 { color: var(--navy); }
body:has(.shell > .intro) input {
  border-color: #e5e3e0;
  background: #fffdfa;
}
body:has(.shell > .intro) input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 44, .1);
}
body:has(.shell > .intro) button {
  background: linear-gradient(135deg, #7358f4, #5541d7);
  box-shadow: 0 10px 22px rgba(91, 67, 218, .2);
}

@media (max-width: 850px) {
  .shell:has(aside) { display: block; }
  .shell:has(aside) aside {
    position: relative;
    width: 100%;
    height: auto;
    padding: 15px;
  }
  .shell:has(aside) .brand::before {
    width: 55px;
    height: 55px;
    margin-bottom: 7px;
  }
  .shell:has(aside) nav {
    display: flex;
    overflow-x: auto;
  }
  .shell:has(aside) nav a { min-width: max-content; }
  .shell:has(aside) main { padding: 24px 16px; }
}

@media (max-width: 760px) {
  body:has(.shell > .intro) .intro::after { display: none; }
}