/* asset grid layout */
.asset-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: var(--spacing-lg);
   padding: 0;
}

/* asset items */
.asset-item {
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-lg);
   padding: var(--spacing-sm);
   cursor: pointer;
   transition: var(--transition-base);
}

.asset-item:hover {
   border-color: var(--gray-500);
   transform: translateY(-2px);
}

.asset-item.selected {
   border-color: var(--color-primary);
   background-color: var(--gray-50);
}

/* upload card */
.asset-item.upload-card {
   border: 1px dashed var(--gray-500);
   background-color: var(--gray-50);
}

.asset-item.upload-card:hover {
   border-color: var(--color-primary);
   background-color: var(--gray-100);
}

.asset-item.upload-card .asset-thumbnail {
   border: 1px dashed var(--gray-400);
   background-color: var(--color-white);
}

.asset-item.upload-card:hover .asset-thumbnail {
   border-color: var(--color-primary);
}

/* thumbnails */
.asset-thumbnail {
   aspect-ratio: 1;
   background-color: var(--gray-100);
   border-radius: var(--border-radius-sm);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: var(--spacing-sm);
   position: relative;
}

.asset-thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.no-image {
   color: var(--gray-500);
   font-size: var(--font-size-sm);
}

/* asset labels */
.asset-name {
   font-size: var(--font-size-sm);
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.asset-label {
   min-height: 1.2rem;
   text-align: center;
}

.delete-warning {
   color: var(--color-danger);
   font-size: var(--font-size-sm);
}

/* upload states */
.upload-prompt {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
}

.upload-plus {
   font-size: var(--font-size-2xl);
   font-weight: 300;
   color: var(--gray-500);
   line-height: 1;
}

.upload-label {
   margin-top: var(--spacing-sm);
   color: var(--gray-500);
}

/* preview container */
.preview-container {
   height: 100%;
   display: flex;
   flex-direction: column;
}

.preview-area {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* filename area */
.filename-area {
   height: 100%;
   display: flex;
   flex-direction: column;
   padding: var(--spacing-sm);
}

.filename-area textarea {
   flex: 1;
   min-height: 108px;
   resize: none;
   padding: var(--spacing-sm);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-sm);
   margin-bottom: var(--spacing-sm);
}

.filename-status {
   text-align: center;
   margin-bottom: var(--spacing-sm);
   font-size: var(--font-size-sm);
}

.filename-status.valid {
   color: var(--color-success);
}

.filename-status.invalid {
   color: var(--color-danger);
}

.filename-status.uploading {
   color: var(--gray-800);
}

/* asset actions */
.asset-actions {
   display: flex;
   gap: var(--spacing-sm);
   width: 100%;
}

/* delete overlay */
.delete-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, 0.7);
   padding: var(--spacing-sm);
}

/* asset actions (delete/download buttons) */
.asset-actions {
   display: flex;
   gap: var(--spacing-sm);
   width: 100%;
}

.asset-actions button {
   flex: 1;
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-xs);
   cursor: pointer;
   transition: var(--transition-base);
}

.delete-button {
   background: var(--color-danger);
   border: 1px solid var(--color-danger);
   color: var(--color-white);
}

.delete-button:hover {
   background: var(--color-danger-dark);
}

.download-button {
   background: var(--color-primary);
   border: 1px solid var(--color-primary);
   color: var(--color-white);
}

.download-button:hover {
   background: var(--color-primary-dark);
}

/* delete confirmation */
.delete-confirm {
   display: flex;
   gap: var(--spacing-sm);
   width: 100%;
}

.delete-confirm button {
   flex: 1;
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-xs);
   cursor: pointer;
   transition: var(--transition-base);
}

.cancel-delete {
   background: var(--gray-100);
   border: 1px solid var(--gray-300);
   color: var(--gray-700);
}

.cancel-delete:hover {
   background: var(--gray-200);
}

.confirm-delete {
   background: var(--color-danger);
   border: 1px solid var(--color-danger);
   color: var(--color-white);
}

.confirm-delete:hover {
   background: var(--color-danger-dark);
}

/* disabled states */
.filename-area textarea:disabled,
.filename-actions button:disabled {
   opacity: 0.65;
   cursor: not-allowed;
}

/* utility classes */
.hidden {
   display: none;
}

/* asset category cards */
.asset-cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: var(--spacing-md);
   padding-bottom: var(--spacing-md);
}

.asset-card {
   background: var(--color-white);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-lg);
   cursor: pointer;
   transition: var(--transition-base);
   border: 1px solid var(--gray-200);
   position: relative;
   overflow: hidden;
}

.asset-card::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   height: 2px;
   width: 100%;
   background: var(--color-primary);
   transform: scaleX(0);
   transform-origin: left;
   transition: var(--transition-base);
}

.asset-card:hover {
   border-color: var(--gray-300);
}

.asset-card:hover::after {
   transform: scaleX(1);
}

.asset-card.selected {
   background: var(--gray-50);
   border-color: var(--color-primary);
}

.asset-card.selected::after {
   transform: scaleX(1);
}

.asset-card-title {
   font-size: var(--font-size-lg);
   color: var(--gray-700);
   margin-bottom: var(--spacing-sm);
}

.asset-card-description {
   color: var(--gray-500);
   font-size: var(--font-size-sm);
   line-height: 1.4;
}

/* preview actions */
.preview-actions {
   display: flex;
   gap: var(--spacing-sm);
}

.preview-actions button {
   flex: 1;
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-xs);
   cursor: pointer;
   transition: var(--transition-base);
}

.preview-actions button:first-child {
   background: var(--gray-100);
   border: 1px solid var(--gray-300);
   color: var(--gray-700);
}

.preview-actions button:last-child {
   background: var(--color-primary);
   border: 1px solid var(--color-primary);
   color: var(--color-white);
}

/* filename actions */
.filename-actions {
   display: flex;
   gap: var(--spacing-sm);
}

.filename-actions button {
   flex: 1;
   padding: var(--spacing-sm);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-sm);
   cursor: pointer;
   transition: var(--transition-base);
}

.cancel-button {
   background: var(--gray-100);
   border: 1px solid var(--gray-300);
   color: var(--gray-700);
}

.cancel-button:hover:not(:disabled) {
   background: var(--gray-200);
}

.upload-button {
   background: var(--color-primary);
   border: 1px solid var(--color-primary);
   color: var(--color-white);
}

.upload-button:hover:not(:disabled) {
   background: var(--color-primary-dark);
}