@import url("/sonicbot-theme.css");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Sora:wght@600;700;800&display=swap");

/* Preserve the approved dashboard layouts while applying SonicBot's visual identity. */
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) body {
  background:
    radial-gradient(circle at 8% 0%, rgba(111, 0, 255, 0.2), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(0, 212, 255, 0.1), transparent 26rem),
    var(--sonic-ink);
  color: var(--sonic-text);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) nav {
  background: rgba(5, 5, 6, 0.92);
  border-color: var(--sonic-line);
  box-shadow: 0 12px 40px -34px rgba(0, 212, 255, 0.8);
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) .bg-card {
  background-color: var(--sonic-panel);
  background: var(--sonic-surface-gradient);
  border-color: var(--sonic-line);
  box-shadow: var(--sonic-glow);
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) .border-border,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) .border-input {
  border-color: var(--sonic-line);
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) .text-primary {
  color: var(--sonic-cyan);
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) .border-primary {
  border-color: var(--sonic-cyan);
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) .bg-primary,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button.bg-green-600,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button.bg-blue-600,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button.bg-purple-600 {
  background: var(--sonic-gradient);
  border-color: var(--sonic-line-cyan);
  box-shadow: 0 12px 28px -18px rgba(0, 212, 255, 0.75);
  color: var(--sonic-text);
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button.bg-primary:not(:disabled):hover,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button.bg-green-600:not(:disabled):hover,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button.bg-blue-600:not(:disabled):hover,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button.bg-purple-600:not(:disabled):hover {
  background: linear-gradient(135deg, #7c1cff, #20dcff);
  border-color: var(--sonic-cyan);
  box-shadow: 0 14px 32px -16px rgba(0, 212, 255, 0.95);
  color: var(--sonic-text);
  filter: none;
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button[class*="hover:bg-accent"]:not(:disabled):hover,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button[class*="hover:bg-secondary"]:not(:disabled):hover,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button[class*="hover:bg-muted"]:not(:disabled):hover,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button.border-input:not(:disabled):hover,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) button.border-border:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(111, 0, 255, 0.22), rgba(0, 212, 255, 0.12));
  border-color: var(--sonic-line-cyan);
  box-shadow: 0 10px 24px -18px rgba(0, 212, 255, 0.9);
  color: var(--sonic-ice);
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) input:focus,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) select:focus,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) textarea:focus {
  border-color: var(--sonic-cyan);
  box-shadow: var(--sonic-focus);
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) h1,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) h2,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) h3,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) nav {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) code,
html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"]) .font-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

html:is([data-aetherbot-route="dashboard"], [data-aetherbot-route="stocks"])
  #root
  > .w-full.bg-green-600.py-3 {
  display: none;
}

html[data-aetherbot-route="stocks"] body {
  overflow-x: hidden;
}

