/*
 * 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 here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
  --ink: #1a1d24;
  --muted: #5b6472;
  --line: #e3e7ee;
  --bg: #f7f8fa;
  --accent: #1f6feb;
  --warn: #b54708;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
}

a { color: var(--accent); }

.flash { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }
.flash p { padding: 0.6rem 0.9rem; border-radius: 6px; margin: 0.75rem 0; }
.flash-notice { background: #e7f3ee; color: #145239; }
.flash-alert { background: #fdecea; color: #8a1c12; }

/* Landing page */
.hero { max-width: 820px; margin: 0 auto; padding: 5rem 1.5rem 2rem; }
.hero h1 { font-size: 2.4rem; line-height: 1.15; margin: 0 0 1rem; }
.hero p.subhead { font-size: 1.2rem; color: var(--muted); }
.cta {
  display: inline-block; margin-top: 1.5rem; padding: 0.8rem 1.4rem;
  background: var(--accent); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600;
}
.section { max-width: 820px; margin: 0 auto; padding: 1.5rem; }
.section h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.section ul { color: var(--muted); }
.footer { max-width: 820px; margin: 2rem auto; padding: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); }

/* Admin */
.admin { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.admin h1 { font-size: 1.5rem; }
.admin table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin th, .admin td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin th { color: var(--muted); font-weight: 600; }
.filters { background: var(--bg); padding: 1rem; border-radius: 8px; margin-bottom: 1.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: end; }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 99px; font-size: 0.75rem; background: var(--bg); border: 1px solid var(--line); }
.badge-test { background: #fff4e5; color: var(--warn); border-color: #f1c98e; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.card h3 { margin-top: 0; font-size: 1rem; }
.card pre { white-space: pre-wrap; word-break: break-word; background: var(--bg); padding: 0.75rem; border-radius: 6px; font-size: 0.85rem; }
.actions form { display: inline; }
.actions button, .actions a.button { margin: 0.2rem 0.2rem 0.2rem 0; padding: 0.4rem 0.7rem; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
textarea { width: 100%; min-height: 120px; font-family: inherit; font-size: 0.9rem; padding: 0.5rem; }
@media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }