/* ===========================
   Bibliotheca UI — Core Tokens
   =========================== */
:root{
  --ink-900:#0E1420; --ink-700:#1F2A44;
  --paper-50:#FFFBF2; --paper-100:#F6EFE3; --sepia-200:#E8DDCC;
  --bookmark-500:#D7263D; --bookmark-600:#B61E33;
  --leaf-500:#22C55E; --inkwell-500:#2563EB;
  --amber-500:#F59E0B; --danger-500:#EF4444;
  --muted-600:#6B7280; --muted-300:#D1D5DB; --shadow:rgba(15,18,32,.18);

  --radius-sm:8px; --radius:12px; --radius-lg:18px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;

  --step--1:.875rem; --step-0:1rem; --step-1:1.125rem; --step-2:1.375rem; --step-3:1.75rem; --step-4:2.25rem;

  --easing:cubic-bezier(.22,.61,.36,1);
  --duration-1:120ms; --duration-2:220ms; --duration-3:380ms;

  --bg:var(--paper-50); --surface:var(--paper-100);
  --text:var(--ink-900); --text-muted:var(--muted-600);
  --border:var(--muted-300); --link:var(--inkwell-500);
}

html[data-theme="dark"]{
  --bg:#0B0F18; --surface:#121826;
  --text:#EEF2FF; --text-muted:#A9B1C6;
  --border:#2A3142;
  /* keep brand colors */
}

*{box-sizing:border-box}
html,body{
  min-height:100%;
  height:auto;
}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font: 400 1rem/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
main{
  flex:1 0 auto;
  width:100%;
  min-height:0;
}
.footer{
  flex-shrink:0;
}
h1,h2,h3{font-family:"Literata", Georgia, serif; line-height:1.2; color:var(--ink-700)}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3{color:#E7ECFF}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

/* Surfaces */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--space-6);
  box-shadow:0 8px 24px var(--shadow);
}

/* Elevated shelf cards */
.shelf-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:var(--space-5); box-shadow:0 2px 8px var(--shadow);
  transition:all var(--duration-2) var(--easing); position:relative;
}
.shelf-card:hover{
  transform:translateY(-2px); box-shadow:0 8px 24px var(--shadow);
}

/* Shelf card elements */
.shelf-name{
  font: 700 1.25rem/1.2 "Literata", Georgia, serif; margin:0 0 var(--space-2);
  color:var(--text); cursor:pointer; border:none; background:transparent; width:100%;
  border-bottom:2px solid transparent; transition:border-color var(--duration-2) var(--easing);
  padding:0;
}
.shelf-name:focus{
  outline:none; border-bottom-color:var(--bookmark-500);
}
.shelf-name.editing{
  border-bottom-color:var(--border);
}

/* Editable book fields - matching bookshelf name styling */
.editable-book-field{
  border:none; background:transparent; font:inherit; color:inherit; width:100%;
  border-bottom:2px solid transparent; transition:border-color var(--duration-2) var(--easing);
  padding:0; margin:0; cursor:pointer;
}
.editable-book-field:hover{
  border-bottom-color:var(--border);
}
.editable-book-field:focus{
  outline:none; border-bottom-color:var(--bookmark-500);
}
.editable-book-field.editing{
  border-bottom-color:var(--border);
}

/* Book editing - specific styling for book title and author */
.book-title .shelf-name,
.book-meta .shelf-name{
  border:1px solid transparent; background:transparent; font:inherit; color:inherit; 
  width:100%; border-radius:4px; transition:all var(--duration-2) var(--easing);
  padding:2px 4px; margin:0; cursor:pointer; display:inline-block;
}
.book-title .shelf-name:hover,
.book-meta .shelf-name:hover{
  border-color:var(--border); background:color-mix(in oklab, var(--border), 10%, transparent);
}
.book-title .shelf-name:focus,
.book-meta .shelf-name:focus{
  outline:none; border-color:var(--bookmark-500); background:color-mix(in oklab, var(--bookmark-500), 5%, transparent);
}
.book-title .shelf-name.editing,
.book-meta .shelf-name.editing{
  border-color:var(--border); background:color-mix(in oklab, var(--border), 15%, transparent);
}

.edit-hint{
  font-size:.8rem; color:var(--text-muted); opacity:0; transition:opacity var(--duration-2) var(--easing);
}
.book-hero:hover .edit-hint{
  opacity:1;
}

.shelf-meta{
  display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-4);
  font:400 .9rem/1.4 "Inter", system-ui, sans-serif; color:var(--text-muted);
}
.shelf-meta-item{
  display:flex; align-items:center; gap:.4rem;
}

.shelf-stats{
  display:flex; gap:var(--space-3); margin-bottom:var(--space-4);
  font-family:"IBM Plex Mono", ui-monospace, monospace;
}
.stat-inline{
  font-size:.9rem; color:var(--text-muted);
}

.card-menu{
  position:absolute; top:var(--space-3); right:var(--space-3);
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  padding:.25rem; border-radius:4px; opacity:1; transition:all var(--duration-2) var(--easing);
}

