/* ── Pebble Design System ── */

:root {
  --ink: #1a1f2b;
  --pebble: #4a5568;
  --pebble-light: #94a3b8;
  --stone: #e2e8f0;
  --wash: #f1f5f9;
  --surface: #ffffff;
  --creek: #3b82f6;
  --creek-light: #dbeafe;
  --creek-deep: #1e40af;

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
  --content-max: 1200px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --btn-bg: #e2e7ef;
  --btn-bg-hover: #d5dbe5;
  --btn-bg-active: #c8cfdb;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--creek);

  /* Breakpoint reference values (CSS variables don't expand inside @media,
     these are for documentation / JS use; keep @media literals in sync). */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}

/* Horizontal-scroll wrapper for wide tables on small screens */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Base resets ── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-stack);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
}

a {
  color: var(--creek-deep);
  text-decoration: none;
}

a:hover {
  color: var(--creek);
  text-decoration: underline;
}

/* Content links should be underlined for visibility */
.custom-panel-content a,
.info-body a,
.gene-info a,
.specimen-card a:not(.specimen-edit-btn),
.references a,
.quick-links a,
.tool-list a {
  text-decoration: underline;
  text-decoration-color: var(--pebble-light);
  text-underline-offset: 2px;
}

.custom-panel-content a:hover,
.info-body a:hover,
.gene-info a:hover,
.specimen-card a:not(.specimen-edit-btn):hover,
.references a:hover,
.quick-links a:hover,
.tool-list a:hover {
  text-decoration-color: var(--creek);
}

img { max-width: 100%; height: auto; }

/* ── Tooltip hint (dotted underline) ── */
.dotted-hint {
  text-decoration: underline dotted var(--pebble-light);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: help;
}

.dotted-hint:hover {
  text-decoration-color: var(--creek);
}

/* ── Page content padding ── */
.page-content {
  padding: 0 32px;
}

.pebble-container {
  /* padding now handled by .page-content wrapper */
}

/* ── Alerts (Bootstrap-free) ── */
.pebble-messages {
  max-width: var(--content-max);
  margin: 16px auto;
  padding: 0 24px;
}

.pebble-alert {
  position: relative;
  padding: 12px 40px 12px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--stone);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
}

.pebble-alert-close {
  position: absolute;
  right: 12px;
  top: 10px;
  cursor: pointer;
  font-size: 18px;
  color: var(--pebble-light);
  line-height: 1;
}

.pebble-alert-close:hover {
  color: var(--ink);
}

.pebble-alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.pebble-alert-warning {
  background: #fffbeb;
  border-color: #fed7aa;
  color: #92400e;
}

.pebble-alert-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.pebble-alert-info {
  background: var(--creek-light);
  border-color: #93c5fd;
  color: var(--creek-deep);
}

/* ── Search description (override <pre> monospace) ── */

pre.search-main {
  font-family: var(--font-stack);
  font-size: 14px;
  color: var(--pebble);
  white-space: normal;
  margin: 0 0 8px;
}

/* ── Tables: inherit pebble font ── */

table {
  font-family: var(--font-stack);
}

/* ── Global Form Elements ── */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  font-family: var(--font-stack);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--pebble-light);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--creek);
  box-shadow: 0 0 0 3px var(--creek-light);
}

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

select {
  height: 36px;
  cursor: pointer;
}

/* ── Fieldset + Legend ── */

fieldset {
  border: 1.5px solid var(--pebble-light);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 0 16px;
}

legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--pebble);
  padding: 0 6px;
}

/* ── Form table layout (form.as_table) ── */

form th {
  font-family: var(--font-stack);
  font-weight: 600;
  font-size: 14px;
  color: var(--pebble);
  padding: 8px 12px;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

form label {
  font-family: var(--font-stack);
}

form td {
  padding: 8px 0;
  vertical-align: middle;
}

/* ── Form paragraph layout (form.as_p) ── */

form p label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--pebble);
  margin-bottom: 4px;
}

/* ── Select2 overrides ── */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--pebble-light) !important;
  border-radius: var(--radius-md) !important;
  min-height: 36px !important;
  font-family: var(--font-stack) !important;
  font-size: 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

.select2-container--default .select2-selection--single:focus-within,
.select2-container--default .select2-selection--multiple:focus-within,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--creek) !important;
  box-shadow: 0 0 0 3px var(--creek-light) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--creek) !important;
}

.select2-dropdown {
  border: 1.5px solid var(--pebble-light) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-stack) !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-search--inline .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
  font-family: var(--font-stack) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
  padding-left: 12px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--wash) !important;
  border: 1px solid var(--stone) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-stack) !important;
  font-size: 13px !important;
}

.select2-container--default .select2-results__option {
  font-family: var(--font-stack) !important;
  font-size: 14px !important;
  padding: 6px 12px !important;
}

/* ── Submit button fallback ── */

.submit-button,
input[type="submit"],
button[type="submit"] {
  border-radius: var(--radius-md);
  border: 1.5px solid var(--pebble-light);
  padding: 6px 16px;
  height: 36px;
  min-width: 70px;
  font-size: 14px;
  font-family: var(--font-stack);
  color: var(--ink);
  background: var(--btn-bg);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: background 0.15s, border-color 0.15s;
}

.submit-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--btn-bg-hover);
  border-color: var(--pebble);
}

.submit-button:active,
input[type="submit"]:active,
button[type="submit"]:active {
  background: var(--btn-bg-active);
}

.submit-button:focus-visible,
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ── Global focus-visible for keyboard accessibility ── */

a:focus-visible {
  outline: 2px solid var(--creek);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Mobile responsive ── */

@media screen and (max-width: 768px) {
  .page-content {
    padding: 0 16px;
  }

  form table {
    display: block;
  }

  form table tr {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin-bottom: 8px;
  }

  form table th,
  form table td {
    display: block;
    text-align: left;
    padding: 4px 0;
  }

  fieldset {
    padding: 12px;
  }

  pre.search-main {
    font-size: 13px;
  }
}

/* ── Footer ── */

.pebble-footer {
  margin-top: 48px;
  padding: 20px 0;
  border-top: 1px solid var(--stone);
  text-align: center;
  font-size: 13px;
  color: var(--pebble-light);
}
.pebble-footer a {
  color: var(--pebble);
  text-decoration: none;
}
.pebble-footer a:hover {
  color: var(--creek);
}
.pebble-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 16px;
}
.pebble-footer-sep {
  margin: 0 8px;
}