@import "tailwindcss";
@import "basecoat-css";

@config '../tailwind.config.js';

@theme {
  --color-sand: #f9eabc;
  --color-sand-dark: #998a5c;
}

:root {
  --primary: rgb(217 119 6); /* amber-600 */
  --primary-foreground: rgb(255 251 235); /* amber-50 */
  --secondary: rgb(146 64 14); /* amber-800 */
  --secondary-foreground: rgb(254 243 199); /* amber-100 */
  --accent: rgb(251 191 36); /* amber-400 */
  --accent-foreground: rgb(63 43 8); /* amber-950 */
  --background: rgb(249 234 188); /* sand */
  --foreground: rgb(28 25 23); /* stone-900 */
  --card: rgb(254 252 232); /* yellow-50 */
  --card-foreground: rgb(28 25 23);
  --muted: rgb(254 249 195); /* yellow-100 */
  --muted-foreground: rgb(120 113 108); /* stone-500 */
  --border: rgb(229 213 160); /* sand-dark variant */
  --input: rgb(229 213 160);
  --ring: rgb(217 119 6); /* amber-600 */
  --destructive: rgb(220 38 38); /* red-600 */
  --popover: rgb(255 255 255);
  --popover-foreground: rgb(28 25 23);
}

.dark {
  --primary: rgb(245 158 11); /* amber-500 */
  --primary-foreground: rgb(63 43 8); /* amber-950 */
  --secondary: rgb(120 53 15); /* amber-900 */
  --secondary-foreground: rgb(253 230 138); /* amber-200 */
  --accent: rgb(245 158 11); /* amber-500 */
  --accent-foreground: rgb(255 251 235); /* amber-50 */
  --background: rgb(63 43 8);
  --foreground: rgb(250 250 249); /* stone-50 */
  --card: rgb(63 43 8);
  --card-foreground: rgb(250 250 249);
  --muted: rgb(120 68 5);
  --muted-foreground: rgb(249, 243, 146); /* amber-200 */
  --border: rgb(147, 113, 13);
  --input: rgb(146 83 8);
  --ring: rgb(245 158 11); /* amber-500 */
  --destructive: rgb(239 68 68); /* red-500 */
  --popover: rgb(63 43 8);
  --popover-foreground: rgb(250 250 249);
}

html,
body {
  @apply h-full;
}

/* Subtle honeycomb - no pattern (Firefox fix), explicit colors, theme-aware */
/* SVGs inlined as data URIs to avoid Bun bundler resolution and eliminate extra HTTP requests */
html {
  background-color: var(--background);
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='43.4' viewBox='0 0 50 43.4'%3E%3Cpolygon points='24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2' fill='none' stroke='rgba(0,0,0,0.08)' stroke-width='0.6'/%3E%3Cpolygon points='49.8,22 62.3,29.2 62.3,43.7 49.8,50.9 37.3,43.7 37.3,29.2' fill='none' stroke='rgba(0,0,0,0.08)' stroke-width='0.6'/%3E%3Cpolygon points='-0.2,22 12.3,29.2 12.3,43.7 -0.2,50.9 -12.7,43.7 -12.7,29.2' fill='none' stroke='rgba(0,0,0,0.08)' stroke-width='0.6'/%3E%3Cpolygon points='37.3,0.3 49.8,7.5 49.8,22 37.3,29.2 24.8,22 24.8,7.5' fill='none' stroke='rgba(0,0,0,0.08)' stroke-width='0.6'/%3E%3Cpolygon points='12.3,0.3 24.8,7.5 24.8,22 12.3,29.2 -0.2,22 -0.2,7.5' fill='none' stroke='rgba(0,0,0,0.08)' stroke-width='0.6'/%3E%3C/svg%3E"); */
  background-repeat: repeat;
}
html.dark {
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='43.4' viewBox='0 0 50 43.4'%3E%3Cpolygon points='24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='0.6'/%3E%3Cpolygon points='49.8,22 62.3,29.2 62.3,43.7 49.8,50.9 37.3,43.7 37.3,29.2' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='0.6'/%3E%3Cpolygon points='-0.2,22 12.3,29.2 12.3,43.7 -0.2,50.9 -12.7,43.7 -12.7,29.2' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='0.6'/%3E%3Cpolygon points='37.3,0.3 49.8,7.5 49.8,22 37.3,29.2 24.8,22 24.8,7.5' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='0.6'/%3E%3Cpolygon points='12.3,0.3 24.8,7.5 24.8,22 12.3,29.2 -0.2,22 -0.2,7.5' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='0.6'/%3E%3C/svg%3E"); */
}

/* Body transparent so html honeycomb shows through */
body {
  background: transparent;
}