/* Buttons — base */
.btn{
  --btn-bg:transparent; --btn-text:var(--text);
  --btn-bd:var(--border); --btn-shadow:0 6px 16px var(--shadow);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.7rem 1rem; border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-text);
  border-radius:var(--radius); font-weight:600; cursor:pointer;
  transition:background var(--duration-2) var(--easing), color var(--duration-2) var(--easing), border-color var(--duration-2) var(--easing), transform var(--duration-1) var(--easing), box-shadow var(--duration-2) var(--easing);
  text-decoration: none;
}
.btn:focus-visible{
  outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 4px var(--inkwell-500);
}
.btn:active{transform:translateY(1px)}
.btn:hover{text-decoration:none}

/* Primary (bookmark) - Main CTAs */
.btn-primary{
  --btn-bg:var(--bookmark-500); --btn-text:#fff; --btn-bd:transparent;
  box-shadow:var(--btn-shadow);
}
.btn-primary:hover{background:var(--bookmark-600)}

/* Secondary (outline) - Navigation */
.btn-secondary{
  --btn-bg:transparent; --btn-text:var(--text-muted); --btn-bd:var(--border);
}
.btn-secondary:hover{ 
  --btn-bg:color-mix(in oklab, var(--text-muted), 8%, transparent); 
  --btn-text:var(--text) 
}

/* Tertiary (ghost) - Small icons, subtle actions */
.btn-ghost{ 
  --btn-bg:transparent; --btn-text:var(--text-muted); --btn-bd:transparent; 
  --btn-shadow:none; padding:.4rem;
}
.btn-ghost:hover{ 
  --btn-bg:color-mix(in oklab, var(--text-muted), 12%, transparent); 
  --btn-text:var(--text) 
}

/* Outline primary */
.btn-outline-primary{
  --btn-bg:transparent; --btn-text:var(--bookmark-500); --btn-bd:var(--bookmark-500);
}
.btn-outline-primary:hover{background:color-mix(in oklab, var(--bookmark-500), 10%, transparent)}

/* Outline secondary */
.btn-outline-secondary{
  --btn-bg:transparent; --btn-text:var(--muted-600); --btn-bd:var(--muted-300);
}
.btn-outline-secondary:hover{background:color-mix(in oklab, var(--muted-600), 10%, transparent)}

/* Small button variant */
.btn-sm{
  padding:.4rem .8rem; font-size:.875rem;
}

/* Info / Danger */
.btn-info{ --btn-bg:var(--inkwell-500); --btn-text:#fff; --btn-bd:transparent }
.btn-info:hover{ filter:brightness(1.05) }
.btn-danger{ --btn-bg:var(--danger-500); --btn-text:#fff; --btn-bd:transparent }
.btn-danger:hover{ filter:brightness(1.05) }

/* Auth variant wrappers */
.auth-btn{ padding:.75rem 1.1rem; border-radius:14px }
.login-btn .fa, .register-btn .fa{ font-size:1.05em }

/* Social Auth Buttons */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.social-btn .btn-icon {
  flex-shrink: 0;
}

.google-btn {
  --btn-bg: #fff;
  --btn-text: #3c4043;
  --btn-bd: #dadce0;
}

.google-btn:hover {
  --btn-bg: #f8f9fa;
  --btn-bd: #c6c6c6;
}

.facebook-btn {
  --btn-bg: #fff;
  --btn-text: #1877f2;
  --btn-bd: #1877f2;
}

.facebook-btn:hover {
  --btn-bg: #f0f6ff;
  --btn-bd: #166fe5;
}

/* Loading spinner for auth buttons */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.1);
  border-left-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Separator with text */
.separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--space-4) 0;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}

