/*
 * Radio4 theme for Nova, following radio4.dk: Inter, deep purple (#43005e) sidebar with white menu,
 * purple actions (#6e0a8c), light grey page (#f7f7f7) and the site's peach → pink → violet accent
 * gradient. The primary color itself comes from config/nova.php "brand.colors".
 *
 * Served as a static file from resources/views/vendor/nova/partials/meta.blade.php, because
 * Nova only loads tool styles for logged-in users and the login page needs the theme too.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --r4-purple: 110, 10, 140;
  --r4-purple-dark: 67, 0, 94;
  --r4-page: #f7f7f7;
  --r4-accent: linear-gradient(90deg, #ffbfa6 0%, #ff7e74 35%, #f1278f 70%, #7805d6 100%);
}

body,
#nova {
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif;
}

body {
  background-color: var(--r4-page);
}

/* Logo: purple on light backgrounds (login), white in the purple header block. */
.radio4-logo {
  color: rgb(var(--r4-purple-dark));
  height: 1.5rem;
  width: auto;
}

/* Header (logo, search, user menu) stays visible while the page scrolls. Sticky goes on the
 * wrapper div, because the header itself is the wrapper's only content and so has no room to
 * stick inside it. z-index above the sidebar (10). */
#nova > div:first-child {
  position: sticky;
  top: 0;
  z-index: 20;
}

#nova header {
  position: relative;
}

/* Nova checks the license per host once an hour; the badge shows whenever that check cannot
 * reach nova.laravel.com or the host is not on the license, so it is hidden here. */
#nova header a[href='https://nova.laravel.com/licenses'] {
  display: none;
}

/* Thin accent gradient under the header, as on radio4.dk. */
#nova header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--r4-accent);
}

@media (min-width: 1024px) {
  /* The logo block above the sidebar is purple, so sidebar and logo read as one column. */
  #nova header > div.shrink-0 {
    align-self: stretch;
    background-color: rgb(var(--r4-purple-dark));
  }

  #nova header > div.shrink-0 a,
  #nova header > div.shrink-0 .radio4-logo {
    color: #fff;
  }

  /* Desktop sidebar: fixed, full height, deep purple. */
  #nova [dusk='content'] > div:first-child {
    position: fixed;
    top: 3.5rem;
    bottom: 0;
    overflow-y: auto;
    background-color: rgb(var(--r4-purple-dark));
    z-index: 10;
  }
}

.sidebar-menu[data-screen='desktop'] a,
.sidebar-menu[data-screen='desktop'] button,
.sidebar-menu[data-screen='desktop'] h3,
.sidebar-menu[data-screen='desktop'] span {
  color: rgba(255, 255, 255, 0.8);
}

.sidebar-menu[data-screen='desktop'] a:hover,
.sidebar-menu[data-screen='desktop'] button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar-menu[data-screen='desktop'] .font-bold,
.sidebar-menu[data-screen='desktop'] .font-bold span {
  color: #fff;
}

.sidebar-menu[data-screen='desktop'] a.font-bold {
  background-color: rgba(var(--r4-purple), 0.6);
}

/* Login card: accent gradient along the top and under "Welcome Back!". */
.max-w-\[25rem\] {
  border-top: 4px solid transparent;
  border-image: var(--r4-accent) 1;
}

.max-w-\[25rem\] > h2::after {
  content: '';
  display: block;
  width: 6rem;
  height: 3px;
  margin: 1rem auto 0;
  background: var(--r4-accent);
}