/*
 * Cloudy : Bootstrap (CSS seul) configuré par ses variables, et styles propres à l'explorateur pour ce que Bootstrap
 * ne fournit pas (arbre, séparateur, disposition façon explorateur Windows).
 * 1. thème  2. base  3. composants Bootstrap configurés  4. explorateur  5. fonctions  6. pages
 */

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

/* couleurs, bordures, arrondis et ombre de Bootstrap : celles de l'explorateur, pour toutes les pages */
: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;
   /* textes d'aide : plus clairs que le texte secondaire */
   --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);

   /* propres à l'explorateur (sans équivalent Bootstrap) */
   --ex-grid: #ebebeb;
   --ex-hover: #f2f2f2;
   --ex-selected: #e3e3e3;
   --ex-selected-border: #c8c8c8;
   --ex-button-hover: #e0e0e0;
   --ex-button-hover-border: #c4c4c4;
   --ex-button-active: #d0d0d0;
   --ex-scroll: #c7c7c7;
   --ex-scroll-hover: #9e9e9e;
   --ex-folder: #f0b429;
   --ex-line: #a0a0a0;
   --ex-warning: #e0a800;
   --ex-shadow-dialog: 0 16px 40px rgba(0, 0, 0, .25);
   /* retrait intérieur des fenêtres (sections et séparateurs pleine largeur s'en servent) */
   --ex-dialog-padding: 16px;

   /* tailles de texte fixes de l'explorateur (le reste suit l'échelle de Bootstrap) */
   --fs-xs: 11px;
   --fs-sm: 12px;
   --fs-md: 13px;
   --fs-lg: 14px;
}

[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;
   --ex-grid: #333;
   --ex-hover: #2a2d2e;
   --ex-selected: #3a3d41;
   --ex-selected-border: #575b60;
   --ex-button-hover: #3d3d3d;
   --ex-button-hover-border: #555;
   --ex-button-active: #4a4a4a;
   --ex-scroll: #4a4a4a;
   --ex-scroll-hover: #6a6a6a;
   --ex-folder: #e8b13a;
   --ex-line: #5a5a5a;
}

/* explorateur : interface compacte, 1rem = 13 px ; boutons, champs, marges et fenêtres de Bootstrap suivent */
html.app-compact {
   font-size: 13px;
}

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

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

/* barres de défilement fines et discrètes : poignée grise sur fond transparent */
* {
   scrollbar-width: thin;
   scrollbar-color: var(--ex-scroll) transparent;
}

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

/* navigateurs sans scrollbar-color (anciens Chrome / Safari) */
::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
   background: transparent;
}

::-webkit-scrollbar-thumb {
   border: 2px solid transparent;
   border-radius: 8px;
   background: var(--ex-scroll) padding-box;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--ex-scroll-hover) padding-box;
}

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

/* variante de bouton « fantôme » (barres, arbre) : sans cadre, fond et contour au survol */
.btn-ghost {
   --bs-btn-color: var(--bs-body-color);
   --bs-btn-bg: transparent;
   --bs-btn-border-color: transparent;
   --bs-btn-hover-color: var(--bs-body-color);
   --bs-btn-hover-bg: var(--ex-button-hover);
   --bs-btn-hover-border-color: var(--ex-button-hover-border);
   --bs-btn-active-color: var(--bs-body-color);
   --bs-btn-active-bg: var(--ex-button-active);
   --bs-btn-active-border-color: var(--ex-button-hover-border);
   --bs-btn-disabled-color: var(--bs-body-color);
   --bs-btn-disabled-bg: transparent;
   --bs-btn-disabled-border-color: transparent;
   --bs-btn-disabled-opacity: .4;
   --bs-btn-focus-shadow-rgb: 128, 128, 128;
   --bs-btn-padding-y: .25rem;
   --bs-btn-padding-x: .75rem;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
}

/* menus (clic droit, menu du logo) : dropdown Bootstrap, entrées arrondies en retrait, séparateurs pleine largeur */
.context-menu {
   --bs-dropdown-min-width: 240px;
   --bs-dropdown-padding-x: 4px;
   --bs-dropdown-padding-y: 4px;
   --bs-dropdown-border-radius: var(--bs-border-radius-lg);
   --bs-dropdown-divider-margin-y: 4px;
   --bs-dropdown-divider-bg: var(--bs-border-color);
   --bs-dropdown-item-padding-x: 10px;
   --bs-dropdown-item-padding-y: 5px;
   --bs-dropdown-item-border-radius: var(--bs-border-radius);
   --bs-dropdown-link-hover-bg: var(--ex-button-hover);
   --bs-dropdown-link-active-color: var(--bs-body-color);
   --bs-dropdown-link-active-bg: var(--ex-button-active);
   position: fixed;
   z-index: 1050;
   box-shadow: var(--bs-box-shadow);
}