.separator-text {
  padding: 0 var(--space-3);
  color: var(--text-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Utilities */
.w-100{ width:100% }
.flex-fill{ flex:1 1 auto }
.container{ max-width:1200px; margin:0 auto; padding:0 var(--space-4) }
.d-flex{ display:flex }
.align-items-center{ align-items:center }
.justify-content-center{ justify-content:center }
.justify-content-between{ justify-content:space-between }
.gap-2{ gap:var(--space-2) }
.gap-3{ gap:var(--space-3) }
.mb-3{ margin-bottom:var(--space-3) }
.mb-4{ margin-bottom:var(--space-4) }
.mt-3{ margin-top:var(--space-3) }
.mt-4{ margin-top:var(--space-4) }
.py-5{ padding-top:var(--space-7); padding-bottom:var(--space-7) }

/* Icons (Font Awesome) */
.fas, .fa{ line-height:0; }

/* Forms */
.input, input[type="text"], input[type="email"], input[type="password"], select, textarea{
  width:100%; padding:.75rem .9rem; border-radius:10px;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
  transition:border-color var(--duration-2) var(--easing), box-shadow var(--duration-2) var(--easing);
}
.input:focus, input:focus, select:focus, textarea:focus{
  border-color:var(--inkwell-500); box-shadow:0 0 0 4px color-mix(in oklab, var(--inkwell-500), 20%, transparent);
  outline:none;
}
label{ display:block; font-size:.95rem; color:var(--text-muted); margin-bottom:.4rem }

/* Tables (including the one you pasted) */
table{
  width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
}
thead{ background:color-mix(in oklab, var(--surface), 70%, var(--sepia-200)) }
th, td{ padding:.75rem .9rem; text-align:left; border-bottom:1px solid var(--border) }
th.text-right, td.text-right{ text-align:right }
tbody tr:nth-child(even){ background:color-mix(in oklab, var(--surface), 85%, var(--sepia-200)) }
tbody tr:hover{ background:color-mix(in oklab, var(--surface), 70%, var(--sepia-200)) }

/* Sortable table headers */
th.sortable{
  cursor:pointer; user-select:none; position:relative;
  transition:background-color var(--duration-2) var(--easing);
}
th.sortable:hover{
  background:color-mix(in oklab, var(--surface), 60%, var(--sepia-200));
}
th.sortable::after{
  content:'⇅'; position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  color:var(--text-muted); font-size:.8rem; opacity:0.5;
}
th.sortable.sort-asc::after{
  content:'↑'; color:var(--text); opacity:1;
}
th.sortable.sort-desc::after{
  content:'↓'; color:var(--text); opacity:1;
}

/* Filter row */
.filter-row{
  display:flex; gap:var(--space-3); align-items:center; margin-bottom:var(--space-4);
  padding:var(--space-3); background:var(--surface); border-radius:var(--radius); border:1px solid var(--border);
}
.filter-row input, .filter-row select{
  min-width:120px; font-size:.9rem; padding:.5rem .75rem;
}
.filter-row label{
  font-size:.85rem; font-weight:600; margin:0; color:var(--text-muted);
}

/* Badges (confidence) */
.confidence-badge{
  display:inline-flex; align-items:center; gap:.4em;
  font:600 .85rem/1 "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  padding:.35rem .6rem; border-radius:999px; border:1px solid currentColor;
}
.confidence-high{ color:var(--leaf-500); background:color-mix(in oklab, var(--leaf-500), 12%, transparent) }
.confidence-medium{ color:var(--amber-500); background:color-mix(in oklab, var(--amber-500), 12%, transparent) }
.confidence-low{ color:var(--danger-500); background:color-mix(in oklab, var(--danger-500), 12%, transparent) }

/* Delete action (books in a shelf) - softer approach */
.delete-btn{
  --btn-bg:transparent; --btn-text:var(--text-muted); --btn-bd:transparent;
  border:1px solid transparent; color:var(--text-muted);
  padding:.4rem .6rem; border-radius:6px; cursor:pointer;
  background:transparent; text-decoration:none; font-size:.9rem;
  transition:all var(--duration-2) var(--easing);
}
.delete-btn:hover{ 
  color:var(--danger-500); border-color:var(--danger-500); 
  background:color-mix(in oklab, var(--danger-500), 8%, transparent); 
  text-decoration:none; 
}

/* Book card improvements */
.book-card .toolbar{ align-items:flex-start }
.book-card .confidence-badge{ margin-top:.25rem; margin-left:auto }

/* Record button (scan page) */
.record-btn{
  --size:64px;
  width:var(--size); height:var(--size); border-radius:999px; border:none; cursor:pointer;
  background:radial-gradient(circle at 50% 50%, #ff6b6b 0 40%, var(--bookmark-500) 60% 100%);
  box-shadow:0 8px 24px var(--shadow), 0 0 0 0 rgba(215,38,61,.5);
  position:relative; transition:transform var(--duration-1) var(--easing);
  color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700;
}
.record-btn::after{
  content:""; position:absolute; inset:-8px; border-radius:inherit; border:3px solid rgba(215,38,61,.6);
  animation:recordPulse 1600ms var(--easing) infinite;
}
.record-btn:hover{ transform:scale(1.03) }
@keyframes recordPulse{
  0%{ transform:scale(1); opacity:1 }
  70%{ transform:scale(1.25); opacity:0 }
  100%{ transform:scale(1.25); opacity:0 }
}

/* Dropzone */
.dropzone{
  border:2px dashed var(--border); border-radius:var(--radius-lg);
  padding:var(--space-7); background:color-mix(in oklab, var(--surface), 85%, var(--sepia-200));
  text-align:center; color:var(--text-muted);
  transition:border-color var(--duration-2) var(--easing), box-shadow var(--duration-2) var(--easing), background var(--duration-2) var(--easing);
}
.dropzone.is-dragover{
  border-color:var(--inkwell-500);
  box-shadow:0 0 0 6px color-mix(in oklab, var(--inkwell-500), 20%, transparent);
  background:color-mix(in oklab, var(--surface), 60%, var(--sepia-200));
}

/* Cards for shelves & books */
.shelf-card, .book-card{ 
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--space-6);
  box-shadow:0 8px 24px var(--shadow);
}
.shelf-card .title{ font-family:"Literata", Georgia, serif; font-size:var(--step-1) }
.meta{ color:var(--text-muted); font-size:.92rem }

/* Toolbars */
.toolbar{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
}

/* Hero (landing) */
.hero{
  padding: clamp(48px, 8vw, 120px) 0;
  background:
    radial-gradient(1200px 600px at 100% -100%, color-mix(in oklab, var(--bookmark-500), 8%, transparent), transparent 70%),
    linear-gradient(180deg, var(--paper-50), var(--sepia-200));
  border-bottom:1px solid var(--border);
}
.hero h1{ font-size: clamp(2rem, 4vw, 3rem); margin:0 0 .5rem }
.hero p{ margin: 0 0 1rem }

/* Navigation */
.navbar{
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:var(--space-4) 0; position:sticky; top:0; z-index:100;
  backdrop-filter:blur(8px); background:color-mix(in oklab, var(--surface), 95%, transparent);
}
.navbar-inner{
  display:flex; align-items:center; justify-content:space-between;
}
.navbar-brand{
  font-family:"Literata", Georgia, serif; font-size:var(--step-1);
  color:var(--text); text-decoration:none; font-weight:600;
  display:flex; align-items:center; gap:var(--space-2);
}
.navbar-brand:hover{text-decoration:none; color:var(--bookmark-500)}

/* Hamburger button (hidden on desktop) */
.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none;
  cursor:pointer; padding:var(--space-2); border-radius:6px; position:relative; z-index:101;
  transition:background var(--duration-2) var(--easing);
}
.hamburger span{
  width:24px; height:2px; background:var(--text); border-radius:2px;
  transition:all var(--duration-2) var(--easing);
}
.hamburger:hover{
  background:color-mix(in oklab, var(--text-muted), 10%, transparent);
}
.hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.hamburger.active span:nth-child(2){ opacity:0 }
.hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* Navigation menu */
.nav-menu{
  display:flex; align-items:center; gap:var(--space-3);
}
.nav-link{
  color:var(--text-muted); text-decoration:none; padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm); transition:all var(--duration-2) var(--easing);
  display:flex; align-items:center; gap:var(--space-2); white-space:nowrap;
}
.nav-link i{ font-size:.9em; opacity:.8 }
.nav-link:hover{
  color:var(--text); text-decoration:none; 
  background:color-mix(in oklab, var(--text-muted), 8%, transparent);
}
.nav-link-logout{
  border-left:1px solid var(--border); padding-left:var(--space-4); margin-left:var(--space-2);
}

