@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 350 89% 60%;
    --destructive-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --success: 87 100% 37%;
    --success-foreground: 0 0% 100%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 239 84% 67%;
    --radius: 0.5rem;
    --primary: 239 84% 67%;
    --primary-foreground: 0 0% 100%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --primary: 239 84% 67%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 18%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 18%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 18%;
    --accent-foreground: 0 0% 98%;
    --destructive: 350 89% 60%;
    --destructive-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --success: 84 81% 44%;
    --success-foreground: 0 0% 100%;
    --border: 0 0% 18%;
    --input: 0 0% 18%;
    --ring: 239 84% 67%;
  }
}


@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;

    /* docs specific */
    /* https://css-tricks.com/snippets/css/system-font-stack/ */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
}

@layer components {
  .flash-message {
    @apply opacity-0 transform translate-x-full transition-all duration-300 ease-out;
  }

  .flash-message.show {
    @apply opacity-100 translate-x-0;
  }
}
/*
 * 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 generally better to create a new file per style scope.
 *


 */

/* Pagy nav styles */
.pagy {
  display: flex;
  gap: 0.25rem;
}

.pagy .page {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(55, 65, 81);
  background-color: white;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.375rem;
}

.pagy .page:hover {
  background-color: rgb(249, 250, 251);
}

.pagy .active {
  background-color: rgb(59, 130, 246);
  border-color: rgb(59, 130, 246);
  color: white;
}

.pagy .active:hover {
  background-color: rgb(37, 99, 235);
}

.pagy .disabled {
  color: rgb(156, 163, 175);
  pointer-events: none;
}

/* Stacked recording cards highlight styles - Blue theme */
.stacked-expanded {
  background-color: #dbeafe !important; /* Light blue background */
  border-color: #3b82f6 !important; /* Blue border */
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06) !important;
  transition: all 0.2s ease-in-out;
}

.stacked-expanded:hover {
  background-color: #bfdbfe !important; /* Slightly darker blue on hover */
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -2px rgba(59, 130, 246, 0.05) !important;
}

/* Modal highlight styles - Blue theme */
.modal-highlighted {
  background-color: #dbeafe !important; /* Light blue background */
  border-color: #3b82f6 !important; /* Blue border */
  box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04) !important;
}

/* Ensure modal appears on top of everything */
[data-modal-target="modal"] {
  z-index: 99999 !important;
}