/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is suggested that you comment or delete this file, and create a new file for your application styles.
 *
 *= require_tree .
 *= require_self
 */

/* Flash Messages */
.flash-messages {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    width: auto;
    max-width: 24rem;
    pointer-events: none;
}

.flash-messages > div {
    pointer-events: auto;
    margin-bottom: 0.5rem;
    padding: 1rem 3rem 1rem 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    animation: slideIn 0.2s ease-out;
    position: relative;
}

.flash-messages .flash-notice {
    background-color: #10B981;
    color: white;
}

.flash-messages .flash-alert {
    background-color: #EF4444;
    color: white;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Close button for flash messages */
.alert-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: currentColor;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    padding: 0.25rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

.alert-close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.alert-close:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* basecoat side menu collides with  radix-ui Dialog
Here is the fix
*/
:is(.sidebar:not([data-side]), .sidebar[data-side="left"])[aria-hidden="true"][data-aria-hidden="true"] nav {
  --tw-translate-x: 0 !important;
  translate: var(--tw-translate-x) var(--tw-translate-y) !important;
}

.sidebar[data-side="right"][aria-hidden="true"][data-aria-hidden="true"] nav {
  --tw-translate-x: 0 !important;
  translate: var(--tw-translate-x) var(--tw-translate-y) !important;
}

@media (min-width: 48rem) {
  .sidebar[aria-hidden="true"][data-aria-hidden="true"] nav {
    translate: none !important;
    transform: translateX(0) !important;
  }

  .sidebar:not([data-side])[aria-hidden="true"][data-aria-hidden="true"] + *,
  .sidebar[data-side="left"][aria-hidden="true"][data-aria-hidden="true"] + * {
    margin-left: var(--sidebar-width) !important;
  }

  .sidebar[data-side="right"][aria-hidden="true"][data-aria-hidden="true"] + * {
    margin-right: var(--sidebar-width) !important;
  }
}

.dialog-overlay {
    z-index: 100;
}
.dialog-content {
    z-index: 101;
}
/* End of basecoat/radix fix */

td.text, th.text {
    white-space: normal; /* for text columns */
}