/* Basic modal styles */
.hsm-media-modal { position: fixed; inset: 0; z-index: 9999; }
.hsm-media-modal[hidden] { display: none !important; }
.hsm-media-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.hsm-media-modal__dialog { position: relative; z-index: 1; background: #fff; width: 840px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); margin: 12px auto; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.hsm-media-modal__header { display:flex; align-items:center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e5e5; }
.hsm-media-close { background: none; border: none; font-size: 20px; cursor: pointer; }
.hsm-media-modal__tabs { 
  display: flex;
    border-bottom: 6px solid #1b4d2b;
  padding: 0 12px;
  gap: 4px;
  margin-bottom: 0;
}

.hsm-media-modal__tabs button {
  background: #f5f5f5;
  border: 1px solid #e1e1e6;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 13px;
  color: #555;
  margin: 0 2px;
  position: relative;
  top: 1px;
  transition: all 0.2s ease;
}

.hsm-media-modal__tabs button:hover {
  background: #e9e9e9;
  color: #333;
}

.hsm-media-modal__tabs button.is-active {
  background: #1a4d2b;
  color: white;
  border-color: #1a4d2b;
  font-weight: 500;
  margin-bottom: -1px;
}
.hsm-media-modal__body { padding: 12px; overflow:auto; }
.hsm-tab { display:none; }
.hsm-tab.is-active { display:block; }

/* Grid */
.hsm-media-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.hsm-media-card { display:block; border:1px solid #e1e1e6; border-radius:8px; overflow:hidden; background:#fff; cursor:pointer; text-align:left; padding:0; }
.hsm-media-card img { display:block; width:100%; height:120px; object-fit:cover; background:#f4f4f4; }
.hsm-media-card__title { font-size:12px; color:#444; padding:6px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hsm-media-card.is-selected {
  outline: 4px solid #2d6cdf;
  border-color: #5d9b77;
  transform: translateY(-2px);
  transition: all 0.2s ease-in-out;
  position: relative;
  z-index: 10;
}

.hsm-media-card.is-selected::after {
  content: '✓ Selected';
  position: absolute;
  top: -10px;
  right: -10px;
  background: #5d9b77;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Upload */
.hsm-upload { display:flex; flex-direction: column; gap: 8px; }
.hsm-progress-row { font-size:12px; color:#333; }

/* Scope Bar */
.hsm-scope-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 0 4px;
}

.hsm-scope-bar label {
  white-space: nowrap;
  font-size: 13px;
  color: #444;
}

.hsm-scope-bar select {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  font-size: 13px;
  min-width: 200px;
}

.hsm-scope-bar select:focus {
  border-color: #2d6cdf;
  outline: none;
  box-shadow: 0 0 0 2px rgba(45, 108, 223, 0.2);
}

/* Media Preview and Button */
.hsm-media-upload-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
}

.hsm-media-preview {
  display: block;
  margin: 0 0 10px 0;
  text-align: center;
}

.hsm-media-preview img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 4px;
  border: 1px solid #e1e1e6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 auto;
}

.hsm-media-button-container {
  text-align: center;
  margin-top: 5px;
}

.hsm-media-button {
  display: inline-block;
  margin: 0 auto;
}

/* Page lock */
.hsm-media-modal-open { overflow: hidden; }