/*
 * Booklib : Bootstrap (CSS seul) configuré par ses variables (même thème que Cloudy), et styles propres à la
 * bibliothèque pour ce que Bootstrap ne fournit pas (couvertures, scanner, valeurs proposées par les sources).
 * 1. thème  2. base  3. composants Bootstrap configurés  4. bibliothèque  5. fiche  6. formulaire  7. scanner  8. pages
 */

/* 1. thème ---------------------------------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
   --bs-body-font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
   --bs-body-color: #1b1b1b;
   --bs-body-color-rgb: 27, 27, 27;
   --bs-secondary-color: #616161;
   --bs-secondary-color-rgb: 97, 97, 97;
   --bs-tertiary-color: #8a8a8a;
   --bs-tertiary-color-rgb: 138, 138, 138;
   --bs-tertiary-bg: #f3f3f3;
   --bs-tertiary-bg-rgb: 243, 243, 243;
   --bs-border-color: #e5e5e5;
   --bs-border-color-translucent: #e5e5e5;
   --bs-border-radius-sm: 3px;
   --bs-border-radius: 4px;
   --bs-border-radius-lg: 8px;
   --bs-box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
   /* couleur principale : brun reliure */
   --bs-primary: #7a4a1e;
   --bs-primary-rgb: 122, 74, 30;
   --bs-link-color: #8a5524;
   --bs-link-color-rgb: 138, 85, 36;
   --bs-link-hover-color: #5e3815;
   --bs-link-hover-color-rgb: 94, 56, 21;

   --bl-accent-hover: #643c17;
   --bl-cover-bg: #e9e4dc;
   --bl-cover-text: #6b5d4c;
   --bl-scroll: #c7c7c7;
   --bl-scroll-hover: #9e9e9e;
   --bl-chip-bg: #f6f1ea;
   --bl-chip-border: #e2d6c6;
   /* contour des champs et des boutons collés aux champs (btn-field) */
   --bl-field-border: #d6d6d6;
   --bl-field-border-hover: #b8b8b8;
   --bl-shadow-cover: 0 2px 6px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .05);
}

