/* General */

.timestamps { float: right; font-size: smaller; font-style: italic; }

.right { float: right; }

nav { display: flex; justify-content: space-between; }
.nav-right { text-align: right; padding-left: 25px; }
nav a { white-space: nowrap; }

.single-login-user { color: #888; }

.index-map-explanation { color: #999; font-size: smaller; font-style: italic; }

.disclaimer { margin-top: 50px; font-size: smaller; color: #999; }
.disclaimer a, .disclaimer a:visited { color: #999; }

/* Layout */

.site-banner { background-color: #f90; color: #fff; text-align: center; padding: 8px 16px; font-size: 14px; margin: -16px -16px 16px; }
.site-banner a { color: black; }
.site-banner a:visited { color: black; }

header { clear: both; margin: 25px 0; }
header.flex { display: flex; justify-content: space-between; }
header.flex .header-col-grow { flex-grow: 1; }
header.flex .header-col-grow * { margin: 0; }

.h2-with-controls { display: flex; justify-content: space-between; border-bottom: 3px double #999; margin: 2.5rem 0 1rem; }
.h2-with-controls h2 { border-bottom: none; margin: 0; }

h1 { margin-top: 10px; }
h2 { border-bottom: 3px double #999; }

tr { border-bottom: none; }

body { max-width: 100%; }

footer { margin-top: 50px; }
footer p { font-size: smaller; color: #999; }
footer a, footer a:visited { color: #999; }

.columns { display: flex; justify-content: space-between; gap: 20px; }
.columns.vertically-centered { align-items: center; }
.columns .column { flex: 1; flex-grow: 1; }
.columns .column-right { text-align: right; }

table { width: auto; }
table.full-width-table { width: 100%; }

/* Net */

.net-breadcrumbs { margin-top: 25px; }
.club-logo { margin-top: 25px; max-height: 125px; }
.small-club-logo { max-height: 50px; }

span.Offline { color: #ccc; }

tr.currently-operating td { background-color: #fcf; }
tr.checked-out td, tr.checked-out td a { color: #999; }
td { white-space: nowrap; }
td.can-wrap { white-space: normal; min-width: 150px; }
tr.odd { background-color: #eee; }
tr.remarks { color: #777 }
td.avatar-cell { height: 64px; }

.blue-screen { background-color: #e8f4f8; }
.chat-message { padding: 5px; margin: 5px 0; }
.chat-odd { background-color: #d4e5ea; }
.chat-sender { }
.chat-timestamp { color: #888; }

.favorite-star { width: 15px; height: 15px; max-width: none; cursor: pointer; }
.favorite-star-big { width: 30px; height: 30px; cursor: pointer; }

#net-map { height: 500px; }

.logger-control, .logger-control .material-symbols-outlined { font-size: 1.0em; }

@media only screen and (max-height: 800px) {
  #net-map { height: 300px; }
}

/* Forms */

form.inline { display: inline; }
label.inline { display: inline; }

form.wide input[type="text"] { width: 800px; max-width: 100%; }
form.wide textarea { width: 800px; max-width: 100%; }
form.wide input[type="text"].inline { width: auto; max-width: auto; }

form label { display: block; margin-bottom: 20px; }
form label.sub { margin-top: -20px; }

form.log-form input { width: 100%; }
div.log-form-info { margin-top: 10px; }

input, select { padding: 8px; font-size: larger; margin: 0 3px 3px 0; }

/* Misc */

.clear { clear: both; }

.highlight { background-color: #ffc; }
em.highlight { font-style: normal; }

.discreet { color: #999; }

.error, .danger { color: red; }
.warning, .warning a { color: orange !important; }
.info-callout { background-color: #9cf; padding: 15px; border: 1px solid #39f; }
.error-callout { background-color: #fcc; padding: 15px; border: 1px solid red; }
.warning-callout { background-color: #fc9; padding: 15px; border: 1px solid orange; }

.notice { color: #39f; }

ul.no-bullets { list-style-type: none; padding: 0; margin: 0; }

.admin-only { background-color: #dedede; padding: 15px; margin: 25px 0; }

.linkish { text-decoration: underline; cursor: pointer; }
.linkish:hover { color: dodgerblue; }

a.btn { padding: 4px; background-color: #eee; border: 1px solid #ccc; border-radius: 5px; text-decoration: none; color: #333; font-family: sans-serif; }

.dark-only { display: none; }

.active-ragchew-net { font-weight: bold; }
.closed-ragchew-net {}

/* Mobile */

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  .table-wrapper { overflow-x: auto; }
  #net-map { height: 300px; }
  .columns { display: block; }
  .columns.vertically-centered { align-items: normal; }
  .columns .column { flex: 0; flex-grow: 0; }
  .columns .column-right { text-align: left; }
  header.flex { flex-direction: column-reverse; }
  header.flex img { margin: 20px 0; }
  .no-wrap-on-mobile { white-space: nowrap; }
}
/* Message reactions */
.reaction-bar {
  position: absolute;
  top: -10px;
  right: 10px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 2px 5px;
  display: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 10;
}

.reaction-emoji {
  cursor: pointer;
  margin: 0 2px;
  font-size: 16px;
  user-select: none;
  padding: 2px;
  border-radius: 3px;
}

.reaction-emoji:hover {
  background-color: #f0f0f0;
}

.reaction-emoji.user-reacted {
  background-color: #333;
}

.reaction-emoji.user-reacted:hover {
  background-color: #555;
}

.reaction-display {
  margin-top: 5px;
}

.reaction-bubble {
  display: inline-block;
  background: #f0f0f0;
  border-radius: 10px;
  padding: 2px 6px;
  margin: 0 2px 2px 0;
  font-size: 12px;
  cursor: help;
}
.autocomplete-dropdown {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  width: 100%;
}

.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.autocomplete-item:hover {
  background-color: #f5f5f5;
}

.autocomplete-item:last-child {
  border-bottom: none;
}
label:has(.autocomplete-dropdown) {
  position: relative;
}