.context-menu .dropdown-item {
   display: flex;
   align-items: center;
   gap: 10px;
}

.context-menu .dropdown-divider {
   margin-inline: calc(-1 * var(--bs-dropdown-padding-x));
}

/* fenêtres : modales Bootstrap (.modal.fade), en-tête et pied fixes, corps seul défilant (modal-dialog-scrollable) */
.modal {
   --bs-modal-width: 380px;
   --bs-modal-margin: 24px;
   --bs-modal-padding: var(--ex-dialog-padding);
   --bs-modal-header-padding-x: var(--ex-dialog-padding);
   --bs-modal-header-padding-y: 12px;
   --bs-modal-header-padding: var(--bs-modal-header-padding-y) var(--bs-modal-header-padding-x);
   --bs-modal-border-color: var(--bs-border-color);
   --bs-modal-box-shadow: var(--ex-shadow-dialog);
}

.modal-backdrop {
   --bs-backdrop-opacity: .35;
}

.modal-content {
   box-shadow: var(--bs-modal-box-shadow);
}

/* titre : toute la largeur libre, les boutons de l'en-tête (aperçu : Modifier, Télécharger…) passent à droite */
.modal-title {
   flex: 1;
   min-width: 0;
   font-size: var(--fs-lg);
}

/* bulle de résultat : toast Bootstrap ; clic : historique */
.ex-toast {
   --bs-toast-max-width: min(480px, calc(100vw - 32px));
   --bs-toast-padding-x: 14px;
   --bs-toast-padding-y: 10px;
   --bs-toast-font-size: 1rem;
   --bs-toast-bg: var(--bs-body-bg);
   --bs-toast-border-color: var(--bs-border-color);
   --bs-toast-border-radius: var(--bs-border-radius-lg);
   --bs-toast-box-shadow: var(--bs-box-shadow);
   position: fixed;
   right: 16px;
   bottom: 36px;
   /* sous le fond des fenêtres (1050) : grisée quand une fenêtre est ouverte */
   z-index: 1045;
   width: auto;
   cursor: pointer;
   animation: ex-toast-in .2s ease-out;
}

.ex-toast .toast-body {
   display: flex;
   align-items: center;
   gap: 8px;
}

@keyframes ex-toast-in {
   from {
      opacity: 0;
      transform: translateY(8px);
   }
}

/* panneau de transfert (comme la fenêtre de copie de Windows) : carte Bootstrap */
.transfer-panel {
   --bs-card-border-color: var(--bs-border-color);
   --bs-card-border-radius: var(--bs-border-radius-lg);
   --bs-card-cap-bg: transparent;
   --bs-card-cap-padding-y: 8px;
   --bs-card-cap-padding-x: 12px;
   --bs-card-spacer-y: 10px;
   --bs-card-spacer-x: 12px;
   position: fixed;
   right: 16px;
   bottom: 32px;
   z-index: 1040;
   width: min(440px, calc(100vw - 32px));
   box-shadow: var(--bs-box-shadow);
}

/* progression : trait fin */
.transfer-panel .progress {
   --bs-progress-height: 4px;
}

.transfer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-weight: 600;
}

/* vue détails : tableau Bootstrap (survol, ligne sélectionnée = table-active), quadrillage léger */
.details {
   --bs-table-bg: var(--bs-body-bg);
   --bs-table-border-color: var(--ex-grid);
   --bs-table-hover-bg: var(--ex-hover);
   --bs-table-active-bg: var(--ex-selected);
   margin-bottom: 0;
}

.details > :not(caption) > * > * {
   padding: 3px 10px;
   white-space: nowrap;
}

.details th {
   position: sticky;
   top: 0;
   z-index: 1;
   padding-block: 6px;
   border-bottom-color: var(--bs-border-color);
   color: var(--bs-secondary-color);
   font-weight: 400;
}

.details :is(th, td):not(:last-child) {
   border-right: var(--bs-border-width) solid var(--ex-grid);
}

/* ligne sélectionnée : encadrée, et non éclaircie par le survol */
.details td {
   border-top: var(--bs-border-width) solid transparent;
   cursor: default;
}

.details td:first-child {
   border-left: var(--bs-border-width) solid transparent;
}

