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

/* ============================================
   DESIGN SYSTEM NEWCAIXA - MODERNIZADO
   ============================================ */

@layer components {
  /* ===== BOTÕES ===== */
  .btn {
    @apply inline-flex items-center justify-center rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none gap-2 px-4 py-2;
  }
  
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }
  
  .btn-lg {
    @apply px-6 py-3 text-base;
  }
  
  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm hover:shadow;
  }
  
  .btn-secondary {
    @apply btn bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-400 border border-gray-300;
  }
  
  .btn-success {
    @apply btn bg-green-600 text-white hover:bg-green-700 focus:ring-green-500 shadow-sm hover:shadow;
  }
  
  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-sm hover:shadow;
  }
  
  .btn-outline {
    @apply btn border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-400;
  }
  
  .btn-ghost {
    @apply btn bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-400;
  }
  
  .btn-gradient {
    @apply btn bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700 shadow-md hover:shadow-lg;
  }

  /* ===== INPUTS E FORMS ===== */
  .input {
    @apply block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-0 disabled:bg-gray-100 disabled:cursor-not-allowed;
  }
  
  .input-error {
    @apply border-red-300 focus:border-red-500 focus:ring-red-500;
  }
  
  .select {
    @apply input bg-white cursor-pointer;
  }
  
  .textarea {
    @apply input min-h-[4rem] resize-y;
  }
  
  .label {
    @apply block text-sm font-medium text-gray-700 mb-1.5;
  }
  
  .label-required::after {
    content: " *";
    @apply text-red-500;
  }
  
  .form-error {
    @apply text-xs text-red-600 mt-1;
  }
  
  .form-help {
    @apply text-xs text-gray-500 mt-1;
  }

  /* ===== CARDS MODERNOS ===== */
  .card {
    @apply bg-white rounded-xl border border-gray-100 shadow-sm p-4 sm:p-6 transition-shadow hover:shadow-md;
  }
  
  .card-compact {
    @apply p-3 sm:p-4;
  }
  
  .card-header {
    @apply mb-4 pb-3 border-b border-gray-100 text-lg font-semibold text-gray-800 flex items-center justify-between;
  }
  
  .card-title {
    @apply text-base font-semibold text-gray-800 flex items-center gap-2;
  }
  
  .card-body {
    @apply space-y-4;
  }
  
  .card-footer {
    @apply mt-4 pt-3 border-t border-gray-100 flex items-center justify-between;
  }

  /* ===== TABELAS MODERNAS ===== */
  .table-responsive {
    @apply w-full overflow-x-auto rounded-lg border border-gray-200;
  }
  
  .table {
    @apply min-w-full divide-y divide-gray-200;
  }
  
  .table thead th {
    @apply bg-gray-50 px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600;
  }
  
  .table tbody tr {
    @apply border-b border-gray-100 transition-colors hover:bg-gray-50;
  }
  
  .table tbody tr:last-child {
    @apply border-b-0;
  }
  
  .table tbody td {
    @apply px-4 py-3 text-sm text-gray-700 align-middle;
  }
  
  .table-striped tbody tr:nth-child(odd) {
    @apply bg-white;
  }
  
  .table-striped tbody tr:nth-child(even) {
    @apply bg-gray-50;
  }

  /* ===== BADGES MODERNOS ===== */
  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold;
  }
  
  .badge-sm {
    @apply px-2 py-0.5 text-[0.688rem];
  }
  
  .badge-lg {
    @apply px-3 py-1 text-sm;
  }
  
  .badge-success { @apply badge bg-green-100 text-green-700; }
  .badge-info    { @apply badge bg-blue-100 text-blue-700; }
  .badge-warning { @apply badge bg-yellow-100 text-yellow-700; }
  .badge-danger  { @apply badge bg-red-100 text-red-700; }
  .badge-gray    { @apply badge bg-gray-100 text-gray-700; }
  .badge-purple  { @apply badge bg-purple-100 text-purple-700; }

  /* ===== ALERTS MODERNOS ===== */
  .alert {
    @apply rounded-lg p-4 border flex items-start gap-3;
  }
  
  .alert-success { @apply alert bg-green-50 border-green-200 text-green-800; }
  .alert-info    { @apply alert bg-blue-50 border-blue-200 text-blue-800; }
  .alert-warning { @apply alert bg-yellow-50 border-yellow-200 text-yellow-800; }
  .alert-danger  { @apply alert bg-red-50 border-red-200 text-red-800; }
  
  .alert-icon {
    @apply flex-shrink-0 w-5 h-5;
  }
  
  .alert-content {
    @apply flex-1;
  }
  
  .alert-title {
    @apply font-semibold mb-1;
  }
  
  .alert-message {
    @apply text-sm;
  }

  /* ===== CONTAINERS ===== */
  .container-responsive {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .container-narrow {
    @apply max-w-4xl mx-auto px-4 sm:px-6;
  }
  
  .container-wide {
    @apply max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* ===== TÍTULOS E TEXTOS ===== */
  .page-title {
    @apply text-2xl md:text-3xl font-bold tracking-tight text-gray-900 mb-2;
  }
  
  .page-subtitle {
    @apply text-sm md:text-base text-gray-600 mb-6;
  }
  
  .section-title {
    @apply text-lg md:text-xl font-semibold text-gray-800 mb-4;
  }
  
  .section-subtitle {
    @apply text-sm text-gray-600 mb-3;
  }

  /* ===== LOADING SPINNER ===== */
  .spinner {
    @apply inline-block w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin;
  }
  
  .spinner-lg {
    @apply w-8 h-8 border-4;
  }

  /* ===== DIVIDERS ===== */
  .divider {
    @apply border-t border-gray-200 my-4;
  }
  
  .divider-vertical {
    @apply border-l border-gray-200 mx-4 h-full;
  }

  /* ===== ANIMAÇÕES ===== */
  .fade-in {
    animation: fadeIn 0.3s ease-in;
  }
  
  .slide-in {
    animation: slideIn 0.3s ease-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes slideIn {
    from {
      transform: translateY(10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* ===== UTILS ===== */
  .text-gradient {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
  }
  
  .shadow-elegant {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  
  .shadow-elegant-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  /* ===== COMPANY LOGO ===== */
  .company-logo-img {
    @apply object-contain;
  }
  
  .company-logo-thumb {
    max-width: 100px;
    max-height: 100px;
  }
  
  .company-logo-medium {
    max-width: 200px;
    max-height: 200px;
  }
  
  .company-logo-large {
    max-width: 400px;
    max-height: 400px;
  }
  
  .company-logo-fallback {
    @apply flex items-center justify-center w-full h-full text-white font-semibold bg-gradient-to-br from-blue-500 to-purple-500 rounded-full;
  }
}
.drag-drop-zone {
  border: 2px dashed #e2e8f0;
  transition: all 0.3s ease;
}

.drag-drop-zone.dragover {
  border-color: #3b82f6;
  background-color: #f3f4f6;
}

.progress-bar {
  transition: width 0.3s ease;
}

.file-input-label {
  cursor: pointer;
  transition: all 0.3s ease;
}

.file-input-label:hover {
  background-color: #f3f4f6;
}

.required-field::after {
  content: '*';
  color: #ef4444;
  margin-left: 4px;
}

.column-select {
  max-height: 300px;
  overflow-y: auto;
}

.error-message {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} 
/* ============================================
   ROLES FORM PAGES - NEW E EDIT
   ============================================ */

.roles-form-page {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.roles-form-header {
  margin-bottom: 0.5rem;
}

.roles-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  color: #6b7280;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.roles-back-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.roles-form-card {
  background: white;
  border-radius: 0.75rem;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.roles-form-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.roles-form-card-body {
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .roles-form-page {
    padding: 2rem 1.5rem;
  }
  
  .roles-form-card-body {
    padding: 2rem;
  }
}
/*
 * 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.
 *


 */

@media print {
  body {
    margin: 0;
    padding: 0;
    font-size: 12pt; /* Ajuste o tamanho da fonte conforme necessário */
    height: 100vh; /* Ajusta a altura para caber na página */
    overflow: hidden; /* Evita que o conteúdo transborde */
  }

  /* Ajuste a largura da tabela para caber na página */
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    padding: 8px;
    border: 1px solid #000; /* Adiciona bordas para melhor visualização */
  }

  /* Esconder elementos que não devem aparecer na impressão */
  .no-print {
    display: none;
  }
}