/* Pickr color picker base theme */
/*! Pickr 1.9.1 MIT | https://github.com/Simonwep/pickr */
.pickr{position:relative;overflow:visible;transform:translateY(0)}
.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}
.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" stroke=\"%2342445A\" stroke-width=\"5px\" stroke-linecap=\"round\"><path d=\"M45,45L5,5\"></path><path d=\"M45,5L5,45\"></path></svg>") no-repeat center;background-size:0;transition:all .3s}
.pickr .pcr-button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:.5em;border-radius:.15em;z-index:-1}
.pickr .pcr-button::before{z-index:initial}
.pickr .pcr-button::after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}
.pickr .pcr-button.clear{background-size:70%}
.pickr .pcr-button.clear::before{opacity:0}
.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}
.pickr .pcr-button.disabled{cursor:not-allowed}
.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}
.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}
.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}
.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(0,0,0,.25)}
.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}
.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}
.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}
.pcr-app .pcr-swatches.pcr-last{margin:0}
@supports(display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}
.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:rgba(0,0,0,0);z-index:1}
.pcr-app .pcr-swatches>button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:6px;border-radius:.15em;z-index:-1}
.pcr-app .pcr-swatches>button::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}
.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}
.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}
.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}
.pcr-app .pcr-interaction>*{margin:0 .2em}
.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}
.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}
.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(66,133,244,.75)}
.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}
.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}
.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}
.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}
.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}
.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}
.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}
.pcr-app .pcr-interaction .pcr-save{background:#4285f4}
.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}
.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(244,66,80,.75)}
.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}
.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}
.pcr-app[data-theme=monolith]{width:14.25em;max-width:95vw;padding:.8em}
.pcr-app[data-theme=monolith] .pcr-selection{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:100%;height:1em;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:.5em}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:.5em;border-radius:.15em;z-index:-1}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;transition:background-color .3s,box-shadow .3s;border-radius:.15em 0 0 .15em;z-index:2}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 .15em .15em 0}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color{background:var(--pcr-color);width:50%;height:100%}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:.5em;border-radius:.15em;z-index:-1}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity{height:.5em;margin-top:.75em}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to right, transparent, black),url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:100%,.25em}
.create-gallery__controls-row--color-pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.create-gallery__color-picker-placeholder {
  width: 100%;
}
.create-gallery__color-picker-placeholder .pcr-button {
  width: 100% !important;
  height: 48px !important;
  border-radius: 0 !important;
  border: 1px solid var(--color-accent-brass-light) !important;
}
.create-gallery__color-picker-placeholder .pcr-button::after {
  border-radius: 0 !important;
}
/* On very small screens, stack to single column */
@media (max-width: 360px) {
  .create-gallery__controls-row--color-pickers {
    grid-template-columns: 1fr;
  }
}
/* Pickr dialog above modal z-index */
.pcr-app {
  z-index: 10001;
}
/* Image Uploader Component */
.image-uploader {
  width: 100%;
}

.image-uploader__label {
  display: block;
  margin-bottom: 8px;
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 600;
}

.image-uploader__drop-zone {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 200px;
  padding: 24px;
  background: rgba(30, 41, 59, 0.3);
  border: 2px dashed rgba(56, 189, 248, 0.4);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.image-uploader__drop-zone--drag-over {
  border-color: rgba(56, 189, 248, 0.8);
  background: rgba(56, 189, 248, 0.1);
}

.image-uploader__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  color: #38bdf8;
  opacity: 0.7;
}

.image-uploader__text-container {
  display: block;
}

.image-uploader__text-container--hidden {
  display: none;
}

.image-uploader__text-primary {
  color: #cbd5e1;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.image-uploader__text-secondary {
  color: #64748b;
  font-size: 12px;
}

.image-uploader__preview-container {
  display: none;
  width: 100%;
  max-width: 300px;
}

.image-uploader__preview-container--visible {
  display: block;
}