.details td:last-child {
   border-right: var(--bs-border-width) solid transparent;
}

.details tr.table-active > td,
.details tr.is-drop-target > td {
   border-color: var(--ex-selected-border);
}

.details tr.table-active:hover > *,
.details tr.is-drop-target > * {
   --bs-table-bg-state: var(--ex-selected);
}

.details tr:focus {
   outline: none;
}

/* colonnes secondaires : grises, y compris sur une ligne survolée ou sélectionnée (la couleur « d'état » de
   Bootstrap ne s'y applique pas) */
.details :is(.col-date, .col-type, .col-size) {
   color: var(--bs-secondary-color);
}

.col-name {
   width: 100%;
   max-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
}

.col-name i {
   margin-right: 6px;
}

/* recherche : dossier où se trouve le résultat */
.col-location {
   max-width: 260px;
   overflow: hidden;
   text-overflow: ellipsis;
}

.col-location a {
   color: var(--bs-secondary-color);
   text-decoration: none;
}

.col-location a:hover {
   color: var(--bs-body-color);
   text-decoration: underline;
}

/* listes resserrées (aide, exclusions, rapport de maintenance) */
.compact-list,
.help-body ul,
.maintenance-report ul {
   margin: 6px 0 8px;
   padding-left: 18px;
}

/* icône du résultat d'une opération (bulle, historique) */
.ex-toast.is-success .status-icon {
   color: var(--bs-success);
}

.is-warning .status-icon {
   color: var(--ex-warning);
}

.is-danger .status-icon {
   color: var(--bs-danger);
}

/* 4. explorateur ---------------------------------------------------------------------------------------------- */

.explorer-page {
   overflow: hidden;
}

.explorer {
   display: flex;
   flex-direction: column;
   height: 100vh;
}

/* haut : logo au-dessus de l'arbre, barres au-dessus de la liste (bord gauche sur le séparateur) */
.explorer-top {
   display: flex;
   flex: none;
   border-bottom: var(--bs-border-width) solid var(--bs-border-color);
   background: var(--bs-tertiary-bg);
}

.brand {
   display: flex;
   align-items: center;
   gap: 6px;
   /* largeur du volet + trait du séparateur */
   width: calc(var(--nav-width, 240px) + 1px);
   flex: none;
   padding: 0 14px;
   overflow: hidden;
   border: 0;
   border-right: var(--bs-border-width) solid var(--bs-border-color);
   /* même fond que l'arbre en dessous : une colonne, détachée des barres de la liste */
   background: var(--bs-body-bg);
   color: var(--bs-body-color);
   font-size: 18px;
   font-weight: 600;
   white-space: nowrap;
}

.brand:hover {
   background: var(--ex-button-hover);
}

.brand .bi-cloud-fill {
   font-size: 22px;
}

.brand-version,
.brand-caret {
   color: var(--bs-secondary-color);
   font-size: var(--fs-xs);
   font-weight: 400;
}

.brand:hover .brand-caret {
   color: var(--bs-body-color);
}

/* menu du logo : popover (calque supérieur), placé et dimensionné sous le logo par explorer_controller.js */
.app-menu {
   inset: auto;
   min-width: 0;
   margin: 0;
}

.app-menu:popover-open {
   display: block;
}

.explorer-toolbars {
   flex: 1;
   min-width: 0;
   container: toolbars / inline-size;
}

.explorer-address,
.explorer-commands {
   display: flex;
   align-items: center;
   gap: 2px;
   padding: 6px 8px;
}

.explorer-commands {
   padding-block: 3px;
   overflow-x: auto;
}

/* précédent, parent et fil d'Ariane : groupe Bootstrap (input-group), boutons blancs séparés par un trait */
.address-group {
   flex: 1;
   flex-wrap: nowrap;
   min-width: 0;
   height: 28px;
   margin-right: 6px;
}

.address-group > .btn {
   --bs-btn-bg: var(--bs-body-bg);
   --bs-btn-border-color: var(--bs-border-color);
   --bs-btn-hover-border-color: var(--bs-border-color);
   --bs-btn-active-border-color: var(--bs-border-color);
   --bs-btn-disabled-bg: var(--bs-body-bg);
   --bs-btn-disabled-border-color: var(--bs-border-color);
   --bs-btn-disabled-opacity: 1;
   width: 30px;
}

/* désactivé : seule l'icône s'efface, le trait reste */
.address-group > .btn.disabled i {
   opacity: .35;
}

