/* Custom CSS for Coney Minds DATA PORTAL */

/* Brand Colors */
:root {
    --brand-orange: #f37837;
    --brand-blue: #191c51;
    --brand-red: #b9151c;
}

/* Card styling */
.card {
    @apply rounded-2xl shadow-lg p-6 bg-white;
}

/* Feature cards */
.feature-card {
    @apply block rounded-2xl overflow-hidden transition-shadow duration-300 border border-gray-200;
    height: 320px; /* Increased height to accommodate larger icons */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.feature-card .card-image {
    height: 160px; /* Fixed image height */
    @apply bg-cover bg-center;
}

.feature-card .card-content {
    @apply p-6 bg-white text-center flex flex-col justify-between;
    height: 160px; /* Increased height to accommodate larger icons */
}

/* File list styling */
.file-list {
    max-height: 22.5rem; /* ~15 * 1.5rem */
    overflow-y: auto;
}

/* Dropzone customizations */
.dropzone {
    @apply transition-all duration-200;
}

.dropzone:hover {
    border-color: var(--brand-orange);
}

.dropzone.dz-drag-hover {
    border-color: var(--brand-orange);
    background-color: rgba(243, 120, 55, 0.05);
}

/* Button hover states */
.btn-primary {
    background-color: var(--brand-orange);
    @apply text-white px-4 py-2 rounded-lg transition-colors duration-200;
}

.btn-primary:hover {
    background-color: #e06a2b;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors duration-200;
}

/* Success states */
.success-border {
    @apply ring-2;
    ring-color: #10b981;
}

/* Brand color utilities */
.text-brand-orange {
    color: var(--brand-orange);
}

.text-brand-blue {
    color: var(--brand-blue);
}

.bg-brand-orange {
    background-color: var(--brand-orange);
}

.bg-brand-blue {
    background-color: var(--brand-blue);
}

.border-brand-orange {
    border-color: var(--brand-orange);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .file-list {
        max-height: 15rem;
    }
}

/* Make the whole drop area clearly clickable */
.dz-clickable { cursor: pointer; }
.dz-clickable:focus, .dz-clickable:focus-visible { outline: 2px solid #22c55e33; outline-offset: 2px; }

/* File list height ~15 rows (approx.) with scrollbar */
.file-list { max-height: 22.5rem; overflow-y: auto; }

/* Inputs & Buttons (desktop-first; Tailwind handles most styling) */
.input {
  @apply border rounded-lg px-3 py-2 shadow-sm focus:outline-none focus:ring focus:ring-orange-200;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease-in-out;
  border: none;
  cursor: pointer;
  min-height: 48px;
}

.btn-orange {
  background-color: #f97316 !important;
  color: white !important;
  border: none !important;
}

.btn-orange:hover {
  background-color: #ea580c !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.btn-green {
  background-color: #22c55e !important;
  color: white !important;
  border: none !important;
}

.btn-green:hover {
  background-color: #16a34a !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.btn:disabled {
  opacity: 0.5;
  filter: grayscale(100%);
  cursor: not-allowed;
}

/* Button container for even spacing */
.btn-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

.btn-container .btn {
  flex: 1;
  min-width: 0;
}