/*
 * 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: #f3f7fb;
  --app-ink: #16324f;
  --app-accent: #0b7285;
  --app-accent-dark: #095c6a;
}

body.app-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(11, 114, 133, 0.10), transparent 28rem),
    linear-gradient(180deg, #f9fbfd 0%, var(--app-bg) 100%);
  color: var(--app-ink);
}

.auth-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 20%, rgba(11, 114, 133, 0.20), transparent 22rem),
    radial-gradient(circle at 85% 15%, rgba(36, 82, 122, 0.25), transparent 24rem),
    linear-gradient(135deg, #10233a 0%, #16324f 45%, #0b7285 100%);
}

.app-navbar {
  background: linear-gradient(135deg, var(--app-ink) 0%, #24527a 55%, var(--app-accent) 100%);
}

.auth-flash {
  max-width: 32rem;
}

.auth-frame {
  max-width: 72rem;
  margin: 0 auto;
}

.auth-panel {
  border: 0;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(3, 16, 31, 0.28);
}

.auth-hero {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 18rem),
    linear-gradient(160deg, rgba(16, 35, 58, 0.98) 0%, rgba(22, 50, 79, 0.96) 60%, rgba(11, 114, 133, 0.95) 100%);
}

.auth-kicker {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.page-card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 1rem 3rem rgba(22, 50, 79, 0.08);
}

.section-title {
  letter-spacing: -0.02em;
}

.metric-tile {
  border: 0;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(36, 82, 122, 0.08);
}

.table thead th {
  border-bottom-width: 1px;
  color: #5c728a;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table tbody td {
  vertical-align: middle;
}

.badge-status {
  background: rgba(11, 114, 133, 0.12);
  color: var(--app-accent-dark);
}