/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ==========================================================================
   TOAST NOTIFICATION ANIMATIONS
   ========================================================================== */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: fadeInDown 0.3s ease-out;
}



/* ==========================================================================
   MOBILE RESPONSIVENESS
   ========================================================================== */
@supports (height: 100dvh) {
  .h-screen {
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }
}

/* iOS safe area support */
@supports (padding: env(safe-area-inset-bottom)) {
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-top {
    padding-top: env(safe-area-inset-top);
  }
}

/* Touch-friendly tap targets for mobile */
@media (max-width: 640px) {
  button,
  input[type="submit"],
  a {
    min-height: 44px; /* iOS recommended tap target size */
  }
}



/* ==========================================================================
   DROPDOWN MENUS
   ========================================================================== */
#tools-dropdown:checked ~ .dropdown-menu,
#user-dropdown:checked ~ .dropdown-menu {
  display: block;
}

#tools-dropdown:checked ~ label .dropdown-arrow,
#user-dropdown:checked ~ label .dropdown-arrow {
  transform: rotate(180deg);
}



/* ==========================================================================
   RETRO PIXEL AESTHETIC
   ========================================================================== */

/* Material Icons sizing */
.material-icons-outlined {
  font-size: 1.25rem;
  line-height: 1;
}

/* Icon picker - border styling handled by Tailwind classes in the view */

/* Retro pixel scrollbar styling for WebKit browsers (Chrome, Safari, Edge) */
.icon-grid-scroll::-webkit-scrollbar {
  width: 12px;
}

.icon-grid-scroll::-webkit-scrollbar-track {
  background: #fefce8;
  border-left: 2px solid #2e3a2c;
}

.icon-grid-scroll::-webkit-scrollbar-thumb {
  background: #f4c6c6;
  border: 2px solid #2e3a2c;
}

.icon-grid-scroll::-webkit-scrollbar-thumb:hover {
  background: #e8b0b0;
}

/* Firefox scrollbar */
.icon-grid-scroll {
  scrollbar-width: thin;
  scrollbar-color: #f4c6c6 #fefce8;
}



/* ==========================================================================
   SORTABLE / DRAG AND DROP
   ========================================================================== */

/* Ghost element while dragging */
.sortable-ghost {
  opacity: 0.4;
}

/* Element being dragged */
.sortable-drag {
  opacity: 0.8;
  transform: rotate(2deg);
  cursor: grabbing !important;
}