/* Mobile navigation */
@media (max-width: 768px) {
  .hamburger{ display:flex }
  
  .nav-menu{
    position:fixed; top:0; right:-100%; width:280px; height:100vh;
    flex-direction:column; align-items:stretch; gap:0; padding-top:calc(56px + var(--space-4));
    background:var(--surface); border-left:1px solid var(--border);
    box-shadow:-8px 0 32px var(--shadow); transition:right var(--duration-3) var(--easing);
    overflow-y:auto; z-index:100;
  }
  
  .nav-menu.active{ right:0 }
  
  .nav-link{
    padding:var(--space-4); border-bottom:1px solid var(--border); border-radius:0;
    font-size:1.05rem; justify-content:flex-start;
  }
  .nav-link i{ font-size:1.1em }
  
  .nav-link-logout{
    border-left:none; border-top:2px solid var(--border); padding-left:var(--space-4);
    margin-left:0; margin-top:var(--space-3); background:color-mix(in oklab, var(--danger-500), 5%, transparent);
    color:var(--danger-500);
  }
  .nav-link-logout:hover{
    background:color-mix(in oklab, var(--danger-500), 12%, transparent);
  }
  
  /* Prevent body scroll when menu is open */
  body.menu-open{ overflow:hidden }
  
  /* Overlay backdrop */
  body.menu-open::before{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:99; animation:fadeIn var(--duration-2) var(--easing);
  }
  
  @keyframes fadeIn{
    from{ opacity:0 }
    to{ opacity:1 }
  }
}

/* Footer */
.footer{
  background:var(--ink-700); color:#fff; text-align:center; padding:var(--space-5) 0;
}

/* Focus ring helper (for links in tables etc.) */
.focusable:focus-visible{
  outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 4px var(--inkwell-500);
}

/* Grid layouts */
.row{
  display:flex; flex-wrap:wrap; margin:0 calc(-1 * var(--space-3));
}
.col-md-4{
  flex:0 0 33.333333%; padding:0 var(--space-3); margin-bottom:var(--space-6);
}
.col-md-6{
  flex:0 0 50%; padding:0 var(--space-3); margin-bottom:var(--space-6);
}
.col-md-12{
  flex:0 0 100%; padding:0 var(--space-3); margin-bottom:var(--space-6);
}

/* Grid system */
.grid{ display:grid; gap:var(--space-4) }
.cols-1{ grid-template-columns:1fr }
.cols-2{ grid-template-columns:repeat(2, 1fr) }
.cols-3{ grid-template-columns:repeat(3, 1fr) }
.cols-4{ grid-template-columns:repeat(4, 1fr) }