.address-bar {
   display: flex;
   align-items: center;
   gap: 6px;
   min-width: 0;
   padding-block: 0;
   overflow: hidden;
   white-space: nowrap;
}

.address-bar .breadcrumb {
   --bs-breadcrumb-margin-bottom: 0;
   --bs-breadcrumb-divider: "›";
   --bs-breadcrumb-item-padding-x: 4px;
   flex-wrap: nowrap;
}

.address-bar a {
   padding: 1px 4px;
   border-radius: var(--bs-border-radius-sm);
   color: var(--bs-body-color);
   text-decoration: none;
}

.address-bar a:hover {
   background: var(--ex-button-hover);
}

.search-box {
   position: relative;
   width: 240px;
}

.search-box .form-control {
   height: 28px;
   padding: 0 26px 0 8px;
}

.search-box i {
   position: absolute;
   top: 6px;
   right: 8px;
   color: var(--bs-secondary-color);
   font-size: var(--fs-sm);
}

/* boutons carrés (icône seule) */
.btn-icon {
   --bs-btn-padding-x: 0;
   --bs-btn-padding-y: 0;
   justify-content: center;
   width: 28px;
   height: 28px;
   flex: none;
}

.cmd-sep {
   width: 1px;
   height: 18px;
   margin: 0 4px;
   background: var(--bs-border-color);
}

/* poussé tout à droite de la barre */
.cmd-end {
   margin-left: auto;
}

/* zone des barres étroite (fenêtre ou arbre large) : boutons de la sélection réduits à leur icône (libellé en
   infobulle) */
@container toolbars (max-width: 1300px) {
   .cmd-compact {
      --bs-btn-padding-x: .6rem;
   }

   .cmd-compact .cmd-label {
      display: none;
   }
}

.explorer-main {
   display: flex;
   flex: 1;
   min-height: 0;
}

.explorer-main.is-resizing {
   cursor: col-resize;
   user-select: none;
}

/* volet de navigation */
.explorer-nav {
   width: var(--nav-width, 240px);
   min-width: 140px;
   max-width: 60vw;
   flex: none;
   /* à gauche : nuage de « Racine » aligné sous celui du logo */
   padding: 6px 4px 6px 13px;
   overflow: auto;
}

/* au-dessus de l'arbre : tout replier / tout déplier (reste visible au défilement) */
.tree-tools {
   position: sticky;
   top: -6px;
   z-index: 2;
   display: flex;
   gap: 2px;
   margin: -6px -4px 8px -6px;
   padding: 4px 0;
   background: var(--bs-body-bg);
}

.tree-tool {
   --bs-btn-padding-y: 1px;
   --bs-btn-padding-x: 6px;
   --bs-btn-font-size: var(--fs-xs);
   --bs-btn-color: var(--bs-secondary-color);
   --bs-btn-hover-border-color: transparent;
   gap: 4px;
}

.tree-tool .bi {
   font-size: var(--fs-md);
}

/*
 * arbre : chaque niveau est une liste imbriquée, décalée sous le [+] du parent ; traits pointillés : trait vertical
 * le long des enfants (arrêté au dernier) et trait horizontal vers chaque enfant
 */
.tree {
   --toggle-center: 12px;
   --row-middle: 12px;
   margin: 0 0 0 var(--toggle-center);
   padding: 0;
   list-style: none;
}

/* sous-niveau : trait vertical sous le centre du [+] du parent ; 16 px par niveau */
.tree .tree {
   margin-left: var(--toggle-center);
}

.tree > li {
   position: relative;
   padding-left: 4px;
}

.tree > li::before {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   border-left: 1px dotted var(--ex-line);
}

.tree > li:last-child::before {
   bottom: auto;
   height: var(--row-middle);
}

.tree > li::after {
   content: "";
   position: absolute;
   top: var(--row-middle);
   left: 0;
   width: 8px;
   border-top: 1px dotted var(--ex-line);
}

/* dossier sans [+] : trait prolongé jusqu'à son icône */
.tree > li:has(> .nav-item > span.tree-toggle)::after {
   width: 28px;
}

.nav-item {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 2px;
   height: 24px;
   padding: 0 4px;
}

