/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ==========================================================================
   Polaroid Photo Card Styles
   ========================================================================== */

/* Corkboard background for photo grid */
.polaroid-grid-bg {
  background:
    radial-gradient(circle at 20% 30%, rgba(205, 133, 63, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139, 90, 43, 0.06) 0%, transparent 50%),
    linear-gradient(135deg, #f5f0e8 0%, #ebe4d8 50%, #e8e0d0 100%);
}

/* Polaroid frame base */
.polaroid-card {
  background: linear-gradient(180deg, #fefefe 0%, #f9f7f4 100%);
  padding: 8px 8px 32px 8px;
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              background 0.2s ease;
  transform-origin: center bottom;
}

.polaroid-card:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.12),
    0 16px 32px rgba(0, 0, 0, 0.06),
    inset 0 0 0 1px rgba(0, 0, 0, 0.03);
  z-index: 10;
}

/* Subtle paper texture overlay */
.polaroid-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  border-radius: inherit;
}

/* Photo image container */
.polaroid-image {
  aspect-ratio: 1;
  overflow: hidden;
  background: #e5e5e5;
  position: relative;
  border-radius: 1px;
}

.polaroid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.polaroid-card:hover .polaroid-image img {
  transform: scale(1.02);
}

/* Caption area */
.polaroid-caption {
  font-family: 'Caveat', cursive;
  font-size: 14px;
  font-weight: 500;
  color: #3d3d3d;
  text-align: center;
  position: absolute;
  bottom: 6px;
  left: 8px;
  right: 8px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Rotation variations - applied via nth-child in grid */
.polaroid-rotate-1 { transform: rotate(-2deg); }
.polaroid-rotate-2 { transform: rotate(1.5deg); }
.polaroid-rotate-3 { transform: rotate(-1deg); }
.polaroid-rotate-4 { transform: rotate(2.5deg); }
.polaroid-rotate-5 { transform: rotate(-0.5deg); }
.polaroid-rotate-6 { transform: rotate(1deg); }
.polaroid-rotate-7 { transform: rotate(-1.5deg); }

.polaroid-card.polaroid-rotate-1:hover,
.polaroid-folder.polaroid-rotate-1:hover { transform: rotate(-2deg) translateY(-4px) scale(1.02); }
.polaroid-card.polaroid-rotate-2:hover,
.polaroid-folder.polaroid-rotate-2:hover { transform: rotate(1.5deg) translateY(-4px) scale(1.02); }
.polaroid-card.polaroid-rotate-3:hover,
.polaroid-folder.polaroid-rotate-3:hover { transform: rotate(-1deg) translateY(-4px) scale(1.02); }
.polaroid-card.polaroid-rotate-4:hover,
.polaroid-folder.polaroid-rotate-4:hover { transform: rotate(2.5deg) translateY(-4px) scale(1.02); }
.polaroid-card.polaroid-rotate-5:hover,
.polaroid-folder.polaroid-rotate-5:hover { transform: rotate(-0.5deg) translateY(-4px) scale(1.02); }
.polaroid-card.polaroid-rotate-6:hover,
.polaroid-folder.polaroid-rotate-6:hover { transform: rotate(1deg) translateY(-4px) scale(1.02); }
.polaroid-card.polaroid-rotate-7:hover,
.polaroid-folder.polaroid-rotate-7:hover { transform: rotate(-1.5deg) translateY(-4px) scale(1.02); }

/* Pending dot - yellow blinking indicator for locally queued photos */
/* Retry overlay on failed local uploads */
.polaroid-retry-overlay {
  position: absolute;
  inset: 8px 8px 32px 8px;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  border-radius: 1px;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s;
}

.polaroid-retry-overlay:active {
  background: rgba(0, 0, 0, 0.7);
}

/* Uploading state */
.polaroid-uploading .polaroid-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  z-index: 1;
}

.polaroid-uploading .upload-progress {
  z-index: 2;
}

/* Selection state - blue background */
.polaroid-card.selected {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
}

.polaroid-card.selected .polaroid-caption {
  color: white;
}