@media (min-width: 769px) and (max-width: 1024px) {
  .cols-3, .cols-4 { grid-template-columns:repeat(2, 1fr) }
}

/* Stat cards */
.stat-card{
  background:var(--surface); border-radius:var(--radius); padding:var(--space-4);
  text-align:center; border:1px solid var(--border);
}
.stat-value{ font-size:var(--step-2); font-weight:700; color:var(--text); }
.stat-label{ font-size:var(--step--1); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }

/* Book hero layout */
.book-hero{ display:grid; grid-template-columns: 180px 1fr; gap:24px; align-items:start }
@media (max-width: 720px){ .book-hero{ grid-template-columns:1fr } }
.book-cover{
  width:180px; aspect-ratio: 2 / 3; border-radius:12px;
  border:1px solid var(--border); object-fit:cover; background:var(--surface);
  box-shadow:0 12px 28px var(--shadow);
}
.book-cover-placeholder{
  width:180px; aspect-ratio: 2 / 3; border-radius:12px;
  border:1px solid var(--border); background:var(--surface);
  box-shadow:0 12px 28px var(--shadow);
}
.book-title{ font: 700 clamp(1.5rem, 2.6vw, 2.25rem)/1.2 "Literata", Georgia, serif; margin:0 0 .25rem }
.book-meta{ color:var(--text-muted); margin:.25rem 0 1rem }
.book-actions{ display:flex; gap:12px; flex-wrap:wrap; margin:.5rem 0 1rem; align-items:center }

/* Book card thumbnails */
.book-card-thumbnail{
  width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  background:linear-gradient(135deg, var(--surface) 0%, var(--border) 100%);
}
.book-card-img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--duration-2) var(--easing);
}
.book-card:hover .book-card-img{
  transform:scale(1.03);
}
.book-card-img-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--bookmark-500) 0%, var(--surface) 100%);
  color:var(--text-muted); font-size:2rem;
}
.book-card-img-loading{
  background:linear-gradient(135deg, var(--amber-500) 20%, var(--surface) 100%);
}
.book-card-img-placeholder i{
  opacity:0.6;
}

/* Confidence ring */
.confidence-ring{
  --val: 0.92; --hue: 142;
  width:48px; height:48px; border-radius:50%;
  background: conic-gradient(hsl(var(--hue) 63% 47%) calc(var(--val)*360deg), #e5e7eb 0);
  display:grid; place-items:center; font:600 .8rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color:var(--ink-700); border: 2px solid #fff; box-shadow:0 4px 16px var(--shadow);
}
.confidence-ring[data-level="medium"]{ --hue: 42 }
.confidence-ring[data-level="low"]{ --hue: 0 }

/* Chips/tags */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin: .25rem 0 1rem }
.chip{
  padding:.3rem .6rem; border-radius:999px; border:1px solid var(--border);
  color:var(--text-muted); background:transparent; font-weight:600; font-size:.85rem;
}

/* Tabs */
.tabs{ display:flex; gap:16px; border-bottom:1px solid var(--border); margin:16px 0 }
.tab{
  padding:.6rem .2rem; color:var(--text-muted); border-bottom:2px solid transparent;
  font-weight:600; cursor:pointer; background:none; border-left:none; border-right:none; border-top:none;
}
.tab[aria-selected="true"]{ color:var(--text); border-color:var(--bookmark-500) }

/* Mobile action bar */
@media (max-width: 720px){
  .book-actionbar{
    position:sticky; bottom:0; padding:.6rem; background:color-mix(in oklab, var(--bg), 80%, transparent);
    backdrop-filter: blur(8px); border-top:1px solid var(--border); display:flex; gap:8px;
  }
  .book-actionbar .btn{ flex:1 }
}

/* Inline editing */
.editable-title{
  border:none; background:transparent; font:inherit; color:inherit; width:100%;
  border-bottom:2px solid transparent; transition:border-color var(--duration-2) var(--easing);
  padding:0; margin:0;
}
.editable-title:focus{
  outline:none; border-bottom-color:var(--bookmark-500);
}

/* Count chips */
.count-chip{
  padding:.2rem .5rem; border-radius:999px; border:1px solid var(--muted-300);
  color:var(--muted-600); background:transparent; font-weight:600; font-size:.8rem;
}

/* Password strength */
.password-strength{
  height:4px; background:var(--sepia-200); border-radius:2px; margin-top:.5rem; overflow:hidden;
}
.password-strength-bar{
  height:100%; border-radius:2px; transition:width var(--duration-2) var(--easing), background-color var(--duration-2) var(--easing);
  background:var(--muted-300);
}
.strength-weak{ background:var(--danger-500) !important }
.strength-medium{ background:var(--amber-500) !important }
.strength-strong{ background:var(--leaf-500) !important }

/* Password toggle */
.password-field-wrapper{
  position:relative;
}
.password-toggle{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  padding:4px; border-radius:4px; transition:color var(--duration-2) var(--easing);
}
.password-toggle:hover{ color:var(--text) }