@media (min-width: 1100px) {
  html[data-aetherbot-route="dashboard"] nav > .container {
    padding-block: 0.5rem;
  }

  html[data-aetherbot-route="dashboard"] main {
    max-width: none;
    padding-inline: 1.25rem;
    width: 100%;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .flex.items-center.justify-between.mb-6.flex-wrap.gap-4 {
    align-items: center;
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 0.5rem;
    justify-content: space-between;
    row-gap: 0.75rem;
    width: 100%;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .flex.items-center.justify-between.mb-6.flex-wrap.gap-4
    > .flex.items-center.gap-4.flex-wrap {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.375rem;
    min-width: max-content;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .flex.items-center.justify-between.mb-6.flex-wrap.gap-4
    > .flex.items-center.gap-4.flex-wrap
    > .flex.items-center.gap-2.text-sm.flex-wrap {
    flex-wrap: nowrap;
    gap: 0.375rem;
    white-space: nowrap;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .flex.items-center.justify-between.mb-6.flex-wrap.gap-4
    > .flex.items-center.gap-4.flex-wrap
    > .flex.items-center.gap-2.text-sm.flex-wrap
    > .inline-flex {
    padding-inline: 0.5rem;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .flex.items-center.justify-between.mb-6.flex-wrap.gap-4
    h1 {
    flex: 0 0 auto;
    font-size: 1.875rem;
    line-height: 2.25rem;
    white-space: nowrap;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .flex.items-center.justify-between.mb-6.flex-wrap.gap-4
    > .flex.items-center.gap-3.flex-wrap {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.375rem;
    justify-content: flex-end;
    margin-left: 0;
    white-space: nowrap;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .flex.items-center.justify-between.mb-6.flex-wrap.gap-4
    > .flex.items-center.gap-3.flex-wrap
    button {
    flex: 0 0 auto;
    padding-inline: 0.5rem;
    white-space: nowrap;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .flex.items-center.justify-between.mb-6.flex-wrap.gap-4
    > .flex.items-center.gap-3.flex-wrap
    button
    svg {
    margin-right: 0.25rem;
  }

  html[data-aetherbot-route="dashboard"] main > .mb-6:nth-child(2),
  html[data-aetherbot-route="dashboard"] main > .mb-6:nth-child(4) {
    margin-bottom: 1rem;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > div[class~="lg:grid-cols-4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > div[class~="md:grid-cols-3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  html[data-aetherbot-route="stocks"] nav > .container {
    padding-block: 0.5rem;
  }

  html[data-aetherbot-route="stocks"] main {
    max-width: none;
    padding-inline: 1.25rem;
    width: 100%;
  }

  html[data-aetherbot-route="stocks"]
    main
    > .flex.items-center.justify-between.mb-6 {
    align-items: center;
    column-gap: 0.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    width: 100%;
  }

  html[data-aetherbot-route="stocks"]
    main
    > .flex.items-center.justify-between.mb-6
    > .flex.items-center.gap-3 {
    flex-wrap: nowrap;
    gap: 0.375rem;
    min-width: 0;
    white-space: nowrap;
  }

  html[data-aetherbot-route="stocks"]
    main
    > .flex.items-center.justify-between.mb-6
    button {
    flex: 0 0 auto;
    padding-inline: 0.5rem;
    white-space: nowrap;
  }

  html[data-aetherbot-route="stocks"] main > .grid {
    gap: 1.25rem;
  }
}

@media (max-width: 767px) {
  html[data-aetherbot-route="dashboard"] body {
    overflow-x: hidden;
  }

  html[data-aetherbot-route="dashboard"] nav > .container {
    gap: 0.75rem;
    padding-inline: 1rem;
  }

  html[data-aetherbot-route="dashboard"]
    nav
    > .container
    > div:last-child
    > div:first-child {
    display: none;
  }

  html[data-aetherbot-route="dashboard"] nav > .container > div:first-child span {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  html[data-aetherbot-route="dashboard"] main {
    padding-inline: 1rem;
  }

  html[data-aetherbot-route="dashboard"] main > .mb-6:nth-child(2) p {
    overflow-wrap: anywhere;
  }

  html[data-aetherbot-route="dashboard"] main > .mb-6:nth-child(3) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .mb-6:nth-child(3)
    > span {
    margin-left: 0;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .border-b.border-border.mb-6
    > .flex.gap-6.overflow-x-auto {
    scrollbar-width: none;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .border-b.border-border.mb-6
    > .flex.gap-6.overflow-x-auto::-webkit-scrollbar {
    display: none;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .flex.items-center.justify-between.mb-6.flex-wrap.gap-4 {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-aetherbot-route="dashboard"]
    main
    > .flex.items-center.justify-between.mb-6.flex-wrap.gap-4
    > .flex.items-center.gap-3.flex-wrap {
    justify-content: flex-start;
  }

  html[data-aetherbot-route="stocks"] nav > .container {
    gap: 0.75rem;
    padding-inline: 1rem;
  }

  html[data-aetherbot-route="stocks"]
    nav
    > .container
    > div:last-child
    > div:first-child {
    display: none;
  }

  html[data-aetherbot-route="stocks"] main {
    padding-inline: 1rem;
  }

  html[data-aetherbot-route="stocks"]
    main
    > .flex.items-center.justify-between.mb-6 {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
  }

  html[data-aetherbot-route="stocks"]
    main
    > .flex.items-center.justify-between.mb-6
    > .flex.items-center.gap-3 {
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: flex-start;
  }

  html[data-aetherbot-route="stocks"]
    main
    > .flex.items-center.justify-between.mb-6
    button {
    padding-inline: 0.5rem;
    white-space: nowrap;
  }
}