.nav-item a {
   flex: 1;
   min-width: 0;
   padding: 3px 4px;
   overflow: hidden;
   border-radius: var(--bs-border-radius);
   color: var(--bs-body-color);
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.nav-item a i {
   margin-right: 4px;
}

/* survol / sélection : seulement le libellé (icône + nom), les traits de l'arbre restent visibles */
.nav-item:hover a {
   background: var(--ex-hover);
}

.nav-item.active a {
   background: var(--ex-selected);
}

.tree-toggle {
   display: inline-grid;
   place-items: center;
   width: 16px;
   height: 16px;
   flex: none;
   padding: 0;
   border: 0;
   background: var(--bs-body-bg);
   color: var(--bs-secondary-color);
   font-size: var(--fs-xs);
   line-height: 1;
}

button.tree-toggle:hover {
   background: var(--ex-button-hover);
   color: var(--bs-body-color);
}

span.tree-toggle {
   background: transparent;
}

/* racine : nuage à la place du [+] */
.nav-root .tree-toggle {
   color: inherit;
   font-size: var(--fs-lg);
}

.icon-folder {
   color: var(--ex-folder);
}

.icon-file {
   color: var(--bs-secondary-color);
}

/* séparateur glissable entre l'arbre et la liste */
.explorer-splitter {
   z-index: 2;
   width: 5px;
   flex: none;
   margin: 0 -2px;
   border-inline: 2px solid transparent;
   background: var(--bs-border-color);
   background-clip: content-box;
   cursor: col-resize;
   touch-action: none;
}

.explorer-splitter:hover,
.explorer-splitter.is-dragging {
   border-width: 1px;
   background: var(--bs-primary);
   background-clip: content-box;
}

/* conteneur de la liste : porte le cadre de dépôt, qui ne défile pas avec elle */
.explorer-pane {
   position: relative;
   display: flex;
   flex: 1;
   min-width: 0;
}

/* liste : glisser un nom déplace ; ailleurs, rectangle de sélection (pas de sélection de texte) */
.explorer-view {
   position: relative;
   flex: 1;
   min-width: 0;
   overflow: auto;
   user-select: none;
}

.item-name {
   cursor: default;
}

.marquee {
   position: absolute;
   z-index: 3;
   border: 1px solid var(--bs-tertiary-color);
   background: rgba(128, 128, 128, .15);
   pointer-events: none;
}

/* déplacement d'un élément de la liste : dossier de destination survolé (lignes de la liste : voir .details) */
.nav-item.is-drop-target a,
.address-bar a.is-drop-target,
.btn-icon.is-drop-target {
   background: var(--ex-selected);
   box-shadow: inset 0 0 0 1px var(--ex-selected-border);
}

/* messages discrets (liste vide, aucun résultat, aperçu impossible, historique vide) */
.explorer-empty,
.search-truncated,
.preview-message,
.activity-notice {
   color: var(--bs-secondary-color);
}

.explorer-empty {
   display: grid;
   place-items: center;
   height: 100%;
   text-align: center;
}

.explorer-empty i {
   font-size: 48px;
}

.search-truncated {
   margin: 8px 10px;
   font-size: var(--fs-sm);
}

/* dépôt de fichiers de l'ordinateur : cadre au-dessus de la partie visible de la liste */
.drop-overlay {
   position: absolute;
   inset: 8px;
   z-index: 5;
   display: none;
   place-items: center;
   border: 2px dashed var(--bs-primary);
   border-radius: var(--bs-border-radius-lg);
   background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg) 85%);
   color: var(--bs-primary);
   pointer-events: none;
}

.explorer-view.is-dragover + .drop-overlay {
   display: grid;
}

/* icône et texte groupés au centre */
.drop-overlay-message {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   font-size: 18px;
   text-align: center;
}

.drop-overlay-message .bi {
   font-size: 56px;
   line-height: 1;
}

/* barre d'état */
.explorer-status {
   display: flex;
   gap: 16px;
   padding: 3px 12px;
   border-top: var(--bs-border-width) solid var(--bs-border-color);
   background: var(--bs-tertiary-bg);
   color: var(--bs-secondary-color);
   font-size: var(--fs-sm);
   white-space: nowrap;
}

/* écran étroit : liste seule */
@media (max-width: 767.98px) {
   .brand {
      width: auto;
      border-right: 0;
   }

   .explorer-nav,
   .explorer-splitter,
   .search-box {
      display: none;
   }
}

/* 5. fonctions ------------------------------------------------------------------------------------------------ */

.sync-plan {
   max-height: 260px;
   overflow-y: auto;
   font-size: var(--fs-sm);
}

.sync-plan .plan-summary {
   margin-bottom: 4px;
   font-weight: 600;
}

.sync-plan .plan-item {
   padding: 1px 0;
   word-break: break-all;
}

.sync-plan .plan-item i {
   margin-right: 6px;
}

