/*
 * 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.
 */

/* Minimal neutral styling for the server-rendered account pages. */
body { font-family: system-ui, sans-serif; margin: 0; color: #222; background: #fff; }
.page { max-width: 32rem; margin: 2rem auto; padding: 0 1rem; }
.page-wide { max-width: 64rem; }
.account-nav { display: flex; gap: 1rem; align-items: center; justify-content: flex-end; padding: 0.5rem 1rem; border-bottom: 1px solid #ddd; }
.account-nav form { margin: 0; }
.field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; }
.field input { padding: 0.4rem; font-size: 1rem; }
.hint { color: #666; font-size: 0.875rem; }
.flash { padding: 0.5rem 0.75rem; border-radius: 4px; }
.flash-alert, .errors { background: #fdecea; color: #8a1c13; }
.flash-notice { background: #e8f5e9; color: #1b5e20; }
.errors { padding: 0.5rem 0.75rem; border-radius: 4px; margin-bottom: 1rem; }
.errors ul { margin: 0; padding-left: 1.25rem; }

/* Admin area */
.page-wide { max-width: 56rem; }
.admin-nav { display: flex; gap: 1rem; margin-bottom: 1rem; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid #ddd; vertical-align: top; }
.admin-table .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.admin-table .actions form { margin: 0; }
.placeholder { color: #666; font-style: italic; }

.badge { display: inline-block; min-width: 1.25rem; padding: 0 0.35rem; border-radius: 999px; background: #c62828; color: #fff; font-size: 0.75rem; text-align: center; }
.people { list-style: none; padding: 0; }
.people li { display: flex; gap: 0.75rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid #eee; }
.people li .name { flex: 1; }
.people form { margin: 0; }
.presence { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #bbb; }
.presence.online { background: #2e7d32; }

/* Top bar: one per page for approved users. Two tabs, Spil and Konto. */
.site-bar { border-bottom: 1px solid #ddd; background: #f7f7f7; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding: 0.5rem 1rem; }
.site-nav a { color: inherit; text-decoration: none; }
.site-nav .brand { font-weight: 700; font-size: 1.1rem; }
.site-nav .tabs { display: flex; gap: 0.25rem; flex: 1; }
.site-nav .tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; border-radius: 4px; border: 1px solid transparent; min-height: 2.25rem; box-sizing: border-box; }
.site-nav .tab:hover { background: #ececec; }
.site-nav .tab-active { background: #fff; border-color: #bbb; font-weight: 600; box-shadow: inset 0 -3px 0 #333; }
.site-nav .marker { font-size: 0.75rem; padding: 0 0.35rem; border-radius: 999px; background: #1b5e20; color: #fff; font-weight: 400; }
.site-nav .user { display: flex; align-items: center; gap: 0.75rem; }
.site-nav .username { color: #444; }
.site-nav form { margin: 0; }
.site-bar-compact .site-nav { padding: 0.15rem 0.75rem; }
.site-bar-compact .site-nav .tab { padding: 0.2rem 0.6rem; min-height: 0; }
@media (max-width: 30rem) {
  .site-nav .tabs { order: 3; flex-basis: 100%; }
  .site-nav .tab { flex: 1; justify-content: center; }
  .site-nav .user { margin-left: auto; }
}

/* Konto sub-navigation, at the top of every Konto page. */
.konto-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding-bottom: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid #ddd; }
.konto-nav a, .admin-nav a { padding: 0.25rem 0; }
.konto-nav a.active, .admin-nav a.active { font-weight: 600; color: inherit; text-decoration: none; }
.admin-nav { flex-wrap: wrap; }
.back-link { margin-top: 1.5rem; }