/* Skeleton loading */
.skeleton{ background:linear-gradient(90deg,#e5e7eb00 0,#e5e7eb55 50%,#e5e7eb00 100%); background-size:300% 100%; animation:sk 1.2s infinite }
@keyframes sk{ 0%{background-position:0 0} 100%{background-position:-300% 0} }
.skel-line{ height:1rem; border-radius:6px; }

/* Small helpers */
.text-muted{ color:var(--text-muted) }
.hidden{ display:none !important }
.text-center{ text-align:center }
.text-decoration-none{ text-decoration:none !important }

/* Flash messages */
.alert{
  padding:var(--space-4); border-radius:var(--radius); margin-bottom:var(--space-4);
  border:1px solid;
}
.alert-success{
  background:color-mix(in oklab, var(--leaf-500), 12%, transparent);
  color:var(--leaf-500); border-color:var(--leaf-500);
}
.alert-danger{
  background:color-mix(in oklab, var(--danger-500), 12%, transparent);
  color:var(--danger-500); border-color:var(--danger-500);
}
.alert-info{
  background:color-mix(in oklab, var(--inkwell-500), 12%, transparent);
  color:var(--inkwell-500); border-color:var(--inkwell-500);
}

/* ===== Mobile-First Responsive Design ===== */
/* Use a wider breakpoint to catch all phones and tablets */
@media (max-width: 768px){

  /* Container: tighter padding on mobile */
  .container { padding: 0 var(--space-3); max-width:100% }

  /* 1) Layout: always single column; stronger, consistent page padding */
  .grid.cols-3 { grid-template-columns: 1fr !important; }
  .grid.cols-2 { grid-template-columns: 1fr !important; }
  .grid { gap: var(--space-4) !important; }
  
  /* Page headers: stack vertically */
  .page-header {
    flex-direction: column; align-items:flex-start !important; gap:var(--space-3);
  }
  .page-header > div:first-child { width:100% }
  .page-header > div:last-child { 
    width:100%; display:flex; gap:var(--space-2); flex-wrap:wrap;
  }
  .page-header .btn { padding: .6rem .8rem; font-size:.9rem; flex:1; min-width:120px }
  .page-header h1 { font-size:var(--step-2) !important; margin-bottom:var(--space-2) }

  /* 2) Card density & elevation */
  .shelf-card, .book-card, .card {
    padding: var(--space-4) !important;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px var(--shadow) !important;
  }
  .shelf-card:hover, .book-card:hover { transform: none !important; box-shadow: 0 4px 12px var(--shadow) !important; }

  /* 3) Typography: mobile-optimized sizes */
  .shelf-name,
  .book-card h5 { font-size: 1.1rem !important; line-height: 1.3 !important; }
  .meta, .shelf-meta, .stat-inline { font-size: .85rem !important; }
  h1 { font-size: var(--step-3) !important; line-height:1.2 }
  h2 { font-size: var(--step-2) !important; }
  h3 { font-size: var(--step-1) !important; }

  /* 4) Title/author/publisher truncation to avoid 3+ lines */
  .clamp-1, .clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .clamp-1 { -webkit-line-clamp: 1; }
  .clamp-2 { -webkit-line-clamp: 2; }
  .book-card h5, .book-card .meta { max-width: 100%; }

  /* 5) Confidence badge: compact style for mobile */
  .confidence-badge{
    padding: .25rem .45rem !important;
    font-size: .75rem !important;
    border-width: 1px;
  }

  /* 6) Buttons: full-width on mobile for better tap targets */
  .btn { min-height:44px; font-size:.9rem }
  .toolbar { width:100%; gap:var(--space-2) }
  .toolbar .btn { flex:1 }
  
  /* Hide button text on very small screens, keep icons only */
  @media (max-width: 480px) {
    .btn-text { display:none }
    .btn { padding:.7rem .8rem; gap:.4em }
  }
  
  /* Actions: make destructive subtle */
  .delete-btn{ 
    padding: .5rem;
    font-size: .9rem !important;
    min-height:44px;
  }

  /* 7) Reduce icon sizes inside cards */
  .book-card i, .shelf-card i { font-size: .95rem; }

  /* 8) Tables: make them scrollable */
  table { 
    display:block; overflow-x:auto; white-space:nowrap;
    font-size:.85rem;
  }
  th, td { padding:.5rem .6rem }

  /* 9) Forms: better touch targets */
  .input, input[type="text"], input[type="email"], input[type="password"], select, textarea{
    font-size:16px; /* Prevents zoom on iOS */
    min-height:44px; padding:.75rem;
  }
  label { font-size:.9rem }

  /* 10) Filter row: stack vertically */
  .filter-row { flex-direction:column; align-items:stretch }
  .filter-row input, .filter-row select { width:100%; min-width:unset }

  /* 11) Book hero: single column on mobile */
  .book-hero { 
    grid-template-columns:1fr; gap:var(--space-4); text-align:center 
  }
  .book-cover { 
    width:100%; max-width:200px; margin:0 auto; aspect-ratio:2/3 
  }
  .book-actions { justify-content:center }

  /* 12) Hero section: better mobile spacing */
  .hero { padding: var(--space-7) 0 }
  .hero h1 { font-size:clamp(1.75rem, 5vw, 2.5rem) }

  /* 13) Spacing utilities: reduce on mobile */
  .py-5 { padding-top:var(--space-5); padding-bottom:var(--space-5) }
  .mb-4, .mt-4 { margin-bottom:var(--space-3); margin-top:var(--space-3) }
  .mb-3, .mt-3 { margin-bottom:var(--space-2); margin-top:var(--space-2) }

  /* 14) Safe-area padding at the bottom for gesture bars */
  /* DISABLED: Handled by bottom-nav on mobile */
  /* body { padding-bottom: max(env(safe-area-inset-bottom), 16px); } */

  /* 15) Sticky elements: adjust for mobile */
  .navbar { padding:var(--space-3) 0 }
  
  /* 16) Dropzone: more compact on mobile */
  .dropzone { padding:var(--space-5); font-size:.9rem }
  
  /* 17) Shelf stats: wrap better on mobile */
  .shelf-stats { flex-wrap:wrap; gap:var(--space-2); font-size:.85rem }
  .shelf-meta { flex-wrap:wrap; gap:var(--space-2); font-size:.85rem }
}

/* Tablet breakpoint (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { max-width:720px }
  .grid.cols-4 { grid-template-columns:repeat(2, 1fr) }
  .grid.cols-3 { grid-template-columns:repeat(2, 1fr) }
}

/* Utility: apply line-clamp where needed without changing HTML structure */
.book-title, .shelf-name { overflow-wrap: anywhere; }

/* ===== Modern Compact Cards (Locations, Rooms, Furniture, Family) ===== */

/* Compact card with horizontal layout */
.compact-card{
  display:flex; gap:var(--space-4); align-items:flex-start;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--space-4);
  box-shadow:0 2px 8px var(--shadow); transition:all var(--duration-2) var(--easing);
  position:relative;
}
.compact-card:hover{
  box-shadow:0 4px 16px var(--shadow); transform:translateY(-1px);
}

/* Icon container - small and to the left */
.compact-icon{
  flex-shrink:0; width:40px; height:40px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--bookmark-500), 10%, transparent);
  color:var(--bookmark-500); font-size:1.1rem;
}

