/* =========================================================
   Standalone Public Header styling for pages that don't load
   the main style.css (currently: war-room.html / Control Centre).
   Extracted verbatim from style.css's .rn-public-header block so
   rn-public-header.js renders identically everywhere.
   ========================================================= */

.rn-public-header {
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 0 24px;
  background: #fffaf6;
  border-bottom: 1px solid rgba(104,64,45,.10);
  position: sticky;
  top: 0;
  z-index: 400;
}

/* Right-side cluster: event picker + auth (name / Login / Logout) + posko ⚙.
   One flex box so the items never wrap out of alignment, and `order` keeps a
   stable left→right sequence no matter which script injects its item first. */
.rn-public-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-left: auto;
}
.rn-public-actions > .rn-event-picker    { order: 1; }
.rn-public-actions > .rn-public-user     { order: 2; }
.rn-public-actions > #rnPoskoSettingsBtn { order: 3; }
.rn-public-actions > .rn-public-login    { order: 4; }
.rn-public-actions > .rn-public-logout   { order: 5; }

.rn-public-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.rn-public-brand img {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
}

.rn-public-brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #2d211b;
  white-space: nowrap;
}

.rn-public-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.rn-public-links a {
  min-height: auto;
  padding: 6px 6px;
  border-radius: 6px;
  color: #5a4a40;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}

.rn-public-links a:hover {
  background: rgba(104,64,45,.06);
  color: #2d211b;
}

.rn-public-login {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 7px 16px;
  border-radius: 7px;
  background: #e8835d;
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid #e8835d;
  transition: background .12s ease;
}

.rn-public-login:hover {
  background: #d96f49;
}

.rn-public-user {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: #c9502f;
  white-space: nowrap;
}
.rn-public-login.rn-public-logout {
  background: #fff;
  color: #c9502f !important;
  border-color: rgba(232, 117, 88, .45);
}
.rn-public-login.rn-public-logout:hover { background: #fff2ec; }

.rn-public-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.rn-public-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  border-radius: 999px;
  background: #40312b;
}

/* Shared disaster-event picker in the public header */
.rn-event-picker {
  display: inline-flex;
  align-items: center;
}

.rn-event-picker label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rn-event-picker label > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a5a45;
}

.rn-event-picker select {
  max-width: 200px;
  min-height: 32px;
  padding: 5px 26px 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(104,64,45,.18);
  background: #fff;
  color: #40312b;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.rn-event-picker select:focus-visible {
  outline: 2px solid rgba(232,117,88,.55);
  outline-offset: 1px;
}

@media (max-width: 900px) {
  .rn-public-header {
    min-height: 64px;
    padding: 7px 20px;
    row-gap: 8px;
  }

  .rn-public-brand img {
    width: 30px;
    height: 30px;
  }

  .rn-public-toggle {
    display: block;
    order: 1;
    margin-left: auto;
  }

  .rn-public-actions {
    order: 5;
    flex-basis: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .rn-event-picker {
    width: 100%;
  }

  .rn-event-picker label {
    width: 100%;
  }

  .rn-event-picker select {
    flex: 1;
    max-width: none;
  }

  .rn-public-links {
    display: none;
    flex-basis: 100%;
  }

  .rn-public-header.is-open .rn-public-links {
    order: 10;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding-top: 8px;
  }

  .rn-public-header.is-open .rn-public-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    border: 1px solid rgba(104,64,45,.14);
    background: rgba(255,255,255,.70);
    text-align: center;
    font-size: 12px;
  }
}

/* Control Centre has its own native disaster-event selector
   (#activeEventSelect, wired to rn-control-centre-final.js) further down
   in .cc-header -- the shared top-bar picker here would just be a second,
   disconnected copy of the same control. Hide it on this page only. */
.rn-event-picker {
  display: none;
}