/*
 * 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 using a relative path.
 *
 *= require_tree .
 *= require_self
 */

/* Global defaults */
body {
  @apply bg-slate-50 text-slate-900;
}

/* Typography helpers */
.strong {
  @apply text-gray-900 font-semibold;
}

.muted .strong {
  @apply text-gray-800;
}

/* Meta classes - layout components */
.card {
  @apply bg-white shadow-sm rounded-2xl p-8;
}

.card-sm {
  @apply bg-white shadow-sm rounded-2xl p-6;
}

.card-header {
  @apply px-8 py-6 border-b border-gray-100;
}

.subcard {
  @apply bg-gray-50 rounded-xl p-5 flex flex-col;
}

.subcard-title {
  @apply text-sm font-semibold text-gray-900 mb-3;
}

.page-title {
  @apply text-2xl font-bold text-gray-900;
}

.section-title {
  @apply text-lg font-semibold text-gray-900;
}

.muted {
  @apply text-sm text-gray-500;
}

.label {
  @apply block text-sm font-medium text-gray-700;
}

.input {
  @apply rounded-lg border border-gray-300 px-3 py-2 text-sm w-full;
}

.btn-primary {
  @apply px-4 py-2 text-white text-sm font-medium rounded-lg transition bg-dezim-yellow hover:bg-dezim-orange;
}

.btn-secondary {
  @apply px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition;
}

.disabled {
  opacity: 0.5 !important;
}

.link {
  @apply text-blue-600 hover:text-blue-700;
}

.badge-info {
  @apply inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-800 rounded-md text-sm font-medium;
}

/* Table components */
.table-card {
  @apply bg-white shadow-sm rounded-2xl overflow-hidden;
}

.table {
  @apply min-w-full divide-y divide-gray-200 text-sm;
}

.table th {
  @apply px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider;
}

.table thead {
  @apply bg-gray-50;
}

.table tbody {
  @apply bg-white divide-y divide-gray-100;
}

.table td {
  @apply px-6 py-4 text-gray-600;
}

.table tr {
  @apply hover:bg-gray-50 transition;
}

.table td.font-medium {
  @apply text-gray-900;
}

/* Status badges */
.badge-success {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800;
}

.badge-warning {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800;
}

/* Flash messages */
.flash-notice {
  @apply bg-green-50 border border-green-200 rounded-lg p-4 text-sm text-green-700;
}

.flash-alert {
  @apply bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-sm text-yellow-700;
}

.flash-errors {
  @apply bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700;
}

.flash-errors h3 {
  @apply font-medium mb-2;
}

/* Form & info boxes */
.error-box {
  @apply bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700;
}

.info-box {
  @apply bg-gray-50 rounded-lg p-4 text-xs text-gray-600;
}

.file-drop-zone {
  @apply border-2 border-dashed border-gray-300 rounded-lg p-6 text-center;
}

/* Spacing & layout helpers */
.stack-2 {
  @apply space-y-2;
}

.stack-4 {
  @apply space-y-4;
}

.stack-6 {
  @apply space-y-6;
}

.stack-8 {
  @apply space-y-8;
}

.row-between {
  @apply flex items-start justify-between;
}

.actions-right {
  @apply flex justify-end pt-2;
}

.btn-muted-xs {
  @apply bg-gray-100 hover:bg-gray-200 text-xs font-medium rounded-md px-2 py-1 transition;
}

.staging-banner {
  @apply bg-red-600 text-white text-center py-2 font-bold text-sm tracking-wider sticky top-0 z-[9999] w-full shadow-md;
}