/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --app-bg: #f7fbff;
  --app-surface: #ffffff;
  --app-soft-blue: #e9f4ff;
  --app-blue: #2d7fc7;
  --app-blue-dark: #1f5f96;
}

body.app-body {
  background: linear-gradient(180deg, var(--app-bg) 0%, #ffffff 100%);
  color: #163047;
  min-height: 100vh;
}

.app-header {
  background-color: var(--app-surface);
  border-color: #d7e9fa !important;
  box-shadow: 0 8px 20px rgba(46, 126, 198, 0.08);
}

.admin-card {
  background: var(--app-surface);
  border: 1px solid #d7e9fa;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 8px 20px rgba(46, 126, 198, 0.08);
}

.admin-card--soft {
  background: var(--app-soft-blue);
}

.btn-primary {
  background-color: var(--app-blue);
  border-color: var(--app-blue);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--app-blue-dark);
  border-color: var(--app-blue-dark);
}