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

@layer components {
  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-semibold py-2 px-4 rounded-md shadow transition-colors;
  }
  
  .btn-secondary {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-md shadow transition-colors;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
  }
  
  .form-input {
    @apply w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-200 focus:ring-opacity-50;
  }
  
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #ee7b25;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Admin panel fixes */
.admin-content {
  width: calc(100% - 250px) !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.admin-content .container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.admin-card {
  width: 100% !important;
}

.row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 991.98px) {
  .admin-content {
    width: 100% !important;
  }
}