@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  --color-indigo-50: lab(98.26% 0 0);
  --color-indigo-100: lab(96.52% -.0000298023 .0000119209);
  --color-indigo-200: lab(90.952% 0 -.0000119209);
  --color-indigo-300: lab(84.92% 0 -.0000119209);
  --color-indigo-400: lab(66.128% -.0000298023 .0000119209);
  --color-indigo-500: lab(48.496% 0 0);
  --color-indigo-600: lab(34.924% 0 0);
  --color-indigo-700: lab(27.036% 0 0);
  --color-indigo-800: lab(15.204% 0 -.00000596046);
  --color-indigo-900: lab(7.78201% -.0000149012 0);
  --color-indigo-950: lab(2.75381% 0 0);

  --color-gray-100: lab(96.52% -.0000298023 .0000119209);
  --color-gray-200: lab(90.952% 0 -.0000119209);
  --color-gray-300: lab(84.92% 0 -.0000119209);
  --color-gray-400: lab(66.128% -.0000298023 .0000119209);
  --color-gray-500: lab(48.496% 0 0);
  --color-gray-600: lab(34.924% 0 0);
  --color-gray-700: lab(27.036% 0 0);
  --color-gray-800: lab(15.204% 0 -.00000596046);
  --color-gray-900: lab(7.78201% -.0000149012 0);

  --tw-ring-color: lab(34.924% 0 0);
}

main {
  font-family: 'Inter' !important;
  background-color: var(--color-indigo-900) !important;
}

.bg-\[\#2a2f35\],
.bg-\[\#39404b\],
.bg-\[\#272c31\],
.bg-\[\#2a2e33\] {
  background-color: var(--color-indigo-800) !important;
}

.bg-\[\#2c3136\] {
  background-color: var(--color-indigo-700) !important;
}

.hover\:bg-\[\#313842\]:hover,
.hover\:bg-\[\#23272b\]:hover,
.hover\:bg-\[\#343a40\]:hover {
  background-color: var(--color-indigo-700) !important;
}

.border-gray-600,
.border-gray-700 {
  border-color: var(--color-indigo-700) !important;
}

.bg-violet-600 {
  background-color: oklch(0.6914 0.1936 300.74);
}

.focus\:ring-\[\#4a9eff\]:focus {
  --tw-ring-color: var(--color-indigo-500);
}

body main,
body nav,
body aside div,
body>div>div:nth-child(2)>div,
body div.flex.min-h-screen div.flex-1.min-w-0.flex.flex-col.min-h-screen div.sticky.top-0.z-10.border-b.shadow-md {
  font-family: 'Inter' !important;
  background-color: var(--color-indigo-900) !important;
}

/* h1,
section h2 {
  font-family: 'Playfair Display' !important;
} */

/* Yamtrack title + logo */
aside h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto;
}

aside h1::before {
  content: "";
  width: 22px;
  height: 22px;
  background: url("/static/favicon/apple-touch-icon.png") center / contain no-repeat;
  flex-shrink: 0;
  /* display: inline-block; */
}

.media-grid>div {
  position: relative;
}

/* List in grid view */
.media-grid:not([id^="media-grid-"])>div>div>div:nth-child(2),
.media-grid>div>div:nth-child(2) {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.media-grid:not([id^="media-grid-"])>div>div>div:nth-child(2)::before,
.media-grid>div>div:nth-child(2)::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(100% + 3rem);
  pointer-events: none;
  z-index: -1;
  background-image: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--color-indigo-800) 50%, transparent) 40%, color-mix(in oklab, var(--color-indigo-800) 85%, transparent) 70%, color-mix(in oklab, var(--color-indigo-800) 98%, transparent) 100%);
}

.media-grid:not([id^="media-grid-"])>div>div>div:nth-last-child(1),
.media-grid>div>div:nth-child(3) {
  z-index: 10;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Number of pages or progress buttons */
.media-grid div[id^="progress-"]>div:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
}

.media-grid div[id^="progress-"]>div:nth-child(2)>div {
  color: white !important;
}

.media-grid div.absolute.bottom-2.left-2,
.media-grid div[id^="progress-"]>div:nth-child(2) {
  bottom: 40px !important;
  z-index: 11;
}

.media-grid img {
  object-fit: cover;
}

/* Listing in table view */
div:has(> table),
table {
  background-color: var(--color-indigo-800) !important;
  border-radius: 0.5rem;
  border: var(--color-indigo-500)
}

table>tbody>tr:hover {
  background-color: var(--color-indigo-700) !important;

}

/* Media details page */

/* Badges */
main span.px-3.py-1.bg-violet-600.text-white.rounded-full.text-sm {
  color: var(--color-indigo-900);
}

/* Notes */
main div.container.mx-auto.px-8.py-12 div div.flex.flex-col:nth-child(1) div.flex.flex-col div.flex.flex-wrap.gap-4 {
  flex-direction: row-reverse;
  justify-content: flex-end !important;
}

main div.container.mx-auto.px-8.py-12 div div.flex.flex-col:nth-child(1) div.flex.flex-col div.flex.flex-wrap.gap-4>div:nth-child(2)>div.cursor-pointer {
  height: 100%;
}

main div.container.mx-auto.px-8.py-12 div div.flex.flex-col:nth-child(1) div.flex.flex-col div.flex.flex-wrap.gap-4>div:nth-child(2)>div>div>div>span:nth-child(1) {
  font-size: x-large !important;
}