/*
 * 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 {
  --color-text: #1f2328;
  --color-muted: #59636e;
  --color-border: #d1d9e0;
  --color-accent: #0969da;
  --color-error-bg: #ffebe9;
  --color-error-border: #ff818266;
  --color-notice-bg: #dafbe1;
  --color-notice-border: #2da44e66;
  --color-warning-bg: #fff8c5;
  --color-warning-border: #d4a72c66;
  --color-info-bg: #ddf4ff;
  --color-info-border: #54aeff66;
}

body {
  margin: 0;
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.app-main {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.app-header {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.app-header form {
  margin: 0;
}

.app-header__logout {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.35rem 0.75rem;
  color: var(--color-muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.flash {
  max-width: 64rem;
  margin: 1rem auto 0;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

.flash--alert {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
}

.flash--notice {
  background: var(--color-notice-bg);
  border-color: var(--color-notice-border);
}

.login {
  max-width: 22rem;
  margin: 4rem auto;
  padding: 0 1rem;
}

.login h1 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.login__form {
  display: grid;
  gap: 0.5rem;
}

.login__form input[type="password"] {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  font: inherit;
}

.login__form input[type="submit"] {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: var(--color-accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}