/* Content area - takes remaining space */
.compact-content{
  flex:1; min-width:0; /* min-width:0 allows text truncation */
}

/* Title */
.compact-title{
  font:600 1.05rem/1.3 "Inter", system-ui, sans-serif; margin:0 0 var(--space-2);
  color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Meta info row */
.compact-meta{
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3);
  align-items:center; margin-bottom:var(--space-3); font-size:.85rem; color:var(--text-muted);
}
.compact-meta-item{
  display:flex; align-items:center; gap:.35rem;
}
.compact-meta-item i{ font-size:.9em; opacity:.7 }

/* Stats badges - compact inline */
.compact-stats{
  display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3);
}
.compact-badge{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.25rem .5rem; border-radius:999px; font-size:.8rem; font-weight:600;
  background:color-mix(in oklab, var(--text-muted), 10%, transparent);
  color:var(--text-muted); border:1px solid var(--border);
}
.compact-badge i{ font-size:.85em; opacity:.8 }

/* Owners/Members avatars - compact horizontal row */
.compact-owners{
  display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3);
  font-size:.85rem; color:var(--text-muted);
}
.compact-avatars{
  display:flex; margin-left:var(--space-2);
}
.compact-avatar{
  width:28px; height:28px; border-radius:50%; border:2px solid var(--surface);
  margin-left:-8px; transition:transform var(--duration-2) var(--easing);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--inkwell-500), 15%, transparent);
  color:var(--inkwell-500); font-size:.75rem;
}
.compact-avatar:first-child{ margin-left:0 }
.compact-avatar:hover{ transform:translateY(-2px); z-index:10 }
.compact-avatar img{ width:100%; height:100%; object-fit:cover }

/* Actions row */
.compact-actions{
  display:flex; gap:var(--space-2); margin-top:var(--space-3);
}
.compact-actions .btn{ font-size:.8rem; padding:.45rem .7rem; flex:1 }

/* Count badge in corner */
.compact-count-badge{
  position:absolute; top:var(--space-2); right:var(--space-2);
  background:var(--leaf-500); color:#fff; border-radius:999px;
  padding:.2rem .5rem; font-size:.75rem; font-weight:700;
  display:flex; align-items:center; gap:.3em;
}

/* Photo variant - for locations */
.compact-card.has-photo{
  flex-direction:column; gap:0;
}
.compact-photo{
  width:100%; height:140px; object-fit:cover; margin:-var(--space-4) -var(--space-4) var(--space-4);
  border-radius:var(--radius) var(--radius) 0 0;
}
.compact-card.has-photo .compact-content{
  width:100%;
}

