*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Helvetica, Arial, sans-serif;
  background: #fafafa;
  color: #111;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

.hidden { display: none !important; }

/* ── Login ─────────────────────────────────────────────────────── */

#view-login {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1.5rem;
}
#view-login h1 { font-size: 1.5rem; font-weight: 400; margin-bottom: 2rem; }

/* ── Shell ─────────────────────────────────────────────────────── */

header {
  background: #111; color: #fff;
  padding: .85rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
header .brand { font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; }
header nav { display: flex; gap: .35rem; flex-wrap: wrap; }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

h2 { font-size: 1.15rem; font-weight: 400; margin-bottom: 1rem; }
h3 { font-size: .95rem; font-weight: 600; margin: 1.5rem 0 .75rem; }

/* ── Controls ──────────────────────────────────────────────────── */

input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: .55rem .7rem;
  font-family: inherit; font-size: .9rem;
  border: 1px solid #ccc; background: #fff; color: #111;
  outline: none; border-radius: 2px;
}
input:focus, select:focus, textarea:focus { border-color: #111; }
textarea { min-height: 8rem; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; }

label { display: block; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .06em; color: #888; margin-bottom: .3rem; }

.field { margin-bottom: .9rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > .field { flex: 1; min-width: 12rem; }

button {
  font-family: inherit; font-size: .85rem;
  padding: .5rem .9rem; border: 1px solid #111;
  background: #111; color: #fff; cursor: pointer; border-radius: 2px;
}
button:hover { background: #333; }
button:disabled { opacity: .4; cursor: default; }
button.secondary { background: #fff; color: #111; }
button.secondary:hover { background: #eee; }
button.danger { background: #fff; color: #b00; border-color: #b00; }
button.danger:hover { background: #b00; color: #fff; }
button.nav { background: transparent; border-color: transparent; color: #bbb; }
button.nav:hover { color: #fff; background: rgba(255,255,255,.12); }
button.nav.active { color: #111; background: #fff; }
button.small { font-size: .75rem; padding: .3rem .55rem; }

/* ── Cards & tables ────────────────────────────────────────────── */

.card {
  background: #fff; border: 1px solid #e5e5e5;
  border-radius: 3px; padding: 1.1rem; margin-bottom: 1rem;
}

/* Wide tables scroll inside their card rather than pushing the page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; background: #fff; min-width: 34rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid #eee; }
th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #888; font-weight: 600; }
tr:last-child td { border-bottom: none; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

.event-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.event-card .meta { font-size: .8rem; color: #888; margin-top: .2rem; }
.event-card a { color: #111; font-size: 1rem; text-decoration: none; }
.event-card a:hover { text-decoration: underline; }

.stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat { background: #fff; border: 1px solid #e5e5e5; border-radius: 3px;
  padding: .7rem 1rem; min-width: 6.5rem; }
.stat .n { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.stat .l { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #888; }

.badge { display: inline-block; font-size: .68rem; padding: .1rem .4rem;
  border-radius: 2px; text-transform: uppercase; letter-spacing: .05em; }
.badge.ok { background: #e6f4ea; color: #137333; }
.badge.warn { background: #fef7e0; color: #b06000; }
.badge.err { background: #fce8e6; color: #c5221f; }
.badge.mut { background: #eee; color: #666; }

.msg { padding: .6rem .8rem; border-radius: 2px; margin-bottom: 1rem; font-size: .85rem; }
.msg.error { background: #fce8e6; color: #c5221f; }
.msg.ok { background: #e6f4ea; color: #137333; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.media-tile { position: relative; aspect-ratio: 1; background: #eee; overflow: hidden; border-radius: 2px; }
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-tile .overlay {
  position: absolute; inset: auto 0 0 0; padding: .3rem .4rem;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff; font-size: .68rem; line-height: 1.3;
}
.media-tile .del {
  position: absolute; top: 4px; right: 4px; padding: .1rem .4rem;
  font-size: .7rem; background: rgba(0,0,0,.6); border: none; color: #fff; border-radius: 2px;
}
.media-tile .ph { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: #aaa; font-size: .7rem; }

.muted { color: #888; font-size: .8rem; }
.spacer { height: 1rem; }
.right { text-align: right; }
.inline-actions { display: flex; gap: .35rem; flex-wrap: wrap; }

/* Assigned-event chips carry their own remove control. */
.badge.assigned { margin-right: .3rem; display: inline-flex; align-items: center; gap: .3rem; }

.badge-x {
  background: none; border: none; padding: 0;
  color: inherit; opacity: .55; cursor: pointer;
  font-size: .85rem; line-height: 1;
}
.badge-x:hover { opacity: 1; color: #b00; background: none; }

/* Destructive actions are visually separated so they are not reached by habit. */
.card.danger-zone { border-color: #f0c9c5; background: #fffbfb; }
.card.danger-zone h3 { color: #b00; }

tr.row-disabled td { opacity: .55; }

/* The header nav is top-level navigation; detail screens need their own
   way back to the list they were reached from. */
.back-link {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: .6rem;
  color: #888;
  font-size: .8rem;
  cursor: pointer;
}
.back-link:hover { color: #111; background: none; text-decoration: underline; }

.title-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .15rem;
}
.title-row h2 { margin-bottom: 0; }
.title-row a { line-height: 1; }