/* Notarkiv custom styles - kompletterar Bootstrap */

.lightbox-image {
  cursor: zoom-in;
  transition: opacity 0.15s;
}
.lightbox-image:hover {
  opacity: 0.85;
}

/* Lightbox - dölj kontroller tills musen är över, alltid synliga på touch */
.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.15s;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  padding: 0.5rem;
}
.lightbox-nav {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s;
}
.lightbox-wrap:hover .lightbox-close,
.lightbox-wrap:hover .lightbox-nav {
  opacity: 0.85;
}
@media (hover: none) {
  .lightbox-close,
  .lightbox-nav {
    opacity: 0.7;
  }
}

@keyframes mb-flash {
  0%   { background-color: #fff3cd; border-color: #ffc107; }
  100% { background-color: transparent; }
}
.mb-applied {
  animation: mb-flash 1.5s ease-out;
}

.unit-picker-item {
  border-radius: 4px;
  transition: background-color 0.1s ease-in;
  cursor: pointer;
}
.unit-picker-item:hover,
.unit-picker-item:focus {
  background-color: #cfe2ff;
  color: #052c65 !important;
  outline: none;
}

.storage-unit {
  margin-left: 0.5rem;
}

.storage-unit:hover > div:first-child {
  background: #f8f9fa;
}

.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline-block;
}
.htmx-request.htmx-indicator {
  display: inline-block;
}

/* Knappar som är mitt i en HTMX-request får tydligt "håller på"-state */
button.htmx-request,
a.htmx-request,
input.htmx-request {
  cursor: wait;
  opacity: 0.65;
  pointer-events: none;
}

/* Global page-spinner-overlay - visas via JS i base.html under långsamma
   HTMX-requests (default 250ms grace för att slippa flash på snabba). */
#global-spinner {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none;
}
#global-spinner.visible {
  display: flex;
}