/* Mobile adjustments for compact cards */
@media (max-width: 768px){
  .compact-card{ gap:var(--space-3); padding:var(--space-3) }
  .compact-icon{ width:36px; height:36px; font-size:1rem }
  .compact-title{ font-size:1rem }
  .compact-meta{ font-size:.8rem; gap:var(--space-2) }
  .compact-badge{ font-size:.75rem; padding:.2rem .45rem }
  .compact-actions .btn{ font-size:.75rem; padding:.4rem .6rem }
  .compact-count-badge{ font-size:.7rem; padding:.15rem .4rem }
  .compact-avatar{ width:24px; height:24px }
}

#editMetadataModal .form-control:focus,
#editMetadataModal .form-select:focus {
    border-color: var(--bookmark-500);
    box-shadow: 0 0 0 0.2rem rgba(var(--bookmark-rgb), 0.25);
}

/* =========================================
   MOBILE APP EXPERIENCE (App-ification)
   ========================================= */

/* 1. Bottom Navigation Bar (Mobile Only) - Redesigned */
.bottom-nav {
    display: none; /* Hidden on desktop */
    position: fixed; /* Always visible at bottom */
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 9999; /* Ensure it's above all content */
    box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
    /* Safe area for notched devices */
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* Ensure it stays fixed during scroll */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bottom-nav-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    height: 64px;
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    color: var(--text-muted);
    text-decoration: none;
    gap: 2px;
    font-size: 0.65rem;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 8px 0;
    position: relative;
    /* Prevent text from wrapping */
    white-space: nowrap;
}

.nav-item i {
    font-size: 1.2rem;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-item span {
    display: block;
    font-size: 0.65rem;
}

.nav-item.active {
    color: var(--bookmark-500);
}

.nav-item.active i {
    transform: translateY(-2px);
}

/* Center "Scan" Button - Elevated Circle */
.nav-item-scan {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Don't show text for scan button */
}

.nav-item-scan span {
    display: none;
}

.nav-item-scan .scan-circle {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--bookmark-500), var(--bookmark-600));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 16px rgba(215, 38, 61, 0.3);
    border: 4px solid var(--bg);
    transition: transform 0.2s ease;
    /* Position above the bar */
    position: absolute;
    top: -32px;
}

.nav-item-scan.active .scan-circle {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(215, 38, 61, 0.4);
}

.nav-item-scan i {
    font-size: 1.4rem;
    color: white;
    margin: 0;
}

/* 2. Floating Action Button (FAB) - For specific pages like Bookshelves */
.fab-scan {
    display: none;
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom)); /* Above bottom nav */
    right: 24px;
    width: 56px;
    height: 56px;
    background: var(--bookmark-500);
    color: white;
    border-radius: 28px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 990;
    transition: transform 0.2s ease;
    text-decoration: none;
}

.fab-scan:hover, .fab-scan:active {
    transform: scale(1.05);
    background: var(--bookmark-600);
    color: white;
}

/* 3. Mobile Adjustments Media Query */
@media (max-width: 768px) {
    /* Show Bottom Nav - ALWAYS FIXED AT BOTTOM */
    .bottom-nav { 
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
    }
    
    /* Only add padding to main to prevent content hiding under bottom-nav */
    main {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)) !important;
        min-height: auto !important;
    }
    
    /* Remove extra padding on body that creates empty space */
    body { 
        padding-bottom: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Footer stays at natural position, just before the padding */
    .footer {
        margin-bottom: 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    }
    
    /* Reduce excessive padding on mobile */
    .py-5 {
        padding-top: var(--space-4) !important;
        padding-bottom: var(--space-3) !important;
    }
    
    .container.py-5 {
        padding-bottom: var(--space-3) !important;
    }
    
    /* Full Screen Modals */
    #editMetadataModal .modal-dialog {
        max-width: 100%;
        width: 100%;
        margin: 0;
        height: 100%;
    }
    
    #editMetadataModal .modal-content {
        height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    
    #editMetadataModal .modal-body {
        overflow-y: auto;
        padding-bottom: 100px; /* Space for keyboard/fab */
    }

    #editMetadataModal .modal-footer {
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid var(--border);
        padding: var(--space-3);
    }

    /* Better Touch Targets */
    .metadata-item-clickable {
        padding: 0.5rem 0.75rem; /* Larger touch area */
    }
    
    /* Hide desktop "Scan" button text to save space */
    .btn-text-mobile-hidden {
        display: none;
    }
    
    /* Show FAB on mobile */
    .fab-scan { display: flex; }
}

/* Extra small screens adjustments */
@media (max-width: 360px) {
    .nav-item {
        font-size: 0.6rem;
        padding: 6px 0;
    }
    
    .nav-item i {
        font-size: 1.1rem;
    }
    
    .nav-item span {
        font-size: 0.6rem;
    }
    
    .nav-item-scan .scan-circle {
        width: 48px;
        height: 48px;
        border-width: 3px;
        top: -28px;
    }
    
    .nav-item-scan i {
        font-size: 1.2rem;
    }
}