.image-uploader__preview-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.image-uploader__preview-info {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.image-uploader__file-name {
  color: #cbd5e1;
  font-size: 13px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-uploader__remove-btn {
  padding: 4px 12px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 4px;
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.image-uploader__remove-btn:hover {
  background: rgba(239, 68, 68, 0.3);
}

.image-uploader__file-input {
  display: none;
}

.image-uploader__validation-message {
  margin: 8px 0 0 0;
  color: #ef4444;
  font-size: 12px;
  display: none;
}

.image-uploader__validation-message--visible {
  display: block;
}

/* Multi-file preview */
.image-uploader__multi-preview {
  display: none;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  padding: 8px;
}

.image-uploader__multi-preview--visible {
  display: grid;
}

.image-uploader__multi-item {
  position: relative;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.image-uploader__multi-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}

.image-uploader__multi-name {
  color: #cbd5e1;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-uploader__multi-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(239, 68, 68, 0.9);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-uploader__multi-remove:hover {
  background: #ef4444;
  transform: scale(1.1);
}

/* Upload progress tracking */
.image-uploader__progress {
  display: none;
  width: 100%;
  height: 4px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.image-uploader__progress-bar {
  width: 100%;
  height: 100%;
  position: relative;
}

.image-uploader__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
  border-radius: 2px;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

.image-uploader__status-icon {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.image-uploader__status-icon--uploading {
  background: rgba(56, 189, 248, 0.9);
  color: white;
  animation: spin 1s linear infinite;
}

.image-uploader__status-icon--success {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

.image-uploader__status-icon--error {
  background: rgba(239, 68, 68, 0.9);
  color: white;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Multi-item state styles */
.image-uploader__multi-item--pending {
  opacity: 0.7;
}

.image-uploader__multi-item--uploading {
  border: 2px solid rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.1);
}

.image-uploader__multi-item--success {
  border: 2px solid rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.1);
}

.image-uploader__multi-item--error {
  border: 2px solid rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
  opacity: 0.8;
}
/* ImageManagementModal Component Styles */

/* Metadata form shown in spot-upload and spot-edit modes */
.image-metadata-form {
  margin-top: 20px;
}

/* Form field groups — all but the last get bottom spacing */
.image-metadata-form__group:not(:last-child) {
  margin-bottom: 16px;
}

/* Field labels */
.image-metadata-form__label {
  display: block;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

/* Form controls scoped to this modal — override the global .form-input defaults */
.image-metadata-form .form-input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-surface-tertiary);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-size: 14px;
}

.image-metadata-form textarea.form-input {
  resize: vertical;
}
/**
 * Verification Banner Styles
 * Fixed overlay banner below topbar
 */

.verification-banner {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: 60px;
    background: transparent;
    backdrop-filter: blur(16px);
    border-bottom: 2px solid rgba(245, 158, 11, 0.6);
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.verification-banner.hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.verification-banner__content {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
    width: 100%;
}

.verification-banner__icon {
    font-size: 24px;
    flex-shrink: 0;
}

.verification-banner__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.verification-banner__text strong {
    color: #fbbf24;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.verification-banner__subtext {
    color: #fde68a;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.verification-banner__button {
    padding: 8px 16px;
    background: #f59e0b;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.verification-banner__button:hover:not(:disabled) {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

.verification-banner__button:active:not(:disabled) {
    transform: translateY(0);
}

.verification-banner__button:disabled {
    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
}

.verification-banner__dismiss {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 24px;
    color: #fbbf24;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.verification-banner__dismiss:hover {
    background: rgba(251, 191, 36, 0.2);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .verification-banner {
        height: auto;
        min-height: 60px;
        padding: 12px 16px;
    }

    .verification-banner__content {
        flex-wrap: wrap;
        gap: 12px;
    }

    .verification-banner__text {
        flex: 1 1 100%;
        order: 1;
    }

    .verification-banner__icon {
        order: 0;
    }

    .verification-banner__button {
        order: 2;
        flex: 1;
    }

    .verification-banner__dismiss {
        order: 3;
    }

    .verification-banner__subtext {
        display: none;
    }
}

/* Ensure banner doesn't interfere with layout */
body.has-verification-banner {
    /* Optional: Add padding-top if needed */
}