/* Neural Salon - main stylesheet */
/* hand coded - no frameworks */

:root {
  --font-body:    "Century Gothic", Century Gothic, Verdana, Arial, Helvetica, sans-serif;
  --font-heading: "Courier New", Courier, monospace;
}

body {
  background-color: #090911;
  color: #BBBBCC;
  font-family: var(--font-body);
  font-size: 12px;
  margin: 6px;
  line-height: 1.5;
}

a            { color: #3399FF; }
a:visited    { color: #9933CC; }
a:hover      { color: #FFFFFF; text-decoration: underline; }
a:active     { color: #FF3333; }

img { border: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: bold;
  margin: 0 0 6px 0;
}

p { margin: 0 0 8px 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid #1A2233;
  margin: 6px 0;
}

/* FORMS */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
  background-color: #0D0D1A;
  color: #CCCCDD;
  border: 1px solid #2A3A55;
  padding: 2px 4px;
  font-family: inherit;
  font-size: 11px;
}

input[type="submit"] {
  background-color: #003366;
  color: #FFFFFF;
  border: 2px outset #336699;
  padding: 2px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

input[type="submit"]:hover {
  border-style: inset;
  background-color: #004488;
}

button {
  background-color: #0D1A2A;
  color: #AABBCC;
  border: 1px solid #2A3A55;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

button:hover {
  background-color: #1A2A3D;
  border-color: #3A5A77;
}

textarea { resize: vertical; min-height: 80px; }

/* FILE UPLOAD */
.file-upload {
  border: 2px dashed #2A3A55;
  padding: 15px;
  text-align: center;
  background: #050510;
  color: #6699CC;
  font-size: 11px;
  display: block;
  cursor: pointer;
}
.file-upload.drag-active {
  border-color: #3399FF;
  background: #000D1A;
}
.file-upload input[type="file"] { display: none; }

/* JS-RENDERED EVENT CARDS */
.event-card {
  border-bottom: 1px dotted #1A2233;
  padding: 5px 2px;
  cursor: pointer;
  overflow: hidden;
}
.event-card:hover { background-color: #0A0A18; }

.event-image {
  float: left;
  width: 52px;
  height: 52px;
  margin-right: 8px;
  background: #07070F;
  border: 1px solid #1A2233;
  overflow: hidden;
  text-align: center;
  line-height: 52px;
}
.event-image img {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: cover;
}
.event-symbol {
  font-size: 22px;
  color: #3D5A80;
  line-height: 52px;
  display: block;
  text-align: center;
}

.event-card .event-title {
  font-size: 12px;
  font-weight: bold;
  color: #CCDDEF;
  margin: 0 0 2px 0;
  line-height: 1.3;
}
.event-details {
  font-size: 11px;
  color: #8899BB;
}
.event-host { display: inline; }
.event-host::after { content: " \00B7 "; color: #2A3A55; }
.event-time { display: inline; }
.event-price {
  font-size: 11px;
  font-weight: bold;
  color: #FFCC33;
  display: block;
}
.event-price.free { color: #33CC66; }
.event-card::after { content: ""; display: table; clear: both; }

/* SAVE BUTTON ON CARDS */
.save-button {
  background-color: #0D1A2A;
  border: 1px solid #2A3A55;
  color: #6677AA;
  font-size: 13px;
  cursor: pointer;
  float: right;
  padding: 1px 6px;
  margin-left: 2px;
  font-family: inherit;
  line-height: 1.5;
}
.save-button:hover { background-color: #1A2A3D; border-color: #3A5A77; }
.save-button.saved { color: #FFCC33; border-color: #554400; }
.save-event-btn.saved { color: #FFCC33; border-color: #554400; background-color: #1A1200; }
.attend-event-btn.attending { color: #44DD88; border-color: #1A5535; }
#add-to-collection-btn.in-collection { color: #3399FF; border-color: #1A3A66; background-color: #050D1A; }

/* COLLECTION CARDS */
.collection-card {
  border-bottom: 1px dotted #1A2233;
  padding: 4px 2px;
}
.collection-card:hover { background-color: #0A0A18; }
.collection-card::after { content: ""; display: table; clear: both; }

.collection-thumb-link {
  display: block;
  width: 52px;
  height: 52px;
  background: #07070F;
  border: 1px solid #1A2233;
  overflow: hidden;
  text-align: center;
  line-height: 52px;
}
.collection-thumb-link img {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: cover;
}
.collection-thumb-placeholder {
  font-size: 22px;
  color: #3D5A80;
  line-height: 52px;
  display: block;
  text-align: center;
}
.collection-title {
  font-size: 12px;
  font-weight: bold;
  color: #CCDDEF;
  margin: 0 0 2px 0;
}
.collection-desc {
  font-size: 11px;
  color: #6677AA;
  margin: 0 0 2px 0;
}
.collection-meta {
  font-size: 11px;
  color: #8899BB;
}
.collection-delete-link { color: #664444; }
.collection-delete-link:visited { color: #664444; }
.collection-delete-link:hover { color: #FF6666; }

/* COLLECTION BUTTON ON CARDS */
.coll-button {
  background-color: #0D1A2A;
  border: 1px solid #2A3A55;
  color: #6677AA;
  font-size: 13px;
  cursor: pointer;
  float: right;
  padding: 1px 6px;
  margin-left: 2px;
  font-family: inherit;
  line-height: 1.5;
}
.coll-button:hover { background-color: #1A2A3D; border-color: #3A5A77; color: #3399FF; }
.coll-button.in-collection { color: #3399FF; border-color: #1A3A66; }

/* COLLECTION PICKER */
.collection-picker {
  border: 1px solid #1A2233;
  background: #07070F;
  padding: 6px 8px;
  margin-top: 5px;
  width: 230px;
}
.picker-collection-row {
  padding: 3px 2px;
  cursor: pointer;
  border-bottom: 1px dotted #1A2233;
}
.picker-collection-row:last-child { border-bottom: none; }
.picker-collection-row:hover { background-color: #0A0A18; padding-left: 6px; }
.picker-collection-row--member { color: #3399FF; cursor: default; }
.picker-collection-row--member:hover { background-color: transparent; padding-left: 2px; }

/* COLLECTION DETAIL - event rows */
.collection-event-row .event-card { cursor: pointer; }
.collection-event-row .collection-delete-link { pointer-events: auto; }

/* COLLECTION DETAIL - header image */
#collection-header-image {
  text-align: center;
}
#collection-header-img {
  border-radius: 2px;
}
#collection-header-placeholder {
  text-align: center;
}
#collection-header-placeholder {
  text-align: center;
}

/* EMPTY STATE */
.empty-state {
  padding: 20px;
  text-align: center;
  color: #6677AA;
  font-size: 11px;
  border: 1px dashed #1A2233;
}

/* FIELD ERRORS */
.field-error { color: #FF6666; font-size: 11px; display: block; margin-top: 2px; }
.form-error  { color: #FF6666; font-size: 11px; }
.form-success { color: #33CC66; font-size: 11px; }

/* SEARCH HIGHLIGHT */
.highlight { background: #332200; color: #FFCC33; }

/* TOAST NOTIFICATIONS */
.toast-container {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 9999;
}
.toast {
  background: #00001A;
  border: 1px solid #2A3A66;
  color: #CCCCDD;
  padding: 4px 8px;
  margin-bottom: 3px;
  font-size: 11px;
}
.toast.error   { border-color: #880000; color: #FF9999; background: #180000; }
.toast.success { border-color: #006633; color: #99FFCC; background: #001810; }
.toast.info    { border-color: #225588; color: #99CCFF; }

/* LOADING OVERLAY */
.loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* ADMIN TABLE */
.admin-table { width: 100%; font-size: 11px; border-collapse: collapse; }
.admin-table th {
  background: #001133;
  color: #6699CC;
  padding: 3px 6px;
  text-align: left;
  border-bottom: 1px solid #1A3355;
}
.admin-table td {
  padding: 3px 6px;
  border-bottom: 1px dotted #161626;
  vertical-align: top;
}
.status-active  { color: #33CC66; }
.status-pending { color: #FFCC33; }
.status-draft   { color: #8899AA; }

/* AUTH FORM HELPERS - used by inline JS */
.hidden { display: none !important; }
.auth-form.hidden { display: none !important; }

/* no-js fallback */
.no-js .js-only { display: none !important; }

/* mobile */
@media (max-width: 700px) {
  .hide-mobile  { display: none !important; }
  .main-wrap    { width: 100% !important; }

  /* filter bar: each group onto its own line */
  .filter-group { display: block; margin-bottom: 4px; }

  /* stack nav brand + links vertically */
  .nav-table tr { display: block; }
  .nav-table td { display: block; text-align: left !important; padding: 4px 7px; }

  /* slightly larger tap targets for links */
  a { line-height: 1.8; }

  /* bump base font size up a touch */
  body { font-size: 13px; }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  select { font-size: 13px; padding: 4px 6px; }
  input[type="submit"], button { font-size: 13px; padding: 4px 12px; }

  /* collection detail: stack image above info on mobile */
  .collection-header-layout td { display: block; width: 100% !important; }
  .collection-header-gutter { display: none !important; }
  .collection-header-image-col { text-align: center; margin-bottom: 8px; }
  #collection-header-img { width: 120px !important; height: 120px !important; }
  #collection-header-placeholder table { width: 120px !important; height: 120px !important; }
  #collection-header-placeholder font { font-size: 32px !important; }

  /* image edit bar: stack on mobile */
  #collection-image-edit-bar td { display: block; width: 100% !important; }
  #collection-image-edit-bar td:first-child { margin-bottom: 6px; }
  #collection-image-edit-bar td:first-child + td { display: none !important; }

  /* event detail: stack image above info on mobile */
  .event-detail-layout tr { display: block; }
  .event-detail-image-col,
  .event-detail-info-col { display: block; width: 100% !important; }
  .event-detail-gutter { display: none !important; }
  .event-detail-image-col { margin-bottom: 10px; text-align: center; }
  .event-detail-img { width: auto !important; max-width: 70% !important; height: auto !important; }
  .event-detail-placeholder { width: 60% !important; margin: 0 auto; }
  /* remove value cell backgrounds so the table doesn't look patchy */
  .event-detail-meta-val { background-color: transparent !important; }
}

/* compact event meta */
.event-meta-compact {
  margin-bottom: 14px;
  line-height: 1.5;
}
.event-meta-date {
  font-family: Verdana, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #CCDDEF;
  margin-bottom: 3px;
}
.event-meta-venue {
  font-family: Verdana, sans-serif;
  font-size: 12px;
  color: #AABBCC;
  margin-bottom: 5px;
}
.event-meta-address {
  color: #7788AA;
}
.event-meta-row {
  font-family: Verdana, sans-serif;
  font-size: 11px;
  color: #889AAB;
}
.event-meta-sep {
  margin: 0 5px;
  color: #2A3A50;
}
.event-meta-host {
  color: #889AAB;
}
.event-meta-source {
  color: #445566;
}
.price-free { color: #33CC66; font-weight: bold; }
.price-paid { color: #FFCC33; font-weight: bold; }
.price-tba { color: #556677; }