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

@layer components {
  /* Masquerading Banner Styles */
  .masquerade-banner {
    @apply fixed top-0 left-0 right-0 z-50;
    @apply bg-yellow-500 border-b-4 border-yellow-600;
    @apply shadow-lg;
  }

  .masquerade-banner-content {
    @apply container mx-auto px-4 py-3;
    @apply flex items-center justify-between gap-4;
  }

  .masquerade-banner-message {
    @apply flex items-center gap-3;
  }

  .masquerade-banner-icon {
    @apply w-6 h-6 text-yellow-900 flex-shrink-0;
  }

  .masquerade-banner-text {
    @apply text-sm text-yellow-900;
  }

  .masquerade-banner-text strong {
    @apply font-semibold text-yellow-950;
  }

  .masquerade-banner-actions {
    @apply flex-shrink-0;
  }

  .masquerade-banner-form {
    @apply m-0;
  }

  .masquerade-banner-button {
    @apply px-4 py-2 rounded-md;
    @apply bg-yellow-900 text-white;
    @apply hover:bg-yellow-950 transition-colors;
    @apply font-medium text-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-yellow-950 focus:ring-offset-2;
    @apply cursor-pointer;
  }

  /* Add padding to body when banner is active to prevent content overlap */
  body.masquerading {
    @apply pt-16;
  }

  /* Appointment Conflict Error Styles */
  .appointment-conflict-error {
    @apply block text-red-600 bg-red-50 border border-red-200 rounded p-3 mt-2;
    @apply text-sm font-medium;
  }

  .appointment-conflict-error.hidden {
    @apply hidden;
  }
}
.logo-placeholder img {
    height: 25px;
    margin: auto 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.
 *


 */