/* NetDB site baseline styles - styles.css
   Created: 2026-07-16
*/

/* Reset and base */
* { box-sizing: border-box; }
html,body{ height:100%; margin:0; padding:0; }
body{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height:1.45; color:#222; background:#fff; }

/* Layout */
.container{ max-width:1100px; margin:0 auto; padding:16px; }
.header{ padding:24px 16px; background:#1abc9c; color:#fff; }
.header h1{ margin:0 0 6px 0; font-size:1.6rem; }
.header p{ margin:0; opacity:0.95; }
/* Header image */
.header img{ height:120px; margin-bottom:20px; }

/* Navigation */
nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:8px; background:#333; }
nav ul li{ }
nav ul li a{ display:block; padding:12px 16px; color:#fff; text-decoration:none; }
nav ul li a:hover{ background:#111; }
/* Active nav item */
.nav-links a.active{ background:#16a085; color:#fff; font-weight:600; }
.nav-links li{ list-style:none; }
nav{ margin-bottom:0; background:#333; }
nav.container{ max-width:1100px; margin:0 auto; padding:0; }

/* Content */
.content{ padding:20px 0; }

/* Responsive image */
img{ max-width:100%; height:auto; display:block; }

/* Forms and tables */
input, select, textarea, button{ font:inherit; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:8px; border:1px solid #ddd; text-align:left; }

/* Search results */
.search-results .results-header{ margin-bottom:12px; }
.search-results .results-subtitle{ margin-top:4px; color:#555; }
.search-results .results-note{ margin-top:4px; color:#2f4f4f; font-size:0.95rem; }
.results-actions{ display:flex; gap:10px; align-items:center; margin:12px 0 16px; }
.results-actions button,
.results-actions .btn-link{
  border:1px solid #1abc9c;
  background:#1abc9c;
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  text-decoration:none;
  cursor:pointer;
}
.results-actions .btn-link{ display:inline-block; }
.results-actions button:hover,
.results-actions .btn-link:hover{ background:#16a085; border-color:#16a085; }
.results-table-wrap{ overflow-x:auto; border:1px solid #e5e5e5; border-radius:8px; width:100%; }
.results-table{ min-width:100%; width:100%; }
.results-table thead th{ background:#f6fbfa; }
.results-table tbody tr:nth-child(even){ background:#fafafa; }
.inline-edit-link{
  display:inline-block;
  border:1px solid #1abc9c;
  color:#1abc9c;
  padding:3px 8px;
  border-radius:4px;
  text-decoration:none;
}
.inline-edit-link:hover{ background:#1abc9c; color:#fff; }
.quick-edit-cell{ white-space:nowrap; }
.mode-review-summary{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:12px 0 16px;
  color:#2f4f4f;
}
.mode-input{
  min-width:120px;
  width:100%;
}
.status-message{
  background:#f0fbf8;
  border:1px solid #b8eadf;
  border-radius:6px;
  color:#1d6f61;
  margin:0 0 16px;
  padding:10px 12px;
}

/* Utility */
.hidden{ display:none !important; }
.center{ text-align:center; }

/* Contact button and modal */
.btn-contact{
  background:#1abc9c;
  color:#fff;
  border:1px solid #1abc9c;
  padding:6px 12px;
  border-radius:4px;
  cursor:pointer;
  text-decoration:none;
  font-size:0.9rem;
  white-space:nowrap;
}
.btn-contact:hover{ background:#16a085; border-color:#16a085; }

.modal{
  display:none;
  position:fixed;
  z-index:1000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  animation:fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}

.modal-content{
  background:#fff;
  margin:50px auto;
  padding:24px;
  border:1px solid #bbb;
  border-radius:8px;
  width:90%;
  max-width:500px;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
  animation:slideIn 0.3s;
}

@keyframes slideIn {
  from { transform:translateY(-50px); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}

.modal-content h3{
  margin-top:0;
  margin-bottom:16px;
  color:#333;
}

.modal-content p{
  margin:8px 0;
}

.modal-close{
  color:#aaa;
  float:right;
  font-size:28px;
  font-weight:bold;
  cursor:pointer;
  line-height:20px;
}

.modal-close:hover,
.modal-close:focus{
  color:#000;
}

/* Responsive adjustments */
@media (max-width:720px){
  .header{ padding:18px 12px; }
  nav ul{ flex-wrap:wrap; }
  .header img{ height:80px; }
  .header h1{ font-size:1.25rem; }
  .results-actions{ flex-wrap:wrap; }
}

/* Accessibility focus */
a:focus, button:focus, input:focus{ outline:3px solid #88d6c2; outline-offset:2px; }

@media print{
  .no-print{ display:none !important; }
  nav, .header{ display:none !important; }
  .container{ max-width:none; margin:0; padding:0; }
  .results-table{ min-width:0; width:100%; }
}