.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;width:36px;height:36px;border:1px solid #4b5563;border-radius:6px;
  padding:0;font-size:18px;cursor:pointer;user-select:none;appearance:none;
  background:linear-gradient(#27272f,#1c1c24);
  color:#fff;
}
.icon-btn:hover{background:#1d4ed8}
.icon-btn:focus{outline:2px solid #c084fc;outline-offset:2px}
.icon-btn-sm{
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;width:32px;height:32px;border:1px solid #4b5563;border-radius:6px;
  padding:0;font-size:16px;cursor:pointer;user-select:none;appearance:none;
  background:linear-gradient(#27272f,#1c1c24);
  color:#fff;
}
.icon-btn-sm:hover{background:#1d4ed8}
.icon-btn-sm:focus{outline:2px solid #c084fc;outline-offset:2px}
.gradient-btn{
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;appearance:none;
  border:1px solid #4b5563;border-radius:6px;
  background:linear-gradient(#27272f,#1c1c24);
  color:#fff;
}
.gradient-btn:hover{background:#1d4ed8}
.gradient-btn:focus{outline:2px solid #c084fc;outline-offset:2px}
#scroll-top-btn{
  position:fixed;bottom:1rem;right:1rem;z-index:100;
}
#info-notes,#image-info-notes{white-space:pre-line}

/* Hide focus ring on modal close buttons */
.modal-close:focus{outline:none}

a:focus{outline:auto;animation:link-focus-fade 1s forwards}

/* Hidden overlay for modal dialogs */
.modal-mask{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.6);
  z-index:5000;
}

.modal-footer{
  position:sticky;
  bottom:0;
  background:#111827;
  padding-top:1rem;
}

.icon-btn.bg-neutral-700,
.icon-btn-sm.bg-neutral-700{
  background:#374151;
}
.icon-btn.bg-neutral-700:hover,
.icon-btn-sm.bg-neutral-700:hover{
  background:#1d4ed8;
}

.processing{
  color:#fff;
  background:linear-gradient(90deg,#a855f7 0%,#f97316 25%,#22d3ee 50%,#a855f7 75%,#f97316 100%);
  background-size:200% 100%;
  animation:shift 6s linear infinite;
}

@keyframes shift{
  0%{background-position:0 0}
  100%{background-position:-200% 0}
}

@keyframes link-focus-fade{100%{outline-color:transparent;outline-width:0}}

.exif-profile-actions{display:flex;gap:.5rem}
.exif-profile-actions .icon-btn-sm{width:24px;height:24px;font-size:14px}

/* Unread dot indicator for nav icons */
.nav-unread-dot{
  position:absolute;top:-2px;right:-2px;
  width:8px;height:8px;border-radius:50%;
  background:#a855f7;
}

/* Preserve dark background on email validation */
input[type="email"]:valid,
input[type="email"]:invalid{
  background-color:#1f2937;
  color:#e5e7eb;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus{
  background-color:#1f2937;
  color:#e5e7eb;
}

/* Force dark select dropdowns */
select{color-scheme:dark}

/* Keep autofilled fields dark */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-box-shadow:0 0 0px 1000px #1f2937 inset;
  -webkit-text-fill-color:#e5e7eb;
}

/* Keep dropdown options readable */
select option{
  background-color:#1f2937;
  color:#e5e7eb;
}
select option:disabled{
  color:#e5e7eb;
}
select option:hover,
select option:checked{
  background-color:#374151 !important;
  color:#e5e7eb !important;
}

/* AI flag toggle */
.ai-flag{background:linear-gradient(#27272f,#1c1c24);color:#e5e7eb}
.ai-flag.active{background:linear-gradient(#16a34a,#15803d)}

#download-btn{background:linear-gradient(#4f2968,#401858)}
#download-btn:hover{background:linear-gradient(#4f2968,#401858)}
#edit-desc{
  background:linear-gradient(135deg,#312e81,#4c1d95);
  box-shadow:0 0 5px rgba(124,58,237,.35);
  border:1px solid #7c3aed;
}
#edit-desc:hover{background:linear-gradient(135deg,#312e81,#4c1d95)}

/* Prevent text selection on navigation links */
header nav a,
.admin-nav a{
  -webkit-user-select:none;
  user-select:none;
}

.bg-violet-600{
  --tw-bg-opacity:1;
  background:linear-gradient(#542971,#4b1671);
}

.bg-red-600{
  --tw-bg-opacity:1;
  background:linear-gradient(#812745,#761335);
}

.wm-star{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;font-size:22px;line-height:1;
  cursor:pointer;user-select:none
}
.wm-star.on{color:#facc15}
.wm-star.off{color:#9ca3af}


.wm-preview-box{background:#05070c;border:1px solid #374151;border-radius:.5rem;box-shadow:inset 0 0 8px rgba(0,0,0,.6);padding:.5rem;}
/* Styled form input */
.form-input{
  width:100%;
  background:#1f2937;
  border:1px solid #374151;
  border-radius:6px;
  padding:.5rem .75rem;
  color:#e5e7eb;
  appearance:none;
}
.form-input::placeholder{color:#9ca3af}
.form-input:hover{border-color:#1d4ed8}
.form-input:focus{outline:2px solid #c084fc;outline-offset:2px;border-color:#c084fc}

/* Styled checkbox */
.form-checkbox{
  width:1rem;height:1rem;
  box-sizing:border-box;
  display:inline-block;
  /* Allow native checkbox rendering so the checked state is visible */
  background:#1f2937;
  border:1px solid #374151;
  border-radius:.25rem;
  accent-color:#7c3aed;
  cursor:pointer;
}
.form-checkbox:hover{border-color:#4b5563}
.form-checkbox:focus{outline:2px solid #c084fc;outline-offset:2px;border-color:#c084fc}

/* File Host Sidebar */
#filehost-folders{
  background:#1f2937;
  border:1px solid #374151;
  border-radius:.75rem;
  padding:.25rem;
  transition: width .3s, margin-right .3s;
}
#filehost-folders li.folder-item.drag-over{
  background:#374151;
}
@media(max-width:639px){
  #filehost-folders.hidden{
    display:block;
    width:0;
    margin-right:0;
    overflow:hidden;
  }
}

/* File Host upload bar */
#fh-upload-bar{display:flex;gap:.25rem;padding:.25rem;background:inherit;border:1px solid #333;border-radius:6px;position:relative;z-index:30}
#fh-upload-btn:hover svg{color:#1d4ed8}

/* Histogram overlay styles */
#histogram-wrap{position:relative}
#histogram-canvas,#histogram-fade{display:block;width:100%;border-radius:.5rem}
#histogram-fade{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .2s}
#histogram-wrap:hover #histogram-canvas,
#histogram-wrap:hover #histogram-fade { transform:rotateX(2deg) }

#location-ai-font-size{
  position:absolute;top:.5rem;right:.75rem;
  background:#1f2937;border:1px solid #374151;border-radius:.375rem;
  padding:.25rem .5rem;font-size:.875rem;color:#e5e7eb;z-index:60
}
#location-ai-font-size:hover{background:#111827}
#location-ai-font-size:focus{outline:2px solid #c084fc;outline-offset:2px}
.ai-font-sm{font-size:.875rem}
.ai-font-md{font-size:1rem}
.ai-font-lg{font-size:1.125rem}

#am-agenda .ql-container{min-height:6rem;height:auto;resize:vertical;overflow:auto;}
#am-agenda .ql-editor{min-height:6rem;height:auto;}

/* progress bars for multi upload */
.upload-bar{background-color:#7c3aed}
.process-bar{background-color:#f59e0b}

/* progress circle glow effect */
.progress-glow{position:relative}
.progress-glow::before,.progress-glow::after{
  content:"";
  position:absolute;top:0;left:0;right:0;bottom:0;
  border-radius:9999px;
  box-shadow:0 0 0 0 rgba(139,92,246,.6);
  animation:progress-glow-pulse 2s infinite;
}
.progress-glow::after{animation-delay:1s}
@keyframes progress-glow-pulse{
  0%{box-shadow:0 0 0 0 rgba(139,92,246,.6);opacity:1}
  100%{box-shadow:0 0 0 12px rgba(139,92,246,0);opacity:0}
}

.share-table tbody tr:hover {
  background-color: rgba(148, 163, 184, 0.12);
}

.share-preview {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #0f172a;
}

.share-preview img,
.share-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s ease;
}

.share-preview video {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.share-preview-img-hidden {
  opacity: 0;
}

.share-preview .preview-play-icon {
  position: absolute;
  bottom: 0.35rem;
  right: 0.35rem;
  padding: 0.2rem 0.35rem;
  border-radius: 9999px;
  background-color: rgba(15, 23, 42, 0.75);
  color: #f1f5f9;
  font-size: 0.65rem;
  line-height: 1;
  pointer-events: none;
}

.share-password-controls{
  display:flex;
  gap:.5rem;
  align-items:center;
}
.share-password-btn{
  transition:box-shadow .2s ease,border-color .2s ease,color .2s ease;
}
.share-password-controls[data-password-set="0"] .share-password-btn{
  border-color:#34d399;
  box-shadow:0 0 8px rgba(52,211,153,.35);
  color:#d1fae5;
}
.share-password-controls[data-password-set="1"] .share-password-btn{
  border-color:#a855f7;
  box-shadow:0 0 8px rgba(168,85,247,.35);
  color:#f3e8ff;
}
.share-password-label{
  min-width:5rem;
}