/* Standalone skeuomorphic folder - manila folder on corkboard */
.skeuo-folder {
  position: relative;
  display: block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.2s ease;
  transform-origin: center bottom;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1))
          drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08));
}

.skeuo-folder:hover {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12))
          drop-shadow(0 12px 20px rgba(0, 0, 0, 0.1));
  z-index: 10;
}

.skeuo-folder svg {
  width: 115%;
  margin-left: -7.5%;
  height: auto;
  display: block;
}

/* Yellow folder colors */
.skeuo-folder .folder-tab {
  fill: #fde68a;
}
.skeuo-folder .folder-body {
  fill: #fbbf24;
}
.skeuo-folder .folder-edge {
  stroke: rgba(255, 255, 255, 0.5);
}

.skeuo-folder-label {
  position: absolute;
  bottom: 20%;
  left: 15%;
  right: 15%;
  font-family: 'Caveat', cursive;
  font-size: 16px;
  font-weight: 500;
  color: #78350f;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skeuo-folder.selected .skeuo-folder-label {
  color: white;
}

/* Selected folder turns blue */

/* ==========================================================================
   Madmin mobile nav
   ========================================================================== */

@media (max-width: 1024px) {
  #sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 80%;
    max-width: 280px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    background: #ffffff;
    z-index: 50;
    overflow-y: auto;
  }

  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 40;
  }

  body.mobile-nav-open #sidebar {
    transform: translateX(0);
  }

  body.mobile-nav-open .mobile-nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}
.skeuo-folder.selected .folder-tab {
  fill: #93c5fd;
}
.skeuo-folder.selected .folder-body {
  fill: #3b82f6;
}
.skeuo-folder.selected .folder-edge {
  stroke: rgba(255, 255, 255, 0.6);
}

/* Hover effects for skeuomorphic folder */
.skeuo-folder.polaroid-rotate-1:hover { transform: rotate(-2deg) translateY(-4px) scale(1.02); }
.skeuo-folder.polaroid-rotate-2:hover { transform: rotate(1.5deg) translateY(-4px) scale(1.02); }
.skeuo-folder.polaroid-rotate-3:hover { transform: rotate(-1deg) translateY(-4px) scale(1.02); }
.skeuo-folder.polaroid-rotate-4:hover { transform: rotate(2.5deg) translateY(-4px) scale(1.02); }
.skeuo-folder.polaroid-rotate-5:hover { transform: rotate(-0.5deg) translateY(-4px) scale(1.02); }
.skeuo-folder.polaroid-rotate-6:hover { transform: rotate(1deg) translateY(-4px) scale(1.02); }
.skeuo-folder.polaroid-rotate-7:hover { transform: rotate(-1.5deg) translateY(-4px) scale(1.02); }

/* Grid spacing adjustments for polaroid cards */
.polaroid-grid {
  gap: 16px !important;
  padding: 12px 4px;
}

/* Loading bar animation */
@keyframes loading-bar {
  0% {
    width: 0%;
    margin-left: 0%;
  }
  50% {
    width: 60%;
    margin-left: 20%;
  }
  100% {
    width: 0%;
    margin-left: 100%;
  }
}

.animate-loading-bar {
  animation: loading-bar 1.2s ease-in-out infinite;
}

/* ==========================================================================
   Export Log
   ==========================================================================
   The record of batches sent to Drive or Dropbox, written straight onto the
   corkboard rather than boxed in cards. Whitespace and one hairline do the
   separating, and the ink is the board's own - cool greys go dead on this
   warm ground. */

.export-log-title {
  font-size: 13px;
  color: #8a8175;
  padding-bottom: 6px;
}

.export-log-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(139, 90, 43, 0.14);
}

.export-log-text {
  flex: 1;
  min-width: 0;
}

.export-log-chevron {
  flex-shrink: 0;
  color: #b9afa1;
}

.export-log-row:focus-visible {
  outline: 2px solid #8b5a2b;
  outline-offset: 2px;
  border-radius: 2px;
}

.export-log-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 500;
  color: #3d3d3d;
  line-height: 1.3;
}

.export-log-meta {
  display: block;
  font-size: 13px;
  color: #8a8175;
  margin-top: 3px;
}