/* -----------------------------------------------------------
   App Core Stylesheet
   Fundraiser Platform
   Shared primitives across admin, org, and public
----------------------------------------------------------- */

:root {
  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Radii */
  --radius-xs: 0.2rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Text */
  --color-text-muted: #6c757d;

  /* Core default focus */
  --color-focus: #0d6efd;

  /* Shadows */
  --shadow-soft: 0 0.25rem 0.5rem rgba(15, 23, 42, 0.08);

  /* Default surfaces and borders, role styles may override */
  --color-surface: #ffffff;
  --color-border: #dee2e6;
}

/* -----------------------------------------------------------
   Layout shells
----------------------------------------------------------- */

.page-section {
  margin-bottom: var(--space-8);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.page-header-title {
  margin: 0;
}

.page-header-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Card shell primitives */
.card-shell {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
}

/* Optional shell sections (safe to use everywhere) */
.card-shell-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.02);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.card-shell-body {
  padding: var(--space-4);
}

/* -----------------------------------------------------------
   Utility gap helpers
----------------------------------------------------------- */

.gap-sm {
  gap: var(--space-2);
}
.gap-md {
  gap: var(--space-4);
}
.gap-lg {
  gap: var(--space-6);
}

/* -----------------------------------------------------------
   Cards (Bootstrap cards) small improvements
----------------------------------------------------------- */

.card {
  border-radius: var(--radius-md);
  border-color: var(--color-border);
}

.card-header {
  background-color: #f8f9fa;
  border-bottom-color: var(--color-border);
}

.card-header-muted {
  background-color: #f1f3f5;
}

/* -----------------------------------------------------------
   Forms
----------------------------------------------------------- */

.form-control,
.form-select {
  border-radius: var(--radius-sm);
}

.form-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.table-input {
  width: 100%;
  max-width: 160px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

/* File upload dropzone */
.file-upload-area {
  padding: var(--space-4);
  border: 2px dashed #c7c7c7;
  border-radius: var(--radius-md);
  background: #fafafa;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.file-upload-area:hover {
  background: #f1f1f1;
  border-color: var(--color-focus);
}

/* -----------------------------------------------------------
   Tables
----------------------------------------------------------- */

.table thead th {
  font-size: 0.875rem;
  white-space: nowrap;
}

.table td,
.table th {
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background-color: #f8f9fa;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.img-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* -----------------------------------------------------------
   Buttons
----------------------------------------------------------- */

.btn {
  border-radius: var(--radius-sm);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
}

/* Accessible focus */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.badge-soft {
  background-color: rgba(13, 110, 253, 0.08);
  color: #0d6efd;
  border-radius: 999px;
  font-weight: 500;
}

/* -----------------------------------------------------------
   Flash messages
----------------------------------------------------------- */

.alert {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

/* -----------------------------------------------------------
   Text helpers
----------------------------------------------------------- */

.text-muted-sm {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* -----------------------------------------------------------
   Responsive helpers
----------------------------------------------------------- */

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header-actions {
    width: 100%;
    justify-content: stretch;
  }

  .page-header-actions .btn {
    width: 100%;
  }

  .table-responsive {
    border-radius: var(--radius-sm);
  }
}

/* -----------------------------------------------------------
   Product palette foundation
   Shared color tokens for public, demo, org, and partner UI
----------------------------------------------------------- */

:root {
  --color-brand-primary: #2563eb;
  --color-brand-primary-dark: #1d4ed8;
  --color-brand-primary-soft: rgba(37, 99, 235, 0.10);

  --color-brand-sun: #f59e0b;
  --color-brand-sun-soft: rgba(245, 158, 11, 0.14);

  --color-brand-mint: #10b981;
  --color-brand-mint-soft: rgba(16, 185, 129, 0.12);

  --color-brand-coral: #f97316;
  --color-brand-coral-soft: rgba(249, 115, 22, 0.12);

  --color-brand-sky: #0ea5e9;
  --color-brand-sky-soft: rgba(14, 165, 233, 0.12);

  --color-text: #18212f;
  --color-text-muted: #667085;

  --shadow-card: 0 14px 30px rgba(15, 23, 42, 0.12);
}