/* aperçu d'un fichier : fenêtre presque plein écran, contenu centré */
.preview-dialog {
   --bs-modal-width: 1100px;
}

.preview-dialog .modal-dialog {
   height: calc(100% - 2 * var(--bs-modal-margin));
}

.preview-dialog .modal-content {
   height: 100%;
}

.preview-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.preview-body {
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
   min-height: 0;
   overflow: auto;
   background: var(--ex-hover);
}

.preview-image,
.preview-video {
   max-width: 100%;
   max-height: 100%;
}

.preview-image {
   object-fit: contain;
   background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}

.preview-pdf,
.preview-html {
   width: 100%;
   height: 100%;
   border: 0;
   background: #fff;
}

/* texte affiché ou en cours d'édition : même rendu */
.preview-text,
.preview-editor {
   flex: 1;
   align-self: stretch;
   min-width: 0;
   margin: 0;
   padding: 12px;
   overflow: auto;
   border: 0;
   background: var(--bs-body-bg);
   color: var(--bs-body-color);
   font-family: var(--bs-font-monospace);
   font-size: var(--fs-sm);
   white-space: pre;
   tab-size: 4;
}

.preview-editor {
   outline: none;
   resize: none;
}

.preview-message {
   margin: 0;
}

/* historique d'activité */
.activity-dialog {
   --bs-modal-width: 680px;
}

.activity-list {
   margin: 0;
   list-style: none;
}

.activity-notice {
   padding: 24px var(--ex-dialog-padding);
   text-align: center;
}

.activity-entry {
   border-bottom: var(--bs-border-width) solid var(--ex-grid);
}

.activity-head {
   display: flex;
   align-items: baseline;
   gap: 8px;
   padding: 6px var(--ex-dialog-padding);
}

.activity-head .bi {
   color: var(--bs-secondary-color);
}

/* ligne avec détail : toute la ligne ouvre / ferme */
summary.activity-head {
   list-style: none;
   cursor: pointer;
}

summary.activity-head::-webkit-details-marker {
   display: none;
}

summary.activity-head:hover {
   background: var(--ex-hover);
}

.activity-message {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: 1px;
   min-width: 0;
}

.activity-entry.is-danger .activity-message {
   color: var(--bs-danger);
}

/* résultat, date et détails : texte d'aide */
.activity-sub,
.activity-head time,
.activity-details {
   color: var(--bs-tertiary-color);
   font-size: var(--fs-sm);
}

.activity-sub {
   overflow-wrap: anywhere;
}

.activity-head time {
   flex: none;
   white-space: nowrap;
}

.activity-caret {
   font-size: var(--fs-xs);
   transition: transform .15s;
}

.activity-caret.is-empty {
   visibility: hidden;
}

details[open] > summary .activity-caret {
   transform: rotate(180deg);
}

.activity-details {
   max-height: 200px;
   margin: 0 var(--ex-dialog-padding) 6px 38px;
   padding-left: 16px;
   overflow: auto;
   word-break: break-all;
}

/* aide et Options : intertitres et sections */
.help-dialog {
   --bs-modal-width: 620px;
}

.options-dialog {
   --bs-modal-width: 520px;
}

.dialog-section-title,
.help-body h3 {
   margin: 0 0 4px;
   font-size: var(--fs-md);
   font-weight: 600;
}

.help-body h3:not(:first-child) {
   margin-top: 10px;
}

/* aide : une seule taille de texte (titres, code, touches) */
.help-body :is(code, kbd) {
   font-size: inherit;
}

.help-body li {
   margin-bottom: 3px;
}

.help-body kbd {
   padding: 0 4px;
   border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius-sm);
   background: var(--bs-tertiary-bg);
   color: var(--bs-secondary-color);
}

/* sections d'une fenêtre (Options), séparées par un trait pleine largeur */
.dialog-section {
   margin: 0 calc(-1 * var(--ex-dialog-padding));
   padding: 12px var(--ex-dialog-padding);
   border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.dialog-section:first-child {
   padding-top: 0;
   border-top: 0;
}

.dialog-section:last-child {
   padding-bottom: 0;
}

/* exclusions : hauteur selon le contenu (4 lignes minimum), défilement au-delà */
.form-control.exclusions-input {
   field-sizing: content;
   min-height: calc(4lh + 10px);
   max-height: 50vh;
   resize: none;
}

/* 6. pages ---------------------------------------------------------------------------------------------------- */

/* connexion, création du compte, clé de secours, erreurs : carte centrée */
.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;
}