/*
 * 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.
 */

 /* Dialog */

 /* Hide dialogs by default to prevent flash of open state */
 dialog:not([open]) {
   display: none !important;
 }

 /* Firefox has a bug with backdrop, so we can use a box-shadow instead */
 dialog.modal {
   box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
 }

 dialog.slideover {
   box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
 }

 dialog.max-w-full {
   box-shadow: none;
 }

 dialog::backdrop {
   background: none;
 }

 /* Modal animations */
 dialog.modal:not(.max-w-full)[open] {
   animation:
     fadeIn var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards,
     scaleIn var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards;
 }

 dialog.modal:not(.max-w-full)[closing] {
   animation:
     fadeOut var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards,
     scaleOut var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards;
 }

 /* Fullscreen modal animations - fade only */
 dialog.modal.max-w-full[open] {
   animation: fadeIn var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards;
 }

 dialog.modal.max-w-full[closing] {
   animation: fadeOut var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards;
 }

 /* Center modals */
 dialog.modal {
   margin: auto;
   position: fixed;
   inset: 0;
   align-items: center;
   justify-content: center;
 }

 /* Slideover animations */
 dialog.slideover[open] {
   animation:
     fadeIn var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards,
     slide-in-from-right var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards;
 }

 dialog.slideover[closing] {
   pointer-events: none;
   animation:
     fadeOut var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards,
     slide-out-to-right var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards;
 }

 /* Slideover animations for top */
 dialog.slideover-top[open] {
   animation:
     fadeIn var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards,
     slide-in-from-top var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards;
 }

 dialog.slideover-top[closing] {
   animation:
     fadeOut var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards,
     slide-out-to-top var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards;
 }

 /* Slideover animations for bottom */
 dialog.slideover-bottom[open] {
   animation:
     fadeIn var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards,
     slide-in-from-bottom var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards;
 }

 dialog.slideover-bottom[closing] {
   animation:
     fadeOut var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards,
     slide-out-to-bottom var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards;
 }

 /* Slideover animations for left */
 dialog.slideover-left[open] {
   animation:
     fadeIn var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards,
     slide-in-from-left var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards;
 }

 dialog.slideover-left[closing] {
   animation:
     fadeOut var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards,
     slide-out-to-left var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards;
 }

 /* Slideover animations for right */
 dialog.slideover-right[open] {
   animation:
     fadeIn var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards,
     slide-in-from-right var(--overlay-motion-duration-enter) var(--overlay-motion-ease) forwards;
 }

 dialog.slideover-right[closing] {
   animation:
     fadeOut var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards,
     slide-out-to-right var(--overlay-motion-duration-exit) var(--overlay-motion-ease) forwards;
 }

 body {
   scrollbar-gutter: stable;
   overflow-y: scroll;
 }

 /* Scrollbar compensation for fixed elements */
 :root {
   --scrollbar-compensation: 0px;
   --overlay-motion-duration-enter: 450ms;
   --overlay-motion-duration-exit: 300ms;
   --overlay-motion-duration: var(--overlay-motion-duration-enter);
   --overlay-motion-ease: cubic-bezier(0.35, 0.75, 0, 1);
 }

 /* Apply compensation to body when modal/slideover/drawer is open */
 body.modal-open,
 body.slideover-open,
 body.drawer-open {
   padding-right: var(--scrollbar-compensation);
 }

 /* Keep modal and slideover scroll locking in sync with compensation classes */
 body.modal-open,
 body.slideover-open,
 body.drawer-open {
   overflow: hidden;
 }

 /* Apply compensation to fixed elements */
 body.modal-open .fixed,
 body.slideover-open .fixed,
 body.drawer-open .fixed {
   padding-right: var(--scrollbar-compensation);
 }

 /* Context-menu dialogs are fixed-position popups and should not be offset */
 body.modal-open dialog[data-context-menu-target="menu"],
 body.slideover-open dialog[data-context-menu-target="menu"],
 body.drawer-open dialog[data-context-menu-target="menu"] {
   padding-right: 0 !important;
 }

 /* Exclude slideover/drawer dialogs from scrollbar compensation */
 body.modal-open [data-slideover-target="dialog"],
 body.slideover-open [data-slideover-target="dialog"],
 body.modal-open [data-drawer-target="dialog"],
 body.drawer-open [data-drawer-target="dialog"] {
   padding-right: 0 !important;
 }

 dialog.modal {
   cursor: auto;
 }

 /* Div-based modals */
 .modal-div {
   cursor: auto;
   transition-property: opacity;
   transition-duration: var(--overlay-motion-duration-enter);
   transition-timing-function: var(--overlay-motion-ease);
 }

 .modal-div > div {
   transition-property: transform;
   transition-duration: var(--overlay-motion-duration-enter);
   transition-timing-function: var(--overlay-motion-ease);
 }

 .modal-div.modal-open {
   display: flex !important;
 }

 /* Div modal animations - fade in and scale in content */
 .modal-div.modal-visible {
   opacity: 1;
 }

 .modal-div.modal-visible > div {
   transform: scale(1);
 }

 .modal-div:not(.modal-visible) {
   opacity: 0;
   transition-duration: var(--overlay-motion-duration-exit);
 }

 .modal-div:not(.modal-visible) > div {
   transform: scale(0.95);
   transition-duration: var(--overlay-motion-duration-exit);
 }

 /* Prevent scrolling while div modal is open */
 body:has(.modal-div.modal-open) {
   overflow: hidden;
 }

 /* Keyframes for fade animations */
 @keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }

 @keyframes fadeOut {
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
   }
 }

 /* Keyframes for new animations */
 @keyframes slide-in-from-top {
   from {
     transform: translateY(-100%);
   }
   to {
     transform: translateY(0);
   }
 }

 @keyframes slide-out-to-top {
   from {
     transform: translateY(0);
   }
   to {
     transform: translateY(-100%);
   }
 }

 @keyframes slide-in-from-bottom {
   from {
     transform: translateY(100%);
   }
   to {
     transform: translateY(0);
   }
 }

 @keyframes slide-out-to-bottom {
   from {
     transform: translateY(0);
   }
   to {
     transform: translateY(100%);
   }
 }

 @keyframes slide-in-from-left {
   from {
     transform: translateX(-100%);
   }
   to {
     transform: translateX(0);
   }
 }

 @keyframes slide-out-to-left {
   from {
     transform: translateX(0);
   }
   to {
     transform: translateX(-100%);
   }
 }

 @keyframes slide-in-from-right {
   from {
     transform: translateX(100%);
   }
   to {
     transform: translateX(0);
   }
 }

 @keyframes slide-out-to-right {
   from {
     transform: translateX(0);
   }
   to {
     transform: translateX(100%);
   }
 }

 dialog[data-floating-select-target="menu"] {
   opacity: 0;
 }

 dialog[data-floating-select-target="menu"][open] {
   opacity: 1;
 }

 /* Add new keyframes for scale animations */
 @keyframes scaleIn {
   from {
     transform: scale(0.95);
   }
   to {
     transform: scale(1);
   }
 }

 @keyframes scaleOut {
   from {
     transform: scale(1);
   }
   to {
     transform: scale(0.95);
   }
 }

 /* Add specific box-shadow handling for slideover directions */
 dialog.slideover-top,
 dialog.slideover-bottom {
   box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
 }

 /* Drawer styles */
 dialog.drawer {
   --drawer-overlay-opacity: 0;
   --drawer-backdrop-duration: var(--overlay-motion-duration-enter);
   margin: 0;
   outline: none;
   user-select: none;
   height: 100vh;
   height: 100dvh;
   max-height: 100vh;
   max-height: 100dvh;
   margin-inline: auto;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 0;
   border-radius: 1rem 1rem 0 0;
   background: white;
   box-shadow: none;
   overflow: hidden;
   will-change: transform;
   transform: translate3d(0, 100%, 0);
 }

 .dark dialog.drawer {
   background: rgb(38 38 38);
 }

 dialog.drawer::backdrop {
   background: rgba(0, 0, 0, var(--drawer-overlay-opacity, 0));
   transition: background-color var(--drawer-backdrop-duration) var(--overlay-motion-ease);
 }

 /* Prevent body scroll when drawer is open */
 body:has(dialog.drawer[open]) {
   overflow: hidden;
 }

 /* Drawer motion: transform is handled in JS, backdrop fades in CSS */
 dialog.drawer[open]::backdrop {
   background: rgba(0, 0, 0, var(--drawer-overlay-opacity, 0));
 }

 dialog.drawer[closing] {
   pointer-events: none;
   --drawer-backdrop-duration: var(--overlay-motion-duration-exit);
 }

 dialog.drawer[closing]::backdrop {
   background: rgba(0, 0, 0, 0);
 }

  /* Reduced motion: disable all animations for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    dialog.modal[open],
   dialog.modal[closing],
   dialog.slideover[open],
   dialog.slideover[closing],
   dialog.slideover-top[open],
   dialog.slideover-top[closing],
   dialog.slideover-bottom[open],
   dialog.slideover-bottom[closing],
   dialog.slideover-left[open],
   dialog.slideover-left[closing],
   dialog.slideover-right[open],
   dialog.slideover-right[closing],
   dialog.drawer[open],
   dialog.drawer[closing] {
     animation: none;
   }

   dialog.modal,
   dialog.slideover,
   dialog.drawer,
   .modal-div,
   .modal-div > div {
     transition: none;
   }

   dialog.drawer::backdrop {
     transition: none;
   }
 }