[data-bs-theme="dark"] {
   --bs-body-bg: #191919;
   --bs-body-bg-rgb: 25, 25, 25;
   --bs-body-color: #e6e6e6;
   --bs-body-color-rgb: 230, 230, 230;
   --bs-secondary-color: #a0a0a0;
   --bs-secondary-color-rgb: 160, 160, 160;
   --bs-tertiary-color: #8a8a8a;
   --bs-tertiary-color-rgb: 138, 138, 138;
   --bs-tertiary-bg: #202020;
   --bs-tertiary-bg-rgb: 32, 32, 32;
   --bs-border-color: #2f2f2f;
   --bs-border-color-translucent: #2f2f2f;
   --bs-primary: #c98b4f;
   --bs-primary-rgb: 201, 139, 79;
   --bs-link-color: #d9a06a;
   --bs-link-color-rgb: 217, 160, 106;
   --bs-link-hover-color: #ebbb8d;
   --bs-link-hover-color-rgb: 235, 187, 141;

   --bl-accent-hover: #b57a40;
   --bl-cover-bg: #2b2723;
   --bl-cover-text: #a99a88;
   --bl-scroll: #4a4a4a;
   --bl-scroll-hover: #6a6a6a;
   --bl-chip-bg: #26221e;
   --bl-chip-border: #3d352c;
   --bl-field-border: #3a3a3a;
   --bl-field-border-hover: #555;
   --bl-shadow-cover: 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* 2. base ----------------------------------------------------------------------------------------------------- */

/* liens : soulignés au survol seulement (pas les boutons, menus, cartes… qui sont aussi des liens) */
a {
   text-decoration: none;
}

a:hover:not(.btn, .nav-link, .dropdown-item, .page-link, .navbar-brand, .list-group-item, .book-card, .badge) {
   text-decoration: underline;
}

/* « hidden » l'emporte toujours, même sur les classes d'affichage de Bootstrap (d-flex, .show…) */
[hidden] {
   display: none !important;
}

* {
   scrollbar-width: thin;
   scrollbar-color: var(--bl-scroll) transparent;
}

*:hover {
   scrollbar-color: var(--bl-scroll-hover) transparent;
}

body {
   background: var(--bs-tertiary-bg);
}

.min-w-0 {
   min-width: 0;
}

/* 3. composants Bootstrap configurés -------------------------------------------------------------------------- */

.btn-primary {
   --bs-btn-bg: var(--bs-primary);
   --bs-btn-border-color: var(--bs-primary);
   --bs-btn-hover-bg: var(--bl-accent-hover);
   --bs-btn-hover-border-color: var(--bl-accent-hover);
   --bs-btn-active-bg: var(--bl-accent-hover);
   --bs-btn-active-border-color: var(--bl-accent-hover);
   --bs-btn-disabled-bg: var(--bs-primary);
   --bs-btn-disabled-border-color: var(--bs-primary);
   --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
   --bs-btn-color: var(--bs-primary);
   --bs-btn-border-color: var(--bs-primary);
   --bs-btn-hover-bg: var(--bs-primary);
   --bs-btn-hover-border-color: var(--bs-primary);
   --bs-btn-active-bg: var(--bs-primary);
   --bs-btn-active-border-color: var(--bs-primary);
   --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.text-bg-primary {
   background-color: var(--bs-primary) !important;
}

/* champs : contour homogène avec les boutons qui leur sont collés (input-group) */
.form-control,
.form-select,
.input-group-text {
   border-color: var(--bl-field-border);
}

.form-control:hover,
.form-select:hover {
   border-color: var(--bl-field-border-hover);
}

.form-select {
   cursor: pointer;
}

/* bouton « champ » : même contour, fond et survol que les champs ; actif (affichage choisi) dans la couleur du thème */
.btn-field {
   --bs-btn-color: var(--bs-secondary-color);
   --bs-btn-bg: var(--bs-body-bg);
   --bs-btn-border-color: var(--bl-field-border);
   --bs-btn-hover-color: var(--bs-body-color);
   --bs-btn-hover-bg: var(--bs-tertiary-bg);
   --bs-btn-hover-border-color: var(--bl-field-border-hover);
   --bs-btn-active-color: var(--bs-primary);
   --bs-btn-active-bg: rgba(var(--bs-primary-rgb), .1);
   --bs-btn-active-border-color: var(--bl-field-border);
   --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
   border-color: rgba(var(--bs-primary-rgb), .5);
   box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

.form-check-input:checked {
   background-color: var(--bs-primary);
   border-color: var(--bs-primary);
}

.pagination {
   --bs-pagination-active-bg: var(--bs-primary);
   --bs-pagination-active-border-color: var(--bs-primary);
   --bs-pagination-color: var(--bs-link-color);
}

.card {
   --bs-card-border-color: var(--bs-border-color);
}

/* 4. bibliothèque --------------------------------------------------------------------------------------------- */

.app-navbar {
   padding-block: 8px;
   border-bottom: 1px solid var(--bs-border-color);
   background: var(--bs-body-bg);
   padding-top: max(8px, env(safe-area-inset-top));
}

.app-brand {
   color: var(--bs-primary);
   font-weight: 600;
}

.app-brand:hover {
   color: var(--bl-accent-hover);
}

.app-search {
   max-width: 520px;
}

.book-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
   gap: 20px 14px;
}

@media (min-width: 768px) {
   .book-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
}

.book-card {
   display: block;
   min-width: 0;
   color: inherit;
   text-decoration: none;
}

.book-cover {
   position: relative;
   overflow: hidden;
   aspect-ratio: 2 / 3;
   border-radius: var(--bs-border-radius);
   background: var(--bl-cover-bg);
   box-shadow: var(--bl-shadow-cover);
   transition: transform .15s ease, box-shadow .15s ease;
}

.book-card:hover .book-cover {
   transform: translateY(-3px);
   box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.book-cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* sans couverture : titre sur fond toile */
.book-cover-placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   padding: 12px;
   border-left: 6px solid rgba(var(--bs-primary-rgb), .35);
   background: var(--bl-cover-bg);
   color: var(--bl-cover-text);
   font-family: Georgia, "Times New Roman", serif;
   font-size: .9rem;
   text-align: center;
   overflow: hidden;
}

.book-cover-placeholder span {
   display: -webkit-box;
   -webkit-line-clamp: 6;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.book-card-title {
   margin-top: 8px;
   font-size: .875rem;
   font-weight: 600;
   line-height: 1.25;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.book-card-author {
   color: var(--bs-secondary-color);
   font-size: .8rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* petites couvertures : grille plus dense, titre seul */
.book-grid-compact {
   grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
   gap: 14px 10px;
}

.book-grid-compact .book-card-title {
   font-size: .75rem;
}

.book-grid-compact .book-card-author,
.book-grid-compact .book-cover-placeholder span {
   display: none;
}

/* tableau : vignette de couverture */
.book-table-cover {
   width: 36px;
}

.book-table-cover img {
   display: block;
   width: 28px;
   height: 40px;
   object-fit: cover;
   border-radius: var(--bs-border-radius-sm);
   box-shadow: var(--bl-shadow-cover);
}

.book-table th {
   font-weight: 600;
   color: var(--bs-secondary-color);
   white-space: nowrap;
}

/* barre des actions par lot : visible en bas de l'écran tant que des livres sont cochés */
.batch-bar {
   position: sticky;
   bottom: 1rem;
   z-index: 1020;
}

.book-list-cover {
   display: grid;
   flex: none;
   place-items: center;
   width: 40px;
   height: 60px;
   overflow: hidden;
   border-radius: 3px;
   background: var(--bl-cover-bg);
   color: var(--bl-cover-text);
}

.book-list-cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* 5. fiche ---------------------------------------------------------------------------------------------------- */

.book-detail {
   padding: 20px;
   border: 1px solid var(--bs-border-color);
   border-radius: var(--bs-border-radius-lg);
   background: var(--bs-body-bg);
}

.book-detail-cover {
   max-width: 280px;
   margin-inline: auto;
}

.book-detail-cover img,
.book-detail-cover .book-cover-placeholder {
   width: 100%;
   border-radius: var(--bs-border-radius);
   box-shadow: var(--bl-shadow-cover);
}

.book-detail-cover .book-cover-placeholder {
   aspect-ratio: 2 / 3;
   font-size: 1.1rem;
}

.book-description {
   max-width: 72ch;
   line-height: 1.6;
}

.book-facts {
   display: grid;
   grid-template-columns: minmax(110px, max-content) 1fr;
   gap: 4px 16px;
   font-size: .9rem;
}

.book-facts dt {
   color: var(--bs-secondary-color);
   font-weight: 400;
}

.book-facts dd {
   margin: 0;
   overflow-wrap: anywhere;
}

.book-notes {
   padding: 10px 12px;
   border-left: 3px solid var(--bs-primary);
   background: var(--bl-chip-bg);
   border-radius: var(--bs-border-radius);
}

.book-toc {
   margin-top: 8px;
   font-family: inherit;
   font-size: .875rem;
   white-space: pre-wrap;
}

.status-switch .btn-group {
   gap: 0;
}

/* 6. formulaire ----------------------------------------------------------------------------------------------- */

.book-form .card-body {
   padding: 16px;
}

.cover-panel {
   position: sticky;
   top: 72px;
}

.cover-preview img,
.cover-preview .book-cover-placeholder {
   display: block;
   width: 100%;
   max-width: 240px;
   margin-inline: auto;
   aspect-ratio: 2 / 3;
   object-fit: contain;
   border-radius: var(--bs-border-radius);
   background: var(--bl-cover-bg);
   box-shadow: var(--bl-shadow-cover);
}

.cover-candidates {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
   gap: 8px;
}

.cover-candidate {
   padding: 3px;
   border: 2px solid transparent;
   border-radius: var(--bs-border-radius-lg);
   background: none;
   color: var(--bs-secondary-color);
   font-size: 10px;
   line-height: 1.2;
}

.cover-candidate img {
   display: block;
   width: 100%;
   aspect-ratio: 2 / 3;
   margin-bottom: 3px;
   object-fit: cover;
   border-radius: 3px;
   background: var(--bl-cover-bg);
}

.cover-candidate:hover {
   border-color: var(--bl-chip-border);
}

.cover-candidate.selected {
   border-color: var(--bs-primary);
   color: var(--bs-body-color);
}

/* valeurs proposées par les sources, sous les champs */
.alternatives {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin-top: 4px;
}

.alt-chip {
   display: inline-flex;
   align-items: baseline;
   gap: 6px;
   max-width: 100%;
   padding: 2px 8px;
   border: 1px solid var(--bl-chip-border);
   border-radius: 999px;
   background: var(--bl-chip-bg);
   color: var(--bs-body-color);
   font-size: 12px;
   text-align: left;
}

.alt-chip:hover {
   border-color: var(--bs-primary);
}

.alt-source {
   flex: none;
   color: var(--bs-primary);
   font-weight: 600;
}

.alt-value {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.is-filled {
   animation: filled .8s ease;
}

@keyframes filled {
   from {
      background-color: rgba(var(--bs-primary-rgb), .18);
   }
}

/* boutons d'enregistrement toujours visibles en bas de l'écran */
.form-actions {
   position: sticky;
   bottom: 0;
   z-index: 10;
   display: flex;
   justify-content: flex-end;
   gap: 8px;
   margin-inline: -12px;
   padding: 12px;
   padding-bottom: max(12px, env(safe-area-inset-bottom));
   border-top: 1px solid var(--bs-border-color);
   background: var(--bs-body-bg);
}

/* 7. scanner -------------------------------------------------------------------------------------------------- */

.scanner {
   max-width: 640px;
}

/* onglets de la page d'ajout : sur une ligne, même sur téléphone */
.scan-tabs .nav-link {
   padding-inline: .5rem;
   white-space: nowrap;
}

@media (max-width: 575.98px) {
   .scan-tabs .nav-link {
      font-size: .875rem;
   }
}

/* vue de la caméra : large et basse (un code-barres est horizontal), jamais plus de 40 % de l'écran */
.scanner-view {
   position: relative;
   overflow: hidden;
   aspect-ratio: 16 / 9;
   max-height: 40vh;
   border-radius: var(--bs-border-radius-lg);
   background: #111;
}

.scanner-view video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* cadre de visée : le code-barres au centre */
.scanner-frame {
   position: absolute;
   inset: 22% 14%;
   border: 2px solid rgba(255, 255, 255, .85);
   border-radius: 10px;
   box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
   opacity: 0;
   transition: opacity .2s;
}

.scanner-view.live .scanner-frame {
   opacity: 1;
}

.scanner-view.live .scanner-frame::after {
   content: "";
   position: absolute;
   left: 8px;
   right: 8px;
   top: 50%;
   height: 2px;
   background: #ff4d4d;
   box-shadow: 0 0 8px #ff4d4d;
   animation: scanline 1.6s ease-in-out infinite alternate;
}

@keyframes scanline {
   from {
      transform: translateY(-28px);
   }
   to {
      transform: translateY(28px);
   }
}

.scanner-message {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 24px;
   color: #ddd;
   text-align: center;
}

.scanner-message .bi {
   font-size: 40px;
}

.batch-list .list-group-item {
   animation: filled .8s ease;
}

/* 8. pages ---------------------------------------------------------------------------------------------------- */

.login-page {
   display: grid;
   place-items: center;
   min-height: 100vh;
   background: var(--bs-tertiary-bg);
}

.login-card {
   width: min(380px, calc(100vw - 32px));
}

.login-card-wide {
   width: min(460px, calc(100vw - 32px));
}

.recovery-key {
   padding: 12px;
   border: 1px dashed var(--bs-warning);
   border-radius: var(--bs-border-radius);
   background: var(--bs-warning-bg-subtle);
   font-family: var(--bs-font-monospace);
   font-size: 1.05rem;
   letter-spacing: .05em;
   text-align: center;
   word-break: break-all;
}

.error-icon {
   color: var(--bs-secondary-color);
   font-size: 48px;
}

.search-page {
   max-width: 760px;
}

.flex-none {
   flex: none;
}

/* version à côté du logo : vérifier d'un coup d'œil la version en production */
.app-version {
   margin-left: 4px;
   color: var(--bs-secondary-color);
   font-size: 11px;
   font-weight: 400;
}