/* Modern UI enhancements for e-library */
:root{
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.08);
  --shadow-md: 0 6px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.18);
  --easing: cubic-bezier(.2,.8,.2,1);
  --reader-toolbar-h: 64px;
}

/* Navbar */
.navbar{
  backdrop-filter: saturate(1.2) blur(8px);
  background: color-mix(in srgb, var(--surface-3) 80%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  position: relative;
  z-index: 1040; /* Above page content, below modals/backdrops */
}
/* Ensure dropdown overlays form controls */
.dropdown-menu{ z-index: 1075; }

/* Cards */
.card{
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.card.hover-lift{ transition: transform .2s var(--easing), box-shadow .2s var(--easing); }
.card.hover-lift:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card .card-img-top{
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  /* Ensure consistent covers on mobile */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
}

/* Buttons */
.btn{ border-radius: var(--radius-sm); }
.btn-primary{ box-shadow: 0 0 0 rgba(0,0,0,0); transition: box-shadow .2s var(--easing), transform .15s var(--easing); }
.btn-primary:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.18); transform: translateY(-1px); }

/* Tables */
.table-modern{ --bs-table-bg: var(--surface-1); border-radius: var(--radius-lg); overflow: hidden; }
.table-modern thead th{ background: var(--surface-3); border-bottom: 1px solid var(--border); font-weight: 600; }
.table-modern tbody tr{ transition: background-color .2s var(--easing); }
.table-modern tbody tr:hover{ background: color-mix(in srgb, var(--surface-3) 25%, transparent); }
/* Responsive table helper: parent scroll on small screens */
.table-wrap{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Sticky header on admin tables */
.table-wrap .table thead th { position: sticky; top: 0; z-index: 1; }

/* Badges */
.badge-soft{ background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--on-primary); border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent); }
.badge-muted{ background: color-mix(in srgb, var(--border) 20%, transparent); color: var(--text-2); border: 1px solid color-mix(in srgb, var(--border) 40%, transparent); }

/* Skeletons */
.skeleton{ position: relative; overflow: hidden; background: color-mix(in srgb, var(--surface-3) 50%, transparent); }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-1) 55%, transparent), transparent); transform: translateX(-100%); animation: shimmer 1.2s infinite var(--easing); }
@keyframes shimmer{ 100%{ transform: translateX(100%);} }

/* Toasts */
.toast-container{ z-index: 1080; pointer-events: none; }
.toast{ border-radius: var(--radius-md); box-shadow: var(--shadow-md); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); pointer-events: auto; }

/* Modals */
.modal-content{ border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }

/* Forms */
.form-control, .form-select{ border-radius: var(--radius-sm); }

/* Utilities */
.rounded-xl{ border-radius: var(--radius-lg) !important; }
.shadow-soft{ box-shadow: var(--shadow-sm) !important; }
.shadow-deep{ box-shadow: var(--shadow-md) !important; }

/* Reader buttons */
.reader-controls .btn{ min-width: 96px; }

/* Mobile refinements */
@media (max-width: 575.98px){
  :root{ --reader-toolbar-h: 56px; }
  .navbar .navbar-brand{ font-size: 1rem; }
  .btn{ padding: .435rem .75rem; }
  .toast-container{ inset: .5rem .5rem auto auto; }
  .reader-controls .btn{ min-width: 72px; }
}

/* Sticky mobile action bar (book page) */
.mobile-action-bar{
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: .5rem env(safe-area-inset-right) calc(.5rem + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  box-shadow: 0 -6px 18px rgba(0,0,0,.12);
  z-index: 1025;
  display: none;
}
.mobile-action-bar .btn{ width: 100%; }
@media (max-width: 575.98px){
  .mobile-action-bar{ display: block; }
  .has-mobile-bar{ padding-bottom: 76px !important; }
}

/* Skip link (accessibility) */
.skip-link{
  position: absolute; left: 8px; top: -40px; z-index: 1100;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); padding: 6px 10px; border-radius: var(--radius-sm);
}
.skip-link:focus{ top: 8px; outline: 3px solid var(--focus-ring); }

/* Ratings */
.rating-badge{ font-weight: 600; }