@keyframes loadingBar {
  0% {
    left: 0%;
    right: 100%;
    width: 0%;
  }
  10% {
    left: 0%;
    right: 75%;
    width: 25%;
  }
  90% {
    right: 0%;
    left: 75%;
    width: 25%;
  }
  100% {
    left: 100%;
    right: 0%;
    width: 0%;
  }
}

/* View Transitions - Cross-document transitions */
@view-transition {
  navigation: auto;
}

/* Book cover view transitions */
.book-cover {
  view-transition-name: var(--book-cover-name);
}

.book-title {
  view-transition-name: var(--book-title-name);
}

.genre-name {
  view-transition-name: var(--genre-name);
}

/* Smooth transitions for common elements */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

/* Book cover specific transitions */
::view-transition-old(book-cover),
::view-transition-new(book-cover) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Book title specific transitions */
::view-transition-old(book-title),
::view-transition-new(book-title) {
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
}

/* Sidebar structure and nav (all breakpoints where sidebar is visible) */
.sidebar {
  @apply border-border bg-background text-foreground flex flex-col border-r;
  padding: 1rem 0;
}

.sidebar header {
  @apply flex items-center gap-2 px-4 pb-4;
}

.sidebar header img {
  @apply shrink-0;
}

.sidebar header span {
  @apply text-foreground font-semibold;
  white-space: nowrap;
}

.sidebar > ul {
  @apply flex flex-col gap-0.5 px-2;
}

.sidebar > ul li {
  @apply list-none;
}

.sidebar > ul a {
  @apply text-foreground block rounded-md px-3 py-2 text-sm font-medium transition-colors;
  white-space: nowrap;
}

.sidebar > ul a:hover {
  @apply bg-muted text-foreground;
}

.sidebar > ul a[aria-current="page"] {
  @apply bg-primary text-primary-foreground;
}

.sidebar > ul a[aria-current="page"]:hover {
  @apply bg-primary/90 text-primary-foreground;
}

.sidebar hr {
  @apply border-border my-4;
}

.sidebar footer {
  @apply mt-auto flex flex-col gap-1 px-4 pt-4;
}

.sidebar footer a,
.sidebar footer button {
  @apply text-muted-foreground inline-flex items-center gap-2 rounded-md px-2 py-1.5 text-sm no-underline transition-colors;
  white-space: nowrap;
}

.sidebar footer a:hover,
.sidebar footer button:hover {
  @apply bg-muted text-foreground;
}

.sidebar footer a[aria-current="page"] {
  @apply bg-primary text-primary-foreground;
}

.sidebar footer a[aria-current="page"]:hover {
  @apply bg-primary/90 text-primary-foreground;
}

/* User block in sidebar (when logged in) */
.sidebar ul a:has(.avatar) {
  @apply flex items-center gap-2;
}

.sidebar .avatar {
  @apply size-8 shrink-0 overflow-hidden rounded-full;
}

.sidebar .avatar img {
  @apply size-full object-cover;
}

/* Desktop: sidebar fixed, full width; content offset */
@media (min-width: 1024px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    flex-shrink: 0;
  }

  .layout-content {
    margin-left: 280px;
    width: calc(100% - 280px);
  }
}

/* Tablet: same full sidebar as desktop so text isn’t truncated */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    flex-shrink: 0;
  }

  .layout-content {
    margin-left: 280px;
    width: calc(100% - 280px);
  }
}

/* Mobile: sidebar hidden, opened via drawer */
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 768px) {
  .sidebar-backdrop {
    display: none;
  }
}

/* CSS-only tabs (e.g. profile Following/Followers) */
.tabs {
  @apply flex flex-wrap gap-0;
}

.tabs .tab-content {
  @apply w-full flex-shrink-0 basis-full;
}

.tabs .tab-label {
  @apply border-border text-muted-foreground hover:text-foreground cursor-pointer border-b-2 border-transparent px-4 py-2 text-sm font-medium transition-colors;
}

.tabs:has(#tab-following:checked) .tab-label[for="tab-following"],
.tabs:has(#tab-followers:checked) .tab-label[for="tab-followers"] {
  @apply border-primary text-foreground border-b-2;
}

.tabs .tab-panel {
  @apply hidden pt-4;
}

.tabs:has(#tab-following:checked) .tab-panel[data-tab="following"],
.tabs:has(#tab-followers:checked) .tab-panel[data-tab="followers"] {
  @apply block;
}

/* Remove transparency from form controls — use solid backgrounds */
.textarea,
.input,
select.select,
:is(.form, .field) select,
:is(.form, .field) textarea {
  background-color: var(--card);
}
.dark .textarea,
.dark .input,
.dark select.select,
.dark :is(.form, .field) select,
.dark :is(.form, .field) textarea {
  background-color: var(--input);
}

/* Card parts (used with .card from basecoat) */
.card .card-header {
  @apply px-6;
}

.card .card-body {
  @apply px-6;
}