PicList/src/renderer/pages/css/Gallery.css

@import "tailwindcss" reference;
@import "../../assets/css/theme.css" reference;
@import "../../assets/css/utilities.css" reference;

.head-action-button {
  @apply flex items-center border-none rounded-md px-2 py-1.5 text-sm font-medium text-white bg-accent font-[inherit] gap-2 cursor-pointer transition-all duration-fast ease-apple;
  @apply hover:bg-accent-hover hover:-translate-y-px hover:shadow-md;
}

.switch-slider {
  @apply  absolute inset-0 cursor-pointer rounded-2xl bg-[linear-gradient(180deg,#d0d3d9_0%,#c0c4cc_100%)] shadow-sm transition-all duration-medium ease-standard;
  @apply before:absolute before:bottom-[2px] before:left-[2px] before:h-[17px] before:w-[17px] before:rounded-full before:shadow-sm before:transition-all before:ease-standard before:duration-medium before:content-[""] before:bg-[linear-gradient(180deg,#ffffff_0%,#f5f5f5_100%)];
}

.filter-group {
  @apply flex flex-col gap-3 flex-1 min-w-[140px];
}

.filter-label {
  @apply mb-0 text-sm font-semibold text-secondary leading-[1.4];
}

.custom-select {
  @apply border border-border-secondary rounded-md px-2 py-1.5 w-full min-w-0 h-[28px] text-sm text-main transition-all duration-fast ease-apple cursor-pointer text-center leading-[1.4];
  @apply focus:border-accent focus:outline-none focus:shadow-md;
}

.date-input {
  @apply border border-border-secondary rounded-md px-2 py-1.5 min-w-[20px] h-[28px] text-xs text-main transition-all duration-fast ease-apple flex-1 leading-[1.2];
  @apply focus:border-accent-hover focus:outline-none focus:shadow-md;
}

.sort-button {
  @apply flex justify-between items-center border border-border-secondary rounded-md px-2 py-1.5 w-full h-[28px] text-sm text-main transition-all duration-fast ease-apple cursor-pointer gap-1 leading-[1.4];
  @apply hover:border-accent-hover;
  @apply focus:[.active]:border-accent-hover focus:[.active]:shadow-md;
}

.search-input {
  @apply border border-border-secondary rounded-md pt-2 pr-3 pb-2 pl-9 w-full text-sm text-main transition-all duration-fast ease-apple;
  @apply focus:border-accent-hover focus:outline-none focus:shadow-md;
  @apply placeholder:text-secondary;
}

.clear-button {
  @apply absolute flex right-3 border-none items-center p-0 text-secondary bg-none transition-all duration-fast ease-apple cursor-pointer;
  @apply hover:text-main;
}

.action-btn {
  @apply flex items-center justify-center border-none rounded-md px-4 py-[0.425rem] text-sm font-medium text-white transition-all duration-fast ease-apple gap-2 flex-1 opacity-60 cursor-not-allowed;
  @apply [.active]:cursor-pointer [.active]:opacity-100 [.active]:transform-none;
  @apply [.active:hover]:-translate-y-px [.active:hover]:shadow-sm;
  @apply [.copy-btn]:text-white [.copy-btn]:bg-accent [.copy-btn.active:hover]:bg-accent-hover;
  @apply [.edit-btn]:text-white [.edit-btn]:bg-success [.edit-btn.active:hover]:bg-success/80;
  @apply [.delete-btn]:text-white [.delete-btn]:bg-danger [.delete-btn.active:hover]:bg-danger/80;
  @apply [.select-btn]:text-white [.select-btn]:bg-warning [.select-btn.active:hover]:bg-warning/80;
}

.icon-button {
  @apply flex items-center justify-center border-none rounded-md w-[25px] h-[25px] text-secondary transition-all duration-fast ease-apple cursor-pointer;
  @apply hover:text-main hover:-translate-y-px;
  @apply [.copy-icon]:hover:text-warning [.copy-icon]:hover:bg-warning/10;
  @apply [.edit-icon]:hover:text-success [.edit-icon]:hover:bg-success/10;
  @apply [.delete-icon]:hover:text-error [.delete-icon]:hover:bg-error/10;
}

.nav-button {
  @apply absolute flex z-10 justify-center items-center border-none rounded-full w-[48px] h-[48px] text-white bg-[rgb(0_0_0_/50%)] transition-all duration-fast ease-apple cursor-pointer;
  @apply not-disabled:hover:bg-accent;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
  @apply [.prev]:left-4 [.next]:right-4;
}

/* Modal Overlay */
.modal-overlay {
  @apply fixed inset-0 z-1000 flex justify-center items-center bg-[rgb(0_0_0_/50%)];
}

.modal-container {
  @apply overflow-auto rounded-xl w-[90%] max-w-[700px] max-h-[90vh] bg-bg-tertiary shadow-lg;
}

.modal-header {
  @apply flex justify-between items-center border-b border-border-secondary p-6;
}

.modal-close-btn {
  @apply flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-border bg-surface-elevated text-secondary transition-all duration-fast ease-apple;
  @apply hover:scale-105 hover:border-danger hover:bg-danger hover:text-white focus-visible:focus-ring;
}

.modal-footer {
  @apply flex justify-end border-t border-border-secondary p-6 gap-3;
}

.form-label {
  @apply flex items-center mb-2 text-sm font-medium text-main gap-2;
}

.form-input {
  @apply border border-border rounded-md p-3 w-full text-sm text-main bg-bg-secondary transition-all duration-fast ease-apple box-border;
  @apply focus:border-accent focus:outline-none focus:shadow-md;
}

.placeholder-grid {
  @apply grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-0 py-2;
}

.placeholder-item {
  @apply gap-2 flex items-center m-0 rounded-none py-2 px-4 text-sm leading-[1.4] flex-col;
  @apply hover:bg-accent/30 hover:border hover:border-accent;
  @apply [&_code]:mr-3.5 [&_code]:border [&_code]:border-white/20 [&_code]:rounded-md [&_code]:px-2.5 [&_code]:py-1 [&_code]:min-w-[80px] [&_code]:text-base [&_code]:font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] [&_code]:font-semibold [&_code]:text-center [&_code]:text-main [&_code]:bg-bg-secondary [&_code]:shadow-sm [&_code]:tracking-[0.02em] [&_code]:shrink-0;
  @apply [&_span]:text-xs [&_span]:font-medium [&_span]:text-main [&_span]:flex-1;
}

/* Buttons */
.btn-primary {
  @apply flex items-center border-none rounded-md px-6 py-3 text-sm font-medium font-[inherit] text-white bg-accent gap-2 cursor-pointer transition-all duration-fast ease-apple;
  @apply hover:bg-accent-hover hover:-translate-y-px hover:shadow-sm;
}

.btn-secondary {
  @apply flex items-center border border-border rounded-md px-6 py-3 text-sm font-medium font-[inherit] text-main bg-bg-secondary gap-2 cursor-pointer transition-all duration-fast ease-apple;
 @apply hover:bg-border-secondary hover:-translate-y-px hover:shadow-sm;
}

.zoom-btn {
  @apply flex justify-center items-center border-none rounded-md w-[32px] h-[32px] text-sm font-semibold text-white bg-[rgb(255_255_255_/10%)] transition-all duration-fast ease-apple cursor-pointer;
  @apply not-disabled:hover:bg-[rgb(255_255_255_/20%)];
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
  @apply [.reset-btn]:py-0 [.reset-btn]:w-auto [.reset-btn]:px-3 [.reset-btn]:text-xs;
}

.category-title {
  @apply m-0 border-b border-border pt-3.5 px-4 pb-2 text-sm font-semibold text-secondary bg-[linear-gradient(180deg,var(--color-background-secondary)_0%,var(--color-background-tertiary)_100%)];
}