/* Admin/Author scoped navbar accents */
.scope-admin .navbar {
  background: linear-gradient(90deg, var(--surface-3), var(--primary));
}
.scope-author .navbar {
  background: linear-gradient(90deg, var(--surface-3), #7c3aed);
}

/* Dense table mode (admin preference) */
body.dense-tables .table.table-modern th,
body.dense-tables .table.table-modern td {
  padding-top: .35rem;
  padding-bottom: .35rem;
}
body.dense-tables .table.table-modern {
  font-size: .9rem;
}

/* Home grid: list view option */
.book-grid[data-view="list"] .col-6,
.book-grid[data-view="list"] .col-md-3 {
  flex: 0 0 100%;
  max-width: 100%;
}
.book-grid[data-view="list"] .card {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.book-grid[data-view="list"] .card-img-top {
  width: 120px;
  height: 168px;
  object-fit: cover;
}
.book-grid[data-view="list"] .card-body {
  padding: 12px 12px 12px 0;
}

/* Subtle hover for action buttons */
.btn.hover-quiet:hover { opacity: .9; }

/* Bookshelf view */
.book-grid[data-view="shelf"]{
  /* Tune shelf rhythm and style */
  --shelf-row-h: 280px;
  --shelf-thickness: 14px;
  --shelf-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  --shelf-highlight: color-mix(in srgb, var(--surface-1) 60%, transparent);
  --grain: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, rgba(0,0,0,.03) 6px 12px);
  /* Optional external texture (e.g., Unsplash) */
  --shelf-image: none;
  /* Wood-like shelf with subtle grain and lip highlight */
  background-image:
    /* photo texture */ var(--shelf-image),
    /* subtle grain */ var(--grain),
    /* shelf stripes */ repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--shelf-row-h) - var(--shelf-thickness)),
      var(--shelf-color) calc(var(--shelf-row-h) - var(--shelf-thickness)),
      var(--shelf-color) var(--shelf-row-h)
    ),
    /* shelf lip highlight line */ repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--shelf-row-h) - var(--shelf-thickness) - 2px),
      var(--shelf-highlight) calc(var(--shelf-row-h) - var(--shelf-thickness) - 2px),
      transparent calc(var(--shelf-row-h) - var(--shelf-thickness) + 2px),
      transparent var(--shelf-row-h)
    );
  background-size: cover, auto, auto, auto;
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-position: center, top left, top left, top left;
  background-blend-mode: multiply, normal, normal, normal;
  background-attachment: local;
  /* Tighter vertical rhythm for shelf rows */
  row-gap: 32px;
  padding-top: 8px; padding-bottom: 8px;
}
.book-grid[data-view="shelf"] > [class^="col-"],
.book-grid[data-view="shelf"] > [class*=" col-"]{ position: relative; }
.book-grid[data-view="shelf"] > [class^="col-"]::after,
.book-grid[data-view="shelf"] > [class*=" col-"]::after{
  /* Per-column shelf lip for depth */
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -2px;
  height: var(--shelf-thickness);
  background: linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.35));
  border-radius: 2px; filter: blur(.2px); opacity: .65; pointer-events: none;
}
.book-grid[data-view="shelf"] .card{
  background: transparent;
  border: 0;
  box-shadow: none;
  height: var(--shelf-row-h);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.book-grid[data-view="shelf"] .book-cover{
  position: relative;
  height: var(--cover-h, 220px);
  width: 100%;
  border-radius: 8px;
  overflow: visible;
  transform-origin: bottom center;
  transform: translateY(var(--vy, 0)) rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
  transition: transform .2s var(--easing), filter .2s var(--easing);
  margin-bottom: 6px; /* sit just above the shelf lip */
}
.book-grid[data-view="shelf"] .book-cover::before{
  /* spine shadow on the left */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: linear-gradient(to right, rgba(0,0,0,.18), rgba(0,0,0,0));
  border-top-left-radius: 8px; border-bottom-left-radius: 8px;
  pointer-events: none;
}
.book-grid[data-view="shelf"] .book-cover::after{
  /* page edge highlight on the right */
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 12px;
  background: linear-gradient(to left, rgba(255,255,255,.22), rgba(255,255,255,0));
  border-top-right-radius: 8px; border-bottom-right-radius: 8px;
  pointer-events: none;
}
.book-grid[data-view="shelf"] .card:hover .book-cover{
  transform: translateY(calc(var(--vy, 0) - 2px)) rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.24));
}
.book-grid[data-view="shelf"] .card-img-top{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.book-grid[data-view="shelf"] .card-body{
  background: color-mix(in srgb, var(--surface-1) 85%, transparent);
  border-radius: 10px;
  margin-top: .5rem;
  padding: .5rem .5rem .5rem .5rem;
  box-shadow: var(--shadow-sm);
  transition: opacity .2s var(--easing), transform .2s var(--easing);
  opacity: 0; transform: translateY(4px);
}
.book-grid[data-view="shelf"] .card:where(:hover, :focus-within) .card-body{ opacity: .98; transform: translateY(0); }
.book-grid[data-view="shelf"] .rating-badge{ position: absolute; right: 10px; top: 10px; }
@media (min-width: 768px){
  .book-grid[data-view="shelf"] .col-md-3{ flex: 0 0 20%; max-width: 20%; } /* 5 per row on md+ for denser shelf */
}
@media (max-width: 575.98px){
  .book-grid[data-view="shelf"]{ --shelf-row-h: 260px; }
  .book-grid[data-view="shelf"] .card-img-top{ height: 200px; }
}