/*
 * Application CSS - Propshaft asset pipeline
 * This file includes Google Fonts and references the compiled Tailwind CSS.
 * Legacy styles are scoped to server-rendered views so they do not affect the React SPA.
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=El+Messiri:wght@400;500;600;700&display=swap');

/*
 * Tailwind CSS is compiled separately and included via the asset pipeline
 * The compiled tailwind.css file contains all the necessary Tailwind styles
 */

/* Tailwind CSS - processed by Bun and output to builds directory */
/* This will be automatically included by Propshaft from app/assets/builds/ */

/* Base application styles */
body:not(.tac-spa) {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
}

/* Utility classes for common layouts */
body:not(.tac-spa) .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

body:not(.tac-spa) .text-center {
  text-align: center;
}

body:not(.tac-spa) .mt-4 {
  margin-top: 1rem;
}

body:not(.tac-spa) .mb-4 {
  margin-bottom: 1rem;
}

body:not(.tac-spa) .p-4 {
  padding: 1rem;
}

/* Button styles */
body:not(.tac-spa) .btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

body:not(.tac-spa) .btn-primary {
  background-color: #007bff;
  color: #fff;
}

body:not(.tac-spa) .btn-primary:hover {
  background-color: #0056b3;
}

/* Flash message styles */
body:not(.tac-spa) .flash {
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 0.25rem;
}

body:not(.tac-spa) .flash.notice {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

body:not(.tac-spa) .flash.alert {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Form styles */
body:not(.tac-spa) .form-group {
  margin-bottom: 1rem;
}

body:not(.tac-spa) .form-control {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  font-size: 1rem;
}

body:not(.tac-spa) .form-control:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Loading states */
body:not(.tac-spa) .loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Responsive utilities */
@media (max-width: 768px) {
  body:not(.tac-spa) .container {
    padding: 0 0.5rem;
  }

  body:not(.tac-spa) .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}